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:
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:
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:
Finally we need to shorten the label so that the UI guidelines can work properly. Finally the View should look like this:
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:
In the attribute inspector (Command-1) you should remove the title so that the label is empty:
Then use the Font browser (Command-T) to set the font to ‘Helvetica, Regular, 17) which looks like this:
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:
In order for the user to input the greetings text we need to add a Text Field from the Library:
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:
After that the View should look like this:
Finally we are going to add two buttons dragged from the Object Library:
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:
and now the View looks this:
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:
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.