1

Compositeを拡張するGWTウィジェットを印刷したいと思います。このウィジェットは、セルがListDataProviderで作成されたグリッドで構成されています。ユーザーがボタンの印刷をクリックすると、印刷するウィジェットが作成されます。これが完了したら、印刷を開始します。

    Element element = widgetToPrint.getElement();
    String content = element.getInnerHTML();
    print(content);


    public static native boolean print(String content)
    /*-{
    var mywindow = window.open('', 'Printing', '');
    mywindow.document.write('<html><head><title>Test</title>');
    mywindow.document.write('<link rel="stylesheet" href="/public/stylesheets/ToPrintWidget.css" type="text/css" media="all"/></head><body>');
    mywindow.document.write(content);
    mywindow.document.write('</body></html>');
    mywindow.print();
    return true;
    }-*/;

だから、ここに私の問題があります：

このメソッドによって開かれるウィンドウには、ウィジェットのコア（UIバインダーによって構築された）が含まれていますが、一部の子が欠落しています...

ListDataProviderとそれに関連するFlowPanelの内部を見ると、データは一貫しています。つまり、リストとflowPanelにいくつかの項目があります。

その結果、印刷​​ウィンドウに表示されるはずです...問題はウィジェットの印刷方法に関係しているのではないかと思ったので、印刷を開始する直前にこのウィジェットをダイアログボックスに追加してみました。ウィジェットは適切に構築されました...そしてそれはそうでした。

そのため、私のウィジェットはダイアログボックスでうまく表示されますが、getElement（）を使用してそのinnerHTMLをprintメソッドに渡そうとすると、一部のウィジェットが欠落しています... ListDataProviderの変更がDOMで適切に設定されていません...ウィジェットを通常のコンポーネントに追加するとどういうわけか機能しますが、innerHTMLを直接指定する必要がある場合は機能しません...

何か考えはありますか？

前もって感謝します。

4

4 に答える 4

2

ウィジェットは単なる要素の合計ではなく、DOM 要素はシリアル化された単なる文字列ではありません。ウィジェットは要素であり、すべてのイベントは dom に沈み、ユーザーによる変更や操作をリッスンします。要素には、ユーザーが操作するときに呼び出すコールバック関数またはハンドラーがあります。

要素をシリアル化する (つまり、 を呼び出すgetInnerHTML()) ことで、コールバックではなく dom の構造を読み取るだけであり、さらに CSS によって設定されたスタイルも読み取ることはありません。これはおそらく正しく動作することを期待すべきではありません.あなたの経験が示しているように、そうではありません.

これは作成しようとしている単なる印刷ウィンドウであるため、イベント処理はおそらく問題になりません。そのウィジェットのセットに含まれるコンテンツを表示する機能が必要ですが、操作する機能は必要ありません。スタイルはおそらくここでの主な問題です（あなたの質問では「一部の子が欠落している」とは指定されていませんが、何が欠落しているか、または理由についての手がかりが得られません...）-1つのスタイルシートを追加していますあなたのJSNIコードでは、CellTable（ListDataProviderを参照しているので使用していると思います）が正しく表示されるには、追加のCssResourceインスタンスが必要です。それらをハイジャックして新しいウィンドウに描画する方法がわかりません。

これを使用してコンテンツを印刷するだけで、ユーザーがデータを直接操作できないようにしていますか? その場合は、別のアプローチを検討してください。SafeHtmlBuilder を使用して、適切にエスケープされたコンテンツの巨大な文字列を作成し、新しいウィンドウに描画します。

于 2012-12-03T23:56:36.047 に答える
0 
String content = element.toString();

これには、ノード内のすべての階層要素が含まれます。

すべての GWT ハンドラーが機能するわけではないので、DOM を使用してすべてのイベントをシンクする必要があることに注意してください。

于 2012-12-04T08:36:00.117 に答える
0

内側の HTMLではなく、外側の HTMLを取得したい場合があります。

残念ながら GWT には がありませんが、エミュレートするgetOuterHTMLのは比較的簡単です。

  • ウィジェットが要素内の唯一の子である場合は、単に親要素の内部 HTML を取得します ( w.getElement().getParentElement().getInnerHTML())

  • それ以外の場合は、ウィジェットのノードを複製して、新しく作成された親要素に追加します。そこから内部 HTML を取得できます。 

    DivElement temp = Document.get().createDivElement();
temp.appendChild(w.getElement().cloneNode(true));
return temp.getInnerHTML();
于 2012-12-04T08:16:16.220 に答える
0

まず、あなたの答えに感謝します。この問題を解決するのに役立ちました。私はほとんど問題を解決しました：

まず、ビューがいつ、どのように更新されたかが明確ではなかったため、ListDataProvider を使用しなくなりました。代わりに、手動でウィジェットを追加します。ウィジェットは移動しないため、これは理にかなっています。

次に、共通の CSS スタイルシートを使用してウィジェットのスタイルを定義します。しかし、それを行うには、CssResource に頼ることはできません。これは、私が GWT で行っていた方法です。これは、この種のスタイルによって失われる JS メソッドから来ていると思います...代わりに、静的な CSS スタイルシートですべてを指定し、それを JS に渡す必要があります。

つまり、ウィジェットがあり、スタイルがあり、印刷できます。

しかし... 一部のウィジェットの色は、それらが表すオブジェクトの色に依存します。したがって、一般的な CSS スタイルシートを作成することはできません...そして、前述したように、CssResource を使用してスタイルを追加することはできません...それを処理する方法について何かアイデアはありますか?

スタイルを追加する方法を明確にするために、以下に例を示します。

    Label l = new Label("Here is a cell in my grid to be printed");
    l.addStyleName("PrintLineCell-kind_1");

パブリック CSS スタイルシートで:

    .PrintLineCell-kind_1{
        background-color: red;
    }

300の異なる色をカバーするために300のスタイルを書くよりも良い方法があることを願っています...

于 2012-12-05T09:19:53.850 に答える