GWT: Menús en UiBinder

Question

Me gustaría implementar menús (MenuBar, MenuItem) utilizando el enfoque declarativo través UiBinder en GWT 2.0.

Me he encontrado dos problemas:

1. ¿Hay una manera de agregar MenuItemSeparators en el archivo .ui.xml? Entonces ahora, sólo he conseguido poner MenuBar- y MenuItem-tags en el archivo.

2. El uso de @UiHandler, GWT escribe el código estándar para el evento manejadores para mí. Para los menús, lo que necesito para escribir comandos. Como estoy se supone que hace esto usando el enfoque UiBinder? ¿Hay un comando etiqueta para poner en el archivo .ui.xml? ¿Tengo que escribir el texto modelo código de los controladores de comandos a mí mismo?

Gracias por pensar en estas preguntas!

Answer 1

Estoy de acuerdo, si se intenta poner un MenuItemSeparator en, se quejará indicando solamente un MenuItem puede ser un niño cuando GWT intenta crear el widget. Como esto no se admite actualmente, sugiero que usted solicita esto como una futura mejora al equipo de GWT.

Mientras tanto, se puede añadir un separador de programación y añadir un comando de la siguiente manera: El archivo XML:

<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>

El archivo Java (s):

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

En otra parte de mi código, he implementado un HistoryListener para atrapar cualquier cambio, es decir.

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
...
}  

Answer 2

Para (1) JavaDoc dice:

  

El uso de plantillas UiBinder   MenuBar elementos en archivos de plantilla UiBinder pueden tener un atributo booleano vertical (que por defecto es false), y pueden tener sólo elementos MenuItem cuando eran niños. MenuItems pueden contener HTML y MenuBars.

     

Por ejemplo:

 <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>

Tomando la indirecta de las palabras " únicos elementos MenuItem como los niños ", mi suposición es que MenuItemSeparator s no son compatibles

Answer 3

Este es un ejemplo de mi solución a este, que parece que funciona bastante bien con GWT 2.4.0.

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

En general no está mal.

Answer 4

Sé que esta pregunta es viejo, pero sigo corriendo a través de esta pregunta en mis búsquedas de Google, así que pensé que sería importante tener en cuenta que, aunque no he visto documentado en cualquier lugar, sin embargo, he estado utilizando:

  

con éxito en mi plantilla UiBinder. El plug-in de Eclipse gwt me da un marcador rojo de error, pero las compilaciones MenuItemSeparator y se muestra bien. Estoy usando GWT 2.1.

Sólo pensó que alguien podría estar interesado en saber.

Por desgracia no he visto una solución para # 2 todavía -. Pero espero que nos dan algo pronto

Answer 5

Es posible añadir un menuItemSeparator en el archivo ui.xml. Aquí hay un ejemplo con separador y submenú desde el página oficial de GWT-API .

Answer 6

Bueno, creo que he encontrado una forma de implementar esto. (Esta es una solución si desea declarar el separador dentro del archivo .ui.xml *).

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>  

Es tan simple como that.This agregará un separador entre los elementos del menú.

Saludos!