Finally, I am here. With my first blog post for developerWorks!
I have built a sample Model that uses jQuery Mobile (called JQM hereafter) and builds the UI for mobile app. This sample Consumer Model uses the sample Provider Model (Tutorial_DB_Provider_WASCE.model) that is supplied with WEF. You get this sample Provider Model when you add “Tutorials and Samples” Feature Set to your project (I’ve included the same model here in the attached sample too).
The Consumer Model uses only two Service Operations from the Provider Model. When you run the Consumer Model, you will see the list of employees in a List View of JQM. Once you tap / click on an employee name, details of this employee will be shown.
Create a new project in WEF and extract the JQM library to the WebContent folder.
You can check out the HTML in employeeList Imported Page to see how a basic JQM page is created using HTML. A named tag (empList) has been added to the page to place the Data Page builder. After adding the Data Page builder, I have exported the HTML for Data Layout and modified the HTML to change the auto-generated table into JQM Listview. This can be seen in pages/employeeList MyDBRowSet.html. Here is a screenshot from my desktop browser (Chrome). When accessed from a mobile device browser, it will have the same look and feel. The filter provided on top is an out-of-the-box feature of JQM which is added by using just an attribute. You can filter the list by any of the fields / values shown in the UI.
Then I have added a Link builder which will call an Action List (showEmpDetails) which takes the employee number as input. This Action List passes the employee number to retrieveMyDB Service Operation, gets the employee details and shows the employeeDetails page. Again, this page has been customized using HTML Data Layout to use the responsive table provided by JQM. This responsive design too is OOTB and it can be customized to fit your needs. This feature is really cool and one of my favorites in JQM!
The above screenshot is taken with the browser window size set to simulate a mobile phone size. Now if you view the same UI in a tablet (Android or iPad or any other), you will get a layout like this:
This will really be helpful if you have a lot of records to be displayed in the UI; mobile phones will have a stacked view where all the records will be shown one below the other in two column layout with labels as the first column. And you can leverage the screen size in tablets and mobile phones with larger display by displaying data in the traditional tabular format where the labels are shown in one header row and the data below.
You would see a nice transition when the employee details page is shown after clicking on an employee name and again when you click on the Back button in the details page. This too is given by JQM with the addition of an attribute (data-transition=”slide”) to the anchor tag.
That’s pretty much the sample does. I have attached the WEF export below.
To run the sample:
1. Create a project (no Feature Set is required) and deploy it in WAS CE
2. Import the attached ZIP file to your project
3. Open the Tutorial_DB_Provider_WASCE model and click on Create Table button. (If you get a message that the table already exists, no problem. You can go ahead to the next step)
4. Run jqmConsumer.model
As you might already be aware, Web Experience Factory is a great tool to build highly-customized, rich web applications. With the simplicity and power of jQuery Mobile in WEF, we can build great mobile web apps with good UI & UX.
Hope this helps! Please feel free to ask any questions!