Mobile Computing. Overview. What is ios? 8/26/12. CSE 40814/60814 Fall 2012

Transcription

1 Mobile Computing CSE 40814/60814 Fall 2012 Overview ios is the opera8ng system that runs iphones, ipod Touches, ipads, and Apple TVs. The language used to develop sogware for ios is Objec8ve- C (very similar to C; Smalltalk- inspired). Dynamic (run8me dispatching vs. compile- 8me). Purpose of lecture today is to give newcomers a brief introduc8on into ios development to help get you started. 1 What is ios? ios is an OS. It s a subset of Mac OS X. The ios SDK is the so)ware development kit that allows applica8on programs to u8lize classes and frameworks provided by the SDK. ios is mul8tasking and runs on different devices (iphones, ipod Touches, ipads, and Apple TVs). Apple provides an IDE (integrated development environment) called Xcode. Xcode provides an interface to the compiler, editor, debugger, and code profiling tools. 2 1

2 Device Features SQLite for structured data storage Media support for common audio, video, and s8ll 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 3 Download the ios SDK Download the latest from the Apple App store (only available for Apple Macs); free. To build to device and submit to the App store, you will be required to becomes a registered Apple ios developer ($99 for basic account). University license allows you to test app on device, but cannot be used to distribute app in App Store. TA Nikhil (nyadav@nd.edu) can help you with any problems with Xcode installa8on. 4 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 5 2

