GWT: меню в UiBinder - PullRequest
       36

GWT: меню в UiBinder

6 голосов
/ 21 января 2010

Я хотел бы реализовать меню (MenuBar, MenuItem), используя декларативный подход через UiBinder в GWT 2.0.

Я столкнулся с двумя проблемами:

  1. Есть ли способ добавить MenuItemSeparators в файл .ui.xml? Так до сих пор мне удалось только поместить MenuBar- и MenuItem-теги в файл.

  2. Используя @UiHandler, GWT записывает стандартный код для события обработчики для меня. Для меню мне нужно написать команды. Кто я должен сделать это с использованием подхода UiBinder? Есть ли команда тег для размещения в файле .ui.xml? Должен ли я написать шаблон сам код для обработчиков команд?

Спасибо, что подумали над этими вопросами!

Ответы [ 6 ]

7 голосов
/ 15 февраля 2010

Я согласен, если вы попытаетесь вставить MenuItemSeparator, он будет жаловаться на то, что только MenuItem может быть дочерним, когда GWT пытается создать виджет. Поскольку это в настоящее время не поддерживается, я предлагаю вам запросить это в качестве будущего усовершенствования для команды GWT.

Тем временем вы можете программно добавить разделитель и добавить команду следующим образом: Файл 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>

Файл (ы) 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());
    }
}


В другом месте в моем коде я реализовал HistoryListener для отслеживания любых изменений, т.е.

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 голосов
/ 30 марта 2012

Вот пример моего решения, которое, похоже, хорошо работает с 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");
    }
});

В целом неплохо.

2 голосов
/ 21 января 2010

Для (1) JavaDoc говорит:

Использование в шаблонах UiBinder Элементы MenuBar в файлах шаблонов UiBinder могут иметь вертикальный логический атрибут (по умолчанию false) и могут иметь только элементы MenuItem в качестве дочерних элементов. MenuItems могут содержать HTML и MenuBars.

Например:

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

Намекая на слова " только элементы MenuItem как дочерние элементы ", я предполагаю, что MenuItemSeparator s не поддерживаются

1 голос
/ 18 августа 2011

Я знаю, что этот вопрос СТАРЫЙ, но я постоянно сталкиваюсь с этим вопросом в своих поисках в Google, поэтому я подумал, что было бы важно отметить, что, хотя я еще нигде не видел его, я использовал:

<г: MenuItemSeparator />

успешно в моем шаблоне uibinder. Плагин gwt eclipse дает мне красный маркер ошибки, но MenuItemSeparator компилируется и отображается нормально. Я использую GWT 2.1.

Просто подумал, что кому-то может быть интересно узнать.

К сожалению, я еще не видел решения для # 2 - но я надеюсь, что они скоро нам что-нибудь дадут.

0 голосов
/ 21 февраля 2014

Ну, я думаю, что нашел способ реализовать это. (Это решение, если вы хотите объявить разделитель внутри файла * .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>  

Это так просто. Это добавит разделитель между пунктами меню.

Ура!

0 голосов
/ 13 марта 2012

Возможно добавить menuItemSeparator в файл ui.xml. Вот пример с разделителем и подменю на официальной странице GWT-API .

...