Delving Deeper into Atlas Client Controls

In this second part of a three-part series covering the client-side controls that ship with Atlas, you'll learn about images, hyperlinks and more. This article is excerpted from chapter four of the book Programming Atlas, written by Christian Wenz (O'Reilly, 2006; ISBN: 0596526725). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Contributed by O'Reilly Media
Rating:

/ 2
April 26, 2007

Rate this Article:
MEH MEH++

SEARCH ASP FREE

Hyperlinks

In HTML, the <a> element is used to link to other pages and to documents, and it is also for bookmarks. In Atlas, hyperlinks are represented with theSys.UI.HyperLinkclass. This class implements theget_navigateURL()andset_navigateURL()methods for setting the link target (only the target URL, not the target frame or window). It also provides aclickevent, which can be acted upon. (Event handling is covered later in this chapter in the
“Handling Control Events” section.)

In Example 4-4, an empty link (<a></a>) is created, and a link target is added dynamically. In the example, the link is the same Atlas logo image that you used in the preceding example.

It is not possible to directly set the text of the link. A link might not necessarily be a text link, but could also contain an image or another element. Therefore, the text of the link can be thought of as another object, and if you want to set the link text, you have to put another element (with ID) inside the link.

Example 4-4. Using an Atlas Link control

ControlHyperLink.aspx

<%@ Page Language="C#" %>

</head>
<body>
<form id="form1" runat="server">
    <atlas:ScriptManager runat="server">
    </atlas:ScriptManager>
    <div>
      <a id="Link1"><img id="Image1" /></a>
    </div>
</form>
</body>
</html>

Figure 4-4 shows the result.

Figure 4-4. An Image control is now a hyperlink

Buttons

HTML supports various kinds of buttons, e.g., <input type="submit"> to submit a form,<input type="reset">to clear a form (reset it to its original state), and<input type="button">and<button>for a button with no predefined behavior that can be enriched with JavaScript. Atlas implements buttons (<input type="button">or<button>, i.e., buttons that cannot serve any purpose without JavaScript) withSys.UI.Button. The following methods are supported:

get_argument()
Retrieves the argument sent along with the
command when the button is clicked

set_argument()
Sets the argument of the button

get_command()
Retrieves the command sent when the button is
clicked

set_command()
Sets the command of the button

Checkboxes

HTML uses <input type="checkbox"> for checkboxes. A checkbox has only two states: checked or not checked. These states can be set using JavaScript, so Atlas provides this functionality as well. The set_checked()method can change the state of a checkbox (by providing a Boolean value), andget_ checked()retrieves the current state. The associated class isSys.UI.CheckBox.

Example 4-5 uses HTML to create a checkbox, and Atlas/JavaScript to set its checked state to true.

Example 4-5. Using an Atlas CheckBox control

ControlCheckBox.aspx

<%@ Page Language="C#" %>

</head>
<body>

<form id="form1" runat="server">
   <atlas:ScriptManager runat="server">
    </atlas:ScriptManager>
   <div>
      <input type="checkbox" id="CheckBox1" />
      <label for="CheckBox1">click me!</label>
    </div>
</form>
</body>
</html>

Figure 4-5 shows the result displayed.

Selection Lists

HTML selection lists (<select>...</select>) can come in different forms: a drop-down list where the user has to click to see all list elements, or a selection list where some of the elements are already visible. Both types of lists

Figure 4-5. Atlas has checked the checkbox

are covered by Atlas with the Sys.UI.Selectclass. Unlike using JavaScript to work with a<select>element, the ability to set the individual values of the list’s elements is not provided by the Atlas classes.

If the data for the list exists in the form of a .NETDataTableobject, data binding is a possibility. Chapter 9 explains this approach.

But we can demonstrate theget_selectedValue()method, which determines thevalue attribute of the currently selected item in the list.

When sending the form to the server via HTTP GET or POST, it is not essential to set thevalueattribute, because the caption of the element (the text between<option>and</option>) is passed forvalue. However, a list item with novalueproperty is empty in JavaScript. Therefore, you should always set thevalueproperty for all list elements.

Since event handling isn’t covered until later in this chapter, in Example 4-6, thechange event of the list is not captured, and instead the state of the list is analyzed every second. This is done using thesetInterval()JavaScript function. This polling technique is used only for the sake of the example here; Chapter 5 will cover a much better way to keep two elements in sync, namely through the use of data binding.

function pageLoad() {
    window.setInterval(
      function() {
       //access the list and output its selected value
      },
      1000);
}

Example 4-6 shows how to use Atlas to check for a current selection and display the selection value in a<span>element (Sys.UI.Label).

Example 4-6. Using an Atlas Select control

ControlSelect.aspx

<%@ Page Language="C#" %>

function pageLoad() {
label = new Sys.UI.Label($("Label1"));
select = new Sys.UI.Select($("Select1"));

    // Poll every second to determine whether a value has been selected.
    window.setInterval(
      function() {
        label.set_text(select.get_selectedValue());
      },
      1000);
}
</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>

Figure 4-6 shows the result.

Figure 4-6. The selected value is written to the Label control

Usingget_selectedValue()may be convenient, but only for regular selection lists. If you are using<select multiple="multiple">, you only get thevalueof the first list element that is selected, not of all selected elements. To check all selected elements, you would need to use Java-Script code to loop through all the items individually, as shown in the following snippet:
var op = document.forms[0].elements["Select1"].
options;
for (var i=0; i < op.length; i++) {
    if (op[i].selected) {
      //element is selected
    } else {
      //element is not selected
    }
}

Please check back next week for the conclusion to this article.