iPhone SDK 3 Programming Advanced Mobile Development for Apple iPhone and iPod touc phần 10 doc

We still need to create these UI elements in Interface Builder and make the connections.We also need to update the .m file of the view controller and add the following statement: @synthe

Working with Interface Builder

In this appendix, we use Interface Builder to build a couple of iPhone applications The techniquesyou learn from building these applications should prove to be useful in building similar iPhoneapplications

F.1 National Debt Clock Application

In this section, we develop the National Debt Clock application The application’s UI is developedusing Interface Builder A screenshot of the completed product is shown in Figure F.1

F.1.1 Creating the project

Launch XCode Click on File > New Project Click on the Application category under iPhone OS.Choose Window-based Application and click on Choose

Name the projectNationalDebtand click Save

F.1.2 Creating the view controller class

Right-click on the Classes group and select Add > New File as shown in Figure F.2

SelectUIViewController subclassunder the Cocoa Touch Class as shown in Figure F.3 andclick on Next

Name the fileDebtViewController.m, make sure that the check box for generating the headerfile is checked, and click Finish

As the screenshot of the application in Figure F.1 shows, there are four main UI elements:

• A label An instance ofUILabelis used to show the textNational Debt Clock This is astatic text that our application need not change No code in our controller needs to know aboutthis UI element

Figure F.1 A screenshot of the National Debt Clock application.

Figure F.2 Adding a new class

• An activity indicator An instance of the UIActivityIndicatorViewclass is used toindicate that we are busy fetching the image representing the national debt figure from theInternet Our controller code needs to know about this UI element

To connect an object in our controller’s code with this UI element, we need to add an InterfaceBuilder outlet property of typeUIActivityIndicatorView In addition, we need to add alink between the UI element and the outlet in Interface Builder

Working with Interface Builder 593

Figure F.3 Adding a subclass of the UIViewController class

• An image view The national debt clock is retrieved as an image from the Internet We need

to add an instance ofUIImageViewto the view of the view controller In addition, we need toadd an outlet in our view controller header file and connect it to the image view UI element.Whenever we retrieve the image from the Internet, we need to set theimageproperty of the

UIImageViewobject to the fetched image

• A refresh navigation item Whenever the user taps on the Refresh button, we need to bring

a fresh image from the Internet We need to add a method that is tagged withIBActionandconnect it to the button

The following shows the updated header file for theDebtViewControllerclass

UIImageView *imageView;

UIActivityIndicatorView *busy;

}

@property(nonatomic, retain) IBOutlet UIImageView *imageView;

@property(nonatomic, retain) IBOutlet UIActivityIndicatorView *busy;

UI element We still need to create these UI elements in Interface Builder and make the connections.

We also need to update the m file of the view controller and add the following statement:

@synthesize imageView, busy;

Also, we need to deallocate the objects in thedeallocmethod as shown below:

- (void)dealloc {

self.busy = nil;

self.imageView = nil;

[super dealloc];

}

Therefreshmethod is declared in the view controller class using theIBActiontag This will help

in connecting the button’s action with ourrefreshmethod

F.1.3 The application delegate class

Now, we turn our attention to the application delegate class As you can see from the screenshot ofour application in Figure F.1, we are using a navigation controller The navigation controller will becreated in Interface Builder We still need a reference to it in the application delegate so that we canadd its view (which is basically the view of its root view controller) as a subview to the main windowwhen the application is launched

Modify theNationalDebtClockAppDelegate.hheader file by adding a new instance variable

as shown below:

UINavigationController *navCtrl;

Add the property for this instance variable with an outlet tag as shown below:

@property (nonatomic, retain) IBOutlet UINavigationController *navCtrl;

Working with Interface Builder 595

We also need to synthesize the navCtrlproperty and release it in thedeallocmethod of theapplication delegate

In theapplicationDidFinishLaunching:method, we need to add the view property of thenavigation controller as a subview to the main window

The following shows the updated method:

