Navigation and routing

Navigation과 routing은 Single Page Applications(SPA)의 핵심기능으로 사용자인터페이스를 가상페이지(views)로 정리하고 가상페이지들 사이에서 이동하도록 한다.

Page route

Page route는 #심볼뒤 애플리케이션URL일부다.

기본 애플리케이션 라우트는 /인데, 모든 라우트는 /로 시작한다. 애플리케이션 라우트는 page.route 프러퍼티를 통해 얻는다.

import flet as ft

def main(page: ft.Page):
    page.add(ft.Text(f"Initial route: {page.route}"))

ft.app(target=main, view=ft.AppView.WEB_BROWSER)

URL 라우트를 변경될때 마다 Flet은 page.on_riute_change이벤트를 호출한다.

import flet as ft

def main(page: ft.Page):
    page.add(ft.Text(f"Initial route: {page.route}"))

    def route_change(e: ft.RouteChangeEvent):
        page.add(ft.Text(f"New route: {e.route}"))

    page.on_route_change = route_change
    page.update()

ft.app(target=main, view=ft.AppView.WEB_BROWSER)

URL을 여러차례 업데이트하고 뒤로가기/앞으로 버튼을 눌러보면 라우트가 바뀔때마다 페이지에 새 메시지가 나올 것이다.

라우트는 page.route프러퍼티를 업데이트해서 변경할 수 있다.

import flet as ft

def main(page: ft.Page):
    page.add(ft.Text(f"Initial route: {page.route}"))

    def route_change(e: ft.RouteChangeEvent):
        page.add(ft.Text(f"New route: {e.route}"))

    def go_store(e):
        page.route = "/store"
        page.update()

    page.on_route_change = route_change
    page.add(ft.ElevatedButton("Go to Store", on_click=go_store))

ft.app(target=main, view=ft.AppView.WEB_BROWSER)

"Go to Store"버튼을 클릭하면 URL이 변경되고 새아이템이 브라우저 히스토리에 쌓인다. 뒤로가기 버튼을 클릭하면 이전 라우트로 이동하게 된다.

Page views

Flet page는 하나의 페이지가 아니라 샌드위치처럼 층층이 쌓은 View 컨테이너이다.

view모음은 내비게이션 히스토리를 나타내는 데, Page는 page.views프러퍼티를 통해 view컬렉션에 접근할 수 있다.

목록 마지막 view는 페이지에 현재 표시된 뷰이다. 뷰리스트는 최소 한 개의 원소를 가진다.

Building views on route change

신뢰할만한 내비게이션을 만들려면 뷰리스트를 만드는 장소가 하나 있어야 한다. 내비게이션 히스토리 스택은 라우트함수가 되어야 한다.
이런 장소가 page.on_route_change 이벤트핸들러다.
두 개의 페이지를 이동하는 복잡한 예를 보면:

import flet as ft

def main(page: ft.Page):
    page.title = "Routes Example"

    def route_change(route):
        page.views.clear()
        page.views.append(
            ft.View(
                "/",
                [
                    ft.AppBar(title=ft.Text("Flet app"), bgcolor=ft.colors.SURFACE_VARIANT),
                    ft.ElevatedButton("Visit Store", on_click=lambda _: page.go("/store")),
                ],
            )
        )
        if page.route == "/store":
            page.views.append(
                ft.View(
                    "/store",
                    [
                        ft.AppBar(title=ft.Text("Store"), bgcolor=ft.colors.SURFACE_VARIANT),
                        ft.ElevatedButton("Go Home", on_click=lambda _: page.go("/")),
                    ],
                )
            )
        page.update()

    def view_pop(view):
        page.views.pop()
        top_view = page.views[-1]
        page.go(top_view.route)

    page.on_route_change = route_change
    page.on_view_pop = view_pop
    page.go(page.route)


ft.app(target=main, view=ft.AppView.WEB_BROWSER)

Route templates

Flet은 TemplateRoute 를 제공한다.

troute = TemplateRoute(page.route)

if troute.match("/books/:id"):
    print("Book view ID:", troute.id)
elif troute.match("/account/:account_id/orders/:order_id"):
    print("Account:", troute.account_id, "Order:", troute.order_id)
else:
    print("Unknown route")

URL strategy for web

Flet 웹앱은 두 가지 방식의 URL기반 라우팅을 제공한다.

• Path (default) - paths are read and written without a hash. For example, fletapp.dev/path/to/view.
• Hash - paths are read and written to the hash fragment. For example, fletapp.dev/#/path/to/view.
  URL방식을 변경하려면 flet.app메서드의 route_url_strategy 매개변수를 사용한다.

ft.app(target=main, route_url_strategy="hash")