Atlas学习手记(21):使用行为增强用户界面

Atlas中的Behavior定义了当控件的某个事件被触发时的行为。Behavior可以看作是一种封装了的DHTML的事件，例如click和hover等。Behavior同样可以是一个组件，可被attach到某个Atlas客户端控件上，以提供这个Atlas客户端控件更高级，更丰富的功能，例如一些复杂的拖放（drag & drop），自动完成，浮动等功能。Behavior将被定义在某个Atlas控件的behaviors集合中。

Click Behavior是Atlas内建的Behavior，用来处理DHTML的onclick事件。

 

主要内容

1．Click Behavior简介

2．完整示例

 

一．概述

Atlas中的Behavior定义了当控件的某个事件被触发时的行为。Behavior可以看作是一种封装了的DHTML的事件，例如click和hover等。Behavior同样可以是一个组件，可被attach到某个Atlas客户端控件上，以提供这个Atlas客户端控件更高级，更丰富的功能，例如一些复杂的拖放（drag & drop），自动完成，浮动等功能。Behavior将被定义在某个Atlas控件的behaviors集合中。

Click Behavior是Atlas内建的Behavior，用来处理DHTML的onclick事件。它的基本定义形式如下：    click="event handler"     datacontext="source for data binding operations"    id="identifier for looking up the component by name"     propertychanged="event handler">    <bindings>        <!-- bindings -->    </bindings>    <click>        <!-- actions -->    </click>    <propertyChanged>        <!-- actions -->    </propertyChanged></clickbehavior>

二．完整示例

下面看一个简单的示例，在ASPX页面上添加两个Span分别用来Hide和Show的点击，再用一个div来显示点击的结果：

<div>    <h3 style="text-decoration: underline">        Click Behavior Example</h3>    <div id="panel">        The clickBehavior of the following elements affect this element.</div>    <br />    <span id="hideLabel" class="buttonstyle2">Hide</span>&nbsp; <span id="showLabel"        class="buttonstyle2">Show</span></div>

其中用到的CSS样式如下：

<style type="text/css">    .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    }    .start{}{background-color:yellow;border:dashed 2px black;}</style>

下面添加Atlas脚本定义，注意我们要添加两个Click Behavior，分别用来表示Hide和Show，另外在Click Behavior中用到了setProperty这个Action，来设置这个Panel是否显示：

<script type="text/>    <page ="http://schemas.microsoft.com/">        <components>         <control id="panel" cssClass="start" />                    <label id="hideLabel">                        <behaviors>                            <clickBehavior>                                <click>                                    <setProperty target="panel" property="visible" value="false" />                                </click>                               </clickBehavior>                         </behaviors>                    </label>                    <label id="showLabel">                        <behaviors>                            <clickBehavior>                                <click>                                    <setProperty target="panel" property="visible" value="true" />                                </click>                               </clickBehavior>                         </behaviors>                    </label>        </components>    </page></script>

至此全部完成，运行后如下所示：

单击“Hide”：

单击“Show”：

完整示例下载：http://files.cnblogs.com/Terrylee/ClickBehaviorDemo.rar

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Atlas学习手记(21):使用行为增强用户界面

关键词：atlas