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

本文接上一篇文章继续介绍客户端控件，在这篇文章中分两部分内容来介绍，首先介绍客户端控件的属性设置、事件处理和动作调用，然后介绍客户端控件的基本数据绑定。
一个ASP.NET "Atlas"的客户端控件或组件从概念上讲它是一个类或是一个实例化了的对象。客户端控件对象模型公布成员时就像传统的面向对象的类定义一样，因此，你可以方便的访问属性和成员方法，你在开发工作中用ASP.NET "Atlas"客户端控件时，可以用JavaScript编程方式或者用新的ASP.NET "Atlas"脚本声明方式来实现软件功能,例如：

JavaScript为：

function pageLoad() {

var controlVar = new Web.UI.Control($('elementId'));

}

</script>

ASP.NET "Atlas"脚本声明:

</components>

</script>

对于这两个例子，在ASP.NET页面的Load事件期间控件被实例化。用脚本编程方式在Load事件时会执行pageLoad函数。

一．客户端控件的属性设置、事件处理、动作调用。

    现在我们看一下在客户端控件中如何设置属性、如何处理事件和如何执行动作。
    下面的例子显示了用脚本声明的方式创建控件、处理控件事件和设置控件属性。下面的例子中，其中例1演示了在点击按钮时改变panel属性（可见性、大小），例2演示了点击按钮时改变textBox的使能属性。
    添加一个页面control1.aspx，把下面的代码复制粘贴到你的页面程序中:

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

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

.start{background-color:yellow;border:dashed 2px black;}

.start2{background-color:white;border:solid 2px black;font-size:14pt;width:50%}

.large{font-size:40pt;}

.small{font-size:10pt;}

</style>

<title>ASP.NET "Atlas" 演示: Sys.Control的属性设置,方法调用和事件处理</title>

</head>

<body>

<div>

<atlas:ScriptManager runat="server" ID="ScriptManager1" />

<h2>ASP.NET "Atlas" 演示: Sys.Control的属性设置,方法调用和事件处理</h2>

</div>

<hr />

<div id="panel">点击下面的按钮改变本元素的属性</div>

<br />

<br/>

<br/>

</div>

<control id="panel" cssClass="start" /> //创建元素id="panel"和control关联的控件，设置cssClass为start

<control id="TextBox" /> //创建元素id="TextBox"的客户端控件

<button id="hideButton"> //创建元素id="hideButton"的客户端button控件，为控件添加click事件，指明了在click时设置id="panel"元素的可见性为false;

<click>

</click>

</button>

<button id="showButton"> //创建元素id="showButton"的客户端button控件

<click> //为控件添加click事件

<setProperty target="panel" property="visible" value="true" /> //在click时设置id="panel"元素的可见性为true;

</click>

</button>

<button id="disableButton"> //创建元素id="disableButton"的客户端button控件

<click> //为控件添加click事件

<setProperty target="TextBox" property="enabled" value="false" /> //在click时设置id="TextBox"元素的使能属性为false;

</click>

</button>

<button id="enableButton"> //创建元素id="enableButton"的客户端button控件，，

<click> //为控件添加click事件

<setProperty target="TextBox" property="enabled" value="true" /> //在click时设置id="TextBox"元素的使能属性为true;

</click>

</button>

<button id="largeButton"> //创建元素id="largeButton"的客户端button控件

<click> //为控件添加click事件

<invokeMethod target="panel" method="removeCssClass"> //在click时先调用id="panel"元素的removeCssClass方法，传入参数为"small",清除CssClass设置"small"

</invokeMethod>

<invokeMethod target="panel" method="addCssClass"> //在click时调用完removeCssClass后再调用id="panel"元素的addCssClass方法，传入参数为"large",添加CssClass设置"large"

</invokeMethod>

</click>

</button>

<button id="smallButton"> //创建元素id="smallButton"的客户端button控件

<click> //为控件添加click事件

<invokeMethod target="panel" method="removeCssClass"> //在click时先调用id="panel"元素的removeCssClass方法，传入参数为"large",清除CssClass设置"large"

