1 / 39

View-Based Application Development

View-Based Application Development. Lecture 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.

jalila
Download Presentation

View-Based Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. View-Based Application Development Lecture 1

  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. 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

  4. 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.

  5. Screen Shot of the Game

  6. BallShooting Game Breakdown INPUT PROCESS OUTPUT Static UI Components e.g., description labels Through UI Components, e.g., Buttons Action/Event Handling Update UI Component Status – One time Creating new UI components Dynamic UI Components , e.g., the score label – One time update Touch on Screen Update UI Component Status - Continuous Tilt Device Collision Detection Game End Condition Dynamic UI Components, e.g., the balloon – Continuous update

  7. 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

  8. Console programming – Single Execution Flow Sequential flow of console application: Input from user Output result Input from user Output result Input from user Output result ….. Boring black and white interface

  9. GUI (graphical user interface) programming – Multiple Execution Flows Multiple media outputs Multiple flows of GUI application Multiple user inputs

  10. Console programming vs. GUI programming – Development issues • 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)

  11. 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

  12. 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

  13. View based application project – BallShooting App Delegate Main BallShootingViewController Main Window 13

  14. View-based Application Architecture main App Delegate View Controller MainWindow View Controller Screen view

  15. View-based Application Architecture - Main • 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 main App Delegate View Controller MainWindow View Controller Screen view

  16. View-based Application Architecture – App Delegate • Represent as files “<ProjectName>AppDelegate.h”- Header File “<ProjectName>AppDelegate.m”- Implementation File • Will be activated to handle the several application events: • Application Launched • Application Terminated • Further invoke: • Main Window Frame • View Controller main Invoke App Delegate Invoke Invoke View Controller Invoke MainWindow View Controller Screen view

  17. View-based Application Architecture – Main Window Frame • Represent as a file“MainWindow.xib” • Acts as a frame container to include all other UI Components main Invoke App Delegate Invoke Invoke View Controller Invoke MainWindow View Controller Screen view

  18. View-based Application Architecture – View Controller • Represent as files • <ProjectName>ViewController.xib • <ProjectName>ViewController.m • <ProjectName>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 main Invoke App Delegate Invoke Invoke View Controller Invoke MainWindow View Controller Screen view

  19. 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 - <ProjectName>ViewController.xib • Code Logic File - <ProjectName>ViewController.h + <ProjectName>ViewController.m

  20. 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

  21. Introduction to Development Tool – Mac Desktop • When you turn on Mac, you will see

  22. Searching for Application on Mac Machine • You can press the icon on the right upper corner to search for application:

  23. iPhone App Development Tool - Xcode • Basically, we need a place to write our iPhone app. In Mac, Xcode is provided to do so.

  24. Create a New Project in Xcode • You can create a new project by pressing:

  25. 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.

  26. 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 • BallShootingViewController.h - The View Controller Header File • BallShootingViewController.m – The View Controller Implementation File • BallShootingViewController.xib – The View Controller Interface Builder file

  27. Xcode Layout I c. Compile and Run Target Device/Simulator b. Files Location d. File text Editor

  28. Target Selection – Device / iPhone Simulator Select whether your app would like to run in a real device or iPhone simulator

  29. File Text Editor in Xcode 1. When you highlight the file here 2. Corresponding content will show here

  30. Information Property List I • Most properties of the app can be modified in the information property list file. i.e., BallShooting-info.plist

  31. Information Property List II • Information Property List – Hidden Status Bar • Information Property List – Supported Orientations • Information Property List – Icon file

  32. Screen Shot After Modification • Landscape Orientation with no Status Bar • BallShooting Icon

  33. Interface Builder I • When you double click “BallShootingViewController.xib” b. View d. Attributes Inspector a. Library c. Components

  34. 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

  35. Developer Documentation I • When you want to look for help during coding, you can look for the developer documentation.

  36. 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.

  37. 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

  38. Another way of activating the Debug Console

  39. References • 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.

More Related