Handling Control Events

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 the initialize() 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.

  1. Write an event handling function that is called when the event occurs.

  2. 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 the Sys.UI.Button class, 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>

Events for Lists

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 the selectionChanged event (in JavaScript, the event is called change). 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 call initialize(); otherwise, the event cannot be captured. Example 4-10 shows code that handles a Select control’s selectionChanged event.

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.

Get Programming Atlas now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial