使用ZCF编写一个前后台交互的最简单实例Hello world,功能如下:

 

  打开页面,在页面中的输入框输入“Hello world!”如下图:

       A)G$]N`BTZPCNUR0I6~PP{5

 

  点击“发送”按钮,得到后台反馈提示:

        E1(YFRHA5T1]C`$433}TT6A

 

  具体实现方式:

  前端UI页面代码如下:

  <div style="width:100%;height:100%;text-align:center;padding-top200px;" >

  <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+"");

     }

  }