java教程 gwt项目开发的经验

在做一个gwt项目的开发，我会把在项目开发中遇到的问题以及解决方法记录下来（有很多是同事，也整理放在其中了），以供同道中人参考，少走不该走的路，也希望与同仁交流。

12，gwt中使用float样式实现
      css的float样式在ie与firefox中对应的dom属性名不同，所以不能直接用如下的语句
               DOM.setStyleAttribute(elem,"float", "left");
      可以这样使用（在ie与firefox都可以）

public   static   native   void  setStyleAttributeEx(Element elem, String jsStyle, String value)
     /**/ /* -{
         if(jsStyle=="float" || jsStyle == "styleFloat" || jsStyle =="cssFloat")
         {
         jsStyle = (elem.style.styleFloat || elem.style.styleFloat=="")  ? "styleFloat":"cssFloat";
         }
         elem.style[jsStyle]=value;
     }- */ ;

> 11，文件下载（downloat） 计划中

> 10，阻止事件传到父对象

> 9，文件上传客户端（隐藏表单）


8，不换行：表格字符、多种widget的组合

// div中的文本不换行
        Label label  =   new  Label( " div中的文本不换行 " );
         // css       white-space: nowrap;
         // gwt实现：
        DOM.setStyleAttribute(label.getElement(),  " white-space " ,  " nowrap " );

         // table中的文本不换行
         // 先把文件放入一个div中，再放到表格中，或者设置table的td的css样式

         // 不同类型的widget在div中不换行
         // css float：left；clear：none
         // float：left 元素浮于左边；clear：none 元素两边都可以有浮动对象（如果不允许就会直接换行）
         // gwt实现
        FlowPanel div  =   new  FlowPanel(); // 实际上flowpanel就是一个div
        Label one  =   new  Label( " one " );
        DOM.setStyleAttribute(one.getElement(),  " clear " ,  " none " );
         // 注：原gwt不支持float，所以这里用扩展的
        DomEx.setStyleAttributeEx(one.getElement(),  " float " ,  " left " );
        Image image  =   new  Image();
        DOM.setStyleAttribute(image.getElement(),  " clear " ,  " none " );
        DomEx.setStyleAttributeEx(image.getElement(),  " float " ,  " left " );

        div.add(one);
        div.add(image);

 

7，css的（边框）margin、border、padding、width、height与dom对象的属性clientWidth、offsetWidth、offsetHeight等的关系及gwt的获取与设置

public   static   native   int  getClientHeight()  /**/ /* -{
    if ($wnd.innerHeight)
      return $wnd.innerHeight;
    return $doc.body.clientHeight;
  }- */ ;
改为：
public   static   native   int  getClientHeight()  /**/ /* -{
    if ($wnd.innerHeight)
      return $wnd.innerHeight;
    if($doc.compatMode=='CSS1Compat') return $doc.documentElement.clientHeight;//关键
    return $doc.body.clientHeight;
  }- */ ;

         宽度与此相似
       二，块（容器）的“边框”与高度（参考：http://bbs.blueidea.com/thread-2692909-1-1.html 的为什么IE6下容器的宽度和FF解释不同 ）
         不同的浏览器，就是相同的浏览器在不同的模式下的解释是不一样，没有找到一个比较好的计算他值的关系，所以在写xhtml/html时一定要注意，自己网页的规范与标准，如果你的页头有这样的信息

<? xml version="1.0" encoding="utf-8" ?>
<! DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  lang ="zh-CN" >  
< head >
< meta  http-equiv ="Content-Type"  content ="application/xhtml+xml; charset=utf-8"   />
< title > 无标题文档 </ title >
</ head >
< body >
< div  style ="height:100px; width:150px; border:10px solid red;margin:7px; padding:13px;" > 标准模式 </ div >
</ body >
</ html >

，在ie7与firefox2下有如下的结果：
         offsetHeight：padding-top+padding-bottom+boder-top-width+border-bottom+height
         clientHeight：offsetHeight - (border-top-width +border-bottom-width)

    对于行元素的处理只能一个一个的试了，我没有找到通用的公式。！！！


