code camp 2011 getting started with ios, una daly

Getting Started with iOS Programming

Code Camp Oct 2011Una Daly

Una Daly

• Foothill College Instructor (adjunct)• Director, College Open Textbooks

• Apple Software Engineer & Manager– 10 years

• Networking Software Engineer

Audience Experience

• C, C++

• Java

• Objective-C

Agenda• Getting Starting Slides: 20-25 minutes• Download the iOS SDK • Setup your development environment• Brief overview of the iPhone OS architecture • Tools: Xcode, Interface Builder, iOS Simulator, and Instruments • Objective-C syntax • Hello Coders (explain tools for real here) - 10 minutes• Add a custom icon - 5 minutes • Model-View-Controller – 5 minutes • MyCalc (implementation) - 15 minutes

The iOS Journey

• Register as Apple Developer• Read Getting Started Documentation• Download SDK• Start project

Join iOS Developer $99OR

Take Foothill Class

• Submit to AppStore

Some rights reserved cc-by-nc-sa by airdiogo

Apple Developer Center

iOS ArchitectureCore OS

OSX KernelMach 3.0BSDSocketsSecurityPower ManagementKeychain AccessCertificatesFile SystemBonjour

iOS ArchitectureCore Services

CollectionsAddress BookNetworkingFile AccessSQLiteCore LocationNet ServicesThreadingPreferencesURL Utilities

iOS ArchitectureMedia

Core AudioOpenALAudio MixingAudio RecordingVideo PlaybackJPEG, PNG, TIFFPDFQuartz (2D)Core AnimationOpenGL ES

iOS ArchitectureCocoa Touch

Multi-TouchCore MotionView HierarchyLocalizationControlsAlertsWeb ViewMap KitImage PickerCamera

iOS Platform

• Tools : Xcode, Interface Builder, Instruments

• Language: Objective- C[object message:

arg]

• Frameworks : – Foundation, UIKit, CoreGrapics

• Design Strategy: Model-View-Controller

iOS ToolsIntegrated Development Environment (Mac OS X)

• Xcode– Interface Builder

• Simulator

• Instruments

Main iOS Frameworks

• Foundation (NextStep)

– NSObject, NSString, NSArrays, NSDictionaries, etc.

• UIKit– Views, Windows, etc … (.xib files)

• Core Graphics– Drawing intensive apps only

Objective-C

• Object-oriented language– C Programming Language

• Dynamic runtime environment– Java-like method selection

Objective-C Classes• Objective-C source code files– .h -- interface files– .m – implementation files

MyClass.h MyClass.m

#import <Foundation/Foundation.h>

@interface MyClass: NSObject {

… instance variables …} … methods …

@end

#import “MyClass.h”

@implementation MyClass

method_name { …}

@end

Objective-C Scope

• Accessing instance variables– @private - only class can access– @protected – only class and subclass (default)– @public - any class can access

• General rule of thumb …– Make all instance variables private and use the

properties directive to generate getter and setters.

Method syntax

(NSString *) foo : (int) zap bar : (double) pow;

• Method name is “foo:bar:”• It has two arguments:

int zap; double pow;

• Return type is NSString of Foundation class

Sending Messages

• Dynamically dispatched by runtime– Method name (selector) decoupled from code

– Runtime dynamically looks up to find method

SEP theSelector = @selector(setWidth:);

If ([obj respondsToSelector:theSelector]){ [ obj setWidth:32.0]; }

Class Instantiationsimple case

• alloc init

• release

MyClass *myClass = [[MyClass alloc] initMethod];

Example:NSString *str = [[NSString alloc] initWithString:@”Hello World”];

[myClass release];

Example:[str release];[super dealloc]; // called if reference count hits 0

Model-View-Controller

• Model is data engine

• View is user interface

• Controller is bridge between model & view• Sets view (instance variables) Outlets• Receives Actions (user input) from View• Formats model’s data for display in view

Controller

Model View

