Atlas学习手记(20):客户端简单控件示例

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

 

主要内容

1Button控件示例

 

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

1.添加InputButtonaspan四个DOM元素:

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

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

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

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

分别表示为Button1Button2Button3Button4。再添加一个Span用来显示单击按钮后的结果:

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

2.添加Atlas客户端控件:

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

添加一个AtlasLabel控件,设置它的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://files.cnblogs.com/Terrylee/ClientSimpleControlDemo.rar

posted @ 2006-08-31 08:17  TerryLee  阅读(3640)  评论(17编辑  收藏  举报