ip-Part1 By vivek

8/13/2019 ip-Part1 By vivek

1/70

1

1

iOS - iPhone/iPad

Application DevelopmentWorkshop

Part 1


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.


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!


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.


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


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?


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/708

8

Project Template

There are severalpredefinedtemplates to help

you get startedon a new project

For now, click on

Single ViewApplication


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)


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


11/70

11

11

Where do I start?


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


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


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.


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.


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.


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


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


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


20/70

20

20

Run the project

The iPad and iPhone projects should now displayHello World!


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


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


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


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


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


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.


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.


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


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


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


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


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


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


34/70

34

34

Select Tab Template

Select theTabbedApplication

Template foryour project


35/70


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


37/70


38/70

38

38

Pick the type of file

We are addinga newViewController

so selectObjective-Cclass


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


40/70

40

40

Create

Take thedefault options,click the Createbutton


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


42/70

42

42

Add another View Controller

Add a newView Controllerto the

StoryboardAfter you addit, it will not be

linked to anyview


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


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


45/70

45

45

Select Relationship


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


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)


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!


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


50/70


51/70

51

51

Embed Navigation Controller

From the Xcodemenu bar, selectEditor->Embed In->NavigationController

Notice that anotherview controller is

added to theStoryboard canvas


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)


53/70

53

53

Hook up the Scenes

Ctrl-drag fromthe Tab Barcontroller to the

Navigationcontroller

Select

Relationship View Controllers


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


55/70


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.


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


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.


59/70

59

59

Table View Controller

Click on theblank prototypecell

Next, click onthe attributesinspector and

set Style toSubtitle.


60/70

60

60

Attributes Inspector


61/70


62/70

f l


63/70

63

63

New file

Obj i C Cl


64/70

64

64

Objective-C Class

Thi Vi C ll


65/70

65

65

ThingsViewController

C t t dd t j t


66/70

66

66

Create to add to project

Set the class with Identify


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 !


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


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


70/70

ip-Part1 By vivek

Documents

Transcript of ip-Part1 By vivek