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.
- What you will need:
- Chrome browser with the following extensions
- Advanced Rest Client
- Ripple Emulator (beta)
- jQuery version 1.9.1
- jQuery Mobile version 1.3.1
- Handlebars.js version 1.0.0-rc.3 or greater
- A text editor
- Notepad++ (PC)
- Text Wrangler (Mac)
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.
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.
- Search for the "Advanced REST Client"
- Select it from the list which appears.
- On the extension’s details page, click the Add to Chrome button.
- 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.
- 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:
- Create a route folder named, cc, for Coffee+Coffee.
- From within the cc directory, create three subfolders:
- Within the js folder create a subfolder, libs
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:
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:
<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" />
<div id="page1" data-role="page">
<!-- panel -->
<div data-role="panel" id="homePanel">
<header data-role="header" data-position="fixed" >
<a href="#homePanel" class="" data-icon="bars" data-iconpos="notext"></a>
<h1>Coffee, Coffee, Coffee!</h1>
<p>Hello, Coffee Lovers!</p>
<footer data-role="footer" data-position="fixed">
<h1>Index Page Footer</h1>
Launching Our App
With that our application has a displayable page, let's check it out. Before you double-click the Chrome icon, stop.
From the cmd prompt type:
- Right click on the chrome icon
- Then right click on "Google Chrome"
- Click on Properties
- In the Target: text box add " --allow-file-access-from-files" after chrome.exe. Please note there is a space before "--".
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.
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:
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
- In the upper right hand click the "Customize and control Google Chrome" button
- Then click Tools -> Extensions
- Scroll down the page until you see the entry for Ripple Emulator (beta)
- Check the box titled, Allow access to file URLs
- Back on the tab holding our application, right click on the page, Emulator -> Enable
- 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.