Programming Atlas

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.

Tip

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	Description	HTML element	JavaScript equivalent
Sys.UI.Window	Implements JavaScript pop-up windows	N/A	window.alert(), window.confirm(), window.prompt()
Sys.UI.Label	Implements a span or label element	<span>, <label>	label
Sys.UI.Image	Implements an image	<img>	image
Sys.UI.HyperLink	Implements a link	<a href=”...">	link
Sys.UI.Button	Implements a button	<input type="button">, <input type="submit">, <input type="reset">, <button>	button, submit, reset
Sys.UI.CheckBox	Implements a checkbox	<input type="checkbox">	checkbox
Sys.UI.Select	Implements a selection list	<select>	select
Sys.UI.TextBox	Implements a text field	<input type="text">, <input type="password">, <textarea>	text, password, textarea