Worksheet C: Using some jQuery Mobile

goldbashedAI and Robotics

Nov 15, 2013 (3 years and 6 months ago)

62 views



Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.


Worksheet C:
Using
some jQuery Mobile

Chris Loftus
(
cwl@aber.ac.uk
)
and Andy Starr

(
aos@aber.ac.uk
)

March

2013

In this worksheet you will
add to a template solution that uses

jQuery Mobile web framework,
to
provide

app
-
like features that are appropriate for a mobile platform.

The solution to
this

exercise
can be found in the folder:
worksheets/with
-
jquery
-
mob
ile
-
solution
.


We want to produce mobile screens that look like the following:


Step One: Setting things up

1.

Use you
r

folder navigator tool (e.g. Windows Explorer or Mac’s Finder) to
c
opy

the
folder
with
-
jquery
-
mobile
-
template

and paste into the worksheets folder, giving it the name
with
-
jquery
-
mobile
.



Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.

2.

Navigate

using Bluefish to this folder. Notice that it has a subfolder called css. This contains the
CSS we used in
with
-
media
-
queries
-
mobile
-
first
-
solution
. We will be changing t
his CSS. Also,
notice the
lib

folder. This and its subfolders contain jQuery and jQuery Mobile (JQM) resources,
including their Javascript libraries. JQM builds on top of jQuery.

3.

Open

the index.html file.

4.

Notice that the

link
href

attributes
point to

the
c
ss

folder

files
, e.g.

href="css/conference
-
mobile
-
first.css"

5.

Also notice the

link and script
elements

that

include the jQuery Mobile and jQuery

libraries
(lines
16, 34 and 35)
:


Note that the positioning with respect to the other link
elements

is important. The JQM CSS is
brought in first so that we have the opportunity to modify it with our own CSS rules. The core JQ
JavaScript is brought in before the JQM Java
Script, since the latter build
s on the former.

Step Two: Adding some jQuery

Mobile page structure

JQM uses special
element

data
-
*

attributes to
designate parts of the document. It is typical for
several display pages to be included within a single HTML file, where each page
is given the attribute
data
-
role
=”
page

. Each of these p
ages is then subdivided into header, content and footer parts,
each designated using appropriate
data
-
*

attributes.

Placing lots of content within a single HTML document rather than using lots of separate documents
means that there are fewer requests over

the network and either the whole site is downloaded or
none (mobile connectivi
ty is unreliable).
Also there are fewer link and script requests to local or
remote files.
1

The downside to this is that the HTML file can become large and difficult to maintain
,
and so a balance needs to be struck.

We will have three pages in our prototype web app: the
home
,
sessions

and
map

pages. The
home

page will contain the content you developed
in earlier worksheets
. The
sessions

page will
contain a
list of conference sess
ions
.

The
map

page is beyond the scope of this workshop and may be covered
in a later course.




1

On mobiles, latency for each request is relatively high, often as much as two seconds.



Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.

The template already contains the home

page. Let’s take a look at its elements.

6.

Notice that the
article

element has a

data
-
role

attribute

with the value

page
:

<a
rti
cle id="
home_page
"
role="document"

data
-
role="page"
>

This will be our home page. Note that this will be the first page to be displayed when we first
load index.html; JQM uses the first page it finds.

The
id

attribute is also significant, since it
contains the name (
home_page
) that we will use to navigate to this page from some other page.
The
role

attribute is an HTML5 attribute that supports assistive technologies.

2

If you
repoint

your web server at this f
older and load the web site from
a browser

(in narrow screen) you will
see:


Notice that the hypertext links at the top of the page are now buttons.
JQM apps are aimed at
mobile devices,
and so
JQM e
ncourages us to use GUI widgets that are easier to touch
: small
text
-
based links are discouraged.
Let’s look at how these buttons are defined
.






2

Note that the solution also has several further assistive (accessibility) technology attributes, which we’ve left
off here to make things simpler. See the template HT
ML for comments on what these mean.



Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.


7.

The
<
header
>

element
has been changed
so that it is now
has
the following

attributes
:

<hea
der class
="page_header"
role="banner"

data
-
role="header"


data
-
theme="b"

data
-
position="fixed"
>


JQM will detect this as a header
3

and apply its styling rules. The swatch of colours and fonts etc
that it uses as part of this styling can be defined using the
data
-
theme

attribute. JQM provide
s

default swatches (a to c) and you can define your own using a theme roller (
which is
beyond the
scope of this workshop).
4

Theme “b” is similar to our

original colour scheme so we

use that.

The
data
-
position

attribute indicates that we want JQM to keep the

header where it is when we
scroll the page’s content.

8.

We need to preserve our original styling for the header text. To stop JQM applying its own
styling to the <h1> element,
we
surround it with a
div

element:

<div>


<h1>The Future of the Web Confere
nce</h1>

</div>

9.

To turn the links into buttons
we
change the <nav> element so that it is
has the
navbar

value for
its
data
-
role

attribute
:

<nav data
-
role="navbar">

10.

Update

the conference
-
mobile
-
first CSS file to remove CSS rules that are no longer required:

a.

Comment out

or
remove

the
header.
page_header

background colour rule
.


b.

Comment out

or
remove

all the styles that apply to the <nav> element (there are four
such styles).

c.

In the same file,

c
hange

the header.page_header h1 style to include some padding:

header.page_header h1 {


padding
-
bottom: 0.8em;


padding
-
top: 0.8em;


text
-
align: center;

}

d.

The logo takes quite a lot of screen space for a small mobile

screen
. Leave the HTML
element in place (so that it can be used by

wider screens) but
change

the
.
logo

style so
that it includes the rule:

display: none;




3

Unfortunately, it won’t determine this from the fact that we’re using an HTML5 header element. We have to
be explicit and use the data
-
role attribute. Note that we also have a role attribute that is aimed at assistive
technologies.

4

There is a theme roller tool online:
http://jquerymobile.com/themeroller/




Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.

Note that
,

unfortunately
,

this will still result in the image being downloaded; the
browser will do this automatically as soon as it sees the
<img> element. The community
is looking at a way of
providing media queries as part of this element. Alternatively, and
instead of using an <img> element, background images can be referenced directly from a
CSS style.

However, this removes some of the semantic content from the web page and
causes problems f
or assistive technologies.

Now
refresh

the browser to see the changes. You should see the following:


Notice that if you scroll the content the
header remains fixed.
Also, t
he links are now
buttons.

For wider screen
s the styles need to be changed to show

the image (display: block;) and
to reposition the buttons correctly.

See the solution.

11.

JQM requires us to define the content of the page
.
We do this by adding a new section to the
HTML that wraps the
main_text

and
twitter_output

sections.
This
must
also have the
data
-
role

attribute as shown.
Notice the following
<section> just before

the
main_text

section (
that has
the

id “
main_text
”):

<section
role="main"

data
-
role="content">

12.

The

footer contains a tabbed navigation bar.
Notice

the following HTML jus
t after the content
section’s closing element tag:

<footer data
-
role="footer" data
-
position="fixed">


<nav data
-
role="navbar">



Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.


<ul>


<li>


<a class="ui
-
btn
-
active ui
-
state
-
persist" data
-
icon="house">Home
</a>


</li>


<li>


<a href="#sessions" data
-
icon="
sessions
">
Sessions
</a>


</li>


<li>


<a href="#map" data
-
icon="map">Map</a>


</li>



</ul>


</nav>


</footer>


Notice that it will be a fixed
-
position footer and that the buttons are
displayed

as tabs. The latter
is achieved by adding the JQM CSS classes
ui
-
btn
-
active

and
ui
-
state
-
persist

to the button we
want to highlight. For
the current home

page this is the home button tab. The
data
-
icon

attributes

refer to CSS classes of the form
ui
-
icon
-
<name>
, e.g.
ui
-
icon
-
house
. Let’s add these to
the CSS file next.

13.

Add

the following to the bottom

of the
conference
-
mobile
-
first

CSS file
. We suggest that you
copy and paste this from the electronic version of this worksheet
:

.ui
-
icon
-
house { background
-
image: url(icons/home.png); }

.ui
-
icon
-
sessions

{ background
-
image: url(icons/sessions.png); }

.ui
-
icon
-
map { background
-
image: url(icons/map.png); }


Note that the icons should be PNG
-
8 files and 18x18 pixels in size.

14.

Copy

the provided
icons

folder into the
css

folder and refresh your browser. You should now see:




Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.

Step Three: Adding the session
s and map pages

Let’s start by adding the other two pages as empty pages. Unfortunately, we are forced to duplicat
e
the header and footer sections. The footer section will need to be altered slightly, so that the correct
tab is highlighted. The header will

remain unchanged. We could get round this by injecting the
header dynamically using JavaScript, but that has the downside that we then rely on JavaScript being
switched on, which breaks progressive enhancement.
5

Note that navigation between pages is done
via hash navigation links

(sometimes called fragment
identifiers)
. So a link associated with a footer tab will have
an
href

attribute URL

such as “#sessions”
which are use by JQM to navigate to a page with the
id

“sessions”, replacing the calling page in t
he
browser view with the called page.

15.

Add

the
following
HTML for the empty
sessions

page

(again please copy and paste from the
electronic version of this worksheet)
. A comment at the bottom of the index.html file indicates
where this should be added.

<!
--
N
otice how the id for the page is “sessions” and that the footer
s

in the other two pages


refers to this via their
href link “#sessions”.
--
>

<article id="sessions"
role="document"

data
-
role="page">


<header class
="page_header"
role="
banner
"

data
-
role="header"


data
-
theme="b" data
-
position="fixed">


<
div

class
="logo">


<img src="logo.jpg"

alt="The conference home page logo"
/>


</
div
>


<div>


<h1>The Future of the Web Conference</h1>


</div>



<nav data
-
role="navbar">


<ul >


<li><a href="/">Latest Posts</a></li>


<li><a href="talks">Talks</a></li>


<li><a href="speakers">Speakers</a></li>


<li><a href="contact">Conta
ct Us</a></li>


</ul>


</nav>


</header>




<section
role="main"

data
-
role="content">


</section>




<footer data
-
role="footer" data
-
position="fixed">




5

Note that JQM is designed to support progressive enhancement, and will attempt to do something
reasonable even

if JavaScript is switched off or there is no support for HTML5. Judge for yourself, try switching
off JavaScript and see what happens.



Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.


<nav data
-
role="navbar">


<ul>


<li
>


<a data
-
icon="house" href="#posts">Home</a>


</li>


<li>


<a class="ui
-
btn
-
active ui
-
state
-
persist" data
-
icon="sessions">Sessions</a>


</li>


<li>



<a href="#map" data
-
icon="map">Map</a>


</li>


</ul>


</nav>


</footer>

</article>


16.

Do

same for the
map

page:

<article id="map"
role="
document
"

data
-
role="page">


<header class
="page_header"
role="
banner
"

data
-
role="header"


data
-
theme="b" data
-
position="fixed">


<
div

class
="logo">


<img src="logo.jpg"

alt="The conference home page logo"
/>


</
div
>



<div>


<h1>The Future of the Web Conference</h1>


</d
iv>



<nav data
-
role="navbar">


<ul >


<li><a href="/">Latest Posts</a></li>


<li><a href="talks">Talks</a></li>


<li><a href="speakers">Speakers</a></li>


<li><a href="contact">
Contact Us</a></li>


</ul>


</nav>


</header>




<section
role="
application
"

data
-
role="content">


</section>




<footer data
-
role="footer" data
-
position="fixed">


<nav data
-
role="navbar">



Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.


<ul>


<li>


<a data
-
icon="house" href="#posts">Home</a>


</li>


<li>


<a data
-
icon="sessions" href="#sessions">Sessions</a>


</li>


<li>



<a class="ui
-
btn
-
active ui
-
state
-
persist" data
-
icon="map">Map</a>


</li>


</ul>


</nav>


</footer>

</article>


17.

Refresh

the browser. Notice that when you
click

on the
sessions

or
map

tabs that, as expected,
you get blank content for the page.

One thing that breaks tabbing behaviour (in my opinion) is that clicking the back button takes
you back to the previous tab content. This is not normal tabbing behaviour on a mobile app; the
bac
k button should take you to the page that was displayed before the tabbed part of the app
was displayed. Unfortunately, JQM doesn’t provide a non
-
JavaScript way of changing this back
button history behaviour. The option
al

section
at the end of this workshe
et

will show

you how
you can use JavaScript to change this behaviour.

18.

Let’s add some content to the
sessions

page. The following will add a list of events. Clearly, this is
static data. If you wanted to update it dynamically
,

based on
communicating

with

a server
,

then
we would need to add some JavaScript, which is beyond the scope of this workshop
.
A
dd

the
following content
after the <content id=”sessions” …> element)
:


<ul data
-
role="listview" data
-
filter="true">


<li><a href="">



<
div

class="session
-
list
-
item">


<h3>OPENING CEREMONY</h3>


<div>


<h6>Social</h6>


<h6>09:00
-

09:30</h6>


</div>


</
div
>


</a></li>


<li><a href="">


<
div

class="session
-
list
-
item">


<h3>Keynote Address</h3>


<div>



Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.


<h6>Keynote
</h6>


<h6>09:30
-

10:30</h6>


</div>


</
div
>


</a></li>


<li><a href="">


<
div

class="session
-
list
-
item">


<h3>COF
FEE BREAK</h3>


<div>


<h6>Social</h6>


<h6>10:30
-

11:00</h6>


</div>


</
div
>


</a></li>


<li><a href="">


<
div

class="session
-
list
-
item">


<h3>TECHNICAL SESSIONS</h3>


<div>


<h6>Technical</h6>


<h6>11:00
-

12:30</h6>


</div>


</
div
>


</a></li>


<li><a href="">


<
div

class="session
-
list
-
item">


<h3>LUNCH</h3>


<div>


<h6>Social</h6>


<h6>12:30
-

14:00</h6>


</div>


</
div
>


</a></li>


<li><a href="">


<
div

class="session
-
list
-
item">


<h3>TECHNICA
L SESSIONS</h3>


<div>


<h6>Technical</h6>


<h6>14:00
-

15:30</h6>


</div>


</
div
>


</a></li>


<li><a href
="">


<
div

class="session
-
list
-
item">


<h3>TEA BREAK</h3>



Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.


<div>


<h6>Social</h6>


<h6>15:30
-

16:00</h6>


</div>


</
div
>


</a></li>


<li><a href="">


<
div

class="session
-
list
-
item">


<h3>TECHNICAL SESSIONS</h3>


<div>


<h6>Techn
ical</h6>


<h6>16:00
-

17:30</h6>


</div>


</
div
>


</a></li>


<li><a href="">


<
div

class="session
-
list
-
item">


<h3
>Computers and Thought Award Lecture</h3>


<div>


<h6>Technical</h6>


<h6>18:00
-

19:00</h6>


</div>


</
div
>


</a></li>


</ul>


19.

Add

the following CSS styling rules to the end of the
conference
-
mobile
-
first.css

file:

.session
-
list
-
item h3 {


float: left;


margin
-
top: 1.25em;


font
-
size: 0.8em;


width: 65%;


margin
-
right: 5%;

}


.session
-
list
-
item h6

{


font
-
size: 0.65em;

}


.session
-
list
-
item div {


float: right;


width: 30%;

}



Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.

20.

Refresh

your browser and
click

on the
Sessions

tab.
You should now see the following:



Notice how we also get a useful filter.

We use JQMs
listview

widget to provide the filter and style
the list as well as make the whole
of each
row clickable. We have
also
added a little more
CSS
style to position
the text in our rows
correctly.

Optional Activity

We mentioned earlier that the back
-
button behaviour associated with tabs
appears not to work in
the way we

want; of course you may disagree. To change the default behaviour we need to add a
little JavaScript to our web app.

1.

Under your project folder
create

a folder/directory called
app
. This will contain our application
JavaScript.

2.

Within the
app

folder
create

a new file called
Controller.js
.
Open

the empty file.

3.

Copy

the follo
wing JavaScript into the file. We

have included comments to try and explain what
the code does, however if you do not have a programming background, or even a JavaScript
background, then it might not make too much sense. Hopefully, you’ll notice the difference
when we reload the mobile app a shortly.

var Conference = Conference || {};

Conference.controller = (function ($, document) {



"use strict";




// This changes the behaviour of the anchor <a> link


// so that when we click an anchor link we change page without



Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.


// updating the browser's history stack (changeHash:
false).


// We also don't want the usual page transition effect but


// rather to have no transition (i.e. tabbed behaviour)


var initialisePage = function(event){




$('a[data
-
role="tab"]').each(function () {


var anchor = $(this);



anchor.bind("click", function () {


$.mobile.changePage(anchor.attr("href"), { // Go to the URL


transition: "none",


changeHash: false


});


return false;


});


});



};



var init = function () {


// The pageinit event is fired when jQM loads a new page for the first time into the


// Document Object Model (DOM). When this happens we want the initialisePage function


// to be called.





$
(document).live("pageinit", initialisePage);




};



// Provides a hash of functions that we return to external code so that they


// know which functions they can call. In this case just init.


var pub = {


init:init


};


retur
n pub;


}(jQuery, document));


// Called when jQuery Mobile is loaded and ready to use.

$(document).live("mobileinit", function () {


Conference.controller.init();

});


4.

Update

all the anchor links in the page footers so that they include a
data
-
role=”tab”

attribute,
e.g.:

<a data
-
icon="house" href="#posts" data
-
role="tab">Home</a>

5.

Add

the following <script> element to the top of the index.html page. Make sure that it is
inserted between the script element for jQuery

and the script element for jQuery Mobile:


<script src="lib/jq/jquery
-
1.8.2.js" type="text/javascript"></script>


<script src="app/Controller.js" type="text/javascript" ></script>


<script src="lib/jqm/jquery.mobile
-
1.2.0.js" type="text/javascrip
t"></script>




Software Alliance Wales i
s a European funded project led
by Swansea University

in partnership with the University
of Bangor, Glamorgan, Aberystwyth and the University of
Wales Trinity Saint David.

Loading Controller.js will also trigger the call to the
init

function and therefore associate
JavaScript function
initialisePage

with the JQM’s page initialisation event.

Clear

the browser’s history and
reload

the app. Switch pages using the
tabs and make sure that
hitting the back button now takes you back to the page displayed prior to showing the app. If it
doesn’t call us across and we’ll help you debug your app!