Atlas学习手记（20）：客户端简单控件示例

上一篇简单介绍了Atlas的客户端控件，都是一些理论性的东西，显得有些枯燥。本文以Button控件为示例，看一下客户端简单控件的一些使用。

主要内容

1．Button控件示例

上一篇简单介绍了Atlas的客户端控件，都是一些理论性的东西，显得有些枯燥。本文以Button控件为示例，看一下客户端简单控件的一些使用。前面说过，Atlas将DOM元素中的Button概念扩展，使Button不单单指type为button或submit的HTML input元素，还可以应用到例如span，a等元素上，提供开发人员统一的编程接口。

1．添加Input，Button，a，span四个DOM元素：

< input  id ="button1"  type ="button"  value ="Button 1"  />  < br  />

< button  id ="button2"  type ="button" > Button 2 </ button >  < br  />

< a  id ="button3"  href ="#" > Buttron 3 </ a >  < br  />

< span  id ="button4"  class ="pseudo-button" > Button4 </ span >

分别表示为Button1，Button2，Button3，Button4。再添加一个Span用来显示单击按钮后的结果：

< span  id ="result" ></ span >

2．添加Atlas客户端控件：

前面说过，Sys.Component是所有的Atlas客户端控件的抽象基类，而所有的控件都有一个ID属性，它的解释为Atlas组件的标识符，将Atlas客户端组件与DOM元素连接起来。这个id值与DOM元素的id属性值相同，Atlas使用这个id以找到相关的DOM元素。

添加一个Atlas的Label控件，设置它的ID与我们上面的Span ID一致：

< label  id ="result"  />

前三个Button我们只是加上Click，而对第四个Button还加上了hoverBehavior，分别设置参数如下：

< script  type ="text/xml-script" >

    <page xmlns:script="http://schemas.microsoft.com/xml-script/2005" xmlns:samples="samples">

        <components>

            <label id="result" />

            <button id="button1">

                <click>

                    <setProperty target="result" property="text" value="button1 (input)" />

                </click>

            </button>

            <button id="button2">

                <click>

                    <setProperty target="result" property="text" value="button2 (button)" />

                </click>

            </button>

            <button id="button3">

                <click>

                    <setProperty target="result" property="text" value="button3 (hyperlink)" />

                </click>

            </button>

            <button id="button4">

                <click>

                    <setProperty target="result" property="text" value="button4 (span)" />

                </click>

                <behaviors>

                    <hoverBehavior>

                        <hover>

                            <invokeMethod target="button4" method="addCssClass">

                                <parameters className="pseudo-button-hover" />

                            </invokeMethod>

                        </hover>

                        <unhover>

                            <invokeMethod target="button4" method="removeCssClass">

                                <parameters className="pseudo-button-hover" />

                            </invokeMethod>

                        </unhover>

                    </hoverBehavior>

                </behaviors>

            </button>

        </components>

    </page>

</ script >

这里的参数很简单，有关的方法和属性可以参考前一篇文章。其中用的CSS样式：

<style type="text/css">

    .double-spaced  {

        line-height: 200%;

    }

    

    .pseudo-button  {

        border: solid 1px; 

        padding: 3px;

        background: lightyellow; 

    }

    

    .pseudo-button-hover  {

        background: lightgreen;

    }

</style>

运行后如下：

单击Button1后：

鼠标移动到Button4上：

单击Button4后：

完整示例下载

转载于:https://www.cnblogs.com/qfb620/archive/2008/03/25/1120947.html