2016-11-04 5 views
1

В настоящее время я работаю над школьным проектом, в котором мы создаем веб-приложение GWT, которое использует виджет GeoChart для отображения информации о серверах, которые мы просканировали. Проще говоря, я бы хотел создать текстовое поле поверх нашего виджета GeoChart, который отображает интерактивную карту мира, которая теперь занимает весь экран для ввода информации. Я искал довольно широко, но я не смог ответить.Добавление текстового окна поверх gwt java

Вот код следующим образом:

@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, так и виджет текстового поля. Каким будет лучший способ сделать это?

+0

Я бы пошел с [DockLayoutPanel] (http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/DockLayoutPanel.html) (или [DockPanel] (http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/DockPanel.html)), добавьте TextBox в док-станцию ​​'North' и' GeoChart' в док-станцию ​​'center'. – Adam

+0

Привет, я попытался использовать DockLayoutPanel, чтобы добавить TextBox и GeoChart, но по какой-то причине GeoChart не появляется. Я нашел решение, которое я ответил ниже. Спасибо за помощь, хотя! –

ответ

0

Дорогой, спасибо за ответы на мой вопрос. Чтобы исправить эту проблему, я использовал API пользовательского виджета в GWT (известный как 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, но он не будет работать, поскольку приложение не будет читать GeoChart из-за того, что VerticalPanel накладывается сверху GeoChart).

Если вы хотите, чтобы изображение моего приложения отображалось, скажите так!

0

Я считаю, что 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(); 

} 
+0

Я рассматривал использование DialogBox, но поскольку мой TextBox был предназначен только для отображения информации (например, имя проекта группы и имя нашей группы), я не хотел использовать DialogBox, поскольку я чувствовал, что это будет немного ненужным. Вместо этого я создал собственный виджет для размещения в нем текста. См. Мое решение ниже. –

+0

@AaronLow Я вижу, рад, что вы решили свою проблему. – dydigging