jQuery Mobile: Hello Mobile World

After more than one year of online-hibernation, I’m more than happy to be back and today would be writing about creating a basic mobile application using jQuery Mobile.

Overview

jQuery Mobile provides a robust framework to develop mobile applications on the fly and is as simple as creating a HTML page and including jQuery mobile specific JS and CSS files. The framework is not only pretty straightforward to use, but also provides a familiar approach for web developers (who are already comfortable with HTML, CSS & Javascript/jQuery). It also provides 5 predefined themes to choose from and recently ThemeRoller has been launched which can be used to create a custom theme for your app. Fortunately for you guys, I’m not going to rant about how awesome jQuery Mobile is, as all that can be found here. :-)

Getting Started

In this post, we will be creating a basic contacts app which looks like below:

Lets start by creating a basic html file (index.html) for the home page/the first view and add the code below to it:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Friends</title>
    <link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div data-role="page" id="page">
   <div data-role="header">
       <h1>My Friends</h1>
   </div>
   <div data-role="content">   
       <!-- Logo -->
       <div id="logo"> </div>
       <ul data-role="listview">
           <li><a href="allFriends.html" data-transition="pop">All Friends</a></li>
           <li><a href="addFriend.html" data-transition="fade">Add Friend</a></li>
       </ul>       
   </div>
   <div data-role="footer" data-position="fixed">
       <h4>&copy; Copyright 2011</h4>
   </div>
</div>
</body>
</html>

In the head section, we have included jQuery mobile specific CSS and JS files. We have also included our custom CSS file: styles.css which is primarily used to position the logo for our application and consists of the following code:

#page div #logo {
   width: 300px;
   height: 100px;
   background-image: url(../images/jQueryLogo.jpg);
   background-repeat: no-repeat;
   background-position: center 0px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
}

The body contains various div’s which form one view/page of the mobile app. The “page” div usually contains “header”, “content” and a “footer”. These div’s can then contain anything that you want to put inside those sections of the page (following some conventions).

As the name suggests, header and footer are the blocks at top and bottom of the page and the “content” div is used to lay out the elements to be shown in the rest of page. Here, we show a logo and list view of 2 elements.

As you might have noticed we have made extensive use of HTML5 custom data-attributes (the data-* attributes on HTML tags) throughout our tutorial. jQuery mobile leverages this uber cool feature of HTML5 to add capabilities to its framework. These custom data-attributes (like data-role, data-transition, data-position etc) are defined in jQuery Mobile framework and support predefined values.

Lets create another pages/html files, which we will then link to our main page (index.html). Creating the second view/page (allFriends.html) in which we will show all the friends in our list.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>All Friends</title>
    <link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>

<div data-role="page">
       <div data-role="header">
       <a href="index.html" data-icon="home"> Home </a>
       <h1> All Friends</h1>
               <a href="index.html" data-icon="back"> Back </a>
       </div>
  
       <div data-role="content">
       <ul data-role="listview">
           <li> <a href="friendDetails.html">
                       <img src="images/face1.jpg">
                        <h3> Andrea </h3>
                       <p> Office Colleague </p>
                       </a>
               </li>
           <li> <a href="friendDetails.html">
                       <img src="images/face2.jpg">
                      <h3> Aria </h3>
                   <p> Childhood Friend </p>
                 </a>
           </li>
            <li> <a href="friendDetails.html">
                   <img src="images/face3.jpg">
                   <h3> Tom </h3>
                   <p> Brother </p>
                 </a>
           </li>
            <li> <a href="friendDetails.html">
                   <img src="images/face4.jpg">
                   <h3> Home </h3>
                   <p> Danger </p>
                 </a>
           </li>
            <li> <a href="friendDetails.html">
                   <img src="images/face5.jpg">
                   <h3> Melinda </h3>
                   <p> Close Friend </p>
                 </a>
           </li>
           <li> <a href="friendDetails.html">
                   <img src="images/face6.jpg">
                   <h3> Taanya </h3>
                   <p> College </p>
                 </a>
           </li>
            <li> <a href="friendDetails.html">
                   <img src="images/face7.jpg">
                   <h3> Micheal </h3>
                   <p> Rockstar </p>
                 </a>
           </li>
            <li> <a href="friendDetails.html">
                   <img src="images/face8.jpg">
                   <h3> Maria </h3>
                   <p> Friend </p>
                 </a>
           </li>
       </ul>
   </div>
        
   <div data-role="footer" data-position="fixed">       
       <div data-role="navbar">
           <ul>
               <!-- Add icons here for Delete, Edit, Call Friend -->
               <li><a href="#" data-icon="info" data-iconpos="top">Edit</a></li>
               <li><a href="#" data-icon="delete" data-iconpos="top">Delete</a></li>
               <li><a href="#" data-icon="alert" data-iconpos="top">Call</a></li>
           </ul>
       </div><!-- /navbar -->
   </div><!-- /footer -->
  
   </div>

