LEARNING IPAD STORYBOARDS IN OBJ-C

LESSON 1

Rich HeltonRhelton_1@yahoo.com

August 28, 2012

INTRO TO STORYBOARDS

Disclaimer• This training PowerPoint is in no means reproducing

the documents that it may reference.• Which also means that the references may change

at the owners will. • It only provides references to public sites as a

means for the person reading this to do more research and verify any information at their leisure.

• The purpose of this document’s original intent was simply to provide myself a means of walking through various solutions and reference points.

• I offer no personal support of this document and release it “as is” with no commercial intent.

Storyboards -- Apple

• In iOS5, Apple introduced a concept called Storyboards.

• A Storyboard is a visual representation of the user interface of an iOS application.

• See http://developer.apple.com/library/mac/#documentation/General/Conceptual/Devpedia-CocoaApp/Storyboard.html

Storyboards -- Apple• A Storyboard is a type of file that is opened

and designed in Xcode’s Interface Builder.• It provides a visual transition to move from

one View to another while visualizing the coding Controllers and Controls.

• It is a workflow of the iPad application. • The Application must be iOS 5 compliant.

Storyboards – File type• The Storyboard file is a CocoaTouch XIB

(Apple XML) file type for designing in Interface Builder

The Storyboard file in Xcode

Storyboards -- segue

• The segue manages the transitions between the scenes and passes data with a “sender”.

Storyboards -- dock• The dock is used to define outlets and actions

between the view controller and views.

Storyboards -- scene• The iPad can have multiple scenes appear at

once, but the scene is similar to a View.

Running a sample showing navigation

Storyboards – the object• Storyboards are also a UIStoryboard object

that encapsulates the storyborad resource file.

• http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIStoryboard_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40010909-CH1-DontLinkElementID_1

Storyboards – a collection of controllers• Storyboards holds a set of view controllers.• http://developer.apple.com/library/ios/#feat

uredarticles/ViewControllerPGforiPhoneOS/UsingViewControllersinYourApplication/UsingViewControllersinYourApplication.html#//apple_ref/doc/uid/TP40007457-CH6-SW1

Storyboards – a collection of controllers• Storyboards holds a set of view controllers.

Storyboards – A few more notes• I like to think of Storyboard as a visual

workflow, that is stored in a storyboard file as a collection of UIKit components, that communicate to the project’s source.

• This workflow will follow the Architecture of a normal UIKit application.

• UIKit Architecture http://developer.apple.com/library/ios/#DOCUMENTATION/iPhone/Conceptual/iPhoneOSProgrammingGuide/AppArchitecture/AppArchitecture.html

Storyboards – A few more notes

Storyboards – A few more notesAn Application will be made up of many UIKit

components, like UIApplication, UIWindows and various Controllers.

• Storyborads will extend the Controllers, and conatin a collection Views that the code may work with through its flow.

• UIKit has many framework pieces http://developer.apple.com/library/ios/#Documentation/UIKit/Reference/UIKit_Framework/_index.html

Storyboards – A few more notes

WALKING THROUGH ACLASSICSAMPLE

Storyboards Start• Apple has created a good example called

“Your Second iOS App” found at https://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/SecondiOSAppTutorial/Introduction/Introduction.html#//apple_ref/doc/uid/TP40011318-CH1-SW1

We will start with a Master-Detail Project in Xcode

Master-Detail• A master-detail interface displays a master

list and the details for the currently selected item. Like a table view.

• http://en.wikipedia.org/wiki/Master–detail_interface

Xcode overview• https://developer.apple.com/library/ios/#doc

umentation/ToolsLanguages/Conceptual/Xcode4UserGuide/000-About_Xcode/about.html

About Xcode

Create a Storyboard Master-Detail project

It has an iPad and iPhone Storyboard in Universal

Running the blank template already has something …

WHAT WAS JUST BUILT?

Looking at some of the files• All iOS projects will have a group of files that

will be similar, for example, an AppDelegate, a main function, a .plist, and if a UIKit, a Main Controller, and Main View.

• Big Note, since I am working with both iPhone and iPad storyboards, I will start with the iPhone and copy it to the iPad.

Similar files

