Lab 1

Before you carry out this lab (and the succeeding labs), make sure that: The goal for this lab is to familiarize yourself with the Xcode development environment by creating a simple application. The application will contain a single view with a button, a text field, and a label, as shown below: Text may be typed on the text field, and when the button is clicked, the text on the label will be replaced by the text on the field, as the following progression of screenshots indicates:
image image image

Follow these instructions closely, in the specified order.
  1. Execute the Xcode application. The following welcome screen will appear:
    image
    Select "Create a new Xcode project".
  2. Create a new project using the Single View Application template. Name your project HelloWorld and make sure that the project is created under the folder you created earlier. If you have done this properly, the following will be displayed to indicate that you can begin development under this project:
    image
  3. Click on "Mainstoryboard.storyboard" on the left panel of the screen. A storyboard panel will appear on which you will be able to add the visual components necessary for this lab. The components can be found on the lower right panel. Drag a text field, a label, and a button on the storyboard panel. You can update certain properties of the components by selecting a component and then updating values on the right side of the screen. Arrange it so that the texts on the label and the button are updated ("Click" for the button, "Hello" for the label). In addition, update the background color of the main view (to light blue, for example). When done, your screen would look like this:
    image
    Make sure you align the components so they appear on the upper half of the view. Also, provide the appropriate justification (e.g., centered) for the components so that they are aligned according to your preference.
  4. At this point, you may already build and execute the application and you will see the components you added appear on a simulation. You could do this by clicking on the play button on the upper left area of the screen. A separate IOS Simulator application program is invoked which executes your program. You will notice that nothing interesting happens when you interact with the components (click the button or add text on the text field). Quit the simulator once you are done to return to the Xcode application.
  5. The next step will be to add functionality to the visual components. You will need to associate the button to an action and arrange it so that the text field and the label interact when you click on the button. You will first need to revise the panels on the screen. Do this by clicking on middle button of the editor panel and by (un)-clicking the first and last button of the view panel. These panels can be found on the upper right area of your screen. The editor and view panels will originally look like this:
    image
    but should look like this after you have clicked on the appropriate buttons:
    image
    Both the storyboard and a code panel should be visible.
  6. Select the button and control-drag from the button to the code area, specifically between the lines that start with @interface and @end. A popover will appear and you will need to assign several settings, as follows: The last three of the settings have the convenient default assignments. Refer to the following screenshot.
    image
    Select and control-drag from the label to the same area to provide an outlet connection for the label. Provide a name for the label (e.g., "label"). The rest of the settings can have their default assignments.
    image
    Select and control-drag from the text field to the same area to provide an outlet connection for the text field. Provide a name for the text field (e.g., "field").
    image
  7. You are almost done. All that is left is to write some code to signify the intended action when the button is presssed. First, on the upper right hand area of the screen click on the tab that indicates ViewController.h. Change the selection to ViewController.m, to enable editting of the file that would contain the code for the action. Refer to the following screenshot.
    image
    Right before the last closing curly brace (}), add the following single line of code:
     self.label.text = self.field.text; 
    as shown in the following screenshot.
    image
  8. Rebuild and execute (click on the play button). If the application behaves as intended, you are done.
  9. (Optional) Notice that once you have entered text in the text field, a keyboard pops up but it does not disappear when you are done even if you click on the return key. You can arrange for this to be done by assigning a delegate to the text field. Control drag from the text field to the Controller object shown at the bottom of the storyboard, and select "delegate" once the popover appears. Refer to the screen below:
    image
    Then, in ViewController.m, insert the following code right before @end.
    - (BOOL)textFieldShouldReturn:(UITextField *)theTextField {
        [theTextField resignFirstResponder];
        return YES;
    }
    
  10. Quit Xcode, go to the folder containing your application, compress and rename the zip file xxxxxx-HelloWorld.zip, where xxxxxx is your id number. Submit that zip file via moodle.