Inspired by a comment from Flávio Fonseca, I decided to experiment with making the worklist render for a mobile device using JQuery Mobile.
Turns out it is pretty easy to do. All I did was change the style sheets and the head.jspf and tail.jspf files to slightly alter the HTML around the pages. I introduced a new variable to remember whether we are in mobile mode or not, and a couple of menu items to switch between the two. The new MobileController is responsible for the flip/flop.
All the code is in Subversion if you want to take a look. Here are a few screen shots from a 7″ Samsung Galaxy Tablet (Android 2.1) emulator. I did not do anything to make it look nicer – note that the buttons/drop down select boxes are not really well formatted. JQuery Mobile will make this look nice on a whole range of mobile devices including Android and iOS devices.
The Task List:
Task Details page:
Choosing an action to take on a task:
Comments on a task:
The ‘loading’ animation between pages:
The process instance details page:
The process audit image:
Enjoy!








Nice!!! JQuery Mobile works very well, It’s a cross browser frameworks… Good stuff!
Mark, first of all I would like to congratulate you for this blog and the worklist project. All posts are very good, it’s help me a lot!
I would like to contribute with this project, is it possible? Do you have some pull request list or something that I can be usefull?
Thanks!
Hi Flavio,
I need to move the project subversion, etc. to another site, as http://www.samplecode.oracle.com is being decommissioned. I am thinking about java.net or github which would allow pull requests, etc. Let me get back to you next week, please.
Mark
Mark:
Please let me kow, where I can download the code.
Thanks,
Peter
It is in the Subversion repository. The details are on https://redstack.wordpress.com/worklist – you will want the trunk.
Hi Mark,
While browsing the svn repo I see specific sections for worklist, worklist-adfmobile and worlist-silverlight. I don’t see anything specific for jQuery mobile. Which project shall I checkout to be able to build and deploy jQuery Mobile worklist?
-Hemant
It is in worklist/trunk. Thanks for your interest.
Great! Thanks Mark.
-Hemant
Hi Mark,
I downloaded the source code under worklist/trunk and have been able to build it ( get a worklist.war). I do see a jquery-mobile folder inside the .war file. To confirm my understanding, if I deploy this worklist.war and access it from a mobile device, it’s the jquery mobile worklist that is going to serve the requests?
After deploying it, I do see a Mobile tab/link and the interface changes there to match what’s shown up here in screenshots, so I guess I found answer to my question I posted above. Thank you.
-Hemant