pushpop demo walkthru · xcode will create the project and pop up a window like (=sc...

PushPop Demo WalkThruCode: See PushPop.zip on the CS193P website for the completed Demo Code.

Goal: Create the two Screens below as was done in Lecture #7. My goal here is to step through the video slowly and show all the screen details of Xcode and Interface Builder. A Developer just starting out will learn about the basic function of these programs while making this demo work.

Development Environment: OS X 10.5.6, iPhone SDK 2.2.1

(=SC Screen1 and Screen2 captures)

PushAndPop Demo from Stanford iPhone Class Lecture #7 - V 0.1

1

1. Start a New Xcode project called "PushAndPop"

1.1 Start Xcode, Click (on Menu bar at the top of the screen) File>New Project.1.2 Choose the iPhone OS - Application in the left ( or side) pane. Then click on the "Window Based Application " icon (scroll down if needed so you see it), Click the "Choose" button. (=SC CreateProject1)

1.3 In the new popup window type "PushAndPop" in the “Save As:” field and then click on the "Save" button. Note that you can also change the directory you want the project created in by using the Directory Selection field of the popup. (=SC CreateProject2)

Xcode will create the project and pop up a window like (=SC CreateProject3)


2

LeftPaneor“Sidebar” Edit

Pane

MainXcode Window

2. Add a Navigation Bar on the First Screen

2.1 PushAndPopAppDelegate.h and .m were created and are visible in the left pane (sidebar). Click on PushAndPop right under the Groups & Files label. You will see all the created files in the upper right pane of the window. Click on PushAndPopAppDelegate.h and you will see it open in the lower left pane (Edit pane) in an editor. (=SC Code2)

2.2 In the @interface section of PushAndPopAppDelegate.h add this code just after the "window" ivar line. (No screenshot for the .h file edit)

UINavigationController *navigationController; //2 2.3 Switch to PushAndPopAppDelegate.m by clicking on it in the upper right pane and then in the editor pane add this code to the applicationDidFinishLaunching:(UIApplication *) application method

// next 2 lines added in Step 2 navigationController = [[UINavigationController alloc] init]; [window addSubview:navigationController.view]; 2.4 We need to release the memory we used in 2.3 so in the dealloc method add

[navigationController release]; //2


3

Your screen will look like: (=SC Code3)

2.5 Now if you Build and run your project by clicking the "Build & Go" icon at the top of the Xcode window you will see the “Save Before Building?” popup. Click the "Save All" button. Note: if the “Build & Go” icon does not appear on your toolbar you can right-click on the toolbar choose “Customize Toolbar...” in the pull down menu and drag the icon to the Xcode toolbar. Click the “Done” button when you have changed the toolbar as you want. (=SC Code4)


4

2.6 The project should compile, start the iPhone Simulator and then start your program. You should see the blank Navigation bar at the top and a blank white screen below it. We will next add a view in the white area. (=SC Code5)

Click on the “Home” button on the iPhone Simulator to stop your application.


5

3. Add a RootViewController to the screen containing a Button

3.1 Go to Menu bar of Xcode and choose File>NewFile. Choose (click) "Cocoa Touch Classes" in the left pane and then the "UIViewController subclass". Then click the "Next" button. (=SC Code6)

3.2 When the "New File” popup comes up change the "File Name:" to "FirstViewController.m", make sure the "Also create FirstViewController.h" is checked, then click the "Finish" Button. (=SC Code7)


6

You will see (=SC Code8)

3.3 Apple likes each View Controller to also have it's own Nib (now called .xib) file. Again go to the Menu bar of Xcode and choose File>New File. In the Template popup choose Iphone OS>User Interfaces in the upper left pane and the "View XIB" icon in the upper right pane. Then click the "Next" Button. (=SC Code9)


7

3.4 Change the "File Name:" to “FirstView.xib” and click the "Finish" Button. (=SC Code10 =SC Code11)

3.5 To add a button that will have an action to this new FirstView Controller screen we click on FirstViewController.h in the upper left Xcode pane and then add after the @interface section the code

- (IBAction)push:(id)sender; //3

We do this so the Interface Builder program (IB) will know we have a push:method to connect to our new button. (=SC Code12)


8

3.6 We need to add the actual push: method to FirstViewController.m. Choose the file in the upper left Xcode pane and it will appear in the lower right edit pane. Add to the @implementation section the code

//3 added this method- (IBAction)push:(id)sender //3{

}


9

(=SC Code13)

