<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    peacess

    統計

    留言簿(14)

    積分與排名

    閱讀排行榜

    評論排行榜

    gwt項目開發的經驗集----會一直增加

        

          正在做一個gwt項目的開發,我會把在項目開發中遇到的問題以及解決方法記錄下來(有很多是同事,也整理放在其中了),以供同道中人參考,少走不該走的路,也希望與同仁交流。

          gwt的1.4發布了,好久沒有更新我的文章了,現在又準備開始更新。源代碼(總):http://www.tkk7.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不產生多內容,直接
     *      缺點:要考慮不同瀏覽的兼容性
     */

    /**
     * 用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 中東 閱讀(22305) 評論(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中  回復  更多評論   

    主站蜘蛛池模板: 女人18毛片水真多免费看| 久久精品亚洲AV久久久无码| 成年人网站在线免费观看| A毛片毛片看免费| 亚洲国产欧美国产综合一区| 亚洲丝袜美腿视频| 亚洲人成影院在线无码观看| 毛片在线免费视频| 99久久国产免费-99久久国产免费| 特级毛片免费观看视频| 日韩亚洲人成在线| 亚洲免费视频在线观看| 日韩精品亚洲aⅴ在线影院| 又粗又大又硬又爽的免费视频| 亚洲人成免费电影| 久久永久免费人妻精品下载| 黄色视频在线免费观看| 免费国产va视频永久在线观看| 亚洲精品日韩一区二区小说| 国产成人精品亚洲日本在线| 亚洲精品资源在线| 亚洲图片一区二区| 午夜亚洲www湿好大| 亚洲国产精品特色大片观看完整版 | 国产亚洲精品精品精品| 亚洲中文无码永久免费| 亚洲国产综合精品中文第一| 亚洲一区二区三区四区视频| 亚洲最大在线视频| 亚洲人成在线免费观看| 亚洲人成影院77777| 亚洲成a人片在线观看精品| 亚洲人成电影网站久久| 亚洲欧洲专线一区| mm1313亚洲国产精品无码试看| 亚洲国产av玩弄放荡人妇| 亚洲精品无码专区| 看一级毛片免费观看视频| 全部在线播放免费毛片| 国产精品玖玖美女张开腿让男人桶爽免费看 | 国产亚洲精品成人久久网站|