The plist (Property List)• All iOS projects have a .plist, usually named after

the project, that conains icons, gifs, button graphics, global names and settings for the file, etc.

• This is an XML file but viewed as a Property List which is basically a name-value pair of global properties.

• In game programming, there will likely be many plists that contain many, many references to the stored png or gif files.

• Program icons are also referenced here.

The plist , a reference• A reference can be found at

https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/PropertyLists/QuickStartPlist/QuickStartPlist.html

In our example…

The main function• All C apps, Objective-C apps, C++ apps, and

Console C# programs start with a “main” function.

• In many cases in Objective-C, it will just call the AppDelegate of the project.

Our main function

The AppDelegate Class• The AppDelegate is the class for startup and

shutdown responsibilities. • It will normally have functions defined like

“FinishLaunching” to start the initial View Controller and before shutting down, potentially save state information.

• It is normally derived from the UIKit’s UIApplicationDelegate.

The UIApplicationDelegate• See

https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIApplicationDelegate_Protocol/Reference/Reference.html

• Our program deriving the class in the header:

Our AppDelegate• Notice the “didFinishLaunchingWithOptions”

function launching the Controllers.

The Controllers• All iOS applications are based on the Model-

View-Controller design pattern.• All will also likely be based on the UiKit

windowing framework. • Since we started with a Master-Detail project,

there will be a Master Controller derived from UITableViewController and a Detail Controller derived from UIViewController. These are tables calling their views.

Our Controllers• Here they are:

Our Controllers in the storyboard

A few words about MVC• The Model-View-Controller (MVC):

• http://en.wikipedia.org/wiki/Model–view–controller

A few words about UIKit.h• UIKit is the framework for user interfaces in

iOS. • http://developer.apple.com/library/ios/#doc

umentation/uikit/reference/UIKit_Framework/_index.html#//apple_ref/doc/uid/TP40006955

Notice the Quick Help

LET’S WORK ON THE PROGRAM

First, we will add the model BirdSightingFile->New File …

Add BirdSighting• Select

• A header, BirdSighting.h, and source file, BirdSighting.m is created:

Add some fields to BirdSighting• Add some properties, which are fields or variables, and

an init function to BirdSighting.h.• This will error for now because we declared the

properties and function, but we haven’t defined them with initial values in the .m source.

BirdSighting fields• These fields will be the Bird’s name, location

of sighting and date seen.

A note about the jump bar• We can jump to files and functions and

properties within the files by using the navigation jump bar

We will define the properties and functions

Learning Objective-C• Objective-C, is based on the C language, and

it made sense to me when I thought of it as wrappers, to objectify, the C language.

@synthesize• We used @synthesize to tell the compiler to

create the accessor methods, i.e. getters and setters.

Now define the Data Controller• We have the getters/setters which is the model,

now define the Controller classes.• We will start with “BirdDataSightingController”

which will be the data controller for loading, saving and accessing the data, which is BirdSighting.

• The BirdSighting is the name, date and location of the Bird.

• BirdDataSightingController will add, load and save an Array List of this data, so we have array model containing a model with name, date and location.

Create the Data Controller• We will create a BirdDataSightingController

just like the BirdSighting class.

Now declare the Data Controller Header

Data Controller• We will have a current count and index to keep

track where we are in the array.• The Array will be NSMutableArray, meaning

modifiable.

BirdSightingDataController.m

BirdSightingDataController.m con’t

Check the identity of BirdMasterViewController

Deviations and Disclaimer• I have a referenced an Apple example,

Second iOS App Tutorial and am walking through a similar solution.

• Their example goes into exhaustive detail, while my example is not as detailed.

• My coding style is to get the storyboard mapped out first, and then add the details so several deviations may exist from their example.

ADDING A TABLE VIEW CONTROLLER

Introduction• UIViewController is one of the referenced

classes that controllers will be derived from.• Like most MVC frameworks, there are

predefined methods that make up the lifecycle of the class.

• Some of these methods that you should understand are viewDidLoad () and viewDidUnload( ) to start. These will be defined regardless of the Controller.

• There are many types of controllers that are prepakaged in UIKit, like UITableViewController.

