Chapter 4: Writing Your First Hello World Application

Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Chapter 4

Writing Your First Hello World Application

WHAT YOU WILL LEARN IN THIS CHAPTER:

Creating your index page
Adding styles
Programming the UI with JavaScript
Deploying your app

Okay, enough leg work. It’s time to start developing your first app. In this chapter, I walk you through the full start-to-finish process of developing your first Hello World app that runs on all IOS platforms — iPhone, iPad, and iPod touch.

Whenever you create a web app, you can decide whether you want to create everything on your own from scratch or if you want to leverage a framework to get the basic app look and feel. The advantage of creating everything yourself is that you have complete control over all parts of the app. The downside is, of course, that you have to create everything yourself.

Throughout this book, I talk a lot about creating different parts of an app on your own. However, to start things off, I recommend you use a mobile framework to get rolling quickly. Therefore, in this chapter, I utilize one of the popular mobile frameworks available for Web apps — jQueryMobile — to create an iPhone web app. Using jQueryMobile, you can focus on just the content and meat of the app itself and let the framework do much of the styling and interactivity for you.

SETTING UP

Before you can begin developing an application, you need to set up a place for your app on a remote web server or on a server on your development machine. Make sure the server can be accessed via Wi-Fi from an IOS device.

TRY IT OUT: Creating a Location for Your Web App

Follow these steps to set up a location for your Hello World app.

1. Determine where you want to set up your developer server — either on a remote server or a server running on your development machine.

2. If the server is remote, connect to your server via FTP. If you are using your development machine, locate the main documents directory for your server. (If you are using Mac, this is the Sites folder in your user directory.)

3. Create a folder named webapp.

4. Inside of webapp, create another folder named topfilmz.

How It Works

Your first task is to prepare a home base where you will save your app files. It can be located on your development machine or on a remote server if you have one available. For this example, you are not going to be using an app server, so it really makes no difference.

If you are using a web server on your development machine, you need to know the address to access your web app. If you are running a Mac, an easy way to find this out is to do the following:

1. Go to System Preferences.

2. Click the Sharing icon.

3. Note the address to your personal website, which is your Sites folder. In my case, it is http://10.0.0.6/~rwagner.

CREATING YOUR INDEX PAGE

The app you’re going to create demonstrates a popular style of mobile app — a navigation list-based app. The purpose of the app, which I am calling Top Filmz, is to display a list of top films. A user can click a film in the list to display a details page on the film. The details page displays a poster image of the film and two buttons — one that takes the user to the film’s page on IMDB and a second that returns the user to the main films list.

Although the app will appear to have several different pages (one main list, individual pages for each of the dozen films), I am actually going to be able to place all of the code inside a single HTML file.

TRY IT OUT: Creating the Index Page

To create the basic shell of your app, follow these steps:

1. Create a new text file in your topfilmz folder and save it as index.html.

2. Enter the following HTML text:

<!DOCTYPE html>
<html>
<head>
<title>Top Filmz</title>
</head>
<body>
</body>
</html>

3. Add the viewport meta tag to the document head:

<meta name="viewport" content="width=device-width, initial-scale=1">

4. Add references to the core jQuery Mobile stylesheet and JavaScript files in the document head:

    <link rel="stylesheet"
     href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
    <script
      type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js">
      </script>
    <script type="text/javascript"
     src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js">
      </script>

5. Save your file.

How It Works

In these five steps, you created the basic shell for any jQuery Mobile app. The jQuery Mobile framework requires that the page start with an HTML5 <!DOCTYPE html> to ensure that all of the framework’s features are available to you.

The viewport meta tag ensures that the browser sets the width of the page to be equal to the pixel width of the device screen, rather than zooming out to a page width of 900 pixels as Safari does by default.

For performance considerations, the links to the jQuery Mobile framework directly point to files hosted by jQuery rather than being placed on your own server.

CREATING THE MAIN SCREEN

Inside the body element of index.html, you are ready to add content for the home or main screen (or page) of your web app. In jQuery Mobile, you specify a page inside a div element and add a custom data-role="page" attribute.

Within an app, you can place anything that you want to on a page. However, a typical template that many apps use is a standard header-content-footer division. You can achieve this in jQuery Mobile by using the following code:

<div data-role="page">
<div data-role="header">
</div>
 
<div data-role="content">
</div>
 
<div data-role="footer">
</div>
</div>

Notice that the roles of the div elements are declared using the data-role attribute.

