GWTを包む/装飾するFileUpload

Question

GWT FileUploadは、フォーム提出中にファイルをアップロードできるようにするウィジェットとして提供されています（少なくとも私がそれを理解する方法です:)）私がしたいのは、標準の "参照..."ボタンを削除します。

私は良いGWTエクスペリエンス（JavaScriptはありません）がないので、私は既存のソリューションを探して、かなり良いプロジェクトを見つけました - gwtupload。それはいいですが、私は自分のミニチュア版を持っていたいと思っていました（そして、私はそれがどのように機能しているのか興味がありました）。だから私はコードを閲覧し、魔法の部分を抽出しようとした。私は、GWT FileInputが使用されていることに気付きましたが、これは表示されず、ボタンのクリックはこの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に配置する必要があることを知っています。サーブレットで実際にサブミット/ハンドリングを実行する方法については残りの部分を知っています。私がしたいのは、この種の装飾だけです。

Answer 1

私はまだ何も答えられていないので、この問題についてさらに調査しなければならなかったので、GWT FileUpload（どのように変換される）をどのように装飾できるかを理解するために、gwtuploadプロジェクトの深いコード分析を行った。

element.click()は#click（）メソッド（IE、Chrome、Safari）をサポートするブラウザでのみ機能することが判明しました。実際、Manuel CarrascoMoñino - プロジェクトの作者 - コメントの中で言及しています。 FileInputが透明なパネル上に置かれたときにハックを使用する2番目のアプローチ（Firefoxの場合は& Opera用）ですが、装飾されたボタンの上に置かれます（絶対配置を使用します）。コメント：Manuel：

ユーザがボタンの上にマウスを置いてクリックすると、実際にはファイルの選択ダイアログが表示された透明なファイル入力がクリックされます。

その後、主な作業は要素にスタイル属性を正しく適用しています。

このように、カスタムファイルアップロードコンポーネントには2つの実装があり、GWT遅延バインディングはブラウザに応じてインスタンス化するために使用されます。私は私の質問に言及例えばとして

、いくつかの修正がそこにいる（「アップロード」コンテナにに追加する必要があり、それは#setVisible）（falseに設定することができます）：

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.彼の偉大な図書館でManuelに感謝します:)