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!

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!

Since this is a Notes database on a Domino server, I figured the best way to get started would be with XPages. I don’t know XPages very well at all, but how hard could it be?

I have also chosen JQuery and JQuery Mobile as my framework. I’ve dabbled with these before so I’m most familiar with these, and that was really the only reason I chose them.

Note about the app: I’m not going crazy with features here, V1.0 will be a proof of concept.

Step 1 - Create the initial page.

The first page a user will see in version one is a list of all the customers. This turned out to be incredibly easy with XPages. After 10 minutes and a repeat control I ended up with this:

Here is all I have so far:

<xp:this.data>
 <xp:dominoView var="view1" databaseName=server/852!!test\crm.nsf" viewName="ALLCOMPANIES">
 </xp:dominoView>
</xp:this.data>
<ul>
	<xp:repeat var="vw" rows="30" value="#{view1}">
		<li>
			<a href="details.xsp?documentId=#{javascript:vw.getNoteID()}">
			<xp:text styleClass='companyName' escape="true" id="computedField1"
			 value="#{vw.fcftCompany_WB}">
			</xp:text>
			<br />
			<xp:text styleClass='companyAddress'
				escape="true" id="computedField2"
				value="#{vw.faddAddress_SS}">
			</xp:text>
			<xp:br />
			<xp:text styleClass='companyAddress'
				escape="true" id="computedField3"
				value="#{vw.faddAddress_SS_1}">
			</xp:text>
			<xp:br
				rendered="#{vw.faddAddress_SS_1!=''}" />
			<xp:text styleClass='companyAddress'
				escape="true" id="computedField4" value="#{vw.faddTown_SS}">
			</xp:text>
			<xp:text styleClass='companyAddress'
				escape="true" id="computedField5"
				value=",&#160;#{vw.faddCounty_SS}">
			</xp:text>
			<xp:text styleClass='companyAddress'
				escape="true" id="computedField6"
				value="&#160;#{vw.faddPostcode_SS}">
			</xp:text>
			<xp:text styleClass='companyAddress'
				escape="true" id="computedField7"
				value=",&#160;#{vw.faddCountry_SS}">
			</xp:text>
			</a>
		</li>
	</xp:repeat>
</ul>

I know, it’s a bit basic, but in the next post I’ll show how Jquery Mobile is going to help with that.

Simply stated, I’m going to build a mobile app for a notes database. I’m going to start with a pretty complex set of databases and bring them to a mobile phone. My goals and materials should be pretty typical for what most people are likely to have lying around - Lotus Notes db that is very old (10+years), very complex (hundres of views, forms and fields), and very large (1 gig+). The goal will be to distill the business functions down to a level that makes sense for a mobile version of that app, yet still provides the user with what they need. I’m also going to try 3 different approaches to the problem and explore the pluses and minuses of each. The first approach will be to work with out of the box stuff - ie XPages.

One more thing. I’m not a web guy and I’m not really a Notes guy either. I know enough about both to be dangerous and to know what to search for in google.