Build your User Interface with jQuery Mobile

August 10, 2014 by Herimanitra

Our user interface will be build using jQuery Mobile. It is responsive, mobile first framework and easy to learn.

jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

HTML5 tags

The following tags are useful when building a mobile questionnaire:

Input tag

Input tags are key part of your questionnaire as most of data you collect have to be entered in an input field.

When using an input tag in your html remember not to forget its attributes such asid, name but alsoplaceholder which is useful when you want to guide user a little bit.

select tag

select tags are useful when want to save time . It assumes that predifined answers are known in advance.

jQuery Mobile template

A typical jQuery mobile page is structured into 03 parts:

1. A header defined like this:

   <div data-role="header">
   <h1> Your header title here</h1>
   </div>

2. The content of the page:

   <div data-role="content">
   ...
   </div>

3. and finally a footer defined like this:

   <div data-role="footer" data-position="fixed">
   <p> All rights reserved 2014</p>
   </div>

These 3 elements are embedded inside a div tag that have a data-role="page" and a unique id.

Now that you have set up your jQuery mobile page, let's see in details these different elements.

---

Input tag can be controlled with its attributes:

<input id="myid" maxlength="10" name="myname" type="numeric" />

In this above model, we define an input tag that can receive a maximum 10 digits and has a type numeric.

You can control input behavior using events such as:

• onkeydown
• onkeypress
• onchange
• onclick
• ondbclick

via Javascript. Let's see how to prevent user from entering a character with this input:

<input id="myid" maxlength="10" name="myname" type="numeric"
            onkeypress="prevent_char(event,'myid');" />

prevent_char() is a javascript function that I define to prevent user to enter a character from an input tag given its id after listening into events triggered by keyboards.

function prevent_char(event,id) {
  if ( event.which>64 && event.which <91 ) {
		$('#' + id).val("");
	}
}

You can do the opposite with prevent_num():

function prevent_num(event,id) {
  if ( (event.which>48 && event.which <58) || (event.which>96 && event.which <106)  ) {
		$('#'+ id ).val("");
	}
}

I have also written my own autotabulation in order to improve user experience. I defined a function called next():

function next(name,target,length)
{
  var myname=document.getElementsByName(name)[0].value;
	if ( myname.length==length-1 ) {
		$('#'+target).focus();
	}
}

next() takes 03 arguments:

1. the name of the current tag where cursor is located
2. the targeted tag
3. and the length of the current tag

You can work exclusively with itsid attribute by replacing getElementsByName with getElementsById

---

select tag, on the other hand, has slightly different syntax:

<select id="myselecttagid" name="myselecttagname" data-native-menu=false 
multiple=multiple>
<option value="" selected></option>
<option value="1">Label1</option>
<option value="2">Label2</option>
<option value="3">Label3</option>
</select>

This select tag allow you to select more than one item (Label1,Label2,Label3). Depending on your need, you may remove multiple=multiple so that user can only select one item. To record value, you have 02 options:

• record value(s) based on labels:

  $('myselecttagid option:selected').text();

  and loop through all labels or
• record value(s) based on their code:

  $('myselecttagid option:selected').val();

  and loop again

Develop and host with Meteorjs

What is Meteor?

Meteor is an open-source platform for building top-quality web apps in a fraction of the time.

Install Meteor:

from the command line, type:

$ curl https://install.meteor.com | /bin/sh

create a project:

$ meteor create questionnaire
$ cd questionnaire

Add some javascript libraries:

$ meteor add jquery

Inside questionnaire folder, edit the html file normally called questionnaire.html

Case Study

Let's build a mobile data-entry with 03 variables: name, address and a phone number on single jquery-mobile page:

First, you need to define a meteor template with its name from your html file:

<body>
{{>template_name}}
</body>

<template  name="template_name" >
<div data-role="page">
<div data-role="header">
<h1> A mobile data-entry</h1>
</div>
<div data-role="content">
<p> Enter your name:</p>
<input id="myid" maxlength="10" name="myname" type="text"
            onkeypress="prevent_num(event,'myid');" />

<p> Enter your address:</p>
<input id="myaddress" maxlength="10" name="myaddress_name" type="text"
            onkeypress="prevent_num(event,'myaddress');" />

<p> Your phone number:</p>
<input id="myphoneid" maxlength="15" name="myphone_number" type="numeric"
            onkeypress="prevent_char(event,'myphoneid');" />

</div>
<div data-role="footer" data-position="fixed">
<p> All rights reserved 2014</p>
</div>
</template>

In Meteor, you do not need to specify the html tag, it is automatically managed by the server.

Furthermore, all contents from template_name is loaded into the body of the html by specifying {{>template_name}}.

To run this code locally,type:

$ meteor

To deploy your app online, pick up a developper account in Meteor website then, in the command line, type:

$ meteor deploy NameOfYourApp.meteor.com

For a complete demo, look at this live example here

Where collected data are stored?

Data are stored in the cloud.

They can be retrieved using the command line and from mongoHQ website as data are stored in bson format (the native format of mongo database).

To obtain the url, type:

$ meteor mongo --url NameOfYourApp.meteor.com

You will then get an address that you have to copy here

For more advanced and recent projects, have a look at annuaire