</invokeMethod>

<invokeMethod target="panel" method="addCssClass"> //在click时调用完removeCssClass后再调用id="panel"元素的addCssClass方法，传入参数为"small",添加CssClass设置"small"

</invokeMethod>

</click>

</button>

</components>

</page>

</script>

</div>

</form>

</body>

</html>

    在这个页面的ASP.NET "Atlas"脚本声明中，元素<div id="panel">和ASP.NET "Atlas"客户端控件的基类Web.UI.Control
相关联，控件的cssClass属性在声明中设置成start样式。如下：

<script type="text/xml-script">
  ..
  <components>
    <control id="panel" cssClass="start"/>
  ..

    上面代码用声明方式描述了要被实例化的Button控件，Button的click事件自动和设置panel控件属性的动
作连在一起，这个声明说明在发生onclick事件时会完成设置panel控件的属性，下面代码展示了如何在声明中
设置<setProperty>动作，这个动作是设置panel的可见性为true,这个样例也展示了使用<invokeMethod>动作来
调用panel的方法。如下：

<script type="text/xml-script">
  ..
  <button id="showButton">
    <click>
      <setProperty target="panel" property="visible" value="true" />
    </click>
  </button>
  ..
  <button id="largeButton">
    <click>
      <invokeMethod target="panel" method="removeCssClass">
        <parameters className="small"/>
      </invokeMethod>
    </click>
  </button>


二．客户端控件的基本数据帮定
    数据帮定是关联控件和组件、管理它们之间数据流的很强大的方法。下面的例子展示了用声明语法把数据值帮定
到TextBox并把值写到页面别的地方来显示。下面例子中的例1演示了在选中checkbox或取消选中checkbox时，把
checkbox的checked取值转换成字符串显示在textbox中，并把checkbox的checked取值的相反值显示到另一个
checkbox上。例2演示了把label和textbox进行绑定，当在textbox输入数值时会自动增加5显示在label上。
例3 演示了dropdownlist和label绑定、进行自定义转换并把值显示到Label上，同时根据从下拉列表的选择值来设
置label的样式单。下面的代码在难理解的地方都作了注释。
    添加一个页面control2.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">
    <style type="text/css">
        .redLocal{}{background-color:red;color:white;font-size:24pt;}
        .greenLocal{}{background-color:green;color:white;font-size:24pt;}
        .blueLocal{}{background-color:blue;color:white;font-size:24pt;}
    </style>
    <title>ASP.NET &quot;Atlas&quot; 演示: Sys.Control Bindings: 使用 ASP.NET &quot;Atlas&quot;脚本</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>Atlas控件演示: 使用ASP.NET &quot;Atlas&quot;脚本进行绑定</h2>
                
                
            </div>
            <div class="description">
                <h3><u>例 1:</u></h3>
                选择checkbox后，把checked属性的值转换成字符串赋给textbox，另外一个不可操作的checkbox显示它的反相值
                                
                <br /><br />
                布尔值(true|false): <input type="checkbox" id="checkBoxBoolean" />
                &nbsp;
                布尔值(true|false): <input type="checkbox" id="checkBoxDisabled" disabled="disabled" />
                &nbsp;<input type="text" id="textBox" class="result" />
                
                <hr />
                <h3><u>例 2:</u></h3>
                把label绑定到text box，利用内置转换把textbox录入值加5显示到Label上。
                在这里你必须要录入一个有效的数值，因为在这个例子里没有加有效验证功能
                输入后用鼠标点击除textbox外的其他地方
                <br /><br />
                请输入一个数:&nbsp;
                <input type="text" id="textBoxNumber" size="5" class="input"/>
                &nbsp;
                增加后的数: <span id="label" class="result"></span>
                
                <hr />
                <h3><u>例 3:</u></h3>
                把label绑定到dropdown list，通过自定义转换把值显示到label上，根据下拉框的选择值设置label的样式
                
                <p></p>
                定义文本:&nbsp;
                <input type="text" id="textBoxText" size="5" class="input" />
                &nbsp;
                选择一个值:&nbsp;
                <select id="selectStyle" class="input">
                    <option value="redLocal">红</option>
                    <option value="greenLocal">绿</option>
                    <option value="blueLocal">兰</option>
                </select>
                &nbsp;
                Result: <span id="labelText"></span>
                
           </div>
    
            <script type="text/javascript">
                function DoAdditionalHandling(sender, eventArgs)  //自定义转换函数
                {
                    var tbxElem = $('textBoxText').control;
                    if (tbxElem.get_text().length > 0)
                    {
                        // The value is that from the select, so let's ensure it's set
                        // The property here is the cssClass
                        eventArgs.set_value(eventArgs.get_value());
                        
                        // Add additional text to the output:
                        var textElem = $('labelText').control;
                        textElem.set_text(tbxElem.get_text() + " (You used the style selector)");
                    }
                }
               
            </script>
            
            <script type="text/xml-script">
                <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
                    <components>
                        <textBox id="textBox">
                            <bindings>　//数据绑定，dataContext指明数据源来自id="checkBoxBoolean"的元素，dataPath指明来自id="checkBoxBoolean"元素的checked属性，property指明了d="textBox"接收值的属性text
                                <binding dataContext="checkBoxBoolean" dataPath="checked" property="text" transform="ToString" direction="In" transformerArgument="Checkbox is {0}" />//transform说明了传换为字符串，direction为"In"说明只接收，传换参数transformerArgument指定了格式。
                            </bindings>
                        </textBox>
                        <checkBox id="checkBoxBoolean" />
                        <checkBox id="checkBoxDisabled">
                            <bindings>    //数据绑定，dataContext指明数据源来自id="checkBoxBoolean"的元素，dataPath指明来自id="checkBoxBoolean"元素的checked属性，property指明了id="checkBoxDisabled"的checked用来接收值，transform指明转换为取反值
                                <binding dataContext="checkBoxBoolean" dataPath="checked" property="checked" transform="Invert" />
                            </bindings>
                        </checkBox>
                        <textBox id="textBoxNumber" />
                        <label id="label">
                            <bindings>
                                <binding dataContext="textBoxNumber" dataPath="text" property="text" transform="Add" transformerArgument="5" />
                            </bindings>
                        </label>
                        <textBox id="textBoxText" />
                        <select id="selectStyle">
                            <selectionChanged>
                                <invokeMethod target="setCss" method="evaluateIn" />//调用数据绑定方法
                            </selectionChanged>
                        </select>
                        <label id="labelText">
                            <bindings>  
                                <binding dataContext="textBoxText" dataPath="text" property="text" />
                                <binding id="setCss" dataContext="selectStyle" dataPath="selectedValue" property="cssClass" transform="DoAdditionalHandling" />  //传换时使用自定义转换DoAdditionalHandling
                            </bindings>
                        </label>
                    </components>
                </page>
            </script>
        </div>
    </form>
</body>
</html>

同样的功能通过JavaScript也能完成，添加control3.aspx，复制粘贴下面的代码到你的页面代码里，

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

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

<title>ASP.NET "Atlas" 演示: Sys.Control Bindings: 使用javascript</title>

function pageLoad()

