HTML 5 Local Storage

There was an attempt to standardize the use of sqlite in browsers: WebSQL.
Although browsers to varying degrees support this standard, since the standardization has been halted, I would like to discuss a different way to get persistence in HTML 5.
Local Storage is an enhancement to the key-value storage system known as cookies available in HTTP.
Whereas, in the cookie specification the official capacity/domain is something like 4KB, all modern browsers support 5MB/domain of local storage.

Here is a simple demo app showing how to use local storage:

<html>
<head>
<title>Local Storage Test</title>
</head>
<body>
<script type="text/javascript">
    if (localStorage) {
        document.write("<h1>Local Storage is Working!</h1>");
        testStorage();
    } else {
        document.write("<h1>Local Storage is Unavailable!</h1>");
    }

    function testStorage() 
    {
        myvalue = localStorage.getItem("mykey1");
        myvalue2 = localStorage["mykey2"];

        if(myvalue) {
            document.write("<p>Found stored value for mykey1 ="+
                myvalue+"</p>");
            localStorage.removeItem("mykey1");
            //can use localStorage.clear();  to get rid of everything
        } else {
            localStorage.setItem("mykey1", "hello");
        }
        if(myvalue2) {
            document.write("<p>Found stored value for mykey2 ="+
                myvalue2+"</p>");
        } else {
            localStorage["mykey2"] = "yo";
        }

        document.write("<h1>List all that's stored after update</h1>");
        for (i=0; i<=localStorage.length-1; i++)
        {  
            key = localStorage.key(i);  
            value = localStorage.getItem(key);
            document.write("<p>("+key+", "+value+")</p>");
        }
    }
</script>
</body>
</html>

Timing Events

To time events in Android we can use android.os.Handler.
Basically, a Handler let's you send events to a threads message queue when you want.
You also get to specify an object of type Runnable to handle the event that was sent.
For this application, we will also test out an Android SeekBar, and related events.
To begin, we create a new Android project, and edit the main.xml layout in the Android Layout Editor so that it looks like:
The first widget is a SeekBar, then we have a TextView which has the value of the SeekBar, and finally we have a button with Wait For Message on it.
We positioned things and put things on the labels, buttons, and seek bars using the properties editor.
When we click the button, it will wait the number of seconds as given by the seek bar before displaying an AlertDialog.

Java Code for Timing Events Demo.

package org.pollett.TimerTest;

import org.pollett.TimerTest.R;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.Button;
import android.view.View;
import android.view.View.OnClickListener;
import android.os.Handler;



public class TimerTest extends Activity {
    Handler handler = new Handler(); //used to set up a delayed callback
    SeekBar seekBar; //object associated with SeekBar on our Layour
    TextView progressLabel; //object associated with our TextView label
    AlertDialog alertDialog; //object used to hold our Alert

    //Runnable object called after delay via Handler
    Runnable alertTask = new Runnable() {
        public void run() {
            alertDialog.show();
        }
    };


    
    /** 
        Called when the activity is first created. 
        Sets up all our the event listeners used in our example
    */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
  
        //set up the seekBar events to modify the label value
        progressLabel  = (TextView)this.findViewById(R.id.TextView01);
        seekBar = (SeekBar)this.findViewById(R.id.SeekBar01);
        
        seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			public void onProgressChanged(SeekBar seekBar, int progress,
					boolean fromUser) {
            	progressLabel.setText(""+progress);
				
			}
        	public void onStartTrackingTouch(SeekBar seekBar) {	
        		//we're not doing anything here
			}

			public void onStopTrackingTouch(SeekBar seekBar) {
        		//we're not doing anything here
			}


        });

        //set up our Alert Dialog but don't display it yet
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setMessage("You've waited long enough!").setCancelable(true);
        alertDialog = builder.create();
        alertDialog.setButton("OK", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
                return;
        } });

        // set up button, when button is clicked, use handler to schedule a task
        Button waitButton = (Button)this.findViewById(R.id.Button01);	    
        waitButton.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                handler.removeCallbacks(alertTask);
                handler.postDelayed(alertTask, seekBar.getProgress()*1000);
	    }
        });        
    }    
}

Quiz

Which of the following is true?

One parameter of the iOS's willAnimateRotationToInterfaceOrientation method controls whether or not the rotation is animated.
The SQLiteOpenHelper class is a concrete class with many useful methods for executing SQL on Android.
Android SharedPreferences get stored in the file system as xml files.

Timing on the iPhone

For iPhone, the class NSTimer can be used to achieve an effect similar to that for which we used android.os.Handler on Android.
To illustrate this we will create a simple app with a button on it.
When the button is clicked there will be a five second delay and then a dialog will appear.
To begin, we create a new view-based application, then edit the ViewController's xib file so that the view has a button on it...

The Interface

@interface NSTimerDemoViewController : UIViewController {
	NSTimer *timer;
}
-(void) delayedResponse:(NSTimer*)theTimer;
-(IBAction) buttonPressed: (id) sender;
@end

New code in the Controller

-(IBAction) buttonPressed:(id) sender
{
	timer = [NSTimer scheduledTimerWithTimeInterval: 5.0 target:self 
		selector:@selector(delayedResponse:) userInfo:nil repeats:NO];


}

-(void) delayedResponse:(NSTimer*)theTimer {
	UIAlertView *alert = [[UIAlertView alloc]
            initWithTitle:@"Button Pressed -- Took A while" 
	    message:@"You pressed the button, but I was napping" 
	    delegate:nil 
	    cancelButtonTitle:@"Yep, I did" 
	    otherButtonTitles:nil];
	[alert show];
	[alert release];
}

After writing the above code, we connect the button up to buttonPressed in interface builder and the program should work.

Timing in Javascript

Javascript supports Timers by using either the functions setInterval (repeating) or setTimeout (fires once).

For example,

setTimeout(myCallback, repeatTimeInMilliSec);
// myCallback is the Javascript function you would like called

To stop the timer you can use clearTimeout/clearInterval.

Multiview Applications

We are now going to consider iPhone Applications that have more than one view.
An example of using multiviews is a utility application such as the Stock application that ships with the iPhone.
This application has a primary view that displays current stock prices.
If one clicks the 'i' in the lower right corner of this view it displays a second view which allows one to picks which stocks to follow and what format quotes should be in.
Another kind of multiview application is one involving a tab bar at the bottom of the screen.
For example, the phone application has a tab bar with Favorites, Recents, Contacts, Keypad, and Voicemail on it. Select one of these switched between views.
The Mail app uses a third kind of multiview where one has a navigation bar at the top of the screen to switch between views.

Creating Our View Controller and Nib Files

A Empty Application comes with an AppDelegate.h and AppDelegate.m, and under supporting files we have main.m, ColorViews-Info.plist, and ColorViews-prefix.pch.
Everything else we have to create ourselves..
The first thing we are going to do is to add the UIViewController subclasses for our two views.
To do this we go to XCode toolbar select New File... from the File menu.
We use the UIViewController template (unchecking "With Xib for user interface") under the Cocoa Touch Class to set up these controllers and give them the names: SwitchViewController, YellowViewController, and BlueViewController.
Next we use the View XIB template under File -- New and selecting User Interface rather than Cocoa Touch to create two views: BlueView.xib and YellowView.xib
Finally, we start hooking these files together.

Modifying the App Delegate Header

We next modify the header class of multiview app delegate class as follows:

@class SwitchViewController;

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) SwitchViewController * switchViewController;

@end

Basically, what we done is added an outlet for our SwitchViewController. This will serve as a hook into the new views we've created.

Modifying the App Delegate Implementation

We next modify the implementation file as follows:

#import "AppDelegate.h"
#import "SwitchViewController.h"
@implementation AppDelegate

@synthesize window = _window;
@synthesize switchViewController;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.switchViewController = [[SwitchViewController alloc] initWithNibName:@"SwitchView" bundle:nil];
    UIView *switchView = self.switchViewController.view;
    CGRect switchViewFrame = switchView.frame;
    switchViewFrame.origin.y += [UIApplication sharedApplication].statusBarFrame.size.height;
    switchView.frame = switchViewFrame;
    [self.window addSubview:switchView];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

Besides adding the appropriate @synthesize, the main thing we change is to add a sub view to the window.

SwitchViewController.h

Now we start writing our controllers:

#import <UIKit/UIKit.h>

@class BlueViewController; //similar to declaring something external in C
@class YellowViewController;

@interface SwitchViewController : UIViewController
@property (strong, nonatomic) YellowViewController *yellowViewController;
@property (strong, nonatomic) BlueViewController *blueViewController;

-(IBAction) switchViews:(id) sender;

@end

Local Storage, Tasks

Outline