퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 네비게이션

네비게이션

이 튜토리얼에서는 Router, Navigator 및 PageControl과 같은 클래스를 사용하여 퓨즈의 기본 네비게이션 시스템이 어떻게 작동하는지에 대해 간략하게 설명합니다.

완전한 앱 예제

이 앱 예제에서는 퓨즈에서 내비게이션 시스템을 사용하는 방법을 보여줍니다:

페이지 만들기

다중 페이지 응용 프로그램을 설계할 때 각 페이지를 다음과 같이 ux:Class로 자체 UX 파일에 정의하는 것이 좋습니다:

LoginPage.ux

<Page ux:Class="LoginPage">
    <Router ux:Dependency="router" />
    <JavaScript File="LoginPage.js" />
    ...
</Page>

SettingsPage.ux

<Page ux:Class="SettingsPage">
    <Router ux:Dependency="router" />
    <JavaScript File="SettingsPage.js" />
    ...
</Page>

그리고 각 페이지마다.

각 페이지가 해당 페이지의 내부 논리를 처리하는 자체 태그를 가진 것에 유의하십시오.

대부분의 페이지는 앱의 라우터에 액세스해야 하므로 ux:Dependency=”router”로 선언합니다. 즉, 해당 페이지의 JavaScript가 해당 라우터에 액세스 할 수 있습니다. 페이지에 다른 종속성이 있는 경우 동일한 방식으로 선언할 수 있습니다.

앱 어셈블링하기

주요 UX 파일의 기본 구조는 다음과 같아야 합니다:

<App>
    <Router ux:Name="router" />
    <Navigator DefaultPath="login">
        <LoginPage ux:Template="login" router="router" />
        <HomePage ux:Template="home" router="router" />
        <SettingsPage ux:Template="settings" router="router" />
        <UserProfilePage ux:Template="user" router="router" />
    </Navigator>
</App>

ux:Template 속성은 이것이 실제 객체 인스턴스가 아니라 필요에 따라 인스턴스화 될 수 있는 템플릿임을 나타냅니다. 네비게이터는 필요에 따라 각 템플릿의 인스턴스를 인스턴스화하고 더 이상 필요없는 인스턴스를 재활용합니다.

DefaultPath는 앱이 시작되고 아직 경로가 설정되어 있지 않을 때 기본적으로 어떤 템플릿을 인스턴스화해야 하는지 지정합니다.

우리가 속성과 마찬가지로 종속성(의존성)을 주입하는 방법에 주목하십시오. 이름과 같이 종속성 이름을 소문자로 유지하는 것이 좋습니다. 이렇게 하면 개체의 이름을 바꾸지 않고 컴포넌트를 추출할 수 있으며 종속성과 속성 간의 차이를 쉽게 파악할 수 있습니다.

모든 종속성을 지정해야 합니다. 그렇지 않으면 컴파일 오류가 발생합니다.

페이지는 Page 클래스의 자식일 필요는 없습니다. Panel과 같은 모든 시각적 객체를 사용할 수 있습니다.

네비게이션에 대해 둘러보기 (평면 네이게이션[flat navigation])

위의 예에서는 로그인 템플릿(LoginPage 클래스)이 시작 페이지가 됩니다.

LoginPage에 버튼을 넣겠습니다:

<Button Text="Login" Clicked="{loginClicked}" />

LoginPage.js에서 Clicked 이벤트를 이 함수에 연결합니다:

function loginClicked() {
    // TODO: validate login credentials

    router.goto("home");
}

이것은 당신이 기대하는 것을 할 것이며, 네비게이터는 로그인 스크린을 바깥으로 이동시킬 것입니다. 짜잔! home 페이지가 나타납니다.

module.exports에 loginClicked를 추가하는걸 잊지마세요.

계층적 네비게이션(Hierarchical navigation)

계층적 네비게이션은 임시 페이지를 탐색(“pushing”)한 다음 온-스크린 버튼 또는 디바이스의 실제 Back 단추를 사용하여 사용자가 왔던 곳으로 “popping”(되돌아 감)합니다.

버튼을 눌러서 settings 페이지로 이동했다고 가정했을 때, Back 버튼은 페이지가 어디로 이동했던지 다시 돌아오게 할 것입니다.

router.push("settings");

쉽죠? 이제 안드로이드에 있는 Back 버튼은 우리를 다시 이전 페이지로 보내줄 것입니다.

로컬 프리뷰에서 Cmd/Ctrl + B를 사용하여 Back 버튼을 에뮬레이트 하십시오. iOS에서 손가락 세개를 1 초 동안 누르면 Back 버튼을 에뮬레이션 할 수 있는 메뉴를 불러옵니다.

우리는 또한 JavaScript로부터 go-back을 트리거할 수 있습니다.

router.goBack();

push()를 여러 번 사용하면 “더 깊이” 이동할 수 있습니다. 그런 다음 Back 버튼을 여러 번 눌러서 모든 것을 되돌릴 수 있습니다.

푸시 페이지의 깊은 스택 내부에서 goto()를 사용하여 스택을 삭제하고 해당 페이지로 이동하기만 하면 됩니다. 그 후에 Back 버튼을 사용하면 뒤로 물러가지 않습니다.

페이지에 매개 변수 전달하기

때로는 동일한 페이지 템플릿을 사용하지만 다른 매개 변수로 열려고 하는 경우가 있습니다.

예를 들어, user 페이지는 실제로 프로필을 표시할 사용자의 ID를 알면 도움이됩니다.

이것은 인수 객체를 라우터에 전달하면 되기에 쉽습니다:

router.push("user", { userId: id });

그러면 제공된 객체를 매개 변수로 사용하여 user 템플릿의 새 인스턴스가 일시적으로 열립니다.

UserPage.js에서 Observable Parameter를 사용하여 매개 변수를 읽을 수 있습니다. Observable Parameter를 사용하면 매개 변수의 변경 사항에 대응할 수 있습니다:

var userId = this.Parameter.map(function(param) {
    return param.userId;
});

module.exports = {
    userId: userId
};

this.Parameter가 Observable이라는 사실을 유의하십시오. 즉, 모듈을 평가할 때 해당 값을 사용할 수 있는 것은 아닙니다. 위와 같이 Observable 연산자를 사용하여 노출시키거나 onValueChanged 함수를 사용하여 핸들러를 추가하십시오:

this.Parameter.onValueChanged(module, function(param) {
    //At this point we know then new parameter value.

    //module is used to connect the lifetime of the
    //subscription to the lifetime of the module
});

UserPage.js의 루트 범위에서 UserPage 클래스의 현재 인스턴스를 참조합니다.

JavaScript에서는 this 키워드의 의미가 함수 범위에 따라 다릅니다. 모듈의 루트에서 올바른 인스턴스에 대한 참조를 가져 왔는지 확인하십시오.

같은 UserPage 인스턴스가 Navigator에 의해 재사용되어 시간 경과에 따라 다른 사용자를 표시할 수 있습니다. Parameter는 새 사용자를 표시해야 하는 경우에만 업데이트 됩니다.

다단계 네비게이션(Multi-level navigation)

탐색 단계가 하나인 것만 있는 것은 아닙니다. 예를 들어, home 화면에는 여러 페이지가 있을 수 있습니다.

Router는 이 문제를 쉽게 처리할 수 있습니다. 우리 HomePage.ux가 다음과 같이 보입니다.

<Page ux:Class="HomePage">
    <Router ux:Dependency="router" />
    <JavaScript File="HomePage.js" />
    <PageControl>
        <SocialFeedPage ux:Name="socialfeed" />
        <DirectChatsPage ux:Name="chats" />
        <PinnedMessagesPage ux:Name="pinned" />
        <RecentNotificationsPage ux:Name="recent" />
    </PageControl>
</Page>

참고: PageControl은 템플릿이 아닌 실제 페이지 객체를 가져옵니다. PageControl은 모든 페이지를 활성 상태로 유지하고 각각의 인스턴스를 하나만 유지합니다. 그것들 사이에서 스와이프 네비게이션(swipe navigation)을 허용하십시오.

Navigator와 PageControl은 모두 소위 라우터 아울렛(router outlets)입니다. 이것은 그들이 라우팅에 참여한다는 것을 의미합니다. .goto() 또는 .push()를 사용할 때 각 수준에 대한 매개 변수가 있는 다중 레벨 route를 제공할 수 있습니다.

예를 들어, 우리의 로그인 화면은 SocialFeedPage 대신에 RecentNotificationsPage로 직접 보내고 싶을 수도 있습니다. 그것은 다음과 같이 행해집니다:

router.goto("home", {}, "recent", { scrollOffset: 300 });

그게 다입니다! 먼저 Navigator가 home 템플릿으로 이동하면 해당 템플릿 내의 PageControl이 recent 페이지로 이동합니다.

이 경우 home 템플릿은 매개 변수를 사용하지 않으므로 빈 객체 ({})를 전달합니다.

한편, recent 템플릿은 매개 변수를 페이지에 전달할 수 있는 방법의 예로서 매개 변수 Observable에 {scrollOffset: 300} 매개 변수 객체를 가져옵니다.

사용자 정의 animations/transitions

기본적으로 Page 객체에는 기본적으로 Transition=”Default”가 내장되어 있습니다. 즉, 포함된 컨트롤이 의미있는 기본 전환을 정의한다는 의미입니다. 예를 들어 PageControl은 기본적으로 페이지를 가로로 슬라이드하여 들어가고 나가는 반면, Navigator에서는 왼쪽에서 밀어 넣고 끝내면 축소되어 배경으로 사라집니다.

변환을 사용자 정의하려면 먼저 기본 전환을 먼저 비활성화해야 합니다:

<Page ux:Class="SettingsPage" Transition="None">

Transition=”None”을 지정하지 않으면 사용자 정의 애니메이션이 기본 전환에 “on top of” 또는 “in addition to”가 됩니다.

Navigator는 퓨즈의 표준 네비게이션 애니메이션 시스템과 함께 작동합니다. 즉, 페이지 전환은 다음 트리거에 의해 정의됩니다:

  • EnteringAnimation – 들어오는 페이지(active 페이지가 되는 페이지)에 대해 역방향으로 재생됩니다.
  • ExitingAnimation – push로 대체된 페이지에 대한 전달 재생
  • RemoveAnimation – goto로 인해 제거된 페이지에 대한 전달을 재생

goBack()하면, 반대로 동작합니다:

  • EnteringAnimation – goBack에 의해 삭제된 페이지에 대한 전달을 재생했습니다.
  • ExitingAnimation – goBack에 의해 복구되는 페이지에 대해 거꾸로 재생됨

이 시스템은 이해하는 데 약간 까다로울 수 있지만, 사실 네 가지 경우 모두를 완전히 사용자 정의할 수 있어야 합니다.

예제:

<Page ux:Class="SettingsPage" Transition="None">
    <EnteringAnimation>
        <Move X="1" RelativeTo="Size" Duration="0.4" Easing="BackOut" />
    </EnteringAnimation>
    <ExitingAnimation>
        <Move Y="1" RelativeTo="Size" Duration="0.4" Easing="CubicIn" />
    </ExitingAnimation>
    ...
</Page>

이렇게 하면 settings 페이지가 왼쪽에서 부터 들어가고 화면 하단으로 빠져 나옵니다. , scaling, rotation 또는 어떤 느낌이든 추가하여 마음껏 즐기십시오.

많은 페이지가 있고 전환 코드를 공유하기를 원하면 공통 기본 클래스를 만들 수 있습니다:

<Page ux:Class="FancyTransitionPage" Transition="None">
    <EnteringAnimation>
        <Move X="1" RelativeTo="Size" Duration="0.4" Easing="BackOut" />
    </EnteringAnimation>
    <ExitingAnimation>
        <Move Y="1" RelativeTo="Size" Duration="0.4" Easing="CubicIn" />
    </ExitingAnimation>
</Page>

그런 다음 이를 페이지의 기본 클래스로 사용하십시오.

<FancyTransitionPage ux:Class="SettingsPage">
    ...
</FancyTransitionPage>

ActivatingAnimation, WhileActive 등과 같은 다른 탐색 기반 트리거도 PageControl과 Navigator에서 예상대로 작동합니다.

끝!

이제 앱 탐색(navigation) 및 구조화를 위한 고급 확장형 모델을 사용할 수 있게 되었습니다.

[[ 동영상 강좌 ]]

Was this article helpful to you? Yes No

How can we help?