Local Storage, Tasks

CS185c

Chris Pollett

Oct 4, 2014

Outline

Local Storage
Scheduling Tasks Android

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 layout of this app in the Android Layout Editor so that it looks like:
We can set properties of the SeekBar on the lower right property pane in Eclipse and above it we have an outline view.
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.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 Layout
    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.activity_timer_test);
  
        //set up the seekBar events to modify the label value
        progressLabel  = (TextView)this.findViewById(R.id.textView1);
        seekBar = (SeekBar)this.findViewById(R.id.seekBar1);
        
        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(AlertDialog.BUTTON_POSITIVE, "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.button1);	    
        waitButton.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                handler.removeCallbacks(alertTask);
                handler.postDelayed(alertTask, seekBar.getProgress()*1000);
	    }
        });        
    }    
}

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 Main Storyboard file and Add Missing Constraints so that the view has a button on it...

The Interface

Here is the code of our interface. Notice since timer is not a property but a field we put it in braces.

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController {
    NSTimer *timer;
}
-(void) delayedResponse:(NSTimer*)theTimer;
-(IBAction) buttonPressed: (id) sender;

@end

Implementation

Here is the new code in the Controller. To complete the project we need to control-drag to hook up button pressed with the button in the storyboard.

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

-(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];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

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

@end

Timing in Javascript

Javascript supports Timers by using either the function 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 triple bars icon 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.

More on Multiview Applications

Each multiview application uses a specific controller class from UIKit.
Tab bar interfaces are implemented using the class UITabBarController and navigation interfaces using UINavigationController.
We are going to create a view with a bar on the bottom with the button "Switch Views".
The initial view will have a blue background with a button "Press me" centered on it.
Clicking "Switch Views" will switch to a second view with the same kind of bar on the bottom, but with a button with "Press Me, Too" on it.
One things that is different between these kind of app and those we've considered before is that each view will have its own controller.
To build our switcher, we will first create a new Empty Application.