GWT Hostpage 模块文档

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需要全部加载到页面，其他模块才能使用

评论

2 楼 yongyuan.jiang 2007-12-27  

已经全面使用在大项目中，全新的页面开发模式，更具体使用：
http://gwts.group.iteye.com/group/blog/148162

1 楼 aibozeng 2007-12-18  

兄弟： 你这个模板开发进展如何了？