Sakai CLE mobile application with phoneGap

In my previous post I mentioned how to setup the working environment and useful tools we can use to develop mobile applications using web technologies. Today I am going to present what I learnt during the past few weeks and the status of the CLE mobile application at the moment.

As discussed with my mentor, Steve Swinsberg, the basic requirements of the CLE mobile app. are as follows for the first version also listed here and the UI flows can be found here. (Screens v1.0.1) 

User login

User enters user details to enter the system.

 List of sites

s/he will be directed to a list of sites that they are in (assuming credentials are correct)

 List of tools

User selects a site will navigate them to a tools list of the selected site. Here they can see how many new announcements, assignments and etc are there at a glance.

 Mobile version of each tool

Once they select a particular tool they can view the above details in detail. This will hopefully be a read only tool for the first version of app.

Current status  

List of sites and tools for a selected site done.

Both this screens are rendered using JSONP feeds of my local host because JSON feeds did not work due to domain issues. Please find the code here and please add your suggestions.

Try out this in your emulators with phoneGap

If you want to run this in your emulator what you have to do is to create a phoneGap app. following their tutorial and add sites.html to assets/www directory.

To add JSONP support for your local sakai instance you can do the following change to core-providers in entitybroker and deploy *only* it in tomcat.

Checkout entitybroker trunk if you don’t have,

•  svn co https://source.sakaiproject.org/svn/entitybroker/trunk/ entitybroker-trunk
•  then in, core-providers/src/java/org/sakaiproject/entitybroker/providers/

edit the classes where it says:

add Formats.JSONP to the end      

• mvn clean install sakai:deploy (from entitybroker pom level)
•  re/start Tomcat.

Yeah that’s it! Now you have JSONP support.

Here is how to add a customize callback function,

That's it you should be able to see above screens. :-)

This is a useful place you can try JS, CSS, HTML http://jsfiddle.net/. Here we don't need to put all code just the snippets work nicely for example http://jsfiddle.net/HQK5w/6/

Thanks to my mentor, Steve Swinsberg, for the support and directions.

As always waiting for your comments.