Tables iPhone; HTML 5 Networking; Android TableLayout and ListView

CS175

Chris Pollett

Oct 29, 2014

Outline

Finish iPhone Networking, Tables
HTML 5 Networking
Android TableLayout, ListView

Tables

Tables in iPhone development are used for several things:
- In Mail, to list our mail accounts, mail folders, and subfolders.
- In Settings, to display all the preferences you can change. Notice these are grouped and each group is viewed as a table row (section).
- etc.

Introduction

We start off today by continuing the example begun last day of making an iPhone app that connects to a Java server and which gets back a list of table cell data which it puts in a table.
The Java Server code is on last days slides.
We will also make use of the socket code explained last day in the example on the next few slides.

Table Interface Builder

Tables are defined using the class UITableView.
Each cell in a table is given by a UITableViewCell.
Tables get their configuration info by two objects set on them: an object implementing the UITableViewDelegate protocol and an object implementing the UITableViewDataSource protocol.
To start our project, we can create a Single View Application.
Then fire up Interface Builder and drag a Table View over to the view.
The table in IB as in it the words "prototype content" -- we will fill stuff in in a moment.
In the Connection Inspector, drag both the dataSource and delegate of the Table View to the View Controller.

ViewController.h

Here is the header file for or controller. Notice we are promising to implement UITableViewDelegate and UITableViewDataSource.
Below we use copy rather than retain because we want the class instance we are defining to have its own copy of listData so it can be mutable by our code. Using copy means that setter and getter are not synthesized.

#import < UIKit/UIKit.h> 
#include < sys/types.h> 
#include < sys/socket.h> 
#include < netinet/in.h> 
#include < netdb.h> 

@interface ViewController : UIViewController 
	< UITableViewDelegate, UITableViewDataSource> 
@property (nonatomic, copy) NSArray *listData;

@end

Table Code

Aside: Notice we can make the IDE add lines between methods it lists in its bread crumb drop down by using #pragma line like we do below

Here is our implementation file. Notice the socket callback lives outside the @implementation.

//
//  ViewController.m
//  NetworkExample
//
//  Created by Chris Pollett on 10/29/14.
//  Copyright (c) 2014 Chris Pollett. All rights reserved.
//

#import "ViewController.h"

CFSocketNativeHandle sock;
UInt8 buffer[1024];

void ConnectCallBack(
                     CFSocketRef socket,
                     CFSocketCallBackType type,
                     CFDataRef address,
                     const void *data,
                     void *info)
{


    sock = CFSocketGetNative(socket);

    char *msg = info;

    NSLog(@"%s\n", msg);

    send(sock, msg, strlen(msg) +1, 0);
    NSLog(@"Sent Message\n");
    recv(sock, buffer, sizeof(buffer), 0);// if wanted to write could use
    NSLog(@"Got: %s \n", buffer);
    
    
    CFRunLoopStop(CFRunLoopGetCurrent());
    return;
}

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    char msg[] = "HELLO\n";

    /* Build our socket context; this ties the joke to the socket */
    CFSocketContext context = { 0, msg, NULL, NULL, NULL };


    CFSocketRef client = CFSocketCreate(NULL, PF_INET, SOCK_STREAM, IPPROTO_TCP,
                                        kCFSocketConnectCallBack, (CFSocketCallBack)ConnectCallBack, &context);

    struct sockaddr_in theName;
    struct hostent *hp;
    CFDataRef addressData;

    theName.sin_port = htons(8889);
    theName.sin_family = AF_INET;

    hp = gethostbyname("localhost");
    if( hp == NULL ) {
        return;
    }

    memcpy( &theName.sin_addr.s_addr, hp-> h_addr_list[0], hp-> h_length );

    addressData = CFDataCreate( NULL, (UInt8 *)&theName, (CFIndex)sizeof( struct sockaddr_in ) );

    CFSocketConnectToAddress(client, addressData, 1); // 1 second timeout
    CFRunLoopSourceRef sourceRef =
    CFSocketCreateRunLoopSource(kCFAllocatorDefault, client, 0);
    CFRunLoopAddSource(CFRunLoopGetCurrent(), sourceRef, kCFRunLoopCommonModes);
    CFRelease(sourceRef);
    CFRunLoopRun();


    NSLog(@"I got: %s\n\n", buffer);
    NSString *data = [[NSString alloc] initWithCString:
        (char*)buffer encoding: NSASCIIStringEncoding];


    NSArray *list_array = [data componentsSeparatedByString:@":"];
    
    self.listData = list_array;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark -
#pragma mark Table View Data Source Methods
/*
  notice we have two methods to implement our protocols
 */
/*
  This method gives for each section in the table the number of rows
  it has (we only have one section so in this case it returns the total
  number of rows)
*/
-(NSInteger)tableView:(UITableView *)tableView
numberOfRowsInSection:(NSInteger) section
{
    return [self.listData count];
}