The content section of the page displays a scrolling navigation list of the names of movies. You can create a list quite simply by using an unordered list and adding a data-role="listview" attribute to it. The individual li items represent the rows of the scrolling list. The a link refers to the destination that you want to go to when the list item is tapped by the user.

<ul data-role="listview">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

Here’s a case where there is an advantage of using a framework such as jQuery Mobile. When your page is processed by the jQuery Mobile framework, this list is transformed into a stylized scrolling list that spans the entire width of the device’s screen.

TRY IT OUT: Creating the Main Screen of Your App

Follow these instructions to set up the main screen of the Top Filmz app:

1. Inside of the body tag of your index.html file, add the following div structure:

<div data-role="page"id="home">
<div data-role="header">
</div>
 
<div data-role="content">
</div>
 
<div data-role="footer">
</div>
</div>

Code snippet index.html

2. Inside the header div, add the app title:

    <div data-role="header">
    <h1>Top Filmz</h1>
    </div>

Code snippet index.html

3. Inside the footer div, add a credit line:

<div data-role="footer">
<h5>Hello World Apps</h5>
</div>

Code snippet index.html

4. Inside the content div, add the markup that will be transformed into the scrolling list:

<div data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#theShawshankRemption">The Shawshank Redemption</a></li>
<li><a href="#casablanca">Casablanca</a></li>
<li><a href="#larsAndTheRealGirl">Lars and the Real Girl</a></li>
<li><a href="#babettesFeast">Babette's Feast</a></li>
<li><a href="#groundhogDay">Groundhog Day</a></li>
<li><a href="#lesMiserables">Les Miserables</a></li>
<li><a href="#thePrincessBride">The Princess Bride</a></li>
<li><a href="#chariotsOfFire">Chariots of Fire</a></li>
<li><a href="#signs">Signs</a></li>
<li><a href="#vertigo">Vertigo</a></li>
</ul>
</div>

Code snippet index.html

5. Save your file.

How It Works

You created the initial page of your app in this exercise by creating this div structure. The app title is added to the header using an <h1> tag whereas the footer displays a dummy credit line using an <h5> tag. The scrolling list of films is shown in the unordered list. Notice that the href attribute for each a link specifies an internal anchor-like link. I show you how those link to the other film detail pages in the next section.

Notice the data-theme attribute of the list element. jQuery Mobile has five color themes to choose from. For this example, I choose b, which displays the list items in a darkened color.

Although the app is not functional yet, go ahead and sneak a peek at the main screen by opening the page on your iPhone or other IOS device. You can do so by typing the URL of the app on your development server. In my case, I would enter http://10.0.0.6/~rwagner/webapp/topfilmz.

ADDING DETAIL PAGES

As I mentioned earlier, an HTML file can contain multiple “virtual pages” of your jQuery Mobile web app. Like the main screen shown in Figure 4-1 each additional page is represented as a div with a unique ID assigned to it. Then, to display that page from a link on another page, you simply specify the page ID as the href value prefixed with a # sign (href="#mypage"). When a user taps a #link, jQuery Mobile looks for a “virtual” page and displays it in the viewport.

FIGURE 4-1

Here’s the shell of what the detail pages look like:

<div data-role="page" id="uniqueID">
    <div data-role="header">
    <h1>Film Title</h1>
    </div>
    <div data-role="content" style="background-color:#ffffff">
    <img class="poster" src=""/>
    <a href=" " data-role="button">Go to IMDB Page</a>
    <a href="#home" data-role="button" data-icon="home">Return to List</a>
    </div>
    <div data-role="footer">
    <h5>Hello World Apps</h5>
    </div>
</div>

The header and footer look just as they appeared on the main screen, so there’s not much new to say about them. However, in the content region of the page, there is an image and two links. Notice that the links have a data-role="button" attribute. When the page is displayed, jQuery Mobile transforms the link into a button.

Using that page template as a model, you can add detail pages for all the films in the list. The detail page code is shown under the Subpages section of the body in Listing 4-1.

LISTING 4-1: Full source of index.html

<!DOCTYPE html>
<html>
    <head>
    <title>Top Filmz</title>
  
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet"
     href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
    <script
     type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js">
     </script>
    <script type="text/javascript"
      src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js">
     </script>
 
<style>
    img.poster
    {
        display: block;
        margin-left: auto;
        margin-right: auto
    }  
</style>
 
</head>
 
<body>
 
