準備技術:

1. Vaadin
2. Page UI in Vaadin

今天探討一個UI，內有多個Layout構成一個Page的情況，記得要有個getCurrentUI的方法，回傳本體。

1. 開一個Vaadin7 專案，主程式，要設置一個PageLayout。

   public class VaadinpageUI extends UI {

    private PageLayout pageLayout;
   
    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = VaadinpageUI.class)
    public static class Servlet extends VaadinServlet {
    }
   
    @Override
    protected void init(VaadinRequest request) {
   
    	pageLayout = new PageLayout();
    	setContent(pageLayout);
    }
   
    public PageLayout getPageLayout() {
        return pageLayout;
    }
   
    public static VaadinpageUI getCurrent() {
        return (VaadinpageUI) UI.getCurrent();
    }
   

   }

2. PageLayout內含幾個Layout。

   public class PageLayout extends VerticalLayout {

    private HeaderLayout headerLayout;
    private BodyLayout bodyLayout;
    private FooterLayout footerLayout;
   
    public PageLayout() {
        setMargin(true);
   
        headerLayout = new HeaderLayout();
        addComponent(headerLayout);
   
        bodyLayout = new BodyLayout();
        addComponent(bodyLayout);
   
        footerLayout = new FooterLayout();
        addComponent(footerLayout);
    }
   
    public HeaderLayout getHeaderLayout() {
        return headerLayout;
    }
   
    public BodyLayout getBodyLayout() {
        return bodyLayout;
    }
   
    public FooterLayout getFooterLayout() {
        return footerLayout;
    }
   

   }

3. 設一個Tree在左邊的Layout

   public class NavigationTree extends Tree {

    public static final String REPORTS_LABEL = "Reports";
    public static final String MY_REPORTS_LABEL = "My reports";
   
    public NavigationTree() {
        setCaption("Navigation");
   
        addItem(REPORTS_LABEL);
        setChildrenAllowed(REPORTS_LABEL, true);
   
        addItem(MY_REPORTS_LABEL);
        setParent(MY_REPORTS_LABEL, REPORTS_LABEL);
        setChildrenAllowed(MY_REPORTS_LABEL, false);
   
        expandItemsRecursively(REPORTS_LABEL);
        setNullSelectionAllowed(false);
   
        NavigationTreeListener listener = new NavigationTreeListener();
        addItemClickListener(listener);
    }
   

   }

4. Tree要設立一個Listener。

   public class NavigationTreeListener implements ItemClickEvent.ItemClickListener {

    @Override
    public void itemClick(ItemClickEvent event) {
   
        Object value = event.getItemId();
        VaadinpageUI current = VaadinpageUI.getCurrent();
   
   
        ContentLayout contentLayout = current.getPageLayout().getBodyLayout().getContentLayout();
        contentLayout.removeAllComponents();
   
        if (NavigationTree.REPORTS_LABEL.equals(value)) {
            ReportsLayout layout = new ReportsLayout();
            contentLayout.addComponent(layout);
        } else if (NavigationTree.MY_REPORTS_LABEL.equals(value)) {
            MyReportsLayout layout = new MyReportsLayout();
            contentLayout.addComponent(layout);
        }
    }
   

   }

5. 完成圖。

參考資料

1. Vaadin 官網
2. Vaadin書籍

Day17 結束