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

完整示例下载