3.7 We will now use IB to connect up the push: method to a button on the screen. Double click on the FirstView.xib in the upper left pane of Xcode. IB will start and you

should see something like (=SC Code14 really16)

Find the "FirstView.xib" window, the "View" window, the "Library" window and the "Inspector" window. These windows remember their position and state from last time they were open. Drag them around so you can see all of them. You may also need to the Menu bar of IB and choose "Tools>Inspector" to get the window to appear.


10

3.8 Click on "File's Owner" icon in the "FirstView.xib" window and then click on the "Object Identity" window. Note that the "FirstView.xib" window can show icons or a list (like any Finder window) and you can change the presentation by clicking on the "View Mode" icons at the top of the window. For now choose the Icons view. Also the Inspector window can have four different names depending on which tab is selected at the top of

the window. You want to click the fourth tab so you see the "Object Identity" view in the window. (=SC Code 15 =SC Code 16)

3.9 In the "Object Identity" window's "Class" text box type in "FirstViewController" or click on the pulldown arrow on the right and choose FirstViewController. Click on


11

another of the windowʼs tabs and then click on the fourth tab again to insure the entry is accepted. (=SC Code17 fs)

3.10 We next need to set up the outlet between the push: Class and the View. Hold down the "Control" key and left click on the "File's Owner" Icon in the FirstView.xib window and while continuing to hold "Control - Left Click" drag the blue line that appears to the "View" icon. The "View" icon will highlight at this point. Release the


12

mouse button and the "Control" key and a dark gray box will popup. Click on "view" in this box.

(=SC Code18 fs =SC Code19 fs)

3.11 Now go click on the Second tab of the Inspector window and the window's title changes to "FirstViewController Connections". In this connections tab you will see that in the Outlets section that "view" and "View" are now connected. (=SC Code20 fs)

You could click the "X" in the "View" oval to disconnect them and then reconnect them by following the instructions in 3.10. If you see something else in the Connection inspector make sure that the "File's Owner" icon is still selected in the "FirstView.xib" Window. As you select different icons in this window the Inspector window will change to show the properties of the selected object. (See screenshot Code20 above)


13

4. Add a button to the FirstView UI View.4.1 Click on the "View" Window and then in the "Library" Window make sure "Objects" is selected at the top. In the middle pane of the “Library" window scroll down until you see the "Round Rect Button" (a subclass of UIButton) and click on it and hold down the mouse button while dragging the "Round Rect Button" into the center of the "View" window. The you release the mouse button to add the "Round Rect Button" to the view. (=SC Code22 fs)

4.2 Click the "Build & Go" icon in the main Xcode window (as in 2.5 and 2.6 above). If a "Save Before Building?" window pops up click the "Save All" button. "Your program will compile and run in the Simulator and again show just the gray bar and white screen again (as in 2.6). I had to do this “Build&Go” so that all the above changes were saved so the Xcode and IB files could see each other.


14

4.3 Double click on the button in the "View" window. This opens a text field in the button where you should enter the string "Push" and hit enter to close the entry field. Then with the curser over this button Control-Click and hold the the mouse button and drag a blue line to the "File's Owner" line (or icon) in the "FirstView.xib" window. Release the button and choose "push" in the gray box. You can see in the screenshot that I have switched the "FirstView.xib" window to show lines instead of icons. This change is just so you can see this form of the window. (=SC Code23 fs)

If this works you will see the "Touch Up Inside" event connected to the "File's Owner:push" in the "Events" subpane of the "Button Connections" window (the second tab of the Inspector window). (=SC Code24 fs)

5. Take a Break!


15

6. Give the FirstViewController view a Title and Hook it up so it will Display

6.1 In Xcode's main window select "FirstViewController.m" and then in the edit pane remove the comments from around the "initWithNibName" method. Then under the "Custom initialization" comment add the line

self.title = @"First"; //6 The "FirstViewController.m" will now look like (=SC Code25)

6.2 In Xcode's main window select "PushAndPopAppDelegate.m" in the side pane and then in the edit pane we will add after the #import statement

#import "FirstViewController.h" //6

Next inside the "applicationDidFinishLaunching:" method we need to push a view on the navigation controller. After the first line of code we add

FirstViewController *viewController = [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil]; //6 -create [navigationController pushViewController:viewController animated:NO]; //6 - push view on navigation stack [viewController release]; //6 - release variable now retained by navigation controller


16

(note that lines have wrapped) and the PushAndPopAppDelegate.m file will look like (=SC Code26)

