Atlas学习手记（21）：使用行为增强用户界面（一）：Click Behavior

---

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

　　主要内容

　　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事件。它的基本定义形式如下：

<clickbehavior
　　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;
　　　　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/xml-script">
　　<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
　　　　<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”：

本文作者:

---

« 
» 

---