Introduction references• http://developer.apple.com/library/ios/#doc

umentation/uikit/reference/UIViewController_Class/Reference/Reference.html

• http://developer.apple.com/library/ios/#featuredarticles/ViewControllerPGforiPhoneOS/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007457

Adding the View• As mentioned in MVC, all Controllers have

Views.• The View does not have to be code. • As in many iOS products, the View can be a

XIB, iOS XML, file that defines it.• In Storyboards, the View is likely to be

Controller Scene in the Storyboard file.

Adding AddSightingViewController• Other examples may add this later, as file are

filled in piecemeal. • I simply like to create the files first and edit

the sources as a whole.

AddSightingViewController.h stub• Now we see that the header is derived ffrom

UITableViewController, no problem.

AddSightingViewController.m stub• Now we see that the source has many pre-

populated methods to follow the lifecyle of the UITableViewController. Here’s just a few:

Adding the Object• The Controller Scene will likely start from the

Object Library:

Adding the Table View Controller• We will add a UITableViewController and Embed a

Navigation Controller with it:

Setting the UITableViewController• We will set the UITableViewController to the

custom class AddSightingViewController, because we are creating this Scene for this Controller.

Changes the name

Setting the Table View Attributes to Static Cells

• Next, we will set the Table View to Static Cells instead of Dynamic Cells to basically hard code the view layout.

• Apple has large references on changing the Table View like places at http://developer.apple.com/library/mac/#documentation/cocoa/Conceptual/TableView/PopulatingCellTables/PopulatingCellTables.html#//apple_ref/doc/uid/10000026i-CH5-SW1

Select the Table View in hierarchy, and set to Static Cells in the attributes.

Delete one of the Table View Cells, we only need 2

Add labels and text fields for “Bird Name” and “Location”….

Add Cancel and Done Bar Button Items….

Create Outlets to the Text Fields to allow communication with the Controller (using control key to Control-Drag and Editor Assistant)

More on Outlets

• Outlets can be defined through Xcode’s Interface Builder.

• They are defined with the type qualifier IBOutlet. This will give a pointer to the object to allow the Controller to communicate to it.

• See Cocoa Fundamentals Guide https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CocoaFundamentals/CommunicatingWithObjects/CommunicateWithObjects.html

Defining the Outlet in Interface Builder with birdNameInput and locationInput.

Code is generated in the Controller with IBOutlet pointers

• The Controller can now send text to the text field via this IBOutlet pointer.

It also added some code into the AddSightViewController.m

Now we add Actions that will allow the Buttons to communicate to the Controller

More on Actions

• Outlets will allow Controllers to talk to the View, Actions will allow the View to talk to the Controller.

• The Action sends a message to a target, usually through a “sender” and the target will implement a responder.

• See Cocoa Fundamentals Guide https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CocoaFundamentals/CommunicatingWithObjects/CommunicateWithObjects.html#//apple_ref/doc/uid/TP40002974-CH7-SW15

Declare the cancel Action

Declare the done Action

Add delegates in the Table View for the text fields

• Control-Drag from the Bird Name and Location text fields to the dock scene’s proxy, yellow orb.

• Select outlet->delegate on both.

Add delegates in the Table View for the text fields

Don’t forget, the storyboard file is XIB and we can check to see if the delegate was added to the text field. Add delegates in the Table View for the text fields

What we have

Part of the XIB

Add the protocol methods delegates in the Table View for the text fields

• Control-Drag from the Bird Name and Location text fields to the dock scene’s proxy, yellow orb.

• Select outlet->delegate on both.

Add delegate declarations in the header

After delegate declarations in AddSightingViewController.h

• We will add AddSightingViewControllerDelegate code:

Add Table view delegate definitions in AddSightingViewController.m

• We will add Table view delegate code to capture user input from Add Sighting View in the Storyboard:

Pragma marking ..

• The “pragma mark” helps us locate areas with the Navigation Toolbar for the editor:

Now that we have the AddSightingViewController defined, we need to add it to the BirdsMasterViewController to get called from the Application…this will be our connection….

We will add the Segue through an Add Button on the Master Controller.

Adding the segue with a Control-Dragfrom the (+) to the Navigation Controller