<!-- Page -->
<div data-role="page" id="home">
    <div data-role="header">
    <h1>Top Filmz</h1>
    </div>
  
    <div data-role="content">
    <ul data-role="listview" data-theme="b">
        <li><a href="#theShawshankRemption">The Shawshank Redemption</a></li>
        <li><a href="#casablanca">Casablanca</a></li>
        <li><a href="#larsAndTheRealGirl">Lars and the Real Girl</a></li>
        <li><a href="#babettesFeast">Babette's Feast</a></li>
        <li><a href="#groundhogDay">Groundhog Day</a></li>
        <li><a href="#lesMiserables">Les Miserables</a></li>
        <li><a href="#thePrincessBride">The Princess Bride</a></li>
        <li><a href="#chariotsOfFire">Chariots of Fire</a></li>
        <li><a href="#signs">Signs</a></li>
        <li><a href="#vertigo">Vertigo</a></li>
    </ul>
    </div>
  
    <div data-role="footer">
    <h5>Hello World Apps</h5>
    </div>
</div>
 
<!-- Subpages -->
 
<div data-role="page" id="theShawshankRemption">
    <div data-role="header">
    <h1>The Shawshank Redemption</h1>
    </div>
    <div data-role="content" style="background-color:#ffffff">
    <img class="poster"
     src="http://ecx.images-amazon.com/images/I/519NBNHX5BL._SL500_AA300_.jpg"/>
    <a href="http://www.imdb.com/title/tt0111161/"
     data-role="button">Go to IMDB Page</a>
    <a href="#home" data-role="button" data-icon="home">Return to List</a>
    </div>
    <div data-role="footer">
    <h5>Hello World Apps</h5>
    </div>
</div>
 
<div data-role="page" id="casablanca">
    <div data-role="header">
    <h1>Casablanca</h1>
    </div>
    <div data-role="content" style="background-color:#ffffff">
    <img class="poster"
     src="http://ecx.images-amazon.com/images/I/51Mg3kdJ5KL._SL500_AA300_.jpg"/>
    <a href="http://www.imdb.com/title/tt0034583/"
     data-role="button">Go to IMDB Page</a>
    <a href="#home" data-role="button" data-icon="home">Return to List</a>
    </div>
    <div data-role="footer">
    <h5>Hello World Apps</h5>
    </div>
</div>
 
<div data-role="page" id="larsAndTheRealGirl">
    <div data-role="header">
    <h1>Lars and the Real Girl</h1>
    </div>
    <div data-role="content" style="background-color:#ffffff">
    <img class="poster"
     src="http://ecx.images-amazon.com/images/I/51Sn3wcuNGL._SL500_AA300_.jpg"/>
    <a href="http://www.imdb.com/title/tt0805564/"
     data-role="button">Go to IMDB Page</a>
    <a href="#home" data-role="button" data-icon="home">Return to List</a>
    </div>
    <div data-role="footer">
    <h5>Hello World Apps</h5>
    </div>
</div>
 
<div data-role="page" id="babettesFeast">
    <div data-role="header">
    <h1>Babette's Feast</h1>
    </div>
    <div data-role="content" style="background-color:#ffffff">
    <img class="poster"
     src="http://ecx.images-amazon.com/images/I/51A2BJ1WTML._SL500_AA300_.jpg"/>
    <a href="http://www.imdb.com/title/tt0092603/"
     data-role="button">Go to IMDB Page</a>
    <a href="#home" data-role="button" data-icon="home">Return to List</a>
    </div>
    <div data-role="footer">
    <h5>Hello World Apps</h5>
    </div>
</div>
 
<div data-role="page" id="groundhogDay">
    <div data-role="header">
    <h1>Groundhog Day</h1>
    </div>
    <div data-role="content" style="background-color:#ffffff">
    <img class="poster"
     src="http://ecx.images-amazon.com/images/I/51EVxBEKg6L._SL500_AA300_.jpg"/>
    <a href="http://www.imdb.com/title/tt0107048/"
      data-role="button">Go to IMDB Page</a>
    <a href="#home" data-role="button" data-icon="home">Return to List</a>
    </div>
    <div data-role="footer">
    <h5>Hello World Apps</h5>
    </div>
</div>
 
<div data-role="page" id="lesMiserables">
    <div data-role="header">
    <h1>Les Miserables</h1>
    </div>
    <div data-role="content" style="background-color:#ffffff">
    <img class="poster"
     src="http://ecx.images-amazon.com/images/I/51MeImdd92L._SL500_AA300_.jpg"/>
    <a href="http://www.imdb.com/title/tt0119683/"
     data-role="button">Go to IMDB Page</a>
    <a href="#home" data-role="button" data-icon="home">Return to List</a>
    </div>
    <div data-role="footer">
    <h5>Hello World Apps</h5>
    </div>
