iphone App Basics iphone and ipod touch Development Fall 2009 Lecture 5

Transcription

1 iphone App Basics iphone and ipod touch Development Fall 2009 Lecture 5

2 Questions?

3 Announcements Assignment #1 due this evening by 11:59pm Remember, if you wish to use a free late you must me before midnight Assignment #2 out this evening Due Tuesday September 22 nd by 11:59pm

4 Today s Topics iphone OS Stack Anatomy of an iphone App Running an iphone App Interface Builder Adding UI Elements Outlets & Actions

5 iphone OS Stack

6 iphone OS Stack Core OS OS X kernel UNIX services Hardware drivers Power management Management of Threads File system Your App Cocoa Touch Media Core Services Core OS Network IPC

7 iphone OS Stack Core Services Bonjour Sockets URL utilities Address Book Core Location SQLite Collections Your App Cocoa Touch Media Core Services Core OS File Access Core Data

8 iphone OS Stack Media Core Audio Core Graphics OpenGL ES Quartz Core Media Player Audio Services Images Your App Cocoa Touch Media Core Services Core OS

9 iphone OS Stack Media UIKit Address Book UI Game Kit Map Kit Message UI Touch/Multi-touch Accelerometer Your App Cocoa Touch Media Core Services Core OS

10 Cocoa Touch Decomposition Cocoa Touch UIKit User interface elements Application runtime Event handling Hardware APIs Foundation Utility classes Collection classes Object wrappers for system services Subset of Foundation in Cocoa

11 iphone OS Stack Your App Xcode templates Your code leveraging lower level APIs Your App Cocoa Touch Media Core Services Core OS

12 Anatomy of an iphone App

13 Choosing an iphone App Template Fire up Xcode and select File New Project... Several templates to select from as a starting point We ll start with what is probably the easiest iphone template the view-based application Select View-based Application, then click Choose... Name the project HelloWorld and Save

14 New View-Based Application

15 Stubbed Out Project Once you name and save your project, you ll notice that Xcode created a lot for you as part of this template

16 Classes Classes typically consist of ObjC code that we can tailor to meet the needs of our application Additionally, when we add classes to our project, they are usually placed under Classes as well For this app template we see that Xcode has automatically created two classes for us

17 Classes ProjectNameAppDelegate.[mh] The AppDelegate class handles life-cycle events for our application, such as... App startup App shutdown

18 Classes ProjectNameViewController.[mh] The default ViewController class is responsible for managing what appears on the screen

19 Other Sources Source files that are automatically generated by Xcode Typically, you will not need to do anything with these files Usually 3 rd party libraries are placed here as well

20 Other Sources ProjectName_Prefix.pch The.pch file is a pre-compiled header file that is created by Xcode to improve performance of processing headers in main

21 Other Sources main.m The main.m file is responsible for actually launching your application

22 Resources The resources folder contains no source code, but the files here are vital to your application App icon App name GUIs Other files you might add here include Images Audio

23 Resources ProjectNameViewController.xib The HelloWorldViewController contains the UI that we ll initially see when the app loads You can think of the.xib file as containing a freeze dried version of our UI elements

24 Resources MainWindow.xib The Main Window is typically responsible for loading the first view when the app loads Usually this displays one of the other.xib files

25 Resources ProjectName-Info.plist The Info.plist file contains basic app information such as App icon App name Name of the main.xib file

26 Frameworks Lists the various libraries that our app is dependent upon

27 Frameworks UIKit UIKit provides the fundamental objects for constructing and managing your application's user interface Events Windows Views Controls Multi-touch

28 Frameworks Foundation UIKit provides the foundation for Cocoa development NSObject Basic data types Collections OS Services

29 Frameworks CoreGraphics Provides a C-based API that is a low-level, lightweight 2D rendering engine Path based drawing Gradients Images Transforms PDF

30 Products Contains the files that will be created by the build process

31 Products ProjectName.app The actual iphone application

32 Running an iphone App

33 Deployment Options Two options for building and deploying your iphone apps... On device Build for ARM iphone architecture Requires code signing certificate Push to device to run and test On simulator Build for x86 Mac architecture, runs in a simulator No code signing required Run and test on Mac