Actions & Outlets• Connecting objects to UI Views– Views send IBActions to Controller• btnClicked

– Controllers talk to view through IBOutlets• txtFieldName

#import <UIKit/UIKit.h>

@interface HelloCodersControllerView { IBOutlet UITextField *txtname;}-(IBAction) btnClicked:(id) sender;-@end

Our First ProjectHello Coders

• Launch Xcode Create a “View” project called HelloCoders Look at the files created by default

HelloCodersAppDelegate.h (Objective C)HelloCodersAppDelegate.m HelloCodersViewController.hHelloCodersViewController.mHelloCodersViewController.xib

Click on Run to build and launch app So we have a blank screen – not too interesting

Hello Coderscontd.

• Click on HelloCodersViewController.xib to launch Interface Builder.– Called the nib file and contains an XML description of your

user interface.• Three items appear– File Owner – runtime object that owns the nib– First Responder – first view in the chain to respond to

events.– View window shows the graphical layout

Let’s add some UI elements

• Open the Objects Library (View->Utilities)– Choose a label and drag onto window• Double click and type “Hello Coders”• Tools->Attribute Inspector and type “Hello Coders”• Change alignment, font size etc from attribute window.

– Drag & drop a Text Field view to the View Window– Drag & drop a Button view to the View Window• Tools->Attribute and type “Click Me!” in button title

– Save .xib file and Run

What does the .xib file look like?

Run the User Interface

• Launch the app– Try typing into text field. Keyboard appears– Click in and out of your app using home key.

• Time to implement action in code– Add btnClicked method and txtName instance variable

declaration in HelloCoders ViewController. h file.– Write btnClicked method to display an alert in the Hello

CodersViewController.m file.

• Now Run your app again ….– What’s Missing???

Connect Action and Outlet

• Open the .nib file– Control click the button to the File Owner• Select btnClicked

– Control click the File Owner to the textfield• Select txtname

• Save, Build & Run … YES ….

Add a custom icon for your app

• Let’s make the application prettier– Icons for iPhone apps are 57x57– Icons for iPads are 72x72– Icons for high-resolution iPhones are 114x114

1. Drag & Drop icon onto Support folder of your project. Make a copy if asked.

2. Select the HelloCoders-Info.plist in the Support Folder. Select the icon file item and set its value to the name of the icon file.

3. Choose Run and watch your application launch this time.

Simulator running our Appwith app icon

Model-View-ControllerReview

• Model is data engine

• View is user interface

• Controller is bridge between model & view• Sets view instance vars• Receives Actions from View• Formats model’s data for display in view

Controller

Model View

Simple CalculatorModel-View-Controller

CalcViewController

Get Actions from ViewCall Brain to do MathUpdate View with Results

CalcBrain

Do the Math here!!!SqrtInverseClear

CalcView

Display IBOutlet Buttons IBAction 1,2,3,4, 5, 6, 7,8,9 sqrt, 1/x, clr

Simple Calculator User Interface (.xib) file

Simple Calculator

• Open Xcode• Create a View-based Project– Create calculator user interface (Run & Build)– Add CalcBrain.h, CalcBrain.m• Add setOperand and performOperation methods

– Edit CalcControllerView.h, CalcControllerView.m– Connect the .nib file to the IBOutlet (display) &

IBActions (digitPressed & operatorPressed– Run & Build

Debugging:add some breakpoints & run

Simple CalculatorNext Steps …

• Handle operations with 2 operands– “+”, “-”, “*”, “/”.

– Add instance variables to CalcBrain for storing additional operand and operator.

– Modify performOperation method to handle another operand.

Questions?

Check out the 2012 Foothill course offerings

Una Daly: dalyuna@fhda.edu

Image Attributions

• Front page iPad, iPhone– Some rights reserved by Yutaka Tsutano

• C Programming Language– Some rights reserved by mrbill

• Java image– Some rights reserved By kathryn_rotondo

• Objective-C Image– Some rights reserved by heipei