/*
   This method is a callback used to fill in table cells. Notice to save
   memory we only instiate cells which will be scene, but then we cache
   them when they become invisible
 */
-(UITableViewCell *)tableView: (UITableView *)tableView
        cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    /* Name we will use for our type of table cell (if have more than one type)
       we might have more than one name. For example, we might have image and
       non image cells
     */
    static NSString *SimpleTableIdentifier = @"SimpleTableIdentifier";

    UITableViewCell *cell= [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];

    if(cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                       reuseIdentifier: SimpleTableIdentifier];
    }

    NSUInteger row = [indexPath row];

    cell.textLabel.text = self.listData[row];
    /* If we want to style our cells we can do things like:
     cell.textLabel.font = [UIFont boldSystemFontOfSize:50];
     */
    return cell;
}

@end

HTML 5 Networking

We learned how we could download the contents of a web page where the folder name and query string of its URL told us a class, method name, and arguments of a web service.
Today, we begin by looking at how we could do much the same thing in Javascript. In particular, how to do it using jQuery.
We then briefly consider the WebSocket API, which is a new API for sockets which is still in a draft stage. It is supported, however, by an Apache module and by the most recent versions of all the major browsers.

XMLHttpRequest

Javascript supports making connections back to the host that it came from. To do this one first creates a connection object:
```
request = new XMLHttpRequest()
```
For this request, one can set up HTTP headers with a syntax like:
```
request.setRequestHeader("name", "value")
```

One can then open the connection with a command like:

request.open(theHTTPmethod, theURL, theAsync flag)
or
request.open(theHTTPmethod, theURL, theAsync flag, username, password)

For example,

request.open("GET", "progress.php", true)

The asynchronous flag says whether or not the Javascript can continue executing (true) or if it must wait for a response (false).

Step-by-Step Continued II

We next need to set up a callback function which will be called as we get data back from the server:

var self = this; /* remember scope of enclosing 
                            object */
request.onreadystatechange = function()
{
	switch(request.readyState)
    {
        case 0:// handle uninitialized case
        case 1: // handle open but no send case
        case 2: // handle send but no response case
        case 3: // handle response is being downloaded case
        case 4: // handle response has completed being downloaded case 
    }
}

Step-by-Step Continued III

In case 3 or 4 above, request.responseText or request.responseXML will contain the data that has been returned by the server
In case 3 or 4 above, request.getAllResponseHeaders() can be used to get the HTTP response headers.
Sometimes it is useful to start a timer in case 3, using setTimeout. If the request is taking too long so that the timer gets called, one can then abort the request using: request.abort.

Typically, the code in 3 or 4 above would put the response text into some tag in our document. This could be done with:

document.getElementById("myDivTag").innerHTML =  request.responseText; 

//or we could do...
myDiv = document.getElementById("myDivTag")
if(myDiv.firstChild)
{
	myDiv.removeChild(myDiv.firstChild);
}
myDiv.appendChild(document.createTextNode(request.responseText));

Step-by-Step Continued IV

Once we have set up our callback function we are ready to send data to the server.
To do this we can do:
```
request.send(null);
```
Note: send's argument can be used if using POST method to send the posted data
That's it! We just sit back then and wait for our callback to be called.

Simplifying Life with jQuery

Often we're lazy and we just want the contents of some page when something happens.
Also, in some older browsers XMLHttpRequest() is a little flaky (IE6).

jQuery can come to the rescure by making a cross platform request which doesn't have to much code overhead. For example,

function  downloadDelayed()
{
    $.ajax({
        url : "myscript.php",
        success : function (data) {
           $("#contentArea").html(data);
        }
    });
}
setTimeout("downloadDelayed()", 1000);

This downloads myscript.php and displays it's contents into the tag with id contentArea.

HTML 5 WebSockets

One disadvantage of XMLHttpRequest() is that it is half duplex: Client sends something, Server replies, Client sends another thing, etc.
Also, for each request we have the overhead of sending the get/post command followed by headers and from the server we get a bunch of headers before any data is returned.
Web Sockets solve these problems. The standard is still in draft stage, but it is now supported by mod_pywebsocket (Python) and phpwebsocket (PHP) on servers such as Apache and in all the major browsers.

HTML 5 WebSockets -- HTTP

At the HTTP level, a web socket request starts out as usual HTTP, but a connection upgrade is requested (from Wikipedia):

GET /mychat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13
Origin: http://example.com

If websockets are supported then the base 64 encoded Sec-WebSocket-Key key above is concatenated with the magic string: 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 and SHA-1 hashed. The server would reply:
```
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
```
The client and server can then exchange web socket frames. These begin with 0x00 and end with 0xFF and have UTF-8 (not binary) data in between.

HTML 5 WebSockets -- Javascript

