LEARNING iPAD STORYBOARDS IN OBJ-‐C LESSON 1

LEARNING IPAD
STORYBOARDS IN OBJ-C
LESSON 1
Rich Helton
Rhelton_1@yahoo.com
August 28, 2012

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/#do
cumentation/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

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/#doc
umentation/UIKit/Reference/UIStoryboard_C
lass/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/U
singViewControllersinYourApplication/UsingV
iewControllersinYourApplication.html#//appl
e_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/#DOCU
MENTATION/iPhone/Conceptual/iPhoneOSProgr
ammingGuide/AppArchitecture/AppArchitecture
.html

An 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/#Doc
umentation/UIKit/Reference/UIKit_Framewo
rk/_index.html

WALKING
THROUGH A
CLASSIC
SAMPLE

Storyboards Start
• Apple has created a good example called
“Your Second iOS App” found at
https://developer.apple.com/library/ios/#doc
umentation/iPhone/Conceptual/SecondiOSA
ppTutorial/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/Xco
de4UserGuide/000-About_Xcode/about.html

Create a Storyboard Master-Detail
project

It has an iPad and iPhone Storyboard
in Universal

Running the blank template already
has something …

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.

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/#d
ocumentation/Cocoa/Conceptual/PropertyLis
ts/QuickStartPlist/QuickStartPlist.html

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.

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’sUIApplicationDelegate.

The UIApplicationDelegate
• See
https://developer.apple.com/library/ios/#docu
mentation/UIKit/Reference/UIApplicationDelega
te_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/#docum
entation/uikit/reference/UIKit_Framework/_ind
ex.html#//apple_ref/doc/uid/TP40006955

First, we will add the model
BirdSighting
File->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.mcon’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/#feat
uredarticles/ViewControllerPGforiPhoneOS/I
ntroduction/Introduction.html#//apple_ref/d
oc/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
ffromUITableViewController, 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.

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/#documenta
tion/cocoa/Conceptual/TableView/PopulatingCellTabl
es/PopulatingCellTables.html#//apple_ref/doc/uid/10
000026i-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/#docu
mentation/Cocoa/Conceptual/CocoaFundament
als/CommunicatingWithObjects/Communicate
WithObjects.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/#docu
mentation/Cocoa/Conceptual/CocoaFundament
als/CommunicatingWithObjects/Communicate
WithObjects.html#//apple_ref/doc/uid/TP40002
974-CH7-SW15

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.

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.
the text fields

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-Drag
from 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/ViewCon
trollerPGforiPhoneOS/AboutViewControllers/AboutViewController
s.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’sprepareForSegue 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.

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

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.

• Add the appropriate label name,
birdNameLabel, locationLabel, and dateLabel.
They should match the header.

• They can be checked by right clicking on the
Label

• 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.

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

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 :

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.

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:

Click on to Run and ensure it is set to
iPad

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.

ADDING A A SPLIT
VIEW
CONTROLLER
FOR IPAD

The Split View Controller ..
• The Split View Controller manages two panes
of information.
http://developer.apple.com/library/ios/#docu
mentation/WindowsViews/Conceptual/View
ControllerCatalog/Chapters/SplitViewControll
ers.html

The Split View Controller ..
• They can be created programmatically.

For the iPadstroyboard, 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

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/#DOC
UMENTATION/UIKit/Reference/UISplitViewCo
ntrollerDelegate_protocol/Reference/Referen
ce.html

• We will have to make changes to accommodate
the Master Button as a popover Controller to
manage the Detail Scene.

• 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.

LEARNING iPAD STORYBOARDS IN OBJ-‐C LESSON 1

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (15)

Similar a LEARNING iPAD STORYBOARDS IN OBJ-‐C LESSON 1

Similar a LEARNING iPAD STORYBOARDS IN OBJ-‐C LESSON 1 (20)

Último

Último (20)