CS 185C/286 - Lecture 9

Cover page image

Cay S. Horstmann

Lecture 9 Quiz 1

No quiz today

Projects

Modernize Android client for Android 4, including tablets: Keith, Vakati, Wu
Improve device integration with Android and iPhone client: location, phone, schedule, contacts, etc.: Pham, Li X, Li Y
HTML5 Cinequest client: Nguyen, Yi, Yulianto
Hemepath counter app: Dang, Eibagi, Karnes
Samsung S-Pen: Sainion, Sivaraman, Tang
Port Cinequest app (films only, not schedule) to Windows phone: Anderson, Cheung, Lehrmann

Weekly Report

Each team member keeps an individual report on the wiki
Pretend you are a contractor. Log every hour.
Just update the Wiki when you are done with a stretch of work
Team lead keeps a list of each meeting, a list of open issues, a list of inch pebbles
Meeting: Date/time/anyone missing
Open issues. Anything that makes you nervous. Cross out closed items (<del> in Markdown)
Inch-pebbles. Add responsible person. Cross out achieved items, add new items.

Today's Lecture/Lab

HTML5
Notes adapted from Dr. Pollett's course

Introducing HTML 5

Advantage: will pretty much work across platforms: iOS, Android, Windows phone, etc.
It has as drawbacks that the apps tend to be slower and might not be able to take as full advantage of all the device sensors and graphics.
For HTML 5 you probably would need a different business model than just the cost of downloading the app.
Nevertheless, several companies have created lightweight "wrapper apps" which allow you 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
- Sencha Touch
A mobile app created with HTML 5 is essentially a web page which employs features of HTML 5 to make it render nicely and to render rich content in a mobile device.
Such an app typically makes use of the Javascript language for networking as well as for persistence.
When coding such an app, people typically make use of an existing Javascript framework (a library written in Javascript and CSS) to provide a palette of pre-made, useful widgets which are cross-platform. Otherwise, you would have to code these yourself.
For this class, we are going to make use of 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.0/jquery.mobile-1.3.0.min.css" />			
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My First HTML App!</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

The first line of an HTML 5 document is always <!DOCTYPE html>, this is for legacy reasons due to how browsers detect whether they need to go into quirks mode. The line tells a browser -- mobile or otherwise -- that what follows should be a validating document. The fact that we don't declare the version of HTML in this tag is the browser's clue that it is HTML 5.
Notice HTML is a tag-based language, where <some-tag > is called an open tag; </some-tag > is called a close tag.
The open tag is allowed to contain within it name-values pairs called attributes. For example, name="viewport" is an attribute of the meta tag on the last slide.
The text between an open tag and a closed tag is called the content of the tag.
After the doctype, an HTML 5 document consists of an html-tag pair whose content consists of a valid head of the document and then a valid body of a document
A valid of head of a document, at a minimum is consists of head-tag pair whose content must include a title-tag pair, but may also include other tags which are allowed to occur in head tags.
A valid body of a document, consists of a body-tag pair whose content consists of 0 or more tags which are allowed to occur in a body as well as their content.
The contents of a title tag are supposed to be text data and are rendered usual as the title of the web page in the browser title bar.

The Head of a Document

In our example, the head of the document also uses the script tag to include the jQuery framework, and the jQuery mobile framework.
The link tag in our example is used to include jQuery's Cascading Style Sheet file. Stylesheets are used to specify how a tag should render in the browser. For example, if I wanted the background-color of the span tag to be red and its font-size 20pt in my document, I might have in my CSS file the lines:
```
span {
    background-color:red;
    font-size:20pt;
}
```
meta-tags are used to specify meta information about how the page should be loaded (usually by setting the http-equiv attribute followed by content attribute) or meta information about the page which may be used by a user-agent (name attribute followed by content attribute). In our example, we have the name attribute given the value viewport. This is a new HTML 5 name value.
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 left or right or up down on the desktop to see the whole viewport).
The viewport affects how lines wrap, etc.
The area of the browser which is not rendered into ( the area containing the url, etc) is often called browser chrome.
The reason for the viewport meta tag is on a mobile device we often don't have scroll-bars -- we use pinch and zoom. The default viewport on a iOS device has a width of 980. Safari draws this whole width within the actual screen-width of 320 pixels (on a 3GS) by scaling .
The content attribute associated with the name attribute viewport in the meta directive says how the browser should render the page within the viewport. For example, width=device-width. Says that the viewport width should be the actual devices width rather than 980. initial-scale controls the zoom level of the page when initially loaded (1 means no zoom).
We could have given a number of pixels rather than device-width. We could also have specified height as device-height or some number of pixels. Other possible directives are minimum-scale, maximum-scale, as well as user-scalable (yes/no as values).

