O'Reilly logo

Programming Atlas by Christian Wenz

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required