1 简介
Gwt将不同模块页面生成到相关文件及页面,使用IFrame方式将各个模块组合在在HTML页面中。
Hostpage尝试在页面中创建模块、调用模块服务、销毁模块,从而页面模块真正组件化。
2 功能、场景流程
组件注册与构造流程
a.注册组件构造工厂
//a1.查找组件构造工厂 //hostpage已封装
b.创建组件
c.注册组件
d.查找组件
e.移除组件
Hostpage事件订阅流程
a. 订阅Hostpage事件
b. 触发Hostpage事件
3 核心技术、Demo
3.1 组件获得hostpage服务
HostpageServiceFactory.getHostPageService()
3.2 创建构造工厂
class MsgServiceFactory implements IComponentFactory{
public void create(String compType, String compId, final Element
element,
String[] args) {
if(!compTypeName.equals(compType))return;
MsgComponent component = new MsgComponent(args);//创建MsgComponent组件
ModuleRootPanel container = ModuleRootPanel.get(element);
container.add(component);//获得panel并add组件
exporter exporter = (exporter) GWT.create(exporter.class);
HostpageServiceFactory.getHostPageService().registerComponent(compType,
compId, exporter.doExport(component));//将组件导出,并注册到hostpage
}
}
3.3 注册构造工厂
componentAFactory factory = new componentAFactory();
hostpageService.registerComponentFactory("moduleName",
IComponentFactory factory);
3.4 创建组件
HostpageServiceFactory.getHostPageService().createComponent(
"compType", "componentId", element, args);
// compType: 模块名
//componentId : 组件id
//element : 要添加的element,组件添加到此element内
//args : 组件构造String[]参数
3.5 查找组件
HostpageServiceFactory.getHostPageService().findComponent(compType,
compId);
//compType : 模块名
//compId : 组件id
3.6 删除组件
HostpageServiceFactory.getHostPageService()
.removeComponent(compType,
compId );
//compType : 模块名
//compId : 组件id
3.7 订阅hostpage事件
hostpage.subscribe("com.macaufly.gwt.loginuser.LoginUser",
"LoginUserService","LOGIN",hostpageListener);
//参数1 : moduleName
//参数 2 :componentId
//参数 3 : 事件类型,如LOGIN事件
//参数 4 : 事件 new HostpageListner
注意:前三参数为可选参数,如下:
1.以上例子为LoginUser模块、id为LoginUserService、事件类型为LOGIN时触发hostpageListener
事件。
2.subscribe("com.macaufly.gwt.loginuser.LoginUser","LoginUserService",null,hostpageListner)
Arg3为null,此方法为LoginUser模块、id为LoginUserService的全部事件,将触发
hostpageListener
3.subscribe("com.macaufly.gwt.loginuser.LoginUser",null,"
LOGIN",hostpageListner)
Arg2为null,此方法为任意LoginUser模块、事件类型为LOGIN的全部事件,将触发hostpageListener
4.subscribe(null,"LoginUserService"," LOGIN",hostpageListner)
Arg1为null,此方法为任意模块、id名为LoginUserService、事件类型为LOGIN的全部事件,将触发
hostpageListener
3.8 触发hostpage事件
HostpageServiceFactory.getHostPageService().fireEvent(GWT.getModuleName(),compId,
"LOGIN","user has been login", exporter.doExport(user));
//GWT.getModuleName : 模块名
//compId : 组件id
//LOGIN : 事件种类
//user has been login : 触发事件的消息
//exporter.doExport(user) : 将复杂数据导出成JavaScriptObject传出
3.9 HostpageListener 如何编写
HostpageListener hostpageListener = new HostpageListener() {
public void onEvent(String componentType, String componentId,
String category, String message, JavaScriptObject detail)
{
if (category.equals("LOGIN")) {
Window.alert("登录事件触发");
}
else if (category.equals("LOGOUT")) {
Window.alert("退出事件触发");
}
}
};
//category : 事件类型,如LOGIN,LOGOUT
//detail : 复杂的对象,JavaScriptObject,需要Exporter import
3.10
3.11
4 待完善问题
1. hostpage js加载问题 :hostpage需要全部加载到页面,其他模块才能使用