用VS2005创建一个Atlas Web应用程序(4)

最新推荐文章于 2024-08-16 19:02:09 发布

aiwtu

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量963

点赞数

分类专栏： Ajax/Atlas 文章标签： web textbox asp.net 脚本 javascript button

Ajax/Atlas 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

用VS2005创建一个Atlas Web应用程序(4)
作者: dengsu888666 发表日期: 2006-09-21 14:55 文章属性: 原创复制链接

在前三篇文章中用实例的方式介绍了开发Atlas Web应用程序的基本方法和原理。从上三篇文章中我们也了解到实现客户端功能的方式有两种，一种是客户端脚本方式，一种是类似于XML格式的脚本声明块。这两种都可以实现客户端功能。在这里将做一个更详细的分析和介绍。
Atlas平台包含两部分，即客户端部分和服务器部分。对客户端，它具有的特点是：面向对象相容的脚本语言API；自动浏览器兼容；客户端控件和组件提供了丰富的用户界面实现，例如拖拽动作。用户可以将这些特征添加到HTML控制器而只需要很少甚至不需要任何代码等。 Atlas客户端部分有一套强大的ASP.NET "Atlas"客户端控件，它能集中管理客户端事件，象鼠标点击事件等这些事件可以很容易和客户端控件相联系进行处理等，如同Asp.net原来的风格一样可以进行数据帮定，把控件和组件关联在一起来管理它们之间的数据流，同时它具有的控件可扩展性，允许开发者创建新的客户端对象、创建功能更强的客户端控件和组合，页面开发者可以把这些控件加到他们的页面中使用。
ASP.NET "Atlas"框架为程序开发提供了丰富的客户端功能，它是由丰富的JavaScript库组成，当运行时页面会参照页面标记元素下载相应脚本到客户端，开发人员在使用这些脚本API对应的页面客户端元素时很类似于使用ASP.NET。这些脚本API实现了很多功能：处理复杂的多浏览器支持、对JavaScript进行了扩展、提供了一套UI框架（如一套客户端控件），脚本库能使开发人员在使用控件和组件时采用面向对象的开发思想，而在一般的JavaScript中是无法做到的。
现在我们先举一个简单的例子，在这个例子中我们使用传统的javascript的编程方式来创建一个ASP.NET "Atlas"按钮控件：
var btn = new Web.UI.Button($('buttonId')
这个按钮控件通过属性id='buttonId'来和页面中的标记元素关联，其中代码$('your_element_id')等价于document.getElementById(your_element_id).
'Atlas' ASP.NET页面也能添加服务端控件，比如<atlas:ScriptManager>，对于服务端控件在以后的文章中进行专门介绍。
现在我们在建立好的网站中增加一个页面simple_control.aspx，把下面的代码复制粘贴到你的页面代码中：

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head id="Head1" runat="server">
<title>ASP.NET "Atlas"控件使用例子</title>
<link href="intro.css" type="text/css" rel="Stylesheet" />
</head>

<body>
<form id="form1" runat="server">
<div>
<atlas:ScriptManager runat="server" ID="ScriptManager1" />
<div id="content" class="title">
<h2>ASP.NET "Atlas"Sys.Control演示</h2>

</div>
<hr />
<div class="description">
<h3><u>例 1:</u></h3>
<div id="panel">
通过选择下面的颜色选择框的颜色将会改变 panel (div元素)的颜色
</div>
<br />
请为panel选择一个颜色: <select id="colorSelect" class="itemselect">
<option value="normal">正常</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="notset">无</option>
</select>

<hr />
<h3><u>例 2:</u></h3>
<input id="textBox" type="text"/>

<input type="button" id="visibilityButton" class="buttonstyle"
value="设置可见性" />

<input type="button" id="enabledButton" class="buttonstyle"
value="设置使能性" />

<hr />
</div>

<script type="text/javascript">

// 把脚本放在最后便于能准确找到页面上的元素
var g_panel;
var g_selColor;
var g_label;

function pageLoad()
{
g_panel = new Sys.UI.Control($('panel'));// 创建页面id="panel"元素的atlas控件g_panel,使g_panel和元素id="panel"建立关联
g_panel.initialize(); // 初始化g_panel控件
g_panel.set_cssClass('normal'); // 为g_panel控件设值起始css

g_selColor = new Sys.UI.Select($('colorSelect'));//创建页面id="colorSelect"元素的atlas控件g_selColor
g_selColor.initialize(); //初始化g_selColor控件
g_selColor.selectionChanged.add(onSelectColor); //为g_selColor控件添加selectionChanged事件，onSelectColor为下面的脚本函数

// Set up the textBox and set some properties on it
g_tbx = new Sys.UI.TextBox($('textBox')); //创建页面id="textBox"元素的atlas控件g_tbx
g_tbx.initialize(); //初始化g_tbx控件
g_tbx.set_text("文本控件"); //设置g_tbx控件的文本值为"文本控件"
g_tbx.set_cssClass("textBox"); //设置g_tbx控件的css

var btnVisibility = new Sys.UI.Button($('visibilityButton'));//创建页面id="visibilityButton" 元素的atlas控件btnVisibility
btnVisibility.initialize(); //初始化btnVisibility控件
btnVisibility.click.add(onSetVisibilityClick); //为btnVisibility控件添加click事件，onSetVisibilityClick为下面的脚本函数

var btnEnabled = new Sys.UI.Button($('enabledButton')); //创建页面id="enabledButton"元素的Atlas控件btnEnabled
btnEnabled.initialize(); //初始化btnEnabled
btnEnabled.click.add(onSetEnabledClick); //为btnEnabled添加click事件，onSetEnabledClick为下面的脚本函数
}

function onSelectColor(sender, args) {
g_panel.set_cssClass(g_selColor.get_selectedValue());//在selectionChanged事件发生时设置g_panel控件的css，css值从g_selColor控件中取
}
// TextBox changes
function onSetVisibilityClick() {
g_tbx.set_visible(!g_tbx.get_visible());//在click事件发生时设置g_tbx控件的可见性，取g_tbx控件的原值的相反值
}

function onSetEnabledClick() {
g_tbx.set_enabled(!g_tbx.get_enabled());//在click事件发生时设置g_tbx控件的使能性，取g_tbx控件的原值的相反值
}
</script>
</div>
</form>
</body>
</html>

添加一个样式表文件intro.css，内容如下：
BODY {
MARGIN: 5px; TEXT-ALIGN: left
}
TABLE {
FONT-SIZE: 10pt; FONT-FAMILY: Verdana
}
TD {
FONT-SIZE: 10pt; FONT-FAMILY: Verdana
}
TD.products TD {
FONT-SIZE: 8pt; VERTICAL-ALIGN: top; HEIGHT: 248px; TEXT-ALIGN: center
}
TD.select {
FONT-SIZE: 14pt; COLOR: #ffffff; BACKGROUND-COLOR: #000000
}
TD.select SELECT {
WIDTH: 130px
}
TD.cart {
HEIGHT: 2500px
}
TD.cart TD {
FONT-WEIGHT: 700; FONT-SIZE: 9pt
}
TD.cart A {
FONT-WEIGHT: 700; FONT-SIZE: 11pt
}
H3 {
FONT-SIZE: 22pt
}
H2 {
FONT-SIZE: 22pt
}
A:link {
COLOR: blue
}
A:visited {
COLOR: blue
}
DIV.details {
PADDING-BOTTOM: 20px; PADDING-TOP: 15px; BACKGROUND-COLOR: #ffffcc
}
DIV.details TABLE {
WIDTH: 280px
}
DIV.details TABLE TD {
FONT-SIZE: 8pt; FONT-FAMILY: Verdana
}
DIV.demosample {
BORDER-RIGHT: black 2px dashed; BORDER-TOP: black 2px dashed; BORDER-LEFT: black 2px dashed; WIDTH: 250px; BORDER-BOTTOM: black 2px dashed; HEIGHT: 75px
}
DIV.demosample1 {
BORDER-RIGHT: black 2px dashed; BORDER-TOP: black 2px dashed; VERTICAL-ALIGN: bottom; BORDER-LEFT: black 2px dashed; WIDTH: 50%; BORDER-BOTTOM: black 2px dashed; HEIGHT: 200px; TEXT-ALIGN: center
}
DIV.normal {
BORDER-RIGHT: black 3px dotted; BORDER-TOP: black 3px dotted; FONT-SIZE: 14pt; VERTICAL-ALIGN: middle; BORDER-LEFT: black 3px dotted; BORDER-BOTTOM: black 3px dotted; BACKGROUND-COLOR: yellow; TEXT-ALIGN: center
}
DIV.description {
PADDING-BOTTOM: 20px; PADDING-TOP: 15px; FONT-FAMILY: Verdana; BACKGROUND-COLOR: white
}
DIV.title {
PADDING-BOTTOM: 20px; PADDING-TOP: 15px; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #ffffcc
}
TABLE.nutr TD {
FONT-SIZE: 8pt; FONT-FAMILY: Verdana
}
IMG.selected {
BORDER-LEFT-COLOR: #dc6035; BORDER-BOTTOM-COLOR: #dc6035; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: #dc6035; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-COLOR: #dc6035; BORDER-BOTTOM-STYLE: solid
}
IMG.unselected {
BORDER-LEFT-COLOR: #ffffcc; BORDER-BOTTOM-COLOR: #ffffcc; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: #ffffcc; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-COLOR: #ffffcc; BORDER-BOTTOM-STYLE: solid
}
TABLE.details TD {
PADDING-RIGHT: 50px; FONT-SIZE: 12pt; WIDTH: 50%; FONT-FAMILY: Verdana
}
SPAN.blurb {
FONT-SIZE: 9pt
}
TABLE.form TD {
PADDING-RIGHT: 15px
}
SELECT.itemselect {
FONT-SIZE: 12pt; BACKGROUND-COLOR: #00dddd; TEXT-ALIGN: left
}
.buttonstyle {
FONT-SIZE: 12pt; COLOR: white; FONT-FAMILY: Verdana; BACKGROUND-COLOR: gray
}
.buttonstyle2 {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-SIZE: 12pt; PADDING-BOTTOM: 4px; MARGIN: 4px; VERTICAL-ALIGN: middle; COLOR: white; PADDING-TOP: 4px; FONT-FAMILY: Verdana; BACKGROUND-COLOR: gray; TEXT-ALIGN: center
}
.normal {
BORDER-RIGHT: black 3px dotted; BORDER-TOP: black 3px dotted; FONT-SIZE: 14pt; BORDER-LEFT: black 3px dotted; WIDTH: 100%; COLOR: black; BORDER-BOTTOM: black 3px dotted; HEIGHT: 200px; BACKGROUND-COLOR: yellow; TEXT-ALIGN: center
}
DIV.red {
BORDER-RIGHT: black 3px dotted; BORDER-TOP: black 3px dotted; FONT-SIZE: 14pt; VERTICAL-ALIGN: bottom; BORDER-LEFT: black 3px dotted; WIDTH: 100%; COLOR: white; BORDER-BOTTOM: black 3px dotted; HEIGHT: 200px; BACKGROUND-COLOR: red; TEXT-ALIGN: center
}
.blue {
BORDER-RIGHT: black 3px dotted; BORDER-TOP: black 3px dotted; FONT-SIZE: 14pt; VERTICAL-ALIGN: middle; BORDER-LEFT: black 3px dotted; WIDTH: 100%; COLOR: white; BORDER-BOTTOM: black 3px dotted; HEIGHT: 200px; BACKGROUND-COLOR: blue; TEXT-ALIGN: center
}
.notset {
BORDER-RIGHT: black 3px dotted; BORDER-TOP: black 3px dotted; BORDER-LEFT: black 3px dotted; BORDER-BOTTOM: black 3px dotted
}
.textBox {
FONT-SIZE: 20pt; WIDTH: 400px; BACKGROUND-COLOR: yellow; TEXT-ALIGN: center
}
.result {
FONT-WEIGHT: bold; FONT-SIZE: 20pt; COLOR: white; BACKGROUND-COLOR: green
}
.input {
FONT-WEIGHT: bold; FONT-SIZE: 20pt; COLOR: black; BACKGROUND-COLOR: yellow
}
.draghandle {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 12pt; BORDER-LEFT: black 1px solid; WIDTH: 100%; CURSOR: move; COLOR: black; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #0000dd; TEXT-ALIGN: center
}
.floatwindow {
BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: black 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 14pt; PADDING-BOTTOM: 4px; BORDER-LEFT: black 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #eeeeee
}
.popupwindow {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #00dddd
}
.hoverlabel {
CURSOR: pointer; BACKGROUND-COLOR: #00dd00
}

运行simple_control.aspx，看看效果，这是一个使用传统javascript编程方式实现的例子。上面的例子代码中使用了Atlas的脚本进行编程，在脚本程序中使用了Atlas的客户端控件和Atlas脚本面向对象的编程思想，这些Atlas客户端控件和页面上的UI元素标记相关联，以便于在脚本编程时进行属性设置和为它们添加事件。第一个例子演示了通过选择颜色下拉框的颜色来改变Panel(div元素)颜色的功能。第二个例子演示了设置文本框的可见性和使能性。在脚本代码中对每一句代码的作用我都作了注释。如果你想进行脚本跟踪可以把脚本放在单独的脚本文件中，这样就可以对脚本进行跟踪调试了。
ASP.NET "Atlas"引入了一种新的既简明又强大的脚本声明的方法来定义客户端控件和它们的关联标记元素。这种方法在前几篇文章的例子里已作过演示，用这种新的声明客户端语法，能够完成以下功能：
1.在页面中添加ASP.NET "Atlas"控件和组件时完成和标记元素的关联。
2.为定义好的过程创建帮定，如在点击button时设置label的文本值
3.管理事件。如click、propertyChanged或者 selectionChanged，把完成一些事务、动作作为这些事件的一个结果。
4.创建和定义活动，如：用invokeMethod和setProperty调用控件或组件的成员或帮定。
5.定义模版控件，允许进行复杂控件组合和处理。
6.定义行为和初始化的功能，能够和控件进行建立关联
下面我们再做一个例子完成和上面同样功能的例子，添加一个页面simple2_control.aspx，把下面的代码粘贴复制到你的页面代码中：

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head id="Head1" runat="server">
<title>ASP.NET "Atlas"控件使用例子</title>
<link href="intro.css" type="text/css" rel="Stylesheet" />
</head>

<body>
<form id="form1" runat="server">
<div>
<atlas:ScriptManager runat="server" ID="ScriptManager1" />
<div id="Div1" class="title">
<h2>ASP.NET "Atlas"Sys.Control演示</h2>

</div>
<hr />
<hr />
<div class="description">
<h3><u>例 1:</u></h3>
<div id="panel">
通过选择下面的颜色选择框的颜色将会改变 panel (div元素)的颜色
</div>
<br />
请为panel选择一个颜色: <select id="colorSelect" class="itemselect">
<option value="normal">正常</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="notset">无</option>
</select>
<span id="colorLabel"></span>
<hr />
<h3><u>Example 2:</u></h3>
<input id="textBox" type="text"/>

<input type="button" id="visibilityButton" class="buttonstyle"
value="设置可见性" />

<input type="button" id="enabledButton" class="buttonstyle"
value="设置使能性" />

<hr />
</div>

<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<control id="panel" cssClass="normal">
<bindings>
<binding id="setCss" dataContext="colorSelect" dataPath="selectedValue" property="cssClass" />
</bindings>
</control>
<select id="colorSelect">
<selectionChanged>
<invokeMethod target="setCss" method="evaluateIn" />
<setProperty target="colorLabel" property="text" value="Selected color" />
</selectionChanged>
</select>
<textBox id="textBox" text="文本控件" cssClass="textBox">
<bindings>
<binding id="setEnabled" dataContext="textBox" dataPath="enabled" property="enabled" transform="Invert" automatic="false" />
<binding id="setVisibility" dataContext="textBox" dataPath="visible" property="visible" transform="Invert" automatic="false" />
</bindings>
</textBox>
<button id="visibilityButton">
<click>
<invokeMethod target="setVisibility" method="evaluateIn" />
</click>
</button>
<button id="enabledButton">
<click>
<invokeMethod target="setEnabled" method="evaluateIn" />
</click>
</button>
<label id="colorLabel" text="" />
</components>
</page>
</script>
</div>
</form>
</body>
</html>

运行simple2_control.aspx，可以发现它和前一个例子simple_control.aspx的功能一模一样。而simple2_control.aspx使用了Atlas中的客户端脚本声明的方式。在simple2_control.aspx代码中的text/xml-script声明中实现了在simple_control.aspx代码中的脚本方式中的同样功能，把两者进行对照着看理解simple2_control.aspx中的text/xml-script声明就很容易了。
有的读者看到这里可能会有些不解：xml-script声明的方式代码繁琐太麻烦，为什么还要使用这种方式？我上面所讲的只是从原理上作了分析，让读者能清晰理解这种方式的思想和原理，所以都是用手工代码的方式完成的。目前Atlas只是发布了它的控件库和实现框架，对于支持该框架的可视化工具还没有发布，一旦支持这个框架的开发工具发布了，你将会发现，这些代码可能多数都不需要手工来完成，只需要在页面上进行控件拖放和进行一些设置就自动生成了，使用非常方便，保留了asp.net的以前使用风格，就像以前拖放Asp.net的服务器控件生成的服务器控件声明标记一样， xml-script声明方式不仅为可视化编程奠定了基础而且提高了重用性，大大提高了开发的生产率，减少了脚本的程序代码量。但在Atlas开发工具发布前我们暂时只好用手工来编写这些xml-script声明进行实践了。在下一篇文章里我将详细介绍xml-script声明的实现细节。

演示代码下载4
AtlasTest4.rar

aiwtu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用VS2005创建一个Atlas Web应用程序(4)

用VS2005创建一个Atlas Web应用程序(4) 作者: dengsu888666 发表日期: 2006-09-21 14:55 文章属性: 原创复制链接在前三篇文章中用实例的方式介绍了开发Atlas Web应用程序的基本方法
复制链接

扫一扫

专栏目录