6，学习开发资源
      要做好gwt程序，客户端方面，有这些知识比较好：java、javascript、css、html（排列有先后），至于服务方面的我也说不清楚
      官方主站：http://code.google.com/webtoolkit/
      官方开源站：http://code.google.com/hosting/  打开网页在里面输入gwt，会有很多相关的开源与代码
     开发工具或库
         gwt 官方网站上第三方工具： http://code.google.com/webtoolkit/thirdparty.html
               gwt designer ：可视化的eclipse插件开发工具，易上手，入门比较好
               gwt widget library ：开源的gwt扩展库，
               wireflexsoft vistafei ：是个可视化的eclipse插件开发工具，易上手，没有gwt designer做的好用
         googlipse ：eclipse插件，无可视化，功能少一些，不过免费的
         firebug :firefox的插件，能非常方便的查看DOM、调试javascript、支持不同浏览器的控制台，支持动态修改。在firefox下只要这一个插件，开发就顺手了，ie下要多介绍几个，不过都不如firebug
         DevToolBar :ie的插件，微软官方提供
         WebDevHelper ：ie的插件要.net framework2.0 ，软件工程师提供
         Ie WebDeveloper : 功能也比较多，好像要收费

         开源库或参考（排名不分先后）

         gwtwindowmanager：http://code.google.com/p/gwtwindowmanager/
         gwtwidgetlist：http://gwtpowered.dabbledb.com/publish/gwtwidgetlist/2ddeb373-1746-4642-836d-931fa7a2778b/gwtwidgetlist.html
         http://www.brandonandkim.com/gwtblog/
         基于gwt的一个开源项目：http://sourceforge.net/projects/pdune
         gwt的组件库：http://gwt.components.googlepages.com/
         http://jaxzin.com/2006/09/release-of-my-google-web-toolkit.html
         http://code.google.com/p/rocket-gwt/
         http://www.vspu.ru/is/sites/gwt-jds/index.htm
         http://www.gwtwindowmanager.org/
         http://simile.mit.edu/timeline/
。。。。。


5，给gwt的ui组件增加事件

   一，用gwt的事件机制实现，以按钮为例，增加鼠标事件

package  com.mycompany.project.client;
import  com.google.gwt.user.client.DOM;
import  com.google.gwt.user.client.Event;
import  com.google.gwt.user.client.ui.Button;
import  com.google.gwt.user.client.ui.MouseListener;
import  com.google.gwt.user.client.ui.MouseListenerCollection;

public   class  ButtonEx  extends  Button {
     private  MouseListenerCollection mouseListeners;
     public  ButtonEx() {
         super ();
        sinkEvents(Event.MOUSEEVENTS);     // 事件类型，具体参考gwt的Event类
    }
     public   void  addMouseListener(MouseListener listener)
    {
         if (mouseListeners  ==   null )
            mouseListeners  =   new  MouseListenerCollection();
        mouseListeners.add(listener);
    }
     public   void  removeMouseListener(MouseListener listener)
    {
         if (mouseListeners  !=   null )
            mouseListeners.remove(listener);
    }
     public   void  onBrowserEvent(Event event)
    {
         super .onBrowserEvent(event);     // 调用父类的，如果想取消父类的事件也可以不用调用
         switch  (DOM.eventGetType(event))
        {
         case  Event.ONMOUSEDOWN:
         case  Event.ONMOUSEUP:     
         case  Event.ONMOUSEMOVE:
         case  Event.ONMOUSEOVER:
         case  Event.ONMOUSEOUT:
             if (mouseListeners  !=   null )
                mouseListeners.fireMouseEvent( this , event);
             break ;
        }
         // super.onBrowserEvent(event); 这一句也可以放在这里调用，这样的话，就先触发我们增加的事件
    }
}

 

   使用代码

 

