Hinzufügen von Textfeld oben auf gwt Java

Question

Ich arbeite derzeit an einem Schulprojekt, wo wir eine GWT-Webanwendung erstellen, die ein GeoChart-Widget verwendet, um Informationen über die Server anzuzeigen, die wir gecrawlt haben. Einfach ausgedrückt, würde ich gerne ein Textfeld oben auf unserem GeoChart-Widget erstellen, das eine interaktive Weltkarte zeigt, die den gesamten Bildschirm einnimmt, um Informationen einzugeben. Ich habe ziemlich ausführlich gesucht, aber ich konnte keine Antwort finden. Hier

ist der Code wie folgt:

@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(); 
      } 
     }); 
    } 

Als GeoChart ein Widget ist, wird es eingewickelt unter (ich bin nicht sicher, ob dies das richtige Wort ist) ein SimpleLayoutPanel jetzt die es in ein anzeigt Vollbild. Wie oben erwähnt, möchte ich einen Text über dem GeoChart einfügen. Nach meinem Verständnis müsste ich ein weiteres Widget erstellen, das meinen Text enthält, und sowohl das GeoChart-Widget als auch das Textfeld-Widget hinzufügen. Was wäre der beste Weg, dies zu tun?

Answer 1

Sehr geehrte, vielen Dank für die Beantwortung meiner Frage. Um dieses Problem zu beheben, habe ich die benutzerdefinierte Widget-API in GWT (bekannt als Composite) verwendet. Hier ist der code wie folgt:

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%"); 

     } 

Eigentlich habe ich etwas von der ursprünglichen Idee geändert. Anstatt es ganz oben zu platzieren, habe ich die Beschriftungen an ein VerticalPanel angehängt und dann ein CombinedWidget (benutzerdefiniertes Widget) erstellt, das sowohl ein VerticalPanel als auch ein DockLayoutPanel zusammenfügt. Ich habe dann das VerticalPanel (das alle Labels enthält) und das GeoChart in das DockLayoutPanel eingefügt.

Dies löste mein Problem, sowohl die Labels als auch das GeoChart auf der gleichen Seite anzuzeigen (ursprünglich hatte ich es zu einem VerticalPanel hinzugefügt, aber es funktionierte nicht, da die App das GeoChart nicht lesen würde, da das VerticalPanel obenauf lag des GeoChart).

Wenn Sie ein Bild von meiner App visualisieren möchten, bitte sagen Sie es!

Answer 2

Ich glaube DialogBox könnte Ihr Problem lösen. Menschen programmieren die DialogBox normalerweise so, dass sie nur dann in der Anzeige erscheint, wenn ein bestimmtes Ereignis ausgelöst wird und verschwindet, nachdem der Benutzer eine Operation beendet hat. In Ihrem speziellen Fall können Sie einfach die DialogBox von Anfang an anzeigen lassen und verschwindet nie. Und das Beste daran: Sie müssen das Widget "DialogBox" nicht zum Widget "geoChart" hinzufügen. Der Aufruf von dialogBox.center() oder dialogBox.show() wird die Magie für Sie tun.

Hier ist der Beispielcode.

@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(); 

}