Atlas客户端类库、控件介绍(1)
  “Atlas”系统是一个非常复杂的框架,具有类似于asp.net般的丰富组件来简化客户端的程序设计。在dflying的系列文章中,已经为我们大家介绍了很多相关的知识,重复的地方我在这里就不啰嗦了。
要实现“Atlas”客户端控件,有两种方式,一种是Xml Script定义的方式,dflying书写的系列文章中,涉及到Atlas客户端控件大多数采用的就是上面的这种方式,形式如同:
 <script type="text/xml-script">
    <script type="text/xml-script">
 <page xmlns:script="http://schemas.microsoft.com/xml-script/2005" xmlns:samples="samples">
        <page xmlns:script="http://schemas.microsoft.com/xml-script/2005" xmlns:samples="samples">
 <components>
            <components>
 <button id="button1">
                <button id="button1">
 <behaviors>
                    <behaviors>
 <hoverBehavior>
                        <hoverBehavior>
 <hover>
                            <hover>
 <invokeMethod target="button1" method="addCssClass">
                                <invokeMethod target="button1" method="addCssClass">
 <parameters className="pseudo-button-hover" />
                                    <parameters className="pseudo-button-hover" />
 </invokeMethod>
                                </invokeMethod>
 </hover>
                            </hover>
 <unhover>
                            <unhover>
 <invokeMethod target="button1" method="removeCssClass">
                                <invokeMethod target="button1" method="removeCssClass">
 <parameters className="pseudo-button-hover" />
                                    <parameters className="pseudo-button-hover" />
 </invokeMethod>
                                </invokeMethod>
 </unhover>
                            </unhover>
 </hoverBehavior>
                        </hoverBehavior>
 </behaviors>
                    </behaviors>
 </button>
                </button>
 </components>
            </components>
 </page>
        </page>
 </script>
    </script>
 还有一种方式,那就是Javascript实现,如果书写普通js代码般实例化相应的Atlas客户端控件:
  还有一种方式,那就是Javascript实现,如果书写普通js代码般实例化相应的Atlas客户端控件:
