웹 서비스를 만들거나 사용하다 보면, 한 UI Page 내부에 여러가지 기능을 넣어야 할 때가 있다.
그러나 한정된 페이지 공간 안에 이런저런 기능 및 요소들을 욱여넣다보면 스크롤이 너무나 길어져 사용자의 편의성이 저해되거나, 스크롤을 하지 않겠다고 요소의 크기를 줄여 다닥다닥 붙여버리면 마찬가지로 시인성과 편의성이 떨어지게 된다. 이러한 사태를 막기 위해 보통의 서비스들에서 자주 차용하는 방식이 한 페이지 내에서 여러개의 탭을 두어 클릭에 따라 자유롭게 전환하도록 하는 것이다.
이렇게 했을 때, 별도의 페이지 이동 없이 다양한 요소를 넣을 수 있어 페이지별로 기능을 카테고리화 하기 더 편해지고, 사용자의 이용 편의성도 증가시킬 수 있다.
Anvil은 기본적으로 Form이라는 페이지 요소를 기반으로 페이지 간 링크를 통해 이동하는 방식을 사용하게 되는데, 이러면 아래와 같이 텔레토비 동산에서 보라돌이, 뚜비, 나나,뽀 페이지로 갔다가 돌아올 수 있도록 페이지 간 상호 링크를 기반으로 UI를 설계해줘야 한다.
메인 Form 코드
class Form1(Form1Template):
def __init__(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)
# Any code you write here will run before the form opens.
def button_1_click(self, **event_args):
"""This method is called when the button is clicked"""
open_form('boradori')
def button_2_click(self, **event_args):
"""This method is called when the button is clicked"""
open_form('ttubi')
def button_3_click(self, **event_args):
"""This method is called when the button is clicked"""
open_form('nana')
def button_4_click(self, **event_args):
"""This method is called when the button is clicked"""
open_form('bbo')
각 폼에서 홈으로 오는 귀환 코드:
open_form('Form1')
이런식으로 페이지를 왔다갔다 하는 식으로 작성하면 아래와 같이 완성된다.
그런데, 이렇게 되면 보라돌이에서 나나로 바로 간다거나 뽀에서 나나로 간다거나 할 때 무조건 텔레토비 동산으로 갔다가 가야하는 귀찮음이 생기게 된다. 이때 이 귀찮음을 해결하려면 아래의 두가지 방법이 있는데
- 각 Form(보라돌이, 뚜비, 나나, 뽀) 별로 서로다른 Form으로 이어지는 링크 및 버튼을 만들어준다
- 각 Form을 탭으로 취급해서 이미 만들어둔 버튼 밑에 표시하게 한다.
1번 옵션의 경우 본 예시와 같이 각 탭마다 중복으로 동일한 엘리먼트를 생성해주고 코딩해줘야하는 번거로움도 따라오게 되므로, 중복되는 기능이 많은 페이지를 묶을때도 탭으로 취급하는게 더 좋다고 할 수 있겠다.
따라서 본 포스팅의 목적인 2번. 각 Form을 탭 취급하는 방법을 아래와 같이 살펴본다.
위의 어플리케이션을 이미 완성한 상태라면 아래와 같이 각 Form이 존재하는 상황일 것이다.
이 상태에서 별다르게 바꿀 것 없이, Form1에 탭 역할을 할 outlined_card를 하나 추가해주고
Form1의 버튼 클릭 함수들만 아래와 같이 바꿔주면, 탭 형식으로 간단히 전환할 수 있다.
from ._anvil_designer import Form1Template
from anvil import *
from ..bbo import bbo
from ..boradori import boradori
from ..nana import nana
from ..ttubi import ttubi
class Form1(Form1Template):
def __init__(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)
# Any code you write here will run before the form opens.
def button_1_click(self, **event_args):
"""This method is called when the button is clicked"""
self.outlined_card_2.clear()
self.outlined_card_2.add_component(boradori())
def button_2_click(self, **event_args):
"""This method is called when the button is clicked"""
self.outlined_card_2.clear()
self.outlined_card_2.add_component(ttubi())
def button_3_click(self, **event_args):
"""This method is called when the button is clicked"""
self.outlined_card_2.clear()
self.outlined_card_2.add_component(nana())
def button_4_click(self, **event_args):
"""This method is called when the button is clicked"""
self.outlined_card_2.clear()
self.outlined_card_2.add_component(bbo())
코드를 살펴보면, 다른 form을 클래스 변수로 import 해서 버튼 클릭때마다 탭(outlined_card_2)의 컴포넌트를 지우고 새로 할당하는 식으로 동작하게 된다. 이러면 아래와 같이 탭과 유사한 방식으로 작동하는걸 확인할 수 있다.
본 포스팅에서 다룬 방식을 잘 이용하면 복잡한 상호 링크구조 없이도 고도화된 어플리케이션을 한 페이지 내에 잘 녹여내기가 더 수월할 것 같다.
'파이썬으로 웹 App 작성하기' 카테고리의 다른 글
Anvil 로 웹 앱 만들어서 배포하기 (기능편) - <2> Timer 로 주기적 Background 작업 생성하기 (4) | 2023.05.09 |
---|---|
Anvil 로 웹 앱 만들어서 배포하기 (기능편) - <1> 서버랑 파일 주고 받기(Uplink 및 서드파티 사용법) (11) | 2023.05.05 |
Anvil 로 웹 앱 만들어서 배포하기 (1) - Getting Started (2) | 2023.03.20 |
댓글