openlaslzo开发之进阶篇－理解绑定

RIA除了在界面效果吸引人外，功能是最主要的，让用户在互动操作中体验到简化的操作流程，丰富而强大的应用程序体验，这才是RIA的魅力。
    openlazlo的编程语言lzx就可以满足这种要求，而且开发人员无需编写过多的代码，就可以完成许多数据操作，这就是本节所介绍的，lzx中最有用的功能：绑定。

    openlaszlo的绑定功能分为：

•  视图绑定
•  数据绑定
  

    按绑定方式划分又分为：

•    一次绑定
•    始终绑定
•    运行时绑定

    下面就介绍openlaszlo的绑定特性。

1. 视图绑定

   视图绑定是界面布局中比较常用的方法，一般情况下，所有的视图元素都可以用绝对位置来指定，但是这样有两个缺点，一个是修改布局中某一个视图的位置，就需要修改和它相邻的或者和它层叠的视图位置；另一个缺点是实现某个视图运动动画时，需要指定其相关视图的运动。
   这样的后果就是需要编写额外的代码来实现，增加了劳动量，也没有充分体现lzx语言的力量。我们本可以用更简单的方式做。下面看几个小例子：

 1.1 简单绑定实例

<!------------------------------------------>
<!--bindingview_1.lzx-->
<!------------------------------------------>
    <canvas title="视图绑定例子" width="800" height="600" debug="true">
       <view name="left" x="20" y="20" width="100" height="100" bgcolor="#FF0000"/>
       <view name="right" x="140" y="20" width="100" height="100" bgcolor="#00FF00"/>
       <view name="bindtoleft" x="$once{parent.left.x}"
             y="$once{parent.left.y+parent.left.height+20}"
             width="100" height="100" bgcolor="#0000FF"/>
    </canvas> 

访问地址：http://www.openria.cn/lps-3.0/my-apps/bindingview_1.lzx?lzt=html

  这个例子是lzx的简单布局实例，视图left和right都是绝对布局，而视图bindtoleft将自己的位置绑定到了

left，使用的语法是：
   x="$once{parent.left.x}"
   y="$once{parent.left.y+parent.left.height+20}"

   $表示绑定符，once表示一次绑定，如果始终绑定就不用写once了。大括弧{}加里面内容构成一个表达式用来表示当前视图的属性由表达式决定。
   将这两句话翻译过来就是说，bindtoleft的x值即水平位置就是left的水平位置；bindtoleft的y值即垂直位置就是left的垂直位置再加20个象素（往下移动20个象素）。

   这样看起来好像挺麻烦，但是如果你修改视图left的位置和大小时，就不用理会bindtoleft的位置和大小，而right看起来写的挺方便，但是缺需要跟着left改。尤其是应用程序中的视图很多时，这种绑定会很方便，尤其是关系紧密的视图。

  1.2 始终绑定实例

<!----------------------------------------->
<!--bindingview_2.lzx-->
<!----------------------------------------->
<canvas title="始终绑定例子" width="800" height="600" debug="true">
    <view name="left" x="20" y="20" width="100" height="100" bgcolor="#FF0000"/>  
    <view name="bindtoleft" x="$once{parent.left.x}"

y="$once{parent.left.y+parent.left.height+20}"
         width="100" height="100" bgcolor="#0000FF"/>
    <button name="runview" x="20" y="260" text="clickMe">
        <method event="onclick">
            parent.left.animate('x',200,500,false);       
        </method>   
    </button>    
</canvas>

访问地址：http://www.openria.cn/lps-3.0/my-apps/bindingview_2.lzx?lzt=html

点击一下按钮，会发现left（红色的矩形）移动了，但是如果想让蓝色的矩形（bindtoleft）也跟着动怎么办呢，很简单，把bindtoleft的x="$once{parent.left.x}"属性改为x="${parent.left.x}"就可以了，试试吧，

是不是很爽，都不用再编写额外的代码移动bindtoleft。除了能对x,y进行绑定，视图的其他属性，比如visible属性也可以进行绑定，这种绑定也经常用到。

 2. 数据绑定

   基于openlaszlo的应用程序和其他RIA技术如flex一样，是数据驱动的应用程序，也就是说界面的框架定下来后，它的具体内容是由数据来决定的，有多少数据就会生成多少视图。 这一过程的实现就是依靠“数据绑定”。依靠数据绑定，openlaszlo的应用程序将完全脱离传统web应用基于页面思想的编程方式，用动态语言来输出页面标签，实现动态视图。从而真正的实现MVC模式，让数据和视图彻底分开。

   数据绑定和视图绑定一样仍然分为两种情况，一次绑定和运行时绑定，这个“运行时绑定”也可以称为动态绑定。可以看作是多个一次绑定构成运行时绑定。下面看几个例子：

   2.1 始终绑定实例

