Notes on Mobile, Adding JQuery Mobile to an XPage

Adding JQuery Mobile to an XPage

So I now have a very basic view on the first page of my mobile app. The list is really kinda ugly though even though I did do a little bit of styling with a basic CSS file.

Since this is intended to be a mobile app I don’t want plain old links because those are hard to see and press when viewed on a small screen. This is where JQuery Mobile comes in. JQM is a smallish JS and CSS library that works to create pages that look and transition more like native phone apps do. It’s not iOS or Android specific in it’s behavior, but tries to create a native like experience that is the same across each of these devices.

To use JQM you need to do a few things to your markup according to the following documentation page. I’m using the hosted version, so to begin with I added the following to the source of my XPage:

<xp:script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"
	clientSide="true">
</xp:script>
<xp:styleSheet
	href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<xp:script
	src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"
	clientSide="true">
</xp:script>

The first is JQuery and that is needed by JQuery mobile. The second two are what you need for JQM.

The next step is to add the mark up that JQM uses to identify a page. It’s only a few lines:

<div data-role="page">
	<div data-role="content">
		<!-- <ul> and <xp:repeat> tags go in here --> 
	</div> <!--content-->
</div> <!--page-->

We still haven’t gotten anything new yet though. The page still looks the same. The big changes come when we apply a JQM style called “listview” to the list we created.

<ul data-role="listview" >

JQM uses the data-role attribute to apply it’s styles and things since there is more going on actually than just a style change. So now with just those little changes look what we have now!

Almost there!

Whoops! That isn’t quite what I was expecting! Turns out there is one more simple thing we need to do for this to all work right.

Simple now…. but this actually took a long time to figure out!

Back in the source to the XPage, remove the id=”repeat1” attribute form the repeat control. Once that was done I had what I wanted:

There is a lot more that JQM can do for us besides some simple list formatting. In addition it’s important to understand how JQm handles links and page transitions, which is what I will do next!