Chapter 16
Building with Web App Frameworks
WHAT YOU WILL LEARN IN THIS CHAPTER:
- Exploring the jQuery Mobile frameworks
- Using iWebKit to create a web app
When the iPhone was first introduced, you had few options for creating web apps for Apple’s mobile device. You could use the original iUI .js library, or you could create everything from scratch. In the words of S.E. Hinton, that was then, and this is now. Today, you have a plethora of options available to you — not only for creating apps for iPhone and iPad, but also for creating them for Android.
In this chapter, I highlight two of the frameworks — jQuery Mobile and iWebKit — both of which provide great alternatives for web developers. I focus on these two for their ease of use, consistency with standard web conventions, and because they offer two different approaches to IOS support. jQueryMobile is focused on providing cross-platform mobile solutions, so it doesn’t attempt to emulate the native IOS look and feel with its theming options. (However, I also introduce you to an open-source template that does just that.)
iWebKit, on the other hand, takes an opposite approach. Much like the updated iUI framework covered in Chapter 9, iWebKit focuses on providing a native-looking IOS experience for web apps. Based on your app needs, you can decide which makes the most sense for you.
As part of the comparison, I create a basic navigation-based app with each framework to help illustrate how you can utilize each framework for a common solution.
If you worked through the Hello World example in Chapter 5, you already have an introduction to jQuery Mobile. jQuery Mobile is built on the popular jQuery framework and makes heavy use of normal HTML mixed with CSS and JavaScript. Although this book focused on jQuery Mobile’s support for IOS, it also supports Android, BlackBerry, Windows Phone 7, Kindle, Nook, and other mobile platforms.
One of the advantages to using a platform such as jQuery Mobile is that it enables you to focus more on the business logic of the app and less on the UI and general app functionality. For example, jQuery Mobile supports touch events, animated page transitions, back button history support, and theming.
A jQuery Mobile app begins with an index.html page. The typical basic structure consists of core elements in the head and page.
Head:
- viewport meta tag and any other desired tags for mobile app development.
- Links to the jQuery Mobile CSS style sheet. This file can be your own maintained version of the style sheet or else just link to the master library on code.jquery.com.
- Links to the jQuery and jQuery Mobile JavaScript libraries. As with the style sheet, these can be your own files or else just link to the master libraries on code.jquery.com.
Body:
- One or more div elements with a data-role="page" attribute to indicate a mobile “page” of the app.
- Within each page div, there are usually three nested div elements:
- <div data-role="header"> defines the header.
- <div data-role="content"> defines the content section.
- <div data-role="footer"> defines the footer.
The following is the basic template:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script
type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">
</script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
The preceding template is the starting point for most any app, and the following exercise shows you how to transform that template into a basic app.
TRY IT OUT: Creating a Basic jQuery Mobile App
Use the following steps to create a basic app using the jQuery Mobile framework.
1. Create a new blank HTML file in your text editor and save the document as BIDHJ-Ch16-Ex1.html.
2. Add the following code the file:
<!DOCTYPE html>
<html>
<head>
<title>SL Schools</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>SL Schools</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
<h4>Operation Classroom</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Code snippet BIDHJ-Ch16-Ex1.html
3. Add the following bulleted list in the content div:
<ul data-role="listview" data-theme="g">
<li><a href="#albert">Albert Academy</a></li>
<li><a href="#baoma">Baoma Secondary School</a></li>
<li><a href="#bo">Bo Centenary</a></li>
<li><a href="#fergusson">Fergusson Memorial Secondary School</a></li>
<li><a href="#koidu">Koidu Secondary School</a></li>
<li><a href="#taiama">Taiama Secondary School</a></li>
<li><a href="#makeni">Makeni Secondary School</a></li>
</ul>
Code snippet BIDHJ-Ch16-Ex1.html
4. Add the following page div code after the first one, but before the closing body tag:
<div data-role="page" id="albert">
<div data-role="header">
<h1>Albert Academy</h1>
</div><!-- /header -->
<div data-role="content">
<h2>About the School</h2>
<p>Albert Academy is located on Berry Street in Freetown. The school began
on October 4, 1904, and was named after American missionary, Rev. Ira E.
Albert who was killed in a boating accident. Rev. Albert was from
Pennsylvania. The school has grown from 6 students to 2000, and currently
has a staff of 126. Albert Academy is one of the most successful
institutions of learning in Sierra Leone. Plans are to renovate
the boarding house into classrooms for the Junior Secondary School.</p>
<p><img
src="http://www.gbgm-umc.org/operationclassroom/images/albert.jpg">
</p>
<h2>Priorities</h2>
<ul>
<li>Renovate the boarding school for the Junior Secondary School.
The boarding home will container 24 classrooms. This will enable
the school to move to a single shift instead of a double shift and
will provide more classroom time. The renvoation cost is $2500
per room.</li>
<li>100 scholarships are needed. </li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4>Operation Classroom</h4>
</div><!-- /footer -->
</div><!-- /page -->
Code snippet BIDHJ-Ch16-Ex1.html
5. Add a data-add-back-btn="true" attribute to the page div:
<div data-role="page" id="albert" data-add-back-btn="true">
Code snippet BIDHJ-Ch16-Ex1.html
6. Save your file.
How It Works
In this exercise, you learned how to create a basic navigation style app using jQuery Mobile. After creating the basic structure for the main app file, you added content to the home page of the app using a bulleted list. Because the ul list has data-role="listview" defined, jQuery Mobiles styles the element as a full side-to-side navigation list. Each li item indicates a row in the list and is linked to an internal link, which links the item with another div page in the same file. The id attribute of the div page is the href value, prefixed with a #. For example, the albert div page is linked using the #albert value. The remaining links are not defined for this example, but could be filled out as needed.
The Albert Academy page provides details about the school. Notice that you just need to use basic HTML styles in the content section of the page. Nothing fancy is needed here.
In order to return to the home page of the app, I need to add a Back button on the top toolbar, which is a basic feature of most every IOS app. Back button support is included with jQuery Mobile, but it is not enabled by default. Therefore, to enable the Back button on a toolbar, you need to add the data-add-back-btn="true" attribute to the page div.
Figures 16-1 and 16-2 show the results.
Although the look of the app is perfectly acceptable, suppose you want your jQuery Mobile web app to emulate the native look and feel of IOS. Fortunately, there’s a Github-based jQuery Mobile theme called IOS-Inspired-jQuery-Mobile-Theme that you can add into your app to make it much more IOS-like.
TRY IT OUT: Theming Your jQuery Mobile App
Follow these steps to transform your jQuery Mobile app into a theme that resembles IOS.
1. Go to the following URL:
2. Click the Download button and download a zip file of the theme to your hard drive.
3. Unzip the contents of the zip file.
4. Copy the ios_inspired folder to your main app folder.
5. Open the BIDHJ-Ch16-Ex1.html file you created in the previous exercise. Save it as BIDHJ-Ch16-Ex2.html.
6. Add the following style sheet link below the jQuery Mobile style sheet link:
<link rel="stylesheet" href="ios_inspired/styles.css" />
Code snippet BIDHJ-Ch16-Ex2.html
7. Save the file.
How It Works
In this exercise, you add a link to the IOS Inspired style sheet, which transforms your jQuery Mobile app into an IOS-looking app. To do so, you download the Github-based style sheet and then link it into your app for usage, adding the entry after the main jQuery Mobile style sheet reference. Figures 16-3 and 16-4 show the updated look.
Although jQuery Mobile is designed to provide support to a variety of mobile platforms, iWebKit is a web app framework that is optimized for the IOS platform. Whereas jQuery Mobile provides the basic UI concepts and controls that work well across mobile platforms, iWebKit has support for IOS-specific visual elements, such as different list types as demonstrated in the framework’s demo app (see Figures 16-5, 16-6, and 16-7).
An iWebKit web app begins with the following structure.
Head:
- viewport meta tag and any other desired tags for mobile app development
- Links to the iWebKit CSS style sheet inside your folder structure
- Links to the iWebKit JavaScript library, also within your folder structure
Body:
- topbar div to define the top toolbar
- content div to define the content area
- footer div to define the page footer
The following is the basic iWebKit template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta
content="minimum-scale=1.0,width=device-width, maximum-scale=0.6667,
user-scalable=no"
name="viewport" />
<link href="css/style.css" rel="stylesheet" media="screen" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>
<title>Title of your page</title>
</head>
<body>
<div id="topbar">
</div>
<div id="content">
</div>
<div id="footer">
<!-- Support iWebKit by sending us traffic; please keep this footer on
your page, consider it a thank you for my work :-) -->
<a class="noeffect"
href="http://snippetspace.com">iPhone site powered by iWebKit</a>
</div>
</body>
</html>
TRY IT OUT: Creating a Basic iWebKit App
Using the iWebKit template provided earlier as a starting point, follow the steps to create a basic app using the iWebKit framework.
1. Download the iWebKit framework from http://snippetspace.com/projects/iwebkit.
2. Unzip the contents of the zip file.
3. Copy the Framework folder into your root app folder.
4. Rename the Framework folder to iwebkit.
5. Create a new blank HTML file in your text editor save the document as BIDHJ-Ch16-Ex3.html.
6. Add the following code to the file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta
content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667,
user-scalable=no" name="viewport" />
<link href="iwebkit/css/style.css" rel="stylesheet" media="screen"
type="text/css" />
<script src="iwebkit/javascript/functions.js" type="text/javascript"></script>
<title>Operation Classroom</title>
</head>
<body>
<div id="topbar">
</div-->
</div>
<div id="content">
</div>
<div id="footer">
<!-- Support iWebKit by sending us traffic; please keep this footer
on your page, consider it a thank you for my work :-) -->
<a class="noeffect" href="http://snippetspace.com">iPhone site
powered by iWebKit</a></div>
</body>
</html>
Code snippet BIDHJ-Ch16-Ex3.html
7. Add the following code inside the topbar div:
<div id="title">SL Schools</div> <div id="rightnav"><a href="search.html" >Search</a></div>
Code snippet BIDHJ-Ch16-Ex3.html
8. Add the following ul list inside the content div:
<ul class="pageitem">
<li class="menu"><a href="albert.html"><span class="name">Albert Academy</span>
<span class="arrow"></span></a></li>
<li class="menu"><a href="baoma.html">
<span class="name">Baoma Secondary School</span>
<span class="arrow"></span></a></li>
<li class="menu"><a href="bo.html">
<span class="name">Bo Centenary</span><span class="arrow"></span></a></li>
<li class="menu"><a href="fergusson.html">
<span class="name">Fergusson Memorial Secondary School</span>
<span class="arrow"></span></a></li>
<li class="menu"><a href="koidu.html">
<span class="name">Koidu Secondary School</span>
<span class="arrow"></span></a></li>
<li class="menu"><a href="taiama.html">
<span class="name">Taiama Secondary School</span>
<span class="arrow"></span></a></li>
<li class="menu"><a href="makeni.html">
<span class="name">Makeni Secondary School</span>
<span class="arrow"></span></a></li>
</ul>
Code snippet BIDHJ-Ch16-Ex3.html
9. Save your main app file.
10. Create a new HTML file and name it albert.html. Place it in the same directory as your app.
11. Add the following code into the file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="index,follow" name="robots" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta
content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667,
user-scalable=no" name="viewport" />
<link href="iwebkit/css/style.css" rel="stylesheet"
media="screen" type="text/css" />
<script src="iwebkit/javascript/functions.js" type="text/javascript"></script>
<title>Albert Academy</title>
</head>
<body>
<div id="topbar">
</div>
<div id="content">
</div>
<div id="footer">
<!-- Support iWebKit by sending us traffic; please keep this footer
on your page, consider it a thank you for my work :-) -->
<a class="noeffect" href="http://snippetspace.com">iPhone site
powered by iWebKit</a></div>
</body>
</html>
Code snippet albert.html
12. Add the following code inside the topbar div:
<div id="title">Albert Academy</div>
<div id="leftnav">
<a href="BIDHJ-Ch16-Ex3.html">
<img alt="home" src="images/home.png" /></a></div>
Code snippet albert.html
13. Add the following code inside the content div:
<span class="graytitle">About the School</span>
<ul class="pageitem">
<li class="textbox"><span class="header">Development</span>
<p>Albert Academy is located on Berry Street in Freetown. The school began
on October 4, 1904, and was named after American missionary, Rev. Ira E.
Albert who was killed in a boating accident. Rev. Albert was from
Pennsylvania. The school has grown from 6 students to 2000, and currently
has a staff of 126. Albert Academy is one of the most successful
institutions of learning in Sierra Leone. Plans are to renovate
the boarding house into classrooms for the Junior Secondary School.</p>
<p>
<img src="http://www.gbgm-umc.org/operationclassroom/images/albert.jpg">
</p>
<li class="textbox"><span class="header">Priorities</span>
<ul>
<li>Renovate the boarding school for the Junior Secondary School.
The boarding home will container 24 classrooms. This will enable
the school to move to a single shift instead of a double shift
and will provide more classroom time. The renvoation cost is
$2500 per room.</li>
<li>100 scholarships are needed. </li>
</ul>
</li>
</ul>
Code snippet albert.html
14. Save the file.
How It Works
In this exercise, you create the starting point for a basic navigation-style app using iWebKit. You begin by downloading the iWebKit framework and installing it in your application folder. After creating the basic template file for any iWebKit app, you add a title to the top bar and a right button named Search.
The ul list you added serves as the navigation list for the home page. Note that the class="pageitem" attribute is used to indicate that it is a main content area that you’ll be filling with content. The pageitem element in your page is considered the most important element in an iWebKit page.
The li items in the bulleted list are defined as list items with the class="menu" attribute. Inside of the links, a span element defines the text to display along with an optional right-align arrow span element.
Notice that the links are to distinct HTML files, not internal links like you defined using jQuery Mobile. Therefore, for a real app, each of these pages that are referenced need to be defined individually, like you do with albert.html.
The albert.html file uses the same general structure as the main app file. You add a back button inside the topbar div using the <div id="leftnav"/> element, which returns the user to the home page.
Inside the content div, the title is defined using a span element. The <ul class="pageitem"/> element contains the text content, which is enclosed in two <li class="text"> elements.
Figures 16-8, 16-9, and 16-10 show the app running in iPhone, and Figure 16-11 shows the app in iPad.
EXERCISES
1. Why is cross-platform support an important decision point in terms of which framework you might use?
2. Which of the frameworks enables you to contain multiple pages inside the same HTML file?
Answers to the Exercises can be found in the Appendix.
• WHAT YOU LEARNED IN THIS CHAPTER
| TOPIC | KEY CONCEPTS |
| Features of jQuery Mobile | Cross-platform support for IOS, Android, BlackBerry, Windows Phone 7, and more Built-in support for touch events, page transitions, back button support, and theming |
| Features of iWebKit | Dedicated to IOS look and feel Support for native-looking UI elements, such as App Store- and iTunes-like lists |