分享
 
 
 

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

王朝other·作者佚名  2006-07-04
窄屏简体版  字體: |||超大  

这一部分将以一个用户登录认证的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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有