gwt项目开发的经验集----会一直增加

最新推荐文章于 2024-04-24 15:06:44 发布

andybogard

最新推荐文章于 2024-04-24 15:06:44 发布

阅读量2k

点赞数

分类专栏： Ajax 文章标签： gwt import button textbox firefox function

本文链接：https://blog.csdn.net/andybogard/article/details/1450184

版权

Ajax 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

正在做一个gwt项目的开发，我会把在项目开发中遇到的问题以及解决方法记录下来，以供同道中人参考，少走不该走的路，也希望与同仁交流。

目录：

6，学习资源              计划中
5，给gwt的ui组件增加事件完成 2006年12月17日
4，按钮的鼠标进出样式完成 2006年12月14日
3，元素宽度计算         完成
2，对话框居中            完成
1，关闭页面              完成

。。。。。。。。

6，学习资源
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);
    }
}

使用代码

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主页面