Below are the basic WebSocket Javascript functions (websocket URI's are prefixed with ws: or wss: (secure)):

var webSocket = new
WebSocket("ws://some.websocketplace.org");
// Associate listeners
webSocket.onopen = function(evt) {
alert("The connection was opened");
};
webSocket.onmessage = function(evt) {
alert("Received message: " + evt.data);
};
webSocket.onclose = function(evt) {
alert("The connection was closed");
};
webSocket.onerror = function(evt) {
alert("Ouch an error!");
};

webSocket.send("This is some WebSocket data!");
// Close WebSocket
webSocket.close();

UI for Android

There are a few UI related things we've covered for iPhone but not for Android...
One thing, you still need to know is how to create and use ListView and TableLayout.
A toolbar is basically a bar with a button on it.
To fake this in Android, we can put a button on a LinearLayout that fills the screen width.
We set the color of the layout by setting the attribute android:background="#CCC" to make it look like a bar.

ListActivity

One way to display a list of items in Android is to use a ListActivity.
A ListActivity displays a list of items by binding to a data source such as an array or Cursor.
ListActivity's can also be used to set event handlers for events related to the list items.
A ListActivity has on itself a ListView object on which the listed items are placed. By default this ListView takes the whole screen.
Because of this you are going to have to experiment a bit if you want to use this and a "toolbar".
It is possible to setContentView() in onCreate() with your own custom view that contains the ListView tag:

The following code, creates and populates such a view in the default case:

package org.pollett;

import android.app.*;
import android.widget.*;
import android.os.Bundle;

public class ListViewTest extends ListActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setListAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, FOOD));
        getListView().setTextFilterEnabled(true);
        
    }

    static final String[] FOOD= new String[] {
        "Pizza", "Apple", "Calzone", "Ma Po Do Fu",
        "Pho Bo", "Curry", "Coffee", "Catfish"
        
      };
    
}

What ListViewTest Looks Like

ListActivity with a custom layout (First the Layout)

Here is an example of a custom layout that could be used with a ListActivity:

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:orientation="vertical"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:paddingLeft="8dp"
         android:paddingRight="8dp">

    <ListView android:id="@id/android:list"
               android:layout_width="fill_parent"
               android:layout_height="200sp"
               android:background="#00FF00"
               android:layout_weight="1"
               android:drawSelectorOnTop="false"/>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    	     android:orientation="horizontal"
     	     android:layout_width="fill_parent"
      	     android:layout_height="wrap_content"
		 android:background="#EEEEEE" >
		<Button android:id="@+id/mybutton"
			android:layout_width="100sp"
			android:layout_height="wrap_content"
			android:text="Button"
			android:layout_x="19px"
			android:layout_y="347px"
		/>
 	</LinearLayout>
 </LinearLayout>

ListActivity with a custom layout (code)

package org.pollett;

import android.app.*;
import android.content.DialogInterface;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.*;
import android.os.Bundle;

public class ListViewTest extends ListActivity implements OnClickListener {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    	View button;
    	
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        setListAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, FOOD));
        getListView().setTextFilterEnabled(true);

        button = this.findViewById(R.id.mybutton);
        button.setOnClickListener(this );
    }

    protected void  onListItemClick(ListView l, View v, int position, long id)
    {
        AlertDialog alertDialog = new AlertDialog.Builder(this).create();
        alertDialog.setTitle("List Item Clicked");
        alertDialog.setMessage("You clicked list item " + position);
        alertDialog.setButton("Okay", new DialogInterface.OnClickListener() {
          public void onClick(DialogInterface dialog, int which) {
            return;
          } });
        alertDialog.show();
    }
 
    public void onClick(View v)
    {
    	AlertDialog alertDialog = new AlertDialog.Builder(this).create();
    	alertDialog.setTitle("Button Clicked");
    	alertDialog.setMessage("You clicked the button");
    	alertDialog.setButton("Okay", new DialogInterface.OnClickListener() {
 	          public void onClick(DialogInterface dialog, int which) {
 	            return;
 	          } });
 	    alertDialog.show();
    }    
    
    static final String[] FOOD= new String[] {
        "Pizza", "Apple", "Calzone", "Ma Po Do Fu",
        "Pho Bo", "Curry", "Coffee", "Catfish"
        
      };
    
}

TableLayout

The UI component that probably most approximates the iPhones table view is a TableLayout.
As with table views we imagine a table being split into row and columns.
A TableLayout's width is always FILL_PARENT.
Such a layout can contain any View object, but typically contains TableRow's. These are arranged vertically
A TableRow's height is always WRAP_CONTENT.
A table row can in turn contains View's which are arranged horizontally. These views are allowed to span columns just like HTML tables.

TableLayout Example (based on Android Developer Example)

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">

    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Open..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-O"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Save..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-S"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow>
        <TextView
            android:text="X"
            android:padding="3dip" />
        <TextView
            android:text="Import..."
            android:padding="3dip" />
    </TableRow>

</TableLayout>

What TableLayoutTest Looks Like