<body>
</body>
</html>

By writing this small piece of code, we can show the thumbnails in the listview along with some description of each element. To make things simpler, this is simply some static data hardcoded into HTML. A real-world application would read this data from some persistence store and using jQuery would create this markup dynamically with that data.

jQuery Mobile also provides a rich set of form elements as can be read here. We create a simple form using the html below (addFriend.html) to show some basic form elements to create the third page/view of our app in which we provide a simple form to add a new friends in the existing contacts.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Add Friend</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
   <div data-role="header">
       <a href="index.html" data-icon="home"> Home </a>
       <h1> Add Friend </h1>
       <a href="index.html" data-icon="back"> Back </a>
   </div>
   <div data-role="content">
       <form action=”submit.jsp” method="post">
           <div data-role="fieldcontain">
               <label for="name">Name: </label>
               <input type="text" name="name" id="name" placeholder="Enter Name"/>
           </div>
           <div data-role="fieldcontain">
               <label for="gender">Gender:</label>
               <select name="gender" id="gender" data-role="slider">
                   <option value="MALE">Male</option>
                   <option value="FEMALE">Female</option>
               </select>
           </div>
           <div data-role="fieldcontain">
               <label for="age">Age</label>
               <input type="range" name="age" id="age" min="0" max="100" value="0"/>
           </div> 
           <fieldset class="ui-grid-a">
               <div class="ui-block-a">
                   <a href="index.html" data-role="button" id="cancel">Cancel</a>
               </div>
               <div class="ui-block-b">
                   <button type="submit" data-theme="a">Submit</button>
               </div>
           </fieldset> 
       </form>
   </div>
   <div data-role="footer" data-position="fixed">       
       <h4>&copy; Copyright 2011</h4>
   </div>
</div>
</body>
</html>

Again the markup is pretty much similar to a normal HTML page, just we have used certain specific data-roles, specific classes which are defined in the framework to layout the elements in a certain fashion and apply a theme to our UI. Since this is just for introducing the framework and not on developing a fully functional app, so the form submission does not work, rather it gives an elegant error message on click of submit button as we have not provided a submit.jsp page to handle the request. (Done intentionally to show the elegant error handling of the framework)

Single-page template Vs Multiple-page templates

Here we have used one html file per page. We also have an option to keep multiple pages inside one html file. In that case, we need to give id to our pages and link them to each other accordingly using that id. But that can soon explode & become unmanageable, and is only recommended when there is some static data to be shown

CSS Layout Magic

We didn’t write much CSS still our HTML pages looks just like a mobile site and the “header”, “footer” and “content” data-roles are layout perfectly nice. It’s so because of the framework’s CSS file (jquery.mobile-1.0a3.min.css) which we have included in our HTML pages. Again proves what amazing things CSS can do :-)

Dreamweaver Integration with jQuery Mobile

