More on Multiview Applications

• Last day, I had started talking about Multiview applications, when I killed my laptop.
• I went over some apps already in the iPhone which use them, such as stock quotes, and the Mail.app.
• I also demo'd the app we are going to build today.
• 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.

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 three views: SwitchView.xib, 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
  

Changing the First Responder

• We next want to set the First Responder for our SwitchView.xib.
• By default it is is NSObject, we want it to be SwitchViewController.
• To do this we click on File's Owner in Interface Builder. Then we click on the identity inspector in the right pane.
• At the the top it will say Custom Class and you should see NSObject. Change this to SwitchViewController.

Adding a Toolbar

• SwitchView will be the view on which BlueView and YellowView live.
• To make the switch between the two views we use a toolbar, so we go to Interface Builder and drag one over onto our SwitchView.
• Single-click the SwitchView in IB, then single-click the toolbar button, and then single-click the toolbar button again. This selects the toolbar button
• Next control drag the button to File's Owner and select switchViews: (so hook up the action).
• Finally, we want to connect the SwitchViewController's outlet to the view. To do this we control drag the File's Owner to the View in IB and select view.

SwitchViewController Implementation

#import "SwitchViewController.h"
#import "BlueViewController.h"
#import "YellowViewController.h"

@implementation SwitchViewController

@synthesize blueViewController;
@synthesize yellowViewController;

// ...
- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc that aren't in use.

    if(self.blueViewController.view.superview == nil) {
        self.blueViewController = nil;
    } else {
        self.yellowViewController = nil;
    }
}

// ...

- (void)viewDidLoad {
        // set up blue controller
	self.blueViewController = [[BlueViewController alloc] 
           initWithNibName:@"BlueView" bundle:nil];
        // initial use blue view
	[self.view insertSubview:self.blueViewController.view atIndex: 0]; 
             //index 0 behind everything
	[super viewDidLoad];
}

- (void) switchViews:(id)sender
{
	if(self.yellowViewController.view.superview == nil)
	{
        if(self.yellowViewController == nil) {
            self.yellowViewController = [[YellowViewController alloc] 
                initWithNibName:@"YellowView" bundle:nil];
        }
		[self.blueViewController.view removeFromSuperview];
		[self.view insertSubview:self.yellowViewController.view atIndex:0];
	} else {

        //check if not Blue View
        if(self.blueViewController == nil) {
            self.blueViewController = [[BlueViewController alloc] 
                initWithNibName:@"BlueView" bundle:nil];
        }
        [self.yellowViewController.view removeFromSuperview];
        [self.view insertSubview:self.blueViewController.view atIndex:0];

    }
	
}

//... rest of boilerplate code unchanged



@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. We add a button to this view and we change this views background color to be blue in Interface Builder.
• We 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 need to adjust the size of the BlueView because it will live above the toolbar in SwitchView. To do this, we go to Attribute Inspector and under Simulated Metrics, we go to the Bottom Bar drop down, and select Toolbar.
• We lastly connect BlueViewController view outlet with our view by control dragging from File's Owner to the view
• We can do the equivalent thing for the YellowView.xib.

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];
  }
  //... unchanged boiler plate
  
  @end
  

