GWT: Verwendung von UIBinder mit HTML-Templates... wie funktioniert es?

Question

Ich versuche derzeit, die UIBinder-Funktionalität von GWT zu nutzen, aber ohne Erfolg. Ich habe die Dokumentation mehrere Male gelesen, aber sie enthält NICHT die ganze Geschichte. Vielleicht können Sie mir helfen.

Hier ist, was ich bis jetzt weiß:

1) Ich muss z. B. eine HelloWorld.ui.xml-Datei mit einigen Widget-Layout in erstellen. 2) Ich muss eine entsprechende HelloWorld-Klasse erstellen.

Hier ist das, worüber ich keine Informationen finden kann:

A) Wo muss ich die Datei HelloWorld.ui.xml ablegen, damit GWT sie finden kann?

B) Wie füge ich meine HelloWorld-Komponente z. B. zu einem Panel hinzu?

Die Dokumentation ist sehr spärlich, und definitiv von jemandem geschrieben, der bereits zu viel über GWT weiß, um zu sehen, was ein Neuling nicht weiß.

Answer 1

A) Sie müssen die HelloWorld.ui.xml Datei im selben Paket wie die Widget-Klasse, die die Logik für diese ui.xml-Datei enthält. Der Klassenname sollte sein HelloWorld (der Einfachheit halber sage ich, dass Sie denselben Namen verwenden müssen, aber es ist möglich, per Code einen anderen Namen für die ui.xml-Datei zu verwenden).

B) Ihr HelloWorld Klasse sollte eine Klasse sein, die ein Widget erweitert. Genau wie jedes "normale" Widget kann es dann zu jedem Panel hinzugefügt werden.

Hier ist der Code zum Einbinden der HelloWorld.ui.xml in Ihrem HelloWorld Widget-Klasse:

public class HelloWorld extends Composite /*or extend any widget you want*/ {
    //This defines an interface that represents this specific HelloWorld.ui.xml file.
    interface MyUiBinder extends UiBinder<Widget, HelloWorld> {}

    // This code is for GWT so it can generate the code from your HelloWorld.ui.xml
    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    //Constructor
    public HelloWidgetWorld() {
        // This binds the HelloWorld.ui.xml with this widget
        initWidget(uiBinder.createAndBindUi(this));
        ...
    }

    ...
}

Answer 2

Dieser Überblick erklärt alles: http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html

1. Sie legen HelloWorld.ui.xml in denselben Ordner wie Ihre HelloWorld.java-Datei.

2. So wie hier (aus dem obigen Link):

   public class HelloWorld extends UIObject { // Could extend Widget instead
       interface HelloWorldUiBinder extends UiBinder<DivElement, HelloWorld> {}
       private static HelloWorldUiBinder uiBinder =  
             GWT.create(HelloWorldUiBinder.class);
   
       // div element created via UiBinder
       private DivElement divElement;
   
       public HelloWorld() {
           // createAndBindUi 
           divElement = uiBinder.createAndBindUi(this);
           // now you can add created DivElement to your panel
       }
   };

Answer 3

Hier finden Sie zwei vollständige Tutorials und HelloWorld-Beispiele:

1) für UI Binder mit GWT-Steuerung: http://blog.jeffdouglas.com/2010/01/19/gwt-uibinder-hello-world-tutorial/

2) für UI Binder mit einfachem HTML: Ups! StackOverflow erlaubt mir nicht, zwei Hyperlinks zu posten. Daher werde ich den zweiten in einer separaten Antwort oder in einem Kommentar zu dieser Antwort posten.