Outline

• Timing on the iPhone
• Quiz
• iPhone Multiview Applications

Introduction

• Last week we introduced SQLite which is a library which is available for both iPhone and Android.
• We talked about how to time events on Android using android.os.Handler.
• We also talked about some widgets we had not seen before on Android.
• Today, we will talk about how to time events on iPhone and how to do MultiView apps on iPhone.

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.

Quiz

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.

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 Window-Based Application.

Creating Our View Controller and Nib Files

• A Window-based Application just has a MainWindow.xib file (no other NIB files).
• It also only has its class folder the application delegate class.
• The first thing we are going to do is to add the UIViewController subclasses for our two views.
• To do this we go to Groups & Files and select New File... from the File menu.
• We use the UIViewController template 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 Interface Builder > New 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 multiviewdemoAppDelegate : NSObject  {
      IBOutlet UIWindow *window;
      IBOutlet SwitchViewController *switchViewController;
  }
  
  @property (nonatomic, retain) IBOutlet UIWindow *window;
  @property (nonatomic, retain) IBOutlet 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 "multiviewdemoAppDelegate.h"
  #import "SwitchViewController.h"
  
  @implementation multiviewdemoAppDelegate
  
  @synthesize window;
  @synthesize switchViewController;
  
  - (void)applicationDidFinishLaunching:(UIApplication *)application {    
  
      // Override point for customization after application launch
      [window addSubview:switchViewController.view];
      [window makeKeyAndVisible];
  }
  
  
  - (void)dealloc {
      [window release];
      [switchViewController release];
      [super dealloc];
  }
  
  
  @end
  
  

• 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 {
  	YellowViewController *yellowViewController;
  	BlueViewController *blueViewController;
  	
  }
  
  @property (retain, nonatomic) YellowViewController *yellowViewController;
  @property (retain, nonatomic) BlueViewController *blueViewController;
  
  -(IBAction) switchViews:(id) sender;
  
  @end
  

Implementing Content Views

• First, we modify the BlueViewController.h and YellowViewController.h
• This is essentially the same in both cases, so I am only showing the blue case:

  #import <UIKit/UIKit.h>
  
  
  @interface BlueViewController : UIViewController {
  }
  -(IBAction) blueButtonPressed: (id) sender;
  
  @end
  
  

• Next we want to open the BlueView.xib file and click on File's Owner, then open the Identity Inspector. We want to choose this to be BlueViewController.
• At this point, we can click on the button in our view in the middle pane of IB, open up the connection inspector and drag the Touch Up Inside event over to the File's Owner and select blueButtonPressed.
• We can do the equivalent thing for the YellowView.xib.
• We go next to MainWindow.xib. From the IB Library, we drag over a View Controller into MainWindow.xib. We click it once, then under inspector we want to set its class to be SwitchViewController.

BlueViewController Implementation

• The implementation of the YellowViewController is about the same so we omit it.

  #import "BlueViewController.h"
  
  
  @implementation BlueViewController
  
  -(IBAction) blueButtonPressed:(id) sender
  {
  	UIAlertView *alert = [[UIAlertView alloc]
  		initWithTitle:@"Blue View Button Pressed" 
  		message:@"You pressed the button on the blue view" 
  		delegate:nil 
  	    cancelButtonTitle:@"Yep, I did" 
  		otherButtonTitles:nil];
  	[alert show];
  	[alert release];
  }
  //... unchanged boiler plate
  
  @end
  

Animating the Transition

• To animate the transition we can modify switchViews in the following way:

  - (void) switchViews:(id)sender
  {
  	// load Yellow nib first time button is pressed
  	if(self.yellowViewController == nil)
  	{
  		YellowViewController *yellowController =
  		   [[YellowViewController alloc] 
                       initWithNibName:@"YellowView" bundle:nil];
  		self.yellowViewController = yellowController;
  		[yellowController release];
  	}
  	
  	[UIView beginAnimations:@"View Flip" context:nil];
  	[UIView setAnimationDuration:1.25];
  	// next control speed at begin and end of animation
  	[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
  	
  	UIViewController *coming = nil;
  	UIViewController *going = nil;
  	UIViewAnimationTransition transition;
  	
  	if(self.blueViewController.view.superview == nil)
  	{
  		coming = blueViewController;
  		going = yellowViewController;
  		transition = UIViewAnimationTransitionFlipFromLeft;
  		/*
  		   Other possibilities:
  		   UIViewAnimationTransitionFlipFromRight
  		   UIViewAnimationTransitionCurlUp
  		   UIViewAnimationTransitionCurlDown		 
  		*/
  	}
  	else
  	{
  		coming = yellowViewController;
  		going = blueViewController;
  		transition = UIViewAnimationTransitionFlipFromRight;
  	}
  	
  	//cache makes an image of view in cache and 
          //then animate image rather than redraw view
  	[UIView setAnimationTransition:transition forView:self.view cache: YES];
  	[coming viewWillAppear:YES];
  	[going viewWillDisappear:YES];
  	[going.view removeFromSuperview];
  	[self.view insertSubview:coming.view atIndex:0];
  	[going viewDidDisappear:YES];
  	[coming viewDidAppear:YES];
  	[UIView commitAnimations];
  	
  }