GWT : UiBinder의 메뉴

Question

GWT 2.0의 UiBinder를 통한 선언적 접근 방식을 사용하여 메뉴 (MenuBar, MenuItem)를 구현하고 싶습니다.

1. .ui.xml 파일에 MenuItemSeparators을 추가 할 수있는 방법이 있나요 :

   나는 두 가지 문제로 실행 한? 따라서 까지 MenuBar 및 MenuItem 태그를 파일에 넣기 만했습니다.

2. @UiHandler을 사용하여 GWT는 이벤트 처리기에 대한 상용구 코드를 작성합니다. 메뉴의 경우 명령을 작성해야합니다. 은 UiBinder 방식을 사용하여 어떻게해야합니까? .ui.xml 파일에 넣을 태그 이 있습니까? 명령 처리기에 대한 보일러 플레이트 코드를 직접 작성해야합니까?

이러한 질문에 대해 생각해 주셔서 감사합니다! (1) JavaDoc를 들어

Answer 1

을 지원하지 않는 것입니다 MenuItemSeparator을 넣으려고하면 GWT가 위젯을 만들려고 시도 할 때 자식이 될 수 있다는 메시지가 MenuItem 일 뿐이라고 불평 할 것입니다. 현재 지원되지 않으므로 향후 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> 

자바 파일 (들) :

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

Answer 2

는 말한다 : UiBinder 템플릿 파일에서 UiBinder 템플릿 MenuBar 구성 요소

사용 (기본값은 false) 수직 부울 속성을 가질 수 있고만을 자식으로 MenuItem의 요소가있을 수 있습니다. MenuItem에는 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들, 동의

Answer 3

이 질문은 OLD 알고,하지만 난 내 구글 검색이 질문에 걸쳐 실행 유지, 그래서 나는 내가 보지 못했다하더라도 그것을 문서화하는 것이 중요 할 것이라고 생각 어디서나 아직 내가왔다 사용 :

<그램 : MenuItemSeparator/내 uibinder 템플릿에서 성공적으로 >

합니다. gwt eclipse 플러그인은 나에게 빨간색 오류 표시자를 표시하지만 MenuItemSeparator가 컴파일되어 표시됩니다. 나는 gwt 2.1을 사용하고있다.

그냥 누군가가 관심을 가질만한 것으로 생각했습니다.

# 2에 대한 해결책을 아직 보지 못했지만 곧 우리에게 뭔가를 줄 수 있기를 바랍니다.

Answer 4

ui.xml 파일에 menuItemSeparator를 추가 할 수 있습니다. 다음은 official GWT-API page의 구분 기호 및 하위 메뉴가있는 예입니다.

Answer 5

다음은 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> 

자바 :

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

전반적으로 너무 나쁘지 않다.

Answer 6

글쎄, 내가 이것을 구현하는 방법을 찾은 것 같아요. (당신이 * .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> 

간단합니다. 메뉴 항목 사이에 구분 기호가 추가됩니다.

건배!