Event Handling with Atlas Client Controls - Handling Control Events
(Page 3 of 4 )
Atlas provides its client controls with an event handling mechanism. The mechanism works a bit differently than you might expect, but it’s still intuitive.
The first and most important step is to call theinitialize() method of the element whose events you want to handle. This enables all the mechanisms that are internally used to capture events. Then setting up events is a two-step process.
- Write an event handling function that is called when the event occurs.
- Link the event handling function to the element using<element>.<event name>.add(<method name>). The syntax is reminiscent of the event handling mechanism that the DOM provides for JavaScript (although it is not always used that way) and roughly on the .NET Framework implementation of delegates.
Events for Buttons
Remember the example with the three modal pop-up windows from the beginning of this chapter? There, the JavaScript code to display the windows was added declaratively in the HTML button. This can also be done using the Atlas library, but in that case, you do not gain much from using Atlas in comparison to the “pure” JavaScript way, except for the certainty that the Atlas library is fully loaded before attaching any JavaScript code to an element. However, the whole idea of the Atlas framework is to bring server-side and client-side development closer to each other and to bring new OOP capabilities and browser independence to the client. Therefore, using Atlas for tasks that you can do as easily in JavaScript still has benefits.
Example 4-9 revisits the “three windows” example from Example 4-1, using Atlas event handling. The HTML buttons are referenced using theSys.UI.Buttonclass, and the associated event is (obviously)click.
Example 4-9. Using Atlas Button control events
ControlEventButton.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>Atlas</title>
<script language="JavaScript" type="text/javascript">
function pageLoad(){
var button1 = new Sys.UI.Button($("MessageBoxOK"));
var button2 = new Sys.UI.Button($("MessageBoxOKCancel"));
var button3 = new Sys.UI.Button($("InputBox"));
button1.initialize();
button2.initialize();
button3.initialize();
button1.click.add(MessageBoxOKClick);
button2.click.add(MessageBoxOKCancelClick);
button3.click.add(InputBoxClick);
}
function MessageBoxOKClick() {
Sys.UI.Window.messageBox("Using Sys.UI.Window");
}
function MessageBoxOKCancelClick() {
Sys.UI.Window.messageBox("Using Sys.UI.Window", Sys.UI.MessageBoxStyle.
OKCancel);
}
function InputBoxClick() {
Sys.UI.Window.inputBox("Using Sys.UI.Window", "<enter text here>");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager runat="server">
</atlas:ScriptManager>
<div>
<input type="button" value="MessageBoxOK" id="MessageBoxOK" />
<input type="button" value="MessageBoxOKCancel" id="MessageBoxOKCancel" />
<input type="button" value="InputBox" id="InputBox" />
</div>
</form>
</body>
</html>
Next: Events for Lists >>
More ASP.NET Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of the book Programming Atlas, written by Christian Wenz (O'Reilly, 2006; ISBN: 0596526725). Check it out today at your favorite bookstore. Buy this book now.
|
|
