2010-01-21 8 views
6

Ich möchte Menüs (MenuBar, MenuItem) mit dem deklarativen Ansatz über UiBinder in GWT 2.0 implementieren.GWT: Menüs in UiBinder

Ich habe in zwei Probleme laufen:

  1. Gibt es eine Möglichkeit MenuItemSeparators in der .ui.xml Datei hinzufügen? So weit, ich habe nur geschafft, MenuBar- und MenuItem-Tags in die Datei zu setzen.

  2. Mit @UiHandler schreibt GWT den Boilerplate-Code für Ereignis Handler für mich. Für Menüs muss ich Befehle schreiben. Wie soll ich das mit dem UiBinder Ansatz machen? ? Gibt es einen Befehl Tag in die .ui.xml Datei zu setzen? Muss ich den Codebaustein Code für die Befehlshandler selbst schreiben?

Vielen Dank für das Nachdenken über diese Fragen!

Antwort

7

nicht unterstützt Ich bin damit einverstanden, wenn Sie versuchen Sie eine MenuItemSeparator in, wird es beschweren, nur eine MenuItem kann ein Kind sein, wenn GWT versucht, das Widget zu erstellen. Da dies derzeit nicht unterstützt wird, schlage ich vor, dass Sie dies als zukünftige Erweiterung des GWT-Teams anfordern.

In der Zwischenzeit können Sie ein Trenn programmatisch hinzufügen und einen Befehl in der folgenden Art und Weise hinzufügen: Die XML-Datei:

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> 
<g:HTMLPanel> 
    <g:MenuBar ui:field="menuBar"> 
     <g:MenuItem ui:field="helpMenuItem">Help</g:MenuItem> 
     <g:MenuItem ui:field="aboutMenuItem">About</g:MenuItem> 
     <g:MenuItem ui:field="siteMapMenuItem">Site Map</g:MenuItem> 
    </g:MenuBar> 
</g:HTMLPanel> 

Die Java-Datei (en):

public class Menu extends Composite { 
... 
@UiField MenuBar menuBar; 
@UiField MenuItem helpMenuItem; 
... 
public Menu() { 
    initWidget(uiBinder.createAndBindUi(this)); 
    // insert a separator 
    menuBar.insertSeparator(1); 
    // attach commands to a menu item 
    helpMenuItem.setCommand(new MenuCommand(HistoryToken.Help)); 
    ... 
} 

public class MenuCommand implements Command { 
    final HistoryToken historyToken; 

    public MenuCommand(HistoryToken historyToken) { 
     this.historyToken = historyToken; 
    } 

    @Override 
    public void execute() { 
     historyToken.fire(); 
    } 
} 

public enum HistoryToken { 
    Help,About,SiteMap; 

    public void fire(){ 
     History.newItem(this.toString()); 
    } 
} 


Anderswo in meinem Code, implementierte ich eine HistoryListener um alle Änderungen abzufangen, dh

class HistoryManager implements ValueChangeHandler<String> { 
    // 1. get token 
    // 2. change it into a HistoryToken 
    // 3. perform switch statement 
    // 4. change contents based upon HistoryToken found 
... 
} 
2

Für (1) JavaDoc sagt:

Verwendung in UiBinder Vorlagen MenuBar Elemente in UiBinder Vorlagendateien ein vertikales Boolesche Attribut haben kann (die standardmäßig auf false) und kann nur MenuItem Elemente als Kinder hat. MenuItems können HTML und MenuBars enthalten.

Zum Beispiel:

<g:MenuBar> 
    <g:MenuItem>Higgledy 
    <g:MenuBar vertical="true"> 
     <g:MenuItem>able</g:MenuItem> 
     <g:MenuItem>baker</g:MenuItem> 
     <g:MenuItem>charlie</g:MenuItem> 
    </g:MenuBar> 
    </g:MenuItem> 
    <g:MenuItem>Piggledy 
    <g:MenuBar vertical="true"> 
     <g:MenuItem>foo</g:MenuItem> 
     <g:MenuItem>bar</g:MenuItem> 
     <g:MenuItem>baz</g:MenuItem> 
    </g:MenuBar> 
    </g:MenuItem> 
    <g:MenuItem><b>Pop!</b> 
    <g:MenuBar vertical="true"> 
     <g:MenuItem>uno</g:MenuItem> 
     <g:MenuItem>dos</g:MenuItem> 
     <g:MenuItem>tres</g:MenuItem> 
    </g:MenuBar> 
    </g:MenuItem> 
</g:MenuBar> 

den Hinweis aus den Worten nehmen "nur MenuItem Elemente als Kinder", meine Vermutung ist, dass MenuItemSeparator s

+0

Ich frage mich, weil das Eclipse-Plugin zu erkennen scheint ... – Marc

1

Ich weiß, diese Frage ist alt, aber ich halte über diese Frage in meinen Google-Suchen ausgeführt wird, so dachte ich, es wäre wichtig zu beachten, dass, obwohl ich es nicht überall noch dokumentiert gesehen habe, habe ich Verwendung:

< g: MenuItemSeparator/>

erfolgreich in meiner UiBinder Vorlage. Das gwt Eclipse Plugin gibt mir einen roten Fehlermarker, aber der MenuItemSeparator kompiliert und zeigt ok. Ich benutze gwt 2.1.

Nur gedacht, dass jemand interessiert sein könnte zu wissen.

Leider habe ich noch keine Lösung für # 2 gesehen - aber ich hoffe sie geben uns bald etwas.

0

Es ist möglich, einen menuItemSeparator in der Datei ui.xml hinzuzufügen. Hier ist ein Beispiel mit Trennzeichen und Untermenü von official GWT-API page.

+0

wo ist es? Dieser Link bietet keine Antwort. –

2

Hier ist ein Beispiel für meine Lösung, die mit GWT 2.4.0 recht gut funktioniert.

UiBinder:

<g:MenuBar vertical='true' ui:field='mainMenu'> 
    <g:MenuItem ui:field='item1'>Item 1</g:MenuItem> 
    <g:MenuItem ui:field='item2'>Item 2</g:MenuItem> 
    <g:MenuItemSeparator /> 
    <g:MenuItem ui:field='sub' enabled='false'> 
     Submenu 
     <g:MenuBar vertical='true' ui:field='subMenu' /> 
    </g:MenuItem> 
</g:MenuBar> 

Java:

@UiField MenuItem item1; 
@UiField MenuItem item2; 
@UiField MenuBar subMenu; 
@UiField MenuItem sub; 

... 

this.setWidget(uiBinder.createAndBindUi(this)); 
item1.setCommand(new Command() { 
    public void execute() { 
     History.newItem("item1"); 
    } 
}); 

Insgesamt nicht allzu schlecht.

0

Nun, ich denke, ich habe einen Weg gefunden, dies zu implementieren. (Dies ist eine Lösung, wenn Sie den Separator im Inneren der * .ui.xml Datei deklarieren möchten.)

HocusView.java

... 
    @UiField MenuBar menuBar; 
    @UiField MenuItem item1; 
    @UiField MenuItem item2; 
    @UiField MenuItem item3; 
    @UiField MenuItem item4; 
... 

    private static HocusViewUiBinder uiBinder = GWT.create(HocusViewUiBinder.class); 

    @UiTemplate("Hocus.ui.xml") 
    interface HocusViewUiBinder extends UiBinder<Widget, HocusView>{} 

    public HocusView() 
    { 
     initWidget(uiBinder.createAndBindUi(this)); 
     // Attach commands to menu items 
     menuItem1.setScheduledCommand(cmd_menuItem1); 
     menuItem2.setScheduledCommand(cmd_menuItem2); 
     menuItem3.setScheduledCommand(cmd_menuItem3); 
     menuItem4.setScheduledCommand(cmd_menuItem4); 

    } 


    Command cmd_menuItem1= new Command(){ 
    @Override 
    public void execute() { 
     Window.alert(" Gifts "); 
     } 
    }; 
    Command cmd_menuItem2 = new Command(){ 
     @Override 
     public void execute() { 
      Window.alert(" Gifts "); 
     } 
    }; 
    Command cmd_menuItem3 = new Command(){ 
     @Override 
     public void execute() { 
      Window.alert(" Gifts "); 
     } 
    }; 
    Command cmd_menuItem4 = new Command(){ 
     @Override 
     public void execute() { 
      Window.alert(" Gifts "); 
     } 
    }; 



    }); 

HocusView.ui.xml

<gwt:MenuBar ui:field="menuBar" > 
    <gwt:MenuItem ui:field="menuItem1">Search</gwt:MenuItem> 
    <gwt:MenuItemSeparator></gwt:MenuItemSeparator> 
    <gwt:MenuItem ui:field="menuItem2">Ingestion</gwt:MenuItem> 
    <gwt:MenuItemSeparator></gwt:MenuItemSeparator> 
    <gwt:MenuItem ui:field="menuItem3">Analysis</gwt:MenuItem> 
    <gwt:MenuItemSeparator></gwt:MenuItemSeparator> 
    <gwt:MenuItem ui:field="menuItem4">About</gwt:MenuItem> 
    </gwt:MenuBar> 

So einfach ist das. Dies fügt ein Trennzeichen zwischen den Menüpunkten hinzu.

Prost!

Verwandte Themen