{

// 例 1:

// 创建控件

var textBox = new Sys.UI.TextBox($('textBox'));

var checkBoxBoolean = new Sys.UI.CheckBox($('checkBoxBoolean'));

var checkBoxDisabled = new Sys.UI.CheckBox($('checkBoxDisabled'));

// 为textbox创建绑定

var binding_1 = new Sys.Binding();

binding_1.set_dataContext(checkBoxBoolean);

binding_1.set_dataPath('checked');

binding_1.set_property('text');

binding_1.set_transformerArgument("Checkbox is {0}.");

binding_1.set_direction(Sys.BindingDirection.In);

// 内建转换 ToString

binding_1.transform.add(Sys.BindingBase.Transformers.ToString);

// 为checkbox创建绑定

var binding_2 = new Sys.Binding();

binding_2.set_dataContext(checkBoxBoolean);

binding_2.set_dataPath('checked');

binding_2.set_property('checked');

// 内建转换 Invert

binding_2.transform.add(Sys.BindingBase.Transformers.Invert);

// 把绑定添加到控件中

textBox.get_bindings().add(binding_1);

checkBoxDisabled.get_bindings().add(binding_2);

// 初始化控件

textBox.initialize();

checkBoxDisabled.initialize();

checkBoxBoolean.initialize();

// 例 #2:

// 创建控件

var textBoxNumber = new Sys.UI.TextBox($('textBoxNumber'));

var spanLabel = new Sys.UI.Label($('spanLabel'));

textBoxNumber.set_text("0");

// 创建绑定

var binding_3 = new Sys.Binding();

binding_3.set_dataContext(textBoxNumber);

binding_3.set_dataPath('text');

binding_3.set_property('text');

binding_3.set_transformerArgument(5);

binding_3.transform.add(Sys.BindingBase.Transformers.Add);

// 添加绑定

spanLabel.get_bindings().add(binding_3);

// 初始化控件

textBoxNumber.initialize();

spanLabel.initialize();

// 例 #3:

var textBoxString = new Sys.UI.TextBox($('textBoxString'));

var spanLabel2 = new Sys.UI.Label($('spanLabel2'));

textBoxString.set_text("Hello");

// 创建绑定

var binding_4 = new Sys.Binding();

binding_4.set_dataContext(textBoxString);

binding_4.set_dataPath('text');

binding_4.set_property('text');

binding_4.transform.add(customTransform);

// 增加绑定

spanLabel2.get_bindings().add(binding_4);

//初始化控件

textBoxString.initialize();

spanLabel2.initialize();

}

function customTransform(sender, eventArgs)　//自定义转换

{

var value = eventArgs.get_value();

var reverseStr = new Sys.StringBuilder();

for (var i=value.length-1; i>=0; i--)

reverseStr.append(value.charAt(i));

eventArgs.set_value(reverseStr.toString());

}

</script>

</head>

<body>

<div>

<atlas:ScriptManager runat="server" ID="ScriptManager1" />

<h2>Atlas控件演示: 使用javascript进行绑定</h2>

</div>

选择checkbox后，把checked属性的值转换成字符串赋给textbox

<br />另外一个不可操作的checkbox通过取反转换显示它的反相值

<br />

布尔值 (true|false): <input type="checkbox" id="checkBoxBoolean" checked="checked" />

布尔值 (true|false): <input type="checkbox" id="checkBoxDisabled" disabled="disabled" />

<hr />

把label绑定到text box，利用内置转换把textbox录入值加5显示到Label上。

在这里你必须要录入一个有效的数值，因为在这个例子里没有加有效验证功能

输入后用鼠标点击除textbox外的其他地方

<p></p>

输入一个数: 

增加后的数: <span id="spanLabel" class="result"></span>

<hr />

把label和text box绑定，通过自定义转换把输入文本反向

<p></p>

输入一个字符串: 

反向文本: <span id="spanLabel2" class="result"></span>

</div>

</form>

</body>

</html>

绑定也能够在两个控件之间建立，下面的代码样例展示了如何把Label控件的text属性和TextBox的输入值进行绑定，TextBox控件的propertyChanged事件发生时会引起绑定产生。在默认情况下所有的绑定都是活动的并在页面实例化时执行，下面代码声明的dataContext属性指定了数据源，也指明了把数据关联对象的text属性（dataPath属性定义的）与label控件（property属性定义）的text属性进行绑定。

<span id="label2">Empty</span>

</bindings>

</label>

当页面加载时，label控件的text属性的空值就立刻不存在了，因为当页面加载时绑定立即被执行，为了避免这种现象，你可以在绑定里添加automatic="false"属性，指明绑定不是自动发生的。在下一篇文章详细介绍数据绑定的其他特性。

演示源码下载

posted on 2006-09-25 11:34 大白鲨阅读(208) 评论(0) 收藏举报

刷新页面返回顶部

大白鲨博客

导航

公告

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