openlaszlo组件的简单介绍

  openlaszlo组件的简单介绍 收藏
在写laszlo程序时，我们会用到很多组件的，官方的组建库lz componets，提供了绝大多数的应用。

 

这些组件是由一些简单的对象组合而成。

 

下面就通过几个简单的组建使用来了解下lz components:

 

<canvas width="100%" height="500">
    <silverstyle name="silvercolors"/>
    <greenstyle name="greencolors"/>
    <bluestyle name="bluecolors"/>

 

 

    <view id="s1" x="20" y="20">
        <view layout="spacing:20">

      <text>Choose a style to change colors...</text>

            <view name="stylechooser" layout="axis:x; spacing:4">
                <text>Style:</text>
                <combobox width="120" editable="false">
                    <handler name="onselect">
                        var colorchoice = this.getText();
                        canvas[colorchoice+'colors'].setAttribute("isdefault", true);
            </handler>   
<!-- handler 为"选择事件"的处理-->
                    <textlistitem text="silver"/>
                    <textlistitem text="green"/>
                    <textlistitem text="blue" selected="true"/>
                </combobox>
            </view>

<!--

stylechooser视图定义了一个颜色组合框。选择颜色的时候，程序的各个组件颜色改变。

-->

 

 

            <tabslider width="250" height="200">
                <tabelement text="holiday cheer" selected="true">
                    <radiogroup>
                        <radiobutton text="peace on earth"/>
                        <radiobutton text="joy to the world"/>
                        <radiobutton text="happy new year"/>
                    </radiogroup>
                </tabelement>
                <tabelement text="housewares">
                    <simplelayout axis="y" spacing="10"/>
                    <checkbox text="stainless steel"/>
                    <checkbox text="glassware"/>
                </tabelement>
                <tabelement text="isotope">
                    <text multiline="true" width="${immediateparent.width}">
                        Atoms that have the same number of protons but a different number of neutrons. They are atoms of the same element that have different masses. The isotope number is the number of protons plus the number of neutrons.
                    </text>
                </tabelement>
            </tabslider>

 

            <tabs>
                <tabpane>Insecticides
                    <simplelayout spacing="10" inset="10"/>
                    <radiogroup>
                        <radiobutton>Yes, I want to know more</radiobutton>
                        <radiobutton>No, I prefer to remain blissfully unaware</radiobutton>
                        <radiobutton>Please tell my neighbor, who may tell me</radiobutton>
                    </radiogroup>
                </tabpane>
                <tabpane text="Subliminal">
                    <button height="22">Submit</button>
                </tabpane>
            </tabs>
        </view>
</canvas>

 

以上程序主要写了三个组件，程序的演示效果如下：

 

 

openlaszlo组件分为"form components" 和 "general components，它们没有本质的区别。只是对<form>有所区别，比如说<button>可以放在<view>和<windows>里，但是不能包含在<form>中。

在lzx程序中<form>标签很少使用。

 

下面介绍使用组件的三种方法：

 

1、使用lzx的标签

 

<canvas height="100" width="100%">
    <simplelayout axis="x" spacing="10" inset="10"/>
    <list shownitems="4">
        <textlistitem>judy</textlistitem>
        <textlistitem>ann</textlistitem>
        <textlistitem>betsy</textlistitem>
        <textlistitem>sarah</textlistitem>
        <textlistitem>carol</textlistitem>
        <textlistitem>danah</textlistitem>
    </list>

    <radiogroup>
        <radiobutton text="apple"/>
        <radiobutton text="cherry"/>
        <radiobutton text="key lime"/>
    </radiogroup>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->使用标签的时候，里面没有脚本<script>2、使用脚本函数（script api）实际使用中，我们要动态的生成一些空间，或则处理组件的事件。<canvas height="150" width="100%">
  <simplelayout/>
  <!--Here is a button created with a tag -->
  <button name="framitz" width="50">
   hello
  </button>
  <script>
  //And here is a button created with using script
   var b = new lz.button();
     b.setAttribute("width", 50);
     b.setAttribute("height", 50);
   </script>
</canvas>
<canvas height="150" width="100%">
    <simplelayout spacing="10"/>
    <list id="mylist" height="82">    
        <textlistitem text="something"/>
    </list>

    <view layout="axis:x;spacing:4">
        <edittext id="item" text="new item"/>
        <button text="Add" isdefault="true">
            <handler name="onclick">
               mylist.addItem(item.getText());
            </handler>
        </button>
    </view>
</canvas>

 

3、使用数据驱动（data-driven componets）或则说数据绑定(databinding)

 

<canvas height="200" width="100%">
    <dataset name="mydata" src="resources/contacts.xml" request="true"/>
    <simplelayout axis="x" spacing="10" inset="10"/>
    <list id="a">
        <textlistitem datapath="mydata:/contacts/person" text="$path{'@firstname'}"/>
    </list>

    <list id="b" shownitems="4">
        <textlistitem datapath="mydata:/contacts/person" text="$path{'@firstname'}"/>
    </list>
</canvas>

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zclmoon/archive/2009/11/30/4907557.aspx