Lecture 3: Application State + Event Driven Programming CSS290: APPS ON MOBILE DEVICES.

Slides:



Advertisements
Similar presentations
Chapter 18 Building the user interface. This chapter discusses n Javas graphical user interface. n Swing: an enhancement of a library called the Abstract.
Advertisements

Chapter 16 Graphical User Interfaces
Introduction to Macromedia Director 8.5 – Lingo
Understanding an Apps Architecture ASFA Computer Science: Principles Fall 2013.
Chapter 16 Graphical User Interfaces John Keyser’s Modifications of Slides by Bjarne Stroustrup
CS0004: Introduction to Programming Visual Studio 2010 and Controls.
Microsoft® Small Basic
Mrs. Chapman. Tabs (Block Categories) Commands Available to use Script Area where you type your code Sprite Stage All sprites in this project.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Chapter Day 10. © 2007 Pearson Addison-Wesley. All rights reserved4-2 Agenda Day 10 Questions from last Class?? Problem set 2 posted  10 programs from.
Lecture 1: IDE + Application Structure + GUI Elements CSS290: APPS ON MOBILE DEVICES.
Aalborg Media Lab 23-Jun-15 Inheritance Lecture 10 Chapter 8.
Lecture 2: Events + Service Routines + Instance vs local Variable CSS290: APPS ON MOBILE DEVICES.
JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.
Object-Oriented Analysis and Design
Chapter Day 9. © 2007 Pearson Addison-Wesley. All rights reserved4-2 Agenda Day 8 Questions from last Class?? Problem set 2 posted  10 programs from.
Mr. Wortzman. Tabs (Block Categories) Available Blocks Script Area Sprite Stage All sprites in this project.
Chapter 6: Graphical User Interface (GUI) and Object-Oriented Design (OOD) J ava P rogramming: Program Design Including Data Structures Program Design.
GAME:IT Junior Bouncing Ball Objectives: Create Sprites Create Sounds Create Objects Create Room Program simple game.
Getting Started Example ICS2O curriculum
PROG Mobile Java Application Development PROG Mobile Java Application Development Event Handling Creating Menus.
Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1.
CS 104 October 26, 2011 App Inventor. Agenda Discuss guest speakers Discuss quiz Finish Paint Pot Discuss concepts from Chapters 2 & 3 Mole Mash (if time.
Introduction to Graphical User Interfaces. Objectives * Students should understand what a procedural program is. * Students should understand what an.
London April 2005 London April 2005 Creating Eyeblaster Ads The Rich Media Platform The Rich Media Platform Eyeblaster.
Forms - An Overview of Oracle Form Builder v.6.0 Abhishek Parag Prashant Arun.
Written by: Itzik Ben Shabat Technion - Israel Institute of Technology Faculty of Mechanical Engineering Laboratory for CAD & Lifecycle Engineering Lab.
Introduction to Matlab & Data Analysis
Java Programming: From Problem Analysis to Program Design, Second Edition1  Learn about basic GUI components.  Explore how the GUI components JFrame,
Lecture 5: Interaction 1  Principles of Interactive Graphics  CMSCD2012  Dr David England, Room 711,  ex 2271 
Lesson 1 What is Camtasia?. Lesson 2 Editing Objectives After completing the lesson, the student will be able to: Edit a basic recording Camtasia file.
App Inventor MIT App Inventor.
Developing the Game User Interface (UI) Lesson 5.
Chapter 10 Fireworks: Part II The Web Warrior Guide to Web Design Technologies.
CSC 395 – Software Engineering Lecture 13: Object-Oriented Analysis –or– Let the Pain Begin (At Least I’m Honest!)
QML Qt Quick with QML and you can use JavaScript for engine along C++ Started to be released since late 2009 (Qt 4.7) Nokia focused on that for the Symbian/Meego.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. Chapter 12 - Graphical User Interface Concepts: Part.
Interactive Programming Sec 49 Web Design. Objectives The student will: Understand the difference between movie mode and an interactive program Understand.
COM148X1 Interactive Programming Lecture 7. Topics Today HCI Event Handling.
Introduction to Windows Programming
Fundamentals of GUI Programming. Objectives: At the end of the session, you should be able to: describe the guidelines that are used for creating user-friendly.
Visual C# 2012 How to Program © by Pearson Education, Inc. All Rights Reserved.
TODAY: CONCEPTS Development for portable devices Definition of resources Deployment of resources Begin GUI Elements Properties and organization Events.
Visual C# 2012 How to Program © by Pearson Education, Inc. All Rights Reserved.
MS Visual Basic 6 Walter Milner. VB 6 0 Introduction –background to VB, A hello World program 1 Core language 1 –Projects, data types, variables, forms,
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 6 – Graphical User Interfaces Java Foundations: Introduction to Programming.
CS324e - Elements of Graphics and Visualization Timing Framework.
Java Programming: From Problem Analysis to Program Design, 3e Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Java Programming: From Problem Analysis to Program Design, Second Edition1 Lecture 5 Objectives  Learn about basic GUI components.  Explore how the GUI.
1 UI Alert View iPhone/iPad, iOS Development Tutorial.
JAVA: An Introduction to Problem Solving & Programming, 6 th Ed. By Walter Savitch ISBN © 2012 Pearson Education, Inc., Upper Saddle River,
Part 1 Working with Devices in the CQ Lab. Agenda 2 How to select a device and reserve it. Basic device operations inside the Lab Other features to get.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Microsoft Visual C# 2010 Fourth Edition Chapter 3 Using GUI Objects and the Visual Studio IDE.
Introducing Scratch Learning resources for the implementation of the scenario
111 State Management Beginning ASP.NET in C# and VB Chapter 4 Pages
Whittier STEM Fair 2016 CARLI PECORARO’S ANDROID APP PROJECT.
Computing and Information Technology Building a Web Browser
Forms Concepts Triggers Fired when Internal/External events occur
Introduction to Event-Driven Programming
Java Programming: From Problem Analysis to Program Design,
Lesson 1: Buttons and Events – 12/18
Introduction to Events
Event Driven Programming
EE 422C Java FX.
Tonga Institute of Higher Education
Educational Applications of Technology By: Samantha Evans
CSS290: Apps on Mobile Devices
Presentation transcript:

Lecture 3: Application State + Event Driven Programming CSS290: APPS ON MOBILE DEVICES

TODAY: CONCEPTS Reading: Chapter 3 (Skip P 47-56)) Simple user generated event Events from a button Event Driven Program Structure Solution State Reaction to events as solution Series of user generated event Touch/Move/Release For fun: Working Audio Think: Alarm clock that rings louder over time!?

