DBILITY

vaadin flow router layouts and nested router targets 본문

front-end & ui/vaadin flow

vaadin flow router layouts and nested router targets

DBILITY 2018. 9. 8. 22:21
반응형

공식 사이트 문서를 참조하여 작성하였다.

 

@Route("path") Annotation을 사용하여 경로를 정의할 때 Component는 기본적으로 html페이지의 <body> Tag 내부에 Rendering 된다 (HasElement.getElement()에 의해 반환된 요소는 <body>에 연결).

ParentLayout은 @Route Annotation내에 layout 메소드를 사용하여 정의할 수 있다. 다음 예제는 CompanyComponent가 MainLayout이라는 Layout 내부에 Rendering 한다.

@Tag("div")
@Route(value="company", layout=MainLayout.class)
public class CompanyComponent extends Component {
}
 

상위(parent) layout으로 사용되는 모든 layout은 RouterLayout Interface를 구현해야 한다.

위 예의 ParentLayout으로 지정된 MainLayout.class도 RouterLayout을 구현하고 있어야 한다.

동일한 상위 layout을 사용하는 router target Component 사이에 Navigation이 일어날 때 상위 layout의 instance는 유지된다.

parent layout을 계층형으로 구성할 수 도 있으며, 계층의 깊이는 제한이 없다. 다음 예는 TutorialView나 IconsView로 Navigation이 일어날 때 항상 MenuBar layout을 포함한 MainLayout을 갖게 된다.(MainLayout Div내에 MenuBar VerticalLayout이 위치)

public class MainLayout extends Div implements RouterLayout {
    public MainLayout() {
        setSizeFull();
        setId("mainLayout");
    }
}

@ParentLayout(MainLayout.class)
public class MenuBar extends VerticalLayout implements RouterLayout {
    public MenuBar() {
        addMenuElement(TutorialView.class, "Tutorial");
        addMenuElement(IconsView.class, "Icons");
    }
    private void addMenuElement(Class<? extends Component> navigationTarget,
            String name) {
        // implementation omitted
        add(new RouterLink(name, navigationTarget));
    }
}

@Route(value = "tutorial", layout = MenuBar.class)
public class TutorialView extends Div {

	public TutorialView() {
		setText("TutorialView");
	}
}

@Route(value = "icons", layout = MenuBar.class)
public class IconsView extends Div {

	public IconsView() {
		setText("IconView");
	}
}

 

상위 layout에서 제공된 Navigation 경로(@RoutePrefix Annotation에 의해)에 하위 Component에서 추가 경로를 설정(경로 체인)할 수 있다. 아래의 예제는 상위 Layout인 SomeParent.class에 "some"을 경로를 설정하고, 하위 Component PathComponent.class에 "path" 경로로 설정할 경우 PathComponent의 Navigation은 "some/path"형태로 접근할 수 있다.

@RoutePrefix("some")
public class SomeParent extends Div implements RouterLayout {
    setId("someParent");
    setText("SomeParent");
}

@Route(value = "path", layout = SomeParent.class)
public class PathComponent extends Div {
   setId("pathComponent");
   setText("PathComponent");
}

 

동일한 상위 layout을 사용하는 하위 Component에서 @Route 또는 @ParentPrefix로 선언된 경로 설정을 무시하고, Component에서 설정한 경로로 접근을 원한 때 경로 설정 시 absolute=ture를 사용하여 상위 경로를 무시하고 고정된 경로를 사용할 수 도 있다.

@Route(value = "content", layout = SomeParent.class, absolute = true)
public class MyContent extends Div {
    // Implementation omitted
}

 

위 예제는 상위 layout으로 @RoutePrefix가 설정된 SomeParent.class를 사용하나 absolute=true를 설정하였으므로, Navigation은 전체 경로가 "some/content"라 하더라도 "content"만 접근할 수 있다. 당연한 것이지만 3단계 이상의 경로상에서 중간에 고정된 경로 처리되어 있을 경우 상위 경로를 무시하고 처리할 수 있다. 다음 예제는 전체 경로가 "some/framework/tutorial"이지만 "framework/tutorial"로 바인딩된다. 만약 Tutorial.class에 @Route("")로 경로가 설정될 경우 "framework/"로 바인딩된다.

@RoutePrefix(value = "framework", absolute = true)
@ParentLayout(SomeParent.class)
public class FrameworkSite extends Div implements RouterLayout {
	public FrameworkSite() {
		setId("frameworkSite");
		setText("FrameworkSite");
	}
}

@Route(value = "tutorial", layout = FrameworkSite.class)
public class Tutorials extends Div {
	public Tutorials() {
		setId("tutorial");
		setText("Tutorials");
	}
}

 

8 버전까지 존재하던 View interface는 존재하지 않는다.

반응형

'front-end & ui > vaadin flow' 카테고리의 다른 글

vaadin flow routing and URL parameters  (0) 2018.09.10
Vaadin 10 learning resources  (0) 2018.09.09
vaadin flow navigation lifecycle  (0) 2018.09.06
vaadin flow route  (0) 2018.09.06
vaadin flow  (0) 2018.09.06
공유하기 링크
'front-end & ui/vaadin flow' Related Articles more
Comments