- (void)applicationDidFinishLaunching:(UIApplication *)application {[window addSubview:navCtrl.view];

Double-click onMainWindow.xibunder the Resource group as shown in Figure F.4

Figure F.4 Opening the MainWindow.xib file

Interface Builder will be launched, and theMainWindow.xibdocument will be opened

Choose the Browser mode to display the document’s objects in a browser control while showing theparent–child relationships (see Figure F.5)

Figure F.5 The Browser display mode for objects in an XIB document.

Adding a navigation controller

Now, we would like to add a navigation controller This navigation controller will manage thenavigation between several views that can be represented hierarchically

Although our application does not need to present views hierarchically, it does utilize a navigationcontroller for the placement of a refresh button on its navigation bar

When you open the XIB document, several windows open in Interface Builder One of these windows

is the Library window Inside the Library window, you are given a list of several categories ofelements You select an element from the list and drag and drop it onto the XIB document or anotherelement

Click on the Controllers category in the Library window and locate the Navigation Controllerelement from the list as shown in Figure F.6

Figure F.6 The Controllers category in the Library window

Working with Interface Builder 597

Click on the Navigation Controller object and drag and drop it onto the document as shown inFigure F.7

Figure F.7 Adding a navigation controller to our XIB document

The document should look as shown in Figure F.8

Figure F.8 The XIB document after adding a navigation controller

Now, we would like to connect the navigation controller we’ve just added to thenavCtrlproperty inthe application delegate class Control-click the application delegate object to show the Connectionspanel as shown in Figure F.9

Click on thenavCtrlconnector and link this outlet to the navigation controller object as shown inFigure F.10

The status of the application delegate outlets should look like the one in Figure F.11

Figure F.9 The Connections panel of the application delegate.

Figure F.10 Connecting the navCtrl property to the navigation controller component

Figure F.11 The status of the application delegate connections after adding a connection to the navigationcontroller

Adding a root view controller

A navigation controller must have at least one view controller This view controller is referred to asthe root view controller

Working with Interface Builder 599

Figure F.12 The navigation controller window

before adding the root view controller

Figure F.13 Adding a root view controller to thenavigation controller

To add a root view controller, all we need to do is to drag and drop a view controller on the openednavigation controller element

Make sure that the navigation controller is open (if it is not, double-click on it) It should look likethe one in Figure F.12

Drag and drop a view controller object from the Library on the navigation controller as shown inFigure F.13

Once the view controller is dropped onto the navigation controller, you will be able to see thiscontroller as a child element in the Browser view of the XIB document as shown in Figure F.14

Figure F.14 A view controller added as a root controller of a navigation controller

Building the main view of the root controller

Now, we want to build a view for the view controller Select Windows, Views & Bars from theLibrary and drag and drop a View object onto the view controller window as shown in Figure F.15

Figure F.15 Adding a View UI element to the root view controller

Now, the view controller has a View object and a Navigation Item object as shown in Figure F.16

Figure F.16 The Browser view for the view controller after adding a View UI element

Drag and drop a Label object (from the Inputs & Values category) onto the view as shown inFigure F.17

Working with Interface Builder 601

Figure F.17 Adding a Label UI element

Double-click on the label object and change the label text as shown in Figure F.18 You also need toresize the label’s frame

Figure F.18 Changing the text and dimension of the Label UI element

Change the color and font size attributes of the label to red and 24 pts as shown in Figure F.19.Drag and drop an Image View object (found under the Data Views category) as shown in Figure F.20

Figure F.19 Changing the color and font size of the Label UI element.

Figure F.20 Adding an Image View UI element to the view

Resize the image view as shown in Figure F.21

Working with Interface Builder 603

Figure F.21 Resizing the Image View UI element

Select Aspect Fit Mode as shown in Figure F.22

Figure F.22 Changing the view mode to Aspect Fit

Drag and drop an Activity Indicator View as shown in Figure F.23

Figure F.23 Adding an Activity Indicator View

Click on it and configure it to Hide When Stopped as shown in Figure F.24

Figure F.24 Configuring the Activity Indicator View to Hide When Stopped.

Double-click on the Navigation Item title and enter National Debt Clock as shown in Figure F.25

Figure F.25 Changing the navigation item title

Linking the UI elements with the code

Now, we would like to link the view controller object with our code

Make sure that the view controller object is selected and click on the Identity tab in the Inspectorwindow as shown in Figure F.26

Select theDebtViewControllerfor the Class attribute

Control-click the view controller and connect thebusyproperty to the Activity Indicator View asshown in Figure F.27

Connect theimageViewproperty to the Image View as shown in Figure F.28

Working with Interface Builder 605

Figure F.26 The Identity tab in the Inspector window of the view controller

Figure F.27 Connecting the busy property to the Activity Indicator View

Figure F.28 Connecting the imageView property to the Image View.

Now, we would like to add a Refresh button on the navigation bar so that the user can refresh theNational Debt Clock

Under Windows, Views, & Bars window, select the Bar Button Item object and drop it on thenavigation bar as shown in Figure F.29

Figure F.29 Adding a Bar Button Item to the navigation bar

Click on it and choose the Refresh for Identifier as shown in Figure F.30

Working with Interface Builder 607

Figure F.30 Choosing a Refresh style for the bar button item

Now, Control-click on the view controller and connect therefreshaction to the button as shown

in Figure F.31

The connectivity of the outlets and actions of the view controller should look like the one inFigure F.32

Finishing the view controller class

We would like to show the National Debt Clock on startup Override theviewDidLoadof the viewcontroller as shown below:

- (void)viewDidLoad {

[super viewDidLoad];

[self refresh];

}

Figure F.31 Connecting the refresh action method to the button.

Figure F.32 The connectivity of the outlets and actions of the view controller

Working with Interface Builder 609

Therefreshaction method shows the activity indicator view while fetching the image from theInternet and is shown below:

-(IBAction)refresh{

[self performSelectorInBackground:@selector(showActivityIndicator:)withObject:[NSNumber numberWithBool:YES]];

self.imageView.image = [UIImage imageWithData:

[NSData dataWithContentsOfURL:[NSURL URLWithString:DEBT_IMAGE]]];[self performSelectorInBackground:@selector(showActivityIndicator:)withObject:[NSNumber numberWithBool:NO]];

}

TheDEBT_IMAGEis defined as follows:

#define DEBT_IMAGE @"http://www.brillig.com/debt_clock/debtiv.gif"

TheshowActivityIndicator:method, which is shown below, shows/hides the activity view inits own thread

- (void)showActivityIndicator:(NSNumber*)show{

NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];

[show boolValue]? [busy startAnimating] :[busy stopAnimating];

Figure F.33 A screenshot of a toolbar-based application.

The view controller has amessage IBOutletreferring to aUILabelinstance which will be loadedfrom theXIBfile In addition, four actions are declared, each corresponding to a button on the toolbar.The implementation of this view controller class is shown below:

Working with Interface Builder 611

Now, let’s go ahead and create the view of this controller using Interface Builder

Right-click on the Resources group and select Add > New File as shown in Figure F.34

Figure F.34 Adding a new file to the Resources group

Select the User Interface category and the Empty XIB template as shown in Figure F.35

Click on Next and name the fileToolBarView.xiband hit Finish Now, open the.xibfile by double-clicking on it Interface Builder will be launched and the file will be opened asshown in Figure F.36

ToolBarView-Select the File’s Owner node and click on the Identity tab Choose the class to be Controlleras shown in Figure F.37

ToolBar-Select the View UI element under Windows, Views & Bars shown in Figure F.38

Drag and drop a view on theToolBarView.xibdocument The document should look like the oneshown in Figure F.39

Change the height of the View to 480 as shown in Figure F.40

Drag and drop a Label UI element on the view Change the layout of the label to center and its font’ssize to 36 as shown in Figure F.41

Figure F.35 Selecting an Empty XIB template.

Figure F.36 An empty XIB file

Figure F.37 Changing the identity of the File’s Owner to the ToolBarController class

Working with Interface Builder 613

Figure F.38 The View UI element in the Library

Figure F.39 The XIB document after adding a View to it

Figure F.40 Changing the height of the View

Figure F.41 Changing the label’s layout and font size.

Drag and drop a Toolbar UI element on the view as shown in Figure F.42

Figure F.42 The state of the view after adding a label and a toolbar

Working with Interface Builder 615

Add an additional three Bar Button Items (Figure F.43) to the toolbar as shown in Figure F.44

Figure F.43 A Bar Button Item UI element

Figure F.44 Adding an addition three Bar Button Items to the toolbar

Locate the Fixed Space Bar Button Item UI element shown in Figure F.45

Figure F.45 Fixed Space Bar Button Item

Drag and drop it on the left-hand side of the toolbar as shown in Figure F.46

Figure F.46 A Fixed Space Bar Button Item added to the toolbar

You can resize this element to make the right and left margins of the toolbar equal

Control-click the File’s Owner and link themessageoutlet to the label as shown in Figure F.47.Connect theviewproperty to the View UI element as shown in Figure F.48

Figure F.47 Connecting the message outlet to the Label UI element.

Figure F.48 Connecting the view property to the View UI element

Figure F.49 Connecting the marge action method to the Marge bar button item

Connect themargeaction method to the Marge bar button item as shown in Figure F.49

Repeat the process for the other three bar button items The connectivity state of theControlleris shown in Figure F.50

ToolBar-Working with Interface Builder 617

Figure F.50 The state of connectivity of the ToolBarController

F.2.3 Putting it together

Now that the view controller is complete, we can create a new instance of it and add its view as asubview of the main window as shown below

- (void)applicationDidFinishLaunching:(UIApplication *)application {

self.ctrl = [[[ToolBarController alloc]

initWithNibName:@"ToolBarView" bundle:nil] autorelease];[window addSubview:ctrl.view];

[window makeKeyAndVisible];

}

The complete application can be found in the ToolBarDemo project available from the sourcedownloads

REFERENCES AND

BIBLIOGRAPHY

[1] http://geocoder.ibegin.com/downloads.php.

[2] ZIP code: http://en.wikipedia.org/wiki/ZIP code.

[3] B’Far, R, Mobile Computing Principles: Designing and Developing Mobile Applications with UML and XML,

Cambridge University Press, 2004.

[4] Core Location Framework Reference, Apple documentation.

[5] Apple Push Notification Service Programming Guide.

[6] Core Data Programming Guide, Apple documentation.

Bibliography

[7] Beam, M and Davidson, JD, Cocoa in a Nutshell: A Desktop Quick Reference, O’Reilly, 2003.

[8] Brownell, D, SAX2, O’Reilly, 2002.

[9] Davidson, JD, Learning Cocoa With Objective C, 2nd edition, O’Reilly, 2002.

[10] Duncan, A, Objective-C Pocket Reference, 1st edition, O’Reilly, 2002.

[11] Garfinkel, S and Mahoney, MK, Building Cocoa Applications: A Step-by-Step Guide, 1st edition, O’Reilly, 2002 [12] Hillegass, A, Cocoa ® Programming for Mac ® OS X, 3rd edition, Addison-Wesley Professional, 2008.

[13] Kochan, S, Programming in Objective-C, Sams, 2003.

[14] Mott, T, Learning Cocoa, O’Reilly, 2001.

[15] Owens, M, The Definitive Guide to SQLite, Apress, Inc., 2006.

[16] Tejkowski, E, Cocoa Programming for Dummies, 1st edition, For Dummies, 2003.

[17] Williams, E, Aviation Formulary V1.43: http://williams.best.vwh.net/avform.htm.

[18] Collections Programming Topics for Cocoa, Apple Reference Library.

[19] Document Object Model (DOM): http://www.w3.org/TR/DOM-Level-2-Core/.

[20] Exception Programming Topics for Cocoa, Apple documentation.

[21] Introduction to the Objective-C 2.0 Programming Language, Apple documentation.

[22] Key-Value Coding Programming Guide, Apple documentation.

[23] libxml2: The XML C parser and toolkit: http://xmlsoft.org/.

[24] Threading Programming Guide, Apple Reference Library.

[25] The XML standard: http://www.w3.org/TR/REC-xml.

[26] LOCALE DATA MARKUP LANGUAGE (LDML), Unicode Technical Standard #35 http://unicode.org/reports/tr35/tr35-4.html#Date_Format_Patterns.