Lab 1: My first iphone application

Size: px

Start display at page:

Download "Lab 1: My first iphone application"

Everett Harrison
7 years ago
Views:

Hong Kong Lab 1: My first iphone application Objective: The training program provides an overview of iphone application development and distribution.

After this lab session, students should be familiar with the development tools including Xcode, Interface Builder and Simulator.

applications. The main application of iphone SDK is the integrated development environment (IDE) named Xcode.

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 1: My first iphone application Objective: The training program provides an overview of iphone application development and distribution. Students are required to create a simple iphone Application and test it on both simulator and device. After this lab session, students should be familiar with the development tools including Xcode, Interface Builder and Simulator. Introduction: iphone SDK includes the Xcode IDE (Figure 1a), Interface Builder (Figure 1b), iphone Simulator (Figure 1c) and other tools for developing iphone applications. The main application of iphone SDK is the integrated development environment (IDE) named Xcode. Interface Builder is a visual design tool for creating user interface. Simulator allows you to run your application on mac computer before testing on device or uploading it to App Store. Application distribution involves ad hoc distribution and distribution to App Store. Both methods require a developer account to derive certificates and provisioning profiles. In the lab sessions, ad hoc distribution is applied. Figure 1 a. Xcode IDE b. Interface Builder c. Simulator My first iphone application 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 1.5 hours. Procedure: 1. Create a new project (Part A) 2. Use Interface Builder to create the interface (Part B,C) 3. Debug and run on simulator (Part D) 4. Test on device (Part E) 5. Extra Practice My first iphone application 2

A Create a new project Figure 2 Choose a template 1. Open Xcode from the dock. 2. Select File > New Project. 3. Choose View based Application as a template for your project. (Figure 2) 4.

3 A Create a new project Figure 2 Choose a template 1. Open Xcode from the dock. 2. Select File > New Project. 3. Choose View based Application as a template for your project. (Figure 2) 4. Name the project, say MyFirstApp. 5. From Groups & Files (Figure 3), you can find application delegate (e.g. MyFIrstAppAppDelegate) and view controller files (e.g. MyFirstAppViewController) in Classes. Application delegate is generated automatically for a project. You also have view controller files since the template is View based Application. 6. Interface Builder Files at the bottom contains files with.xib extension. (Figure 3) My first iphone application 3

Figure 3 Classes and Interface Builder Files Figure 4 Open Xib file in Interface Builder B Display a selected picture as background in Interface Builder 1. Double click MyFirstAppViewController.

Now, you need to add a background to your interface. In the menu of Interface Builder, select Tools > Library. Find Image View under Cocoa Touch / Data Views (Figure 5).

4 Figure 3 Classes and Interface Builder Files Figure 4 Open Xib file in Interface Builder B Display a selected picture as background in Interface Builder 1. Double click MyFirstAppViewController.xib in Interface Builder Files. It opens in Interface Builder. Three objects are involved as shown in Figure 4. You may find that the object called View also opens. If not, double click View. 2. Now, you need to add a background to your interface. In the menu of Interface Builder, select Tools > Library. Find Image View under Cocoa Touch / Data Views (Figure 5). Drag an Image View to the window of View or double click Image View to add it directly. Adjust the UIImageView s size and position. Because it is used as a background image, make sure that it covers the whole area of your interface. (Figure 6) My first iphone application 4

Download directions.jpg from the server. Move to Xcode. Drag it to your project (Figure 3).

5 Figure 5 Create a UIImageView from library Figure 6 Place a UIImageView in view 3. To complete background setting, you need to import an image and apply it in the UIImageView. Download directions.jpg from the server. Move to Xcode. Drag it to your project (Figure 3). You may put it under the folder named Resources. Check copy items into destination group s folder. Click add. (Figure 7) My first iphone application 5

In the menu of Interface Builder, select Tools > Attributes Inspector.

6 Figure 7 Add an image file to project Figure 8 Set an image for UIImageView 4. Modify UIImageView s attribute. In Interface Builder, click UIImageView. In the menu of Interface Builder, select Tools > Attributes Inspector. In Image View Attributes, type directions.jpg (Figure 8). Press enter and the image displays (Figure 9). Figure 9 Background completed My first iphone application 6

