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.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
页:
[1]