More on Multiview Applications

Before the midterm we were had started talking about Multiview application on iOS.
I went over some apps already in the iPhone which use them, such as stock quotes, and the Mail.app.
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 Single-View Application. (Book says use an Empty Application - but this option is no longer available in iOS8).

Creating Our View Controller and Nib Files

After creating our "Single-View application", we click on the Main storyboard, then File Inspector and uncheck Use Auto Layout and set it to be for iPhone.
The next 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.
Under iOS Source, we choose Cocoa Touch Class, then click next. On the next screen we give the class a name BlueViewController. Using the dropdown we set it as a subclass of UIViewController (make sure Also create XIB unchecked). the UIViewController template (unchecking "With Xib for user interface"). We click next again, and make sure we check that this has at list our app as a target.
In the same fashion we create a YellowViewController.
Let's start hooking these files together.

The Default View Controller Initial Pass

If this were an iOS 7 rather than iOS 8 application we would need to modify the App Delegate class application: method so that it just returns YES. For iOS 8 we don't need to touch it.
To start setting this up, we click on the ViewController.m file.

We add to the default ViewController category some properties for our two controllers. We also add a switchView method:

#import "ViewController.h"

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

@interface ViewController ()

@property (strong, nonatomic) YellowViewController *yellowViewController;
@property (strong, nonatomic) BlueViewController *blueViewController;

@end

@implementation ViewController

-(IBAction)switchViews:(id)sender
{
}
@end

Adding a Toolbar

SwitchView will be the view on which the two other controllers 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 the SwitchViewController and select switchViews: (so hook up the action).

ViewController Implementation Take Two

#import "ViewController.h"

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

@interface ViewController ()

@property (strong, nonatomic) YellowViewController *yellowViewController;
@property (strong, nonatomic) BlueViewController *blueViewController;

@end

@implementation ViewController

-(IBAction)switchViews:(id)sender
{
    if(!self.yellowViewController.view.superview) {
        if(!self.yellowViewController) {
            self.yellowViewController = [self.storyboard
                instantiateViewControllerWithIdentifier:@"Yellow"];
        }
        [self.blueViewController.view removeFromSuperview];
        [self.view insertSubview:self.yellowViewController.view atIndex:0];
    } else {
        if(!self.blueViewController) {
            self.blueViewController = [self.storyboard
                                         instantiateViewControllerWithIdentifier:@"Blue"];
        }
        [self.yellowViewController.view removeFromSuperview];
        [self.view insertSubview:self.blueViewController.view atIndex:0];
    }
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.blueViewController = [self.storyboard
                               instantiateViewControllerWithIdentifier:@"Blue"];
    // initial use blue view
    [self.view insertSubview:self.blueViewController.view atIndex: 0];
    //index 0 behind everything
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
    if(!self.blueViewController.view.superview) {
        self.blueViewController = nil;
    } else {
        self.yellowViewController = nil;
    }
}

@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

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

Adding Controller's To Out Main Storyboard

We next go to our main storyboard.
From the Object Library we drag out a View Controller
We click on it in the storyboard and switch to Identity Inspector and using the dropdown we change the class to BlueViewController.
Under Identity StoryBoard Id, we set it to Blue.
We then go to the attribute inspector change the background color to blue.
We drag out a button, rename it to Press me and hook it up with the blueButtonPressed action.
We do the same thing to add a Yellow View Controller to our storyboard.
Notice the ViewController with the arrow next to it, will be the initial view controller when the app is launched.

Animating the Transition

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

-(IBAction)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) {
        if(!self.yellowViewController) {
            self.yellowViewController = [self.storyboard
                instantiateViewControllerWithIdentifier:@"Yellow"];
        }
        [self.blueViewController.view removeFromSuperview];
        [self.view insertSubview:self.yellowViewController.view atIndex:0];
        [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache: YES];
        /*
         Other possibilities:
         UIViewAnimationTransitionFlipFromLeft
         UIViewAnimationTransitionCurlUp
         UIViewAnimationTransitionCurlDown
         */
    } else {
        if(!self.blueViewController) {
            self.blueViewController = [self.storyboard
                                         instantiateViewControllerWithIdentifier:@"Blue"];
        }
        [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.view cache: YES];

        [self.yellowViewController.view removeFromSuperview];
        [self.view insertSubview:self.blueViewController.view atIndex:0];
    }
	[UIView commitAnimations];
}

Quiz

Which of the following is true?

getResources().getConfiguration().orientation could be used to get the orientation of the current context in Android.
On Android, we use the C function call sqlite3_open("/path/to/database", &database); to open a sqlite database.
A Runnable interface is supposed to have a postDelayed method to indicate an event will be run in the future.

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.

Multiview Apps, Networking Android

Outline