3 Project Template There are several predefined templates to help you get started on a new project Simple one to start with: Single View Applica:on 6 Project Options The Product Name is the name of your app Company Iden8fier is your organiza8on 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 Automa8c Reference Coun8ng Include Unit Tests 7 Quick Terminology: ARC Automa8c Reference Coun8ng (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 Objec8ve- C. Unless you have specific reasons, all of your projects should use ARC. 8 3

4 Reference Counting OLD: NSObject *obj = [[NSObject alloc] init]; // do some stuff [obj release]; NEW: NSObject *obj = [[NSObject alloc] init]; // do some stuff 9 Quick Terminology: Unit Tests 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!) 10 Source Control Asks for a loca8on 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 4

5 Where do I start? 12 Let s build the default project Click the Run buuon (upper leg of the screen) The iphone simulator will launch 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 gevng data in/out of a view. Deals with items like buuons, lists, tables, etc. Controller: Keeps the Model objects and View objects in sync. 14 5

6 Quick Terminology: Delegate AppDelegate.h AppDelegate.m The Delegate is essen8ally the controller of your app. It links buuons, labels, and views together..h files are header files and interfaces are defined here..m files are implementa8on 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 your ios programming adventures If you have 8nkered with ios in the past, you might be asking about the xib/nibs. They are s8ll there, however, Storyboards offer similar func8onality and make it easier to visualize your views. 16 Click on the iphone Storyboard It shows a blank view It looks like you are on a sheet of graph paper There are two buuons below First Responder View Controller 17 6

7 Find the Label In Xcode, lower right hand corner, scroll un8l 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 18 Next, add two buttons to your view Find the Round Rect Buuon, drag two to the view Double- click on one of the buuons and type Hello Double- click on one of the buuons and type Goodbye Run your project, click on the buuons 19 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 20 7

8 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 21 Link the label Single click on your Hello World label While holding down the Control key, leg click- drag to the ViewController.h file You need to drag between 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 Remember that Objec8ve- C is an extension to the C language symbol denotes an Objec8ve- C is the start of a Classname: Superclass Anything between the declara8on and end is part of the class 23 8

9 @property (weak, nonatomic) IBOutlet UILabel *hellolabel; A property is an auribute of the class Geuers and Seuers are automa8cally created for you Weak is a memory management term Nonatomic has to do with adding mutexes around your geuers and seuers IBOutlet stands for Interface Builder Outlet. Interface Builder s8ll exists in ios5 but we are using the new Storyboard feature instead. hellolabel Synthesize this creates the accessor/ mutators (geuers/seuers) for you You can write your own if you want, but in general, there is no reason to do this. 25 Link the rest of the buttons Link hellobuuon to ViewController.h Link goodbyebuuon to ViewController.h When done, you will have two proper8es Now, switch the Assistant window to the ViewController.m file 26 9

10 TouchUpInside Actions TouchUpInside events occur if you touch a buuon and lig off while inside the buuon This corresponds to a user tapping a buuon Right- Click on the Hello buuon On the far right, locate Touch Up Inside LeG click- drag this over to your ViewController.m No8ce it creates some code Do the same for the goodbye buuon 27 IBAction You created two IBAc8ons Ac8ons signify something that happens when you do something for example, push a buuon. When you push a buuon, it fires the ac8on These are currently empty methods - (IBAc8on)helloPushed:(id)sender { } - (IBAc8on)goodbyePushed:(id)sender { } 28 Change the UILabel - (IBAc8on)helloPushed:(id)sender { self.hellolabel.text=@"hello Pushed"; } - (IBAc8on)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. Some text is an NSString object that UILabels can display. Run your program and push the buuons. You should see the UILabel change when you press the buuons 29 10

11 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. 30 Create a new project Close any exis8ng projects you have open (to make things easier!) Select File- >New- >Project from the applica8on menu 31 Select Tab Template Select the Tabbed Applica8on Template for your project 32 11

12 Set Options For product name, call it tabdemo Whatever you used for Company Iden8fier 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 33 Look at the Storyboard Click on MainStoryboard.Storyboard No8ce how the Tab Bar Controller is shown It also shows the child views associated with the tab bar buuons 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 34 Let s add a new class: ThirdViewController On the leg hand side, right- click on the tabdemo folder and select New File 35 12

13 Pick the type of file We are adding a new ViewController so select Objec:ve- C class 36 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 conven8on to have the class be descrip8ve so in this case, ThirdViewController lets any developer know this is a ViewController Leave Targeted for iphone and XIB unchecked 37 Create Take the default op8ons, click the Create buuon 38 13

14 We now have a.h and.m No8ce 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 39 Add another View Controller Add a new View Controller to the Storyboard AGer you add it, it will not be linked to any view 40 Our new view, all alone No8ce that Storyboard does not have any arrows poin8ng to it The developer will have to make the associa8on as this view could be a sub view of any of the views shown 41 14

15 Link this ViewController to the Tab Controller Hold down the Control key, leg- 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 42 Select Relationship 43 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, re8na, and ipads

16 Lets be more specific about the class LeG Click on your new view in Storyboard icon on right bouom Click the Iden8fy Inspector (upper right) No8ce how the class is currently UIViewController We need to make this to be associated with our ThirdViewController (which is a subclass of UIViewController) 45 Select ThirdViewController From the combo box, scroll un8l you find ThirdViewController This will let us do any custom ac8ons we might need to do Remember: ThirdViewController has all of the methods and proper8es of a UIViewController! 46 Let s Replace the First View We are going to replace the FirstViewController with a TableViewController Click on First View, hit the Delete buuon to remove it 47 16

17 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 48 Embed Navigation Controller From the Xcode menu bar, select Editor- >Embed In- >Naviga8on Controller No8ce that another view controller is added to the Storyboard canvas 49 Check it out This is what we did in the previous slide Since the Naviga8on Controller is a container, there is a rela8onship between the Naviga8on controller and the table view controller. (Noted by the connec8ng arrow) 50 17

18 Hook up the Scenes Ctrl- drag from the Tab Bar controller to the Naviga8on controller Select Rela8onship View Controllers 51 Look at Storyboard now The rela8onship is defined When we added this, it added an entry labeled Item as the last tab bar buuon Drag this Item and make it the first entry in our tab bar 52 Fix up the tab bar items Drag item to the leg most posi8on Also, let s rename this back to First Double- click on Item in the Naviga8on Controller scene, change text to First 53 18

19 Name the Navigation bar In the Table View window, double- click on the Title bar. Type in Things to give the Naviga8on bar a name. In a real app, you would type something descrip8ve and meaningful to the user. 54 The Navigation Bar has a title You can now see the 8tle has a name. If you have no8ced, we have been gevng a warning from the compiler for our storyboard. Prototype table cells must have reuse iden8fiers 55 Let s get rid of the warning Warnings are typically not something you want in your program. We are gevng this warning because we have not configured the cells yet so the compiler does not know what they are

20 Table View Controller Click on the blank prototype cell Next, click on the auributes inspector and set Style to Sub8tle. 57 Attributes Inspector 58 More cell attributes Set the Accessory auribute to Disclosure Indicator. Give the cell an iden8fier 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 don t pay auen8on to.) 59 20

21 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 60 New file 61 Objective-C Class 62 21

22 ThingsViewController 63 Create to add to project 64 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 65 22

23 Build and run! Go ahead and build the app You can now add items to the table view if you want to con8nue working with this app. 66 Message Passing [(receiver) (message)]; [myview settransform:cgaffinetransformmakerota8on(angle)]; NSString *nicenumber = [numformauer stringfromnumber:[nsnumber numberwithint:(int)numvalue]]; Message parameter names are part of the message name: touchesended:withevent: 67 UIKit AppDelegate Main entry point to applica8on. Analagous to a graphical void main(...). Holds reference to and ini8alizes first View Controller. Many samples use AppDelegate for global variables (not a good idea)

24 Physical Devices Register on Developer Portal ($99 or $299) Get Developer Key Configure App IDs Generate Provisioning Profile Update Xcode w/provisioning Profile Deploy to Device Extremely error- prone and briule process. Follow instruc8ons carefully! 69 24