探索Laszlo的类、属性及事件(ZT)

Laszlo应用程序由LZX写成.LZX是基于XML的程序语言，可以用任何一个文字编辑器书写.当Laszlo服务器访问这些文件，它将这些LZX文件转化为比特码或二进位形式，然后这些编码被送到浏览器中Macromedia Flash插件.你的服务器不需要Macromedia Flash成分.Macromedia Flash可用和兼容于在大多数浏览器. 　　你可以在Java.net中查阅"Laszlo: An Open Source Framework for Rich Internet Applications"(作者:Bill Grosso )来获取关于这种平台的基本原理.本文中，我将会谈论语言的一些基本原则，这些原则在你使用LZX编写程序时将会派上用场.至于更深一步的学习，可以求助于Laszlo站点的文档. 　　设立Laszlo的“开发便笺” 　　使用 我关于Laszlo的评注，或者访问Laszlo站点，下载安装Laszlo.也许你已经安装了Tomcat.假如这样的话，Laszlo的安装文档将会在Laszlo安装时建议暂停Tomcat.假如你没有安装Tomcat，Laszlo将会附带一份Tomcat拷贝.安装后，你可根据上面所提到的评注，将Laszlo设为Tomcat的另一个web应用。对于经验丰富的Tomcat使用者，这仅仅是大概设置一下WEB浏览器的根. 　　我们写一段LZX文件来开始你的学习过程.代码如下: <canvas height="500" width="800" debug="true">         <debug x="450" y="0" height="300"/> </canvas> 　　当LZX文件被提交给浏览器，你的浏览器版面将会与图1相同.我把它叫做你的“开发便笺”.这是应用程序开发所必需的.初始设置允许你写一个调试器声明，将它们在调试器窗口显示.这个设置还允许在调试器外有足够的空间以存储视觉控制器. 　　图1:Laszlo“开发便笺”. 编写类 　　现在你有了一个可以使用的开发便笺，你可以在 Laszlo写一个类来开始编码练习.一个类的基本特点是它的一些局部变量.下面的代码定义一个类和类中的一些变量.假如不是由于XML句法的原因，Laszlo的类定义与Java类定义非常相似.与Java不同的是，Laszlo类型系统与动态语言如JavaScript非常类似;也就是说，它非常的灵活宽松. <canvas width="800" debug="true"> <debug x="450" y="0" height="300"/> <class name="test">         <attribute name="a1" type="string"/>         <attribute name="b1"/> </class> </canvas> 　　Laszlo中，每一次动作都在 标记符中发生.如此例所示，一个LZX类在 标记符中定义.这个编码将一个类定名为test，属性名a1，b1. 　　实例化一个类 　　上述的编码定义了一个类，下面的编码将会说明如何实例化所定义的类test: <canvas width="800" debug="true"> <debug x="450" y="0" height="300"/> <class name="test">         <attribute name="a1" type="string"/>         <attribute name="b1"/> </class> <!--Instantiating a class--> <test name="testInstance"> </test> </canvas> 　　仔细看着，类名test是如何实例化为下一个节点或 标记符.实例化对象被命名为testInstance，当需要时，它可以作为变量canvas.testInstance被使用. 　　Laszlo中属性的特点 　　Laszlo中，每当一个属性的建立和更改时，一个onchange事件将会产生.对于那些由事件控制的可视化编程来说相当的棒.这种机制将会节省编码工作量，更不必提其可读性和易理解性. 　　本文的主要目的是向你展示如何设定一个属性，如何激活事件和怎样编码以响应这些事件.我将会展示怎样写一个关于属性a1的onchange事件. <canvas width="800" debug="true"> <debug x="450" y="0" height="300"/> <class name="test">         <attribute name="a1" type="string"/>         <attribute name="b1"/> </class> <!--Instantiating a class--> <test name="testInstance">         <!--Demonstrating an onchange for attribute event-->         <method event="ona1" name="ona1Method">                 Debug.write("hey this works");         </method>       </test> </canvas> 　　看到方法怎样定义ona1事件了吗?当a1的属性被改变时事件将被激活.这个编码还展示了定义一个方法的基本语法.注意，与Java不同，方法属于对象或实例，在类中并没有此方法.method块在调试器中写了一行.如果调试器被激活，此行会在调试器窗口中显示出来. 　　写LZX时，注意所有LZX的书写和命名对大小写不敏感.然而，在XML中定义节点和标示符，XML大小写敏感，JavaScript同样如此.所以当你面对Laszlo时一定要紧记这个差别.     　　Refining the "Developer Pad" with Alerts 　　在JavaScript中编程，调用alert()方法进行调试是很平常的. 所以我在Laszlo中寻找可以信赖的alert()方法，不过没有找到.但是却意外地找到一个名为alert的控制器(更确切地说，是一个模态对话框).我猜测我可以利用其来模拟alert功能，当作调试器使用.以下编码是我的尝试.此外，到目前为止，这些编码都是学习LZX的基本特征. <canvas width="800" debug="true"> <debug x="450" y="0" height="300"/> <class name="test">         <attribute name="a1" type="string"/>         <attribute name="b1"/> </class> <!--Instantiating a class--> <test name="testInstance">         <!--Demonstrating an onchange for attribute event-->         <method event="ona1" name="ona1Method">                 Debug.write("hey this works");         </method> </test> <!-- Simulating an alert --> <!-- Instantiate a modal alert dialog --> <alert name="myalert" width="100" y="100">    hi - initial text </alert> <!-- A method to work the modal dialog --> <method name="showAlert" args="displayText">    canvas.myalert.setAttribute("text",displayText);    canvas.myalert.open(); </method> <!-- Testing the alert function --> <button οnclick="canvas.showAlert('Alert Button Pressed')">     Show Alert </button> </canvas> 　　在上面的编码中，我创造了一个canvas的子类alert组件的实例，声明了alert的大小，还命名为myalert，并赋与其内容:"hi - initial text.". 　　我还写了一个showAlert方法来显示对话框.此方法有一个参数叫做text.方法主体访问模式对话框，将其属性text传递至displayText.然后，此方法在模式对话框上调用open方法. 　　我还制作了一个按钮叫做showAlert().当showAlert按钮被按下，你将会看到一个关于你文本的警告.由于这个按钮是canvas的子类，没有位置设置，它将在屏幕的左上角显示.可以使用下面的编码改变按钮位置，使它出现调试窗口的下面: <button x="500" y="310"         οnclick="canvas.respondToMethod()"> Show Alert </button> 　　图2中观察结果. 　　图2:附带警告窗的Laszlo“开发便笺” 探索属性及事件及联系 　　范例代码现在开始进一步探索属性与事件之间的联系.被用来测试alert的按钮也可以用来设定此前定义的属性.我想要展示的是设定这些属性如何触发相应的onchange方法. 　　以下编码是一个方法，respondToButton(), 将在showAlert按钮按下时被调用. <canvas width="800" debug="true"> <debug x="450" y="0" height="300"/> <class name="test">         <attribute name="a1" type="string"/>         <attribute name="b1"/> </class> <!--Instantiating a class--> <test name="testInstance">         <!--Demonstrating an onchange for attribute event-->               <method event="ona1" name="ona1Method">                 Debug.write("hey this works");         </method>       </test> <!-- Simulating an alert --> <!-- A modal alert dialog --> <alert name="myalert" width="100" y="100">    hi - initial text </alert> <!-- A method to work the modal dialog --> <method name="showAlert" args="displayText">    canvas.myalert.setAttribute("text",displayText);    canvas.myalert.open(); </method> <!-- Testing the alert function --> <button οnclick="canvas.respondToButton()">Show Alert</button> <method name="respondToButton" >         //Prepare a string         var somestring =                 "Hey, I am setting the a1 attributes value";         //Write a debug to see it         Debug.write(somestring);         //Call the alert to see it         showAlert(somestring);         //Go ahead and set the attribute         canvas.testInstance.setAttribute("a1",'satya');         //The above will fire an event causing         //"ona1Method" to execute.         //You will see this in the debugger </method> </canvas> 注意，留意这个按钮是如何设置由test类声明的testInstance object的属性的.通常会犯一个错误，即在写LZX方法是在其方法名后加大括号，这是没有必要的。 　　运行此实例，按下按钮将会显示出如图3所示 　　图3 事件激活实例 　　使用脚本代替方法       Laszlo同样允许<script>标签定义函数和其他过程逻辑.为了演示，我更改了上面程序的部分脚本，加进一些脚本，并简略地介绍了LZX脚本的特性.　　 <canvas width="800" debug="true"> <debug x="450" y="0" height="300"/> <!-- The previous respond method --> <method name="respondToButton" >         //Prepare a string         var somestring =             "Hey, I am setting the a1 attributes value";         //Write a debug to see it         Debug.write(somestring);         //Call the alert to see it         showAlert(somestring);         //Go ahead and set the attribute         canvas.testInstance.setAttribute("a1",'satya');         //The above will fire an event causing         //"ona1Method" to execute.         //You will see this in the debugger </method> <!-- Your method rewritten as a script --> <script> function respondToButtonUsingScript() {         var somestring =             "Hey, I am setting the a1 attributes value";         Debug.write(somestring);         showAlert(somestring);         canvas.testInstance.setAttribute("a1",'satya'); } </script> <!-- Button now calling the global script function --> <button οnclick="respondToButtonUsingScript()">     Show Alert </button> <class name="test">         <attribute name="a1" type="string"/>         <attribute name="b1"/> </class> <!--Instantiating a class--> <test name="testInstance">         <!--Demonstrating an onchange for attribute event-->         <method event="ona1" name="ona1Method">                 Debug.write("hey this works");         </method> </test> <!-- Simulating an alert --> <!-- A modal alert dialog --> <alert name="myalert" width="100" y="100">    hi - initial text </alert> <!-- A method to work the modal dialog --> <method name="showAlert" args="displayText">    canvas.myalert.setAttribute("text",displayText);    canvas.myalert.open(); </method> </canvas>   　　Laszlo的脚本与JavaScript的很相似，并且，如果不能说同样，遵从类似的约定。Laszlo中，脚本标签只允许存在于根对象canvas里面.脚本中的代码会直接运行，除非它是函数.这就意味着脚本可以包含不在任何函数里面的编码.我将这种编码称为“内联码片断” (inline code segment). 　　不用说，脚本标签可以包含函数定义.这些函数是全局函数.相反的，LZX方法属于定义它们的节点.例如，一个在canvas根中使用method方法定义的方法属于canvas对象，并依此确定范围和命名. 　　在脚本之内，可以使用Java样式(//)的行注释.由于script标签属于另一个XML标签，所以有时将脚本主体包含在一个CDATA部分以避免与< 或 >字符发生冲突是很必要的. 　　与JavaScript相同，假如变量没有声明为var，那末这个变量被认为是全局变量.最好将变量声明为var. 　　接着怎么办 　　我所说的关于Laszlo都属于语言基本原理.LZX综合了三种语言:XML,OO编程和JavaScript.你应当花一些时间在LZX上以了解这三种语言是怎样被融合在一起，特别是实例方法的使用.此名，在JavaScript中，terms对象，dictionary和数组的使用是同步的:这一思想在LZX中应用的更加广泛.你需要重复地温习这些JavaScript中的概念以便在Laszlo获得很好的发展. 　　我也稍微提到了Laszlo的可视化编程模型，包括组件和事件.显而易见的，如果你想做一个应用程序你需要更多地了解可视化编程.特别的是，你需要熟悉Laszlo中的各种可视化组件.例如，在你赖以开发应用的一系列部件中，你会发现有一个grid控件及一个tree控件。 　　这篇文章中我没有涉及到的是Laszlo的数据处理.它广泛地使用数据绑定及XML导航。简要地说，Laszlo使用URL检索与可视化控件绑定的XML数据.UI和数据间的关系非常紧密.Laszlo中数据对UI的影响更加充分.例如，一个绑定在有兄弟节点的XML节点上的UI组件将会被复制(必要的话).