Step 7: Multi-pages, navbars, and menus
You can download the code of this step here or all the steps here.
For Notebooks
The "Getting Started" Notebook is available here. In Taipy GUI, the process to execute a Jupyter Notebook is different from executing a Python Script.
Step 7: Multi-pages, navbars, and menus¶
The creation of a multi-page application is greatly simplified with Taipy. A dictionary of pages must be defined to create a multi-page application. Here we will create three Pages: a Root page and two pages (page1 & page2). We will use Visual elements like a menu or navbar on this root page to navigate between page1 and page2.
from taipy import Gui
# Add a navbar to switch from one page to the other
root_md = """
<|navbar|>
# Multi-page application
"""
page1_md = "## This is page 1"
page2_md = "## This is page 2"
pages = {
"/": root_md,
"page1": page1_md,
"page2": page2_md
}
Gui(pages=pages).run()
Navigating between pages¶
- menu: creates a menu on the left to navigate through the pages.
<|menu|label=Menu|lov={lov_pages}|on_action=on_menu|>
. For example, this code creates a menu with two pages:
from taipy.gui import Gui, navigate
root_md="<|menu|label=Menu|lov={[('Page-1', 'Page 1'), ('Page-2', 'Page 2')]}|on_action=on_menu|>"
page1_md="## This is page 1"
page2_md="## This is page 2"
def on_menu(state, var_name, function_name, info):
page = info['args'][0]
navigate(state, to=page)
pages = {
"/": root_md,
"Page-1": page1_md,
"Page-2": page2_md
}
Gui(pages=pages).run()
- navbar: creates an element to navigate through the Taipy pages by default
from taipy.gui import Gui
root_md="<|navbar|>"
page1_md="## This is page 1"
page2_md="## This is page 2"
pages = {
"/": root_md,
"Page-1": page1_md,
"Page-2": page2_md
}
Gui(pages=pages).run()
Back to the code¶
The Markdown created in our previous steps will be the first page (named page) of the application.
Then, let’s create our second page, which contains a page to analyze an entire text.
# Second page
dataframe2 = dataframe.copy()
path = ""
treatment = 0
page_file = """
<|{path}|file_selector|extensions=.txt|label=Upload .txt file|on_action=analyze_file|> <|{f'Downloading {treatment}%...'}|>
<|Table|expandable|
<|{dataframe2}|table|width=100%|>
|>
<|{dataframe2}|chart|type=bar|x=Text|y[1]=Score Pos|y[2]=Score Neu|y[3]=Score Neg|y[4]=Overall|color[1]=green|color[2]=grey|color[3]=red|type[4]=line|height=800px|>
"""
def analyze_file(state):
state.dataframe2 = dataframe2
state.treatment = 0
with open(state.path,"r", encoding='utf-8') as f:
data = f.read()
# split lines and eliminates duplicates
file_list = list(dict.fromkeys(data.replace('\n', ' ').split(".")[:-1]))
for i in range(len(file_list)):
text = file_list[i]
state.treatment = int((i+1)*100/len(file_list))
temp = state.dataframe2.copy()
scores = analize_text(text)
state.dataframe2 = temp.append(scores, ignore_index=True)
state.path = None
This little code below assembles our previous page and this new page. The navbar in the root page is also visible on both pages allowing for easy switching between pages.
# One root page for common content
# The two pages that were created
pages = {"/":"<|toggle|theme|>\n<center>\n<|navbar|>\n</center>",
"line":page,
"text":page_file}
Gui(pages=pages).run()