未在DOM中正确设置GWT小部件_Gwt_Dom_Printing

未在DOM中正确设置GWT小部件

gwt dom printing

未在DOM中正确设置GWT小部件,gwt,dom,printing,Gwt,Dom,Printing,我想打印一个GWT小部件，它扩展了Composite。此小部件由网格组成，网格的单元格由ListDataProvider构建。当用户点击按钮打印时，将生成要打印的小部件。完成后，我将启动打印： Element element = widgetToPrint.getElement(); String content = element.getInnerHTML(); print(content); public static native boolean pri

我想打印一个GWT小部件，它扩展了Composite。此小部件由网格组成，网格的单元格由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;
    }-*/;

Element-Element=widgetoprint.getElement（）；
字符串内容=element.getInnerHTML（）；
印刷（内容）；
公共静态本机布尔打印（字符串内容）
/*-{
var mywindow=window.open（“”，“打印”和“”）；
mywindow.document.write（'Test'）；
mywindow.document.write（“”）；
mywindow.document.write（内容）；
mywindow.document.write（“”）；
mywindow.print（）；
返回true；
}-*/;

所以，我的问题是：

通过此方法打开的窗口包含小部件的核心（由UI绑定器构建），但缺少一些子项

如果我查看ListDataProvider及其相关的FlowPanel，数据是一致的，即我的列表和FlowPanel中有几个项目

因此，它应该在打印窗口上可见。。。我认为问题可能与打印小部件的方法有关，所以我还尝试在启动打印之前将此小部件添加到对话框中，以查看小部件是否正确构建。。。的确如此

因此，我的小部件在对话框中显示得很好，但是如果我尝试使用getElement（）将其innerHTML提供给print方法，则会丢失一些小部件。。。我觉得当ListDataProvider更改时应该构建的小部件没有在DOM中正确设置。。。当我将小部件添加到常规组件时，它会工作，但当我必须直接给出它的innerHTML时，它就不工作了

你知道吗

提前感谢。

小部件不仅仅是它们元素的总和，DOM元素也不仅仅是它们序列化到的字符串。窗口小部件是元素，所有事件都被放入dom中，以侦听用户的任何更改或交互。元素然后具有回调函数或处理程序，当用户与它们交互时，它们会调用这些回调函数或处理程序

通过序列化元素（即调用

getInnerHTML（）

），您只读取dom的结构，而不是回调，另外也不是CSS设置的样式。这可能不应该被期望正常工作，正如你的经验所证明的那样，它不会正常工作

由于这只是您试图创建的一个打印窗口，所以事件处理可能并不重要。您只希望能够看到该组小部件中的内容，而不是与之交互。样式可能是这里的主要问题（虽然您的问题没有指定“缺少一些子项”，也没有告诉我们缺少了什么，也没有为我们提供更多关于原因的线索…）-您在JSNI代码中添加了一个样式表，但是CellTable（我假设您在引用ListDataProvider时使用了CellTable）需要其他CssResource实例才能正确显示。我不知道你怎么能劫持它们，让它们进入一个新的窗口

您是否只使用它来打印内容，而不让用户直接与数据交互？如果是这样，请考虑另一种方法——使用SuffHTMLBu建器创建一个巨大的、正确逃脱的内容串，以便在新窗口中绘制。

< P>您可能想获取外部HTML而不是内部HTML。不幸的是，GWT没有

getOuterHTML

，但它相对容易仿真

如果小部件是元素中的唯一子元素，则只需获取父元素的内部HTML（
```
w.getElement（）.getParentElement（）.getInnerHTML（）
```
）

否则，克隆小部件的节点并将其添加到新创建的父元素中，您将能够从中获取内部HTML：

DivElement temp=Document.get（）.createDivElement（）；
temp.appendChild（w.getElement（）.cloneNode（true））；
返回temp.getInnerHTML（）；

这将包括节点中的所有层次结构元素

提醒一下，所有的GWT处理程序都无法工作，您必须使用DOM接收所有事件。

首先感谢您的回答，它帮助我解决了这个问题。我几乎解决了这个问题：

首先，我不再使用ListDataProvider，因为我不清楚视图何时以及如何刷新。相反，我手动添加我的小部件，这很有意义，因为它们无论如何都不会移动

然后，我使用一个公共CSS样式表定义我的小部件的样式。然而，为了做到这一点，我不能依赖CssResource，这是我使用GWT的方式。我认为这来自于JS方法，它被这种风格弄丢了。。。相反，我必须在静态CSS样式表中指定所有内容，并将其交给JS

它工作得非常好，也就是说，我有我的小部件，带有I样式，我可以打印它

但是。。。一些小部件的颜色取决于它们所表示的对象的颜色。因此，我无法编写通用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种不同的颜色…

谢谢你的快速回答。关于窗口，您是对的，它的目的是打印，不需要与用户交互。正如您所建议的，我将尝试使用SafeHtmlBuilder，但是如果它也给出一个字符串，我想知道为什么这一个可能包含丢失的孩子？另外，关于你在我的话题上的问题：失踪的孩子是那些与手机桌有关的孩子。当我查看元素时，我可以看到它的单元格列表，它不是空的。因此，我假设小部件是正确构建的，实际上它在对话框中显示得很好……而不是在pri上

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