View-Based Application Development

Lecture 1

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

Introduction to the Game

3

Name: Volcano Rock Escaping

Objective: Given limited lives, the player should escape from

as many rocks as possible

Screenshot: Next Slide

Screenshot of the Game

4

Console programming – Single Execution Flow

5

Sequential flow of console application:Input from userOutput resultInput from userOutput resultInput from userOutput result…..

Boring black and white interface

GUI (Graphical User Interface) Programming – Multiple Execution Flows

6

Multiple media inputs/outputs Multiple flows

of GUI application

Console Programming vs. GUI Programming – Development Issues

7

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

View-Based Application Project – VolcanoRockEscaping

9

MainViewController

App Delegate

10

main

App Delegate

View Controller

Screen View

Main Window

View-Based Application Architecture

View Controller

11

main

App Delegate

View Controller

Screen View

Main Window

View-Based Application Architecture - Main

View Controller

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

12

main

App Delegate

View Controller

Screen View

Main Window

Invoke

Invoke

View-Based Application Architecture – App Delegate

View Controller

Invoke

Invoke

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

13

main

App Delegate

View Controller

Screen View

Main Window

Invoke

Invoke

View-Based Application Architecture – Main Window Frame

View Controller

Invoke

Invoke

Acts as a frame container to include all other UI Components

14

main

App Delegate

View Controller

Screen View

Main Window

Invoke

Invoke

View-based Application Architecture – View Controller

View Controller

Invoke

Invoke

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

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

15

16

iPhone App Development Tools Xcode

Text Editor Compiler

iPhone Simulator Test your app

Interface Builder Building up the interface of an app

Xcode

17

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

Xcode Layout

18

4. File Text Editor

2. Compile and Run

3. Source Files Location

1. Target Device/Simulator

File Text Editor in Xcode

19

1. When you highlight the file here

2. Corresponding content will be shown here

Target Selection – Device/iPhone Simulator

20

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

iPhone Simulator

21

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

Interface Builder I

22

Click on“ViewController.xib”

a. Library Window

b. Viewc. XIB Components Window

d. Inspector Window

Interface Builder II

23

a) This part includes the library of the UI components that can be added to the view

b) 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

c) Components included in the XIB filed) We can change the attributes information of

the UI components in this part

Screen View (Display of iPhone) Orientation and Coordinate Representation

24

(0, 0)

(480, 320)

(480, 0)

(0, 320)

Landscape Mode

(0, 0) (320, 0)

(320, 480)(0, 480)

Portrait Mode

+y

+x+y

+x

• 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

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)

height

width

Center (x, y)I am

Carson

A UILabel

UI Components Example

26

UIImageViewUILabel UIButton

Creating UI Components

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 runtime27

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 declared28

UI Components Example

29

Properties will change during runtimeWill not change during

runtime

IBOutlet – A variable to represent the UIComponent

30

life1Image

life2Image

life3Image

scoreLabel timeLabel

IBAction – A function called when an action on UI Component occurs

31

Define “facebookButtonPressed:” functionThis function will be invoked when user presses on the facebook Button