How to add swipe support to your web application

logoAre you creating a web application that you want to be able to be used on a tablet? Then you might want to check out the Dojo toolkit. Dojo provides a very simple way to handle swipe events in your web application. In this post I used the dojox.gesture package. Why would you want to use Dojo?  Here are a few good reasons from the documentation:

dojox/gesture has been designed with the following rationale:

  • Device neutral – The target is to be compatible with most popular devices(single touch gestures should also work well on desktops).
  • Compatibility and reusability – Applicable and can be used with dijit widgets, dojo core(dnd), dojox/mobile or dojox/charting etc.
  • Scalability – A modularized event processing mechanism makes it very easy to extend with more customized gestures.

As of version 1.7, here is the list of devices and browsers:

dojox/gesture is working well with:

1. Desktops – IE8+, FF 3.6+, Chrome v10+, Safari 5+
2. Touch devices – Android 2.2/2.3 – iOS 3/4

In the code below I put a listener on the entire body of the HTML where I tagged the <body> element with the id “body”.

function registerSwipeListener(){
	require([ "dojo", "dojox/gesture/swipe" ], 
		function(dojo, swipe, tap){

                        //connect the listener to the "body" element
			dojo.connect(dojo.byId("body"), swipe.end, function(e){

			if (current_view != "edit"){
                                //Check and which which difference is bigger since
                                //we only support up, down, left, right
				if (Math.abs(e.dx) > Math.abs(e.dy)){
					if (e.dx > 0){
						viewerMoveLeft();
					}else{ 
						viewerMoveRight();
					}
				}else{
					if (e.dy > 0){
						viewerMoveUp();
					}else{
						viewerMoveDown();
					}				
				}
			}		
		});
	});

 

Advertisements

First two weeks with the Nook Color

After two weeks with the Nook Color I am even more satisfied that I got this for my wife. I was really on the edge of getting her the Kindle or even the iPad. Now that the App store is open, it seems more and more function is added each week. For $249 this is clearly a steal in the tablet world.

First impressions of the Nook Color

I got my wife Kim the Nook Color yesterday for her birthday and I have to say I am totally impressed with the device. For only $259 I basically feel she has a fully blown laptop, oops, tablet! And I was right, I have been reading a lot about it over the past month and Barnes and Noble have been saying they will be opening up the app store and some other things on the device. Well, that time has come, check out the article below. In my mind, you can’t beat the price and function of this little gem. One major feature is the memory extension slot, so you basically have unlimited space.

Nook Color gets apps like Angry Birds, Epicurious, Dead Space – Pop2it – Zap2it.

POLL: Mobile development, native or HTML 5 based?

A timely post on InfoWorld made me think of a poll that would be interesting to see how the general community feels on the subject.  I do have my own opinions however; after playing with the Android SDK and creating some basic applications for the device.  In short, until we get JavaScript libraries like jQTouch for all major frameworks like Dojo and JQuery or HTML supports such API’s it will be hard to completely develop with HTML 5 and JavaScript alone.  However, I do think HTML 5 + JavaScript should be the right answer in the long run but today I would have to go with option 3 – both Native and HTML 5 for the development choice. The good news is most of the development for platforms like Android use Eclipse for both web and native so you can essentially learn and develop everything for free!

What do you think?

[poll id=”12″]

Playing with Android SDK – Part 2

After getting to know the onTouchEvent() a little better I decided to figure out the coordinate system of the Android graphics system and put in some movement logic. I thought I needed to figure out how to use the velocity tracker in order to do this, which is a very cool class and its a little different approach than other graphics systems I have coded to in the past.  Once I got the concept, I was able to capture where the touch was started and where it ended along with how fast it was.  The key is to coordinate the MotionEvent.ACTION_DOWN and the MotionEvent.ACTION_MOVE event types.  Once I got the concept of how to use these events the code became much easier and I actually didn’t even end up using the velocity tracker!

Here is a basic system I created to figure out where the touch happened and as the square is dragged across the board I calculate what square the touch is over by highlighting the square in blue.

http://blog.balfes.net/wp-content/uploads/2010/06/Mouse_movement_and_coordinate_resolution.swf

Intents have lots of applications

I have been playing around with the Android SDK with Eclipse in my spare time, I introduced it here, and my latest discover is Intents.  For a quick primer on what these can do you should really watch the second day key note from Google IO(see below).  What is amazing is I can easily see the benefit of having something like this in the Notes client or simply on my laptop as a service.   Many times I want to send a file, document or URL to my device so I can take it quickly on the go.  I currently just post it as a draft or email to myself so my iPhone will get it.  With Intents and an Android device I can do this more elegantly!  I can send custom URL’s to my Android cell phone and have the proper application automatically open the content or process the content.

Watch the video and I think you will see this has a lot of applications and use cases.

Learning the Android SDK

This is clearly a home side project so don’t expect much real work information here.   I read a little about the Android SDK and since its free and I can quickly get up and running in Eclipse I decided to mess around with it in my spare time.  I also bought the book, Pro Android 2, which has been an excellent primer and reference so far.  If you want a really good introduction to the Android architecture you must watch the introductory videos, the platform is pretty impressive.  One of the best things I like about the platform is it supports multiple processes and has a focus on HTML 5 and HTML content in general.  I also love the fact it natively support OpenGL which I have a lot of previous experience with.

After playing a little, I realized this is a very intuitive and powerful project structure in Eclipse.  They have done a great job with how the generated class files and resources are defined and better yet, the way the resources are referenced in the XML and code is brilliant.  For instance, I started messing around with graphics and the first thing I had to do it create a custom view and then reference that custom view in the layout XML.  You do this by extending android.view.View and then overriding the onDraw() event.  Viola, you instantly have a custom view for your own graphics drawing!

This is what I like best, you reference your custom view in the XML by specifying the class name as the element name:

<net.balfes.views.custom.MainView
 android:id="@+id/ViewPort"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>

So what I did was lay out a simple checkers user interface and then started playing with the different listeners and graphics API’s.

Android will kill the iPhone

I am sure many have seen the press on Android and all of the features it “does better” than the iPhone.

The one feature I think that will ultimately kill the iPhone is the Android SDK.  You can download the Android SDK for Windows, Mac, and Linux and you can also just install it into your existing Eclipse IDE.  Just having this available to all Eclipse developers is HUGE.  This means you can start playing immediately without owning a specific OS/Computer – like a Mac.

This is a consistent mistake Apple makes over and over and it just shocks me, now Google is taking advantage of it.  Don’t get me wrong I think Apple makes great products but the entire “we need control” mentality just exhausts everyone.  If the Android devices end up being better hardware than the iPhone then I don’t see how iPhone will be able to compete.  I know there is a lot of talk about the iPhone becoming more open and moving to other carriers but I think it just may be too little too late – maybe.  Android is around the corner Apple – get moving!