</div>
 
<div data-role="page" id="thePrincessBride">
    <div data-role="header">
    <h1>The Princess Bride</h1>
    </div>
    <div data-role="content" style="background-color:#ffffff">
    <img class="poster"
     src="http://ecx.images-amazon.com/images/I/51%2BOCP1DUSL._SL500_AA300_.jpg"/>
    <a href="http://www.imdb.com/title/tt0093779/"
     data-role="button">Go to IMDB Page</a>
    <a href="#home" data-role="button" data-icon="home">Return to List</a>
    </div>
    <div data-role="footer">
    <h5>Hello World Apps</h5>
    </div>
</div>
 
<div data-role="page" id="chariotsOfFire">
    <div data-role="header">
    <h1>Chariots of Fire</h1>
    </div>
    <div data-role="content" style="background-color:#ffffff">
    <img class="poster"
     src="http://ecx.images-amazon.com/images/I/51PyP5bti7L._SL500_AA300_.jpg"/>
    <a href="http://www.imdb.com/title/tt0082158/"
     data-role="button">Go to IMDB Page</a>
    <a href="#home" data-role="button" data-icon="home">Return to List</a>
    </div>
    <div data-role="footer">
    <h5>Hello World Apps</h5>
    </div>
</div>
 
<div data-role="page" id="signs">
    <div data-role="header">
    <h1>Signs</h1>
    </div>
    <div data-role="content" style="background-color:#ffffff">
    <img class="poster"
     src="http://ecx.images-amazon.com/images/I/51c02AOAyCL._SL500_AA300_.jpg"/>
    <a href="http://www.imdb.com/title/tt0286106/"
     data-role="button">Go to IMDB Page</a>
    <a href="#home" data-role="button" data-icon="home">Return to List</a>
    </div>
    <div data-role="footer">
    <h5>Hello World Apps</h5>
    </div>
</div>
 
<div data-role="page" id="vertigo">
    <div data-role="header">
    <h1>Vertigo</h1>
    </div>
    <div data-role="content" style="background-color:#ffffff">
    <img class="poster"
      src="http://ecx.images-amazon.com/images/I/51JF1C6DF5L._SL500_AA300_.jpg"/>
    <a href="http://www.imdb.com/title/tt0052357/"
     data-role="button">Go to IMDB Page</a>
    <a href="#home" data-role="button" data-icon="home">Return to List</a>
    </div>
    <div data-role="footer">
    <h5>Hello World Apps</h5>
    </div>
</div>
 
</body>
</html>

When you save your file and then refresh it inside your IOS device you can tap any of the films from the main screen and jump to its detail page. Notice that when you tap a list item, jQuery Mobile automatically adds a sliding transition effect as it displays the corresponding detail page.

Figures 4-2 and 4-3 show the contents of the Casablanca page.

FIGURE 4-2

FIGURE 4-3

That’s it! You have created your first iPhone app. However, here’s an Easter egg bonus for what you already created. If you have an iPad, open the web app from the iPad version of Safari. Surprise! jQuery Mobile automatically displays the app in a customized manner suited perfectly for the iPad, as shown in Figures 4-4 and 4-5. As you conclude this Hello World chapter, you can see one of the practical benefits of using a mobile framework such as jQuery Mobile — you created an iPad app without even knowing it.

FIGURE 4-4

FIGURE 4-5

EXERCISES

1. What are the benefits to using a mobile framework such as jQuery Mobile?

2. For a jQuery Mobile-based app, do all app pages need to be stored in separate files?

3. How do you link to another page that is stored in the same HTML file?

Answers to the Exercises can be found in the Appendix.

• WHAT YOU LEARNED IN THIS CHAPTER

TOPIC	KEY CONCEPTS
Find a location for your web app	Determine where you want to set up your developer server — either on a remote server or on a server running on your development machine.
Use jQuery Mobile as a mobile app framework	Use <!DOCTYPE html> and add links to jQuery stylesheet and JavaScript files
Add a page in a jQuery Mobile app	Use a div element with a data-role="page" attribute

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for Chapter 4: Writing Your First Hello World Application

Create new playlist

Sign In

Sign Up

Table of Contents for
Chapter 4: Writing Your First Hello World Application