科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道基础软件上手篇-在eclipse中开发第一个openlaslzo的RIA

上手篇-在eclipse中开发第一个openlaslzo的RIA

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

这一部分将以一个用户登录认证的laszlo应用为例,介绍基本的eclipse环境下的开发过程,上次写的着急,拉了点结尾,这次补上,看来好的教程真要下番功夫啊!

作者:lwz7512 来源:CSDN 2008年3月26日

关键字: RIA 开发 Eclipse 开源

  • 评论
  • 分享微博
  • 分享邮件

这一部分将以一个用户登录认证的laszlo应用为例,介绍基本的eclipse环境下的开发过程。

第一步 建立一个laszlo工程

  1.搭建好eclipse4laslzo开发环境后,就可以开发laslzo应用了,首先打开eclipse3.1

  2.File/New/Project...打开New Project对话框,在Laszlo中选择Laszlo Project

  3.Project name: 填入一个名字,比如:firstLaslzoProject,在project contents中使用你想放置laszlo应用的路径,最好是放在OpenLaszlo Server 3.2\Server\lps-3.2下面,可以通过修改workplace来设置默认路径;

  4.LPS Options 中指定lps服务器的路径,比如:C:\Program Files\OpenLaszlo Server 3.2\Server\lps-3.2
    Finish的时候,会弹出Open Associated Perspective对话框,选择Remember my decision,yes。

第二步 建立一个测试的lzx文件
  
  1.在script Explorer面板中,打开firstLaslzoProject,在scr上右击,New/Laslzo File,File Name改为hello.lzx,finish
    在hello.lzx的编辑器里,就可以看到已经写好的canvas标签了,然后就可以在他里面写其他的标签了

  2.打开右边Paletee面板中的compoents面板,找到text组件,拖动他到canvas标签中间放手(看黑色光标指示位置),
    在<text>和</text>之间写上hello lazlo,点击hello编辑器的design选项卡,稍等几秒便可看到预览效果

  3.再点击source选项卡,切换到源码模式,将text标签中原来的hello,改为“你好”,再点击design选项卡,你会发现不能正确预览了,提示No preview available.
    这个是由于中文字符的编码eclpse当作非法代码了

  4.保存hello.lzx文件,启动openlaszlo的服务器(双击C:\Program Files\OpenLaszlo Server 3.2下的Start OpenLaszlo Server),
    在浏览器中输入http://localhost:8080/lps-3.2/LaslzoProject/lwz_laszlo_pro/src/hello.lzx?lzt=html
    回车,等待片刻,看看是不是能正确显示中文了?
 
  5.eclipse的预览功能我向来是不用的,效率低,还不如直接将源文件放到服务器目录下在浏览器中看结果呢

第三步 开始编写laszlo登录认证界面

  1.编写主界面及交互脚本

   源码如下:
  ----------------------------------------------
  login.lzx(developed by lwz7512)
  ----------------------------------------------
  <?xml version="1.0" encoding="UTF-8" ?>
<canvas fontsize="12" debug="true">
  <debug x="0" y="400" width="300" height="200"/>   
  <splash>
     <view name="loader" resource="resources/progressbar.swf" x="400" y="200"/>
  </splash>
  <dataset name="validusers" src="resources/usersdata.xml" type="http" request="false"></dataset>
  <datapointer name="userspt" xpath="validusers:/*">
    <method event="ondata"><![CDATA[
       Debug.write("userdata loaded!");      
    ]]></method>
  </datapointer>
  <method event="oninit"><![CDATA[
    validusers.doRequest();
  ]]></method>
  <window name="mainface" title="欢迎用户" x="300" y="50" width="500" height="300" visible="false">
    <text name="userloggedin" resize="true" text="Guest" align="center" valign="middle"></text>
  </window>
  <window name="login" title="请输入用户名和密码" x="400" y="200" width="250" height="50"  closeable="true" >
   
    <text name="usernametag" x="30" y="20" text="用户名:"/>
    <edittext name="usernamevalue" x="80" y="20" width="100" height="22"></edittext>
    <text name="passwordtag" x="30" y="44" text="密码:"/>
    <edittext name="passwordvalue" x="80" y="44" width="100" height="22" password="true"></edittext>
    <text name="loginwarning" x="10" y="78" text="对不起,您输入的用户名和密码不正确" visible="false"></text>
    <button name="send" text="登录" x="80" y="100" height="22" width="80" isdefault="true">
      <method event="onclick"><![CDATA[
        var isvaliduser = checkuser();
        if(isvaliduser){
           canvas.mainface.userloggedin.setText(parent.usernamevalue.getText());
           canvas.mainface.setVisible(true);
           parent.close();
                   
        }else{
           parent.loginwarning.setVisible(true);
        }
      ]]></method>
      <method name="checkuser"><![CDATA[
        var checkresult = false;
        var usename = parent.usernamevalue.getText();
        var password = parent.passwordvalue.getText();
        var valideusers = validusers.childNodes[0].childNodes;
        for(var i=0;i<valideusers.length;i++){
           var eachusername = valideusers[i].getAttr('name');
           var eachuserpswd = valideusers[i].getAttr('pswd');
           if(eachusername == usename && eachuserpswd == password){
               checkresult = true;
           } 
        }
        return checkresult;
      ]]></method>
    </button>
    <button name="cancel" text="取消" x="80" y="126" height="22" width="80" focusable="true">
       <method event="onclick"><![CDATA[
           parent.close();
       ]]></method>
    </button>
  </window>
</canvas>
---------------------------------------------
this the end of login.lzx
--------------------------------------------

 2.编写用户信息列表

----------------------------------
usersdata.xml
---------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<users>
    <user name="lwz7512" pswd="12345"/>
    <user name="rabbit" pswd="54321"/>
    <user name="openria" pswd="root"/>
</users>
--------------------------------
this the end of usersdata.xml
---------------------------------------

 3.让程序RIA起来 

   富客户应用的魅力就在于给客户全新的体验,现在就给我们这个应用修饰一下:
  
   *** 用样式修饰界面
   
   首先要在canvas里面定义要使用的样式,然后就可以在窗口中使用了
   比如:<greenstyle name="greencolors" bgcolor="white"/>
  <goldstyle name="goldcolors" bgcolor="white"/>
  <silverstyle name="silvercolors"/>
  <bluestyle name="bluecolors" bgcolor="white"/>
   在窗口中这样使用:style="greencolors" 加个属性就可以了。
  
   *** 增加动画效果

   使用animate函数,来让窗口有动感

   登录窗口初始化时,让它以高度和垂直位置活动:
   <method event="oninit"><![CDATA[
       this.animate('height',200,500,false);
       this.animate('y',100,500,false);
    ]]></method>
   
   登录认证通过,让主窗口淡出(需要修改主窗口初始不透明度为0,而不是不显示)
  
   canvas.mainface.animate('opacity',1,500,false);

这样就做完了,来体验一下吧,

 

我们的登陆场面看起来是不是很酷,输入用户名,TAB键,然后输入密码,如果输入的是用户列表中的用户,就可以看到主界面淡出,如果不是,就会提示“对不起,您输入的用户名和密码不正确”,都不用去后台验证,多爽!

总结:

这部分,我们已经学习了laszlo应用的布局、组件使用、交互脚本的编写
这里还隐含着我的编程习惯:

  *** 都使用局部变量name来标示实例
  *** 路径最短原则来引用实例
  *** dataset配合datapointer使用

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章