Chapter 4. Controls

In Chapters 2 and 3, you learned the basics of JavaScript and key Ajax technologies, especially asynchronous calls, that support it. As you saw, Ajax itself is no big deal. The effects that Atlas lets you create are possible without Atlas. Everything you do with Atlas creates HTML, CSS, and JavaScript on the client side, which is also possible with any other server-side technology.

The real value of Atlas is that it greatly facilitates development of Ajax-powered applications. Although you can create applications without it, Atlas can make their implementation go faster. Also, with Atlas, your need to master browser-agnostic JavaScript is not a top priority, though, as is always the case, having such skills will give you a much better understanding of how Atlas works its magic.

This chapter covers client-side controls that ship with Atlas and mimic the behavior of ASP.NET web controls. This not only allows for consistent development on both the server and the client, but also supports convenient features like data binding, which you’ll explore in Chapter 5.

Introducing Atlas Client Controls

Atlas implements its client controls in the Sys.UI namespace. Sys.UI is the client-side equivalent of the similarly named and well-known Web.UI namespace in ASP.NET.


In older Atlas releases, the client-side namespace was named Web.UI, as well.

Sys.UI contains a large number of Atlas HTML controls and web controls. The functionality of Atlas controls is similar but not identical to ASP.NET server controls. Atlas controls provide a consistent, browser-independent model that enables JavaScript code to access and change client controls properties, something that with non-Atlas controls would require quite a bit of JavaScript knowledge as well as some workarounds for browser inconsistencies.

Table 4-1 lists controls provided by Atlas. The table lists the HTML elements that the Atlas control works with and the equivalent DOM object or method that you would use in JavaScript.

Table 4-1. Atlas controls

Atlas control


HTML element

JavaScript equivalent


Implements JavaScript pop-up windows


window.alert(), window.confirm(), window.prompt()


Implements a span or label element

<span>, <label>



Implements an image




Implements a link

<a href=”...">



Implements a button

<input type="button">, <input type="submit">, <input type="reset">, <button>

button, submit, reset


Implements a checkbox

<input type="checkbox">



Implements a selection list




Implements a text field

<input type="text">, <input type="password">, <textarea>

text, password, textarea

Get Programming Atlas now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.