构建富Internet应用程序 ：使用OpenLaszlo、Eclipse Laszlo IDE和Web Tools - 编程入门网

布局 Work Order 表单

即使您不了解 Laszlo 组件，这项工作也并不太难，并且也不妨碍您创建复杂的用户 界面。图 19 所示的 Work Order 包含一个简单的表单。

图 19. FluidMotion work order 表单（Laszlo 表单元素）

构建富Internet应用程序 ：使用OpenLaszlo、Eclipse Laszlo IDE和Web Tools(14)

Work Order 表单演示了使用一些不同的内置 Laszlo 组件。一个 XML 数据集驱动的 组合框用于楼宇和楼层选择。包含楼宇和楼层数据的 XML 表示的位置数据集如清单 4 所 示。

清单 4. 位置数据集

<dataset　name="location"> 　 <locations> 　　 <building　id="1"　name="HQ"> 　　　 <floor　id="1">Floor　1</floor> 　　　 <floor　id="2">Floor　2</floor> 　　　 <floor　id="3">Mezzanine</floor> 　　 </building> 　　 <building　id="2"　name="Trump　Tower"> 　　　 <floor　id="1">Trump　1</floor> 　　　 <floor　id="2">Trump　2</floor> 　　　 <floor　id="3">Trump　150</floor> 　　 </building> 　 </locations> </dataset>

清单 5 包含用于楼宇和楼层组合框的代码。

清单 5. 楼宇和楼层组合框

<text　text="Building:" 　　　 fontstyle="bold"　width="59"　height="17"/> <combobox　defaulttext="choose　one..."　width="130" 　　　　　 editable="false"　height="22"　id="bl"> 　 <textlistitem　datapath="location:/locations[1]/building" 　　　　　　　　 text="$path{''@name''}"　id="bl_id" 　　　　　　　　 value="$path{''@id''}" 　　　　　　　　 onselect="getFloors(this.getValue());"/> </combobox> <text　text="Floor:"　fontstyle="bold"　width="59" 　　　 height="17"/> <combobox　defaulttext="choose　one..."　width="130" 　　　　　 editable="false"　height="22"　id="fl"> 　　 <textlistitem　id="fl_id"　datapath="" 　　　　　 text="$path{''text()''}"　value="$path{''@id''}"/> </combobox>

注意 textlistitem 上的 datapath 属性。它将下拉列表中的值绑定到前面描述的位 置数据集。冒号前面的文本表示数据集名称。冒号后面的值是组件绑定到的 XPath。文本 和值分别使用 XPath 来选择将用作下拉列表中项目的文本和值的数据集属性。

在选择了楼宇之后，事件通过调用 getFloors() 方法并将它传递给当前楼宇 ID，来 填充楼层组合框。清单 6 展示了楼宇组合框的 onselect 事件所调用的 getFloors() 方 法。

清单 6. getFloors() 方法

<script> 　 <![CDATA[ 　 //　Highlight　urgent　requests 　 function　getFloors(bl)　{ 　 fl=''location:/locations[1]

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!