GWT Hostpage 模块文档

本文介绍了一种基于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

3.10
3.11

 

4       待完善问题
1.      hostpage js加载问题 :hostpage需要全部加载到页面,其他模块才能使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值