View-Based Application Development

1. View-Based Application Development Lecture 1

2. Flows of Lecture 1 • Before Lab • Introduction to the Game to be developed in this workshop • Comparison between Console Programming and GUI Programming • iPhone View-Based Application Skeleton • During Lab • Introduction to development tools • Managing UI components through Interface Builder • Intrinsic C code, and Objective-C code

3. Introduction to the Game • Name: Volcano Rock Escaping • Objective: • Given limited lives, the player should escape from as many rocks as possible • Screenshot: Next Slide

4. Screenshot of the Game

5. Console programming – Single Execution Flow Sequential flow of console application: Input from user Output result Input from user Output result Input from user Output result ….. Boring black and white interface

6. GUI (Graphical User Interface) Programming – Multiple Execution Flows Multiple media inputs/outputs Multiple flows of GUI application

7. Console Programming vs. GUI Programming – Development Issues • Console programming: • write the code • compile it • run and debug it • GUI programming: • also need to design the interface (i.e., screen layout of the application) with the help of an interface builder • work on code and interface alternately (similar to building web pages)

8. More on GUI Programming You can design your interface using Interface Builder In Interface Builder, you can also specify a name for referring to a particular image in the codes e.g. ,we use life3Image to represent the 3rd life image on the interface When you want to put an image in another position, you can specify a new location inside the program codes

9. View-Based Application Project – VolcanoRockEscaping App Delegate Main ViewController

10. View-Based Application Architecture main App Delegate View Controller MainWindow View Controller Screen View

11. View-Based Application Architecture - Main • Represent as a file “main.m” • Acts like that of main function in C/C++ program which will be the first place to call during the program starts • Invoke App Delegate main App Delegate View Controller MainWindow View Controller Screen View

12. View-Based Application Architecture – App Delegate • Represent as files • “AppDelegate.h”- Header File • “AppDelegate.m”- Implementation File • Will be activated to handle the several application events: • Application Launched • Application Terminated • Further invoke: • Main Window Frame • View Controller main Invoke App Delegate Invoke Invoke View Controller Invoke MainWindow View Controller Screen View

13. View-Based Application Architecture – Main Window Frame • Acts as a frame container to include all other UI Components main Invoke App Delegate Invoke Invoke View Controller Invoke MainWindow View Controller Screen View

14. View-based Application Architecture – View Controller • Represent as files • ViewController.xib • ViewController.m • ViewController.h • Controls various UI components on the screen view, i.e., when, where, and how the UI components are shown • We can implement the code logic here to control the UI • By default, the screen view of the view controller is added to the main window during startup of the view controller main Invoke App Delegate Invoke Invoke View Controller Invoke MainWindow View Controller Screen View

15. More on View Controller • The main aim of the view controller is to control the UI components on its screen view • Add UI components on to the screen • Implement code logic • This is the ONLY place we need to work on in this workshop • Two Types of Files • Interface File - ViewController.xib • Code Logic File - ViewController.h + ViewController.m

16. iPhone App Development Tools • Xcode • Text Editor • Compiler • iPhone Simulator • Test your app • Interface Builder • Building up the interface of an app

17. Xcode • Basically, we need a place to write our iPhone app and compile the source codes. In Mac, Xcode is provided to do so

18. Xcode Layout 2. Compile and Run • 1. Target Device/Simulator 3. Source Files Location 4. File Text Editor

19. File Text Editor in Xcode 1. When you highlight the file here 2. Corresponding content will be shown here

20. Target Selection – Device/iPhone Simulator Select whether your app would run in a real device or iPhone simulator Note that your real device name will replace iOS Device once a valid real device is connected to the Mac with Xcode

21. iPhone Simulator • iPhone Simulator simulates most of the functions of a real iPhone device • It is running as a process in Mac • Will be prompted up automatically when you select simulator to run the app

22. Interface Builder I • Click on“ViewController.xib” • d. Inspector Window • b. View • a. Library Window • c. XIB Components Window

23. Interface Builder II • This part includes the library of the UI components that can be added to the view • This is the view existing in the view controller. Note that Interface Builder file and the codes are not connected at this moment. Therefore, even though the supported orientation is set to landscape (right home button), it is not reflected in the interface builder • Components included in the XIB file • We can change the attributes information of the UI components in this part

24. Screen View (Display of iPhone) Orientation and Coordinate Representation • The coordinate system of the screen view can be adjusted based on the its orientation • Start from origin (0, 0) on the left upper corner • X coordinate increases towards the right • Y coordinate increases towards the bottom (320, 0) (0, 0) +x (0, 0) (480, 0) +x +y Portrait Mode +y Landscape Mode (0, 320) (480, 320) (0, 480) (320, 480)

25. What is a UI Component? A UI component is something a user can see in the screen view, such as a label, an image, etc. It is also referred as UIView Each UIView has a bounding box to describe its size and location (relative to the screen view) Different components have their unique attributes e.g., you can set text for a label, put an image in an image view Origin (x, y) A UILabel Center (x, y) height I am Carson width

26. UI Components Example UILabel UIButton UIImageView

27. Through Interface Builder You can add in a UI component by drag and drop the UI component from the library to the view directly this is an analogy to Dreamweaver or Frontpage in making webpage Through Writing Codes directly Declare and create UI components in the codes Specify the size, location, etc. of the component You can create additional UI components during runtime Creating UI Components

28. Moving a UI Component in Runtime The drag and drop way in Interface Builder creates a static UI component (it would not move) To change the properties of the UI component during runtime, we need to: Define a variable representing the image using Interface Builder The variable is known as IBOutlet and is generally represented by a variable of the same type of the UI component in codes Connect the UI component to the name declared 28

29. UI Components Example Properties will change during runtime Will not change during runtime

30. IBOutlet – A variable to represent the UIComponent life1Image life2Image life3Image scoreLabel timeLabel

31. IBAction – A function called when an action on UI Component occurs Define “facebookButtonPressed:” function This function will be invoked when user presses on the facebook Button