ip-part1 by vivek
Post on 04-Jun-2018
225 Views
Preview:
TRANSCRIPT
-
8/13/2019 ip-Part1 By vivek
1/70
1
1
iOS - iPhone/iPad
Application DevelopmentWorkshop
Part 1
-
8/13/2019 ip-Part1 By vivek
2/70
2
2
What do you need?
Previous experience in another Object OrientedProgramming (OOP) language will be helpful
Some understanding of C can be helpful, but isnot 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 willneed Apple devices to do real testing on. Thesimulator is not good enough.
-
8/13/2019 ip-Part1 By vivek
3/70
3
3
Introduction
iOS is the operating system that runs iPhones,iPod Touches, iPads, and Apple TVs.
The language used to develop software for iOS isObjective-C. (very similar to C)
This workshop will teach you how to get startedbut will not have time to teach you everything.
This workshop is good preparation for a real fulliPhone/iPad, iOS Development class!
-
8/13/2019 ip-Part1 By vivek
4/70
4
4
What is iOS?
iOS is an OS. Its a subset of Mac OS X.The iOS SDK is the software development kit that
allows application programs to utilize classes andframeworks 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.
-
8/13/2019 ip-Part1 By vivek
5/70
5
5
Device Features
SQLitefor structured data storageMedia supportfor 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 environmentincluding a device
simulator, tools for debugging, memory andperformance profiling
-
8/13/2019 ip-Part1 By vivek
6/70
6
6
Download the iOS SDK
Download the latest from the Apple App store
This is only available for Apple Macintoshcomputers
Its freeTo build to device and submit to the app store,you will be required to becomes a register AppleiOS developer
Its $99 year for the basic account If you plan to get a job in iOS development, youwill need to establish a basic account and submitsomething to the Apple Store. Maybe a game?
-
8/13/2019 ip-Part1 By vivek
7/707
7
Lets get started - Launch Xcode
You are presentedwith the Welcomescreen:Create a new projectConnect to a repositoryLearn about usingXcode
Go to Apples PortalGo ahead and click onCreate a new project
-
8/13/2019 ip-Part1 By vivek
8/708
8
Project Template
There are severalpredefinedtemplates to help
you get startedon a new project
For now, click on
Single ViewApplication
-
8/13/2019 ip-Part1 By vivek
9/709
9
Project Options
The Product Name is the name ofyour app
Company Identifier is yourorganization name such asedu.itu (reverse domain)
Class Prefix (leave empty) Device Family: iPad, iPhone,
Universal (Universal means that asingle binary will have screens foriPhone, iPod Touch, and iPads)
Storyboards Automatic Reference Counting Include Unit Tests (leave
unchecked as we are not using)
-
8/13/2019 ip-Part1 By vivek
10/70
10
10
Source Control
Asks for a location for SourceControl
By Default, it will use a localGIT repository
New developers not used to
source control this isextremely useful! It keeps track of versions, lets
you see whats changed, andwill undoubtedly be used inany team project you run into
in the real world GIT and Subversion are two
popular source controlssystems there are manyothers to choose from
-
8/13/2019 ip-Part1 By vivek
11/70
11
11
Where do I start?
-
8/13/2019 ip-Part1 By vivek
12/70
12
12
Lets build the default project
Click the Run button (upper left of the screen)
The iPad simulator will launch (You can alsochange this to iPhone if you want)
You will have a blank white screenPress Command-Q to end the simulator
-
8/13/2019 ip-Part1 By vivek
13/70
13
13
Quick Terminology: MVC
Model-View-Controller (MVC)
MVC is the paradigm of iOS programming
Model: Holds data, should know nothing of the
interfaceView: 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
-
8/13/2019 ip-Part1 By vivek
14/70
14
14
Quick Terminology: Delegate
AppDelegate.hAppDelegate.m
The Delegate is essentiallythe controller of yourapp. It links buttons, labelsand views together
.h files are header files andinterfaces are defined here
.m files are implementationfiles. These contain yourclasses, code, etc.
-
8/13/2019 ip-Part1 By vivek
15/70
15
15
Quick Terminology: Storyboard
These are new to iOS5
Storyboards help you graphically lay out your appbefore you code it.
It makes it easy to see the flow of your appYou are advised to use Storyboards going forwardwith 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 andmake it easier to visualize your views.
We will not be covering nibs in this workshop.
-
8/13/2019 ip-Part1 By vivek
16/70
16
16
Quick Terminology: ARC
Automatic Reference Counting(ARC)
The LLVM 3.0 compiler handles memorymanagement 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.
-
8/13/2019 ip-Part1 By vivek
17/70
17
17
Quick Terminology: Unit Tests
We will not be discussing Unit Tests in thisworkshop
Be advised unit tests are very useful for yourprograms
The tests can help you make sure your codechanges are not breaking anything.
The goal is to be able to find bugs quicker and fixthem before your code goes to QA (or thecustomer!)
-
8/13/2019 ip-Part1 By vivek
18/70
18
18
Click on the iPhone Storyboard
It shows a blankview
It looks like you are
on a sheet of graphpaper
There are two
buttons belowFirst Responder
View Controller
-
8/13/2019 ip-Part1 By vivek
19/70
19
19
Find the Label
In Xcode, lower righthand corner, scrolluntil you find theobject Label
Drag Label to theblank view
Double click on theLabel you added, andchange it to say Hello
WorldDo the same steps forthe iPad Storyboard
-
8/13/2019 ip-Part1 By vivek
20/70
20
20
Run the project
The iPad and iPhone projects should now displayHello World!
-
8/13/2019 ip-Part1 By vivek
21/70
21
21
Next, add two buttons to your view
Find the Round RectButton, drag two tothe view
Double-click on one of
the buttons and typeHello
Double-click on one ofthe buttons and typeGoodbye
Run your project,click on the buttons
-
8/13/2019 ip-Part1 By vivek
22/70
22
22
Nothing Happens we have totell it to do something
Click on theAssistant Editor
It looks like a
tuxedo
It will be in theupper right hand
corner of yourscreen
-
8/13/2019 ip-Part1 By vivek
23/70
23
23
Linking the ViewObject to yourViewController
You will see yourViewObject in the
middle of the screenThe right hand sideof the screen should
be theViewController.h file
View Object
ViewController.h
-
8/13/2019 ip-Part1 By vivek
24/70
24
24
Link the label
Single click on your Hello Worldlabel
While holding down the Controlkey, left click-drag to theViewController.h file
You need to drag between the@interface and @end in thecode
This will make a new property For the name, call it helloLabel
so we can easily recognize whatit is
This step will allow us to makechanges to the UILabel
-
8/13/2019 ip-Part1 By vivek
25/70
25
25
@interface and @end
Remember that Objective-C is anextensive to the C language
The @ symbol denotes an Objective-C
keyword@interface is the start of a class.@interface Classname: SuperclassAnything between the declaration andend is part of the class
-
8/13/2019 ip-Part1 By vivek
26/70
26
26
@property (weak, nonatomic)IBOutlet UILabel *helloLabel;
A propertyis an attribute of the classGetters and Setters are automatically created for
you
Weak is a memory management termNonatomichas to do with adding mutexes aroundyour getters and setters
IBOutletstands for Interface Builder Outlet. Interface Builder still exists in iOS5 but we are
using the new Storyboardfeature instead.
-
8/13/2019 ip-Part1 By vivek
27/70
27
27
@synthesize helloLabel
Synthesizethis creates theaccessor/mutators (getters/setters)for you
You can write your own if you want,but in general, there is no reason todo this.
-
8/13/2019 ip-Part1 By vivek
28/70
28
28
Link the rest of the buttons
Link helloButton toViewController.h
Link goodbyeButton
to ViewController.hWhen done, you willhave two properties
Now, switch theAssistant window tothe ViewController.mfile
-
8/13/2019 ip-Part1 By vivek
29/70
29
29
TouchUpInside Actions
TouchUpInside events occurif you touch a button and liftoff while inside the buttonThis corresponds to a usertapping a button
Right-Click on the HellobuttonOn the far right, locate TouchUp InsideLeft click-drag this over toyour ViewController.mNotice it creates some codeDo the same for the goodbyebutton
-
8/13/2019 ip-Part1 By vivek
30/70
30
30
IBActionYou created two IBActionsActions signify something that happenswhen you do something for example, pusha button.
When you push a button, it fires the action
These are currently empty methods
- (IBAction)helloPushed:(id)sender {}
- (IBAction)goodbyePushed:(id)sender {}
-
8/13/2019 ip-Part1 By vivek
31/70
31
31
Change the UILabel
- (IBAction)helloPushed:(id)sender {
self.helloLabel.text=@"Hello Pushed";
}
- (IBAction)goodbyePushed:(id)sender {
self.helloLabel.text=@"Goodbye Pushed";}
Selfrefers to the ViewController class
We defined the property helloLabelearlier Textis a property of UILabels that we can set. The @Some text is an NSStringobject that UILabels
can display.
Run your program and push the buttons. You should
see the UILabel change when you press the buttons
-
8/13/2019 ip-Part1 By vivek
32/70
32
32
Tab Controller
If youve ever used an iOS device, you have comeacross apps that use the tab controller.
Several of the built in apps (such as the phoneapp) use this controller
For the next exercise, we are going to create asimple tab controller
-
8/13/2019 ip-Part1 By vivek
33/70
33
33
Create a new project
Close any existingprojects you haveopen (to make
things easier!)Select File->New->Project from the
application menu
-
8/13/2019 ip-Part1 By vivek
34/70
34
34
Select Tab Template
Select theTabbedApplication
Template foryour project
-
8/13/2019 ip-Part1 By vivek
35/70
-
8/13/2019 ip-Part1 By vivek
36/70
36
36
Look at the Storyboard
Click onMainStoryboard.Storyboard
Notice how the Tab BarController is shown
It also shows the child views
associated with the tab barbuttons This lets the developer see the
views and path to them at aquick glance.
Go ahead and run the project,observe what happens whenyou tap the tab items. Itswitches between the views
-
8/13/2019 ip-Part1 By vivek
37/70
-
8/13/2019 ip-Part1 By vivek
38/70
38
38
Pick the type of file
We are addinga newViewController
so selectObjective-Cclass
-
8/13/2019 ip-Part1 By vivek
39/70
39
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 conventionto have the class bedescription so in this case,ThirdViewController lets anydeveloper know this is aViewController
Leave Targeted for iPad andXIB unchecked
-
8/13/2019 ip-Part1 By vivek
40/70
40
40
Create
Take thedefault options,click the Createbutton
-
8/13/2019 ip-Part1 By vivek
41/70
41
41
We now have a .h and .m
Notice that you nowhave two filesThirdViewController.handThirdViewController.m
If you look at the files,they are basically
skeleton classesready for thedeveloper
-
8/13/2019 ip-Part1 By vivek
42/70
42
42
Add another View Controller
Add a newView Controllerto the
StoryboardAfter you addit, it will not be
linked to anyview
-
8/13/2019 ip-Part1 By vivek
43/70
43
43
Our new view, all alone
Notice that Storyboarddoes not have anyarrows pointing to it
The developer will haveto make theassociation as this view
could be a sub view ofany of the views shown
Link this ViewController to the
-
8/13/2019 ip-Part1 By vivek
44/70
44
44
Link this ViewController to theTab Controller
Hold down the Controlkey, left-click dragfrom the Tab
Controller to the newview we just added
This tells Storyboard
that this view is goingto be accessed fromthe tab controller
-
8/13/2019 ip-Part1 By vivek
45/70
45
45
Select Relationship
-
8/13/2019 ip-Part1 By vivek
46/70
46
46
Label this before we forget
Click on the TextChange this to sayThird
We do not have anygraphics if we did, wewould want to goahead and add agraphic for this.
Note: you will needgraphics for standardiPhones, retina, andiPads.
Lets be more specific about the
-
8/13/2019 ip-Part1 By vivek
47/70
47
47
Lets be more specific about theclass
Left Click on your newview in Storyboard icon on right bottom
Click the Identify
Inspector (upper right)Notice how the class iscurrentlyUIViewController
We need to make thisto be associated withour ThirdViewController(which is a subclass ofUIViewController)
-
8/13/2019 ip-Part1 By vivek
48/70
48
48
Select ThirdViewController
From the combo box,scroll until you findThirdViewController
This will let us do anycustom actions wemight need to do
Remember:
ThirdViewControllerhas all of the methodsand properties of aUIViewController!
-
8/13/2019 ip-Part1 By vivek
49/70
49
49
Lets Replace the First View
We are going toreplace theFirstViewControllerwith aTableViewController
Click on First View,hit the Delete button
to remove it
-
8/13/2019 ip-Part1 By vivek
50/70
-
8/13/2019 ip-Part1 By vivek
51/70
51
51
Embed Navigation Controller
From the Xcodemenu bar, selectEditor->Embed In->NavigationController
Notice that anotherview controller is
added to theStoryboard canvas
-
8/13/2019 ip-Part1 By vivek
52/70
52
52
Check it out
This is what we did inthe previous slide
Since the Navigation
Controller is acontainer, there is arelationship betweenthe Navigation
controller and thetable view controller.(Noted by theconnecting arrow)
-
8/13/2019 ip-Part1 By vivek
53/70
53
53
Hook up the Scenes
Ctrl-drag fromthe Tab Barcontroller to the
Navigationcontroller
Select
Relationship View Controllers
-
8/13/2019 ip-Part1 By vivek
54/70
54
54
Look at Storyboard now
The relationship isdefined
When we added this,
it added an entrylabeled Item as thelast tab bar button
Drag this Item andmake it the first entryin our tab bar
-
8/13/2019 ip-Part1 By vivek
55/70
-
8/13/2019 ip-Part1 By vivek
56/70
56
56
Name the Navigation bar
In the Table Viewwindow, double-clickon the Title bar.
Type in Things togive the Navigationbar a name.
In a real app, you
would type somethingdescriptive andmeaningful to theuser.
-
8/13/2019 ip-Part1 By vivek
57/70
57
57
The Navigation Bar has a title
You can now see thetitle has a name.
If you have noticed,we have been getting
a warning from thecompiler for ourstoryboard.
Prototype table cellsmust have reuseidentifiers
-
8/13/2019 ip-Part1 By vivek
58/70
58
58
Lets get rid of the warning
Warnings are typically not somethingyou want in your program.
We are getting this warning becausewe have not configured the cells yetso the compiler does not knowwhat they are.
-
8/13/2019 ip-Part1 By vivek
59/70
59
59
Table View Controller
Click on theblank prototypecell
Next, click onthe attributesinspector and
set Style toSubtitle.
-
8/13/2019 ip-Part1 By vivek
60/70
60
60
Attributes Inspector
-
8/13/2019 ip-Part1 By vivek
61/70
-
8/13/2019 ip-Part1 By vivek
62/70
f l
-
8/13/2019 ip-Part1 By vivek
63/70
63
63
New file
Obj i C Cl
-
8/13/2019 ip-Part1 By vivek
64/70
64
64
Objective-C Class
Thi Vi C ll
-
8/13/2019 ip-Part1 By vivek
65/70
65
65
ThingsViewController
C t t dd t j t
-
8/13/2019 ip-Part1 By vivek
66/70
66
66
Create to add to project
Set the class with Identify
-
8/13/2019 ip-Part1 By vivek
67/70
67
67
Set the class with IdentifyInspector
Click on theTableViewControllerobject (the whole
object will be outlinedin blue)
Now, click class and
selectThingsViewController
B ild d !
-
8/13/2019 ip-Part1 By vivek
68/70
68
68
Build and run!
Go ahead and build the appYou can now add items to the table viewif you want to continue working with this
app.
H ll T bB E l
-
8/13/2019 ip-Part1 By vivek
69/70
69
69
HelloTabBar Example
Download:http://bhecker.com/ip-HelloTabBar.zip
Save to your desktop.
Double-click to uncompress the fileDouble-click onHelloTabBar.xcode.proj to load the
project in XCodeExamine and customize as you wish!
http://bhecker.com/ip-HelloTabBar.ziphttp://bhecker.com/ip-HelloTabBar.ziphttp://bhecker.com/ip-HelloTabBar.ziphttp://bhecker.com/ip-HelloTabBar.zip -
8/13/2019 ip-Part1 By vivek
70/70
top related