Sakai CLE Mobile Application using phoneGap and jQuery mobile.

After a long time I think I should write something here as this will be the last or one before the last opportunity to write in the Sakai Google Summer of code projects blog.

Last month or few weeks was really a hard time because the things I had to handle were almost new to me and almost all the cases were issues and my mentor was getting so many mails with the title * issues (this is a regex) examples would be “Localhost issues”, “Cross domain issues” :-).

I think discussing solutions for them would be really worthy because when I googling also what I noticed in some places was “21 users has this question (Stackoverflow)” so I was the (n+1)th person to have same question.

First issue raised just after the last post because as I discussed in that I was using JSONP feeds from the server to render application on mobile but due to security reasons JSONP feeds were stopped and I was in trouble. When I searched I note that the solution is JSONP and having a proxy sever both are not going to work for mobile application as JSONP support also no longer there. But all these restrictions are for http:// and https:// protocols I realized later with the help from my mentor. Because as we are developing the application using phoneGap and it uses file:/// protocol there is no such restriction to get JSON feeds from a remote server so finally the problem solved. For completeness here is a snippet.

Next the issue with localhost, when we are going to test application with emulator (in my case Android) when it sees localhost with in the emulator (device) it is looking for a localhost inside the emulator and eventually failed to find. So I had to use my friends laptop as my dedicated Sakai server. But for mac users I saw a solution here [1] but I can't try it out. Though phoneGap wiki has something like this [2], I could not get it working, please correct me if I am wrong by adding a comment.

Next the very immediate issue I had was ajax requests that were in different pages to not working. The issue is like this, I used all the ajax requests in doument.ready event in different htmls but as jquery mobile uses ajax is used to load the contents of each page into the DOM as we navigate, and the DOM ready handler only executes for the first page. [3] So instead of DOM ready, in jquery mobile, we have to bind the pagecreate event in order to execute the code when the page is loaded and created by ajax. Note that the above snippet is using pagecreate. And one more thing I noticed most of the places is to use data-role=page and create new pages without adding a new HTML this will increase the loading time of each page as well. Use separate HTMLs if you really need only and if you are not happy with the pagecreate you can just use rel=”external” flag with your link like this,

but this will stop you by using page transition effects like slide and all and currently there is no way to get the effect with this.

And finally, I would like to add some screens that we can see in the application.

"This will be the view of a profile for an user in sakai CLE. User details are categorized in to sections as we can see and they collapsible too. Moreover users can update their status on the go via @sakaimobile :-)"

"This is how an user will see what are the new alerts from different tools in a selected site. We will, most probaby, be supporting Announcements, Assignments, Forums and Roster tools." Note that un-supported tools are grayed out. And users can see how many new alerts are there from each tool.

At the beginning as I said this will be the last or one before the last post in this blog but one day I might be writing here again but as a proud *mentor* for an student of Sakai foundation, who knows? :-)

Add you valuable comment and correct me if there is anything I have mentioned wrong. Thank you all for giving this opportunity to write in this blog and thanks to my mentor for guiding me and help me in all the issues I had.
Next week will be for any documentation stuff, if there are any, and correct the application where necessary to work with different devices.

[1]-http://stackoverflow.com/questions/5776412/access-localhost-on-mac-from-xcode-phonegap-communicating-with-ajax-to-a-local-r

[2]-http://wiki.phonegap.com/w/page/31996336/Testing%20an%20application%20via%20%22localhost%22

[3]-http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-scripting.html