View-Based Application
Development
Lecture 1
1
Flows of Lecture 1

Introduction to the Game to be developed in this
workshop

Comparison between Console Programming and GUI
Programming

iPhone View-based Application Architecture

Introduction to development tools – Xcode and Interface
Builder
2
Flows of Lecture 1

Introduction to the Game to be developed in this
workshop

Comparison between Console Programming and GUI
Programming

iPhone View-based Application Architecture

Introduction to development tools – Xcode and Interface
Builder
3
Introduction to the Game

Name: BallShooting Game

Objective:


Shoots a specific number of targets shown on the current
window within a certain time limit
There are several target types
Screen Shot: See the Next Slide.

4
Screen Shot of the Game
5
BallShooting Game Breakdown
INPUT
6
PROCESS
OUTPUT
Action/Event
Handling
Update UI
Component
Status – One time
Static UI
Components
e.g., description
labels
Touch on
Screen
Creating new
UI
components
Update UI
Component Status
- Continuous
Dynamic UI
Components , e.g.,
the score label –
One time update
Tilt Device
Collision
Detection
Game End
Condition
Dynamic UI
Components, e.g.,
the balloon –
Continuous update
Through UI
Components,
e.g., Buttons
Flows of Lecture 1

Introduction to the Game to be developed in this
workshop

Comparison between Console Programming and GUI
Programming

iPhone View-based Application Architecture

Introduction to development tools – Xcode and Interface
Builder
7
Console programming – Single
Execution Flow
Boring black and white interface
8
Sequential flow of
console application:
Input from user
Output result
Input from user
Output result
Input from user
Output result
…..
GUI (graphical user interface) programming
– Multiple Execution Flows
Multiple media outputs
Multiple flows
of GUI application
Multiple user inputs
9
Console programming vs. GUI programming
– Development issues

Console programming:

write the code
compile it
run and debug it

GUI programming:




10
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)
More on GUI Programming


You can draw 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 userImage to represent the shooter
on the interface
When you want to put an image in another
position, you can specify a new location inside the
program codes
Flows of Lecture 1

Introduction to the Game to be developed in this
workshop

Comparison between Console Programming and GUI
Programming

iPhone View-based Application Architecture

Introduction to development tools – Xcode and Interface
Builder
12
View based application project –
BallShooting
App Delegate
Main
BallShootingViewController
Main Window
13
View-based Application Architecture
main
App
Delegate
View Controller
Main Window
View Controller
Screen view
14
View-based Application Architecture - Main
main

Represent as a file “main.m”
App
Delegate

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
View Controller
Main Window
View Controller
Screen view
15
View-based Application Architecture –
App Delegate
main

Represent as files
“<ProjectName>AppDelegate.h”Header File
“<ProjectName>AppDelegate.m”Implementation File

Will be activated to handle the several
application events:
Invoke
App
Delegate
Invoke
Invoke
View Controller
Main Window

Invoke
View Controller
Screen view


Further invoke:


16
Application Launched
Application Terminated
Main Window Frame
View Controller
View-based Application Architecture –
Main Window Frame
main

Represent as a
file“MainWindow.xib”

Acts as a frame container to
include all other UI
Components
Invoke
App
Delegate
Invoke
Invoke
View Controller
Main Window
Invoke
View Controller
Screen view
17
View-based Application Architecture –
View Controller

main
Represent as files

Invoke
App
Delegate
Invoke


Invoke

View Controller
Main Window

View Controller
Screen view
18
Controls various UI components
on the screen view, i.e., when,
where, and how the UI
components are shown

Invoke
<ProjectName>ViewController.xib
<ProjectName>ViewController.m
<ProjectName>ViewController.h
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


19
Interface File - <ProjectName>ViewController.xib
Code Logic File - <ProjectName>ViewController.h +
<ProjectName>ViewController.m
Flows of Lecture 1

Introduction to the Game to be developed in this
workshop

Comparison between Console Programming and GUI
Programming

View-based Application Architecture

Introduction to development tools – Xcode and Interface
Builder
20
Introduction to Development Tool – Mac
Desktop

When you turn on Mac, you will see
21
Searching for Application on Mac Machine

You can press the icon on the right upper corner to
search for application:
22
iPhone App Development Tool - Xcode

Basically, we need a place to write our iPhone app. In Mac,
Xcode is provided to do so.
23
Create a New Project in Xcode

You can create a new project by pressing:
24
iPhone/iPad Project Selection

Now, you can select whether you would like your app to
be run on iPad or iPhone. Note that iPhone app can also
be run on iPad by resizing the app during runtime.
25
View-Based Application Template

There are quite a number of application frameworks provided.
The most common one is the view-based (the one that we are
developing in this workshop)

Here, we input our project name as:


BallShooting
Then, several files will be generated automatically. Including



26
BallShootingViewController.h - The View Controller Header File
BallShootingViewController.m – The View Controller Implementation
File
BallShootingViewController.xib – The View Controller Interface
Builder file
Xcode Layout I
c. Compile and Run
a.
Target Device/Simulator
b. Files Location
d. File text
Editor
27
Target Selection – Device / iPhone
Simulator
Select whether
your app would
like to run in a
real device or
iPhone simulator
28
File Text Editor in Xcode
1. When you highlight the file here
2. Corresponding content will
show here
29
Information Property List I

Most properties of the app can be modified in the
information property list file. i.e., BallShooting-info.plist
30
Information Property List II

Information Property List – Hidden Status Bar

Information Property List – Supported Orientations

Information Property List – Icon file
31
Screen Shot After Modification

Landscape Orientation with no Status Bar
BallShooting Icon

32
Interface Builder I

When you double click “BallShootingViewController.xib”
b. View
d. Attributes
Inspector
a. Library
c. Components
33
Interface Builder III
Open Library
window Here
Open Attribute
Inspector window Here
Open view window here
More Detail Descriptions on Interface Builder usage
will be discussed in Pre-Lab 1
34
Developer Documentation I

When you want to look for help during coding, you can
look for the developer documentation.
35
Developer Documentation II
Type in the item that you
would like to search here
For example, you can search for NSString in the search field
to look for related functions.
36
NSLog – Debug Console

Usually, we will add in some screen output in various
parts of the program to perform debugging task. This can
be done by:
Press to pop up the
debug console
window
The string message
pass to the NSLog will
show up in the console
37
Another way of activating the Debug
Console
38
References
1.
2.
3.
39
Peter Bakhirev et al., Beginning iPhone Games
Development, Apress, 2010.
Wei-Meng Lee, Beginning iPhone SDK Programming
with Objective-C, Wiley, 2010.
Erica Sadun, The iPhone Developers Cookbook, Second
Edition, Addison-Wesley, 2010.