package  com.mycompany.project.client;
import  com.google.gwt.core.client.EntryPoint;
import  com.google.gwt.user.client.Window;
import  com.google.gwt.user.client.ui.MouseListener;
import  com.google.gwt.user.client.ui.RootPanel;
import  com.google.gwt.user.client.ui.Widget;
public   class  ExpMouseOver  implements  EntryPoint {
     public   void  onModuleLoad() {
        ButtonEx button  =   new  ButtonEx();
        button.addMouseListener( new  MouseListener(){
             public   void  onMouseDown(Widget sender,  int  x,  int  y) {
                Window.alert( " onMouseDown " );
            }
             public   void  onMouseEnter(Widget sender) {
                Window.alert( " onMouseEnter " );
            }
             public   void  onMouseLeave(Widget sender) {
                Window.alert( " onMouseLeave " );
            }
             public   void  onMouseMove(Widget sender,  int  x,  int  y) {
                Window.alert( " onMouseMove " );
            }
             public   void  onMouseUp(Widget sender,  int  x,  int  y) {
                Window.alert( " onMouseUp " );
            }
        });
        RootPanel.get().add(button);
    }
}

在“4，按钮的鼠标进出样式”中的实现也可以在事件的响应中修改按钮的css。

    二，用jsni实现，以TextBox的双击事件为例

 

package  com.mycompany.project.client;
import  java.util.Iterator;
import  java.util.Vector;
import  com.google.gwt.user.client.Element;
import  com.google.gwt.user.client.ui.TextBox;
import  com.google.gwt.user.client.ui.Widget;
public   class  TextBoxEx  extends  TextBox {
     private  DblClickListenerCollection dblClickListener;
     private   void  onDblClick()
    {
         this .dblClickListener.fireDbLClick( this );
    }
     private   native   void  addJsniEvent(Element elem) /* -{
        var old = elem.ondblclick;//注意这里是小写啊
        var jsthis = this;
        elem.οndblclick=function(){
            jsthis.@com.mycompany.project.client.TextBoxEx::onDblClick()();//注意这里是两对括号啊
            if(old)old();
        };
    }- */ ;
     public   void  addDblClickListener(DblClickListener listener)
    {
         if ( this .dblClickListener  ==   null )
        {
             this .dblClickListener  =   new  DblClickListenerCollection();
            addJsniEvent( this .getElement());
        }
         this .dblClickListener.add(listener);
    }
     public   void  removeDblClickListener(DblClickListener listener)
    {
         if ( this .dblClickListener  !=   null )
             this .dblClickListener.remove(listener);
    }
     private   static   class  DblClickListenerCollection  extends  Vector
    {
         public   void  fireDbLClick(Widget sender) {
             for  (Iterator it  =  iterator(); it.hasNext();) {
                DblClickListener listener  =  (DblClickListener) it.next();
              listener.onDblClick(sender);
            }
          }
    }
     public   static   interface  DblClickListener{
         public   void  onDblClick(Widget sender);
    }
}

使用代码

 

package  com.mycompany.project.client;
import  com.google.gwt.core.client.EntryPoint;
import  com.google.gwt.user.client.Window;
import  com.google.gwt.user.client.ui.RootPanel;
import  com.google.gwt.user.client.ui.Widget;
import  com.mycompany.project.client.TextBoxEx.DblClickListener;
public   class  ExpMouseOver  implements  EntryPoint {
     private  TextBoxEx text;
     public   void  onModuleLoad() {
        text  =   new  TextBoxEx();
        text.addDblClickListener( new  DblClickListener(){
             public   void  onDblClick(Widget sender) {
                Window.alert( " DblClick " );
            }
        });
        RootPanel.get().add(text);
    }
}

 

   
4，按钮的鼠标进出样式
    在css中没提供直接设置按钮的鼠标进出样式，这里用鼠标事件来实现，在gwt中可以写一个Button的子类，并为其增加鼠标事件，也可以直接用脚本来实现（jsni），综合比较了一上，在这里直接用脚本比较好
    一，脚本实现，代码如下

