Interactor Tree Edith Law & Mike Terry
Today s YouTube Break https://www.youtube.com/watch?v=mqqo-iog4qw
Routing Events to Widgets Say I click on the CS349 button, which produces a mouse event that is dispatched. How do I get that event to the CS349 button? option 1: maintain a flat list of all the components in the window and figure out which one intersects with that point option 2: interactor tree, which is a hierarchical, tree-based organization of widgets
Interactor Tree The idea: add components as children of other components a child component s locations are expressed relative to its parent To assist with this, we can create components, called containers, whose sole purpose is to contain other components. In the Java GUI toolkit, containers includes components like panels, panes, boxes, etc. Containers have little or no visual representation, and server primarily to group components together.
Interactor Tree We can have two panels of components, one containing the list of classes buttons and the other containing the settings for the currently selected group. We can move these panels around, and the child widgets should move around with them, and react to input events in their new positions.
Routing Events Through the Interactor Tree When it comes time to paint or interpret an event, we need to ensure that the coordinates are relative to the parent. x
Interactor Tree: Summary We build an interactor tree of components, a hierarchical ordering of widgets, and use the interactor tree to specify widget locations relative to the parent component pass events down the interactor tree ask components to paint themselves and their children Finally, we can make the window itself an instance of a component, and place all other controls within that component. The window then becomes the root of the tree. To deliver an event, we just pass it to the window, and it recursively passes it down the tree to the proper widget (i.e., top-down dispatch)
Interactor Tree in the Web Browser This strategy for delivery events leads to a very elegant, recursive algorithm for routing events to components likely able to act on and interpret events. And, this idea is also analogous to how the Web browser handles the rendering of visual components and routes events to them.
HTML as DOM tree <html> <head> <title>cs349</title> </head> <body> <a href= http://uwaterloo.ca > UWaterloo </a> <h1>welcome!</h1> </body> </html>
HTML as DOM tree <html> <head> <title>cs349</title> </head> <body> Element: <head> <a href= http://uwaterloo.ca > UWaterloo </a> <h1>welcome!</h1> </body> </html> Element: <title> Text: CS349 Document Root element: <html> Attribute: <href> Element: <a> Text: UWaterloo Element: <body> Element: <h1> Text: Welcome!
DOM tree The Document Object Model (DOM) defines the structure of the HTML document as well as the behaviour of the objects it contains. The DOM serves as a standard, which enables Javascript to manipulate (e.g., add, remove, change) HTML elements and handle events in a portable way across different Web browsers.
Demo (1) Manipulating the DOM tree (2) Event Handling (3) Debugging Tools (4) Event Propagation
Manipulating the DOM Tree document.getelementbyid() document.getelementsbytagname() document.getelementsbyclassname() element.innerhtml = element.attribute= document.createelement() document.removechild() document.appendchild() document.replacechild() document.title document.images finding elements modifying elements adding/deleting elements finding HTML objects
DOM tree Besides manipulating HTML elements, the DOM enables Javascript to handle events. This allows us to create interactive webpages. The user does something and the page reacts. Javascript needs a way to detect user actions so it knows when to react. But how?
Event Handling To add interactivity to a widget (e.g., button), we can add an event handler to the widget. The eventhandler is a function that waits until a certain event (e.g., mouse click), then handles the event by executing some program that you have defined.
Demo (1) Manipulating the DOM tree (2) Event Handling (3) Debugging Tools (4) Event Propagation
Event Handling DOM Level 0 <button onclick= alert( hello ); > Say Hello! </button> DOM Level 1 document.getelementbyid( mybutton ).onclick = function() { alert( Hello! ); } DOM Level 2 var el = document.getelementbyid( mybutton ) el.addeventlistener( click, function() { alert( Hello ); }, false);
Event Handling DOM Level 2 events allow you to create as many handlers for an event as you want. addeventlistener allows registration of event listeners on the event target. removeeventlistener allows removal of event listeners from the event target. dispatchevent allows sending the event to the subscribed event listener.
Demo (1) Manipulating the DOM tree (2) Event Handling (3) Debugging Tools (4) Event Propagation
Chrome Debugging Tools DOM breakpoint printout, error
Event Propagation var el = document.getelementbyid( mybutton ) el.addeventlistener( click, function() { alert( Hello ); }, false); what is the meaning of this flag?
Event Propagation Events travel through the document in two phases: capture and bubble phase. <html> <head> <title>cs349</title> </head> <body> <div id= mydiv > <a href= http://www.uwaterloo.ca > UWaterloo </a> <h1>welcome!</h1> </div> </body> </html> Suppose that you click on the anchor tag UWaterloo, the click events drills down the document through the anchor s parent to reach it (capture phase), then circles around and goes back up to the document root (called Bubble phase).
Event Propagation Event objects are dispatched to an event target through a propagation path. capture: the event propagates from the document root to the target s parent. Event listeners registered for this phase handle the event before it reaches its target. target: the event arrives at the final target element. Event listeners registered for this phase handle the event at the target. bubble: the event propagates in reverse order, starting with the target s parents and ending with the document root. Event listeners registered for this phase just handle the event after it has reached its target. image source: W3C
Demo (1) Manipulating the DOM tree (2) Event Handling (3) Debugging Tools (4) Event Propagation
Event Propagation: Summary A component (e.g., a hyperlink) adds an event listener for a particular event (e.g., mouse click), and specify whether it should be executed in the capture or bubble phase. When the event happens: (1) calculate the parent node path to the target. (2) loop through the parent node path, and execute all the capture phase handlers. Any of the event handlers can stop the propagation by calling event.stoppropagation(). (3) execute DOM level 1 event handler (e.g., onmouseclick) (4) execute the bubble phase handlers. Any of the event handlers can stop the propagation by calling event.stoppropagation(). (5) execute the default browser behaviour. You can override the default behaviour by calling event.preventdefault().
Assignment 1: UTrack App How is your mental and physical health affected by your activities? Good question! In this assignment, you will create a "quantified self" web application called UTrack, which allows users to track their daily activities and various health measures. They will also be able to visualize the data to spot trends and correlations over time. The assignment will reinforce the ideas of event handling as well as model-view-control architecture, which we will visit during the next lecture.