在 gwt java 顶部添加文本框

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（称为 Composite）中使用了自定义小部件 API。代码如下：

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 顶部添加文本框

adding text box on top of gwt java

java

gwt