Going Mobile With RichFaces 4 - Part 1: Drag and Drop

Richfaces 4 just reached Milestone 6 and now would be a great time for the community to step up and check how the components run on mobile platforms.
First off, Richfaces 4 currently does not offer mobile support but it is definitely the direction they are heading. And the RF team has taken all the necessary steps to allow the client side code to be extended and improved by way of jQuery.

Today I am going to add touch support to the RF drag and drop component. We all know that touch events and gestures are not the same as a mouse click. So one must consider a couple of different approaches before implementing a final solution:

1) Override the default touch events with their mouse counterparts.
This is easy since you are basically overriding the default functionality of touch and gesture events. There are 3 mouse events to replace to get this component working:
touchstart,touchmove,touchend

2) Extend jQuery core components and add the “drag” functionality alongside “touch”
A little more difficult and fortunately the jQuery team is working on the mobile upgrade to ui.draggable – so this should be available in the next few weeks/months.

(tested on live iPhone4 and iOS simulator iPad)

I originally started out using the touch and gesture events to do the drag and drop. This allowed for a smoother UX but unfortunately, the internal plumbing of Richfaces required a complex extension/wrap of rf.ui.draggable (to add the new touch functions) and some custom bindings like rf.Event.bind(this.dragElement, ‘touchstart‘+this.namespace….) in dnd-draggable.js.
In the end, it was just easier for me to use this script and re-map the 3 main touch events.

I looked at many different approaches starting with SenchaTouch which btw is pointless if you are going to leverage existing jQuery, then moving to a few different jQuery utilities.
The basic question here, which can be applied to any component framework, is “What’s the best mobile approach for supporting product xyz?” Every product out there that touches the UI has to cross this gap. Touch interfaces today… tangible UI’s tomorrow… and the vicious cycle continues. And majority of the time, the best way to get started is to build an emulator so that your product can work today. This will buy you the time to build the native functionality that takes full advantage of the target platform.
Unfortunately the script I used here doesn’t always work and there are still a few more components in Richfaces that do not work with this duck punch approach. So I will try to make this a series and blog about & fix the other components on mobile platforms.

The old days of drag and drop are not as simple as they used to be. With multi touch surfaces you have the ability to accelerate your drag and throw it across the page, rotate it, and auto scrolling when you drag the object off the page, etc... Just something to think about when designing a similar component.