So far in this chapter we have done nothing but talk about jQuery Mobile, how we get it, why we should do things a certain way, blah blah. You're a developer; you want to see this in action and now you will. We are going to make a simple jQuery Mobile application. We'll see the code and then we'll explain what is going on within each piece of code:
Go ahead and fire up Aptana Studio 3.
Navigate to File | New | Web Project.
Pick the default template
Name the project whatever you like.
Don't worry too much about everything in Aptana Studio right now, as we'll look at it in more detail in the next chapter.
Right-click on your project and navigate to New | File from the pop-up menu. Name the file index.html. Add the following code to the file:
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scrolable=no">
<title>jQuery Mobile: Getting Started</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>Web Development Books</h3>
</div>
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" data-divider-theme="b">
<li data-role="list-divider">JavaScript</li>
<li>
<a href="#">Object Oriented JavaScript</a>
</li>
<li>
<a href="#">JavaScript Unit Testing</a>
</li>
<li data-role="list-divider">PHP</li>
<li>
<a href="#">RESTful PHP Web Services</a>
</li>
<li>
<a href="#">Instant RESS</a>
</li>
</ul>
</div>
</div>
</body>
</html>When we execute this code, open up your browser and you should see the output similar to what we will see in the following screenshots on a mobile device:
That wasn't so hard, was it? Now, it's time to break down the code and see what's going on under the hood:
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scrolable=no">
<title>jQuery Mobile: Getting Started</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head> This is your standard HTML5 header with us loading the jQuery Framework from the jQuery CDN. Also notice in-keeping with tradition, we are loading the compressed jQuery and jQuery Mobile files so that we have the smallest possible footprint we can have:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scrolable=no">
Now, you may or may not know this line, depending on how much mobile development experience you have. This line is important as it really makes a difference to how your website or application looks on a mobile browser. Apple started it for use on iOS Safari but has since been adopted by others. If you did not have this line in your project, the page we have would be rendered "zoomed out" basically. The user would have to double-click or zoom in via other means to see the page. By having this, we make sure mobile browsers are on their best behavior in helping your project look fabulous when the user visits:
<div data-role="page">
This is the start of jQuery Mobile specific code. For the most part, our project is straight HTML5. There is very little actual JavaScript involved, but we have these weird div lines sprinkled throughout. These are jQuery Mobile tags. It uses the standard div tag but adds on these things called data roles. In this instance, we are giving div the role of a page. The page role is the main role in jQuery Mobile. We'll discuss this in more detail in another chapter. For now, let's keep moving.
<div data-role="header"> <h3>Web Development Books</h3> </div>
Here we are using another role, the header role. This allows us to display "Web Development Books" in a different manner than the rest of the page. As you might have noticed in the preceding screenshots, the entire text in the header is not visible. Whenever the text in the header is long, it will be truncated and appended by the ellipses (...). So make sure that you do not have really long names in the header. However, if long names cannot be averted, you can override the jQuery Mobile CSS to make sure that the text in the header is not truncated.
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" data-divider-theme="b">
<li data-role="list-divider">JavaScript</li>
<li>
<a href="#">Object Oriented JavaScript</a>
</li>
<li>
<a href="#">JavaScript Unit Testing</a>
</li>
<li data-role="list-divider">PHP</li>
<li>
<a href="#">RESTful PHP Web Services</a>
</li>
<li>
<a href="#">Instant RESS</a>
</li>
</ul>
</div>This is the heart of our page, the content. Within the div tags, we are creating an unordered list, which jQuery Mobile then renders for us as buttons almost. If we had the links going to existing pages rather than the dummy link, the user could click the list items and navigate through the project. Again, we will be discussing these in much greater detail in another chapter.
Are you still with us? Everything might seem a bit overwhelming right now, even though we hope it doesn't, but as we go and you write more code, things will get easier and you'll see how powerful jQuery Mobile is without having to write a lot of complicated code.