Mobile worklist

Posted on August 29, 2011 by Mark Nelson

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 AI. Mark has served as a Section Leader in Stanford's Code in Place program that has introduced tens of thousands of people to the joy of programming, he is a published author, a reviewer and contributor, a content creator and a lifelong learner. He enjoys traveling, meeting people and learning about foods and cultures of the world. Mark has worked at Oracle since 2006 and before that at IBM since 1994.
This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

9 Responses to Mobile worklist

  1. Flávio Fonseca says:
    August 29, 2011 at 11:03 pm

    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!

    Reply
  2. hemantmalik says:
    September 17, 2012 at 11:17 pm

    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

    Reply
  3. hemantmalik says:
    September 18, 2012 at 9:47 pm

    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?

    Reply
  4. hemantmalik says:
    September 18, 2012 at 10:06 pm

    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

    Reply

Leave a comment