1 / 42

Welcome to CIS 068 !

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.

Download Presentation

Welcome to CIS 068 !

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. Welcome to CIS 068 ! Lesson 6: Events CIS 068

  2. Overview • Subjects: • Structured Programming vs. Event Driven Programming(EDP) • Events • Events in JAVA • GUIs as Example for EDP CIS 068

  3. An Example • The task: write a program,showing • a menu • 2 circles • 2 buttons Menu Reset Exit ON / OFF ON / OFF CIS 068

  4. An Example Show both circles Exit Program The circles Buttons toggle circles Menu Reset Exit ON / OFF ON / OFF CIS 068

  5. An Example Menu Reset Exit Do you really want to do that ? YES NO ON / OFF ON / OFF Confirm command by dialog CIS 068

  6. An Example Required: All commands must be executable at every time CIS 068

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

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

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

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

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

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

  13. Sequential vs. Event-driven Programming Comparison between Sequential And Event Driven Programming CIS 068

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

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

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

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

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

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

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

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

  22. Event Driven Programming How does it work or where’s the ‘MAIN’ ? CIS 068

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

  24. Participants in an OO - Event Driven System Event Source (e.g. mouse) Listener Event Public void mouseClicked( MouseEvent e){ … } CIS 068

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

  26. Registering Listeners Listener 1 Listener 2 Source (eg. Button) Listener 3 Listener 4 REGISTER (‘please inform me’) CIS 068

  27. Registering Listeners: JAVA example here ! CIS 068

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

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

  30. Events in JAVA: Sources • Event Sources: • Mouse • Keyboard • GUI – Objects (AWT / Swing) • Button • ChoiceBox etc. CIS 068

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

  32. Events in JAVA: Listeners Classes implementing the ‘Listener’ – interfaces (package java.awt.event) CIS 068

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

  34. JAVA-Events: GUI – Example Implementation of the first example (without Menu and Dialog) CIS 068

  35. JAVA-Events: GUI – Example JFrame CIS 068

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

  37. JAVA-Events: GUI – Example CENTER SOUTH • Each area contains a JPanel. • JPanel – layout: BorderLayout() • Used are only the CENTER and SOUTH areas. CIS 068

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

  39. JAVA-Events: GUI – Example The Main - Window: JFrame Layout Add JPanels CIS 068

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

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

  42. Outlook Next time: GUI – Elements ! CIS 068

More Related