Updating User Interface Controls

| Blog | October 21, 2010

Just like any good programmers we decided to bite this off the same day Apple lifted the NDA even faced with the time constraints. Needless to say the first app will be VERY simple, however it does demonstratesomestuffIstumbled on the first time I started coding against the iPhone SDK.

The app is “Minutes to Midnight” it is simply a countdown of the time left I have to finish this app before tomorrow :). This idea came from my friend Chris Craft who committed (and completed!) 30 day of Windows Mobile development.

To get started fire up xCode and
Click: File->New Project.

From the “New Project” dialog
Select: iPhone OS ->Applications-> View-Based Application
Name It: I named mine “MinutesToMidnight”

This project already has a UIView we that will be the main view of or application. I imagine a count down looking like a plastic alarm clock which of cource counts backwards to zero. Let make our text have a red LED look and our back ground black.

First lets open our UIView interface and give it a black background
Double Click “MinutesToMidnightViewController.xib” to launch “Interface Builder”
Click: Tools -> Reveal In Document Window -> View
Click: Tools -> Attributes Inspector
Select the background attribute and set it to Black

Now lets add a UILabel that will be the display for our countdown.
Click: Tools -> Library
Drag a Label onto the Main View
Stretch and size the Label to your liking
I recomend centering the text and setting the color to red for this project

We need to reference the label in our code so we can update the label
In the document window “File’s Owner”
Click: Tools->Idenity Inspector
In the inspector click the + under “Class Outlets”
Change myOutlet1 to “countdownLabel”
Change id to UILabel
Click enter to make sure they commit

Now we need to update our class file
Still in interface builder make sure “File’s Owner” is still selected in the Document Explorer
Click: File->Write Class Files
Save As: “MinutesToMidnightViewController”
Click: Save
Click: Merge
In Actions drop down (bottom right) choose “Select Left”
Click: red circle in title to close the window
Click: Save
Close the last merge window
Open xCode and rebuild project

Now we need to wire up the Label in Interface Builder to the UILabel in the class file
Reopen Interface Builder
Select the Label in the View or in Document Window
Click: Tools -> Connection Inspector
Move your mouse cursor over the empty circle to the right of text “New Referencing Outlet” (the circle will change to a Plus(+))
Mouse Click then drag the Plus (+) to “File’s Owner” in Document Window
When you release select countdownLabel in the popup list
Click: File -> Save then close Interface Builder

Return to xCode and rebuild the project

Okay getting closer, we need to do the following to finish up.
Start a timer
Update the label on timer
Select a cool (nastalgic) font

Start Timer
In xCode open
In MinutesToMidnightViewController.h add the line -(void)updateLabel; right before the line @end
In MinutesToMidnightViewController.c add the lines
-(void)updateLabel {
right before the line @end
In MinutesToMidnightAppDelegate.h add the field “NSTimer *timer;” and the method signature “-(void) onTimer;”
In MinutesToMidnightAppDelegate.m
Start the timer in “applicationDidFinishLaunching”
Add the method onTimer that will update the label in the view controller
Invalidat the timer in the method “applicationWillTerminate”
release the timer in dealloc

Update the label
Open MinutesToMidnightViewController.c
Add code to set or cool font in method “viewDidLoad”
Add code to get current time and update label in our new “updateLabel” method.

Now just build and run in the simulator.

Download Source Code: MinutesToMidnight.zip



One Response to “Updating User Interface Controls”

  1. Wondering what do programmers have to add about idea?

Leave a Reply