Date: 03/11/06 (Javascript Community)    Keywords: software, browser, css, html, xml, asp, java, web, linux, seo, microsoft

Events: A Introduction to the Model of GUI programing

Xah Lee, 2005-05

In Graphical User Interface (GUI) programing, there's the concept of event. For example, moving the mouse, clicking a mouse button, switch to a different window, hitting a key. The software needs to respond to these things. The way it works is that, the programer writes code that draw buttons, menus, windows etc. And the programer write his program so that it knows the mouse position, mouse click, keyboard press, or any other signal from input devices. The programer also writes code so that for example if a mouse click happened, and its position is inside a button, then some function is called as a reaction.


All this is very tedious and very complex. What happens today is that most of the common tasks for GUI software are already written as a package called framework. That is to say, the codes to draw GUI elements such as windows or buttons or dialogue popups, and the detection of input signals such as button clicking or menu selection or keyboard inputs, are all integrated together as a pre-written set of code. The programer is relieved of writing these tedious code. Instead, he call predefined functions in the framework to deal with many issues related to creating a GUI.

In such a framework, it is still quite complicated. Such framework often comes in the guise of Operating System Developer's Kit. For example, writing application in Mac OS uses Apple's kit called Cocoa, Carbon, Toolbox, and there's also Microsoft's Foundation Classes (MFC) and Linux has frameworks such as Gnome, and Java offers its own GUI framework called AWK and Swing.

All these frameworks are incompatible with each other, but the model they use are basically the same. In today's personal computing, one basically have graphical “Windows”, and in it one has “Menus”, and “Buttons”, “Dialogues”. User point or click on these to tell the software to do specific things. For the programer, the way it works in these frameworks is like this:

In the framework, GUI elements such as Windows, Menus, Buttons are collectively called “widgets”. For each GUI element there is a pre-defined function that draws them. The programer calls these functions to draw them. When a user act on these widgets such as pressing a button, the widget's function will receive a signal. Each widget may be associated with different types of signals. For example, Windows can be dragged or resized, while a button can be clicked, a menu has items to be selected. When a Window is dragged, the corresponding widget function might get a signal that is the positions of beginning and ending coordinates. When a window is closed, the widget function will get a “close” signal. When a button is clicked, that button's widget function will get a “click” signal. When a menu is pulled, that menu's widget function will get a signal of the selected item.

For each widget-drawing function the programer called, he assigns to it a function called “event handler”. These event handlers are called and are given the signals when user acts on them. For example, when a button is clicked, the button widget function automatically calls its event handler function and gives it “clicked” as argument.

The programer doesn't have to worry about how the button function knew when it is being pressed. All that is implemented in the framework. The GUI programer today only needs to call these widget function as to design the appearance of the window, where the button shows up, what menu items are there etc, and assign a function (event handler) to each of these functions, so that when these GUI elements are hit, the widge functions call the programer's event handler functions, which do whatever computation the software is actually supposed to do.
HTML, DOM, JavaScript, and the Browser as a GUI Application Platform

In writing Web Application using JavaScript, the technologies involved are HTML, DOM, JavaScript, and the Browser.

The HTML (and related technologies such as XML and CSS) are used to show the GUI widgets and content. DOM ascribes to HTML a standard definition of structural meaning so that it can be manipulated programmatically. And, JavaScript is the language that actually lets the programer program what happens. While the browser, is the underlying engine that ties everything together. It takes care of rendering the HTML, and takes care of knowing all the mouse positions and register all events (user actions) such as keystroks, mouse movement, clicks, menu pulls, window closing etc. It takes care of interpreting the JavaScript code, and will execute them when a event happens.

Here, the GUI is the browser window and HTML elements (radio checklist, check box list, menu list, text field, button, window pane/frame etc.). The events (user actions) are defined by DOM. They are for example: oncopy, ondrag, onload, onclick, onkeydown, onmouseover. And the actions (event handlers) are JavaScript functions the user writes.

For example, it may be desired to change the cursor icon to a finger when the mouse is moved over a hyperlink. So, a hyperlink (considered as a widget) has a MouseOver event, and the programer can assign a event handler to it, so when a mouse hovers over a link, that function is called, and the function's code changes the mouse pointer icon to a finger icon.

For list of events defined by DOM, see for example: http://msdn.microsoft.com/workshop/author/dhtml/reference/events.asp
Assign Event Handlers to GUI Widgets

To associate a event handler to a HTML widget, there are two ways. One way is to put the code directly inside the HTML tag, like this:

Hover Over Me!

Hover Over Me!

Source: http://community.livejournal.com/javascript/96319.html