<!------------------------------------->
<!--databinding_1.lzx-->
<!------------------------------------->
<canvas width="800" height="600" debug="true" fontsize="12">
    <dataset name="ds1">
      <root>
        <node name="第一条数据"/>
        <node name="第二条数据"/>
        <node name="第三条数据"/>
        <node name="第四条数据"/>
        <node name="第五条数据"/>
        <node name="第六条数据"/>
        <node name="第七条数据"/>
      </root> 
    </dataset>
    <list name="samplelist" x="10" y="10" width="100" height="100" datapath="ds1:/*">
        <textlistitem text="$path{'@name'}" datapath="*"/>   
    </list>
</canvas>

访问地址：http://www.openria.cn/lps-3.0/my-apps/databinding_1.lzx?lzt=html

   从这个例子可以看出，列表的内容完全由dataset的数据生成的，而且在编译的时候就已经数据和list组件绑定在一起了，即通过list的datapath="ds1:/*"来绑定到数据集ds1上。这样做比较死板，实际应用中很少这样做。

  2.2 运行时绑定（动态绑定）实例

<!------------------------------------->
<!--databinding_2.lzx-->
<!------------------------------------->
<canvas width="800" height="600" debug="true" fontsize="12">
    <dataset name="ds1">
      <root>
        <node name="第一条数据"/>
        <node name="第二条数据"/>
        <node name="第三条数据"/>
        <node name="第四条数据"/>
        <node name="第五条数据"/>
        <node name="第六条数据"/>
        <node name="第七条数据"/>
      </root> 
    </dataset>
    <dataset name="ds2">
      <root>
        <node name="firstItem"/>
        <node name="secondItem"/>
        <node name="thirdItem"/>
        <node name="fourthItem"/>
        <node name="fitthItem"/>
        <node name="sixthItem"/>
        <node name="seventhItem"/>
      </root> 
    </dataset>
    <method event="oninit">
        samplelist.datapath.setPointer(ds1.childNodes[0]);
    </method>
    <list name="samplelist" x="10" y="10" width="100" height="100" datapath="" dataoption="lazy">
        <textlistitem text="$path{'@name'}" datapath="*"/>   
    </list>
    <button name="getenglishlist" x="10" y="150" text="获取英文列表">
        <method event="onclick">
            parent.samplelist.datapath.setPointer(ds2.childNodes[0]);       
        </method>   
    </button>
    <button name="getchineselist" x="10" y="180" text="获取中文列表">
        <method event="onclick">
            parent.samplelist.datapath.setPointer(ds1.childNodes[0]);       
        </method>   
    </button>
</canvas>

    访问地址：http://www.openria.cn/lps-3.0/my-apps/databinding_2.lzx?lzt=html

    对比这个例子和前面那个例子，可以看出，list的datapath开始是为空的，而在程序init的时候，才给它绑定数据，点击按钮又改变的绑定数据源，这样就是运行时的数据绑定。
    在实际的应用开发过程中，很多情况需要运行时绑定，这样可以减少服务器的编译时间和减少文件尺寸，充分利用客户端的运算能力，可以在客户端有更直接快捷的数据更新，而无需刷新页面，改善用户体验。

    此外，通过对list对应的数据集的操作，如增、删、改，可以直接影响到list的视图表现。
    注意：本例使用dataoption="lazy"来实现list的性能优化，从而使视图更新时更快，更适合大数据量的展现。

  
   3. 与数据绑定相关的内容

   3.1 数据指针：datapointer
      
       数据指针和数据集几乎是形影不离，每申明一个远程的dataset，就应该申明一个对应的datapointer，让这个datapointer指向dataset。让datapointer来表明dataset的状态并执行对应视图的视图绑定。
     比如：
     <dataset name="remotedata" src="sampleAction.jsp" type="http" request="false"/>
     <datapointer name="remotedatapt" xpath="remotedata:/*">
         <method event="ondata">
            viewname.datapath.setPointer(this.p);
         <method/>
     <datapointer/>

   3.2 数据元素：LzDataElement

      dataset是继承自LzDataElement，有时需要在运行时用脚本来生成数据来给视图用，这时使用的对象就是LzDataElement，比如：
      var sampledata = new LzDataElement('root');
      sampledata.appendChild(new LzDataElement('node'));
      sampledata.appendChild(new LzDataElement('node'));

  这就生成了一个类似于dataset的数据集，即：
      <root>
         <node/>
         <node/>
      <root/>
  
   3.3 数据路径查询：datapath.xpathQuery()

      很多时候，要从视图中取得某个属性，然后进行判断或者操作，这时候需要用到这个功能，比如：

      var someattr = sampleview.datapath.xpathQuery('@value');
      这是查询视图sampleview的数据集中属性为value的值。
      具体内容见开发文档中xpath中的介绍。

结束语

   掌握了openlaszlo的视图和数据绑定，以及数据操作，就基本掌握了openlaslzo开发的精髓，关键的是要改变思想，要thinking in RIA，开发RIA是构建应用，而不是写页面，还是系列文章开篇所讲，openlaszlo的开发思想是：

      面向对象
      基于组件
      数据驱动

    有时感觉做openlaszlo开发就像是在做swing或者vb开发，只是没有多线程的烦恼，唯一不足的是没有所见即所得开发工具，要不会很爽，而ide4laszlo插件又不好用。