上面这段js的意思是:
第3行:实例化一个Sys.UI.TextBox,传入的参数为一input HTML 控件,实现将Atlas控件与HTML控件的关联(绑定);
第4行:初始化这个新的Atlas客户端控件;
第6行:修改这个新Atlas TextBox控件的值,Atlas控件所关联(绑定)的HTML控件的相应值同步更新。
到这一步,我们就利用JavaScript获得了第一个Atlas 客户端控值。
第8-9行:创建Atlas客户端框架中的事件实例(您可以借鉴c#中的事件来理解),Type.Event类所传入的两个参数,第一个参数为发出事件的源控件(Atlas控件),第二个参数确定此事件是否自动执行。
第11行:将将新事件指定给第3行创建的Atlas TextBox控件实例的propertyChanged,这样,在TextBox控件的属性(TextBox 控件的Text)发生改变时,就会执行相应的事件:
第13-17行又是什么意思呢?
刚才的TextBox在Text属性发生改变时,已经可以通过事件响应了,如果我们还希望在实现鼠标移入TextBox区域(类似HTML控件的onMouseOver),又该如何实现呢?第13-17行就是实现这个功能的。
Atlas客户端控件包含HoverBehavior类,HoverBehavior类继承与Behavior(动作、行为?)类。Behavior类通过setOwner(ownerControl)方法绑定Behavior的所有者控件。
同样,不要忘记初始化这个控件。
这样,我们创建了一个Sys.UI.TextBox控件,并将此TextBox关联至id为“TitleTextBox”的input HTML控件,当TextBox的Text改变时,会有相应的事件激活;同时,这个TextBox控件还能响应鼠标进入动作。
哈哈哈,实在是表述力欠佳,希望您可以看得明白我在说些什么 。(后续……)
。(后续……)
要实现“Atlas”客户端控件,有两种方式,一种是Xml Script定义的方式,dflying书写的系列文章中,涉及到Atlas客户端控件大多数采用的就是上面的这种方式,形式如同:
 <script type="text/xml-script">
    <script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005" xmlns:samples="samples">
        <page xmlns:script="http://schemas.microsoft.com/xml-script/2005" xmlns:samples="samples"> <components>
            <components> <button id="button1">
                <button id="button1"> <behaviors>
                    <behaviors> <hoverBehavior>
                        <hoverBehavior> <hover>
                            <hover> <invokeMethod target="button1" method="addCssClass">
                                <invokeMethod target="button1" method="addCssClass"> <parameters className="pseudo-button-hover" />
                                    <parameters className="pseudo-button-hover" /> </invokeMethod>
                                </invokeMethod> </hover>
                            </hover> <unhover>
                            <unhover> <invokeMethod target="button1" method="removeCssClass">
                                <invokeMethod target="button1" method="removeCssClass"> <parameters className="pseudo-button-hover" />
                                    <parameters className="pseudo-button-hover" /> </invokeMethod>
                                </invokeMethod> </unhover>
                            </unhover> </hoverBehavior>
                        </hoverBehavior> </behaviors>
                    </behaviors> </button>
                </button> </components>
            </components> </page>
        </page> </script>
    </script>
 1 function Init()
function Init()
2 {
{
3 var titleTextBox = new Sys.UI.TextBox($("TitleTextBox"));
    var titleTextBox = new Sys.UI.TextBox($("TitleTextBox"));
4 titleTextBox.initialize();
    titleTextBox.initialize();
6 titleTextBox.set_text("AXii");
    titleTextBox.set_text("AXii");
7 
    
8 var itemEvent = new Type.Event(titleTextBox , true);
    var itemEvent = new Type.Event(titleTextBox , true);
9 itemEvent.add(PopupMessage);
    itemEvent.add(PopupMessage);
10
11 titleTextBox.propertyChanged = itemEvent;
    titleTextBox.propertyChanged = itemEvent;
12 
    
13 var itemBehavior = new Sys.UI.HoverBehavior();
    var itemBehavior = new Sys.UI.HoverBehavior();
14 itemBehavior.setOwner(titleTextBox);
    itemBehavior.setOwner(titleTextBox);
15 itemBehavior.initialize();
    itemBehavior.initialize();
16 
    
17 itemBehavior.hover.add(Alert);
    itemBehavior.hover.add(Alert);
18 }
}
 function Init()
function Init()2
 {
{3
 var titleTextBox = new Sys.UI.TextBox($("TitleTextBox"));
    var titleTextBox = new Sys.UI.TextBox($("TitleTextBox"));4
 titleTextBox.initialize();
    titleTextBox.initialize();6
 titleTextBox.set_text("AXii");
    titleTextBox.set_text("AXii");7
 
    8
 var itemEvent = new Type.Event(titleTextBox , true);
    var itemEvent = new Type.Event(titleTextBox , true);9
 itemEvent.add(PopupMessage);
    itemEvent.add(PopupMessage);10

11
 titleTextBox.propertyChanged = itemEvent;
    titleTextBox.propertyChanged = itemEvent;12
 
    13
 var itemBehavior = new Sys.UI.HoverBehavior();
    var itemBehavior = new Sys.UI.HoverBehavior();14
 itemBehavior.setOwner(titleTextBox);
    itemBehavior.setOwner(titleTextBox);15
 itemBehavior.initialize();
    itemBehavior.initialize();16
 
    17
 itemBehavior.hover.add(Alert);
    itemBehavior.hover.add(Alert);18
 }
}上面这段js的意思是:
第3行:实例化一个Sys.UI.TextBox,传入的参数为一input HTML 控件,实现将Atlas控件与HTML控件的关联(绑定);
第4行:初始化这个新的Atlas客户端控件;
第6行:修改这个新Atlas TextBox控件的值,Atlas控件所关联(绑定)的HTML控件的相应值同步更新。
到这一步,我们就利用JavaScript获得了第一个Atlas 客户端控值。
第8-9行:创建Atlas客户端框架中的事件实例(您可以借鉴c#中的事件来理解),Type.Event类所传入的两个参数,第一个参数为发出事件的源控件(Atlas控件),第二个参数确定此事件是否自动执行。
第11行:将将新事件指定给第3行创建的Atlas TextBox控件实例的propertyChanged,这样,在TextBox控件的属性(TextBox 控件的Text)发生改变时,就会执行相应的事件:
1 function PopupMessage(sender , eventArgs)
function PopupMessage(sender , eventArgs)
2 {
{
3 alert(sender.get_text());
    alert(sender.get_text());
4 }
}
  注意:事件关联处理函数应该以上面的方式定义,包括sender 与 eventArgs参数,从参数命名上我们可以知道,sender指向的就是发起事件的源。 function PopupMessage(sender , eventArgs)
function PopupMessage(sender , eventArgs)2
 {
{3
 alert(sender.get_text());
    alert(sender.get_text());4
 }
}第13-17行又是什么意思呢?
刚才的TextBox在Text属性发生改变时,已经可以通过事件响应了,如果我们还希望在实现鼠标移入TextBox区域(类似HTML控件的onMouseOver),又该如何实现呢?第13-17行就是实现这个功能的。
Atlas客户端控件包含HoverBehavior类,HoverBehavior类继承与Behavior(动作、行为?)类。Behavior类通过setOwner(ownerControl)方法绑定Behavior的所有者控件。
同样,不要忘记初始化这个控件。
这样,我们创建了一个Sys.UI.TextBox控件,并将此TextBox关联至id为“TitleTextBox”的input HTML控件,当TextBox的Text改变时,会有相应的事件激活;同时,这个TextBox控件还能响应鼠标进入动作。
哈哈哈,实在是表述力欠佳,希望您可以看得明白我在说些什么
 。(后续……)
。(后续……)
 
                    
                     
                    
                 
                    
                
 


 
                
            
         
         浙公网安备 33010602011771号
浙公网安备 33010602011771号