Overview of OpenLaszlo Application Development
出自OpenFace
第四章 LZX应用开发概述
第一部分 概述
本章概括了LZX应用程序的结构、机制以便有经验的开发人员能够开始运行应用.
这部分的介绍非常简短。目的是为用户指明方向.在开始使用LZX之前,最好先了解这部分的内容.
目录 |
应用开发过程介绍
OpenFace应用开发大致流程如下：
1. 启动OpenFace服务器
2. 在文本编辑器下编写应用代码，并将文件保存为.lzx后缀的文件
3. 将源文件放在合适的目录
4. 编译应用
5. 模拟器中调试和修改应用
6. 重复2-5直至没有问题
7. 应用下载到手机运行
具体的每个步骤请见下面的介绍：
启动OpenFace服务器
按照[OpenFace 环境配置指南]配置好环境后启动tomcat服务即可。
创建应用程序文件
由于LZX文件是 XML 文件,可以使用任何文本或XML编辑器来创建和编辑源代码。文件名以必须.lzx 扩展名结束。编写LZX应用时也许您需要用到《OpenFace 编程参考手册》。后面会介绍如何有效地使用该手册。
把文件放在合适的目录下
SDK中默认的应用目录在 SDK目录\OpenLaszlo\WebRoot下，为了保证项目的独立性，您最好在WebRoot下创建您的项目目录，然后将您的代码文件放在项目目录中。
您的项目目录中必须有一个app.properties文件（文本文件，后缀为.properties），该文件包含两行内容：
appName=map icon=yddt-b.gif
其中第一行表示应用名称为map，您可以修改成您想要的名称。第二行表示应用图标为本目录下的yddt-b.gif文件，同样你可以改成其它的图片名称，但是必须保证该图片在项目目录中。
编译应用
假如在上面你创建了一个myApp的项目目录，并且编写了一个index.lzx文件，然后你可以在浏览器中输入如下地址http://localhost:8088/OpenLaszlo/myApp/index.lzx?lzt=app&lzr=eloo 并回车。此时服务器将源代码编译成目标代码，并自动将目标代码copy至模拟器默认的应用目录下。同时会在源文件目录下生成目标文件的打包文件.dat文件，该文件可供Player下载安装。
注意：这里假定您按照《OpenFace环境配置指南》中的默认配置布置好环境。编译时可以注意tomcat输出窗口是否出现异常信息。
调试与修改程序
生成目标应用后在SDK文件目录中运行OpenFace Player 模拟器，正常情况下启动后会运行您的应用，您可以在log文件观察您在源文件中设置的调试信息，如果需要修改，重复前面的步骤即可。
关于模拟器的运行，使用，请参照《OpenFace 模拟器使用说明》
注意：如果您不能正常启动模拟器，请先检查模拟器所在目录的桌面应用目录下是否有目标代码（正常情况下上一步操作时会自动产生），默然情况下桌面应用目录：SDK目录\emulator\root\desktop。 更多问题请见《OpenFace 开发常见问题》
应用下载到手机运行
应用在模拟器上调试通过后可以下载到手机中运行，有两种方式：1、直接将目标代码copy到手机系统OpenFace桌面应用目录，然后再运行Player即可。2、将编译时产生的打包文件放在手机能访问的web服务器中，然后在Player的中使用openurl功能进行下载。
注意：OpenFace Player手机的安装和使用请见《OpenFace Player使用说明》。手机能访问的web服务器需要公网IP，并且需要您的手机开通web服务（比如中国移动的动感地带、全球通需要开通gprs，神州行可能不支持web）。
从"Hello, World" 到真正的应用
规范的LZX 的"Hello, World"程序如下:
Example 4.1. Hello, world
<canvas height="40"> <text>Hello, World!</text> </canvas>
该程序说明了Laszlo程序的三个本质特征:
* LZX files are well-formed XML documents LZX文件是规范的XML文件
* <canvas>是根节点;程序以<canvas>开始,以</canvas>结束
* canvas中显示各种视图.就象我们看到的那样,<text> 元素是一种简单的视图.
下面讨论典型的Laszlo应用的组成部分.可以通过例程来了解LZX应用的大致结构.
基本结构
典型的Laszlo应用包含以下简述的部分,
* canvas
* views
* data
* libraries and includes
* comments
The Canvas
canvas是每个Laszlo应用的根节点，每个LZX应用有且只有一个canvas.canvas是程序中其它所有节点的容器，实际上它是一个矩形区域，是最终在模拟器或者屏幕上显示的最大区域，您可以设置它的宽和高属性的值来改变这个区域的大小。
Example 4.2. invisible canvas
<canvas height="20" width="30> </canvas>
如果不设置高和宽,canvas会像其它视图那样设置自己的大小为它包含的视图那么大.与其它视图不同,canvas默认有一个非零的宽和高.
Example 4.3. null program
<canvas/>
这个应用没有包含任何东西，甚至也没有设置大小，但是也是一个应用。
除了宽和高，canvas 还有其它几种可见属性。背景色由属性bgcolor定义，是LZX应用中了解视图结构最有用的属性。
<script> 标签
LZX程序中，可以使用<script>嵌入任意的Javascript函数。定义全局函数对不同的类是很有用的。<script>标签必须是<canvas>的子节点。
Example 4.4. <script> tag at canvas level
<canvas> <script> var Constant = 1; </script> </canvas>
is an allowed structure while
Example 4.5. <script> tag not allowed inside <view>
<canvas>
<view>
<script>（1）
var Constant = 1;
</script>
</view>
</canvas>
（1） 错误 <script>标签不允许放在view的内部.
name vs. id
LZX中id属性是全局对象标记，在整个程序中都是可见的,而对象的名字则和其它属性是一样的，只能通过路径访问。
Example 4.6. names and IDs
<canvas> <view id="v1" name="outer_view"> <view id="v2" name="inner_view" bgcolor="blue"/> </view> </canvas>
外层视图的背景色可以使用 v1.bgcolor或 outer_view.bgcolor访问.内部的可以使用v2.bgcolor在程序的任何地方访问.要从内部视图的外层通过名字访问它,需要使用outer_view.inner_view.bgcolor.
Named children of the canvas
canvas的孩子节点可以直接访问。
Example 4.7. addressing named children of the canvas
<canvas> <view name="artichoke"> </canvas>
视图artichoke可以作为artichoke在程序任何地方被访问。也就是不需要使用canvas.artichoke，因为它是canvas的直接字节点。
Views
view是LZX应用中基本的可见元素.canvas上显示的任何对象都是view（其它对象或者是继承view 的class的实例）。
可见的和不可见的视图
视图必须包含颜色、文本、或者图片之一，并且宽和高都大于0时才可见。比如，下面的代码只显示一个视图，尽管有三个被定义。第二个和第三个视图是存在的，但是完全不可见，因为第二个没有背景颜色，而第三个则是零高度。但是它们都存在，并且影响着其它视图的布局。 Example 4.8. nested views
<canvas height="100"> <view width="50" height="50" bgcolor="red"/> <view width="50" height="50"/> <view width="0" height="50" bgcolor="blue"/> <simplelayout axis='x' spacing="5"/> </canvas>
视图作为其它视图的容器
视图可以包含其它视图，允许创建复杂的可见元素，每个父视图可以有多个子视图，默认的情况下每个子视图的位置都是相对于它的父视图的左上角的。
尽管可以通过'x'和'y'定位视图相对父元素的位置，但是系统为您布局也是很方便的。系统提供了内置的<simplelayout>或<wrappinglayout>等布局类型。
视图大小和剪切
考虑如下的应用：
Example 4.9. Parent and children dimensions
<canvas height="200"> <view bgcolor="red" x="50" y="50" width="100" height="100"> <view bgcolor="yellow" x="50" y="50" width="60" height="105"/> </view> </canvas>
运行上面的代码，这个view的高度和宽度和它的子view的不同，黄色的view没有被剪切掉，尽管它超出了它父元素的范围。如果一个view没有定义高度和宽度，它会根据它的子view所形成区域确定自己的高度和宽度。如果允许裁剪，即设置父元素的clip="true",就会是下面看到的结果。
Example 4.10. clipping
<canvas height="200">
<view bgcolor="red" x="50" y="50" width="100" height="100" clip="true">
<view bgcolor="yellow" x="50" y="50" width="60" height="105"/>
</view>
</canvas>
图片等资源文件
除了显示文本、颜色，视图中还可以使用媒体文件，如.gif、.jpeg等图片。这些资源可以通过相对的路径或id引用.
数据绑定
LZX的强大的一个主要原因是它独特的数据绑定，在数据绑定机制的作用下，视图的内容能由dataset指向的数据内容决定。一个dataset可以简单的理解为有一个根节点的XML数据。LZX中的所有数据都包含在datasets中。
数据绑定的概念意味着不仅仅是让视图显示XML数据;而且数据本身可以决定视图的大小,颜色,文本,位置等,甚至可以创建和销毁视图.
考虑如下的代码：
Example 4.11. simple databinding
<canvas height="100">
<dataset name="ds">
<record x="10" y="20" name="first" color="332136432"/>
<record x="5" y="5" name="second" color="56521236432"/>
<record x="20" y="2" name="third" color="1565336432"/>
</dataset>
<simplelayout axis="y"/>
<view datapath="ds:/record">
<text datapath="@name" bgcolor="$path{'@color'}" x="$path{'@x'}"/>
</view>
</canvas>
上面的例子中，这行
<view datapath="ds:/record">
导致三个view被创建，而这行
<text datapath="@name" bgcolor="$path{@color}" x="$path{@x}"/>
给每个view添加了dataset中内容指定的文本内容、背景颜色和x轴位置。
Includes and libraries
LZX程序的源代码可以放在一个单独的文件中，这样文件就会很大并且很难操作和维护。通过将应用划分成多个小文件,就可以增加程序的可维护性和易懂性。甚至可以将多层次的视图分成多个文件以提高模块化、易读性，并改善源码的结构.
<include> 标签
该标签允许在程序的任何地方通过文件的名字包含一个文件。要包含的文件可以是一个库、视图、或文本。
当目标是库文件时,库文件的内容被包含到程序中。库文件中的任何视图、脚本、资源、datasource、dataset、类定义都包含到程序中。一个库文件可以包含其它的库文件，但是无论声明多少个<include>，一个库文件只能被程序包含一次。
Example 4.12. app.lzx
<canvas> <include href="library.lzx"/> <mywindow/> </canvas>
Example 4.13. library.lzx
<library>
<class name="mywindow" extends="view">
<text> Show me! </text>
</class>
<view x="20" y="30" width="30" height="50" bgcolor="red"/>
</library>
include 视图和文本是类似的,但也有细微的区别。和include 库文件不同的是，文本或者view文件在每次include的地方都copy一次。
Comments
XML 注释
LZX中使用XML的注释
Example 4.14. Commenting out code
<canvas height="100"> <simplelayout/> <view bgcolor="red" width="100" height="20"/> <view bgcolor="yellow" width="100" height="20"/> </canvas>
Script 注释
In script, block comments are of the form 在script中，可以象如下使用块注释
/* comment */
行注释可以使用
// line comment
<script> /* script comments look like this */ some.method() // this is an example of comment syntax </script> // ERROR! Do not include script comments in XML!
在OpenFace 中编写LZX应用可以使用如下方式打印调试信息。
Example 4.15. using the debugger to write messages
<canvas height="200"> <script> Debug.write("Well now how about that!") </script> </canvas>
Debug.write表示输出一条打印信息。
