Mobile worklist

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!

About Mark Nelson

Mark Nelson is a Developer Evangelist at Oracle, focusing on microservices and messaging. Before this role, Mark was an Architect in the Enterprise Cloud-Native Java Team, the Verrazzano Enterprise Container Platform project, worked on Wercker, WebLogic and was a senior member of the A-Team since 2010, and worked in Sales Consulting at Oracle since 2006 and various roles at IBM since 1994.
This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

9 Responses to Mobile worklist

  1. 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!

  2. hemantmalik says:

    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

  3. hemantmalik says:

    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?

  4. hemantmalik says:

    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

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s