XUI is a light weight JS framework for mobile web. XUI mainly used with PhoneGap for Mobile app development. I used XUI for developing an PhoneGap android app for FlamesGame.

If you are implementing a mobile app using Phonegap, for the JS framework it is better to use a light weight JS framework. jQuery will be heavy for developing mobile app, but now they have jQuery for mobile also.

I added the fade in effect using the tween method of XUI. You'llget more animations from http://xuijs.com/docs/fx

Phonegap is a mobile app framework which supports multiple mobile platforms (iOS, Android, Symbian, etc.). We can develop phonegap mobile app using HTML + CSS + JS. Phonegap will convert the app into native application.

You can download the latest Phonegap framework from Phonegap website.

I developed a phonegap mobile app for Android, so this post will be related with how I used Phonegap to implement an Android app.

You will get the instruction to set up Phonegap for Android application from this link. This will make you capable of atleast creating a 'Hello world' application for Android using phonegap.

So we can use HTML, CSS and JS for developing a phonegap android app. But which JS framework we'll use, Jquery? Then there is an issue - jQuery is developed for the web app, it will be too heavy for a mobile app. So I used a lighweight JS framework called XUI JS framework.

There are many other JS frameworks for mobile apps. Take a look at those JS Frameworks which Phonegap supports.

Phonegap gives access to use many mobile features like vibrator, accelero meter, contacts, etc. Phonegap have a good API for those featutres. I implemented two features from this API:

1. Vibrator:
• navigator.notification.vibrate(100);
• This will provide a vibration of 100 milli seconds.
2. Notification:
• navigator.notification.activityStart();
• This will show a dialog box with the 'Please wait' message.
• navigator.notification.activityStop();
• This will hide the dialog box.

First I had to setup the development environment for Android. There is a good documentation in the Android website (Android Setup Documentation) which directs you to install/setup the environment. So I just mention what I did for the setup:

• Downloaded JDK
• Setup the PATH variables for JAVA
• Downloaded Android and unzip
• Downloaded Eclipse and unzip
• Installed and configured the ADT plugin for Eclipse

Nowadays Light-box is very common in all the Web applications. To implement a Light-box JQuery Tools provides a plugin called 'Overlay'. You can download the JQuery Tools UI Library from here.
After including the js file for JQuery tools in your page, you can call the Overlay method to show the corresponding div in a light-box.

If you want to open a div with id 'my-overlay-div' in a light-box, first you have to create a link called 'trigger' with a 'rel' attribute having value as the id of the div ie., 'my-overlay-div'.

<a id="my-overlay-trigger" href="#" rel="#my-overlay-div">Show Lightbox</a>

This trigger can be any HTML element but it should have the 'rel' attribute. For ex: img, input
Now to show the div in a Light-box, you can simply call overlay method.

$("#my-overlay-trigger").overlay();

This will open the div with class name 'my_overlay_div' in a light-box.
There are many options available to use with the JQuery Overlay. For more details visit Jquery Overlay.

In our company we started using HAML for Web app development. HAML is very useful in creating web pages. We can replace the HTML tags with intended HAML representations.

For example the HTML code:


is represented in HAML as:


In HAML indentation is very important. Otherwise it will show some error. There is a web app which converts HTML to HAML which is HTML2HAML.

For using HAML with rails you have to install the gem haml.

Now with HAML the lines of code we are writing became less and also because indentation is must the code became more cleaner.