As mentioned in my previous post, this article series is around my Budget Analyzer application that I built using Grails and jQuery Mobile frameworks. I hope to present this as a more real world example of using Grails along with using jQuery Mobile for the client side responsible design that can scale to any sized client (phone, tablet, desktop, etc). The jQuery Mobile framework is an excellent library that simplifies that approach dramatically.
The application I am presenting here is a Budget Analyzer application. The problem with most of the financial applications and budget aware applications such as Mint.com is that they do not provide a forward looking statement. One of the things I like to know when dealing with accounts is how much money would be in my account in two weeks based on upcoming bills and budgets. This is very handy when making a payment and knowing whether you have a certain amount in your account so you do not hit any thresholds. Although forward looking balances are mere estimates, it gives you an easy way to see what bills are approaching and their approximate impact to the bottom line.
This particular post will focus on the client side rendering via jQuery Mobile. jQuery Mobile is a great framework that allows the application to focus on semantics and clean HTML design while the actual rendering is performed client side via CSS and JS. Further, the framework supports responsive design that automatically scales to the desired form factor including phones, tablets, and desktops. All this combined allows the application developer to define the semantic HTML that scales to all platforms rather than having to create separate interfaces and designs for each form factor.
To utilize jQuery Mobile you need to include the relevant CSS and JS files which also includes the jQuery core library. The simplest way is using the jQuery CDN via:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script> |
jQuery Mobile uses the HTML5 data attributes to identify the options for various components. The main component in jQuery Mobile is the page. A page identifies a particular unique page or screen in the application. A single HTML page may include multiple pages for optimizations, but jQuery Mobile will only show a single page at a time. Per my main layout, an examlpe page layout is (notice the data attributes):
<div id="page" data-role="page">
<div data-role="header" data-id="header" data-position="fixed">
<h1>Title</h1>
</div>
<div data-role="content">
page content goes here
</div>
<div data-role="footer" data-id="nav" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Navigation</a></li>
</ul>
</div>
</div>
</div> |
The page section contains three main div sections: the header, the content, and the footer. jQuery Mobile supports fixed positioning across form factors for headers and footers. The fixed positioning allows the elements to remain in their respective locations regardless of user scrolling or page transitions. This symbolizes a typical native mobile application (ie: iOS). The footer may also include a navigation bar that also resembles a navigation bar in a native iOS application, especially if icons are included (they are not in my case). The biggest takeaway from this simple example is that the HTML is simple and straightforward, yet it works in almost every form factor imaginable.
The next great part about jQuery Mobile is its automatic navigation and linking support. By default, all links in your application are standard links that would work regardless of JavaScript being enabled. This also means they are easily traversal by search engines for SEO purposes. jQuery Mobile automatically translates links into AJAX links and does automatic page transitions. It also manages the history through HTML5 history linking as well as through old school methods such as hashtag references. The server-side developer purely defines standard HTTP request modeling of pages while jQuery Mobile automatically downloads content through AJAX behind the scenes. The best part of the navigation is the automatic transitions. Using data attributes within links, you can customize the transition without any JavaScript code such as slideup, slidedown, flip, etc. For example, the transaction page in my application defines a button that loads the create transaction view through a slideup transition via data-transition="slideup". This makes the form look like it comes from the bottom. Transitions, especially in client-side applications, are great at informing the user an action is taking place and a new view is being displayed.
Next up is button support. jQuery Mobile supports automatic button styling for standard links as well as custom form inputs and buttons. An application selects the proper semantics (links for traversing, buttons for form handling, etc), but they all appear the same. Buttons may also include icons in addition to text. For example, within Grails I define a custom link using Grails linking support.
The first example right aligns a button in a header section. Note that the data role is not required in headers, but the CSS class is needed to properly align the button on the right or left.
<g:link action="create" params="[type:type]" class="ui-btn-right"
data-icon="plus" data-transition="slideup">
Add
</g:link> |
The second example is used within a form. One button is a standard link while the other is a form submit button. jQuery Mobile properly handles both links and frames through AJAX navigation.
Note that the data-role="button" causes the to display as an actual button. Also, the data-theme may be used to customize the styling of the button. Finally, when using transitions, you can reverse the animation with the data-direction="reverse" attribute. In this application, the create form slides up to display. Upon submission or cancel, the form should slide back down in reverse.
<g:link action="list" params="[type:type]"
data-role="button" data-icon="delete" data-theme="a"
data-transition="slideup" data-direction="reverse">
Cancel
</g:link>
<button type="submit" data-theme="b" data-icon="check"
data-transition="slideup" data-direction="reverse">
Submit
</button> |
The whole form aspect is also fully supported by jQuery Mobile. Certain form elements are custom styled and laid out to support various form factors. The basic form element is defined as the following. The key is using the fieldcontain role along with a label and associated input field.
<div id="name-container" data-role="fieldcontain">
<label for="name">Name:</label>
<g:textField name="name" value="${fieldValue(bean: transaction, field: 'name')}" />
</div> |
The final thing to note in the application is the custom listview support. jQuery Mobile, inline with native client applications, supports a variety of listviews to show lists and tables of data. The listview support is amazing and provides all sorts of options through data attributes. It also allows customization which is what I used to gain the proper look and feel. The end result is a great looking interface without having to design or create crazy CSS rules. The HTML is purely semantic as list items.
<ul id="overview-list" data-role="listview" data-dividertheme="b">
<li data-theme="e">
<h4 class="listview-content">Today's Balance</h4>
<h4 class="listview-note ui-li-aside">
$100.00
</h4>
</li>
<li data-role="list-divider">January 2013</li>
<li>
<a href="#" class="ui-btn-right" data-transition="slide">
<h4 class="listview-info bill">25</h4>
<h4 class="listview-content">My Bill</h4>
<h4 class="listview-note ui-li-aside amount">$23.00</h4>
</a>
</li>
</ul> |
The interesting portions are the dividerthemes that provide different styling for the dividing sections. I use one style for the main divider at the top for the overview balance and then a different style for each month dividing the items. The actual content is controlled by the h4 references and associated style classes that align the content to the left, right, or as general textual content. Finally, I use a custom class (ie: bill, budget, etc) to customize the left-aligned date to a particular color to identify each transaction type.
There is so much more to jQuery Mobile and the documentation is pretty good. For example, you can use jQuery syntax to add further hooks into the framework such as handling a long tap on a given list view item:
// process once the page has actually been initialized $('#page').live('pageinit', function(event) { // process long holds $('#overview-list li').bind('taphold', function() { /* do something */ } }); |
If you have yet to try jQuery Mobile I strongly encourage it. It fits perfectly with Grails as well. If you use Grails, you may also want to consider using the Grails resource plugin with the Grails jQuery Mobile plugin. The two automate the inclusion of the necessary dependencies and libraries. However, the jQuery Mobile plugin in Grails tends to be behind a few releases in the fast evolving framework, which is why I opted to just use the CDN directly.
Read the previous article on Server Side via Grails.