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 an Architect (an "IC6") in the Fusion Middleware Central Development Team at Oracle. Mark's job is to make Fusion Middleware easy to use in the cloud and at home, for developers and operations folks, with special focus on continuous delivery, configuration management and provisioning - making it simple to manage the configuration of complex environments and applications built with Oracle Database, Fusion Middleware and Fusion Applications, on-premise and in the cloud. Before joining this team, Mark 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 )

Google+ photo

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

Connecting to %s