Adobe has done a fantastic job in integrating jQuery Mobile with Dreamweaver and provides several templates to get you started. The editor also supports some level of code-completion for jQuery Mobile and even some support for Javascript.

Want to learn more ?

Even after writing such a long post, its hard to explain each line of code written above so the best way to learn more is to refer to the Docs. Or I might just write another post to explain some more.

Disclaimer

This is just an introduction to jQuery Mobile and might not follow the best practices like normally you would refer to jQuery framework files from some CDN than to include them with your own code. Also, the above code is static in nature, but it can be easily integrated with any database using some script and can form a fully-fledged application.

As always, comments and corrections are welcomed and appreciated.

Runtime Shared Library (RSL) – Flex 3

The best way to reduce the size of your Flex application (or the resultant SWF file) is to use Runtime Shared Library which uses the concept of dynamic linking.

Normally a Flex application consists of your application code as well as the framework code and the both of these codes are statically merged together in a single SWF file. It makes the resultant size of your application (the SWF file) larger by adding some 500 KB’s of data to it, which has to be downloaded each time the application is downloaded to a client.

On the other hand, RSL allows you to decouple your application code with the framework code and allows you to dynamically link both of them as and when needed (while running the application). Without wasting time, lets try and configure our project to use RSL instead of static linking. It can be done either using command line Compiler Options or by changing certain settings in Flex Builder. We’ll go the easy way:

Setup in Flex Builder

Following Steps are needed to Compile and Build a Project in Flex Builder with RSL in it:

1. Select your Flex Project. Click on Project –> Properties
2. Go to Flex Build Path
3. Open Library Path Tab. By default the framework linkage is statically linked --> Merged into Code as shown below:

Change the drop down to Runtime Shared Library (RSL) for dynamic binding.

Make sure that Verify RSL digests checkbox is checked. Click Ok to complete the changes and the project will be recompiled with updated compiler settings.

This will create 2 files for RSL in the Output Folder of your project:

• framework_3.X.X.XXX.swf (Unsigned/Failover RSL)
• framework_3.X.X.XXX.swz (Signed RSL)

By default, the Flash player will try and use the Signed RSL to link with your application code on loading but the signed RSL works only with Flash Player 9.0.115 and later. If your clients are using a lower version, then it will be unable to load the Signed RSL (swz) and will automatically switch over to the failover RSL (swf) and use it in place of Signed RSL.

A Major benefit of using Framework RSL is caching. RSLs are cached when they are first used. When they are needed by another application, they can be loaded from the cache rather than across the network. The signed framework RSL (RSL’s can be signed by Adobe only) can be cached in the Flash Player cache as well. This benefits by reducing the initial download time as there is no need to download the framework code every time you need to run your Flex Application. And since the caching is done in the special cache of the Flash Player and not in the browser cache, so this signed RSL can be used for some other Flex Application (served from a different domain than yours) On the other hand, the failover RSL is cached in the browser’s cache.

Compiler Settings

Apart from RSL, while building the project for Production Environment, the debug option must be set to false, else the resultant SWF file will also contain the debug information, which is unnecessary for the production environment. To do so, right click the project, go to Project Properties and open the Flex Compiler View and add

-debug=false

in Additional Compiler Arguments as shown below:

Without doing this also, it will work but the resultant SWF file will have debug information with it. The default value of this parameter is true.

Go Check the output folder of your web application and you will definitely see a reduced SWF file there Happy Flexing :-)

Thread-safe Generic Class in Java

Assuming that you are a Java Developer, I can say that you have at some point or the other must have used Generics in your code, be it using a Generic Collection (if you have worked with Java5+) or in any other way. Even if you are not a Java developer, you must have played with Templates (in C++) in your school/college days.

Today, we are going to do something similar in Java. We are going to create a Generic Stack class in Java, which you can use to create a Stack of Integers, Floating Point Numbers, or a Stack of Students or any custom type that you have. Just to make code a bit more interesting and tough, I have also made it thread-safe so that multiple threads can use this stack without leaving it in an inconsistent state.

public class GenericStack<T> {

private List<T> items;
private int top;
private int size;
private static final int INIT_SIZE = 100;

public GenericStack(){
    size = INIT_SIZE;
    items = new ArrayList<T>(INIT_SIZE);
    top = -1;
}

public GenericStack(int size){
    this.size = size;
    items = new ArrayList<T>(size);
    top = -1;
}

private boolean isEmpty(){
    return (top==-1);
}

private boolean isFull(){
    return (top == size-1);
}

 // Push an Item in Stack
 public void push(T item){
    synchronized(items){
       // While stack is Full
       while(isFull()){
          try{
             // Wait till Stack is Full
             items.wait();
          }
          catch(InterruptedException e){
            e.printStackTrace();
          }
       }
       // Produce Item
       items.add(++top, item);
       // Notify other threads
       items.notify();
    }
}

 // Pop an item out of stack
 public T pop(){
     T item = null;
     synchronized(items){
        // While Stack is Empty
        while(isEmpty()){
           try{
             // Wait if its empty
             items.wait();
           }
           catch(InterruptedException e){
             e.printStackTrace();
           }
        }
        // Consume an item
        item = items.get(top--);
        // Notify other threads
        items.notify();
     }
     return item;
  }
}

Most of the above code is self-explanatory but lets highlight some of the major concepts used here:

• To create a Generic class, one must specify the Type along with the class name (as done using T).
• When you initialize it, all the occurrences of T will be replaced by that particular type.
• We have also made the above Stack class thread-safe, i.e. it can be shared and updated by multiple threads in a consistent manner using synchronized blocks.
• We have checked before pushing for a Full Stack and we also check for an Empty Stack before popping an element
• We have not made the isFull() and isEmpty() methods as synchronized as they are private (hence not visible to clients) and are always called from an synchronized context from within the class.
• If you need isFull() and isEmpty() to be public then make them also synchronized to make them thread-safe
• It is always better to have synchronized blocks rather than synchronized methods as it is always better to synchronize as less code as possible. Although, here we could not make much use of this concept but rather than obtaining the lock on the calling object, we obtain a lock on the shared list of items.
• Calling synchronized(items) means if some other thread has not yet acquired a lock on items (By the way, each Object in Java has an associated Lock with it), then this current thread acquires the associated lock and proceeds. Otherwise if some other thread has currently acquired the synchronized block, then it must wait in the wait list of the object (items) in question. The thread then waits until it receives a notification that the lock has become available for acquisition and then it competes with other waiting threads to acquire the lock.
• Calling items.wait() results in the current thread being placed in the wait list of items after releasing the lock. You can only call object.wait() after you have acquired the lock on the object.
• Calling items.notify() results in sending the notification to one of the threads in the wait pool of threads which can then compete for the lock.
• Note that items.notify() does NOT releases the lock. Only exiting the synchronized block/method releases the lock that was acquired when the thread entered the synchronized block/method.

You can easily create two or more threads (viz. Producer and Consumer) and pass them the same Stack and play with them to randomly create and consume data and check that you Stack class is indeed thread-safe.

Generic Methods

Talking more about generics, you can also make a method accept Generic parameters without the enclosing class declaring the Generic type as done in the following example:

public <T> List<T> createArrayList(T t){
  List<T> arr = new ArrayList<T>();
  return arr;
}

This weird looking syntax has a meaning:

• This method basically lets you create an arraylist of any type, type is passed to it as an argument.
• Since you are not defining the type at Class-level, then there must be a place where you should define the type of your method and distinguish it from other non-generic methods for the compiler.
• So, we declare the type <T> immediately after public modifier to say that we use a Generic Type T in this method, which like others will be replaced at runtime with any real type. (just like in case of Generic classes)
• We call this method passing to it a valid reference to any Object of any type (Integer, Float, or you own custom class Student). For example, we can do:

Integer i = 23;
List<Integer> intList = createList(i);

or

Student st = new Student();
// Do anything with st here
List<Student> students = createList(st);

Ok, I agree this is not one of really useful examples for showcasing the power of a generic method but I hope that the intent is clear and so is the syntax. As always, your valuable comments are welcome and desired. Any corrections must also found place in comments. Sayonara :-)

Mixing Generic & Non-generic code in Java

Can you spot the error in the following code:

public class MixingGenerics{

public static void main(String[] args){
    List<Integer> arr = new ArrayList<Integer>();
    arr.add("String 1");
    arr.add("String 2");

   // add something more
   addToList(arr);
}

public static void addToList(List arr){
   arr.add(new Integer(1));
}
}

I’m sure you are able to point out the mistake that we are adding an Integer to an ArrayList of Strings. That’s definitely not done. But can you tell without compiling this code that we get an error at compile-time or at run-time ?

Unfortunately and even more surprisingly, this code doesn’t give any compilation error or runtime exception. Everything works fine and an Integer is added into your ArrayList (of Strings) !! Yes, you do get a compiler warning that says something about Type Safety of your code. We will get back to this point later on.

But first examine how is possible that you can actually store an Integer in a String Arraylist? Actually, it is an unfortunate outcome of mixing Generic & Non-generic code. The reason why we get no error is due to a property of Generics called Type-Erasure. We’ll get to it soon but first lets see when the previous code will throw an Error/Exception. This code will explode as soon as you would try and iterate the ArrayList of Strings, in which you have put an Integer unknowingly as shown below:

public class MixingGenerics{

public static void main(String[] args){
    List<Integer> arr = new ArrayList<Integer>();
    arr.add("String 1");
    arr.add("String 2");

   // add something more
   addToList(arr);

  // print the list
  printMyList(arr);
}

public static void addToList(List arr){
   arr.add(new Integer(1));
}

public static void printMyList(List<String> arr){
   for(String s:arr){
       System.out.println("String : "+s);
   }
}
}

So we get a runtime exception now on iterating the list. It prints the first two strings and then throws ClassCastException as we are trying to cast an Integer into a String s. That’s okay but why does it allows you to add an Integer into List of Strings.

Type-Erasure

Generic code in Java exhibit a very important property: Type-erasure. What it means is that the so-called type-safe collection of yours (the generic collection here: ArrayList<String>) loses its type information at run-time and acts as if its just a List (like pre-Java 5 lists, the non-generic list). This has been made such so that we can integrate pre-Java 5 (the non-generic code) with newly written Generic code (Java 5 or later), but then while mixing them, you must be careful. Very careful indeed, else you could happen to write a code that will explode unpredictably.

So the answer to our question that why it allows an Integer to a list of Strings is because at runtime we only have a list, just like we had a list in pre-Java 5 days. Without generics, we had to take care while taking object out of the list and casting them but with Java 5 and above code, that casting is implicitly inserted by the compiler. So when we say

String s = arr.get(0) gets converted into String s = (String) arr.get(0)

Doing exactly the same with our list, it gives an error when we try and cast an Integer into a String and hence the error: java.lang.ClassCastException: java.lang.Integer cannot be cast to java.lang.String

Apart from giving the error, the compiler does his best and warns you when you are trying to mix Generic code with Non-Generic Code. If you are very sure about your code and do not want any compiler warning, then you can do by using following Annotation (valid with Java5+ code)

@SuppressWarnings("unchecked")
public static void addToList(List arr){
arr.add(new Integer(1));
}

This lets the compiler know that you are pretty sure about the code that you have written and do not give me any warnings with this method. Generally, it is not recommended to use such Annotations and if you really need to use one, you must do proper documentation of your code.

Any comments and corrections are welcome :-)