創建一個簡單的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