gwt項目開發的經驗集----會一直增加
正在做一個gwt項目的開發,我會把在項目開發中遇到的問題以及解決方法記錄下來(有很多是同事,也整理放在其中了),以供同道中人參考,少走不該走的路,也希望與同仁交流。
gwt的1.4發布了,好久沒有更新我的文章了,現在又準備開始更新。源代碼(總):http://www.aygfsteel.com/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不產生多內容,直接
* 缺點:要考慮不同瀏覽的兼容性
*/






























































































12,gwt中使用float樣式實現
css的float樣式在ie與firefox中對應的dom屬性名不同,所以不能直接用如下的語句
DOM.setStyleAttribute(elem,"float", "left");
可以這樣使用(在ie與firefox都可以)





























































































>9,文件上傳客戶端(隱藏表單,有一個簡單的服務端,見源代碼) 2007年7月29日


















































































































7,css的(邊框)margin、border、padding、width、height與dom對象的屬性clientWidth、offsetWidth、offsetHeight等的關系及gwt的獲取與設置












寬度與此相似
二,塊(容器)的“邊框”與高度(參考:http://bbs.blueidea.com/thread-2692909-1-1.html的為什么IE6下容器的寬度和FF解釋不同)
不同的瀏覽器,就是相同的瀏覽器在不同的模式下的解釋是不一樣,沒有找到一個比較好的計算他值的關系,所以在寫xhtml/html時一定要注意,自己網頁的規范與標準,如果你的頁頭有這樣的信息














,在ie7與firefox2下有如下的結果:
offsetHeight:padding-top+padding-bottom+boder-top-width+border-bottom+height
clientHeight:offsetHeight - (border-top-width +border-bottom-width)
對于行元素的處理只能一個一個的試了,我沒有找到通用的公式。!?。?br />
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的事件機制實現,以按鈕為例,增加鼠標事件
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); 這一句也可以放在這里調用,這樣的話,就先觸發我們增加的事件
}
}
使用代碼
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);
}
}
二,用jsni實現,以TextBox的雙擊事件為例
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);
}
}
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),綜合比較了一上,在這里直接用腳本比較好
一,腳本實現,代碼如下
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();
};
}-*/;
}
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
例如:
text.setPixelSize(100, 120);
int h = text.getOffsetHeight();
int w = text.getOffsetWidth();
Window.alert("h:"+h+" w:"+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 中東 閱讀(22306) 評論(29) 編輯 收藏 所屬分類: gwt(google web toolkit)