当前位置: 代码迷 >> Web前端 >> 创造一个简单的openlaszlo程序
  详细解决方案

创造一个简单的openlaszlo程序

热度:86   发布时间:2012-11-04 10:42:41.0
创建一个简单的openlaszlo程序

前面说到过openlaszlo程序是一组xml格式和javascript格式的标签语言,程序文件以.lzx为扩展名。为了简便,我们就称opnelaszlo程序开发语言为lzx语言。

?? 我们在学习C或其他非标签语言时的第一程序应该都是"hello,world";我们在IDE或者控制台来编译运行这个程序。但是,标签语言的第一个程序的概念和以上截然不同。比如说XML,HTML等,都是在浏览器重运行的,而且在开始的时候,我们不会太关注他是怎样运行的。开始学习的时候,我们所关注的是页面元素问题,也就是说元素和页面之间的对应关系,也就是页面的排版。

??? 在写LZX应用时,必须有一个标签为<canvas>.....</canvas>,它是整个应用的显示区或者说是作用区,它也是一个view。

?

<canvas width="100%" height="100" bgcolor="green"/>

或者
<canvas width="100%" height="100" bgcolor="green">
</canvas>


上述两段代码效果是一样的。代码相当于在浏览器的客户区划了一块属于本应用的地方,这段代码只是划地,把所划区域的背景颜色设为绿色。
?

下面在所划得区域中定义一个窗体元素。(注意:如果不设置canvas的width和height属性,则默认的区域是整个浏览器的客户区。我们自己可以通过调整参数来试验一下。)

?
?
<canvas width="100%" height="100">
? <window/>
</canvas>
下面定义的是一个可以调整大小的窗体。(所有示例都需运行试验一下,才能感受到RIA)
?

<canvas width="100%" height="350">
? <window x="20" y="20" width="200" height="250" title="Simple Window" resizable="true"/>
</canvas下面的是在定义的窗体中显示一项文本:
<canvas width="100%" height="350">
? <window x="20" y="20" width="200" height="250" title="Simple Window" resizable="true">
??? <text>Here is some text.</text>
? </window>
</canvas>
?
下面在窗体中显示两个<text>文本,运行后,我们发现两个文本都重叠到一起了。
<canvas width="100%" height="350">
? <window x="20" y="20" width="200" height="250" title="Simple Window" resizable="true">
??? <text>Here is some text.</text>
??? <text>I could ramble for hours.</text>
? </window>
</canvas>

解决的方法:1.在窗体标签中加入<simplelayout axis="y" spacing="10"/>,simplelayout标签把与其同等级的标签在页面中排版,axis属性来设置以水平(x)还是垂直(y)来排
<canvas width="100%" height="350">
? <window x="20" y="20" width="200" height="250" title="Simple Window" resizable="true">
??? <simplelayout axis="y" spacing="10"/>
??? <text>Here is some text.</text>
??? <text>I could ramble for hours.</text>
? </window>
</canvas>

2、设置<text>的x,y即坐标属性。以上所有的效果图,可以参考官方文档:http://www.openlaszlo.org/lps4.5/docs/developers/tutorials/laszlo_basics

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/zclmoon/archive/2009/11/24/4865612.aspx

  相关解决方案