创建一个简单的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.html