Showing posts with label mobile. Show all posts
Showing posts with label mobile. Show all posts

Saturday, 13 August 2011

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.






Saturday, 2 July 2011

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,

    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. 

    Sunday, 29 May 2011

    Cross Platform Mobile Application for Sakai CLE


    First, I would like to introduce myself. I am Kasun Lakpriya Hettige from Sri Lanka, following a computer science and engineering degree in University of Moratuwa. I am willing to do my higher studies in Software Engineering field.

    For those who are not heard of the project here are few links:

    Idea of this project is to build an mobile application for Sakai CLE to use in many kinds of mobile platforms like Android, iOS, BlackBerry and etc. For this we are using a cross platform library called phoneGap. More details about phoneGap http://www.phonegap.com/.

    Tools and technologies
    Though the app is going to be ported with different platforms due to some limitations I am developing for Android to test in emulators. Here are my working environment details:
    • Eclipse (3.5 or higher)
    • Android SDK
    • ADT plug-in
    • MDS AppLaud 1.2 PhoneGap for Android plug-in - This is optional but useful due to its inbuilt,
      • phoneGap support
      • HTML, JS and CSS project support
      • Touch-Optimized UI frame support for popular jQuery mobile and Sencha Touch JS libraries at the moment
      • All in one support is a big plus for me
    NOTE: To use AppLaud you need Eclipse Helios.
    As discussed with mentor I will be moving forward with jQuery mobile for now. Here are few screens of the app. 
    Your ideas, comments are welcome all the time and will really helpful to come up with a nice product. And the best place to collaborate and to get more information about the project would be the above mentioned confluence space. I will be posting here with the progress and the things I will get to know in the meantime. So I hope that anybody who is willing develop mobile apps using these technologies will find this interesting.

    Thanking Charith for helping hand with Photoshop and Avinash for some sample screens! :-)