OpenLaszlo在Resin上的部署以及开发

早就关注过OpenLaszlo这个开源的RIA的东东了，感觉做出的界面还是比较美观的，但由于时间原因一直都没有亲自尝试使用，正好前几天有个小的需求，所以就拿来进行一下实验，看看效果如何。

由于公司用的服务器都是apache+resin的，在网上找了很久，也没有找到关于openlaszlo与resin整合的资料。不过好在J2EE标准针对每个J2EE容器应该还是差别不大的。于是下载完了完整的for unix的版本以后，直接把下边的WEB-INF和lps目录copy出来，在resin里面建立一个webapp，将这两个文件夹复制进去。 然后启动resin。

写一个最简单的lzx文件，内容如下：

<canvas>
<text>Hello,world!</text>
</canvas>

直接在浏览器浏览http://localhost:8080/laszlo/main.lzx

这时如果浏览器出现了一个空白的flash，并且左上角有"Hello,world"的字，说明配置已经成功了。

如果提示错误，就得查看一下自己的配置了，如果是一个全新的Resin问题可能不会很大，但如果是已经跑了应用的resin，lib下面有一些常用的jar，就可能会出问题了，有时会出现xml解析器相关的错误，这有可能是xercesImpl这个包活着是Jdom的版本过低造成的，换上一个最新版本应该就会OK。

再写一个带窗口的程序：

<canvas>
<text>Hello,world!</text>
<window x="10" y="10" width="400" height="300" title="测试" font="宋体" fontsize="14">
</window>
</canvas>

再浏览一下，很可能会出现如下的错误：

Compilation Errors

base/basecomponent.lzx:50:1: Syntax error: the token "{" was not expected at this position.

不知道是否还是xml解析器的问题，打开base/basecomponent.lzx文件，找到提示的第50行，发现这里的属性值中间有换行符，所以可能解析出错了。将属性的值中间的换行删掉，再刷新页面，又发现另外一个地方一样的这样的提示，再找到修改，就这样一直找一直改，提示哪个文件就修改哪个文件，最后终于出现了期待已久的页面。不过这样的工作量实在很大，而且解决的不彻底，但目前我还未找到有效的办法解决，只好用这种笨方法暂时解决一下了，有谁知道如何解决这个问题的就拜托指点一下了。

经过千辛万苦，还好终于把环境和程序都调试通过了，感觉界面很清爽，而且比普通的html页面使用起来也方便，数据的请求和提交也不用再刷新页面了。这样比普通的ajax效率更高，而且支持更好，用IE和firefox都测试OK。事实上只要是支持Flash的浏览器应该都会支持的不错。

另外，运行了一段时间以后，可能会出现out of memory的错误，这是由于分配给jvm的内存不够了，可以通过类似./httpd.sh -Xms128m -Xmx256m 的方式启动resin，这样基本上就会解决。

另外，中文显示的问题，如果将lzx文件保存成UTF-8格式显示的中文就没有问题了，否则中文会是乱码的。

研究了两天的时间，大概也了解了openlaszlo的运行方式、数据绑定和更新等一系列的东东，感觉这个东西还真的是比较强大。只是目前国内似乎做这方面开发的非常少，资料也不怎么好找，所以遇到问题只好去查english的帮助文档了。不知以后是否会有更多的人来支持这个强大开源的RIA解决方案。

最后献上做的那个小应用的源码：

很简单，首先登录，然后根据手机号或者用户ID查询用户信息：

<canvas>

 <window name="loginWin" width="300" height="230" x="350" y="700" font="宋体" fontsize="14" title="登录窗口">
  <animator attribute="y" to="180" duration="1500"/>
  <method event="oninit">
   
  </method>
  <view id="msgView" x="70" y="15">
   <text id="message">输入用户名密码登录</text>
  </view>
  <view x="50" y="50">
   <simplelayout axis="y" spacing="10"/>
   <view>
    <simplelayout axis="x" spacing="10"/>
    <text>用户名</text>
    <edittext id="username"></edittext>
   </view>
   <view>
    <simplelayout axis="x" spacing="10"/>
    <text>密　码</text>
    <edittext id="password"></edittext>
   </view>
   <view>
    <simplelayout axis="x" spacing="30"/>
    <button isdefault="true" onclick="check()">登　录    
    </button>
    <button>取　消
     <method event="onclick">
      canvas.loginWin.close();
     </method>
    </button>
   </view>
  </view>
 </window>
 <script>
  function check(){
   var ds = canvas.datasets.login;
   var p = new LzParam();

   p.addValue("u",username.getText());
   p.addValue("p",password.getText());
   ds.setQueryString(p);
   ds.doRequest();
   Debug.write("login..." + username.text + " " + password.text);
  }
 </script>
 <dataset type="http" name="login" querystring="u=xiaowei&amp;p=xiaowei" src="login.jsp" request="false"/>
 <datapointer xpath="login:/result">
  <handler name="ondata">
  <![CDATA[
   
   Debug.write("recv data...");
   var result = this.xpathQuery("*/text()");
   Debug.write("result=" + result);
   if(result != "OK")
   {
    msgView.setX(100);
    message.setText(result);      
   }else
   {  
    msgView.setX(100);
    message.setText("<font color=\"#00FF00\">登录成功！</font>");
    canvas.loginWin.animate("y",900,1500,false);
    canvas.dataWin.setVisible(true);
    canvas.dataWin.myAnimator.doStart();
   }
  ]]>
  </handler>
  <handler name="onerror">
  <![CDATA[   
   Debug.write("on error");
  ]]>
  </handler>
 </datapointer>
 

 <dataset name="user" src="query.jsp" request="true" type="http"/>

 <window name="dataWin" x="200" y="900" width="500" height="400" title="查询邦号" font="宋体" fontsize="14">
  <animator name="myAnimator" attribute="y" to="120" duration="1500" start="false"/>
  <method event="oninit">
   this.setVisible(false);
  </method>
  <view x="10" y="20" width="500" height="50">
   <simplelayout axis="x" spacing="10"/>
   <text>查询方式</text>
   <combobox id="q_type" editable="false" font="宋体" fontsize="14">
    <textlistitem font="宋体" fontsize="14" text="userid"/>
    <textlistitem font="宋体" fontsize="14" text="mobile"/>
   </combobox>
   <text>输入号码</text>
   <edittext id="number" width="120" height="22"></edittext>
   <button isdefault="true">查　询
    <method event="onclick">
     <![CDATA[
      var p = new LzParam();
      Debug.write(q_type.getValue());
      p.addValue("type",q_type.getValue());
      p.addValue("value",number.getText());
      user.setQueryString(p);
      user.doRequest();
     ]]>
    </method>
   </button>
  </view>
  <view x="10" y="70" width="500" height="50">
   <simplelayout axis="x" spacing="10"/>          
   <grid datapath="user:/users/">
    <gridtext datapath="@userid" sortable="true" sortpath="@userid" editable="false" text="用户邦号"/>
    <gridtext datapath="@passwd" sortable="true" sortpath="@passwd" editable="false" text="用户密码"/>
    <gridtext datapath="@name" sortable="true" sortpath="@name" editable="false" text="昵称"/>
    <gridtext datapath="@mob_num" sortable="true" sortpath="@mob_num" editable="false" text="手机号码"/>
    <gridtext datapath="@bind" sortable="true" sortpath="@bind" editable="false" text="绑定情况"/>
   </grid>
   
  </view>

 </window>

</canvas>