public   class  ExpMouseOver  implements  EntryPoint {
     private   boolean  first  =   false ;
     public   void  onModuleLoad() {
        Button button  =   new  Button();
        DOM.setStyleAttribute(button.getElement(),  " borderColor " ,  " blue " );
        setMouseOverBorderColor(button.getElement(),  " red " );
        button.setText( " 测试 " );
        RootPanel.get().add(button);
    }
     public   native   void  setMouseOverBorderColor(Element elem,String color) /* -{
        if(this.@com.mycompany.project.client.ExpMouseOver::first) return; //防止多次调用
        var oldColor = elem.style["borderColor"];
        var old = elem.onmouseover;    //取出原事件响应函数（鼠标进入）
        this.@com.mycompany.project.client.ExpMouseOver::first = true;
        elem.onmouseover = function(){
            elem.style["borderColor"] = color;
            if(old) old(); //如果原事件响应函数存在，就运行它
        };
  
        var oldOut = elem.onmouseout; //（鼠标移出）
        elem.onmouseout = function(){
            elem.style["borderColor"] = oldColor;//还原颜色
            if(oldOut) oldOut();
        };
    }- */ ;
}

    这里说明一下，这个函数只允许调用一次，有待改进啊！
    如下的是改进版的程序，可以多次调用，这里把颜色的值改成一个成员了

package  com.mycompany.project.client;
import  com.google.gwt.core.client.EntryPoint;
import  com.google.gwt.user.client.DOM;
import  com.google.gwt.user.client.Element;
import  com.google.gwt.user.client.ui.Button;
import  com.google.gwt.user.client.ui.RootPanel;
public   class  ExpMouseOver  implements  EntryPoint {
     private   boolean  first  =   false ;
     private  String color;
     private  Button button;
     public   void  onModuleLoad() {
        button  =   new  Button();
        DOM.setStyleAttribute(button.getElement(),  " borderColor " ,  " blue " );
        setMouseOverBorderColor(button.getElement(),  " red " );
        setMouseOverBorderColor(button.getElement(),  " green " );
        button.setText( " 测试 " );
        RootPanel.get().add(button);
    }
     public   native   void  setMouseOverBorderColor(Element elem,String color) /* -{
        var jsthis = this;
        jsthis.@com.mycompany.project.client.ExpMouseOver::color = color;
        if(jsthis.@com.mycompany.project.client.ExpMouseOver::first) return; //防止多次调用
        var oldColor = elem.style["borderColor"];
        var old = elem.onmouseover;    //取出原事件响应函数（鼠标进入）
        jsthis.@com.mycompany.project.client.ExpMouseOver::first = true;
        elem.onmouseover = function(){
            elem.style["borderColor"] = jsthis.@com.mycompany.project.client.ExpMouseOver::color;
            if(old) old(); //如果原事件响应函数存在，就运行它
        };
        
        var oldOut = elem.onmouseout; //（鼠标移出）
        elem.onmouseout = function(){
            elem.style["borderColor"] = oldColor;//还原颜色
            if(oldOut) oldOut();
        };
    }- */ ;
}

    二 增加Button的鼠标事件实现
       这个的实现放到扩展gwt事件里讨论吧
    希望还有更新的解决方法，在ie与firefox中都能用的。。。