C Create a label in Interface Builder 1. Find another object called Label from library ( Tools > Library ). Label, namely UILabel, is under the folder of Inputs & Values.

7 C Create a label in Interface Builder 1. Find another object called Label from library ( Tools > Library ). Label, namely UILabel, is under the folder of Inputs & Values. UILabel is used to display static text. 2. Drag it to your interface (above UIImageView). Double click to input the text. Modify Label s attributes. Try to adjust font, font size and color in Label Attributes ( Tools > Attributes Inspector ). See Figure 10. Remember to save Xib file! ( File > Save ) Figure 10 Label added D Debug and run on simulator 1. Move to Xcode. From the toolbar (Figure 11) on the top of the window, you can see Overview and the green button Build and Run or Build and Go. You may customize the toolbar (control+click toolbar). Figure 11 Toolbar of Xcode 2. In the menu of Overview (Figure 12), you can change the active SDK and active Configuration. Now select iphone Simulator (any version) and debug. My first iphone application 7

Figure 12 Active SDK and Configuration (Simulator) Figure 13 Active SDK and Configuration (Device) 2. Click Build and Run. Save the project. Now you see your application on simulator.

8 Figure 12 Active SDK and Configuration (Simulator) Figure 13 Active SDK and Configuration (Device) 2. Click Build and Run. Save the project. Now you see your application on simulator. Note: If there s any error or warning, you should correct it. Build and Debug is helpful. If you want to see some intermediate result (e.g. use NSLog to print some variables), you may need console to demonstrate. In Xcode preferences, you can configure the setting of debugging. Try to select Show Console & Debugger in On Start. E Test on device Generally speaking, developers test applications on simulator at first for it s quite convenient to debug. Installing application on iphone or ipod touch requires more time than that on simulator. However, a few functions such as accelerometer cannot be realized on simulator. Besides, in some cases, CPU and memory decide the differences on performance between simulator and device. If you find your application works well on your mac, you still have to download it to device for further test. To download application developed in your mac to your iphone/ipod touch, you must register your device in iphone dev center where you derive your certificate and provisioning profile. You also have to download a provisioning profile for development to device. This approach has already been done. So you are not required to do that in the lab. 1. Connect ipod touch to mac computer with ipod USB cable. Do not synchronize ipod touch while you are installing an application. 2. Select iphone Device (any version) instead of Simulator. (Figure 13) Click Build and Run and wait. My first iphone application 8

Extra Practice 1. Download AlternateViews.zip from the server. 2. Open the project. (Double Click AlternateViews.xcodeproj ) 3. Run the application on simulator. (Figure 14) 4.

Add a background to both Portrait View and Landscape View in Interface Bulider. (Hint: Find their nib files and modify them in Interface Builder.

9 Extra Practice 1. Download AlternateViews.zip from the server. 2. Open the project. (Double Click AlternateViews.xcodeproj ) 3. Run the application on simulator. (Figure 14) 4. In the menu of simulator, select Hardware > Rotate Right or Rotate Left. (Figure 15) You will see landscape view of the application. (Figure 16) 5. Install the application on device. 6. Add a background to both Portrait View and Landscape View in Interface Bulider. (Hint: Find their nib files and modify them in Interface Builder.) Note: Size of background image is 320 x 480 pixel (Portrait View) or 480 x 320 pixel (Landscape View). You may download landscapebg.jpg and portraitbg.jpg from the server and adjust the size and position of UIImageView according to Figure Install amended application on both simulator and device. Figure 14 Portrait View on Simulator Figure 15 Rotate device on Simulator My first iphone application 9

10 Figure 16 Landscape View on Simulator Figure 17 Size and Position for Background image (Portrait) End of Lab 1 My first iphone application 10

Your First App Store Submission

Your First App Store Submission Contents About Your First App Store Submission 4 At a Glance 5 Enroll in the Program 5 Provision Devices 5 Create an App Record in itunes Connect 5 Submit the App 6 Solve