34 iphone Simulator The simulator is sufficient for the apps that we re going to be building to start out with However, there are some limitations in the simulator No camera No accelerometers Limited multi-touch GPS fixed at Apple headquarters Etc...

35 iphone Simulator Location The simulator is located under Macintosh HD Developer Platforms iphonesimulator.platform Developer Applications iphone Simulator.app I d recommend that you either launch it as needed from Xcode, through Spotlight, or add it to the dock

36 Targeting the Simulator

37 Building and Running To test the app from the Build menu select Build and Run Or, simply type R This will... Build your app Install it into the simulator Automatically launch it

38 App Running in Simulator

39 Congratulations You ve successfully completed the most basic Hello World of iphone apps......a flashlight app : )

40 Interface Builder

41 NIB files Earlier we stated that.xib files contained a freeze dried representation of our GUI The files are XML-based and named with a.xib extension (used to be.nib) So, for historical reasons they are still called NIBs NIB files are manipulated in another part of the SDK called Interface Builder

42 Interface Builder Interface Builder (or IB for short) is where we edit our NIBs IB contains: A canvas on which we create our GUI A library of widgets Tools to tweak the appearance of the UI

43 Interface Builder Location IB is located at Macintosh HD Developer Applications Interface Builder.app I d recommend that you either launch it as needed from Xcode, through Spotlight, or add it to the dock

44 Multi-Window Display

45 Main NIB Window The main NIB window contains some objects which are used for a variety of purposes We ll talk about these objects in more detail later

46 View Window The view window is our app s canvas This is where we ll build out the UI If not visible, double clicking the View icon in the NIB window should open it

47 Inspector The Inspector is a 4 tabbed panel that lists details for the currently selected UI element Attributes Connections Size Identity If not visible, select Tools Inspector, or I You can also jump between the various tabs using 1, 2, 3 & 4

48 Library The library contains our palette of UI elements from which to choose Has a handy search bar at the bottom to filter the list If not visible, select Tools Library, or L

49 Adding UI Elements

50 Hello iphone World! Let s use Interface Builder to add some text to our view We ll customize some of the defaults to build a (slightly) more interesting screen Font sizes Font colors Font family Text alignment Background colors

51 Drag and Drop Simply click, then drag and......drop here

52 Change Text To change the default text of most UI elements, you simply double click and enter the new label...

53 Guide Lines You ll notice handles around the edges of UI elements, IB allows you to resize by simply dragging and even offers various guides that will appear to help align your widgets

54 Inspector Attribute Tab We use the attributes tab of the Inspector to customize the visual aspects of our UI elements The specific attributes you can tweak will change based on the current UI element selected

55 Testing our Changes Save the NIB file using File Save, or S Then return to Xcode and re-run the app IB will automatically redeploy the changes to the simulator

56 Hello iphone World!

57 Outlets & Actions

58 Building a More Interesting App We ve seen that Interface Builder is a powerful tool that allows us to build out pretty nice looking GUIs and allows us to customize the appearance of our app However, that only gets us so far... What about user interaction?

59 A More Interesting Hello World App

60 UI Elements

61 Steps to Build Our App Construct the view this is simply drag and drop like the previous Hello iphone World app Need a way to get a handle on UI elements to be able to read and write their values Read from text field Write to the label Need a way to wire up the button to respond to events When the button is pressed display the message

62 IBOutlet When we click the button, we need retrieve the name from the text field and set the text on the label accordingly We need a mechanism to associate UI elements in the NIB to variables in our code A reference from code to a UI element in a NIB is called an outlet and is declared by the keyword IBOutlet

63 IBOutlets in HelloNameViewController.h #import HelloNameViewController : UIViewController {! UILabel *label;! UITextField *field;! IBOutlet UILabel IBOutlet UITextField Typically UI elements are declared nonatomic and retain Declared outlet

64 IBOutlets in HelloNameViewController.m #import label; Remember to synthesize properties /*... bunch 'o commented out auto-generated methods... */ - (void)didreceivememorywarning { [super didreceivememorywarning]; } - (void)viewdidunload { } - (void)dealloc { self.label = nil; self.field = nil; [super dealloc]; Also need to cause properties to get released when done

65 IBOutlet Currently, these are just declarations that the variables are capable of referencing a UI element Hey you, we have some outlets here!

66 IBOutlet We need to actually perform the linkage to associate the outlet with a particular instance of a UI element in IB IBOutlet (It is a common error to miss this step when getting started)

67 Wiring Up the IBOutlet for the Text Field Control click, drag and......drop here

68 Wiring Up the IBOutlet for the Text Field Select the outlet for this UI element

69 Wiring Up the IBOutlet for the Label Control click, drag and......drop here

70 Wiring Up the IBOutlet for the Label Select the outlet for this UI element

71 Verifying Outlet Connections You can verify that the connections were created by selecting File s Owner from the NIB file window and view the connections tab...

72 IBAction When we click the button, we need execute some code to read the value of one UI element and set another We need a mechanism to associate interaction with a UI element (a button press) in the NIB to a method in our code A method that is capable of handling events is said to respond to actions and is identified by the keyword IBAction

73 IBActions in HelloNameViewController.h #import HelloNameViewController : UIViewController {! UILabel *label;! UITextField *field;! } - (IBAction)sayHello; Declared action IBOutlet UILabel IBOutlet UITextField

74 IBActions in HelloNameViewController.m #import label; - (IBAction)sayHello { /*... OUR CODE HERE... */ } /*... bunch 'o commented out auto-generated methods... */ /*... didreceivememorywarning and viewdidunload methods... */ - (void)dealloc {! self.label = nil;! self.field = nil; [super dealloc];

75 How to Use UILabel & UITextField? Where can we find out how to read the value of a UITextField and write the value for a UILabel?

76 IBActions in HelloNameViewController.m #import label; - (IBAction)sayHello {! self.label.text = [NSString stringwithformat:@"hello, %@", self.field.text]; } /*... bunch 'o commented out auto-generated methods... */ /*... didreceivememorywarning and viewdidunload methods... */ - (void)dealloc {! self.label = nil;! self.field = nil; [super dealloc];

77 IBAction Currently, these are just declarations that these methods are capable of performing actions Hey you, we have some actions here!

78 IBAction We need to actually perform the linkage to associate an event in the UI with an action method in the code IBAction (It is a common error to miss this step when getting started)

79 Wiring Up the IBAction for the Button Control click, drag and......drop here

80 Wiring Up the IBAction for the Button Select the action for pressing this button

81 Verifying Action Connections We can again verify that our connections were correctly wired up using the connections inspector tab However, this time we need to click on the UI element that we setup to perform the action Bunch of events that we can bind to Button presses are typically bound to the Touch Up Inside event

82 When to Declare IBOutlet and IBAction As a general rule, you only need to declare an IBOutlet if you need to read or write any of that UI elements attributes For example, we didn t declare the button to be an IBOutlet because we didn t change the button at runtime Declare an IBAction for methods you plan to call from a UI element If you re not calling it from a UI element, there s no real need to declare it as an IBAction

83 Running Our App Save changes in IB and Xcode, then run the app Again, the app will automatically be deployed and run in the simulator

84 Notice Anything Wrong? Return doesn t do anything!

85 Behind the Magic Next class we ll dive a bit deeper into what we saw happening magically this evening What is the File s Owner? What is the First Responder? How does a NIB get executed? What are all these commented out methods? How does all of this get executed? How do I make the keyboard disappear when the user presses the return key? We ll also look at some of the design patterns that are present in our application

86 Additional Resources The iphone OS Technology Overview does a thorough job of discussing the various iphone OS layers Miscellaneous/Conceptual/iPhoneOSTechOverview/ iphone Application Programming Guide iphone/conceptual/iphoneosprogrammingguide/

87 For Next Class Read chapter 1 of the iphone Application Programming Guide up to (including) the section title Handling Critical Application Tasks iphone/conceptual/iphoneosprogrammingguide/