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

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

<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; 

        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/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”：

完整示例下载