Question

我目前正在开展一个学校项目，我们正在创建一个GWT Web应用程序，该应用程序使用GeoChart小部件来显示有关我们已爬网的服务器的信息。简而言之，我希望在GeoChart小部件的顶部创建一个文本框，其中显示了一个交互式世界地图，它立即占据整个屏幕以输入信息。我搜索得非常广泛，但我无法得出答案。

以下代码如下：

@Override
    public void onModuleLoad() {

        dataReader = (DataReaderAsync) GWT.create(DataReader.class);

        RootLayoutPanel.get().add(getSimpleLayoutPanel());

        // Create the API Loader
        ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
        chartLoader.loadApi(new Runnable() {

            @Override
            public void run() {

                getSimpleLayoutPanel().setWidget(getGeoChart());
                drawGeoChart();
            }
        });
    }

由于GeoChart是一个小部件，它现在包含在（我不确定这是否是正确的单词）SimpleLayoutPanel，它将显示为全屏。如上所述，我希望将文本包含在geoChart之上。根据我的理解，我需要创建另一个包含我的文本的小部件，并将GeoChart小部件和文本框小部件添加到其中。这样做最好的方法是什么？

Answer 1

我相信DialogBox可以解决您的问题。人们通常以一种方式编程DialogBox，它只在某个事件被触发时弹出显示，并在用户完成某些操作后消失。在您的特定情况下，您可以简单地使DialogBox从头开始显示，永远不会消失。最好的部分是：您不需要将DialogBox小部件添加到geoChart小部件中。调用dialogBox.center（）或dialogBox.show（）将为您带来魔力。

以下是示例代码。

@Override
public void onModuleLoad() {

    dataReader = (DataReaderAsync) GWT.create(DataReader.class);

    RootLayoutPanel.get().add(getSimpleLayoutPanel());

    // Create the API Loader
    ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
    chartLoader.loadApi(new Runnable() {

        @Override
        public void run() {

            getSimpleLayoutPanel().setWidget(getGeoChart());
            drawGeoChart();
        }
    });

    // NOTE: the first argument 'false' makes sure that this dialog box
    // will not disappear when user clicks outside of it
    // NOTE: the second argument 'false' makes sure that mouse and keyboard
    // events outside of the dialog box will NOT be ignored
    DialogBox dialogBox = new DialogBox(false, false);
    DialogBox.setText("Demo");

    HorizontalPanel panel = new HorizontalPanel();
    panel.setSpacing(5);

    InlineLabel labelOfTextBox = new InlineLabel("Label");
    TextBox textBox = new TextBox();

    panel.add(labelOfTextBox);
    panel.add(textBox);

    dialogBox.setWidget(panel);

    // show up in the center
    dialogBox.center();

}

Answer 2

非常感谢您回答我的问题。为了解决这个问题，我使用了GWT中的自定义小部件API（称为Composite）。这是以下代码：

private static class CombinedWidget extends Composite {

      public CombinedWidget() {
         // place the check above the text box using a vertical panel.
         VerticalPanel panel = new VerticalPanel();
         DockLayoutPanel dPanel = new DockLayoutPanel(Unit.EM);
         panel.setSpacing(13);
         panel.add(nameProject);
         nameProject.setStyleName("gwt-Group-Label");
         panel.add(className);
         panel.add(nameKs);
         panel.add(nameEsmond);
         panel.add(nameBowen);
         panel.add(nameAaron);
         dPanel.addWest(panel, 13);
         dPanel.add(getGeoChart());

         // all composites must call initWidget() in their constructors.
         initWidget(dPanel);

         setWidth("100%");

      }

实际上我有点改变了原来的想法。我没有将它放在最顶层，而是将标签附加到VerticalPanel中，然后创建了一个CombinedWidget（自定义小部件），它将VerticalPanel和DockLayoutPanel一起添加。然后我将VerticalPanel（包含所有标签）和GeoChart添加到DockLayoutPanel中。

这解决了我在同一页面上显示标签和GeoChart的问题（原来我将其添加到VerticalPanel中但由于VerticalPanel被覆盖在顶部，因此应用程序无法读取GeoChart，因此无法正常工作GeoChart）。

如果你们想让我的应用图片可视化，请说出来！

在gwt java上添加文本框

2 个答案: