Archive | JQuery RSS feed for this section

Adding a controller to JQueryMobile

1 Aug

JQuery Mobile highlights the power of HTML5 data attributes. An example div element with such an attribute could be:

<div data-role="header">

This new feature introduced in HTML5 – but backwards compatible with previous versions – is able to provide us with the flexibility to say what we mean rather than impreatively tell the code to do something. Im talking about declarative vs imperative programming.

Why Controllers in javascript?

Controllers are a part of the MVC pattern and are quite common in many areas of programming, however in my experience not so common in javascript development. This is possibly due to the requirement of javascript growing more and more as time goes on, and possibly due to the small scale in which it is usually used. Mobile development with phone gap tends to challenge this perspective of javascript by enabling large javascript applications to be developed in the mainstream.

Proposed approach

The Html

<a data-action="postForm">

The JQuery

$('a[data-action*=""]').live('click', function () {
      Log("Click -> Action");
      pageController.processAction($(this));
});
var pageController = new PageController();

function PageController() {
    this.processAction = function (itemWithAction) {

        var action = itemWithAction.attr('data-action');

        //Log("action = " + action);

        //Do something with the action here!!!
}

Performance benefits

Subscribing one click event to all necessary elements of the DOM for an application will be quite the performance hit. Instead this solution is subscribing to the root element of the DOM once. For more information see: http://api.jquery.com/live/

Reusability

The actions are able to be reused across multiple pages. They are fully separated from the page, with a reference to the triggering element.

Readability

Html elements that use data attributes to call actions make tracing event-action mappings much easier

Jquery Mobile – Dynamic Pages

9 Apr

Recently, I decided to make a mobile application. I have chosen to use a combination of Jquery Mobile and phone gap in order to achieve this goal.

I have found Jquery Mobile to be a good framework for making mobile applications however it is not long before discovering its abilities to dynamically generate content are not well documented. This is possibly because at the time of writing this, Jquery Mobile is in alpha status.

After googling round for quite a while, I discovered that there is a function called page(). That when applied to the end of an HTML fragment, it will convert the HTML into JQuery mobile appropriate HTML. The concepts of using this that are important are as follows

  1. Jquery mobile does not restrict functionality of Jquery.
  2. Jquery mobile parses an HTML document with the page() function to convert HTML to jquery mobile HTML (for better control/css theming etc).
  3. Jquery mobile will not parse updated html fragments added to the document unless you explicitly call the .page() function on that HTML fragment.
  4. In modern browsers, Jquery/java-script often  treats html blobs as a ‘documentFragment’ type which has virtually no functionality[W3C]. This can cause some confusion when calling the page function as the page function will fail on documentFragment types as discussed by me [Jquery Forum].
  5. Jquery mobile allows us to build phone gap and internet browser applications, allowing us to reach many markets with one solution.
  6. Jquery mobile is built on HTML 5. It uses the new meta data functionality for tags, i.e. <div data-tag=”taginfo” /> is valid in HTML 5 as any attribute on any tag that starts with data- is treated as meta-data (its not executed, but is recognized as valid by HTML 5 browsers).
  7. Jquery mobile has good examples but not always a good discussion of the concepts behind it, maybe I skipped over that part in my enthusiasm to get developing.
  8. Regular Updates. Currently they seem to release a new version of the alpha every 3 months.

An example of how to use the page function:

1) make sure you have a “page” on your html document:

<body>
   <div id="MyFirstMobilePage" data-role="page"></div>
</body>

2) add the following to the head of the document:

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
<script type="text/javascript">
   $(function(){
      $('<select><option>test 1</option></select>').appendTo('#MyFirstMobilePage).page();
   });
</script>
</head>

If you run this code with firebug etc. installed in your browser you will observe that the HTML gets updated, not only inserting the select tag, but also other tags that are required by the mobile framework.