Date post: | 21-Apr-2015 |
Category: |
Documents |
Upload: | mobilexconference |
View: | 83 times |
Download: | 5 times |
Introduction to iOS DevelopmentMarch 5, 2012
Introductions• Speakers: • Chris Rider• Northern Kentucky University• Center for Applied Informatics• Senior Technology Architect• [email protected]
• Eric Rolf• Northern Kentucky University• Center for Applied Informatics• Mobile Application Developer• [email protected]
Resources• http://developer.apple.com/iOS• iPhone Programming, The Big Nerd Ranch Guide• Joe Conway & Aaron Hillegass
• Programming in Objective-C• Kochan
• http://www.raywenderlich.com• Excellent iOS5 tutorials!
• Stanford – free iOS lectures. Worth the time to watch!
Prerequisites for iOS Development• Previous experience in another Object Oriented Programming
(OOP) language will be helpful • Understanding of OOP concepts.• Some understanding of C can be helpful, but is not required.
ObjectiveC builds on top of C. You will eventually run into pointers and other fundamental “C” features
• Previous experience with an Integrated Development Environment (IDE) is helpful, but not required
• Mac computer running OS X Lion• 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.
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.• This class will teach you how to get started but will not have
time to teach you everything.
What is iOS?• iOS is an operating system – 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 class will focus on iOS SDK 5.
• iOS is multitasking and runs on several 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.• Xcode provides an interface to the compiler, editor, debugger,
and code profiling tools.
Device Features• For the rest of the presentation, assume we are discussing
iPhones, iPads, and iPod Touches. Although Apple TV runs iOS, Apple currently does not allow developers to create custom code for this device (yet).
• 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
Capabilities of Mobile Devices • Internet access• Touch screen• GPS (global positioning system – satellite-based system to
determine a location)• Local storage• Camera• Media playback• Phone• Bluetooth for device communication
Limitation of Mobile Devices• Screen size• Touch screen• No physical keyboard or trackball – a finger or stylus is the
primary interface to the device• Memory• Storage• Battery Life• Cell network• Sometimes flaky networks• Ergonomics
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 is $99 year for the basic account
Xcode
Launch Xcode• After you’ve
downloaded and installed Xcode, launch it• 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”
Project Template• There are several
predefined templates to help you get started on a new project• For now, click on
Single View Application
Project Options• The Product Name is the name
of your app• Company Identifier is your
organization name – such as edu.nku (reverse domain notation)
• 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)
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
Where do I start?
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
Quick Terminology: MVC• Model-View-Controller (MVC)• MVC is the paradigm of iOS programming• Model: Hold 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
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 –
interfaces are defined here• .m files are
implementation files. These contain your classes, code, etc.
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• We will not have a lot of time to dig into this but will use it in
upcoming examples• 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 class.
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 (unless you want to track down memory leaks, zombies, random crashes, etc).
• We will not talk much about them, but there are cases in which you might not want ARC.
• At WWDC 2011, this announcement brought a standing ovation from all of the developers in attendance!
Quick Terminology: Unit Tests• We will not be discussing Unit Tests in this class• 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 end result – you should be able to find bugs quicker and fix them before your code goes to QA (or the customer!)
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• First Responder• View Controller
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
Run the project• The iPad and iPhone projects should now display Hello World!
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
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
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
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
Hold on – what is this stuff? interface• @interface• @end
• Remember that ObjectiveC is an extensive to the C language• The @ symbol denotes an
ObjectiveC keyword• @interface is the start of
a class.• @interface Classname:
Superclass• Anything between the
declaration and end is part of the class
Hold on – what is this stuff? property• @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 – we will not be discussing this in depth
• Nonatomic has to do with adding mutexes around your getters and setters – we will not be discussing in this class
• IBOutlet stands for Interface Builder Outlet. Interface Builder still exists in iOS5 – we are using Storyboard instead. We will not be discussing it much in this class
• (Interface Builder is your interface to working with nibs)
Hold on – what is this stuff? synthesize• @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 so
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
TouchUpInside ActionsTouchUpInside events occur if you touch a button and lift off while inside the buttonThis corresponds to a user tapping a buttonClick on the Hello buttonOn the far right, locate Touch Up InsideLeft click-drag this over to your ViewController.mNotice it creates some codeDo the same for the goodbye button
IBAction• You created two
IBActions• Actions signify
something that happens when you do something – like 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 {
• }
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 tht 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
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 session, we are going to create a simple tab
controller
Create a new project• Close any existing
projects you have open (to make things easier!)• Select File->New-
>Project from the application menu
Select Tab Template• Select the Tabbed
Template for your project
Set Options• For product name, call it
tabDemo• Whatever you used for
Company Identifier should be set – if not, edu.nku is ok
• Leave Class Prefix blank• For Device family, choose
iPhone (to keep it simple)• Enable Storyboards and Arc• Do not select Unit Tests as
we are not going over them
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
Lets add a new class: ThirdViewController• On the left hand side,
right-click on the tabDemo folder and select New File
Pick the type of file• We are adding a new
ViewController – so select Objective-C class
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 (now, Third might not be the most descriptive…)
• Leave Targeted for iPad and XIB unchecked
Create• Take the default
options, click the Create button
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
Add another View Controller• Add a new View
Controller to the Storyboard• After you add it, it
will not be linked to any view
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
Link this ViewController to the Tab Controller• Hold down he
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
Select Relationship
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 iPad (and if rumors are correct, iPad retina!)
Lets be more specific about the class• Left click on your new
view in Storyboard• 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)
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!
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
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
Embed Navigation Controller• From the Xcode
menu bar, select Editor->Embed In->Navigation Controller• Notice that another
view controller is added to the Storyboard canvas
Check it out• This is what we did in
the previous slide• Since the Navigation
Controller is a container, there is a relationship between the Nav controller and the table view controller. (Noted by the connecting arrow)
Hook up the Scenes• Ctrl-drag from the
Tab Bar controller to the Nav controller• Select Relationship
Look at Storyboard now• The relationship is
defined• When we added this,
it added an entry labeled “Item” as the last tab bar button• Drag this “Item” and
make it the first entry in our tab bar
Fix up the tab bar items• Drag item to the left
most position• Also, let’s rename
this back to First• Double-click on Item
in the Navigation Controller scene, change text to First
Name the Nav bar• In the Table View
window, double-click on the Title bar.• Type in “Things” to
give the Navigation bar a name.• In a “real” app, you
would type something descriptive and meaningful to the user.
The Nav Bar has a title• You can now see the
title has a name.• If you have noticed,
we have been getting a warning from the compiler for our storyboard.• “Prototype table cells
must have reuse identifiers”
Let’s get rid of the warning• Warnings are typically not something you want in your
program.• We are getting this warning because we have not configured
the cells yet – so the compiler does not know what they are.
Table View Controller• Click on the blank
prototype cell• Next, click on the
attributes inspector and set Style to Subtitle.
Attributes Inspector
More cell attributes• Set the Accessory attribute to
Disclosure Indicator.• Give the cell an identifier 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 attention to.)
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
New file
Objective-C Class
ThingsViewController
Create to add to project
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
Click on ThingsViewController.h• Add an NSMutableArray pointer• This arry will contain Things objects – it will be the main data
model for the app.
#import <UIKit/UIKit.h>
@interface ThingsViewController : UITableViewController
@property (nonatomic, strong) NSMutableArray *things;
@end
Let’s add a class called Thing• We need to add a Thing class to our project.• Right-click, add a new Objective-C class template.• Name it Thing, subclass of NSObject.
New File
Objective-C Class
Class Thing
Create
Modify thing.h
Modify thing.m
Modify AppDelegate.m• The AppDelegate will create a Thing array and add some
sample data to it• The first thing you need to do is click on AppDelegate.m• At the top of the file, add:• #import “Thing.h”• #import “ThingsViewController.h”
• The imports tell the delegate what these classes are so we can use them
• Add an instance variable named things (It is an NSMutableArray pointer)
AppDelegate.m
didFinishLaunchingWithOptions method
Now the hard part…• This looks more complicated that it really is: UITabBarController *tabBarController =(UITabBarController *)self.window.rootViewController; UINavigationController *navigationController =[[tabBarController viewControllers] objectAtIndex:0]; ThingsViewController *thingsViewController = [[navigationController viewControllers] objectAtIndex:0]; thingsViewController.things = things;
tabBarController• UITabBarController *tabBarController
• This line of code lets us access the storyboard’s initial view controller (the tab bar controller)
• We now have a pointer to it.
navigationController• UINavigationController *navigationController
• Using the tabBarController pointer, we are just getting a pointer to the navigationController
• ThingsViewController *thingsViewController
• Next, we get access the the thingsViewController
• We are not done yet!
ThingsViewController.m• Find the method
numberOfSectionsInTableView
• Change the return 0 to “return 1”• (Also, remove the
#warning)
ThingsViewController.m
• Change numberOfRowsInSection• Notice what we are doing with the return• We are returning a count of the number of
objects in the things array.• (In our example, this is 3)
ThingsViewController.m• Modify cellForRowAtIndexPath• We are interfacing with the ThingCell we defined earlier• We then add the name and how many (in this case, we are converting the
returned value from an NSInteger to an NSString)
Build and run!• Go ahead and build the
app• You can now scroll and
see the items added to the table view.• Tapping on an entry
currently just highlights it• This session will not
add the code to go to the detail screen