jQueryMobile App
Creating a simple mobile app is not much different than creating a web site using Dreamweaver. There are only a few differences. You have to create:
- jQueryMobile framework
- jQueryMobile theme
- Home and Back button
- jQueryMobile attributes and roles and CSS styles
- App using PhoneGap Build, etc.
Theme
While optional, creating a theme first has several advantages. Besides allowing you to create multiple themes and their necessary files and images, it also allows you to create an index.html page that has the necessary links to the jQueryMobile Framework that you can use as a starting point.
- Go to jQueryMobile.com and click on the ThemeRoller for jQueryMobile button or simply goto: http://themeroller.jquerymobile.com/.
- On the ThemeRoller for jQueryMobile page in the dialog box that appear click on the Get Rolling button.
NOTE: You can create up to 26 themes or upgrade to the latest version by clicking on the Import button later.
- (Optional) Click on the Global tab on the left to set the global settings for all themes. They are self-explanatory that include:
- Font family
- Corner Radii
- Icon
- Box shadow
- Select a theme (A-Z) and then drag-n-drop a color from the color palette to an element you desire to change (heading, link list elements, etc.).
NOTE: Create as many themes as you like.
- (Optional) Click on the Show alternative icons in preview checkbox to see...
- Click on the Download theme zip file button and in the dialog box that appears give the theme a name (e.g., myTheme) in the Theme Name text field and read the instruction on what it will create.
- Unzip the file in a convenience place (e.g., desktop) and give the folder a more descriptive name (e.g., myFirstApp).
Site Definition
- Inside the folder that you just renamed, create another folder and give it an name of images. Move any images in the folder that you need for your app.
- (Optional) Go back to www.jQueryMobile.com and download a local copy of the jQuery framework and place it in a folder name jQuery. Otherwise, you can use the CDN copy that was created for you in the index.html when the theme was downloaded.
- Open up Dreamweaver and select Site > New Site.... from the menu and give the site a name (e.g., myFirstApp) and then click on the folder icon and navigate to the folder that you renamed earlier and then click the Select Folder button to add it to the Local Site folder text field. Then click the Save button to create the site and close the dialog box.
- Double-click on the index.html file in the Files panel to open it. Click on the Split View button to see both the Design and Code views.
- Add a HTML5 doctype tag to the first line in Code view (e.g., <!doctype html>)
- Delete all of the tags between the <body> tags by selecting the <body> tag in the Tag Chooser at the bottom of the screen and then pressing the Delete key.
- Select File > Save As... and save the file as template.html so that it can be used later to create the other pages.
Home Page
- Open the Insert Panel by selecting Windows > Insert (or CTRL+F2) and select the jQuery Mobile option from the drop down list.
- Drag and drop the Page icon to the page and in the dialog that appears ensure that the Header and Footer checkboxes are selected.
- In the Design View, change both the default Header and footer text to meet your application needs.
- Click on the Live view button or preview the page in a browser of your choose.
- Click the Live View button again to return the the Design View and the delete the word Content.
- Drag and drop the ListView icon to the Content area. In the dialog box that appears, add the following options:
- List type: Unordered or Ordered
- Item: 4
- Inset checkbox checked
- Text Description checkbox checked
- Click the OK button to accept the changes.
- Change the <h3> Page text to whatever you want your menu items to be.
- Change the <p> text to whatever you want the menu descriptions to be.
- Drag and drop an icon for each list item within the <a> tag but before the <h3> tag. Make sure the icons are at least 80x80 pixels.
Example:
<li><a href="#">
<img src="images/icon_dw.png" width="80" height="80" alt=""/> <h3>Dreamweaver</h3>
<p>Dreamweaver is an HTML editor</p>
</a></li>
- (Optional) Add a top and bottom list divider to the ListView by adding a data-role = "list-divider" to <li> tag above and below the existing <li> tags. Then add text to the top <li> tag and a non-breaking space ( ) to the bottom <li> tag.
Example:
<ul data-inset="true" data-role="listview" data-divider-theme="a">
<li data-role="list-divider">Adobe CC Applications:</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li data-role="list-divider"> </li>
</ul>
NOTE: Besides the data-theme, you can also add a data-divider-theme and a data-count-theme all within the <ul> tag.
- In the Properties panel, add a link in the Link text field for each <a> tag in the <ul> list:
Example:
<li><a href="dreamweaver.html">
<img src="images/icon_dw.png" width="90" height="90" alt=""/> <h3>Dreamweaver</h3>
<p>Dreamweaver is an HTML editor</p>
</a></li>
- Click the Live View button or preview the page in a browser.
Other Pages
While we can create a Dreamweaver template for the other pages, for simplicity sake, we will create them using the template.html page created earlier since there are only four pages.
- Open the template.html file as save it as a new page. (e.g., dreamweaver.html).
- Rename the page title to match its content (Dreamweaver New Features).
- Give the page a title by creating an <h2> tag in the empty <div data-role="content"> container.
Example:
<div data-role="content">
<h2>Dreamweaver CC What's New</h2>
</div>
- Save page.
- Repeat the first four steps for the other menus, but change the page's name, title and heading accordingly.
- Open the index.html file in a browser (F12) and test all of the menu items to see if they go to their corresponding page. Currently, you will have to use the Back button on the browser to go back to the home page. We will fix this problem in the next section.
- Add content to all pages however and whatever you want.
Home Button
Create Home button in the header.
When you add one or more anchor tags (<a>) to a header, they will automatically be converted to buttons and positioned to the far left and then to the far right side of that header. It does not matter if you place the anchor tags above or below the <h3> tag, they will still render on top of the heading. However, for a screen reader it is best to have it above the <h3> tag so that it can be read first.
When you add one or more anchor tags (<a>) to a footer, they will automatically be converted to buttons and positioned to the far left but adjacent to each other and above or below the <h3> tag in the footer depending if they are placed above or below the <h3> tag.
- Add a link tag (<a>) with a name of "Home" to each of the pages in the <div data-role="header" data-theme="a"> container except the index.html (home page).
Example:
<div data-role="header" data-theme="a">
<a href="index.html">Home</a>
<h1>Adobe CC Apps</h1>
</div>
- Save all files and test pages again in a browser.
- (Optional) Add a icon to the home button by adding the following data-icon attribute to the <a> tag.
<a href="index.html" data-icon="home">Home</a>
Control Group
Create Control Group in the footer.
Control group is as the name implies "a group of control elements" usually buttons. The advantage of "wrapping" a group of control element is to allow the group to have rounded corners at the top and bottom if they are vertical or right and left sides of the group if they are horizontal.
- In the index.html page, add an About and Summary links to the footer. Notice in Design View that they are to the left and adjacent to each other as stated earlier. Also note that they both have rounded corners on the left and right sides.
Example:
<div data-role="footer">
<a href="about.html">About...</a>
<a href="summary.html">Summary</a>
<h2>Copyright 2015. RMCS. All rights reserved.</h2>
</div>
- Add the following class to both buttons so that the <a> tags can behave like buttons:
Example:
<a href="about.html" class="ui-btn">About...</a><a href="summary.html" class="ui-btn">Summary</a>
- Wrap the two <a> tags within a set of <div> tags and give them the following data-role and data-type:
Example:
<div data-role="controlgroup" data-type="horizontal">
<a href="about.html">About...</a><a href="summary.html">Summary</a>
</div>
- Add an align attribute to the following <div> tag to center the control group .
Example:
<div data-role="controlgroup" data-type="horizontal" align="center">
Dialogs
We will create two dialog boxes with transition effect applied to them.
- Create two additional pages using the same techniques above and save them as about.html and summary.html to correspond to the <a> tags in the control group that was just created. Add some dummy text to give the pages some height.
- Test the page with Live View or in a browser.
NOTE: You should see that the page opens up as a regular page with no Back or Close button.
- Add the following data-dialog attribute to the main page content.
<div data-role="page" id="about_page" data-theme="b" data-dialog="true">
<div data-role="header" data-theme="a">
- Test the page again with LiveView or in a browser.
NOTE: This time you should see that the page
opens up as a dialog box inside of a page with a Close button automatically injected into the page. How cool is that!!!.
- Return back to the index.html page and add a data-transition attribute to the About and Summary buttons in the footer.
<div data-role="controlgroup" data-type="horizontal" align="center">
<a href="about.html" class="ui-btn" data-transition="slidedown">About...</a>
<a href="summary.html" class="ui-btn" data-transition="slidedown">Summary</a>
</div>
- Test the page again in a browser by clicking on both of the buttons in the footer. LiveView does not work as well.
NOTE: You should see that the the dialog box now transition from the top to the bottom. Also, when you close the dialog box that it will transition from the bottom to the top or in the reverse transition if you change the transition type.
ToolTips
- On any page (in this case, about.html) select a word or phrase in one of the sentences (in this case, jQueryMobile Framework) and create a link within the page to the tooltip that will be created next (e.g., #popupjQueryMobile).
- Then in Code View, add the following attributes to the link:
<a href="#popupjQueryMobile" data-rel="popup" data-transition="flow">jQueryMobile Framework</a>
- Then create a tooltip popup with the following three tags. You don't need the space between the lines.
<div data-role="popup" id="popupjQueryMobile" data-theme="a">
<a href="#" data-rel="back" data-role="button" data-icon="delete" class="ui-btn-right" data-iconpos="notext">Close</a>
<p>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.</p>
</div>
NOTE: The <div> tag is a wrapper for the tooltip with a role of popup an id of popupjQueryMobile and a data-theme of a. The <a> tag is the Close button with a host of attributes and the <p> tag is the tooltip itself with no attributes.
- Test in Live View or in a browser by clicking on the link.
NOTE: You should see the tooltip pop up with a transition. If you click the close button or click outside of the tooltip, the tooltip will animate off the screen with a transition.
Convert To App
- Minimize Dreamweaver and navigate to folder where the site files are.
- Zip all of the site's content.
- Log in PhoneGap Built and convert site to *.apk.
- Using a QR reader, scan QR on the phoneGap Built website to load app onto a phone or tablet.