The modal segue

• A modal segue will present the destination of the view controller, in this instance the Add Sighting View Controller.

• http://developer.apple.com/library/ios/#featuredarticles/ViewControllerPGforiPhoneOS/AboutViewControllers/AboutViewControllers.html

• We will also assign the modal segue an identifier to be called referenced by in executing.

• Note: There should be no compile errors yet.

We will start adding the AddSightingViewController code into the BirdMasterViewController that calls it.

• Start by declaring the imports and interface in BirdMasterViewController.m :

Next, add the piece in BirdMasterViewController’s prepareForSegue to call the Views based on segue name.

Next, add the piece in BirdMasterViewController’s that can call the Cancel and Done buttons.

Compiler errors may start to occur…

• There may be compiler errors in the Main Controller now, especially since the dataController hasn’t been defined in the Main Controller’s header file.

• We need import BirdSightingDataController into BirdsMasterViewController.h.

• And the dataController in the same file.

DETAILS VIEWS CONTROLLER

BirdsDetailViewController

• The BirdsDetailViewController will display the fields of the BirdSightings model that have already been entered.

• These fields are bird name, location and date.• This will be a UITableViewController that will

display the bird name, location and date fields, set as labels, that are selected from the master scene to display.

BirdsDetailViewController.h

• I added the bird name, location and date in the header file, sometimes I do this ahead of time to prepare the labels in the scene.

Designing the Scene

• We are going to delete Birds Detail View Controller and replace it with a generic Table View Controller.

Add the Custom Class name

• Name is BirdsDetailViewController

Adding the segue push from the Master Scene

• We can delete the extra Navigation Controller that had a segue to BirdsDetailViewController because we will be coming from the Master Scene.

Adding the segue push from the Master Scene

• We will Control-Drag from the table cell this time instead of the Add button with a push segue.

Adding the segue name

• Set the segue name to ShowSightingDetails

We should be here now

Reviewing the segue name

• We can open the storyboard file up as source, XIB, or XML, and see that the segues were named correctly.

Starting on the Table View cells• Set the Content Attribute to Static Cells.

Adding the Labels• Add the labels with from the Object Utilities

and label them Bird Name, Location and Date.

Adding the Labels• Also add the labels to display the bird name, location

and date on the left of the description labels, Duplicate editing may help…

Adding the label names• Control-Drag from the Controllers Object

Dock to each of the display labels.

Adding the label names• Add the appropriate label name,

birdNameLabel, locationLabel, and dateLabel. They should match the header.

Adding the label names• They can be checked by right clicking on the

Label

Adding the label names• You can also see the link in

BirdsDetailViewController.h, clinking on the reference will take you to the storyboard.

Adding code to BirdsDetailViewController.m

• Add @sythesize to values and create a configView to format the data.

RECAP SOME OF THE STORYBOARD

If things worked well…The We have all the major pieces defined.

More detail …

More detail …

This is the MainStoryboard_iPhone

• For simplicity of this first time, we are going to just re-use the same storyboard for iPad.

• We are going to open the stroyboard’s as source and copy the iPhone one into the iPad one.

This is the MainStoryboard_iPhone

• For simplicity of this first time, we are going to just re-use the same storyboard for iPad.

• We are going to open the stroyboard’s as source and copy the iPhone one into the iPad one. A Text editor, like TextWrangler might be more helpful in keeping the format of the XIB.

• We will address the SplitView issue later.

Now mainStoryboard_iPad

• After copying the iPhone storyboard’s source into the iPad storyboard, the targetRuntime has to be changed from iPhone, iOS.CocoaTouch, to iPad, iOS.CocoaTouc.iPad.

In Interface Builder

• IB now looks the same for the iPad :

CONNECTING ALL THE PIECES

We have all the major pieces defined.

• Up until this point, all of the Storyboard pieces and classes have been created.

• What remains is to start from the beginning and ensure all the pieces are calling each other correctly through their functions.

We always start with the main.m• The main function always get called first, and it will call the

AppDelegate.• The BirdsAppDelegate.h will declare a UiWindow and be derived

from a UiResponder.

BirdsAppDelegate.m will call …

