这一部分将以一个用户登录认证的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);
这样就做完了,来体验一下吧,在浏览器中输入:
http://localhost:8080/lps-3.2/LaslzoProject/lwz_laszlo_pro/src/login.lzx?lzt=html
我们的登陆场面看起来是不是很酷,输入用户名,TAB键,然后输入密码,如果输入的是用户列表中的用户,就可以看到主界面淡出,如果不是,就会提示“对不起,您输入的用户名和密码不正确”,都不用去后台验证,多爽!
总结:
这部分,我们已经学习了laszlo应用的布局、组件使用、交互脚本的编写
这里还隐含着我的编程习惯:
*** 都使用局部变量name来标示实例
*** 路径最短原则来引用实例
*** dataset配合datapointer使用
好了,这一篇就写到这里了,下次再续。
这是做好的截图:


需要全部源码的给我发email:rabbit69@126.com
分享到:
相关推荐
UI框架对canvas进行分层 1.base为基础层,放基础界面,主游戏菜单、操作杆、小地图等; 2.main为主业务层,放全部业务界面,背包、榜单等 3.toast层,放吐司 4.loading层,放loading界面 使用方式: 1.在场景中挂上UIManager脚本,并在游戏启动时进行初始化,传入资源加载器 2.显示界面直接UIManager.ShowPanel<T>(),不需要其他操作 3.隐藏界面UIManager.ClosePanel()
IMG_1399.PNG
【毕业设计】java-springboot-vue教师工作量管理系统实现源码(完整前后端+mysql+说明文档+LunW).zip
python教程学习
【深圳来觅数据信息科技-2025研报】减产提价!多重因素影响,国内存储芯片逐步崛起.pdf
python学习资源
本协力服装厂服装生产管理系统设计目标是实现协力服装厂服装生产的信息化管理,提高管理效率,使得协力服装厂服装生产管理作规范化、科学化、高效化。 本文重点阐述了协力服装厂服装生产管理系统的开发过程,以实际运用为开发背景,基于Springboot框架,运用了Java编程语言和MYSQL数据库进行开发,充分保证系统的安全性和稳定性。本系统界面良好,操作简单方便,通过系统概述、系统分析、系统设计、数据库设计、系统测试这几个部分,详细的说明了系统的开发过程,最后并对整个开发过程进行了总结,实现了服装生产相关信息管理的重要功能。 本协力服装厂服装生产管理系统运行效果稳定,操作方便、快捷,界面友好,是一个功能全面、实用性好、安全性高,并具有良好的可扩展性、可维护性的服装生产管理平台。 关键词:服装生产管理,Java编程语言,Springboot框架,MYSQL数据库
网络编程,资源和大家上学的时候的差不多,tcp
vmware虚拟机安装教程
【毕业设计】java-springboot-vue教师人事档案管理系统实现源码(完整前后端+mysql+说明文档+LunW).zip
【毕业设计-java】springboot-vue会员制医疗预约服务管理系统实现源码(完整前后端+mysql+说明文档+LunW).zip
比赛前开源题目
UniApp开发一个简单的记事本应用文字教程
内容概要:本文档详细介绍了C#编程语言的基础知识和高级特性的相关内容。首先阐述了C#语言的特点和应用场景,涵盖其简单、安全及面向对象三大优点。接着讲述了准备工作的关键步骤,重点提及了开发工具Visual Studio的安装以及推荐的经典书籍和学习资源。文档深入解析了C#基础语法的各个要素,包括数据类型、变量与常量、运算符、控制结构,并结合代码实例强化理解。面向对象编程部分,文档讲解了类与对象的概念,以及继承、多态和封装的原则,并附带具体示例说明,以便读者更容易理解面向对象的理念。此外,文档对比了.NET Framework和.NET Core两大框架的区别和优势,并介绍了一些常用的类库,使开发者在不同平台环境下都可以顺利开发高质量的软件。最后一章提供了一些建议和资源推荐,如参与开源项目、加入技术社区等,为学习者的成长之路指明方向。 适合人群:希望初次接触C#编程的人士、希望通过系统学习达到掌握C#的初级开发者,亦适用于有一定C#经验,想巩固和提升面向对象思想及相关技术的专业技术人员。 使用场景及目标:该文章可以帮助初学者建立完整的C#编程基础框架,快速上手机编程,并引导他们深入了解面向
仅供资料参考,YeeCOM移讯通DTU连接OneNet平台MQTT说明使用手册。
python学习一些项目和资源
python学习资源
【毕业设计-java】springboot-vue家具销售电商平台实现源码(完整前后端+mysql+说明文档+LunW).zip
python学习教程
【毕业设计-java】springboot-vue健身房私人健身与教练预约管理系统实现源码(完整前后端+mysql+说明文档+LunW).zip