CS 175/286 - Lecture 9

Cover page image

HTML 5 + JavaScript

Client-side UI toolkit that runs in the browser
For dynamic web pages: HTML+CSS = page layout, JavaScript = UI behavior
Single-page or few-pages apps, contents updated dynamically
Can use lightweight "wrappers" to package your HTML 5 app as a native app (even using some of the native sensors you wouldn't normally be able to use):
- PhoneGap
JavaScript framework for easy development
- Sencha Touch
- jQuery Mobile

A Template HTML 5 Document with jQuery Mobile

<!DOCTYPE html>
<html> 
 <head> 
    <title>Hello HTML 5</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />			
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My First HTML Application</h1>
    </div>

    <div data-role="content">    
        <p>This is an HTML 5 app.</p>        
    </div>

</div>

</body>
</html>

Hello HTML 5 app.

General formal of a document

HTML 5 page starts with <!DOCTYPE html>. Note: No version of HTML
Use the script tag to include the jQuery framework, and the jQuery mobile framework.
The link tag includes the CSS (Cascading Style Sheet) file.
Meta-tags are used to specify information about how the page should be loaded
The viewport of a browser is the virtual window area in which it renders a web page. This may be larger than the devices screen size (for example, you might need to scroll or pinch to see the whole viewport).
In our example, we set the viewport width to the device width and no zoom.
Notice in our example, the div tag has a data-role attribute. data-* attributes are user-defined attributes which were introduced with HTML 5.

Where to Find Examples

The jQuery Mobile Getting Started page has a lot of quick examples you can try out to get started with creating HTML 5 apps.
Here is one of the widgets from that page for displaying unordered lists.

The code you would put within your data-role="content" div tag would look like:

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Blackberry</a></li>
    <li><a href="#">iPhone</a></li>
    <li><a href="#">Windows Mobile</a></li>
    <li><a href="#">Android</a></li>
    <li><a href="#">Firefox OS</a></li>
</ul>

This would render as this Unordered List Page.

Starting Out With jQuery Mobile

Point your mobile device or your browser to the JQuery Mobile demo site
Select Listviews from the Widget Reference
What is the key to making lists with dividers A, B, C, ...?
Make a directory lab09. Inside, place a file example1.html. Put in the JQuery Mobile outline from the lecture slide. Load it in your browser. What happens?
Make a list view (without dividers) for a quiz question. (Just hardwire the question.) Put the question text above the list and just put the choices, not any buttons, inside the list. What is your code?
What happens when you click on a list item?

Fixing the Targets

We need to work on the link targets. Right now, they go back to the same page. Set up three pages

<div data-role="page" id="question">
    <div id="questionText" data-role="header">
    </div>   
     <div data-role="content">
        <ul id="choices" data-role="listview">
        </ul>
    </div>
</div>
<div data-role="page" id="correct">				
   congratulations goes here
</div>
<div data-role="page" id="incorrect">				
   message goes here
</div>

Change the link targets from # to #correct or #incorrect. Now what does your app do?

In the Emulator

Now let's look at it in the Android emulator. We need a web server. Download and unzip GlassFish
Run path/to/glassfish4/bin/asadmin start-domain
Point your web browser to http://localhost:8080. What happens?
In the lab09 directory, run
```
jar cvfM path/to/glassfish4/glassfish/domains/domain1/autodeploy/lab09.war .
```
Note the space and the . at the end—that's the current directory. To check that it works, point your browser to localhost:8080/lab09/example1.html. Now in the emulator, start the web browser and point to 10.0.2.2:8080/lab09/example1.html. What happens?