iOS - iPhone/iPad Application Development Workshop Part 1

1. iOS - iPhone/iPad Application DevelopmentWorkshopPart 1

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

3. 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!

4. 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, debugger, and code profiling tools.

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

6. 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?

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

8. Project Template • There are several predefined templates to help you get started on a new project • For now, click on Single View Application

9. 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)

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

11. Where do I start?

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

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

14. Quick Terminology: Delegate • AppDelegate.h • AppDelegate.m • The Delegate is essentially 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.

15. 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. • We will not be covering nibs in this workshop.

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

17. 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!)

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

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

20. Run the project • The iPad and iPhone projects should now display Hello World!

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

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

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

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

25. @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

26. @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.

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

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

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

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

31. 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. • Run your program and push the buttons. You should see the UILabel change when you press the buttons

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

33. Create a new project • Close any existing projects you have open (to make things easier!) • Select File->New->Project from the application menu

34. Select Tab Template • Select the “Tabbed Application” Template for your project

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

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

37. Let’s add a new class: ThirdViewController • On the left hand side, right-click on the tabDemo folder and select New File

38. Pick the type of file • We are adding a new ViewController – so select Objective-C class

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

40. Create • Take the default options, click the Create button

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

42. Add another View Controller • Add a new View Controller to the Storyboard • After you add it, it will not be linked to any view

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

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

45. Select Relationship

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

47. 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)

48. 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!

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

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