Mastering jQuery Mobile

In this chapter, we will look at installing the XAMPP server stack for both Windows and Mac OS X, installing the Aptana Studio integrated development environment (IDE), and then start looking at using jQuery Mobile and the various methods you can use in your project to include the framework. We will then create a small application to get our feet wet with jQuery Mobile. For some of you this could be a simple refresher, but for others this could be a crash course introduction.

You may be asking yourself, "Why am I installing a full server stack, and is jQuery Mobile usage tied to PHP or any of the technology in the XAMPP stack?" While this book is focused on development with jQuery Mobile, we will be doing a very small bit of PHP with MySQL, just to show the interaction between the two, and so we will be setting up our XAMPP stack. However, the usage of jQuery Mobile is completely independent of PHP and any other technology in the XAMPP stack, so developers should feel free to use any other server stack that they prefer for development. If you are not a PHP pro, don't worry; the code will be basic and we will explain it all. If you wish to enhance your PHP skills, check out any of the number of PHP titles Packt has published.

Also by no means are you bound to using your local machine. If you have a web server, feel free to use it; we just find it easier to develop on a local machine so we don't have to worry about making a change, uploading, testing, and repeating.

XAMPP is a fully functional server stack by the folks at Apache Friends, which includes Apache, PHP, MySQL, Perl, Tomcat, phpMyAdmin, and much more in one installation package. By installing it, you don't have to worry about manually setting up each component of a WAMP stack, you simply execute the installer and choose the components you wish to install.

To get started, we will need to download the latest stable XAMPP installer from https://www.apachefriends.org/index.html. We recommend using the installer rather than the ZIP file method for this book.

After we have it downloaded, the installation is pretty straightforward:

XAMPP also has a package available for those running Mac OS X and it is a million times easier to install than its Windows counterpart.

Download XAMPP from the same page as the Windows binaries: https://www.apachefriends.org/index.html. Double-click on the .DMG file that you just downloaded, and drag the XAMPP folder into the Applications directory. After this is completed, open the XAMPP control panel found in Applications and start the Apache and MySQL services.

Regardless of what OS you installed XAMPP, we can verify the installation on both in the same way. Open up your browser and go to the address http://localhost/xampp. If all went well, you will see a screen similar to the following:

Congratulations! You now have a full-blown testing/development server ready for use to go with this book. If you don't see a screenshot like the preceding one, double check to make sure you did not miss a step.

Aptana Studio is a free, open source IDE built off of Eclipse. We will be using Aptana Studio 3 for this book and you can download it from http://www.aptana.com/products/studio3/download.html.

To install Aptana Studio 3 on a Windows machine, follow these instructions:

Installing Aptana Studio on Mac is just as easy as it was for installing XAMPP. After you download the .DMG file, open it up and drag the indicated folder into your Applications folder.

Now that Aptana Studio is installed, open it up and you will be presented with a dialog box asking you to set up your default workspace directory. Go ahead and set this to be your htdocs folder of your XAMPP installation. For you folks on Windows, that directory will be c:\xampp\htdocs (provided you used the default directory). For the Mac users, this will be /Applications/XAMPP/htdocs. By setting this default workspace, any new projects we create will automatically be created and saved here, making it easier for us to test.

Also for you Mac users, there are some further steps that you may need to do for Apatana Studio to work correctly. By default, the XAMPP htdocs folder is owned by root, and because of this, it is set to read-only. In order for you to create and save to this directory, we will need to change those permissions.

Of course, if you need further assistance with Aptana Studio or even XAMPP, refer to their respective websites for support. If you happen to fall in love with Aptana Studio and wish to learn more about it, check out Aptana Studio Beginner's Guide, Thomas Deuling, Packt Publishing.

Now we finally get to the meat and potatoes of what this book is about: jQuery Mobile. First thing we need to do is download the framework to use it in our projects. You have two ways of doing this. You can download a prebuilt ZIP file containing the latest stable release and everything you will need to use jQuery Mobile. The second option is that you can build a package that contains only the pieces you need, including earlier versions or unstable branches.

In this book, we will be using the complete package. There are couple reasons for this. First of all, we will be using and looking at so many different aspects of the framework that it would take a lot of space here for us to tell you which pieces to select in the builder. More importantly, as noted on the jQuery Mobile website, the builder is currently in alpha and is not recommended for production environments. Yes, we realize that we are not in a production environment here, but we don't want to try to master a framework by using code that could be unstable. We believe that's enough babbling, let's start downloading!

Go to http://jquerymobile.com. On the top right- hand side of the page, you will see the links to download the latest stable version (which at the time of writing this book is 1.4.5) and a link to the download builder. Click on the link for the latest stable. After the ZIP file is downloaded, go ahead and open it up and you should see the following:

That's quite daunting, isn't it! No worries at all though; we will only be referencing a few of the files here, but let's talk about the overall contents of the ZIP file so that you will have a better understanding of what you just downloaded:

There is a third way to acquire and use the framework. In the previous section, we looked at two different ways in which we can download and include the framework locally in our project. In addition to downloading jQuery Mobile, you can also use it via a content delivery network (CDN).

When using a CDN such as Google or even jQuery's own, you do not have the files stored on your local server. Instead, when the user loads your web application or site, it makes a connection to the CDN and uses it from there. This offers a few advantages over having it on the server. One of the biggest advantages is that it increases parallelism. Typically your browser can only download a couple of files at a time from the same server. So if you load the jQuery files, jQuery Mobile framework JavaScript and CSS files, a few custom CSS, and JavaScript files, this can cause a bottleneck as you will have to wait for all the files to download. If you use a CDN, your application makes a connection to Google's server, for example, and downloads a couple of files while your local ones load. This may not seem like a lot of benefit since the files are so small, but it can make a world of difference to your end user. Some other advantages are as follows:

So with all these cool advantages, why in the world would we ever want to use it locally? I mean, it sounds like we'd be stupid to ever download it again. Well, my friends, as with many things in life, there is always a downside.

Obviously, the biggest downfall is offline applications. If you are expecting or even adding the slightest bit of offline functionality to your project, then you cannot have the project going off server to use the framework from a CDN. It would have to be stored locally. If the user is offline, they won't be able to download it from the CDN and therefore would not be able to use the project that you worked so hard on.

Okay, so you're not planning on any offline functionality of your project. What else could stop you from using it via a CDN? Well, my friends we have a few more downfalls:

Well, we assume that we have covered the advantages and disadvantages of the usage of CDN well enough, so let's look at how and from where we can load jQuery Mobile.

There are three main CDNs we can use in our projects. They are Google, Microsoft, and of course, jQuery itself. Are there advantages to using one over the other? Possibly, but I think the differences would be small. Google may offer more mirrors but more people may use jQuery's own CDN meaning more people would have it cached, so in the end there may be no difference in efficiency.

We will look at the code for each of the CDNs and you can pull it from whichever one you wish to use.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js "></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<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>

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:

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.

In this chapter, we set up a local development server using XAMPP, and we installed an IDE to use for the book with Aptana Studio 3. We looked at the different ways you can download jQuery Mobile for local use in your project and then you saw how we can use it from the different CDNs, along with the advantages and disadvantages of using a CDN. Once all the basic setup was completed, we created our first jQuery Mobile project.

In the chapter that follows, we will take a look at the different tools and techniques that will help us not just in the development process, but also help us test our application as we develop it.