Introduction
Getting Started
1
Overview

The Game

GUI Programming

Development Tools

iPhone View-Based Application Architecture
2
The Game

Name: BallShooting Game

Objective:

Shoot the targets shown on the current window within a
certain time limit
Screen Shot: See the Next Slide.

3
Screen Shot of the Game
4
GUI (graphical user interface) programming
– Multiple Execution Flows
Multiple media outputs
Multiple flows
of GUI application
Multiple user inputs
5
Console programming vs. GUI programming
– Development issues

Console programming:

write the code
compile it
run and debug it

GUI programming:




6
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
Introduction to Development Tool – Mac
Desktop
When you turn on Mac, you will see

8
Searching for Application on Mac Machine
You can press the icon on the right upper corner to
search for application:

9
iPhone App Development Tool - Xcode

Basically, we need a place to write our iPhone app. In Mac,
Xcode is provided to do so.
10
Create a New Project in Xcode

You can create a new project by pressing:
11
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.
12
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



13
BallShootingViewController.h - The View Controller Header File
BallShootingViewController.m – The View Controller Implementation
File
BallShootingViewController.xib – The View Controller Interface
Builder file
View based application project –
BallShooting
App Delegate
Main
BallShootingViewController
Main Window
14
View-based Application Architecture
main
App
Delegate
View Controller
Main Window
View Controller
Screen view
15
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
16
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:


17
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
18
View-based Application Architecture –
View Controller

main
Represent as files

Invoke
App
Delegate
Invoke


Invoke

View Controller
Main Window

View Controller
Screen view

19
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
The only files we need to work on!
Xcode Layout I
c. Compile and Run
a.
Target Device/Simulator
b. Files Location
d. File text
Editor
20
Target Selection – Device / iPhone
Simulator
Select whether
your app would
like to run in a
real device or
iPhone simulator
21
File Text Editor in Xcode
1. When you highlight the file here
2. Corresponding content will
show here
22
Information Property List I

Most properties of the app can be modified in the
information property list file. i.e., BallShooting-info.plist
23
Information Property List II

Information Property List – Hidden Status Bar

Information Property List – Supported Orientations

Information Property List – Icon file
24
Screen Shot After Modification

Landscape Orientation with no Status Bar
BallShooting Icon

25
Interface Builder I

When you double click “BallShootingViewController.xib”
b. View
d. Attributes
Inspector
a. Library
c. Components
26
Interface Builder II
Open Library
window Here
Open Attribute
Inspector window Here
Open view window here
27
Developer Documentation I

When you want to look for help during coding, you can
look for the developer documentation.
28
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.
29
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
30
Another way of activating the Debug
Console
31
References
1.
2.
3.
32
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.