Event Handling with Atlas Client Controls - Events for Lists
(Page 4 of 4 )
An event that is implemented for many Atlas client controls, one that does not exist in this form in JavaScript, is propertyChanged. It is used generically for all controls to indicate that something has changed: a key was pressed, a list item was selected, and so on.
It is also possible to work with individual change events for each form element so that you know exactly what has changed. For instance, when the selected element in a selection list changes, it raises theselectionChangedevent (in JavaScript, the event is calledchange). Illustrating this event is once again an opportunity to rewrite one of the previous examples (see Example 4-7). This time, we do not have to periodically check the selection list for changes; instead, we capture the associated event. Remember to callinitialize(); otherwise, the event cannot be captured. Example 4-10 shows code that handles aSelectcontrol’sselectionChangedevent.
Example 4-10. Using Atlas selection list events
ControlEventSelect.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">
var select;
var label;
function pageLoad() {
select = new Sys.UI.Select($("Select1"));
label = new Sys.UI.Label($("Label1"));
select.initialize();
select.selectionChanged.add(listHasChanged);
}
function listHasChanged(sender, args) {
label.set_text(select.get_selectedValue());
}
</script>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager runat="server">
</atlas:ScriptManager>
<div>
<select id="Select1" size="3">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select><br />
Selected value: <label id="Label1"></label>
</div>
</form>
</body>
</html>
The performance of this code is much better than in the previous version of this example, since the application reacts immediately when the selection in the list is changed and not just at the end of each 1,000-millisecond interval.
Summary
This chapter showed you what Atlas offers in the client-side Sys.UI namespace, namely, ways to write Atlas-specific JavaScript to work with HTML elements. It also covered event handling in Atlas. The next chapter will show you how to bind data to client-side elements so that you do not have to set the values manually. This also enables you to sync elements: to link them together so that a change in one element is also reflected in the other element and vice versa.
For Further Reading
http://atlas.asp.net/docs/atlas/doc/controls
Microsoft’s online documentation for its Atlas client controls
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 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.
|
|
