Labels

jQuery Mobile Jump Start Pre-Class Preparation

(Added 28 June 2013)
Due to issues with Ripple we are no longer using it in the class. We will be working straight from the browser, but you may want to install the Window Resize extension.

 The days are rapidly approaching. Here are all the steps necessary to prepare your development environment so that you can save time the day of class.




There are probably an unlimited number of ways to get started developing jQuery Mobile applicaitons. I have chosen this way because it makes you productive in the shortest number of steps and is also cross platform. The steps listed here should work for PC, Mac, and even Linux machines.


One of the first things that savvy readers will notice is there is no need for a web server. Eliminating the need for a server solves one the trickiest things that causes novices to have problems. For those of us who have been doing web development for a while, it is easy to forget, what a pain it was the first time we had to set one up. Also since we are working only with HTML, CSS, and JavaScript, we don't even need a compiler. So let's set up our environment.


Chrome

The first thing that you must do is download and install the Chrome browser for your OS. I am not going to give the steps necessary here since this is something Google explains far better than I can. Here is the link to download Chrome:




Install Chrome Extensions

One of the nice things about most modern browsers is that they allow for the installation of extensions, also referred to as plug-ins.


  1. Visit the store at http://chrome.google.com/webstore. You can also reach it by clicking the  icon in the “Apps” section of the New Tab page.
  2. Search for the "Advanced REST Client"
  3. Select it from the list which appears.
  4. On the extension’s details page, click the Add to Chrome button.
  5. A dialog appears, letting you know about the types of data that the extension will be able to access. ClickAdd in the dialog to grant the extension access to the data described. Learn more about the different types of data that extensions may access.
  6. Repeat steps 2 through 5 for the "Ripple Emulator (Beta)".


Setup Your Project Folder

In order to give our application and to make sure that we are all on the same page we will create the following folders for app:

  1. Create a route folder named, cc, for Coffee+Coffee.
  2. From within the cc directory, create three subfolders:
    1. css
    2. img
    3. js
      1. Within the js folder create a subfolder, libs


Installing JavaScript Libraries

This step is a bit of a misnomer since there really isn't an installation of the JavaScript libraries. What we will do is download the files and place them in the correct folders.

If you want to save time here, you can download the files from GitHub at:



Or you can set everything up yourself by downloading the following libraries:


  • jQuery version 1.9.1
    • Copy the file, jquery-1.9.1.min.js, to js/libs
  • jQuery Mobile 1.3.1
    • Copy the file, jquery.mobile-1.3.1.min.js to js/libs
    • Copy the file, jquery.mobile-1.3.1.min.css to css
    • Copy the folder images to css
  • Handlebars version 1.0.0-rc.3
    • Copy the file, handlebars.js, to js/libs
  • When you are finished, your files should look as follows:
    • css
      • jquery.mobile-1.3.1.min.css
      • images
    • images
    • js
      • libs
        • jquery-1.9.1.min.js
        • jquery.mobile-1.3.1.min.js
        • handlebars-1.0.0-rc.3.js







Create index.html
With the skeleton of our application it is time that we put a face on it. We need to create an HTML page to hold our markup and by convention this page is called, index.html. Using your text editor of choice create index.html in the root of the cc folder. Then copy the following markup to it:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>CC</title>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css" />
 <script src="js/libs/jquery-1.9.1.min.js" type="text/javascript"></script>
 <script src="js/libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 </script>
</head>
<body>
<div id="page1" data-role="page">
 <!-- panel -->
 <div data-role="panel" id="homePanel">
   <p>Hidden Panel</p>
 </div>
 <header data-role="header" data-position="fixed" >
   <a href="#homePanel" class="" data-icon="bars" data-iconpos="notext"></a>
   <h1>Coffee, Coffee, Coffee!</h1>
 </header>
 <script>
 </script>
 <section data-role="content">
   <p>Hello, Coffee Lovers!</p>
 </section>
 <footer data-role="footer" data-position="fixed">
   <h1>Index Page Footer</h1>
 </footer>
</div>
 <script src="js/libs/handlebars.js" type="text/javascript"></script>
</body>
</html>

Launching Our App
With that our application has a displayable page, let's check it out. Before you double-click the Chrome icon, stop.


In order to be able to run web apps from the file system we need to tell Chrome that doing so is OK. The only way to do this is to run Chrome from the command line in order to pass it the switch. 

 PC
From the cmd prompt type:

~/Google/Chrome/Application/chrome.exe --allow-file-access-from-files

Or
  1. Right click on the chrome icon
  2. Then right click on "Google Chrome"
  3. Click on Properties
  4. In the Target: text box add " --allow-file-access-from-files" after chrome.exe. Please note there is a space before "--".

Mac/Linux
From terminal type:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

The command line switch: --allow-file-access-from-files, is what tells Chrome it is OK to serve files from the file system.

Run the App 

Once Chrome is running we will need to point it to our index.html file. It will need the full path with the file:// as the protocol. For me it looks like:

file:///users/Troy/Sites/cc/index.html

At this point you should see our app in all of its jQuery Mobile glory. It will be stretched out since it is not yet running in the Ripple Emulator. If you don't see your app in jQuery Mobile styling, odds are that you did not turn on the ability to serve files. If that is the case, see the steps above.



Turning on the Emulator
  1. In the upper right hand click the "Customize and control Google Chrome" button
  2. Then click Tools -> Extensions
  3. Scroll down the page until you see the entry for Ripple Emulator (beta)
  4. Check the box titled, Allow access to file URLs
  5. Back on the tab holding our application, right click on the page, Emulator -> Enable
  6. If you see a dark page titled, "Are you ready for this?!?!", click Mobile Web (default)



The page should switch over to emulator view. Congratulations, you are now ready to begin mobile development with jQuery Mobile.




Labels:

Popular Posts