peacess

统计

留言簿(14)

积分与排名

阅读排行榜

评论排行榜

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

    

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

      gwt的1.4发布了,好久没有更新我的文章了,现在又准备开始更新。源代码(总):http://www.blogjava.net/Files/peacess/freelinz-gwt-experience.rar

    mail:peacess@163.com
    qq:64407724
目录:
13,用gwt在web中实现上下文菜单(右键菜单、弹出菜单) 2007年8月3日

12,gwt中使用float样式实现 完成 2007年7月28日
11,文件下载(download,通过表单方式
完成 2007年8月6日

10,阻止事件传到父对象 2007年7月31日
9,文件上传客户端(upload隐藏表单) 2007年7月29日
8,不换行:表格字符、多种widget的组合 计划中
7,css的(边框)margin、border、padding、width、height与dom对象的属clientWidth、offsetWidth、offsetHeight等的关系及gwt的获取与设置>  完成 2007年5月9日
6,学习资源              完成 2006年12月21日
5,给gwt的ui组件增加事件 完成 2006年12月17日
4,按钮的鼠标进出样式    完成 2006年12月14日
3,元素宽度计算          完成
2,对话框居中            完成
1,关闭页面              完成
。。。。。。。。
13,用gwt在web中实现上下文菜单(右键菜单、弹出菜单)
/**
 * gwt的上下文菜单(右键菜单、弹出菜单)实现 在web应该程序中,有一个默认上下文菜单,
 * 在实现时,一定要把它禁用。 有两种实现方式实现上下文菜单,一种是用gwt的事件机制,一种是利用jsni实现
 * gwt实现 优点:基于gwt,那么不同浏览器的兼容性就不用考虑
 *      缺点:要把原widget放入一个div中,可能会产想不到的问题
 * jsni实现 优点:对原有widget不产生多内容,直接
 *      缺点:要考虑不同浏览的兼容性
 */

/**
 * 用gwt方式实现上下文菜单
 * 
@author wylpeace
 *
 
*/

class ContextMenuGwt extends Composite
{
    
private SimplePanel panel;

    
private MenuBar menuBar;

    
private ContextMenuGwt(Widget w,MenuBar menuBar)
    
{
        
super();
        panel 
= new SimplePanel();
        panel.setWidget(w);
        initWidget(panel);
        
this.menuBar = menuBar;
        DomEx.disableContextMenu(panel.getElement());
        unsinkEvents(
-1);
        sinkEvents(Event.ONMOUSEDOWN);
    }

    
protected void onAttach()
    
{
        
super.onAttach();

        DOM.setEventListener(getElement(), 
this);
    }

    
public static Widget addContextMenu(Widget w,MenuBar menuBarIn)
    
{
        ContextMenuGwt c 
= new ContextMenuGwt(w,menuBarIn);
        
return c;
    }

    
private void popupMenu(Event event, MenuBar menuBarIn)
    
{
        
// 可以加上弹出菜单的理想位置,这里取最简单的
        final int x = DOM.eventGetClientX(event);
        
final int y = DOM.eventGetClientY(event);
        PopupPanel p 
= new PopupPanel(true);
        p.setWidget(menuBarIn);
        p.setPopupPosition(x, y);
        DomEx.disableContextMenu(p.getElement());
//防止弹出浏览的上下文菜单
        p.show();
    }


    
public void onBrowserEvent(Event event)
    
{
        
if(DOM.eventGetType(event) == Event.ONMOUSEDOWN)
        
{
            
if(DOM.eventGetButton(event) == Event.BUTTON_RIGHT)
            
{
                popupMenu(event, 
this.menuBar);
                
return;
            }

        }

        
super.onBrowserEvent(event);
    }

}

 

/**
 * 用jsni方式实现上下文菜单
 * 这里的实现也可以放到一个函数中,不一定是一个类
 * 
@author wylpeace
 *
 
*/

public class ContextMenuJsni
{
    
public static Widget addContextMenu(Widget w,MenuBar menuBar)
    
{
        oncontextmenu(w.getElement(), menuBar);
        
return w;
    }

    
private static native void oncontextmenu(Element e, MenuBar menuBarIn)
    
/*-{
        e.oncontextmenu = function(evt)
        {
            var event = (evt?evt:$wnd.event); //在ie中evt的参数为空,它的当前事件在window.event中
            @freelinz.experience13.client.ContextMenuJsni::popupMenu(Lcom/google/gwt/user/client/Event;Lcom/google/gwt/user/client/ui/MenuBar;)(event,menuBarIn);
            return false;
        };
    }-
*/
;

    
private static void popupMenu(Event event, MenuBar menuBarIn)
    
{
        
// 可以加上弹出菜单的理想位置,这里取最简单的
        final int x = DOM.eventGetClientX(event);
        
final int y = DOM.eventGetClientY(event);

        PopupPanel p 
= new PopupPanel(true);
        p.setWidget(menuBarIn);
        p.setPopupPosition(x, y);
        DomEx.disableContextMenu(p.getElement());
//防止弹出浏览的上下文菜单
        p.show();
    }

}


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,文件下载(download,通过表单方式)

    /**
     * 创建下载的form,通过form带参数进行下载,
     * 而不用直接把下载文件的地址写在代码里
     * 
@return form
     
*/

    
public FormPanel createDown()
    
{
        FormPanel formPanel 
= new FormPanel();
        FlowPanel flowPanel 
= new FlowPanel();

        formPanel.setWidget(flowPanel);
        formPanel.setAction(GWT.getModuleBaseURL() 
+ "filedownload");//设置action
        formPanel.setEncoding(FormPanel.ENCODING_URLENCODED);
        formPanel.setMethod(FormPanel.METHOD_POST);
        DOM.setStyleAttribute(formPanel.getElement(), 
"margin""0px");//使大小为零

        Hidden hidden 
= new Hidden("name","value");//可以增加多个,下载时带的参数
        flowPanel.add(hidden);

        
return formPanel;
    }


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

/**
 * 阻止事件传到父对象中
 * 事件比如单击事件,当一个Element收到后,进行处理。
 * 如果不作处理,这个单击事件还会被传到父element。
 *  这里一个实例使用的例子。 在表格中放一按钮,当单击按钮时,
 *  表格的单击事件不被触发
 
*/

public class Experience10 implements EntryPoint
{
    RootPanel rootPanel;

    
public void onModuleLoad()
    
{
        rootPanel 
= RootPanel.get();

        Grid table 
= new Grid();
        table.resize(
21);
        table.addTableListener(
new TableListener()
        
{
            
public void onCellClicked(SourcesTableEvents arg0, int arg1, int arg2)
            
{
                Window.alert(
"表格被单击");
            }


        }
);

        
// 一般按钮
        Button normal = new Button("一般按钮");
        normal.addClickListener(
new ClickListener()
        
{
            
public void onClick(Widget arg0)
            
{
                Window.alert(
"一般按钮 ---- 按钮被单击");
            }


        }
);
        table.setWidget(
00, normal);

        
// 阻止事件传到父对象
        Button cancelBubble = new Button("阻止事件传到父对象")
        
{
            
public void onBrowserEvent(Event event)
            
{
                
if(DOM.eventGetType(event) == Event.ONCLICK)
                
{
                    DOM.eventCancelBubble(event, 
true);// 阻止事件传到父对象
                }

                
super.onBrowserEvent(event);
            }

        }
;
        cancelBubble.addClickListener(
new ClickListener()
        
{
            
public void onClick(Widget arg0)
            
{
                Window.alert(
"阻止事件传到父对象 ---- 按钮被单击");
            }


        }
);
        table.setWidget(
10, cancelBubble);

        rootPanel.add(table);

    }

}



>9,文件上传客户端(隐藏表单,有一个简单的服务端,见源代码) 2007年7月29日

package freelinz.experience9.client;

import com.google.gwt.core.client.GWT;

/**
 * 文件上传,gwt client端
 *
 
*/

public class FileUploadDlg extends DialogBox implements ClickListener
{
    
/**
     * 操作提示
     
*/

    
private Label note;

    FileUpload fileUpload;

    FormPanel formPanel;

    
private Button confirm;

    
private Button close;

    
public FileUploadDlg()
    
{
        setText(
"文件上传");

        fileUpload 
= new FileUpload();
        fileUpload.setName(
"fileww");// 这个名字可以任意给,但一定要记着给
        note = new Label("");
        formPanel 
= new FormPanel();
        FlowPanel dlgPanel 
= new FlowPanel();

        FlowPanel formWidget 
= new FlowPanel();
        formPanel.setWidget(formWidget);
        Hidden[] ws 
= new Hidden[2];// 用于向服务端传送信息
        ws[0= new Hidden("userwe""test");
        ws[
1= new Hidden("idwe""12312");

        
for(int i = 0, num = ws.length; i < num; i++)
            formWidget.add(ws[i]);
        formWidget.add(fileUpload);

        dlgPanel.add(formWidget);
        dlgPanel.add(note);
        
// 设置表单默认属性
        formPanel.setMethod(FormPanel.METHOD_POST);// 提交方式"post
        formPanel.setEncoding(FormPanel.ENCODING_MULTIPART);// "encoding"为"multipart/form-data
        formPanel.setAction(GWT.getModuleBaseURL() + "fileupload");// servlet的url
        formPanel.addFormHandler(new FormHandler()
        
{
            
public void onSubmitComplete(FormSubmitCompleteEvent event)
            
{
                
// String temp = event.getResults();// 服务端的返回值
                note.setText("上传完成");
            }


            
public void onSubmit(FormSubmitEvent event)
            
{
            }

        }
);

        confirm 
= new Button("上传"this);
        
// 关闭按钮
        close = new Button("取消"this);

        dlgPanel.add(formPanel);
        dlgPanel.add(confirm);
        dlgPanel.add(close);
        setWidget(dlgPanel);
    }


    
public void onClick(Widget sender)
    
{
        
// 确定,提交表单
        if(sender == confirm)
        
{
            String temp 
= fileUpload.getFilename();
            
// 未选择文件
            if(temp == null || temp.length() < 1)
                
return;
            formPanel.submit();
            note.setText(
"文件上传中");
        }

        
// 取消,关闭对话框
        if(sender == close)
            
this.hide();
    }

}


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.ondblclick=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(
100120);
                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主页面


posted on 2007-08-06 22:41 中东 阅读(21856) 评论(29)  编辑  收藏 所属分类: gwt(google web toolkit)

评论

# re: gwt项目开发的经验集----会一直增加 2006-12-10 10:43 坏男孩

太棒了!  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2006-12-10 18:11 BeanSoft

哥们辛苦了!  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2006-12-10 21:57 Andy luo

先顶了再看!我也在做一个gwt项目,多多交流~~  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2006-12-11 18:47 木偶

哥们辛苦了!这可是我每天必看的内容...谢谢  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2006-12-15 10:02 阿刚

我是一个新手 想问一下GWT到底上什么项目呀。  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2006-12-15 10:47 iSunkist

gwt项目做好了该怎样发布?  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2006-12-15 19:23 BeanSoft

还好, GWT 开源了!!  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2006-12-16 10:46 iSunkist

@iSunkist
找到勒..赫赫..blog很不錯..贊..  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2006-12-17 18:50 Andy luo

继续顶  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2006-12-17 22:14 飞来的

兄弟不错  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2006-12-22 09:54 坏男孩

顶都找不到地方!!!  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2007-02-06 09:03 figo

感激  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2007-03-05 17:30 weilesi

很好啊,我也正在看gwt呢,谢谢!!!  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2007-05-08 10:44 赵新

哥们,那个ie7.0问题你怎么解决的啊。gwt不大支持啊  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2007-05-17 10:48 拉拉

好,顶啦!!!
请问一下,你知道
如果DialogBox里面放一个Frame,引入另外一个叶面,这个叶面中有一个按钮,
我想按这个按钮关闭此DialogBox,怎魔板?
如果知道,请tell我下 :yehaiziwjc@yahoo.com.cn  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2007-08-03 23:48 BeanSoft

不知道帖子怎么能反复出现在首页啊? 请不吝赐教... 我也想写一个专题, 把内容连起来.  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2007-09-04 18:17 pa018

我想问一下DomEx是什么?我找不到,有的话能不能发一份给我?pa018@sina.com  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2007-09-06 22:30 中东

@pa018
是自定义的个类,在下载下来的代码里面有的,你查找一下就可以找到  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2007-09-14 11:59 很好

中国的程序员需要互相技术帮助共享  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2007-09-27 14:08 ahlongxp

总结的不错。顶了  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2007-12-02 20:43 sammi

一个建设性的意见,内容很好,是否可以学习一下老外。 把文件组织得更加严谨一些。 虽然花时间,但是你的文章可以为更多人节约更多时间。 谢谢。  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2008-03-03 20:54 AGSD

如何实现文件的保存呢?
比如是把一个文本框里的东西保存在一个指定的目录中去?
还有一个问题,如何实现打开到指定目录?
谢谢拉!!!!
agsdagsd@google.com  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2008-10-31 22:03 wolf123456

顶一下  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2008-11-12 01:41 阿苦

请问有gwt和html交互的例子吗?  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2008-12-19 09:38 zycomma

关于文件上传,我也有个问题,这个客户端上传了,服务器端怎么解析出所上传的文件呢?
有空希望给点解释,谢谢!
zycomma@gmail.com  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2010-03-21 18:15 jelver

非常高兴看到你的好文章,mark 一下,目前在开始学习gwt2.0 和smartgwt2.0 希望能交流  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2010-05-20 18:01 孟宪永

很好,很强大,,!!

有谁知道gwt表格FlexTable隔行换色 怎么做!!

邮箱:mxy20030628@126.com
  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2010-05-20 18:03 孟宪永

我才学GWT半个月,Google很神奇。。。  回复  更多评论   

# re: gwt项目开发的经验集----会一直增加 2011-05-05 17:53 wangmm

GWT能否实现写个单独的servlet,然后跳转进入client端得view中  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: