论坛首页 Web前端技术论坛

GWT Hostpage 模块文档

浏览 3888 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-11-02  
GWT

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

   发表时间:2007-12-18  
兄弟: 你这个模板开发进展如何了?
0 请登录后投票
   发表时间:2007-12-27  
已经全面使用在大项目中,全新的页面开发模式,更具体使用:
http://gwts.group.iteye.com/group/blog/148162
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics