Lab Sheet1 Question

POLITEKNIK TUANKU SYED SIRAJUDDIN
DEPARTMENT OF INFORMATION AND COMMUNICATION

TECHNOLOGY
COURSE CODE : FP532 COURSE : MOBILE DEVELOPMENT
LABORATORY NO : 1 DATE :
TITLE : MOBILE WEB FRAMEWORK
Lea!"!# O$%&'(e)
By the end of this lab, students should be able to:
1. Install the Webapps tools
2. Use a Content Delivery Networ !CDN" for Webapps appli#ation.
$. Create %&uery 'obile (a)e *a+plate

E*$"+(e!%: (ersonal Co+puter and Notepad,,, -*'./, C00 and %&uery
A&%","%- 1A
U)e a C'!%e!% De.",e- Ne%/'0 1CDN23
1 %2uery CDN is %ust a publi# server on the Web hostin) %&uery 'obile files.
Below are the instru#tion off CDN. It3s +ust e+bed in head ta) off -*'./.
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1..1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-
1.1.0.min.js"></script>
A&%","%- 1B
M'4".e +a#e )%$&%$e
A jQuery Mobile site must start with an HTML5 'doctype' to take full advantae of all of the
framework's features! "#lder devices with browsers that don't understand HTML5 will safely
inore the 'doctype' and various custom attributes!$
%n the 'head'& references to jQuery& jQuery Mobile and the mobile theme '(( are all re)uired to
start thins off! jQuery Mobile *!* works with both *!+!, and *!-!* versions of jQuery core! .e
recommend linkin to the files hosted on the jQuery '/0 for best performance1
<!DOCTYPE html>
<html>
<he!d>
<title>"!#e $itle</title>
<met! n!me="%ie&port" content="&idth=de%ice-&idth' initi!l-sc!le=1">
</he!d>
<body>
...content #oes here...
</body>
</html>
A&%","%- 1C
V"e/+'% (e%a %a#
0ote above that there is a meta %ie&port ta in the he!d to specify how the browser should
display the pae 2oom level and dimensions! %f this isn't set& many mobile browsers will use a
3virtual3 pae width around 455 pi6els to make it work well with e6istin desktop sites but the
screens may look 2oomed out and too wide! 7y settin the viewport attributes to
content="&idth=de%ice-&idth' initi!l-sc!le=1"& the width will be set to the pi6el width
of the device screen!
These settins do not disable the user's ability to 2oom the paes& which is nice from an
accessibility perspective! There is a minor issue in i#( that doesn't properly set the width when
chanin orientations with these viewport settins& but this will hopefully be fi6ed in a future
release! 8ou can set other viewport values to disable 2oomin if re)uired since this is part of
your pae content& not the library!
A&%","%- 1D
I!)"5e %6e 4'5-: Pa#e)
%nside the <body> ta& each view or 3pae3 on the mobile device is identified with an element
"usually a di%$ with the d!t!-role="p!#e" attribute! 9iew the data: attribute reference to see
all the possible attributes you can add to paes!
<di% d!t!-role="p!#e">
...
</di%>
.ithin the 3pae3 container& any valid HTML markup can be used& but for typical paes in
jQuery Mobile& the immediate children of a 3pae3 are divs with data:roles of "he!der"&
"content"& and "footer"!
<di% d!t!-role="he!der">...</di%>
<di% d!t!-role="content">...</di%>
<di% d!t!-role="footer">...</di%>
</di%>
A&%","%- 1D
P$%%"!# "% %'#e%6e: Ba)"& )"!#.e +a#e %e(+.a%e
;uttin it all toether& this is the standard boilerplate pae template you should start with on a
project1
<()*+$,"- html>
<html>
<he!d>
<title>"!#e $itle</title>
</he!d>
<body>
<di% d!t!-role="he!der">
<h1>"!#e $itle</h1>
</di%><(-- /he!der -->
<di% d!t!-role="content">
<p>"!#e content #oes here.</p>
</di%><(-- /content -->
<di% d!t!-role="footer">
<h.>"!#e /ooter</h.>
</di%><(-- /footer -->
</di%><(-- /p!#e -->
</body>
</html>
A&%","%- 1E
M$.%"7+a#e %e(+.a%e )%$&%$e
A sinle HTML document can contain multiple 'paes' that are loaded toether by stackin
multiple divs with a d!t!-role of "p!#e"! <ach 'pae' block needs a uni)ue %/ "id="foo"$
that will be used to link internally between 'paes' "href="0foo"$! .hen a link is clicked& the
framework will look for an internal 'pae' with the %/ and transition it into view!
Here is an e6ample of a = 3pae3 site built with two jQuery Mobile divs naviated by linkin to
an %/ placed on each pae wrapper! 0ote that the %/s on the pae wrappers are only needed to
support the internal pae linkin& and are optional if each pae is a separate HTML document!
Here is what two paes look inside the body element!
<body>
<(-- 1t!rt of first p!#e -->
<di% d!t!-role="p!#e" id="foo">
<h1>/oo</h1>
</di%><(-- /he!der -->
<p>23m first in the source order so 23m sho&n !s the
p!#e.</p>
<p>4ie& intern!l p!#e c!lled <! href="0b!r">b!r</!></p>
</di%><(-- /content -->
</di%><(-- /footer -->
</di%><(-- /p!#e -->
<(-- 1t!rt of second p!#e -->
<di% d!t!-role="p!#e" id="b!r">
<h1>5!r</h1>
</di%><(-- /he!der -->
<p>23m the second in the source order so 23m hidden &hen the
p!#e lo!ds. 23m just sho&n if ! link th!t references my 2) is beein#
clicked.</p>
<p><! href="0foo">5!ck to foo</!></p>
</di%><(-- /content -->
</di%><(-- /footer -->
</di%><(-- /p!#e -->
</body>
LAB Exercise 1:
I!)%$&%"'!:
1nswer all 2uestions.
*otal 'ars : /4 +ars
1. Create %&uery 'obile (a)e usin) any suitable infor+ation. *est 'obile (a)e
usin) android si+ulator.
118 (a0)2

Lab Sheet1 Question

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab Sheet1 Question

Uploaded by

Copyright:

Available Formats

POLITEKNIK TUANKU SYED SIRAJUDDIN

DEPARTMENT OF INFORMATION AND COMMUNICATION

You might also like