iOS - iPhone/iPad

Application Development Workshop Part 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.

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!

What is iOS?
iOS is an OS. Its 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

Download the iOS SDK

Download the latest from the Apple App store This is only available for Apple Macintosh

computers Its free To build to device and submit to the app store, you will be required to becomes a register Apple iOS developer Its $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

Lets 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 Apples Portal

Go ahead and click on

Create a new project

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

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

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 whats 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

Lets 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 interfaces are defined here
files. These contain your classes, code, etc.

.h files are header files and .m files are implementation

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
View Object

ViewObject in the middle of the screen The right hand side of the screen should be the ViewController.h file

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 UILabels 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 youve 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

Lets 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

Lets 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, lets 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

Lets 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 dont 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