Greetings: Design and Create the UI

Create the UI ∞

If you never worked with the Interface Builder please check out the XCode Development Environment>>iPhone Dev.XCode Development Environment[doesn’t exist] Section 2.

Now click in the Groups & Files on the Resources folder inside the project folder and open the iGreetingsViewController.xib file. This will launch the Interface Builder. First we want to add the Label that is the marker for an output like a prompt, the label for the output, an input text field and the two buttons. This is done by dragging the UI component from the Objects Library onto the UI and the adjust the component using the Inspector.

First let us find the Label Component in the Objects Library using the search text box at the bottom:

Attachment “interface.builder.label.library.png” not found

Drag the Component onto the View window, move it around until a dashed blue line appear left and on top of the label and let go of the mouse. These lines are UI design guidelines helping the developer to come up with a good layout and you may follow or ignore it. But for now go with it. This is how it looks like:

Attachment “iGreetings.first.label.raw.png” not found

Now we need to adjust this label because it is only a prompt indicating the label that follows. For that we open the Attribute Introspector with Command-1 and adjust the settings to the following:

Attachment “iGreetings.first.label.attribute.inspector.png” not found

Finally we need to shorten the label so that the UI guidelines can work properly. Finally the View should look like this:

Attachment “iGreetings.first.label.final.look.png” not found

Next we need to add the second label which will carry the greetings text. Again take a Label from the library and drag it onto the view. Make sure the dashed blue line appears after the prompt label. Then stretch the label on the handles to the full length of the view until the dashed blue line appears at the right of the label. Now it looks like this:

Attachment “iGreetings.second.label.raw.png” not found

In the attribute inspector (Command-1) you should remove the title so that the label is empty:

Attachment “iGreetings.second.label.attribute.inspector.png” not found

Then use the Font browser (Command-T) to set the font to ‘Helvetica, Regular, 17) which looks like this:

Attachment “iGreetings.second.label.font.png” not found

Attention: be careful using fonts. If you select one like Courier New nothing will show up on the UI because that Font is not available on the iPhone and XCode will not warn you about this.

Finally the View looks like this:

Attachment “iGreetings.second.label.final.look.png” not found

In order for the user to input the greetings text we need to add a Text Field from the Library:

Attachment “interface.builder.text.field.library.png” not found

Drag it onto the View and stretch it so that it goes from the left to the right dashed blue line. In the Attribute Inspector (Command-1) we adjust the place holder (a note on what is expected in that field) and some keyboard properties like that we want to capitalize words and that the return button should be named Done:

Attachment “iGreetings.input.field.attribute.inspector.png” not found

After that the View should look like this:

Attachment “iGreetings.input.field.final.look.png” not found

Finally we are going to add two buttons dragged from the Object Library:

Attachment “interface.builder.button.library.png” not found

onto the view. One on the left and one on the right with the dashed blue line on top of them. In the Attribute Inspector (Command-1) we set the title to Clear and Greet:

Attachment “iGreetings.greet.button.attribute.inspector.png” not found

and now the View looks this:

Attachment “iGreetings.greet.button.final.look.png” not found

Finally we are done with the UI layout. In case you want to see how it looks like then save the XIB file in the Interface Builder, bring the XCode IDE to the front and hit the Build and Go button on the top toolbar. The simulator will start up and you should see this:

Attachment “iGreetings.first.launch.png” not found

Congratulation, you have your first iPhone Application up and running. If you click on the buttons nothing happens. If you click on the Input Text Field then the keyboard comes up and you can add text but the done button does not make the keyboard disappear nor does anything else happen. That is now the task for the next piece.