GWT Hostpage 模块文档

最新推荐文章于 2021-05-31 09:31:48 发布

最新推荐文章于 2021-05-31 09:31:48 发布 · 148 阅读

文章标签：

#GWT #Blog

本文介绍了一种基于Gwt的模块化开发方法，通过组件化的形式实现页面元素的动态加载与管理。主要内容包括组件注册与构造流程、事件订阅流程等核心技术，并提供了详细的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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