3，元素宽度计算与设置
    相关的函数有：
        DOM.getAbsoluteLeft(Element elem);  //元素elem左上角的“x”坐标(绝对坐标)
        DOM.getAbsoluteTop(Element elem);   //元素elem左上角的“y”坐标（绝对坐标）

        UIObject的方法
            getOffsetHeight()与DOM.getIntAttribute(element, "offsetWidth")等价  //元素的高度
            getOffsetWidth()与DOM.getIntAttribute(element, "offsetWidth")等价  //元素的宽度
              注：高度与宽度函数，是页面显示完成后的高度与宽度
            setHeight(String height)与DOM.setStyleAttribute(element, "height", height)等价
            setWidth(String width)与DOM.setStyleAttribute(element, "width", width)等价
            setPixelSize(int width, int height) //设置高宽度，单位为“px”像素
            setSize(String width, String height) //设置高宽度，是setHeight与setWidth的组合
                注：setPixel(100,120)与setSize("100px", "120px")等价，以上所有的设置高度与宽度值，都是直接设置的元素的"style"的“height”与“width”值，所以可以使用像 “100%”、“20%”等的css方式的值，含义也是与css的一样。

       Window.getClientHeight() //浏览器客户区的高度，单位像素
       Window.getClientWidth() //浏览器的客户区的宽度，单位像素
          注：这两个函数在ie与firefox中不一样，在ie中不包含浏览器的滚动条，而在firefox中是包含的。浏览器出现滚动条，假设滚动条宽度为15px，全屏，屏幕分辨率为1024*768，
    ie中：Window.getClientWidth()的值大概为1024-15 ，实际上比这个值要小一点
    firefox中：Window.getClientWidth()的值为1024

    例如：

                TextBox text  =   new  TextBox();
                text.setPixelSize( 100 ,  120 );
                int h = text.getOffsetHeight() ;
                int w = text.getOffsetWidth() ;
                Window.alert("h:"+h+" w:"+w);

    上面的四行代码是连续的，那么h与w的值等于多少呢，想一想再看下面的结果

都为零

先到这里吧，关于高度与宽度的问题还有一些。
2，对话框居中
    gwt1.2.22都没有提供对话框居中的直接方法，在这里说一下可能的实现方法
    一，直接设定大小
        DialogBox d = new DialogBox();
        d.setText("DialogBox");
        d.setPixelSize(100, 120);      //要指定大小，操作起来不通用
        int x = (Window.getClientWidth()-100)/2;
        int y = (Window.getClientHeight()-120)/2;
        d.setPopupPosition(x, y);
        d.show();
      
    二，延迟实现
       final DialogBox d = new DialogBox();
        d.setText("DialogBox");
        DeferredCommand.add(new Command(){   //延迟执行，
            public void execute()
            {
                int x = (Window.getClientWidth()-d.getOffsetWidth())/2;
                int y = (Window.getClientHeight()-d.getOffsetHeight())/2;
                d.setPopupPosition(x, y);
            }
        });
        d.show();
       注：“延迟执行”因为对话在刚创建时，它的高度与宽度还没有，所以一定要延迟一下，再取它的高度与宽度来计算它的居中位置。
    三，继承实现
       DialogBox d = new DialogBox(){
            protected void onLoad()   //对话装载完成后执行的函数
            {
                super.onLoad();
                int x = (Window.getClientWidth()-getOffsetWidth())/2;
                int y = (Window.getClientHeight()-getOffsetHeight())/2;
                setPopupPosition(x, y);
            }
        };
        d.setText("DialogBox");
        d.show();
    我知道的就这些，如果还有别的方法，希望给我讲一下，我再把它们加上来

1，jsp中可以关闭一个页面而到另一个页面，那么在gwt中怎么解决呢？其实在gwt中只有一个页面，要实现“关闭”的功能是这样的
    RootPanel.get().clear();//取得根panel（对应html中的body体），清除它的所有子对象，就是把整个页面的内容“关闭”，然后就可以再加入自己的新的内容。
  这里也可以清除指它的对象（widget）:
    RootPanel.get().remove(w); //w为Widget
    DOM.removeChild(RootPanel.getBodyElement(), w.getElement());//与上一句的功能一样，DOM类中有很多比较好用的静态方法，具体的就看gwt的文档。
举一个例子：“关闭登录窗口转到主窗口”
    //成功登录
    RootPanel.get().clear();//也可以 RootPanel.get().remove(login);
    RootPanel.get().add(mainView);//mainView主页面

 

引用---http://www.java125.cn/trackback.asp?tbID=1135