View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the...
-
Upload
madalyn-mcgarry -
Category
Documents
-
view
214 -
download
0
Transcript of View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the...
![Page 1: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/1.jpg)
View-Based Application Development
Lecture 1
1
![Page 2: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/2.jpg)
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
![Page 3: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/3.jpg)
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
![Page 4: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/4.jpg)
Screenshot of the Game
4
![Page 5: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/5.jpg)
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
![Page 6: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/6.jpg)
GUI (Graphical User Interface) Programming – Multiple Execution Flows
6
Multiple media inputs/outputs Multiple flows
of GUI application
![Page 7: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/7.jpg)
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)
![Page 8: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/8.jpg)
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
![Page 9: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/9.jpg)
View-Based Application Project – VolcanoRockEscaping
9
MainViewController
App Delegate
![Page 10: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/10.jpg)
10
main
App Delegate
View Controller
Screen View
Main Window
View-Based Application Architecture
View Controller
![Page 11: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/11.jpg)
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
![Page 12: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/12.jpg)
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
![Page 13: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/13.jpg)
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
![Page 14: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/14.jpg)
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
![Page 15: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/15.jpg)
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
![Page 16: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/16.jpg)
16
iPhone App Development Tools Xcode
Text Editor Compiler
iPhone Simulator Test your app
Interface Builder Building up the interface of an app
![Page 17: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/17.jpg)
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
![Page 18: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/18.jpg)
Xcode Layout
18
4. File Text Editor
2. Compile and Run
3. Source Files Location
1. Target Device/Simulator
![Page 19: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/19.jpg)
File Text Editor in Xcode
19
1. When you highlight the file here
2. Corresponding content will be shown here
![Page 20: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/20.jpg)
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
![Page 21: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/21.jpg)
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
![Page 22: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/22.jpg)
Interface Builder I
22
Click on“ViewController.xib”
a. Library Window
b. Viewc. XIB Components Window
d. Inspector Window
![Page 23: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/23.jpg)
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
![Page 24: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/24.jpg)
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
![Page 25: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/25.jpg)
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
![Page 26: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/26.jpg)
UI Components Example
26
UIImageViewUILabel UIButton
![Page 27: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/27.jpg)
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
![Page 28: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/28.jpg)
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
![Page 29: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/29.jpg)
UI Components Example
29
Properties will change during runtimeWill not change during
runtime
![Page 30: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/30.jpg)
IBOutlet – A variable to represent the UIComponent
30
life1Image
life2Image
life3Image
scoreLabel timeLabel
![Page 31: View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.](https://reader036.fdocuments.us/reader036/viewer/2022062511/551653fa5503469d698b4cb5/html5/thumbnails/31.jpg)
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