youth iphone dev tutorial 1

Upload: jheraldo

Post on 07-Jul-2018

216 views

Category:

Documents


0 download

TRANSCRIPT

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    1/26

    1

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    Tutorial 1: Familiar with iPhone App Development

    Overview

    1. Introduction

    2. Creating a New iPhone App Project

    2.1 Creating a New iPhone App Project using Xcode

    2.2 Changing Various iPhone App Settings

    3. Adding UI Components onto Screen View by using Interface Builder3.1 Adding VolcanoRockEscapingView.h and .m to Classes Folder in Xcode

    3.2 Modifying BallShootingViewController.xib

    4. Connecting UI Components with IBOutlets

    4.1 Defining an IBOutlet

    4.2 Connecting the IBOutlet with the UIComponent

    4.3 Other IBOutlets

    4.4 Write to the BallShootingViewController Files

    5. Implementing the “Shake” Function 

    5.1 Shake Detection

    5.2 Variable and Function Declarations

    5.3 Function Implementation

    5.4 Calling initializeData

    5.5 Run and Debug 

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    2/26

    2

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    1. Introduction

    In this tutorial session, we would like to introduce the procedures in developing an iPhone app from

    scratch. You will be able to learn:

    a.  How to create a new iPhone app project

    b.  How to add UI components (e.g., Image, Text, etc.) onto the screen view (iPhone’s display)

    c.  How to establish a connection between a UI component created in Interface Builder with a

    variable (IBOutlet) in the view controller

    The whole lab exercise is divided into four main parts:

    1. Creating a new iPhone app project

    2. Putting UI components onto the screen view by using Interface Builder3. Connecting the UI components with the outlets

    4. Implementing a simple shake function

    2. Creating a New iPhone App Project

    The goal of this part is to allow the students to get familiar with the Xcode and the procedures in

    developing an iPhone app through the creation of a new iPhone app project, and modifying variousproperty settings.

    2.1 Creating a New iPhone App Project using Xcode

    The following describes detailed steps to create a new iPhone app project using Xcode:

    i.  Open Xcode:

    a. 

    Press the icon on the right upper corner of the Desktop.

    b. Type in “  Xcode”  in the blank text field block next to “ Spotlight ” .

    c. Click on Xcode from the pull down menu shown.

    d. Xcode window will then pop up (see next page for the screenshot).

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    3/26

    3

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    ii.  Create a new Xcode project

    a.  Click on “ Create a new Xcode project ”  

    b. 

    A new project creation window will pop up like this:

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    4/26

    4

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    c.  Here, we will develop an iOS Application, and use View-based Application template.

    Therefore, click on icon and set the product to iPhone, i.e.,

    . Then, click on the Choose button at

    the right bottom corner of the window.

    d.  Now, a window will be popped up to ask for the name of the project. Here, we would like

    everyone to use “ VolcanoRockEscaping” .

    Click on Save button afterwards.

    e.  You have created the project successfully. The following window will then be shown.

    iii.  Xcode usage

    a.  To expand the folder under the Groups & Files, you can click on the icon next to the

    folder. That is, after you click on icon next to the Classes folder , the

    following files will be shown (see next page):

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    5/26

    5

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    b. 

    Expanding the folders under Group & Files, you will see a list of files automatically created

    for you during project creation.

    Basically, we are only interested in the following files in this app development:

    1.  Interface Builder File: “ VolcanoRockEscapingViewController.xib ” ,

    2.  Code Logic Files: “ VolcanoRockEscapingViewController.h” , and 

    3.  “ VolcanoRockEscapingViewController.m”  

    c. 

    Try clicking on the “ VolcanoRockEscapingViewController.m”  file, the corresponding codesinside will be shown in the text editor region.

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    6/26

    6

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    d.  Now, we will try compile and run the app to have a look of the results. But before that we

    first set the target running location of the app.

    You can select it by clicking which is located

    above the Groups & Files windows. A pull down menu will then be shown up as follows:

    Here, you can (i) load your app to real device by selecting Device or (ii) load your app to

    simulator by selecting simulator. Please be reminded that we will use iPhone simulator

    during this workshop unless specified.

    e.  You can compile and run the app by clicking icon which is located just

    under the project title. Then, your app will be started in the target device selected in (d).iv.  iPhone Simulator Usage

    a.  After clicking the Build and Run icon, the iPhone simulator will be prompted up

    automatically. Since we have not done anything to the screen display, only a blank screen

    with a status bar will be shown.

    Status Bar

    Home

    Button

    App Icon

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    7/26

    7

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    b.  Now, you can try moving your mouse to the home button of the iPhone simulator and then

    click it. You can find your app with a blank icon shown on the desktop of the iPhone

    simulator.

    2.2 Changing Various iPhone App Settings

    In previous sections, we have walked through detailed procedures in creating a new iPhone app

    project, and tested the newly created app in the iPhone simulator. In this part, we would like to

    introduce the methods in changing various common project settings, such as, (i) hidden the status

    bar, (ii) the orientation of the app, (iii) the icon of the app, and (iv) the launch image, etc.

    In fact, all the functions mentioned above can be set by modifying the project information propertylist. In this project, the file is “ VolcanoRockEscaping-info.plist ” . Now, you can click the file, and then

    you will see a list of items shown on the text editor.

    Here, each row represents a property that you can set to the app. We will now discuss how to set

    various properties:

    i.  Hidden Status Bar

    i. 

    Highlight the “Information Property List” row

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    8/26

    8

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    ii.  Control-Click the row (Note that Control is a key on the Mac keyboard)

    iii.  A list will be popped up for you to add a new row to the property list

    iv.  Select the item “ Status bar is initially hidden”  in the pull down menu.

    v.  Check the box on the right hand side.

    vi.  Now, you can compile and run the app by clicking icon, and see the result

    in the iPhone simulator.

    vii. 

    You can see that the status bar shown in the iPhone simulator disappears.

    ii.  App Orientation

    By default, all iPhone apps are set to the portrait orientation with the home  button at the

    bottom, i.e., the orientation currently shown on the iPhone simulator.

    a.  Similar to (i)(a) – (c)

    b.  Select the item “ Supported interface orientations”  

    c.  Click on the icon next to the “ Supported interface orientations” . A new row of item

    will be shown.

    d.  Click on the “ Portrait (bottom home button)”  column in the new row of item shown, a pull

    down menu will appear.

    e.  Now, select “ Landscape (right home button)”  

    f.  Click on the “ VolcanoRockEscapingViewController.m”  file

    g. 

    Look for the codes “ shouldAutorotateToInterfaceOrientation”  

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    9/26

    9

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    h.  Change the codes inside to the following:

    i.  Now, you can compile and run the app by clicking icon, and see the result

    in the iPhone simulator.

     j.  The simulator will turn to Landscape orientation with the home button on the right hand

    side.

    iii. 

    Changing App IconNote that an icon should be a 57 x 57 pixels graphic file. Before we can change the icon, we must

    provide a list of graphics to the project.

    a.  Download the “volcano_graphics.zip”  from our website and put the file to Desktop.

    b.  Double-click the zip file to unzip. A volcano_graphics folder will be created.

    c.  For your convenience (our convenience also :), drag all the files inside the volcano_graphics 

    folder to the resource folder in Xcode.

    d.  A window will then be popped up. Here, remember to check the box “Copy items into

    destination group’s folder” before clicking the add  button. Otherwise, Xcode will only store

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    10/26

    10

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    up the reference to the files instead of copying the files to the project folder.

    e. 

    Go back to the “ VolcanoRockEscaping-info.plist ”  file, and look for the row “Icon file” f.  Click on the blank column on the right hand side of the row “Icon file”, and type in the file

    name of the icon, i.e., “ volcano-icon.png”  

    k.  Now, you can compile and run the app by clicking icon, and see the result in

    the iPhone simulator. (Please note that you have to click on the home button on the iPhone

    simulator to see the effect).

    iv.  Setting the launch image

    a.  Add a new row similar to (i) and (ii).

    b.  Find the name “ Launch Image”  in the pull down menu.

    c.  Change the name of the file to “volcano.png” similar that of (iii)(f) above.

    d.  Compile.

    e.  See the result.

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    11/26

    11

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    3. Adding UI Components onto Screen View by using

    Interface Builder

    The goal of this part is to put different UI components, e.g., images, texts, etc., onto the screen view

    to develop a display as follows:

    Generally speaking, UI components are something that can be visually displayed on the screen view.

    We first introduce some commonly used UI components:

    i.  UILabel  – This component is mainly used to display some texts on the screen. You can specify

    the text string, size of the fonts, font color, font type, etc., using Interface Builder.

    ii.  UIImageView  –  This component is mainly used to display an image on the screen. Interface

    Builder allows users to set the image, center position, frame size, set hidden or visible, etc.

    For more details on UI components and screen view, please refer to the Lecture Notes.

    UILabel

    UIImageView

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    12/26

    12

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    3.1 Adding VolcanoRockEscapingView.h and .m to Classes Folder

    in Xcode

    In this app, we will support “ shake”  function. Unfortunately, the default view does not support this

    function. To support it, we have provided you with a customized view which will be added in the

    screen view with the use of Interface Builder. Before that, you have to:

    i. Download the VolcanoRockEscapingView.h and VolcanoRockEscapingView.m from our website.

    ii. Copy the files to the Classes  folder in Xcode (similar to adding graphic files to the Resources 

    folder before).

    3.2 Modifying BallShootingViewController.xib

    As mentioned before, when you create a view-based application, several files will be generated for

    you automatically. They are ViewController.h, ViewController.m, and

    ViewController.xib. As the project we are working on is called VolcanoRockEscaping ,

    you will find “VolcanoRockEscapingViewController.h ”, “ VolcanoRockEscapingViewController.m”, and

    “VolcanoRockEscapingViewController.xib ” under the project. 

    By default, the application will invoke the “VolcanoRockEscapingViewController.xib”, which

    describes the UI components on the screen, during the startup time. Therefore, we can modify this

    file to change the view of the screen by using Interface Builder. After opening the xib file, several

    windows will be shown as follows:

    Tips: Note that Xcode and Interface Builder are two different kinds of software. They may open

    several windows. If you are not sure which software is the active one, check out the top left hand

    side of the menu bar. You should find the name of the active software next to the Apple icon.

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    13/26

    13

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    Make sure you have the following windows. If any one of these is closed by accident, you can refer

    to the instructions below to open it again.

     

    Library (use the Classes tab)- open through Tools -> Library from the Menu bar

      View (design the display of your game here)

    - open through double clicking View inside VolcanoRockEscapingViewController.xib window

      View Attributes

    - open through Tools -> Attributes Inspector from the Menu bar

      VolcanoRockEscapingViewController.xib

    - open through double clicking the file name VolcanoRockEscapingViewController.xib

    Previously, you may have hidden the status bar and change the orientation with the use of

    information property list. However, as explained in notes, xib file is loaded during the startup of

    the application. Therefore, it does not have any information about whether you have changed the

     property list information or not.

    Before we go through the process of adding UI component onto the screen view, first of all, we will

    describe the process of changing the current screen view to our customized view.

    i. 

    Customized Screen View – VolcanoRockEscapingView

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    14/26

    14

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    a.  Choosing the Classes  tab in the Library window, drag a VolcanoRockEscapingView

    component to the VolcanoRockEscapingViewController.xib window

    b.  Highlight the original icon, and then delete it by pressing the delete key on the

    keyboard

    c.  Control-click the icon

    d.  A list will be pop up.

    e.  Now, click on the circle next to the view, and then drag the line to the icon.

    f.  If succeeded, you can see that the view item in the list becomes:

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    15/26

    15

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    g.  Afterwards, double click the icon. The view similar to that of the original view

    will appear.

    h.  Click on the icon in the Attributes Window. Resize the view by modifying the

    size and position attributes. Note that the size for portrait mode is W:320 H:480

    i.  Finally, clicking icon in the Attributes Window, and set the view to landscape

    by selecting landscape in the pull down menu of the Orientation

    Now, we will go through the process of adding the background UIImageView, the fire UIImageView

    (the fire image on top of volcano), the “Life :” UILabel on left upper corner of the view.

    Basically, the general procedure of adding something on V iew is as follows:

      Identify the type of component, such as image, button, etc., you want to add in the Library

    window

      Drag it on V iew, resize if necessary

     

    Modify the attributes in the Attributes window. You can specify what image to be display for a

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    16/26

    16

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    component there as well.

    ii.  Background UIImageView

    1.  Drag a UIImageView Component from Library to the View screen so that it covers the

    whole screen.

    2. 

    Select the “ bg.png”  from the Image pull down menu in the Image View Attributes Windowshown on the right hand side.

    3.  After that, the background image is shown as follows:

    iii.  Fire UIImageView

    1.  Again, drag a UIImageView to the View.

    2.  However, we will also set the position and size of the UIImageView from the Image View

    Size tab in the Attributes window. Here, we set X: 197, Y: 39, W: 65, H:84. ( Please note that

    the X, Y coordinates here refer to the point shown as red in the square. All the points that

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    17/26

    17

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    we are considering in the Interface Builder now is the origin, i.e., the left upper corner) 

    3.  Afterwards, the Image can be set to “fire.png” similar to that of before. 

    iv.  “Life :” UILabel

    1.  Now, drag a UILabel from Library window to the view.

    2.  Change the text Form “Label” to “Life :”. Note that you can change the text by either (a)

    single click the label (b) change the text in the label attribute.3.  Change the font type to “Verdana Italic” with size 20.

    4.  Similar to (ii), set the position of the UILabel to X:3, Y:0, W:65, H:28

    Now save the file in Interface Builder. We are about to run our first program! First, go back to

    Xcode (by clicking the Xcode icon in the bottom tool bar). Click the “Run and Debug” button in

    the Xcode. It will launch the iPhone simulator and it will look like this (see next page):

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    18/26

    18

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    3.3 Adding in all other UI Components

    Please add in all other components listed in the table  in sequence order : 

    Number Component Property X Y W H

    i UIImageView Image “life.png”  59 0 26 26

    ii UIImageView Image “life.png”  86 0 26 26

    iii UIImageView Image “life.png”  113 0 26 26

    iv UILabel Font size 20, Font

    “Verdana Italic” 

    164 0 80 28

    v UILabel Font size 20, Font

    “Verdana Italic”, alignment

    center

    244 0 60 28

    vi UILabel Font size 20, Font

    “Verdana Italic” 

    324 0 70 28

    vii UILabel Font size 20, Font

    “Verdana Italic”, alignment

    center

    392 0 80 28

    viii UIImageView Image “volcano.png”  0 80 480 240

    i

    ii

    iii

    iv v vi vii

    viii

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    19/26

    19

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    After you have put in everything, you should get the following when you run it.

    4. Connecting UI Components with IBOutlets

    It is very often that the status/property (e.g., position, text value, etc.) of a UI component changeswhen the app is running. To allow the codes to specify how a UI component changes, we need a

    way to specify this UI component in the codes. We call this procedure “connect the UI component

    to an IBOutlet”.

    4.1 Defining an IBOutlet

    i.  Find out the “VolcanoRockEscapingViewController” in the Library 

    ii. 

    Select “Outlets”  in the pull down menu (this shows what outlets have been defined in theproject)

    iii.  Press the “+” button in the lower left hand corner of the window (it means you want to add a

    new outlet)

    iv.  Input “scoreLabel” on the left hand side and “UILabel” on the right hand side (this step defines

    the IBOutlet variable called “scoreLabel” and it is going to represent a UILabel component

    with value “0”.)

    .

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    20/26

    20

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    4.2 Connecting the IBOutlet with the UIComponent

    We now specify which UI component a certain IBOutlet variable stands for. In the following, we

    connect the newly defined IBOutlet “scoreLabel”  to the text label (“0”) in View (as shown in the

    figure below).

    i.  Control-click the file’s owner 

    ii.  Drag from the empty circle next to the “scoreLabel” to the UILabel (“0”) on the screen.

    4.3 Other IBOutlets

    Create other IBOutlets listed in the table below:

    Type Variable/function name UIComponent

    type

    Image of the

    UIComponent connected

    to

    IBOutlet life1Image UIImageView life.png

    IBOutlet life2Image UIImageView life.png

    IBOutlet life3Image UIImageView life.png

    IBOutlet timeLabel UILabel 0

    IBOutlet volcanoImage UIImageView volcano.png

    Tips: You can check out a summary of all the IBOutlets you have defined and connected by

    control-click “ Files’  Owner ”   in the VolcanoRockEscapingViewController.xib window. The pop-up box

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    21/26

    21

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    will look like this:

    4.4 Write to the BallShootingViewController Files

    When you define IBOutlets and connect them to the UIComponents in Interface Builder, the

    changes cannot be seen in the codes (.h and .m files) yet. We have to specify how to change the

    codes by

    i.  Highlight File’s Owner 

    ii.  Select File -> Write Class Files from the File menu bar

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    22/26

    22

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    iii.  Select Save

    iv.  Select Merge

    We select “Merge”  because we want to specify which code fragments to be added in the

    original .h and .m files. (From now on, we simply use .m and .h to refer to

    VolcanoRockEscapingViewController.m and VolcanoRockEscapingViewController.h for

    simplicity.)

    v.  Select the code fragments to be included into the merged files:

    Two windows, one for VolcanoRockEscapingViewController.h and one for

    VolcanoRockEscapingViewController.m will be opened. For both of them, the left hand side

    shows version edited by the Interface Builder (after you define IBOutlets), while the right hand

    side provides the original file, as shown below.

    VolcanoRockEscapingViewController.h

    Differences are highlighted light blue with arrows pointing to either left or right. The code

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    23/26

    23

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    fragments being pointed are the selected version to be used. For example, we defined IBOutlet

    “scoreLabel” using Interface Builder. Thus, we can find the method on the left hand side of

    VolcanoRockEscapingViewController.h window. We want this variable to be included in the

    final version, and so the arrow should be pointing to the left hand side. (Note that nothing

    should have been changed to .m file, so it does not matter whether you choose the left or the

    right hand side codes.) 

    vi.  Save the merged results by selecting File -> Save Merge in the menu bar before closing the .m

    and .h windows.

    5. Implementing the “Shake” Function 

    In this part, we are going to implement the feature: When the user shakes the device, “Score” is oneless, while “Time Elapsed” is one more. We need to develop codes for the following:

    1.  make sure that your app response to “shake” 

    2.  define variables for keeping “Score” and “Time Elapsed” 

    3.  modify the variables when the shake is detected

    4.  display new results on the screen

    If you cannot finish the previous part, you can download the project zip file(VolcanoRockEscaping_IB_finish.zip ) from our website to continue the following part. 

    5.1 Shake Detection

    The goal of replacing the original view with a customized view in Section 2 is to facilitate the shake

    detection detailed in this section. To fully enable this function, we still need to add in two functions

    inside the VolcanoRockEscapingViewController.m  file. Unlike normal function that we will discuss in

    next part, we do not need to explicitly declare these two functions in .h.

    Therefore, you can simply copy the codes shown below to your .m file (any place after  

    @implementation, and before @end).

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    24/26

    24

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    You can see that the braces contain a line “// Shake Detected”. In fact, the braces contain the

    pieces of the codes that will be run when a shake on the device is detected. Now, we would like you

    to type in the following NSLog() statement below that line:

    NSLog(@"Shaking Detected"); 

    NSLog  is a function which takes in Objective-C String as input and will output the result to the

    console. There are two ways in opening the console in Xcode:

    1. Select Run -> Console

    2. Press the icon

    Now, you can click icon to compile and run the app in iPhone simulator.

    In iPhone simulator, to emulate the shake gesture, you can select

    Hardware -> Shake Gesture

    Finally, you can see the following result in the console:

    NSLog(@"Shaking Detected"); 

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    25/26

    25

    Copyrights Reserved by the University of Hong Kong under the Knowledge Exchange Project

    5.2 Variable and Function Declarations

    We now define two integer variables score and timeElapsed  for keeping the two values. We also

    define a function, initializeData, to initialize their values. Both declarations should be done in

    the .h file.

    Variable declarations should be done inside the braces. Put

    int score; 

    float timeElapsed; 

    below the IBOutlet declarations.

    Function declarations should be done after the braces but before the @end statement. Put

    - (void)initializeData; 

    anywhere between ‘}’ and @end.

    5.3 Function Implementation

    We proceed to implement initializeData  function and also add in the piece of codes that will be

    run when shake is detected (refer back to Section 5.1) in the .m file. In the .m file, put

    - (void)initializeData { 

    score = 0;

    timeElapsed = 0.0f;

    anywhere between @implementation and @end. Of course, do not put it in the middle of any other

    function. You can put it just below @implementation for simplicity.

    Add in the piece of codes that will be run when a shake is detected as follows. Put the codes after

    int score; float timeElapsed; 

    - (void)initializeData; 

    - (void)initializeData { 

    score = 0;

    timeElapsed = 0.0f;

  • 8/18/2019 YOUTH iPhone Dev Tutorial 1

    26/26

    26

    the statement NSLog(@"Shaking Detected"); 

    score = score - 1;

    timeElapsed = timeElapsed + 1;

    // write the new result on scoreLabel and timeLabel, respectively 

    scoreLabel.text = [NSString stringWithFormat:@"%d", score];

    timeLabel.text = [NSString stringWithFormat:@"%.01f", timeElapsed]; 

    5.4 Calling initializeData

    Note that we have not specified when to call intializeData  yet. To indicate that this methodshould be called after loading the view, put the following statement inside the method -

    (void)viewDidLoad.

    [self initializeData]; 

    Note that to make the code effective for execution, you need to uncomment the block for the

    viewDidLoad  method by removing “/*” and “*/” preceding and following the block, respectively.

    That is, the final result will look like:// Implement viewDidLoad to do additional setup after loading the view, typically from a nib. 

    - (void)viewDidLoad {

    [super viewDidLoad];

    [self initializeData];

    }

    5.5 Run and Debug

    After you have made all the changes, save the files and try to run your application. If there is error in

    your program, you should notice a “failed” message on the right bottom side of your window. More

    details on the errors will be shown when you click on the message. If you can successfully build your

    application, you can activate the shake gesture of the simulator to verify whether your

    implementation is correct.

    If you cannot finish this part, and you would like to have a look on the result, you can download the

    project zip file (VolcanoRockEscaping_timeLabel_set.zip ) from our website.

    score = score - 1;

    timeElapsed = timeElapsed + 1;

    // write the new result on scoreLabel and timeLabel, respectively 

    scoreLabel.text = [NSString stringWithFormat:@"%d", score];

    timeLabel.text = [NSString stringWithFormat:@"%.01f", timeElapsed]; 

    [self initializeData]; 

    // Implement viewDidLoad to do additional setup after loading the view, typically from a nib. 

    - (void)viewDidLoad {

    [super viewDidLoad];

    [self initializeData];

    }