EEC-492/693/793 iPhone Application Development

Slides:



Advertisements
Similar presentations
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.
Advertisements

Table Views UITableView. Overview Table view basics Tables display lists of data Each item in a tables list is a row Tables can have an unlimited number.
Detecting Collisions CSE 391 Fall 2012 Tony Scarlatos.
Create a calculator– 2nd iPhone programming exercise CSE 391 Fall 2012.
IOS and AddressBook CS4521. Address Book UI Framework Exploring Contacts.
Chapter 12 Creating and Using Templates. If you have already created and designed a page you like, you can use the layout and design for other pages in.
XP New Perspectives on Microsoft Access 2002 Tutorial 61 Microsoft Access 2002 Tutorial 6 – Creating Custom Reports.
The Accelerometer CSE 391 Fall 2011 Tony Scarlatos.
View Controllers (second part) Content taken from book: “iPhone SDK Development” by Bill Dudney and Chris Adamson.
Storyboards Managing multiple views. Overview Create a single view application Give the project a name and click “Use Storyboards” and “Use Automatic.
Programming with App Inventor Computing Institute for K-12 Teachers Summer 2012 Workshop.
Microsoft Visual Basic 2012 CHAPTER TWO Program and Graphical User Interface Design.
Sprite Animation CSE 391 Fall 2012 Tony Scarlatos.
Refactoring Moving a console app to a UI app. Refactoring Goal: change a console app to a UI app Principles: The main.m goes away The local variables.
Microsoft Excel Spreadsheet Blue Section Project 2.
IE 411/511: Visual Programming for Industrial Applications
Introduction to Maya. Maya’s Layout User Interface Elements In Maya, you can tear off menus to create separate floating boxes that you can place anywhere.
iOS components in Swift
Promodel tutorial tutorial.
1 Designing with a UIToolBar iPhone/iPad, iOS Development Tutorial.
Tabbed Views UITabBarController. Controller Architecture UITabBarController Controls the first view that the user sees The view controller class (and.
Navigation in iPads splitViewController. Overview Create a Master-Detail application Switch Device Family to iPad Give the project a name and click “Use.
IOS with Swift Hello world app.
IC 3 BASICS, Internet and Computing Core Certification Key Applications Lesson 11 Organizing the Worksheet.
Create a Web View App Step-by-Step. Step 1 Create a new project in XCode using the "Single View Application" option.
View Controllers Content taken from book: “iPhone SDK Development” by Bill Dudney and Chris Adamson.
Gestures UIGestureRecognizer.
Chapter 4 Working with Frames. Align and distribute objects on a page Stack and layer objects Work with graphics frames Work with text frames Chapter.
User Interface Objects From Beginning iPhone 4 Development and The iPhone Developer’s Cookbook (Chapter 4)
Orientation Configuration adapting to orientation changes.
An Inspiration Software Tutorial INDEX Changing a Symbol in Inspiration Adding a Symbol in Inspiration Moving a Symbol in inspiration Adding text under.
Common user interface, yet new stuff Notice: similar menus and buttons new menus: Data new features: –name box –Formula bar –3 sheets=1 binder(more can.
Gold – Crystal Reports Introductory Course Cortex User Group Meeting New Orleans – 2011.
Splatter! Critical Design Review By: David Kikuta March 15, 2011.
1 UI Alert View iPhone/iPad, iOS Development Tutorial.
What is a Combo Box? Is a list of values from which the user can select a single value. Saves typing Adds another means of enforcing referential integrity.
Lecture 10 Using Interface Builder to create Mac Applications.
The iOS Platform and SDK. iOS iPhoneiPad Mini iPad.
1 Reverse a String iPhone/iPad, iOS Development Tutorial.
IE 411/511: Visual Programming for Industrial Applications Lecture Notes #2 Introduction to the Visual Basic Express 2010 Integrated Development Environment.
PhotoShop Creative Suite 3 Chapter 1 The Work Area.
WebViews UIWebView. Controller Architecture UITabBarController Controls the first view that the user sees The view controller class (and xib) that manages.
iOS - iPhone/iPad Application Development Workshop Part 1
EEC-693/793 Applied Computer Vision with Depth Cameras
Java FX: Scene Builder.
iOS UI Components Sisoft Technologies Pvt Ltd
SUMMARIZING DATA AND CALCULATING IN FORMS AND REPORTS Section 4
Formatting a Worksheet
EEC-693/793 Applied Computer Vision with Depth Cameras
iOS - First Application Anatomy
Workshop 3.1 Sketching DesignModeler.
Designing with Introspection
Program and Graphical User Interface Design
EEC-492/693/793 iPhone Application Development
EEC-693/793 Applied Computer Vision with Depth Cameras
EEC-492/693/793 iPhone Application Development
Program and Graphical User Interface Design
EEC-492/693/793 iPhone Application Development
EEC-492/693/793 iPhone Application Development
Promodel tutorial tutorial ITSS - Modelos de simulación.
EEC-492/693/793 iPhone Application Development
CSC 581: Mobile App Development
EEC-492/693/793 iPhone Application Development
Inserting Pictures and Symbols in Word documents
EEC-492/693/793 iPhone Application Development
EEC-492/693/793 iPhone Application Development
European Computer Driving Licence
EEC-693/793 Applied Computer Vision with Depth Cameras
CSC 581: Mobile App Development
CSC 581: Mobile App Development
Presentation transcript:

EEC-492/693/793 iPhone Application Development Lecture 5 Wenbing Zhao & Nigamanth Sridhar 5/15/2019 EEC492/693/793 - iPhone Application Development

Outline Control Fun App (part II) 5/15/2019 5/15/2019 EEC492/693/793 - iPhone Application Development EEC492/693/793 - iPhone Application Development 2

Implementing the Slider and Label Determining outlets The label will need to be changed when the slider changes => need an outlet for the label When the slider is changed, we want to be able to retrieve the slider’s value Normally would need an outlet for the slider However, we could reuse the outlet for the label and avoid introducing another outlet 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing the Slider and Label Determining actions We need one for the slider to call when it is changed Adding outlets and actions: Control_FunViewController.h #import <UIKit/UIKit.h> @interface Control_FunViewController : UIViewController { UITextField *nameField; UITextField *numberField; UILabel *sliderLabel; } @property (nonatomic, retain) IBOutlet UITextField *nameField; @property (nonatomic, retain) IBOutlet UITextField *numberField; @property (nonatomic, retain) IBOutlet UILabel *sliderLabel; - (IBAction)textFieldDoneEditing:(id)sender; - (IBAction)backgroundTap:(id)sender; - (IBAction)sliderChanged:(id)sender; @end 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing the Slider and Label Adding outlets and actions: Control_FunViewController.m #import "Control_FunViewController.h" @implementation Control_FunViewController @synthesize nameField; @synthesize numberField; @synthesize sliderLabel; - (IBAction)sliderChanged:(id)sender { UISlider *slider = (UISlider *)sender; int progressAsInt = (int)(slider.value + 0.5f); NSString *newText = [[NSString alloc] initWithFormat:@"%d", progressAsInt]; sliderLabel.text = newText; [newText release]; } - (IBAction)backgroundTap:(id)sender { ... - (void)dealloc { [nameField release]; [numberField release]; [sliderLabel release]; [super dealloc]; } 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing the Slider and Label Adding the slider and label Double-click Control_FunViewController.xib to launch Interface Builder Blue guideline means: don’t get any closer than this From the library, drag a slider and put it below the number text field Single-click the slider, and go to the inspector Set the range: min of 1, max of 100, and init value 50 Bring over a label and place it next to the slider Use blue guidelines to align it Double-click it and change its text to 100 Resize the label: select Size to Fit from Layout Menu (⌘=) Then change the label text to 50 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing the Slider and Label Connecting the actions and outlets Control-drag from File’s Owner icon to the label you just added, and select sliderLabel Single-click the slider, then bring up the connections inspector (⌘2), drag Value Changed to File’s Owner, and select sliderChanged Save the nib Go back to Xcode, and try out the slider 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing Switches, Button, & Segmented Control What we will add Two switches: each can only have two states: on and off Segmented control: hide and show the switches A button: will be shown when switches are hidden Determining outlets One outlet for left switch One outlet for right switch One outlet for button Determining actions Segmented control will trigger an action: hide or show two difference views (switches and button) Another action required when either switch is tapped Yet one more action when button is pushed 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing Switches, Button, & Segmented Control Modification to Control_FunViewController.h #import <UIKit/UIKit.h> // constant defined for better readability #define kSwitchesSegmentIndex 0 @interface Control_FunViewController : UIViewController { UITextField *nameField; UITextField *numberField; UILabel *sliderLabel; UISwitch *leftSwitch; UISwitch *rightSwitch; UIButton *doSomethingButton; } 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing Switches, Button, & Segmented Control Modification to Control_FunViewController.h @property (nonatomic, retain) IBOutlet UITextField *nameField; @property (nonatomic, retain) IBOutlet UITextField *numberField; @property (nonatomic, retain) IBOutlet UILabel *sliderLabel; @property (nonatomic, retain) IBOutlet UISwitch *leftSwitch; @property (nonatomic, retain) IBOutlet UISwitch *rightSwitch; @property (nonatomic, retain) IBOutlet UIButton *doSomethingButton; - (IBAction)textFieldDoneEditing:(id)sender; - (IBAction)backgroundTap:(id)sender; - (IBAction)sliderChanged:(id)sender; - (IBAction)toggleControls:(id)sender; - (IBAction)switchChanged:(id)sender; - (IBAction)buttonPressed; @end 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing Switches, Button, & Segmented Control Modification to Control_FunViewController.m #import "Control_FunViewController.h" @implementation Control_FunViewController @synthesize nameField; @synthesize numberField; @synthesize sliderLabel; @synthesize leftSwitch; @synthesize rightSwitch; @synthesize doSomethingButton; 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing Switches, Button, & Segmented Control Modification to Control_FunViewController.m - (IBAction)toggleControls:(id)sender { if ([sender selectedSegmentIndex] == kSwitchesSegmentIndex) { leftSwitch.hidden = NO; rightSwitch.hidden = NO; doSomethingButton.hidden = YES; } else leftSwitch.hidden = YES; rightSwitch.hidden = YES; doSomethingButton.hidden = NO; 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing Switches, Button, & Segmented Control Modification to Control_FunViewController.m - (IBAction)switchChanged:(id)sender { UISwitch *whichSwitch = (UISwitch *)sender; BOOL setting = whichSwitch.isOn; [leftSwitch setOn:setting animated:YES]; [rightSwitch setOn:setting animated:YES]; } - (IBAction)buttonPressed { // TODO: Implement Action Sheet and Alert - (IBAction)sliderChanged:(id)sender { ... 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing Switches, Button, & Segmented Control Releasing the outlets in Control_FunViewController.m - (void)dealloc { [nameField release]; [numberField release]; [sliderLabel release]; [leftSwitch release]; [rightSwitch release]; [doSomethingButton release]; [super dealloc]; } 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing Switches, Button, & Segmented Control Adding switches and segmented control to UI Go to interface builder Drag a segmented control from library and place it on the View windows slightly below the slider Stretches it from the view’s left margin to right Double-click the control to rename the default texts: First => Switches, and Second => Button Adding two labeled switches from library Could option-drag the 1st switch to create the 2nd switch 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing Switches, Button, & Segmented Control Connecting the switch outlets and actions Control-drag from File’s Owner to each of the switches, and connect them to the leftSwitch or rightSwitch outlet Select left switch and press ⌘2 to bring up the connections inspector, and drag from Value Changed event to the File’s Owner icon, and select the switchChanged: action Repeat with the other switch Select segmented control and bring up the connections inspector, and drag from Value Changed event to the File’s Owner icon, and select the toggleControls: action 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing Switches, Button, & Segmented Control Adding the Button Drag a Round Rect Button from the library to the view Add it right on top of the left switch Align it with the left margin and vertically align its center with switches Grab right center resize handle and drag all the way to the right until you reach the blue guideline The button should completely cover the two switches Double-click the button and give a text of Do Something Bring up the attribute inspector and click the Hidden checkbox so that the button is hidden initially 5/15/2019 EEC492/693/793 - iPhone Application Development

Implementing Switches, Button, & Segmented Control Connecting the Button outlet and action Control-drag from File’s Owner to the button Select the doSomethingButton outlet Go back to the connections inspector Drag from the circle next to the Touch Up Inside event to the File’s Owner, and select the buttonPressed: action Save your work Go back to Xcode, build and run 5/15/2019 EEC492/693/793 - iPhone Application Development