420 likes | 431 Views
This lesson provides an overview of event-driven programming, focusing on GUIs using Java as an example. The program developed in this lesson showcases a menu, two circles, and two buttons that can be toggled on and off.
E N D
Welcome to CIS 068 ! Lesson 6: Events CIS 068
Overview • Subjects: • Structured Programming vs. Event Driven Programming(EDP) • Events • Events in JAVA • GUIs as Example for EDP CIS 068
An Example • The task: write a program,showing • a menu • 2 circles • 2 buttons Menu Reset Exit ON / OFF ON / OFF CIS 068
An Example Show both circles Exit Program The circles Buttons toggle circles Menu Reset Exit ON / OFF ON / OFF CIS 068
An Example Menu Reset Exit Do you really want to do that ? YES NO ON / OFF ON / OFF Confirm command by dialog CIS 068
An Example Required: All commands must be executable at every time CIS 068
Sequential Approach A first approach could be: Check Menu Show Window Check Button 1 Check Button 2 Check Button Y Check Button N Exit or Loop CIS 068
Sequential Approach Of course this approach doesn’t fulfill the requirements ! (If button 1 is activated, button 2 and the menu are disabled) CIS 068
Sequential Approach 2 Show Dialog A Check Menu Set dialogA = true Check Button 1 Check Button 2 Show Dialog B If dialogA Set dialogB = true Check Button Y / N … If dialogB Check Button Y / N … Loop CIS 068
Sequential Approach 2 Does this approach meet the requirements ? What does the program, i.e. the processor, do most of the time ? What about more complicated structures (nested command structures,…) ? CIS 068
Event Driven Approach What about this approach: Process Menu Menu activated Process Button 1 Button 2 activated Button 1 activated Process Button 2 Button Y activated Process Button Y Button N activated Process Button N CIS 068
Example: Discussion • And again: • Does this approach meet the requirements ? • What does the program, i.e. the processor, do most of the time ? • What about more complicated structures (nested command structures,…) ? • Who is in control of the program’s flow ? CIS 068
Sequential vs. Event-driven Programming Comparison between Sequential And Event Driven Programming CIS 068
Sequential Programming • In sequential programs, the program is under control • The user is required to synchronize with the program: • Program tells user it’s ready for more input • User enters more input and it is processed • While … if then… structures highly define the user’s path through the program • Program is predefined with respect to time • Handling of sequentially independent commands requires enormous amount of work CIS 068
Sequential Programming • Flow of a typical sequential program • Prompt the user • Read input from the keyboard • Parse the input (determine user action) • Evaluate the result • Generate output • Repeat Shouldn’t the program be required to synchronize with the user? CIS 068
Sequential Programming • Advantages • Architecture is iterative (one step at a time) • Easy to model (flowcharts, state machines) • Easy to build • Limitations • Can’t implement complex interactions • Only a small number of features possible • Interaction must proceed according to a pre-defined sequence • To the rescue… Event-driven programming CIS 068
Event Driven Programming • Instead of a user synchronizing with the program, the program synchronizes with, or reacts to, the user • All communication from user to computer occurs via EVENTS and the code that handles the events • An event is an action that happens in the system • A mouse button pressed or released • A keyboard key is hit • A window is moved, resized, closed, etc. CIS 068
Event Driven Programming • Typically two different classes of events • User-initiated events • Events that result directly from a user action • e.g., mouse click, move mouse, button press • System-initiated events • Events created by the system, as it responds to a user action • e.g., scrolling text, re-drawing a window CIS 068
Event Driven Programming • There’s no top-down flow of control, i.e. no ‘Main’-program defining the sequential flow • Code fragments are associated with events and invoked when events occur • Order of execution is decoupled • Don’t have to deal with order of events • This is especially helpful, when the order is unknown ! CIS 068
Typical Applications • GUIs • Modern GUIs are event driven. Event occurs when the user does something: • Move the mouse • Press a button • Activate a menu • Resize Window • … CIS 068
Typical Applications • Other Examples: • Event driven I/O • Especially networking, where I/O is very slow • Events occur, when • Connection is made • When ready to send • When data arrives • LEGO Mindstorms • Events occur, when • Sensors report changes in environment CIS 068
Event Driven Programming How does it work or where’s the ‘MAIN’ ? CIS 068
Participants in an OO - Event Driven System • Event Source • objects that generate events, e.g. buttons • Event • represent occurences, changes of state or requests which a program might need to handle • store all event-specific information (e.g. mouseEvent: x/y coordinates) • Handler (Listener) • objects that respond to events • Provide the code needed to handle the event CIS 068
Participants in an OO - Event Driven System Event Source (e.g. mouse) Listener Event Public void mouseClicked( MouseEvent e){ … } CIS 068
Registering Listeners • The listener must be known to the event source, such that the event can be sent • Listener is REGISTERED • Listeners specify what kind of events they are interested in, i.e. specify the event sources • Typically done by addXXXListener(Listener) CIS 068
Registering Listeners Listener 1 Listener 2 Source (eg. Button) Listener 3 Listener 4 REGISTER (‘please inform me’) CIS 068
Registering Listeners: JAVA example here ! CIS 068
Where’s the ‘MAIN’ ? • The Operating System (or JAVA) manages an event-queue • The event-queue contains information about event-sources and their registered listeners • As events occur, they are placed in the queue to be dispatched by the event - loop • The OS (or JAVA) loops through the event-queue, passing the command to the specified listeners • The MAIN – control is passed to the OS (or JAVA), the program is in idle state until activated by events • The MAIN is replaced by the event-loop CIS 068
Where’s the ‘MAIN’ ? • The advantage: • The OS (or JAVA) can optimize the processing time for managing the loop very efficiently • The OS provides the management, the programmer only writes (and registers) listeners CIS 068
Events in JAVA: Sources • Event Sources: • Mouse • Keyboard • GUI – Objects (AWT / Swing) • Button • ChoiceBox etc. CIS 068
Events in JAVA: Events Note: this diagram is not complete. It just shows the most common event classes EventObject AWTEvent ActionEvent ComponentEvent InputEvent WindowEvent MouseEvent KeyEvent CIS 068
Events in JAVA: Listeners Classes implementing the ‘Listener’ – interfaces (package java.awt.event) CIS 068
Events in JAVA: the example revisited ButtonDemo is able to receive ActionEvents Creates the event source Adds button to frame but does NOT register ButtonDemo ! Registers THIS instance of ButtonDemo to theButton If theButton is pressed, an ActionEvent is sent to the Method actionPerformed(..), i.e. the method is invoked with the event as argument. CIS 068
JAVA-Events: GUI – Example Implementation of the first example (without Menu and Dialog) CIS 068
JAVA-Events: GUI – Example JFrame CIS 068
JAVA-Events: GUI – Example AREA 1 AREA 2 JFrame layout: GridLayout(1,2) Provides 1 x 2 Grid. Each area of grid can contain a new GUI – component. CIS 068
JAVA-Events: GUI – Example CENTER SOUTH • Each area contains a JPanel. • JPanel – layout: BorderLayout() • Used are only the CENTER and SOUTH areas. CIS 068
JAVA-Events: GUI – Example • The CENTER contains a JComponent • JComponent can be used for custom – drawing using the paint() method • The SOUTH area contains a JButton CIS 068
JAVA-Events: GUI – Example The Main - Window: JFrame Layout Add JPanels CIS 068
JAVA-Events: GUI – Example The JPanel, containing the circle and the button: Layout Create JComponent And Button Register JComponent to Button ! Add JComponent and Button CIS 068
GUI – Example The JComponent, responsible for drawing the circle: Constructor This method is invoked by JButton ! Paint green background and, if required, red circle CIS 068
Outlook Next time: GUI – Elements ! CIS 068