Posting code snippets to Blogger

In my last post I wanted to put some Java and JavaScript code snippets in it so I started googling and asking my friends how to do it. But, I could not find an easy way to do that so I started searching more and found the following which is actually a zero work thing to do. Here we go,

1. Browse to https://gist.github.com/
2. Add a Gist Description (optional)
3. Add a filename with an extension (extension will be used to add syntax highlighting)
4. Add your code snippet which need to be added to your blog post
5. Click “Create Public Gist” button at the botton
6. Click on the “embed” link and copy the script generated

This is all from Gist side. Now to Blogger,

     7. Paste the script where you need to add the code snippet

     8. Make sure to select the option “Interpret typed HTML” under Post Options -> Compose Settings

Here is how an example Java code looks like after this 8 Steps above,

	class HelloWorld {
	public static void main(String[] args) {
	System.out.println("Hello Gist and Blogger! I have intentionally made this line long to get a scroll bar");
	}
	}

view raw HelloWorld.java hosted with ❤ by GitHub

Publish your post and enjoy! 

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:

	public String[] getHandledOutputFormats() {
	return new String[] { Formats.XML, Formats.JSON, Formats.HTML, Formats.FORM };
	}

view raw ProviderSample.java hosted with ❤ by GitHub

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,

	function showTools(siteId, name) {
	var url = "http://localhost:8080/direct/site/" + siteId + "/pages.jsonp?jsonCallback=callbackForTools";
	$.ajax({
	type : "GET",
	url : url,
	dataType : "jsonp",
	jsonp : "callback"
	});
	}
	//callback to get tools from a site
	function callbackForTools(data){
	console.log("Trigger callbackForTools"); //logging like log4j to debug in errors
	$("#toolName").append(name);
	$("#tools").listview('refresh');
	for ( var i = 0; i < data.length; i++) {
	$("#tools").append(
	"<li><a href='#tool'>" + data[i].title + "</a></li>");
	}
	$("#tools").listview('refresh');
	}

view raw getTools.js hosted with ❤ by GitHub

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.