2010-01-21 23 views
6

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

me he encontrado con dos problemas:

  1. ¿Hay una manera de añadir MenuItemSeparators en el archivo .ui.xml? Así que ahora, solo he logrado colocar MenuBar- y MenuItem-tags en el archivo .

  2. Usando @UiHandler, GWT escribe el código repetitivo para los controladores de eventos para mí. Para los menús, necesito escribir comandos. ¿Cómo se supone que yo haga usando el enfoque de UiBinder? ¿Hay una etiqueta de comando para poner en el archivo .ui.xml? ¿Tengo que escribir el código repetitivo para los manejadores de comandos yo mismo?

¡Gracias por su respuesta a estas preguntas!

Respuesta

7

Estoy de acuerdo, si Trate de poner un MenuItemSeparator en, se quejará diciendo que solo un MenuItem puede ser un niño cuando GWT intenta crear el widget. Como esto no es compatible actualmente, le sugiero que lo solicite como una mejora futura para el 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 (s) de Java:

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, implementé un HistoryListener para detectar 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 
... 
} 
2

Para (1) JavaDoc dice:

uso de plantillas UiBinder elementos MenuBar en archivos de plantilla UiBinder puede tener un atributo booleano vertical (que por defecto es falso), y puede tener sólo elementos MenuItem cuando eran niños. MenuItems puede 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> 

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

+0

Me preguntaba porque el plugin de Eclipse parece reconocer ... – Marc

1

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

< g: MenuItemSeparator/>

con éxito en mi plantilla UiBinder. El plugin gwt eclipse me da un marcador de error rojo, pero MenuItemSeparator compila y muestra ok. Estoy usando gwt 2.1.

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

Desafortunadamente, todavía no he visto una solución para el n. ° 2, pero espero que nos den algo pronto.

0

Es posible agregar un menuItemSeparator en el archivo ui.xml. Aquí hay un ejemplo con separador y submenú del official GWT-API page.

+0

¿dónde está? Este enlace no proporciona una respuesta. –

2

Aquí hay un ejemplo de mi solución para esto, que parece funcionar 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"); 
    } 
}); 

general no está mal.

0

Bueno, creo que encontré 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 eso. Esto agregará un separador entre los elementos del menú.

¡Salud!

Cuestiones relacionadas