vaadin Navigator 실습

vaadin에서 SPA(Single Page Application, 화면의 필요한 부분만 갱신) 방식의 페이지 이동은 com.vaadin.navigator.Navigator로 구현한다.

갱신이 필요한 부분 = Fragment = View(?)

Addview로 추가하고, navigateTo메서드로 View이동을 요청하면 viewContainer영역이 동적으로 변경된다.

navigator는 UI를 기준으로 동작한다.

 

SPA방식의 페이지에 좌측 메뉴+우측 콘텐츠 형태의 레이아웃을 잡고,

버튼으로 개별 메뉴 구성, 클릭시 우측 콘텐츠가 바뀌는 형태다.

우측 컨텐츠 영역은 화면의 영역 중 빈부분을 최대로 채우도록 처리한다.( layout.setExpandRatio(content, 1) )

 

About~UserListView는 VerticalLayout을 상속받고 View인터페이스를 구현한다.

8.2 이상을 사용한다면 UI에 @PushStateNavigation 적용 시 hashbang은 제거되고 view_name으로 URL이 변경된다.

 

 

 

81~84라인을 확인하자.

확인하려면 각 View의 enter메서드에 hashCode값을 출력하도록 코딩해야 한다.

AddView argument 중 HomeView.class로 class를 전달한 경우(①)와 new DashBoard()로 instance를 전달한 경우(②)가 있다.

①의 경우 동일 UI내에서 요청이 있을 때마다 신규 instance가 생성되고,

②의 경우 동일 UI내에서 요청이 있을때마다 instance가 존재할 경우 재사용(static) 한다.

package com.vseminar.vaadin_seminar2;

import javax.servlet.annotation.WebServlet;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.annotations.Widgetset;
import com.vaadin.navigator.Navigator;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.themes.ValoTheme;
import com.vseminar.vaadin_seminar2.view.AboutView;
import com.vseminar.vaadin_seminar2.view.DashBoardView;
import com.vseminar.vaadin_seminar2.view.HomeView;
import com.vseminar.vaadin_seminar2.view.UserListView;

/**
 * This UI is the application entry point. A UI may either represent a browser window
 * (or tab) or some part of a html page where a Vaadin application is embedded.
 * <p>
 * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be
 * overridden to add component to the user interface and initialize non-component functionality.
 */
/**
*
* Description
*
*
* @author hyperrookie@gmail.com
*
* @version 1.0.0
* @date 2018. 6. 18.
*=======================================================================
* Date            Name                     Revision History
*=======================================================================
* 2018. 6. 18.    hyperrookie@gmail.com    Creation
*=======================================================================
*/
@SuppressWarnings("serial")
@Theme("vseminar")
@Widgetset("com.vseminar.vaadin_seminar2.VSeminarWidgetset")
public class VSeminarUI extends UI {

	private static final Logger logger = LoggerFactory.getLogger(VSeminarUI.class);
	private Navigator navigator;

    @Override
    protected void init(VaadinRequest vaadinRequest) {

    	logger.debug("vaadinRequest ----------> {}", vaadinRequest);

        final HorizontalLayout layout = new HorizontalLayout();
        final VerticalLayout menu = new VerticalLayout();
        final CssLayout content = new CssLayout();

        layout.setSizeFull();
        layout.setSpacing(true);
        layout.setMargin(true);

        menu.setWidth(200,Unit.PIXELS);
        menu.setSpacing(true);
        menu.setDefaultComponentAlignment(Alignment.TOP_CENTER);

        content.setStyleName("layout-with-border");
        content.setSizeFull();

        layout.addComponents(menu,content);
        layout.setExpandRatio(content, 1);
        setContent(layout);

        navigator = new Navigator(this, content);
        navigator.addView(HomeView.VIEW_NAME, HomeView.class);
        navigator.addView(DashBoardView.VIEW_NAME, new DashBoardView());
        navigator.addView(UserListView.VIEW_NAME, new UserListView());
        navigator.addView(AboutView.VIEW_NAME, new AboutView());

        Button button1 = new Button("Home");
        button1.setWidth(90,Unit.PERCENTAGE);
        button1.addClickListener(e->{
        	navigator.navigateTo(HomeView.VIEW_NAME);
        });

        Button button2 = new Button("Dashboard");
        button2.setWidth(90,Unit.PERCENTAGE);
        button2.addClickListener(e->{
        	navigator.navigateTo(DashBoardView.VIEW_NAME);
        });

        Button button3 = new Button("UserList");
        button3.setWidth(90,Unit.PERCENTAGE);
        button3.addClickListener(e->{
        	navigator.navigateTo(UserListView.VIEW_NAME);
        });

        Button button4 = new Button("About");
        button4.setWidth(90,Unit.PERCENTAGE);
        button4.addClickListener(e->{
        	navigator.navigateTo(AboutView.VIEW_NAME);
        });

        menu.addComponents(button1, button2, button3, button4);
    }

    @WebServlet(urlPatterns = "/*", name = "VSeminarUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = VSeminarUI.class, productionMode = false)
    public static class VSeminarUIServlet extends VaadinServlet {
    }
}