Using jQuery Mobile with Worklight 5.0.5
DavidDhuyvetter 10000034CQ Comments (6) Visits (20288)
Since the Worklight 5.0.5 Rich Page Editor has new support for jQuery Mobile, I thought I'd give it a spin. I'm not a jQuery expert by any stretch, but with the new editor support, I may end up using it as often as I use dojo.
Unlike dojo, you still need to provide your own copy of jQuery Mobile (though not jQuery base) when you create the Worklight project. I downloaded jqu
In Worklight Studio, I created a new Worklight Project with a new Hybrid Application. I checked the Add jQuery Mobile box and used the archive button to brows for my downloaded jque
When I click on Finish, it created the project with the imported jquery.mobile-1.2.0 artifacts right in the application's common folder.
The generated HTML file already had jQuery Mobile configured.
If you open the HTML file in the Rich Page Editor, you will find that the kind of mobile navigation and drag and drop editing that was available for dojo in Worklight 188.8.131.52 is now available for jQuery Mobile.
In the above screenshot I've set the device to Apple iPhone 3GS, and I've clicked on the new Scale to fit button to get a convenient view of the current page. I've also clicked on the button to Show Mobile Navigation and put the Mobile Navigation view next to the Editor.
A nice feature is the Palette view, which now includes jQuery Mobile Widgets. This allows you to build a page by simply dragging widgets from the palette and dropping them onto the Design pane of the Rich Page Editor. This allows you to very quickly build the page, having direct access to both the source and the presentation at each step.
The Design pane within the Rich Page Editor is quite powerful, you can select elements in it to have the corresponding HTML source code selected. You can even edit elements right in the Design pane.
Once I started working with it, I immediately noticed a problem that is apparently a jQuery Mobile bug. When I have a page containing a header and content, the header overlaps the content. Anything that causes the window to resize (like switching to a different view and switching back) straightens it out.
I've worked around this by adding the following to wlCommonInit():
This resizes the HTML body after everything is fully loaded and the page lays out without the overlap. Unfortunately, the Design pane of the Rich Page Editor often still displays the page with the overlap.
I was able to add more pages in the Mobile Navigation view, and switch the page displayed in the Design pane by selecting the page in that view. The combination of the 2 pane Rich Page Editor, the Palette view with jQuery Mobile widgets, The Mobile Navigation view, and the Properties view allowed me to quickly put together a basic app with a series of pages and working navigation.
jQuery Mobile makes it easy to put together a list where selecting each item in the list results in the app navigating to another page. On each of the pages that I added, I dropped a back button onto the header, and configured it to return to the initial page.
I added data-role="back" to the basic button to make this button navigate back. I gave it the standard jQuery back button icon, and added a class to allow me to hide this button on Android. Android phones have standard back buttons outside the display area, so one common platform specific customization is to remove the back button from the header and use the phone's back button instead.
With this class set on the elements that I don't want on Android, taking them out just in that environment was easy. I added an Android environment, and in the application css file under the application's android/css folder I added:
Once I had that working, I wanted to try full device theming. Device theming is the selection of a theme to match the device that the app is running on. dojo has built in device theming, and can automatically select the
It is worth mentioning that the value of device theming should be carefully weighed against its costs. At a high level it seems to be a brilliant idea. A single application code base conforms to the look and feel of the platform it is running on through the use of a device theme. The reality, however, is that it is not easy to design a UI that looks good and works well under multiple themes. Also, while available device themes superficially resemble native themes on their respective platforms, there are differences between the available jQuery device themes and native themes. Whether device theming is worth the up front UI design and testing cost is a question that probably should be answered on an application by application basis.
But even if you aren't using full blown device theming, the techniques are the same as those you would use to make minor device specific tweaks to the look and feel of your application.
While dojo has built in themes for Android and iOS, I had to go looking for jQuery Mobile device themes. I found what looked to be an r
I needed to use css @import to pull those themes in, but @import only works if it is at the beginning of a css file. The HellojQuery.css files in the environments get append to the end of HellojQuery.css from the common folder, so putting an @import at the beginning of that file in each of the Environments won't work.
To solve this problem, I introduced a new file named deviceTheme.css. I created the file in the common css folder, as well as in the css folder for my 2 device environments. In the common css folder, the file is empty. In each environment folder, the file contains the @import needed for that environment. When the Worklight build is performed. the deviceTheme.css in each environment is append to deviceTheme.css in the common css folder. But because the file in the common folder is empty, the @import from the environment css files is still at the top of the
I imported deviceTheme.css is in the common html file:
And the result was a device specific theme is applied to each environment:
There was final bit of polish needed. The Android Holo theme has 3 options: Holo Light, Holo Dark, and Holo Light with dark action bars. In the jQuery mobile Holo theme, these correspond to swatches within the theme. I wanted to set the swatch at the page level to "a" (which corresponds to Holo Dark in the jQuery Mobile theme I'm using) on Android.
The easiest way to set a swatch is right in the HTML. If you put the attr
For HTML files that are truly distinct per environment, this is exactly what you would want, but it is a large hammer to be hitting the fine problem of adding a single attribute to a few elements. So I went looking for another way to do it. It turns out that you can
The result is that in all environments mobile-init.js will exist, but that it will be empty in all environments except Android. (where it contains exactly the code I needed to set the page default theme)
I added mobile-init.js to the main HTML file in the common folder:
... and now on android my application uses the Holo Dark theme.
As I said at the beginning, I've got lots to learn when it comes to jQuery Mobile, but it looks like Worklight 5.0.5 gives me the tools I need to get up and running quickly.