The Body of a Document

The body of our example document illustrates a few common HTML tags: div, h1, p.
These are examples of tags which typically render as blocks on the screen.
The div tag (short for division) is a generic such tag and can be nested with other block tags. It is usually styled to make it behave as we want on the screen.
h1 through h6 tags are heading tags of more to lesser importances. You can style an h2 tag so that it is drawn bigger than an h1 tag; however, when you use a h1 tag you are saying somehow it is more important, than something that is h2. This can be important to screen-readers.
The p tag is used for paragraphs.
Another kind of tag is called an inline tag. The tags for bold (b tag), italics (i tag), typewriter (tt tag), etc. Are some common examples of inline tags.
Other examples of examples of inline tags are span tags, which are used to indicate a region of text within a block (might decide to style to look however we want) and anchor tags ("a" tags) used for links. The latter have the format:
```
<a href="http://www.link-to-somewhere.com/">Link Text</a>
```
Notice in our example, the div tag has a data-role attribute. data-* attributes are user-defined attributes which were introduced with HTML 5.
HTML 5 supporting Javascript engines have a document object model including a dataset field for their elements. This allows Javascript to easily get at elements that have data-* attributes and manipulate them. This is what jQuery is using as part of how it draws things.
In CSS, we can also select such tags using selectors like div[data-role=header] .

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="#">Red</a></li>
    <li><a href="#">Green</a></li>
    <li><a href="#">Blue</a></li>
    <li><a href="#">Violet</a></li>
    <li><a href="#">Ultra-Violet</a></li>
</ul>

This would render as this Unordered List Page.

Understanding Javascript

Javascript is an interpreted language developed by Brendan Eich at Netscape around 1995.
Many details on Javascript can be found in this book
As we have already seen in our first demo of HTML 5, Javascripts can be either directly or indirectly embedded in a document.

Directly:

<script type="text/javascript">
code
</script>

Indirectly:

<script type="text/javascript" src="myscript.js" />

Basic Syntax

Identifiers in Javascript (i.e., names of variable or functions) must begin with a letter, an underscore, or a $ and subsequent characters may be one of these three or numbers
Javascript supports /*...*/ and // for comments.
Semicolons to end lines in Javascript are optional. Beware:
```
return 
x; // has the effect of just return!
```
Most statement syntax; operators +, -, *, /, %, ++, --, etc; control structure such as: if/else, for, while, do..while; are written in the same way as Java.
Javascript has 5 primitive types: Number, String, Boolean, Undefined and Null.
Javascript has predefined objects corresponding to Number, String and Boolean. Each of these is wrappers for a value of the corresponding primitive type.
Javascript supports literals such as 5.5, 3, NaN, "hi", 'yo', true, false, undefined, null.
Numbers can by converted to strings using the toString method of Number. So can do:
```
x = 5.5; y = x.toString(); 
```
Strings can be concatenated using +. Ex: greeting = "hi" + "you";

Ways to invoke Javascript

When a web page is loaded, it is parsed from top to bottom.
When a script tag is found it is evaluated.
Javascript in a browser setting has several built-in objects that allow it to refer to the current document (document), the current window (window), etc.

To write out text as the document is being parsed we might do things like:

document.write("Hi there!");
document.writeln("This strings has a new line after it!");

After the page is done being parsed and drawn, there several different ways that Javascript might be invoked:
1. By a link:
```
<a href="javascript:alert('hi there')">Hi there alert</a>
```
  Hi there alert
2. By an event set up using an attribute:
```
<button onclick="alert('hi there')">Hi There!</button>
```
3. By an event set up using Javascript:
```
<button id="yo">Yo!</button>
<script>
document.getElementById("yo").onclick = function() {alert("yo");}
</script>
```

Objects

Objects can be created with an initial declaration like:
```
var my_object = new Object();
```
This object would initially have no properties.

