2

GWT FileUpload は、フォームの送信中にファイルをアップロードできるようにするウィジェットとして提供されます (少なくとも私はそれを理解しています:)) .." ボタン。

私は GWT の経験が少ない (そして JavaScript がない) ため、既存のソリューションを探したところ、非常に優れたプロジェクトgwtuploadを見つけました。それは良いことですが、私は自分自身のミニチュアバージョンが欲しいことに気付きました (また、それがどのように機能するかについても興味がありました)。そこで、コードをブラウジングし、魔法の部分を抽出しようとしました。GWT FileInput が使用されていることに気付きましたが、表示されておらず、ボタンのクリックはこの FileInput に委任されています。gwtupload のソースを確認した後、抽出しようとしたコード (クリックを委任する部分のみ) には、次のトリッキーな JSNI が含まれていますelem.click()。

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);
    }
}

しかし、これはうまくいかないようです: 'My Browse..' をクリックしても効果はありません (念のため、コメントなしcontainer.add(upload)の行で実行しようとしました)。このコード サンプルのどこが間違っているか、何が欠けているかを理解するのを手伝ってくれませんか?

前もって感謝します。

PS私はそれをFormPanelに配置する必要があることを知っており、サーブレットで実際の送信/処理を実行する方法について残りを知っています。私がやりたいのは、この種の装飾だけです。

4

1 に答える 1

9

回答が得られなかったため、この問題をさらに調査する必要があったため、gwtuploadプロジェクトのより深いコード分析を実行して、GWT FileUpload (これは に変換されます) をどのように装飾できるかを理解しました。

element.click()#click() メソッド (IE、Chrome、Safari) をサポートするブラウザーでのみ動作することが判明しました。実際、プロジェクトの作成者であるマヌエル・カラスコ・モニーノは、コメント内でそれについて言及しています。FileInput が透明パネルに配置されているときにハックを使用する 2 番目のアプローチ (Firefox および Opera 用) がありますが、装飾されたボタンの上に (絶対配置を使用して) 配置されます。マヌエルによるコメント:

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

その後の主な作業は、スタイル属性を要素に正しく適用することです。

したがって、カスタム ファイル アップロード コンポーネントには 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 で正常に動作します。

PSマヌエルの素晴らしいライブラリに感謝します:)

于 2011-02-02T12:24:34.560 に答える