WEB开发网
开发学院WEB开发Jsp 探索研究Laszlo的类、属性及事件(图) 阅读

探索研究Laszlo的类、属性及事件(图)

 2008-01-05 10:35:02 来源:WEB开发网   
核心提示:Laszlo,一个大量应用于interent应用程序的xml平台,最近成了开源代码.这个平台结构与XUL和XAML十分相似,探索研究Laszlo的类、属性及事件(图),都是在浏览器中完成设计.Laszlo使用Macromedia Flash作为它的执行平台,以此获得卓越的兼容性.Laszlo应用程序由LZX写成.LZX

  Laszlo,一个大量应用于interent应用程序的xml平台,最近成了开源代码.这个平台结构与XUL和XAML十分相似,都是在浏览器中完成设计.Laszlo使用Macromedia Flash作为它的执行平台,以此获得卓越的兼容性.
  
  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相同.我把它叫做你的“开发便笺”.这是应用程序开发所必需的.初始设置答应你写一个调试器声明,将它们在调试器窗口显示.这个设置还答应在调试器外有足够的空间以存储视觉控制器.
  
 探索研究Laszlo的类、属性及事件(图)(图一)

  
图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中,每一次动作都在<canvas>标记符中发生.如此例所示,一个LZX类在<canvas>标记符中定义.这个编码将一个类定名为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是如何实例化为下一个节点或<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 >
  Show Alert</button></canvas>
  
  在上面的编码中,我创造了一个canvas的子类alert组件的实例,声明了alert的大小,还命名为myalert,并赋与其内容:"hi - initial text.".
  
  我还写了一个showAlert方法来显示对话框.此方法有一个参数叫做text.方法主体访问模式对话框,将其属性text传递至displayText.然后,此方法在模式对话框上调用open方法.
  
  我还制作了一个按钮叫做showAlert().当showAlert按钮被按下,你将会看到一个关于你文本的警告.由于这个按钮是canvas的子类,没有位置设置,它将在屏幕的左上角显示.可以使用下面的编码改变按钮位置,使它出现调试窗口的下面:
  
  <button x="500" y="310"
  >Show Alert</button>
  
  图2中观察结果.
  
 探索研究Laszlo的类、属性及事件(图)(图二)

  
图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 >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><

Tags:探索 研究 Laszlo

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接