Atlas Client Controls - Using Atlas Controls
(Page 2 of 4 )
There are two concepts the Atlas framework uses with the controls in Sys.UI. Some of these controls provide JavaScript access to standard JavaScript methods. The others provide JavaScript access to HTML elements on the current page. Both ways are demonstrated in this section.
Accessing JavaScript Methods
One example of the first method is implemented by Sys.UI.Window. This implements a client-side message box. The JavaScript language supports three types of modal message boxes:
window.alert()
Message box with an OK button
window.confirm()
Message box with OK/Cancel or Yes/No buttons
window.prompt()
Message box with an input field and an OK button
Inside the AtlasSys.UI.Windowclass, the functionality for callingwindow.alert()orwindow.confirm()is encapsulated in themessageBox()method. The default behavior is to present awindow.alert()box. This corresponds to the message box styleSys.UI.MessageBoxStyle.OK. The alternative is to use theSys.UI.MessageBoxStyle.OKCancelstyle, which useswindow.confirm()under the covers.
But what about thewindow.prompt()window? For consistency with Visual Basic, this is implemented via theinputBox()method instead of themessageBox()method.
The followingexample implements all three variants of client modal window. Three client-side buttons are in place for calling the Atlas functionality:
<input type="button" value="MessageBoxOK" onclick="MessageBoxOKClick();" />
<input type="button" value="MessageBoxOKCancel"
onclick="MessageBoxOKCancelClick();" />
<input type="button" value="InputBox" onclick="InputBoxClick();" />
Each of the three functions—click1(),click2(), andclick3()—call an Atlas method, as shown in the following code:
<script language="JavaScript" type="text/javascript">
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>
To use Atlas functionality in a page, you must include the Atlas library. The AtlasScriptManager element takes care of that:
<atlas:ScriptManager runat="server"></atlas:ScriptManager>
Example 4-1 shows the code you need for your first Atlas example in this chapter.
Example 4-1. Modal JavaScript windows with Atlas
ControlMessageBox.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 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" onclick="MessageBoxOKClick();" /
>
<input type="button" value="MessageBoxOKCancel" onclick="MessageBoxOKCancelClick();" />
<input type="button" value="InputBox" onclick="InputBoxClick();" />
</div>
</form>
</body>
</html>
Figure 4-1 shows the result when you click the InputBox button.
Figure 4-1. Clicking a button opens a JavaScript window
This is nice functionality, but not yet of real value, since only very basic JavaScript functionality is encapsulated by the Atlas controls you are using. However, there are other controls with actual real-world use.
Next: Accessing HTML Elements >>
More ASP.NET Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of the book Programming Atlas, written by Christian Wenz (O'Reilly, 2006; ISBN: 0596526725). Check it out today at your favorite bookstore. Buy this book now.
|
|
