记Dorado7学习(3)

这次来开发一个信息系统,效果如下,点击第一个按钮回显示信息,点击清空按钮则删除信息

准备工作,这里由于有前后台交互的功能,需要到spring上下文里面去注册一个bean,可以使用spring提供的@Component来标识,如果需要使用该标签,要在项目中WebContent->WEB-INF->dorado-home目录下的app-context.xml文件中增加一个配置

前台控件的添加,在com.bstek.dorado.sample.standardlesson.junior.system目录下面创建view,这里命名是Systeminfo.view.xml。在view下面添加一个Container控件(这个控件是容器控件,可在内部添加子控件,控件布局由Container的Layout决定),把该控件的layout设置为hbox(子控件依次横向排列)然后就在Container控件中添加两个button控件,第一个button的id属性为buttonGetSysInfo,caption属性为获取Dorado版本信息,第二个button按钮的id为buttonClear,caption属性为清空。

在view节点下再添加一个container控件,其layout设置为vbox(子控件依次纵向排列),再向该控件里面添加四个label控件,依次设四个label的id和text属性 选中labelProduct控件在layoutConstraint中设置padding属性为10

在view下面添加ajaxAction控件用于前后台交互 ,设置该属性id为ajaxctionGetSysInfo,service属性为systemInfoService#getSystemInfo  (调用后台服务,systemInfoService是注册到beanFactory中的beanId,getSystemInfo为方法名) executingMessage属性为正在获取Dorado版本信息系... ,successMessage为获取Dorado版本信息成功!

给button绑定Action buttonGetSysInfo控件action属性设置为ajaxactionGetSysInfo 

         准备后台服务  新建com.bstek.dorado.sample.standardlesson.service包  在该包中新建SystemInfoService.java

package com.bstek.dorado.sample.standardlesson.service;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Properties;
import org.springframework.stereotype.Component;
import com.bstek.dorado.annotation.Expose;
import com.bstek.dorado.core.DoradoAbout;
@Component//在spring中注册bean
public class SystemInfoService {
	@Expose//暴露服务 注册服务名systemInfoService在ExposedServiceManager中,服务表达式为systemInfoService#getSystemInfo
	public Properties getSystemInfo() {
		Properties info = new Properties();
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 hh:mm:ss");
		info.setProperty("product", DoradoAbout.getProductTitle());
		info.setProperty("vendor", DoradoAbout.getVendor());
		info.setProperty("version", DoradoAbout.getVersion());
		info.setProperty("time", sdf.format(new Date()));
		return info;
	}
}
给控件绑定事件  ajaxAction执行成功后返回值到前台,这时候需要对ajaxactionGetSystemInfo绑定onSuccess事件,点击该控件,双击事件里面的onSuccess 

输入下面的代码  self表示ajaxactionGetSysInfo本身  returnValue表示控件的属性字段,ajxa返回的是map对象在js中自动转换为json对象,可以通过info.product来访问map中内容    再设置buttonClear的onclick事件代码,然后保存运行项目就可以了

button2的onclick事件代码

view.set("#labelProduct.text","产品:..");
view.set("#labelVendor.text","提供商:..");
view.set("#labelVersion.text","版本:..");
view.set("#labelTime.text","当前系统时间:..");


button1的onSuccess事件代码

var info = self.get("returnValue");//把ajax调用结束后java层结果返回并赋值
view.set("#labelProduct.text","产品:"+info.product);
view.set("#labelVendor.text","提供商:"+info.vendor);
view.set("#labelVersion.text","版本:"+info.version);
view.set("#labelTime.text","当前系统时间:"+info.time);

你可能感兴趣的:(dorado)