An assignment like:

my_object.make= "V6" /* would then give a property make a value. */
//can access as
p = my_object["make"]
q = my_object.make

You can also nest objects this:
```
my_object.subObject = new Object();
```
You can loop over properties using:
```
for (var prop in my_object){...}
```

Arrays

Arrays can be created with the syntax:

var myArr = new Array(1, 2, "hello")
var myArr = new Array(100);
var myArr = [1,2,3];
//to access
myArr[0]
//to determine length
myArr.length

Functions in Javascript

Below is an example of the syntax for declaring a function in Javascript

function swap(i, j, a)
{
    var tmp=a[i]; /* explicitly defined variables 
                     have scope within the function
                     if I had declared the variable 
                     implicitly it would have global scope */
    a[i] = a[j]; a[j] = tmp;
}

This function could be called with a syntax like:
```
swap(10, 5, b);
```
A return statement can be used to return a value from a function.
Functions are objects so can be assigned to variables.
```
var b = swap;
```
We can create functions anonymously (often done in jQuery) and assign them to variables:
```
swap = function(i, j, a) { /* code above */}
```
The definition of a function does not need to list its arguments. One can obtain a list of arguments using the argument subobject of a Function.
```
function swap()
{ var i = this.arguments[0], j=this.arguments[1], a=this.arguments[2];
  //same code as before
}
```

Constructors

Javascript constructors are special methods that create and initialize the properties for newly created objects. For example,
```
function car(new_make, new_model, new_year)
{
   this.make = new_make;
   this.model = new_model;
   this.year = new_year;
}
```

I could then create an object with

my_car = new car("Ford", "Contour SVT", "2000");

Methods

To create methods, I can do things like the following way to create a display method to pretty print cars:

function display_car()
{
document.write("Make:", this.make, "<br />");
document.write("Model:", this.model, "<br />");
document.write("Year:", this.year, "<br />");
}
function car(/*same as before*/)
{ //same as before
this.display = display_car;}

The drawback of this is that each time we create a new car we have a separate pointer to display_car. Instead, we can use the prototype property of the car function. This will only create one pointer.
```
function car(/*same as before*/)
{ //same as before}
car.prototype.display = display_car;
```

jQuery

jQuery was developed by John Resig in 2006 and is used in 52% of the top 10,000 web sites.
Different Browsers implement Javascript slightly differently.
The syntax for referring to elements on a web page in DOM as well as the syntax for doing Ajax is awkward at best.
jQuery aims to solve these two problems.

For example, rather than doing:

document.getElementById("yo").onclick = function() {alert("yo");}

in jQuery we could do:

$("#yo").onclick = function() {alert("yo");}

To add an onload event handler to a document, we can do:
```
$(document).ready(handler)
// or
$(handler)
```

Reading Before Next Class

Read carefully through all these slides

Lab

Bring your laptop to the lab
You will work with a buddy
One of you writes code, the other types up answers
Switch roles each lab
Submit lab work to git

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, ...?
Now make a directory public_html in the base directory of your repo (in parallel to the workspace directory). Inside, place a file lab09.html. Put in the JQuery Mobile outline from the lecture slide. Load it in your browser. What happens?
Push your repo. Point your browser to http://cs10.cs.sjsu.edu/lastname_firstname/lab09.html. You should see the same contents. If not, wait a minute or so.
That public_html directory gets copied to the cs10 server every couple of minutes so that you can test your code on a mobile device.
Point your mobile device to the same URL. You should see the same contents on your device.
You've just seen how to make a list view. Make one that looks just like the screen in Homework 1. Put the question text above the list and just put the choices, not the buttons, inside the list. What is your code?
What happens when you click on a list item?
To make a list item active, you need to make it into a hyperlink:
```
<a href="#">Android</a>
```
Try that. How does the item appearance change?
Do it for all the items. What happens when you click one?

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">
   question goes here					
</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?

That works, but it's hardwired. To see how you might programmatically solve this, remove the href attributes from the links and add the following into the head part of your page:

      <script type="text/javascript">                                         
$(document).ready(function() {
   // do stuff when DOM is ready
   $('a').click(function(event) { alert(event.target.firstChild.textContent) })
 });
       </script>

Now what happens when you click a link?