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