SIMPLE CASE OF EVENTS App with one single button Press button to increase count See how to change the button’s label Give button a name, and change it’s content! Count Must be instance variable of MainPage Must Persist over Button Event Service function calls Cool app? Illustrate a simple point Application state and events State: Count Events: from button

APPLICATION STATE OF EVENT PROGRAMS The “state of your application”! What is “your application”? What do you want to do? E.g., Counting? Stop watch? Describe your solution in English! Keep track of number of times you have press the button  State: the number Keep track of number of seconds and millisconds passed  State: Seconds, Milli-Seconds Define persistent variables representing your state! Persistent over event services!! E.g., Instance variables to MainPage

EVENT DRIVEN PROGRAMMING SOLUTION States are “persistent variables” Int NumSecond, Int NumMilliSecond Events: in the form of function calls (Event Services/Handlers) Service: change the application state to implement your application! Timer: update/increase the NumSecond and/or NumMilliSecond accordingly Where will “Events come from”? E.g., can come from button push E.g., can come from timer (generated from the application)

STOP WATCH APP Implements Second/MilliSecond with BeginTime and Now!! Notice: does not explicitly keep track of number of second Another application state: Brush, just for fun

EXERCISE Add a button to stop/continue the stop watch Hint: look at Timer.IsEnable, Timer.Stop Add a button to re-start the stop watch You can start with the source code that was given to you

INTER-DEPENDENT EVENTS An event implies another one will be generated! Mouse Buttons: Down  Drag  Up Touch  Drag  Up Usually wants to keep track of what is happening along the way!! Manipulation series of Touch events Notice exists on ALL GUI elements! Remember about Event propagation/Routing: start from Parent Use Manipulation to capture movements Delta: what just happened Cumulative: what happened since the beginning Print out the Translation.X/Y to verify

EXAMPLE: EVENT ROUTING Look at the EventRouting source code Structure Blue: Grandparent: lowest priority in event handling Red: Parent: blocks delta from grandParent Green Region: highest priority: blocks End from Parent

EVENT ROUTING DETAILS Always sent to the leave!! (lowest-level child)!! Child-Green panel: touch/move: Start from all three generation Delta only from Child/Parent (Parent blocked the event from GrandParent) Completed: only from Child (Child blocked event from everyone!) Red Region: touch/move Start: from parent and grandParent Delta: only from Parent (blocked from grandParent) Completed: from both parent and grandParent (parent did not block Completed) Blue region: touch/move see all messages

WORKING WITH AUDIO MediaElement GUI element No need for appearance! Play(), Stop(), Volume, CurrentState Start/Stop Volume control Text Echo Easy? How, think Alarm Clock with interesting beeps!!

SELF TEST Event service that modify GUI apparance Changing the button content/label What is application state of an event driven program Variables describing persistent information Events trigger functions that modify the application state Inter-dependent events: passing event information along the Event routing: parent blocks events from children! For fun: Working with media

APPENDIX: MISC INFO Manipulation events on canvas: Must make sure Fill is not null, otherwise not capable for receiving events TextBox Accepts input!!