Presentation at Code Camp on Oct 8, 2011, 1:15 pm in the Foothill College Cafeteria. Overview of iOS Platform and development with demonstration of building two applications that demonstrate the model-view-controller architecture and feature buttons, textfields, labels, and alerts.

1. Getting Started with iOSProgramming Code Camp Oct 2011 Una Daly

2. Una Daly Foothill College Instructor (adjunct) Director, College Open Textbooks Apple Software Engineer & Manager 10 years Networking Software Engineer

3. Audience Experience C, C++ Java Objective-C

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

5. The iOS Journey Register as Apple Developer Read Getting Started Documentation Download SDK Start project Join iOS Developer $99 OR Take Foothill Class • Submit to AppStore Some rights reserved cc-by-nc-sa by airdiogo

6. Apple Developer Center

7. iOS ArchitectureCore OS OSX Kernel Mach 3.0 BSD Sockets Security Power Management Keychain Access Certificates File System Bonjour

8. iOS ArchitectureCore Services Collections Address Book Networking File Access SQLite Core Location Net Services Threading Preferences URL Utilities

9. iOS ArchitectureMedia Core Audio OpenAL Audio Mixing Audio Recording Video Playback JPEG, PNG, TIFF PDF Quartz (2D) Core Animation OpenGL ES

10. iOS ArchitectureCocoa Touch Multi-Touch Core Motion View Hierarchy Localization Controls Alerts Web View Map Kit Image Picker Camera

11. iOS Platform Tools : Xcode, Interface Builder, Instruments Language: Objective- C [object message: arg] Frameworks : Foundation, UIKit, CoreGrapics Design Strategy: Model-View-Controller

12. iOS ToolsIntegrated Development Environment (Mac OS X) Xcode Interface Builder Simulator Instruments

13. Main iOS Frameworks Foundation (NextStep) NSObject, NSString, NSArrays, NSDictionaries, etc. UIKit Views, Windows, etc … (.xib files) Core Graphics Drawing intensive apps only

14. Objective-C Object-oriented language C Programming Language Dynamic runtime environment Java-like method selection

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

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

17. 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 NSStringof Foundation class

18. Sending Messages Dynamically dispatched by runtime Method name (selector) decoupled from code Runtime dynamically looks up to find method

19. Class Instantiationsimple case alloc init release

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

21. Actions & Outlets Connecting objects to UI Views Views send IBActions to Controller btnClicked Controllers talk to view through IBOutlets txtFieldName

22. 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.h HelloCodersViewController.m HelloCodersViewController.xib Click on Run to build and launch app So we have a blank screen – not too interesting

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

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

25. What does the .xib file look like?

26. 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 HelloCodersViewController. h file. Write btnClicked method to display an alert in the Hello CodersViewController.m file. Now Run your app again …. What’s Missing???

27. 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 ….

28. 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 Drag & Drop icon onto Support folder of your project. Make a copy if asked. 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.

29. Simulator running our Appwith app icon

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

31. Simple CalculatorModel-View-Controller CalcViewController Get Actions from View Call Brain to do Math Update View with Results CalcBrain Do the Math here!!! Sqrt Inverse Clear CalcView Display IBOutlet Buttons IBAction 1,2,3,4, 5, 6, 7,8,9 sqrt, 1/x, clr

32. Simple Calculator User Interface (.xib) file

34. Debugging:add some breakpoints & run

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

36. Questions? Check out the 2012 Foothill course offerings Una Daly: dalyuna@fhda.edu

37. Image Attributions Front page iPad, iPhone Some rights reserved by Yutaka Tsutano C Programming Language Some rights reserved by mrbill Java image Some rights reservedBy kathryn_rotondo Objective-C Image Some rights reserved by heipei