A single-line text box is represented in HTML using <input type="text">. This element can also be monitored and controlled using the Atlas library and the appropriate class for it, Sys.UI.TextBox. The functionality provided by Atlas covers keyboard event handling and, of course, both read and write access for the text of the element itself. The methods for the latter task areget_text()andset_text(). Example 4-7 outputs the data entered into the text field, using the same polling approach as in the preceding example (setInterval()) to periodically copy the contents of the text box to an AtlasLabelcontrol.
Example 4-7. Using an Atlas TextBox control
ControlTextBox.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() { window.setInterval( function() { var label = new Sys.UI.Label($("Label1")); var textbox = new Sys.UI.TextBox($("TextBox1")); label.set_text(textbox.get_text()); }, 1000); } </script>
Figure 4-7.The text in the text box appears in the label
Single-line text fields (<input type="text">), multiline text fields (<textarea>), and password fields (<input type="password">) have one thing in common: from a JavaScript point of view, they are controlled in the same way. Thevalueproperty provides read and write access to the contents of the field. Therefore, you can useSys.UI.TextBoxfor all three kinds of form fields.
As discussed earlier in “Introducing Atlas Client Controls,” Atlas supports common methods for each control within Sys.UI. Most of these set some property that JavaScript exposes for all controls. Two examples of this are theget_accessKey()andset_accessKey()methods that control the DOMaccesskeyproperty.
Methods with somewhat more visible results are those for controlling the CSS class of an element. This makes changing the layout of elements on the fly very easy. Here are the methods that are supported:
get_cssClass() Reads the CSS class of an element
set_cssClass() Sets the CSS class of an element
addCssClass() Adds a CSS class to an element
containsCssClass() Determines whether an element contains a CSS class
removeCssClass() Removes one CSS class from an element
toggleCssClass() Adds the class to an element if it is not already there; otherwise, removes the class
Example 4-8 demonstrates thetoggleClassClass()method, which internally usesaddCssClass(),containsCssClass(), andremoveCssClass(). The example also uses theget_cssClass()method. In the page, the following three CSS classes are defined that can complement each other (i.e., every class covers another style).
The JavaScript code in the example selects one of these classes at random and then callstoggleCssClass(). ALabelcontrol periodically displays the current class or classes being used.
Example 4-8. Using the base CSS methods for Atlas controls
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"));
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"));
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
Atlas Client Controls
