使用ZCF编写一个前后台交互的最简单实例Hello world,功能如下:
打开页面,在页面中的输入框输入“Hello world!”如下图:
点击“发送”按钮,得到后台反馈提示:
具体实现方式:
前端UI页面代码如下:
<div style="width:100%;height:100%;text-align:center;padding-top: 200px;" >
<input id="Msg" name="Msg" size="40" />
<z:button onClick="sendMsg()" theme="flat"><img src="../Icons/icon052a4.png" />发送z:button>
输入文字之后执行的js方法sendMsg()代码如下:
function sendMsg(){
//使用框架js方法类似于$V(Name)得到ID为Msg的输入框的值
var msg = $V("Msg");
//使用new DataCollection()的方式创建一个键值对容器dc
var dc = new DataCollection();
//将得到的值msg加入到键值对容器dc中
dc.add("Msg",msg);
//向后台发送请求,HelloWorld.sendMsg为后台定义的方法别名
Server.sendRequest("HelloWorld.sendMsg",dc,function(response){
//创建一个对话框在前台展示后台反馈过来的信息response.Message
new Dialog({
title:'提示',
html:response.Message,
width:200
}).show();
});
}
java文件代码如下:
//类别名命名
@Alias("HelloWorld")
public class HelloWorldUI extends UIFacade {
//表示无需登录即可访问的方法
@Priv(login=false)
public void sendMsg(){
//后台获取前台传值方式类似于$V(Name)
String msg=$V("Msg");
//反馈给前台信息
Response.setSuccessMessage("Congratulations!
Message:"+msg+"");
}
}
|
所有评论仅代表网友意见