6.3 Click the "Build & Go" icon in the main Xcode window (as in 2.5 and 2.6 above). When the "Save Before Building?" window pops up click the "Save All" button. "Your program will compile and run in the Simulator and you should see (=SC Code27)

You should see "First" as the Tile and the "Push" Button.


17

7. Create a SecondViewController Subclass (.h, .m, .xib)

7.1 We need someplace to go when the "Push” is pressed an generates an event. We will create another view subclass called "SecondViewController" with an Xib file called "SecondView. Steps 3.1 to 6.3 will be followed using "SecondViewController" instead of "FirstViewController" (for the .m and .h files) and "SecondView" instead of "FirstView" (for the .xib file). We will then add essentially the same code we did above substituting the UILabel field for the "Round Rect Button" (the Label will not need the "push:" method).

7.2 Create the "SecondViewController" view subclass (.h and .m) as we did in steps 3 to 3.2 above for FirstViewController. In Short:- Go to the Xcode Menu and choose File>New File...- In the “New File” popup click “iPhone OS” - “Cocoa Touch Classes” then click the icon

“ UIViewController subclass” and click the “Next” button.- In the next popup type “SecondViewController.m” in the “File Name:” text Field, make

sure the create .h file box is checked and the PushAndPop target is selected and click the “Finish” button.

- The SecondViewController.h and SecondViewController.m files should appear in the Xcode main windowʼs left pane.

7.3 Give the SecondView a title to display (as in step 6.1)- In Xcode's main window select "SecondViewController.m" and then in the edit pane remove the comments from around the "initWithNibName" method. Then under the "Custom initialization" comment add the line

self.title = @"Second"; //7 The "SecondViewController.m" will now look like (=SC Code28)


18

7.3 Create the "SecondView.xib" as we did in steps 3.3 -> 3.4 and 3.8 -> 3.9 above for FirstView.xib.- go to the Menu bar of Xcode and choose File>New File. In the Template popup choose

Iphone OS>User Interfaces in the upper left pane and the "View XIB" icon in the upper right pane. Then click the "Next" Button.

- Change the "File Name:" to “SecondView.xib” and click the "Finish" Button.- Double click on SecondView.xib in Xcodeʼs main window left pane which will start IB.

Select the “Fileʼs Owner” icon in the SecondView.xib window. Select the fourth tab in the inspector window and set the “Class:” text field to “SecondViewController”. (=SC Code29)

- Set the connection from the SecondViewController class to the view by Control-Clicking on the “Fileʼs Owner” icon in the SecondView.xib and dragging the blue line to the “View icon in the SecondView.xib and releasing the Conrol-Click and then clicking on the “view” in the black popup. You can check the connection was made by clicking on the second tab in the Inspector window and seeing the “view”->”View” connection in the Outlet pane. (=SC Code30)


19

7.4 Add the text Label to the “View” window by selecting “Label” from the “Library” window and dragging it into the “View” window. Double click on the “Label” string and change it to “Something...” and hit enter. You can make the text bigger by selecting it again and changing the Fontsize: Minimum to 45 and Layout to “Centered in the first tab (View Attributes). In the IB Menu choose File>Save. (=SC Code32)


20

7.5 Add code to push the SecondView initializing code in the FirstViewController this time instead of PushAndPopAppDelegate as the SecondViewController comes from the FirstViewController.- Add the needed #import statement after the existing #import in FirstViewController.m #import "SecondViewController.h" //7

- Add the code needed to push the SecondView on the FirstViewController navigation stack in FirstViewController.m (lines wrapped) (=SC Code31)

//3 lines added for step 7 SecondViewController *viewController = [[SecondViewController alloc] initWithNibName:@"SecondView" bundle:nil]; [self.navigationController pushViewController:viewController animated:YES]; [viewController release]; // release local memory as now retained in navigation controller

Animated = YES in the pushViewController: because this is the second screen. It is set to No for FirstView in step 6.2 because that was the first displayed application screen.


21

7.6 Click the “Build & Go” icon in the Xcode toolbar, Click “Save all” when the “Save Before Building?” pops up. Your application will compile and launch in the iPhone Simulator. Click on the “Push” button to go to the SecondView screen. Click on the “Back” button in the Navigation Bar to return to the FirstView screen.

You have completed the Walkthru! I hope you have learned something about Xcode, Interface Builder and Navigation Bars.


22

pushpop demo walkthru · xcode will create the project and pop up a window like (=sc...

Documents