Managing UI Components
through Interface Builder
Pre-Lab Lecture 1
1
Flows of Pre-Lab Lecture 1

Objective and Overview of the five Tutorials

UI components Classification

Overview of Lab 1
2
Overview of Tutorials
Lab 1 –Building UI components through Interface Builder


How to put different GUI objects on the screen
Lab 2 – Managing UI components in Runtime


How to display images in the program codes

Lab 3 – Animation

Lab 4 – Touch Events and Accelerometer

Run your program in iPod Touches/iPads!
Lab 5 - Putting Things Together


3
Complete and customize the game
What is a UI Component?




A UI component is something a user can see in the
application screen, such as a button, a label, an
image, etc.
It is also referred as UI View
Each UI view has a Bounding Box to describe its size
and location
Different components have their unique attributes
Origin (x, y)
A UILabel
Center (x, y)
I am Carson
width
height
UI Components Example
UILabel
UILabel
UIImageView
UIButton
5
UIButton
Creating UI Components

Through Interface Builder
You can add in UI component by drag and drop
the UI component from the library to the view
directly (Tutorial 1 part 1)
 This is 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 (Tutorial 2 part 1 and pre-lab 2)


6
Buttons (1)
A button can be touched (pushed) by default


The application assumes someone will touch it and
there are pre-defined actions on a button
Example defined actions




7
Touch down – Finger presses onto the button
Touch up – Finger moves up from the button
Touch Up Inside - Finger presses or moves onto the
button and then moves up. (Generally speaking, we
use this action as “pressing/pushing a button”)
Buttons (2)

8
Specify what to do when a button is pressed
 Give a name to a function that will handle
the action in Interface Builder
 Connect the iPhone defined action (e.g.,
“Touch Up Inside”) to the function name in
Interface Builder
 Define the function in Xcode
 The function is also known as IBAction
 In Tutorial 1 Part 2
Moving a UI Component in Runtime

The drag and drop way creates a static UI
component (it would not move)

To change the properties 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
 Connect the UI component to the name declared
 Practice In Tutorial 1 Part 2
9
Highlights of Tutorial 1
Open Interface Builder by Double-Click the
BallShootingViewController.xib file
Current
Screen View
UI
components
Library
11
Double-click
to open the
screen view if
closed
accidentally
Attribute of
UI component
Drag UIImageView From Library to the
View
Always use
Class tab in
library
12
Drag
UIImageView
to the view
Select an Image File from the Attribute
Window
Select image
file here
Uncheck
Opaque here
13
Defining an IBOutlet
1. Find out the
“BallShootingViewController” in the
Library
2. Select “Outlets” in the pull down menu
3. Press the “+” button on the left hand
button
4. Input “userImage” (Name of the
IBOutlet) on the left hand side and
“UIImageView” (Type of the UI
Components) on the right hand side
14
Connecting the IBOutlet with the UI
Component
2 Pop up
3. Drag to the UI
Component at the
center “user.png”
Control-Click
15
Defining an IBAction
1. Find out the
“BallShootingViewController” in the
Library
2. Select “Actions” in the pull down menu
3. Press the “+” button on the left hand
button
4. Input “moveLeftButtonPressed:”
(IBAction Function name) on the left
hand side and leave it as “id” on the
right hand side
16
Connecting the IBAction with the UI
Component
2 Pop up
3. Drag to the file’s owner
1 Control-Click
17
Writing to the .h and .m files
2 Write Class
Files
Highlight on
File’s Owner
18
File Merging –
BallShootingViewController.h
IBOutlet
Declaration
19
IBAction Declaration
Left side of codes are selected
to be included in the merged
file
File Merging –
BallShootingViewController.m
Left side of codes are selected
to be included in the merged
file
IBAction function
Implementation
20
Right side of codes are
selected to be included in the
merged file