包裝/裝飾GWT FileUpload

GWT FileUpload是一個小部件，可以在表單提交時上傳文件（至少這是我的理解:)）我想要做的就是讓它更好看並擺脫標準的「瀏覽...」按鈕。包裝/裝飾GWT FileUpload

因爲我沒有很好的GWT經驗（也沒有JavaScript），所以我尋找現有的解決方案並找到了相當不錯的項目 - gwtupload。這很好，但我意識到我很想擁有自己的微縮版本（並且，我對它的工作原理感到好奇）。所以我瀏覽代碼並嘗試提取魔法部分。我意識到使用了GWT FileInput，但沒有顯示，並且Button單擊被委託給此FileInput。該代碼我試圖提取（只有一部分代表點擊）審查gwtupload來源後，包含此棘手elem.click() JSNI：

class MyUpload extends Composite { 
    private static native void clickOnInputFile(Element elem) /*-{ 
     elem.click(); 
    }-*/; 

    public MyUpload() { 
     final FileUpload upload = new FileUpload(); 
     AbsolutePanel container = new AbsolutePanel(); 
     // container.add(upload); 
     Button btn = new Button("My Browse.."); 
     btn.addClickHandler(new ClickHandler() { 
      @Override 
      public void onClick(ClickEvent event) { 
       clickOnInputFile(upload.getElement()); 
      } 
     }); 
     container.add(btn); 
     initWidget(container); 
    } 
}

但這似乎不工作：點擊「我的瀏覽..」結果沒有效果（只是以防萬一我也嘗試使用未評論的container.add(upload)行）。你能幫我理解這個代碼示例中的錯誤/缺失嗎？

預先感謝您。

P.S.我知道我必須將它放在FormPanel上，並且我知道剩下的關於如何在Servlet中執行實際提交/處理的內容;我唯一想做的就是這種裝飾。

來源

2011-02-02 Arturs Licis

由於我還沒有收到任何答案，所以我不得不對此問題進行更多的調查，因此我對gwtupload項目進行了更深入的代碼分析，以瞭解如何修飾GWT FileUpload（將其轉換爲）。

原來，element.click()只適用於支持#click（）方法（IE，Chrome，Safari）的瀏覽器。實際上，項目作者Manuel CarrascoMoñino在評論中提到了它。還有第二種方法（對於Firefox & Opera），當FileInput被放置在透明面板上時，它使用黑客技術，但透明面板放置在某個裝飾的按鈕上（使用絕對定位）; Manuel發表評論：

當用戶將鼠標放在按鈕上並點擊它時，真正發生的是用戶單擊顯示選擇文件對話框的透明文件輸入。

之後，主要工作正確地將樣式屬性應用到元素。

因此，有兩個自定義文件上傳組件的實現，並且GWT延遲綁定用於根據瀏覽器實例化它們。

至於例如我在我的問題提了，還有就是一些修正（「上載」已被添加到的容器，它可以被設置爲#setVisible（假））：

class MyUpload extends Composite { 
    private static native void clickOnInputFile(Element elem) /*-{ 
     elem.click(); 
    }-*/; 

    public MyUpload() { 
     final FileUploadWithMouseEvents upload = new FileUploadWithMouseEvents(); 
     AbsolutePanel container = new AbsolutePanel(); 
     container.add(upload); 
     upload.setVisible(false); 
     Button btn = new Button("My Browse.."); 
     btn.addClickHandler(new ClickHandler() { 
      @Override 
      public void onClick(ClickEvent event) { 
       clickOnInputFile(upload.getElement()); 
      } 
     }); 
     container.add(btn); 
     initWidget(container); 
    } 
}

這個例子在IE8中工作正常。

P.S.感謝曼努埃爾爲他偉大的圖書館:)

來源

2011-02-02 12:24:34

包裝/裝飾GWT FileUpload

回答

相關問題