laszlo 标签整理

语法开关 <switch> <when runtime="dhtml"> //runtime运行条件 </when> <otherwise> <silverstyle name="silvercolors"/> //使用样式表 <greenstyle name="greencolors"/> <bluestyle name="bluecolors"/> <goldstyle name="goldcolors"/> <whitestyle name="whitecolors"/> <purplestyle name="purplecolors"/> </otherwise> </switch> 引入资源文件 <include href="lz/tree.lzx"/> //引入目标文件 使用提示开发 <debug x="450" y="200" height="200"/> 绑定数据源 <dataset name="weatherdata" request="true" //name为数据源名，request为设置作用范围 src="http://www.laszlosystems.com/cgi-pub/weather.cgi?zip=30622"/> //指定数据来源 表格 <view id="s1" x="20" y="20"> //id为表格的唯一标识x,y为表格坐标 <view layout="spacing:20"> //layout设置表格内填充 文字 <text multiline="true" width="${immediateparent.width}">Style:</text>//multiline属性是自动换行 下拉列表框： <combobox width="120" editable="false"> <method event="onselect"> //点击下拉框时产生的事件 var colorchoice = this.getText(); canvas[colorchoice+'colors'].setAttribute("isdefault", true); </method> <textlistitem text="silver" />//下拉列表框的内容 <textlistitem text="green" /> <textlistitem text="blue" selected="true"/> <textlistitem text="gold" /> <textlistitem text="white"/> <textlistitem text="purple" /> </combobox> 单选按钮组 <radiogroup> <radiobutton text="peace on earth"/> <radiobutton text="joy to the world"/> <radiobutton text="happy new year"/> </radiogroup> 多选按钮组 <checkbox text="stainless steel" /> <checkbox text="glassware" />   滑动菜单 <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> <tabelement text="etymology"> <text multiline="true" width="${immediateparent.width}"> [iso- + Greek topos, place (so called because the isotopes of a chemical element occupy the same position in the periodic table of elements).] </text> </tabelement> <tabelement text="whale bones"/> </tabslider> 按钮 <button height="22">Testify</button> //按钮 选项卡组件 <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 selected="true">Parcheesi //选项卡二 <text >On my honor I will do my best </text> <button height="22">Testify</button> //按钮 <simplelayout spacing="10"/> </tabpane> <tabpane text="Bogart, GA"> <grid datapath="weatherdata:/weather" contentdatapath="forecast/day" shownitems="3" height="${this.immediateparent.height}"> //数据绑定组件 <gridcolumn width="80" resizable="false">Day <text datapath="@label"/> </gridcolumn> <gridcolumn width="100" resizable="false">Forecast <text datapath="@desc"/> </gridcolumn> <gridcolumn width="60" resizable="false">Temp <text datapath="@temp"/> </gridcolumn> </grid> </tabpane> </tabs> 数据绑定组件 <grid datapath="weatherdata:/weather" contentdatapath="forecast/day" shownitems="3" height="${this.immediateparent.height}"> //datapath是数据的来源 //contentdatapath是指定绑定数据源中的目标 <gridcolumn width="80" resizable="false">Day <text datapath="@label"/> //datapath="@label"是从指定源中读到数据的方法，可自动递归 </gridcolumn> <gridcolumn width="100" resizable="false">Forecast <text datapath="@desc"/> </gridcolumn> <gridcolumn width="60" resizable="false">Temp <text datapath="@temp"/> </gridcolumn> </grid> 目录树组件 <tree>Trunk of the tree <tree xindent="5">Branch 1 <tree isleaf="true">Leaf A</tree> <tree isleaf="true">Leaf B</tree> </tree> <tree xindent="5">Branch 2 <tree isleaf="true">Leaf C</tree> <tree isleaf="true">Leaf D</tree> </tree> </tree> 滚动条选择数据 <slider showvalue="true" showfill="true" showrange="true" width="100" value="50"/> 文本域 <edittext width="200" text="text entry here"/> 对窗口组件的操作<!-- closeable="true" 控制window关闭事件 visible="false" 为不显示 --> <window id="win1" x="120" y="0" width="60" height="300" visible="false" clickable="true" onclick="{bringToFront()}" resizable="true" closeable="true"> <text>Win 1</text> </window> <window id="win2" x="0" y="120" width="300" height="60" visible="false" clickable="true" onclick="{bringToFront()}" resizable="true" closeable="true"> <text>Win 2</text> </window> <button>open <handler name="onclick"> win1.open(); win2.open(); </handler> </button> 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中的介绍。 弹出对话框 <modaldialog name="mdl" title="选择查询条件" width="240"> <simplelayout spacing="10"/> <text width="${immediateparent.width}" multiline="true"> 请选择查询条件</text> <checkbox align="right">.......</checkbox> <view align="right" layout="axis:x; spacing:10"> <button onclick="parent.parent.close()">Cancel</button> <button onclick="parent.parent.close()" isdefault="true">OK</button> </view> </modaldialog>