正在做一個(gè)gwt項(xiàng)目的開發(fā)，我會(huì)把在項(xiàng)目開發(fā)中遇到的問題以及解決方法記錄下來（有很多是同事，也整理放在其中了），以供同道中人參考，少走不該走的路，也希望與同仁交流。
gwt的1.4發(fā)布了，好久沒有更新我的文章了，現(xiàn)在又準(zhǔn)備開始更新。源代碼(總)：http://www.aygfsteel.com/Files/peacess/freelinz-gwt-experience.rar
mail：peacess@163.com
qq：64407724
目錄：
13，用gwt在web中實(shí)現(xiàn)上下文菜單（右鍵菜單、彈出菜單） 2007年8月3日
12，gwt中使用float樣式實(shí)現(xiàn) 完成 2007年7月28日
11，文件下載（download，通過表單方式） 完成 2007年8月6日
10，阻止事件傳到父對(duì)象 2007年7月31日
9，文件上傳客戶端（upload隱藏表單） 2007年7月29日
8，不換行：表格字符、多種widget的組合 計(jì)劃中
7，css的（邊框）margin、border、padding、width、height與dom對(duì)象的屬clientWidth、offsetWidth、offsetHeight等的關(guān)系及gwt的獲取與設(shè)置> 完成 2007年5月9日
6，學(xué)習(xí)資源 完成 2006年12月21日
5，給gwt的ui組件增加事件 完成 2006年12月17日
4，按鈕的鼠標(biāo)進(jìn)出樣式 完成 2006年12月14日
3，元素寬度計(jì)算 完成
2，對(duì)話框居中 完成
1，關(guān)閉頁面 完成
。。。。。。。。
13，用gwt在web中實(shí)現(xiàn)上下文菜單（右鍵菜單、彈出菜單）
/**
* gwt的上下文菜單（右鍵菜單、彈出菜單）實(shí)現(xiàn) 在web應(yīng)該程序中，有一個(gè)默認(rèn)上下文菜單，
* 在實(shí)現(xiàn)時(shí)，一定要把它禁用。 有兩種實(shí)現(xiàn)方式實(shí)現(xiàn)上下文菜單，一種是用gwt的事件機(jī)制，一種是利用jsni實(shí)現(xiàn)
* gwt實(shí)現(xiàn) 優(yōu)點(diǎn)：基于gwt，那么不同瀏覽器的兼容性就不用考慮
* 缺點(diǎn)：要把原widget放入一個(gè)div中，可能會(huì)產(chǎn)想不到的問題
* jsni實(shí)現(xiàn) 優(yōu)點(diǎn)：對(duì)原有widget不產(chǎn)生多內(nèi)容，直接
* 缺點(diǎn)：要考慮不同瀏覽的兼容性
*/
/** *//**
* 用gwt方式實(shí)現(xiàn)上下文菜單
* @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方式實(shí)現(xiàn)上下文菜單
* 這里的實(shí)現(xiàn)也可以放到一個(gè)函數(shù)中，不一定是一個(gè)類
* @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的參數(shù)為空，它的當(dāng)前事件在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樣式實(shí)現(xiàn)
css的float樣式在ie與firefox中對(duì)應(yīng)的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，通過表單方式）
/** *//**
* 創(chuàng)建下載的form，通過form帶參數(shù)進(jìn)行下載，
* 而不用直接把下載文件的地址寫在代碼里
* @return form
*/
public FormPanel createDown()
{
FormPanel formPanel = new FormPanel();
FlowPanel flowPanel = new FlowPanel();
formPanel.setWidget(flowPanel);
formPanel.setAction(GWT.getModuleBaseURL() + "filedownload");//設(shè)置action
formPanel.setEncoding(FormPanel.ENCODING_URLENCODED);
formPanel.setMethod(FormPanel.METHOD_POST);
DOM.setStyleAttribute(formPanel.getElement(), "margin", "0px");//使大小為零
Hidden hidden = new Hidden("name","value");//可以增加多個(gè)，下載時(shí)帶的參數(shù)
flowPanel.add(hidden);
return formPanel;
}
>10，阻止事件傳到父對(duì)象
/** *//**
* 阻止事件傳到父對(duì)象中
* 事件比如單擊事件，當(dāng)一個(gè)Element收到后，進(jìn)行處理。
* 如果不作處理，這個(gè)單擊事件還會(huì)被傳到父element。
* 這里一個(gè)實(shí)例使用的例子。 在表格中放一按鈕，當(dāng)單擊按鈕時(shí)，
* 表格的單擊事件不被觸發(fā)
*/
public class Experience10 implements EntryPoint
{
RootPanel rootPanel;
public void onModuleLoad()
{
rootPanel = RootPanel.get();
Grid table = new Grid();
table.resize(2, 1);
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(0, 0, normal);
// 阻止事件傳到父對(duì)象
Button cancelBubble = new Button("阻止事件傳到父對(duì)象")
{
public void onBrowserEvent(Event event)
{
if(DOM.eventGetType(event) == Event.ONCLICK)
{
DOM.eventCancelBubble(event, true);// 阻止事件傳到父對(duì)象
}
super.onBrowserEvent(event);
}
};
cancelBubble.addClickListener(new ClickListener()
{
public void onClick(Widget arg0)
{
Window.alert("阻止事件傳到父對(duì)象 ---- 按鈕被單擊");
}
});
table.setWidget(1, 0, cancelBubble);
rootPanel.add(table);
}
}
>9，文件上傳客戶端（隱藏表單，有一個(gè)簡單的服務(wù)端，見源代碼） 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");// 這個(gè)名字可以任意給，但一定要記著給
note = new Label("");
formPanel = new FormPanel();
FlowPanel dlgPanel = new FlowPanel();
FlowPanel formWidget = new FlowPanel();
formPanel.setWidget(formWidget);
Hidden[] ws = new Hidden[2];// 用于向服務(wù)端傳送信息
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);
// 設(shè)置表單默認(rèn)屬性
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();// 服務(wù)端的返回值
note.setText("上傳完成");
}
public void onSubmit(FormSubmitEvent event)
{
}
});
confirm = new Button("上傳", this);
// 關(guān)閉按鈕
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("文件上傳中");
}
// 取消,關(guān)閉對(duì)話框
if(sender == close)
this.hide();
}
}
8，不換行：表格字符、多種widget的組合
//div中的文本不換行
Label label = new Label("div中的文本不換行");
//css white-space: nowrap;
//gwt實(shí)現(xiàn)：
DOM.setStyleAttribute(label.getElement(), "white-space", "nowrap");
//table中的文本不換行
//先把文件放入一個(gè)div中，再放到表格中，或者設(shè)置table的td的css樣式
//不同類型的widget在div中不換行
//css float：left；clear：none
//float：left 元素浮于左邊；clear：none 元素兩邊都可以有浮動(dòng)對(duì)象（如果不允許就會(huì)直接換行）
//gwt實(shí)現(xiàn)
FlowPanel div = new FlowPanel();//實(shí)際上flowpanel就是一個(gè)div
Label one = new Label("one");
DOM.setStyleAttribute(one.getElement(), "clear", "none");
//注：原gwt不支持float，所以這里用擴(kuò)展的
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對(duì)象的屬性clientWidth、offsetWidth、offsetHeight等的關(guān)系及gwt的獲取與設(shè)置
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;//關(guān)鍵
return $doc.body.clientHeight;
}-*/;
寬度與此相似
二，塊（容器）的“邊框”與高度（參考：http://bbs.blueidea.com/thread-2692909-1-1.html的為什么IE6下容器的寬度和FF解釋不同）
不同的瀏覽器，就是相同的瀏覽器在不同的模式下的解釋是不一樣，沒有找到一個(gè)比較好的計(jì)算他值的關(guān)系，所以在寫xhtml/html時(shí)一定要注意，自己網(wǎng)頁的規(guī)范與標(biāo)準(zhǔn)，如果你的頁頭有這樣的信息
<?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>無標(biāo)題文檔</title>
</head>
<body>
<div style="height:100px; width:150px; border:10px solid red;margin:7px; padding:13px;">標(biāo)準(zhǔn)模式</div>
</body>
</html>
，在ie7與firefox2下有如下的結(jié)果：
offsetHeight：padding-top+padding-bottom+boder-top-width+border-bottom+height
clientHeight：offsetHeight - (border-top-width +border-bottom-width)
對(duì)于行元素的處理只能一個(gè)一個(gè)的試了，我沒有找到通用的公式。?。?！
6，學(xué)習(xí)開發(fā)資源
要做好gwt程序，客戶端方面，有這些知識(shí)比較好：java、javascript、css、html（排列有先后），至于服務(wù)方面的我也說不清楚
官方主站：http://code.google.com/webtoolkit/
官方開源站：http://code.google.com/hosting/ 打開網(wǎng)頁在里面輸入gwt，會(huì)有很多相關(guān)的開源與代碼
開發(fā)工具或庫
gwt 官方網(wǎng)站上第三方工具： http://code.google.com/webtoolkit/thirdparty.html
gwt designer：可視化的eclipse插件開發(fā)工具，易上手，入門比較好
gwt widget library ：開源的gwt擴(kuò)展庫，
wireflexsoft vistafei：是個(gè)可視化的eclipse插件開發(fā)工具，易上手，沒有g(shù)wt designer做的好用
googlipse：eclipse插件，無可視化，功能少一些，不過免費(fèi)的
firebug:firefox的插件，能非常方便的查看DOM、調(diào)試javascript、支持不同瀏覽器的控制臺(tái)，支持動(dòng)態(tài)修改。在firefox下只要這一個(gè)插件，開發(fā)就順手了，ie下要多介紹幾個(gè)，不過都不如firebug
DevToolBar:ie的插件，微軟官方提供
WebDevHelper：ie的插件要.net framework2.0 ，軟件工程師提供
Ie WebDeveloper: 功能也比較多，好像要收費(fèi)
開源庫或參考（排名不分先后）
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的一個(gè)開源項(xiàng)目：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的事件機(jī)制實(shí)現(xiàn)，以按鈕為例，增加鼠標(biāo)事件
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); //調(diào)用父類的，如果想取消父類的事件也可以不用調(diào)用
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); 這一句也可以放在這里調(diào)用，這樣的話，就先觸發(fā)我們?cè)黾拥氖录?/span>
}
}
使用代碼
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，按鈕的鼠標(biāo)進(jìn)出樣式”中的實(shí)現(xiàn)也可以在事件的響應(yīng)中修改按鈕的css。
二，用jsni實(shí)現(xiàn)，以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()();//注意這里是兩對(duì)括號(hào)啊
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，按鈕的鼠標(biāo)進(jìn)出樣式
在css中沒提供直接設(shè)置按鈕的鼠標(biāo)進(jìn)出樣式，這里用鼠標(biāo)事件來實(shí)現(xiàn)，在gwt中可以寫一個(gè)Button的子類，并為其增加鼠標(biāo)事件，也可以直接用腳本來實(shí)現(xiàn)（jsni），綜合比較了一上，在這里直接用腳本比較好
一，腳本實(shí)現(xiàn)，代碼如下
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; //防止多次調(diào)用
var oldColor = elem.style["borderColor"];
var old = elem.onmouseover; //取出原事件響應(yīng)函數(shù)（鼠標(biāo)進(jìn)入）
this.@com.mycompany.project.client.ExpMouseOver::first = true;
elem.onmouseover = function(){
elem.style["borderColor"] = color;
if(old) old(); //如果原事件響應(yīng)函數(shù)存在，就運(yùn)行它
};
var oldOut = elem.onmouseout; //（鼠標(biāo)移出）
elem.onmouseout = function(){
elem.style["borderColor"] = oldColor;//還原顏色
if(oldOut) oldOut();
};
}-*/;
}
這里說明一下，這個(gè)函數(shù)只允許調(diào)用一次，有待改進(jìn)??！
如下的是改進(jìn)版的程序，可以多次調(diào)用，這里把顏色的值改成一個(gè)成員了
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; //防止多次調(diào)用
var oldColor = elem.style["borderColor"];
var old = elem.onmouseover; //取出原事件響應(yīng)函數(shù)（鼠標(biāo)進(jìn)入）
jsthis.@com.mycompany.project.client.ExpMouseOver::first = true;
elem.onmouseover = function(){
elem.style["borderColor"] = jsthis.@com.mycompany.project.client.ExpMouseOver::color;
if(old) old(); //如果原事件響應(yīng)函數(shù)存在，就運(yùn)行它
};
var oldOut = elem.onmouseout; //（鼠標(biāo)移出）
elem.onmouseout = function(){
elem.style["borderColor"] = oldColor;//還原顏色
if(oldOut) oldOut();
};
}-*/;
}
二 增加Button的鼠標(biāo)事件實(shí)現(xiàn)
這個(gè)的實(shí)現(xiàn)放到擴(kuò)展gwt事件里討論吧
希望還有更新的解決方法，在ie與firefox中都能用的。。。
3，元素寬度計(jì)算與設(shè)置
相關(guān)的函數(shù)有：
DOM.getAbsoluteLeft(Element elem); //元素elem左上角的“x”坐標(biāo)(絕對(duì)坐標(biāo))
DOM.getAbsoluteTop(Element elem); //元素elem左上角的“y”坐標(biāo)（絕對(duì)坐標(biāo)）
UIObject的方法
getOffsetHeight()與DOM.getIntAttribute(element, "offsetWidth")等價(jià) //元素的高度
getOffsetWidth()與DOM.getIntAttribute(element, "offsetWidth")等價(jià) //元素的寬度
注：高度與寬度函數(shù)，是頁面顯示完成后的高度與寬度
setHeight(String height)與DOM.setStyleAttribute(element, "height", height)等價(jià)
setWidth(String width)與DOM.setStyleAttribute(element, "width", width)等價(jià)
setPixelSize(int width, int height) //設(shè)置高寬度，單位為“px”像素
setSize(String width, String height) //設(shè)置高寬度，是setHeight與setWidth的組合
注：setPixel(100,120)與setSize("100px", "120px")等價(jià)，以上所有的設(shè)置高度與寬度值，都是直接設(shè)置的元素的"style"的“height”與“width”值，所以可以使用像“100%”、“20%”等的css方式的值，含義也是與css的一樣。
Window.getClientHeight() //瀏覽器客戶區(qū)的高度，單位像素
Window.getClientWidth() //瀏覽器的客戶區(qū)的寬度，單位像素
注：這兩個(gè)函數(shù)在ie與firefox中不一樣，在ie中不包含瀏覽器的滾動(dòng)條，而在firefox中是包含的。瀏覽器出現(xiàn)滾動(dòng)條，假設(shè)滾動(dòng)條寬度為15px，全屏，屏幕分辨率為1024*768，
ie中：Window.getClientWidth()的值大概為1024-15 ，實(shí)際上比這個(gè)值要小一點(diǎn)
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);
上面的四行代碼是連續(xù)的，那么h與w的值等于多少呢，想一想再看下面的結(jié)果
都為零
先到這里吧，關(guān)于高度與寬度的問題還有一些。
2，對(duì)話框居中
gwt1.2.22都沒有提供對(duì)話框居中的直接方法，在這里說一下可能的實(shí)現(xiàn)方法
一，直接設(shè)定大小
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();
二，延遲實(shí)現(xiàn)
final DialogBox d = new DialogBox();
d.setText("DialogBox");
DeferredCommand.add(new Command(){ //延遲執(zhí)行，
public void execute()
{
int x = (Window.getClientWidth()-d.getOffsetWidth())/2;
int y = (Window.getClientHeight()-d.getOffsetHeight())/2;
d.setPopupPosition(x, y);
}
});
d.show();
注：“延遲執(zhí)行”因?yàn)閷?duì)話在剛創(chuàng)建時(shí)，它的高度與寬度還沒有，所以一定要延遲一下，再取它的高度與寬度來計(jì)算它的居中位置。
三，繼承實(shí)現(xiàn)
DialogBox d = new DialogBox(){
protected void onLoad() //對(duì)話裝載完成后執(zhí)行的函數(shù)
{
super.onLoad();
int x = (Window.getClientWidth()-getOffsetWidth())/2;
int y = (Window.getClientHeight()-getOffsetHeight())/2;
setPopupPosition(x, y);
}
};
d.setText("DialogBox");
d.show();
我知道的就這些，如果還有別的方法，希望給我講一下，我再把它們加上來
1，jsp中可以關(guān)閉一個(gè)頁面而到另一個(gè)頁面，那么在gwt中怎么解決呢？其實(shí)在gwt中只有一個(gè)頁面，要實(shí)現(xiàn)“關(guān)閉”的功能是這樣的
RootPanel.get().clear();//取得根panel（對(duì)應(yīng)html中的body體），清除它的所有子對(duì)象，就是把整個(gè)頁面的內(nèi)容“關(guān)閉”，然后就可以再加入自己的新的內(nèi)容。
這里也可以清除指它的對(duì)象（widget）:
RootPanel.get().remove(w); //w為Widget
DOM.removeChild(RootPanel.getBodyElement(), w.getElement());//與上一句的功能一樣，DOM類中有很多比較好用的靜態(tài)方法，具體的就看gwt的文檔。
舉一個(gè)例子：“關(guān)閉登錄窗口轉(zhuǎn)到主窗口”
//成功登錄
RootPanel.get().clear();//也可以 RootPanel.get().remove(login);
RootPanel.get().add(mainView);//mainView主頁面