Animating the Transition

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

  - (void) switchViews:(id)sender
  {
          [UIView beginAnimations:@"View Flip" context:nil];
  	[UIView setAnimationDuration:1.25];
  	// next control speed at begin and end of animation
  	[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
      
  	if(self.yellowViewController.view.superview == nil)
  	{
          if(self.yellowViewController == nil) {
              self.yellowViewController = [[YellowViewController alloc] 
                  initWithNibName:@"YellowView" bundle:nil];
          }
          [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache: YES];
  		/*
           Other possibilities:
           UIViewAnimationTransitionFlipFromLeft
           UIViewAnimationTransitionCurlUp
           UIViewAnimationTransitionCurlDown		 
           */        
  
  		[self.blueViewController.view removeFromSuperview];
  		[self.view insertSubview:self.yellowViewController.view atIndex:0];
  	} else {
  
          //check if not Blue View
          if(self.blueViewController == nil) {
              self.blueViewController = [[BlueViewController alloc] 
                  initWithNibName:@"BlueView" bundle:nil];
          }
          [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.view cache: YES];
          
          [self.yellowViewController.view removeFromSuperview];
          [self.view insertSubview:self.blueViewController.view atIndex:0];
  
      }
  
  	[UIView commitAnimations];
  }
  

Overview of Networking

• Over the next couple days we are going to look at how to write networking Apps, both in Android and on the iPhone.
• A group of interconnected computers is a network.
• The main network you are probably familiar with, the internet, is based on a layered architecture called the TCP/IP stack.
• It consists of the following layers:
  • Link Layer -- this layer is concerned with how the medium through which bits are actually sent is manipulated to send 1 and 0s (physical layer) as well as concerned with protocols to communicate between hosts in a local area network. For example, how signalling is done on a wire, radio, etc; you might use ARP and DHCP to map between IP and physical address of a host or to assign it.
  • Internet Layer -- consists of the internet protocol (IP) used to send packets between hosts on the network.
  • Transport Layer -- consists of a protocols such as UDP or TCP to allows connections over which data can be sent between hosts on the network. Uses IP underneath to implement the connections
  • Application Layer -- consist of protocols like HTTP, FTP, SMTP, IMAP, POP, DNS, SSH, etc. which use TCP or UDP to give functionality to some application like a browser, mail client etc.

Clients and Servers

• We will mainly be concerned with application protocol which are built on top of the transport layer.
• One common model used in the transport layer is that of client and server machines on a network.
• A server machine is identified on the internet by some IP address 130.65.86.46. Often we can find this IP by using a domain name lookup based on an easy to remember name such as www.cs.sjsu.edu. To do this we send this name to a domain name system (DNS) server that we know the IP address of, and that DNS server send back a record containing the IP address of the machine we are looking for.
• In the server-client set-up, the server at a given IP address has processes running in the background called daemons which are listening all the time for connection requests from clients on a particular port number.
• Port numbers are two bytes, some commonly used numbers are 80 (HTTP), 443 (HTTPS), 20 and 21 (FTP), 22 (SSH), 25 (SMTP).
• Once a connection request comes into the server on a given port, the corresponding daemon can choose to accept it, and if so, a connection is established. Then the application layer protocol is typically used for the client to get or send data to the server.
• For example if the client was a web browser, it might connect to port 80 on machine 130.65.86.46 and transmit to that server the following bytes:

  GET / HTTP/1.0 newline
  newline
  

• The server might then respond by transmitting back to the client:

  HTTP/1.1 200 OK
  Date: Wed, 07 Oct 2009 18:11:01 GMT
  Server: Apache/2.2.0 (Fedora)
  Last-Modified: Mon, 17 Nov 2008 23:09:56 GMT
  ETag: "f5678-2723-ad5ef900"
  Accept-Ranges: bytes
  Content-Length: 10019
  Connection: close
  Content-Type: text/html
  
  ...CS Department homepage
  

Checking Network Status

• Android provides utilities for determining the device configuration and status of the network service.
• This is typically done using the ConnectivityManager class which is used to determine whether there is any network connectivity and also to get notifications of changes to the network.
• As an example, after importing android.net.*; android.content.*; android.util.*; the onStart() method of a subclass of Activity could use this class as follows:

  @Override
  public void onStart()
  {
     super.onStart();
     ConnectivityManager cMgr = (ConnectivityManager)
        this.getSystemService(Context.CONNECTIVITY_SERVICE);
     NetworkInfo netInfo = cMgr.getActiveNetworkInfo();
     this.status.setText(netInfo.toString());
  }
  

• The output will say things like: type: Mobile, state: CONNECTED/CONNECTED, reason...
• The netInfo object has methods like isAvailable, isConnected it also has a getState method.
• Once you are connected you can use the IP network.
• In order to get this to work you need to have the correct permissions set in the AndroidManifest.xml:

  <uses-permission android:name="android.permission.INTERNET"></uses-permission>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE">
  The first is for general networking, the second is for the actual info we have above.