PureMVC Employee Admin demo for jQuery Mobile

PureMVC EmployeeAdmin Demo for jQuery Mobile

I started this project last year when jQuery Mobile was still in alpha stage. The first version of Employee Admin demo I made with alpha version of jQuery Mobile was interesting but not fully functional. I so have waited near a year to work on it again. Now that jQueryMobile is final and even passed version 1.0.1 few days ago it was worth it to try to finish the project completely. As recalled for my recent Employee Admin demo for jQuery (call it desktop so) that demo does not use a port of the PureMVC framework for jQuery Mobile. It is not necessary. The two are compatible but independent one from the other.

jQuery Mobile

For those who do not yet know much how jQuery Mobile works, it is loaded in addition to the jQuery framework on a mobile HTML page. The library, once loaded render the HTML page (with some minor jQuery Mobile specific additions) to make it identical to any native mobile application. The framework supports a maximum mobile platforms.

Multi-page template

All pages of a jQuery Mobile application must be hosted on a single HTML page. This is the so called jQuery Mobile multi-page template. Using address bar anchors, the framework is responsible to navigate between different pages of the application without changing the root HTML page hosting the application. For the demonstration I chose to only have two pages. One to manage the list of users, one to manage the form to enter data related to each user. In this demo, there is no dedicated page to manage user roles, it would have been ridiculous to make navigation so complex only to have a page hosting a panel when it can be made with a simple multiple select box.

Consequently there is no UserRoleMediator nor UserRole panel in this version of the Employee Admin demo, UserRoleMediator and UserRole does all the job here. Rest of the classes which are not UI related are still the exact same as in all others Employee Admin demos.

Also what is an important part for PureMVC developers, it means that the whole application is finally displayed in a single main view in a single context. jQuery Mobile is responsible for page display, which finally only consist in hiding all the pages but the one the user is on. The application in itself doesn't have to manage «complex» data transition between pages as it could have to be done in an Android app. Pages associated model/controller are the same and they could all communicate directly through PureMVC notifications system as we are used to in any PureMVC app.

UI Components

The problem is that today jQuery Mobile does not expose any API to facilitate the handling of dynamic components like select menus. When it comes to feed select menus with data there is no method to do so. The method is to manually change <options /> HTML tags of the select menu and then refresh its content using a jQuery Mobile method. Then select menu is decorated with jQuery Mobile own tags. The reference to the component returned by the framework does not match what is seen but a reference to the original form component. The framework is supposed to maintain reltionship between original components and decorated one.

Here is how feeding a select menu with data works.

The original code from the list of departments:

<select id="department" tabindex="-1">
  <option value="-1">Select department</option>
  <option value="0">Accounting</option>
  <option value="1">Sales</option>
  <option value="2">Plant</option>
</select>

The code decorated with jQuery Mobile tags after page initialization:

<div class="ui-select">
  <a href="#" role="button" id="department-button"
  aria-haspopup="true" aria-owns="department-menu"
  data-theme="c" class="ui-ui-btn btn-icon
  ui-btn-right-corner-all ui-ui-shadow-up btn-c">
  <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Select department</span>
    <span class="ui-icon ui-icon-shadow"></span>
  </span>
  </a>
  <select id="department" tabindex="-1">
    <option value="-1">Select department</option>
    <option value="0">Accounting</option>
    <option value="1">Sales</option>
    <option value="2">Plant</option>
  </select>
</div>

To dynamically populate the list you have to re-write content of the <select /> tag and then ask jQuery Mobile to refresh its display using the refresh method.

Dynamic change of the list of departments data:

var department = $("#department").selectmenu();
department.html('<option value="-1">Select department</option>');
department.selectmenu('refresh');

The jQuery Mobile developers tell that version 2.0 of the framework will be oriented to smarter understanding of dynamic content for components forms and pages. But for now I had many problems using what was supposed to work reading documentation. I had to do something much more complicated than in the example above to manage initialization and refresh for the UserForm select menus. This said, what have been done by jQuery Mobile developers is already quite impressive and allow to work with ready for production mobile websites.

Libraries

The project uses:

Live demo, sources

Of course, let me know if it doesn't work on any of the mobile platform you use. It all has been tested on an Android 2.2 mobile.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>