记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);