Web 2.0 and iphone Application Development Workshop. Lab 2: iphone programming basics

Transcription

1 Web 2.0 and iphone Application Development Workshop This lab is prepared by: Department of Electrical and Electronic Engineering, Faculty of Engineering, The University of Hong Kong Lab 2: iphone programming basics Objective: The aim of this lab is to let students get familiar with the basics of iphone programming. After this lab, student should learn how to develop a simple iphone application. Introduction: In this lab section, the following topics are included: - Function ViewDidLoad : A pre-defined function that will load when the application runs. - Function viewforzoominginscrollview : A pre-defined function that controls the action when the & $.74 ' 0 Object was zoomed in and out by using the multi-touch function. - Function shouldautorotatetointerfaceorientation : A pre-defined function that controls the action when the device orientation was changed. - pushviewcontroller : It is part of the 3,;, , which can move to the next view. - UIScrollView Object: It is an object that creates a scroll view in the application. - UIButton Object: It is an object that creates a button in the application. - UIWebView Object: It is an object that creates a Internal web browser in the application. iphone programming basics 1

2 Equipment: 1. A Macintosh computer with iphone SDK installed. 2. An iphone device such as iphone or ipod touch. 3. ipod USB cable. Duration: The duration of this training lab session is about 3 hours. Overview: A Structure of an iphone application The basic structure of an iphone application can be mainly classified into 3 kinds of files:.h Header file which is edited in xcode..m Main file which is edited in xcode..xib Interface Builder file which is edited in the Interface Builder. B Basic Syntax of an iphone application 1. To define a variable in a header/main file: An IBOutlet object: :9 09& : An Integer: $ A String: $$ e/01 e Sub-class value: e /e iphone programming basics 2

3 2. To define a function in a header/main file: Header file: -(void)function1; -(IBAction)function2:(id)sender; Main file: -(void)function1 {. } -(IBAction)function2:(id)sender {. } Procedure: 1. Download the file lab2.zip from the server. Extract it to your Macintosh computer. 2. In the zip file, you can find the folder called basic. Open this and open -,8..4/0574. It is the template for this lab session. A Add title to the Navigation Bar (In Function ' 0 / 4,/ ) 1. Open the file called -, ,902. Find the function called,55.,9 43 / 3 8,:3. 3, add the following line inside,55.,9 43 / 3 8,:3. 3 : 2. Open the file called -,8.' Find the function called ' 0 / 4,/ by using the search function (Command + F). Add the following line inside ' 0 / 4,/. This line defined the title of the Navigation Bar. iphone programming basics 3

4 3. Click Build and Run to see the effect of the code you have just entered. B UIScrollVIew Objecty 1. In order to create a & $.74 ' 0 object, you need to drag a& $.74 ' 0 object to the view via the interface builder, which is already done for you in the -,8.' Open -,8.' , add the following line inside the interface tag. Save your work afterwards. 3. Open -,8.' , create the linkage of the & $.74 ' 0 object 8.74 ; 0 between the xib file and the header file. iphone programming basics 4

5 4. Open -,8.' , define the size of 8.74 ; 0 by adding the following line of code: 5. Save it and run it in the iphone simulator. C Zoom in/out of UIScrollView using multi-touch function 1. In order to zoom in/out of a & $.74 ' 0 Object, we need to include something in the -,8.' Open the -,8.' file and search for the ' 0 / 4,/ function, after that, add the following lines of code inside ' 0 / 4,/ : 2. In -,8.' , add the following function. The return value of the function is the name of the & $.74 ' 0 which you want it to be zoomed in/out. 3. Save the file and run it in the iphone simulator by clicking Build and Run in Xcode. Check that whether it can be zoomed in/out or not. iphone programming basics 5

6 D Change in Display Orientation according to device orientation 1. There is a pre-defined function called 8 4: /:94749,90% , ,9 43. Set the return value to $. 2. Save and click Build and Run. If you want to change the device orientation, click Hardware in the iphone Simulator and select the direction you want. 3. You may also try to return other value in 8 4: /:94749,90% , ,9 43. For instance, the application may change display orientation only when the device is in a specific orientation. y y iphone programming basics 6

7 E UIButton Object and Tap to next view 1. In this part, we are going to create a & :9943 object and define the action after user taps it. Open -,. 8' , define the function as shown. Save your work. 2. Open -,8.' , create the linkage between the & :9943 object and the function you ve just defined. There are many kinds of events we can choose, in this sample, select %4:. &5 38 /0. Save your work. 3. Open -,8.' , defined 9,5:9943 as follow. This is the action that the view of the application will be changed to another view. 4. Save your work. Click Build and run and check whether the view can be changed or not. iphone programming basics 7

8 F UIWebView object 1. In order to define a & 0-' 0 object, we need to add a & 0-' 0 object in the interface builder, which is already done for you. Another part is to define it in the header file 30 9' 0 as follow. Save your work. 2. Open nextview.xib, create the linkage between webtest from the main/header file to the interface builder. iphone programming basics 8

9 3. Create the linkage between the action 4,., 447,7/, #0 4,/ to the & :9943 object in the interface builder. Remember to add linkage to /0 0,90 of 0-%089, which is to the Save your work. 4. Open 30 9' 0 2, add the following line to ; 0 / 4,/ : 5. Save your work. Click Build and run to see whether the & 0-' 0 object can display the web content or not. - End of Lab 2 - iphone programming basics 9