DBILITY

vaadin flow navigation lifecycle 본문

front-end & ui/vaadin flow

vaadin flow navigation lifecycle

DBILITY 2018. 9. 6. 19:52
반응형

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

 

Navigation이 이루어질 때 다수의 Lifecycle Event가 발생하며, 이벤트는 UI 인스턴스에 추가된 리스너와 observer interface를 구현한 모든 Component들에 발생한다. 이벤트의 순서는 이동이라는 관점에서 볼 때 머무르는 곳에서 떠나는 것을 시작으로 목적지에 도착 후까지로 생각하면 쉽게 이해가 되겠다. 머물러야 떠날 수 있다. 나름 철학적이네? 예제는 공식 사이트 문서를 참조하자.

  1. BeforeLeaveEvent
    Navigation 중 발생하는 첫 번째 Event로, Navigation을 지연, 취소 또는 목적지를 변경할 수 도 있다.
    BeforeLeaveEvent는 Navigation이 시작되기 전에 UI에 연결(attach)되고, BeforeLeaveObserver interface를 구현한 Component 인스턴스에 전달된다.
    addBeforeLeaveListener(BeforeLeaveListener) 메서드를 통해 독립된(standalone) 리스너를 등록할 수 도 있습니다. 일반적인 사용 사례 중 하나는 사용자에게 응용 프로그램의 다른 부분으로 이동하기 전에 저장하지 않은 변경 내용을 저장할지 여부를 확인하는 것이다.
    BeforeLeaveEvent에는 postpone 메서드가 있어 특정 조건이 충족 될 때까지 현재 navigation의 전환을 연기할 수 있다.
  2. BeforeEnterEvent
    네비게이션 중 발생하는 두 번째 Event로, Navigation 목적지를 변경하여 이동(event.rerouteTo 메서드 이용)할 수 있다. 일반적으로 표시할 데이터가 없거나 사용자에게 적절한 권한이 없는 경우와 같은 특수한 상황에 대응하기 위해 사용할 수 있다. Navigation 완료 후 UI에 연결될 BeforeEnterObserver를 구현하는 모든 Component 인스턴스에 전달된다. UI가 탐색할 위치와 일치하도록 Component를 분리하고 연결하기 전에 이벤트가 시작된다. UI의 addBeforeEnterListener(BeforeEnterListener) 메서드를 사용하여 독립형(standalone) 리스너를 등록할 수도 있다.
  3. AfterNavigationEvent
    Navigation 중 세 번째 및 마지막으로 발생하는 Event로 일반적으로 Navigation이 완료되면 UI의 다양한 부분을 업데이트하는데 사용된다. 예를 들어 사이트 이동경로를 표시하는(Breadcrumb) Component의 내용을 변경하거나 메뉴의 항목을 활성(Active) 상태로 표시할 수 있다.
    AfterNavigationEvent는 Navigation이 완료된 후 연결된 AfterNavigationObserver interface를 구현한 모든 Component에 전달되며, addAfterNavigationListener(AfterNavigationListener) 메서드를 통해 독립된(standalone) 리스너를 등록할 수도 있다.

 

반응형

'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 router layouts and nested router targets  (0) 2018.09.08
vaadin flow route  (0) 2018.09.06
vaadin flow  (0) 2018.09.06
Comments