• Besides stubbed out functions, all the work will be done in didFinishLaunchingWithOptions.

• This function will start with the first controller as the BirdsMasterViewController and passing it the model as BirdsSightingDataController.

• The BirdsSightingDataController will contain a masterBirdSightingList.

• The masterBirdSightingList is an array list of BirdSighting objects.

• The BirdSighting object just contains methods and names for Bird Name, Location and Date.

BirdsAppDelegate.m

BirdsMasterViewController.m will call

• This View will display the array list of BirdSightings.

• If the Add button is pushed, then the AddSightingViewController is called through a delegate to add a new record.

• If the item in the list is selected, the BirdsDetailViewController is displayed with that records BirdSighting information of bird name, location and date.

BirdsMasterViewController.h

• The Master View Header will declare the two controllers that is will call:

BirdsMasterViewController.m

• The prepareForSegue function is very important, and its purpose is to execute the appropriate Controller based on the segue’s name.

Sent to a Controller ..

• If (+), the ShowAddSightingView is referenced to call the AddSightingView Controller.

• If a line item is pressed, the ShowSightingDetails is referenced to call the BirdsDetailViewController.

• A reference will also be set inside BirdsDetailViewController to which row was selected.

If a detail selected, then BirdsDetailViewController

• This controller will just get the data from row, and filled in the fields that are outlets to update the labels in the Table View:

If (+) selected, then AddSightingsViewController

• This controller will use outlets and delegates to fill the list from the text fields that are filled out.

• Then based on the next action, cancel or done, it will complete the actions, set as action types, and return to the Master Controller.

Add delegate declarations in AddSightingViewController.h

• We will add AddSightingViewControllerDelegate code:

Add Table view delegate definitions in AddSightingViewController.m

• We will add Table view delegate code to capture user input from Add Sighting View in the Storyboard:

RUNNING THE SAMPLE

Click on to Run and ensure it is set to iPad

Master Controller

Hit Add (+)

• Add (+) goes to AddSightingViewController

Hit Done, adds the record for now, a BirdSighting model.

Select the line takes you to the BirdsDetailViewController. Click Bird Sightings to return to the Main Controller.

Looking at it on the iPhone

ADDING A A SPLIT VIEW CONTROLLERFOR IPAD

The Split View Controller ..

• The Split View Controller manages two panes of information.

http://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/ViewControllerCatalog/Chapters/

SplitViewControllers.html

The Split View Controller ..

• They can be created programmatically.

For the iPad stroyboard, we will add a SplitViewController

Delete the default attaching views

Set as Initial View and Landscape Orientation

Setting the Split Controller ..

• The relationship has to be set from the SplitView Controller to the Master Controller and Detail Controller as it will now branch off of it from the beginning.

Delete the Segue from Master Controller and Detail View

• Delete the segue from Master Controller to Detail View.

Set the relationships from the Split View Controller to the Master Controller and Detail View with Control-Drag

Set the relationships from the Split View Controller to the Master Controller and Detail View with Control-Drag

Now we have…

Change the BirdsAppDelegate.m

We will change the BirdsDetailViewController since it will be in the background as a modal to a UISplitViewControllerDelegate

UiSplitViewControllerDelegate

• This class is used to manage the changes to the visible view. The detail view is always visible.

• http://developer.apple.com/library/ios/#DOCUMENTATION/UIKit/Reference/UISplitViewControllerDelegate_protocol/Reference/Reference.html

BirdsDetailViewController.m• We will have to make changes to accommodate

the Master Button as a popover Controller to manage the Detail Scene.

BirdsDetailViewController.m• And accommodate hiding the Master

Controller when the detail is selected…

BirdsMasterViewController.h• Add the detailViewController to be referenced

BirdsMasterViewController.m• This is be used as the detailViewController that will

be always displayed in the background and changed when a different row is selected in its viewDidLoad

When Running• And the Master button is selected, the

Master Controller is used as a popup.

When Running• When the detailed row is selected, it displays the

DetailViewContoller, as before, but now keeps it resident with the detailViewController variable.

When Running• When the (+) is pushed, it will still call the

prepareForSegue with the ShowAddSightingView and work as before.

CONCLUSION