iOS - iPhone/iPad
Application Development
Workshop
Part 1
1
1
What do you need?
• Previous experience in another Object Oriented
Programming (OOP) language will be helpful
• Some understanding of C can be helpful, but is
not required. Objective-C builds on C++.
• Development Environment (IDE) is helpful
• Mac computer running OS X Lion or higher!
• If you plan to submit to the App Store, you will
need Apple devices to do real testing on. The
simulator is not good enough.
2
2
Introduction
• iOS is the operating system that runs iPhones,
iPod Touches, iPads, and Apple TVs.
• The language used to develop software for iOS is
Objective-C. (very similar to C)
• This workshop will teach you how to get started
but will not have time to teach you everything.
• This workshop is good preparation for a real full
iPhone/iPad, iOS Development class!
3
3
What is iOS?
• iOS is an OS. It’s a subset of Mac OS X.
• The iOS SDK is the software development kit that
allows application programs to utilize classes and
frameworks provided by the SDK. This workshop
will focus on iOS SDK 5
• iOS is multitasking and runs on different devices
(iPhones, iPod Touches, iPads, and Apple TVs).
• Apple provides an IDE called Xcode.
• Xcode is the IDE used by iOS (and OS X)
developers. It does NOT run on MS Windows.
• Xcode provides an interface to the compiler, editor,
4
debugger, and code profiling tools.
4
Device Features
• SQLite for structured data storage
• Media support for common audio, video, and still
image formats (MPEG4, H.264, MP3, AAC, AMR,
JPG, PNG, GIF)
• GSM Telephony (hardware dependent)
• Bluetooth, EDGE, 3G, and WiFi (hardware
dependent)
• Camera, GPS, compass, and accelerometer
(hardware dependent)
• Rich development environment including a device
simulator, tools for debugging, memory and
performance profiling
5
5
Download the iOS SDK
• Download the latest from the Apple App store
• This is only available for Apple Macintosh
computers
• It’s free
• To build to device and submit to the app store,
you will be required to becomes a register Apple
iOS developer
• It’s $99 year for the basic account
• If you plan to get a job in iOS development, you
will need to establish a basic account and submit
something to the Apple Store. Maybe a game?
6
6
Let’s get started - Launch Xcode
• You are presented
with the Welcome
screen:
• Create a new project
• Connect to a repository
• Learn about using
Xcode
• Go to Apple’s Portal
•Go ahead and click on
“Create a new project”
7
7
Project Template
•There are several
predefined
templates to help
you get started
on a new project
•For now, click on
Single View
Application
8
8
Project Options
• The Product Name is the name of
•
•
•
•
•
•
your app
Company Identifier is your
organization name – such as
edu.itu (reverse domain)
Class Prefix (leave empty)
Device Family: iPad, iPhone,
Universal (Universal means that a
single binary will have screens for
iPhone, iPod Touch, and iPads)
Storyboards
Automatic Reference Counting
Include Unit Tests (leave
unchecked as we are not using)
9
9
Source Control
• Asks for a location for Source
Control
• By Default, it will use a local
GIT repository
• New developers not used to
source control – this is
extremely useful!
• It keeps track of versions, lets
you see what’s changed, and
will undoubtedly be used in
any team project you run into
in the “real” world
• GIT and Subversion are two
popular source controls
systems – there are many
others to choose from
10
10
Where do I start?
11
11
Let’s build the default project
• Click the Run button (upper left of the screen)
• The iPad simulator will launch (You can also
change this to iPhone if you want)
• You will have a blank white screen
• Press Command-Q to end the simulator
12
12
Quick Terminology: MVC
• Model-View-Controller (MVC)
• MVC is the paradigm of iOS programming
• Model: Holds data, should know nothing of the
interface
• View: Code for getting data in/out of a view.
Deals with items like buttons, lists, tables, etc
• Controller: Keeps the Model objects and View
objects in sync
13
13
Quick Terminology: Delegate
•AppDelegate.h •The Delegate is essentially
•AppDelegate.m the “controller” of your
app. It links buttons, labels
and views together
•.h files are header files and
interfaces are defined here
•.m files are implementation
files. These contain your
classes, code, etc.
14
14
Quick Terminology: Storyboard
• These are new to iOS5
• Storyboards help you graphically lay out your app
before you code it.
• It makes it easy to see the “flow” of your app
• You are advised to use Storyboards going forward
with you iOS programming adventures
• If you have tinkered with iOS in the past, you might
be asking about the xib/nibs. They are still there,
however, Storyboards offer similar functionality and
make it easier to visualize your views.
15
• We will not be covering nibs in this workshop.
15
Quick Terminology: ARC
• Automatic Reference Counting (ARC)
• The LLVM 3.0 compiler handles memory
management for you
• It is not a garbage collector!
• Prior to iOS5 – memory management was the single
most difficult item to grasp in Objective-C.
• Unless you have specific reasons, all of your projects
should use ARC.
16
16
Quick Terminology: Unit Tests
• We will not be discussing Unit Tests in this
workshop
• Be advised – unit tests are very useful for your
programs
• The tests can help you make sure your code
changes are not breaking anything.
• The goal is to be able to find bugs quicker and fix
them before your code goes to QA (or the
customer!)
17
17
Click on the iPhone Storyboard
•It shows a blank
view
•It looks like you are
on a sheet of graph
paper
•There are two
buttons – below
• First Responder
• View Controller
18
18
Find the Label
•In Xcode, lower right
hand corner, scroll
until you find the
object Label
•Drag Label to the
blank view
•Double click on the
Label you added, and
change it to say “Hello
World”
•Do the same steps for
the iPad Storyboard
19
19
Run the project
• The iPad and iPhone projects should now display
Hello World!
20
20
Next, add two buttons to your view
•Find the Round Rect
Button, drag two to
the view
•Double-click on one of
the buttons and type
Hello
•Double-click on one of
the buttons and type
Goodbye
•Run your project,
click on the buttons
21
21
Nothing Happens – we have to
tell it to do something
•Click on the
Assistant Editor
•It looks like a
tuxedo
•It will be in the
upper right hand
corner of your
screen
22
22
Linking the ViewObject to your
ViewController…
•You will see your
ViewObject in the
middle of the screen
•The right hand side
of the screen should
be the
ViewController.h file
View Object
ViewController.h
23
23
Link the label…
• Single click on your Hello World
label
• While holding down the Control
key, left click-drag to the
ViewController.h file
• You need to drag between the
@interface and @end in the
code
• This will make a new property
• For the name, call it helloLabel
so we can easily recognize what
it is
• This step will allow us to make
changes to the UILabel
24
24
@interface and @end
•Remember that Objective-C is an
extensive to the C language
•The @ symbol denotes an Objective-C
keyword
•@interface is the start of a class.
•@interface Classname: Superclass
•Anything between the declaration and
end is part of the class
25
25
@property (weak, nonatomic)
IBOutlet UILabel *helloLabel;
• A property is an attribute of the class
• Getters and Setters are automatically created for
you
• Weak is a memory management term
• Nonatomic has to do with adding mutexes around
your getters and setters
• IBOutlet stands for Interface Builder Outlet.
• Interface Builder still exists in iOS5 but we are
using the new Storyboard feature instead.
26
26
@synthesize helloLabel
•Synthesize – this creates the
accessor/mutators (getters/setters)
for you
•You can write your own if you want,
but in general, there is no reason to
do this.
27
27
Link the rest of the buttons
•Link helloButton to
ViewController.h
•Link goodbyeButton
to ViewController.h
•When done, you will
have two properties
•Now, switch the
Assistant window to
the ViewController.m
file
28
28
TouchUpInside Actions
TouchUpInside events occur
if you touch a button and lift
off while inside the button
This corresponds to a user
tapping a button
Right-Click on the Hello
button
On the far right, locate Touch
Up Inside
Left click-drag this over to
your ViewController.m
Notice it creates some code
Do the same for the goodbye
button
29
29
IBAction
•You created two IBActions
•Actions signify something that happens
when you do something for example, push
a button.
•When you push a button, it fires the action
•These are currently empty methods
- (IBAction)helloPushed:(id)sender {
}
- (IBAction)goodbyePushed:(id)sender {
}
30
30
Change the UILabel
- (IBAction)helloPushed:(id)sender {
self.helloLabel.text=@"Hello Pushed";
}
- (IBAction)goodbyePushed:(id)sender {
self.helloLabel.text=@"Goodbye Pushed";
}
• Self refers to the ViewController class
• We defined the property helloLabel earlier
• Text is a property of UILabel’s that we can set.
• The @”Some text” is an NSString object that UILabels
can display.
31
• Run your program and push the buttons. You should
see the UILabel change when you press the buttons 31
Tab Controller
• If you’ve ever used an iOS device, you have come
across apps that use the tab controller.
• Several of the built in apps (such as the phone
app) use this controller
• For the next exercise, we are going to create a
simple tab controller
32
32
Create a new project
•Close any existing
projects you have
open (to make
things easier!)
•Select File->New>Project from the
application menu
33
33
Select Tab Template
•Select the
“Tabbed
Application”
Template for
your project
34
34
Set Options
• For product name, call it
tabDemo
• Whatever you used for
Company Identifier should
be set – if not, edu.itu is
ok
• Leave Class Prefix blank
• For Device family, choose
iPhone (to keep it simple)
• Enable Storyboards and
Arc
• Do not select Unit Tests
35
35
Look at the Storyboard
• Click on
MainStoryboard.Storyboard
• Notice how the Tab Bar
Controller is shown
• It also shows the child views
associated with the tab bar
buttons
• This lets the developer see the
views and path to them at a
quick glance.
• Go ahead and run the project,
observe what happens when
you tap the tab items. It
switches between the views
36
36
Let’s add a new class:
ThirdViewController
•On the left
hand side,
right-click on
the tabDemo
folder and
select New File
37
37
Pick the type of file
•We are adding
a new
ViewController
– so select
Objective-C
class
38
38
Pick the options
• For Class, type in Third
• In the Sublass combo box,
select UIViewController
• The IDE will change your
class name
• It is good naming convention
to have the class be
description – so in this case,
ThirdViewController lets any
developer know this is a
ViewController
• Leave Targeted for iPad and
XIB unchecked
39
39
Create
•Take the
default options,
click the Create
button
40
40
We now have a .h and .m
•Notice that you now
have two files
•ThirdViewController.h
and
ThirdViewController.m
•If you look at the files,
they are basically
“skeleton” classes
ready for the
developer
41
41
Add another View Controller
•Add a new
View Controller
to the
Storyboard
•After you add
it, it will not be
linked to any
view
42
42
Our new view, all alone
•Notice that Storyboard
does not have any
arrows pointing to it
•The developer will have
to make the
association as this view
could be a sub view of
any of the views shown
43
43
Link this ViewController to the
Tab Controller
•Hold down the Control
key, left-click drag
from the Tab
Controller to the new
view we just added
•This tells Storyboard
that this view is going
to be accessed from
the tab controller
44
44
Select Relationship
45
45
Label this before we forget
•Click on the Text
•Change this to say
Third
•We do not have any
graphics – if we did, we
would want to go
ahead and add a
graphic for this.
•Note: you will need
graphics for standard
iPhones, retina, and
iPads.
46
46
Lets be more specific about the
class
• Left Click on your new
view in Storyboard –
icon on right bottom
• Click the Identify
Inspector (upper right)
• Notice how the class is
currently
UIViewController
• We need to make this
to be associated with
our ThirdViewController
(which is a subclass of
UIViewController)
47
47
Select ThirdViewController
•From the combo box,
scroll until you find
ThirdViewController
•This will let us do any
custom actions we
might need to do
•Remember:
ThirdViewController
has all of the methods
and properties of a
UIViewController!
48
48
Let’s Replace the First View
• We are going to
replace the
FirstViewController
with a
TableViewController
• Click on First View,
hit the Delete button
to remove it
49
49
Drag a Table View Controller
• From the Object
Library, drag over a
Table View
Controller
• A good spot would
be where you just
deleted the other
view controller
50
50
Embed Navigation Controller
•From the Xcode
menu bar, select
Editor->Embed In>Navigation
Controller
•Notice that another
view controller is
added to the
Storyboard canvas
51
51
Check it out
• This is what we did in
the previous slide
• Since the Navigation
Controller is a
container, there is a
relationship between
the Navigation
controller and the
table view controller.
(Noted by the
connecting arrow)
52
52
Hook up the Scenes
•Ctrl-drag from
the Tab Bar
controller to the
Navigation
controller
•Select
Relationship –
View Controllers
53
53
Look at Storyboard now
• The relationship is
defined
• When we added this,
it added an entry
labeled “Item” as the
last tab bar button
•Drag this “Item” and
make it the first entry
in our tab bar
54
54
Fix up the tab bar items
•Drag item to the
left most position
•Also, let’s rename
this back to First
•Double-click on
Item in the
Navigation
Controller scene,
change text to First
55
55
Name the Navigation bar
•In the Table View
window, double-click
on the Title bar.
•Type in “Things” to
give the Navigation
bar a name.
•In a “real” app, you
would type something
descriptive and
meaningful to the
user.
56
56
The Navigation Bar has a title
•You can now see the
title has a name.
•If you have noticed,
we have been getting
a warning from the
compiler for our
storyboard.
•“Prototype table cells
must have reuse
identifiers”
57
57
Let’s get rid of the warning
• Warnings are typically not something
you want in your program.
• We are getting this warning because
we have not configured the cells yet
– so the compiler does not know
what they are.
58
58
Table View Controller
• Click on the
blank prototype
cell
• Next, click on
the attributes
inspector and
set Style to
Subtitle.
59
59
Attributes Inspector
60
60
More cell attributes
• Set the Accessory attribute
to Disclosure Indicator.
• Give the cell an identifier of
ThingsCell.
• The warning from Xcode is
a reminder to developers –
there is something you
need to do if you want this
to work.
• (Side note – warnings are
something you should not
overlook. Several program
crashes can stem from
warnings people don’t pay
attention to.)
61
61
Add a UIViewController subclass
template…
• Add a new file to the project.
• Choose UIViewController subclass
template.
• Name the class
ThingsViewController, this will be
a subclass of UITableViewController
62
62
New file
63
63
Objective-C Class
64
64
ThingsViewController
65
65
Create to add to project
66
66
Set the class with Identify
Inspector
• Click on the
TableViewController
object (the whole
object will be outlined
in blue)
• Now, click class and
select
ThingsViewController
67
67
Build and run!
• Go ahead and build the app
• You can now add items to the table view
if you want to continue working with this
app.
68
68
HelloTabBar Example
•Download:
•http://bhecker.com/ip-HelloTabBar.zip
•Save to your desktop.
•Double-click to uncompress the file
•Double-click on
“HelloTabBar.xcode.proj” to load the
project in XCode
•Examine and customize as you wish!
69
69
The End of Part 1
Next… Part 2
Objective-C Programming
70
70