英文:
Python Panel Dashboard - Multi-Page app not updating as expected
问题
I want a Python Panel app which shows different page content based on a radio button selection in the sidebar.
There's some example code for doing exactly this in the way I want, shown as "Option 3" here:
https://discourse.holoviz.org/t/multi-page-app-documentation/3108/3?u=maxpower
以下是代码部分:
import panel as pn
pn.extension(sizing_mode="stretch_width")
pages = {
"Page 1": pn.Column("# Page 1", "...bla bla bla"),
"Page 2": pn.Column("# Page 2", "...more bla"),
}
def show(page):
return pages[page]
starting_page = pn.state.session_args.get("page", [b"Page 1"])[0].decode()
page = pn.widgets.RadioButtonGroup(
value=starting_page,
options=list(pages.keys()),
name="Page",
sizing_mode="fixed",
button_type="success",
)
ishow = pn.bind(show, page=page)
pn.state.location.sync(page, {"value": "page"})
ACCENT_COLOR = "#0072B5"
DEFAULT_PARAMS = {
"site": "Panel Multi Page App",
"accent_base_color": ACCENT_COLOR,
"header_background": ACCENT_COLOR,
}
pn.template.FastListTemplate(
title="As Single Page App",
sidebar=[page],
main=[ishow],
**DEFAULT_PARAMS,
).servable()
然而,它似乎并没有按预期工作,至少在 panel v1.0.0rc6 上不是这样。当我点击 "Page 2",然后点击返回到 "Page 1" 时,主内容并没有如预期地切换回来。奇怪的是,URL 在 "Page+1" 和 "Page+2" 之间按预期切换,但主内容本身没有。
我一直在尝试使用 panel serve app.py --autoreload
进行调试,这是一个不错的工作流程,但我仍然没有能够弄清楚为什么它不起作用,或者如何找到一个使其工作的好解决方案。
英文:
I want a Python Panel app which shows different page content based on a radio button selection in the sidebar.
There's some example code for doing exactly this in the way I want, shown as "Option 3" here:
https://discourse.holoviz.org/t/multi-page-app-documentation/3108/3?u=maxpower
Code below:
import panel as pn
pn.extension(sizing_mode="stretch_width")
pages = {
"Page 1": pn.Column("# Page 1", "...bla bla bla"),
"Page 2": pn.Column("# Page 2", "...more bla"),
}
def show(page):
return pages[page]
starting_page = pn.state.session_args.get("page", [b"Page 1"])[0].decode()
page = pn.widgets.RadioButtonGroup(
value=starting_page,
options=list(pages.keys()),
name="Page",
sizing_mode="fixed",
button_type="success",
)
ishow = pn.bind(show, page=page)
pn.state.location.sync(page, {"value": "page"})
ACCENT_COLOR = "#0072B5"
DEFAULT_PARAMS = {
"site": "Panel Multi Page App",
"accent_base_color": ACCENT_COLOR,
"header_background": ACCENT_COLOR,
}
pn.template.FastListTemplate(
title="As Single Page App",
sidebar=[page],
main=[ishow],
**DEFAULT_PARAMS,
).servable()
```import panel as pn
pn.extension(sizing_mode="stretch_width")
pages = {
"Page 1": pn.Column("# Page 1", "...bla bla bla"),
"Page 2": pn.Column("# Page 2", "...more bla"),
}
def show(page):
return pages[page]
starting_page = pn.state.session_args.get("page", [b"Page 1"])[0].decode()
page = pn.widgets.RadioButtonGroup(
value=starting_page,
options=list(pages.keys()),
name="Page",
sizing_mode="fixed",
button_type="success",
)
ishow = pn.bind(show, page=page)
pn.state.location.sync(page, {"value": "page"})
ACCENT_COLOR = "#0072B5"
DEFAULT_PARAMS = {
"site": "Panel Multi Page App",
"accent_base_color": ACCENT_COLOR,
"header_background": ACCENT_COLOR,
}
pn.template.FastListTemplate(
title="As Single Page App",
sidebar=[page],
main=[ishow],
**DEFAULT_PARAMS,
).servable()
However, it does not quite work as expected, at least not on panel v1.0.0rc6. When I click "Page 2" and then click back to "Page 1", the main content does not switch back as expected. Weirdly, the URL does switch between ...=Page+1
and ...=Page+2
as expected, but not the main content itself.
I've been trying to debug this using panel serve app.py --autoreload, which is a nice workflow, but I still haven't been able to figure out why this isn't working, or a good solution to get it working.
答案1
得分: 1
以下是您提供的内容的中文翻译:
答案位于此处,正是我所寻找的,并且我已经确认在 Panel 的 v1.0.0rc6 版本中正常工作:
import panel as pn
from panel.template import FastListTemplate
pn.extension()
# 将页面定义为类
class Page1:
def __init__(self):
self.content = pn.Column("# 页面 1", "这是页面 1 的内容。")
def view(self):
return self.content
class Page2:
def __init__(self):
self.content = pn.Column("# 页面 2", "这是页面 2 的内容。")
def view(self):
return self.content
# 实例化页面并将它们添加到页面字典中
pages = {
"页面 1": Page1(),
"页面 2": Page2(),
}
# 用于显示所选页面的函数
def show_page(page_instance):
main_area.clear()
main_area.append(page_instance.view())
# 定义用于在页面之间导航的按钮
page1_button = pn.widgets.Button(name="页面 1", button_type="primary")
page2_button = pn.widgets.Button(name="页面 2", button_type="primary")
# 设置按钮单击回调
page1_button.on_click(lambda event: show_page(pages["页面 1"]))
page2_button.on_click(lambda event: show_page(pages["页面 2"]))
# 创建侧边栏
sidebar = pn.Column(page1_button, page2_button)
# 创建主区域并显示第一个页面
main_area = pn.Column(pages["页面 1"].view())
# 创建 Material 模板并设置侧边栏和主区域
template = FastListTemplate(
title="多页面应用",
sidebar=[sidebar],
main=[main_area],
)
# 提供 Panel 应用程序
template.servable()
请注意,我已经将代码中的 HTML 标记翻译为适当的中文。
英文:
The answer given here is exactly what I was looking for, and I've confirmed works as expected in Panel's v1.0.0rc6:
import panel as pn
from panel.template import FastListTemplate
pn.extension()
# Define pages as classes
class Page1:
def __init__(self):
self.content = pn.Column("# Page 1", "This is the content of page 1.")
def view(self):
return self.content
class Page2:
def __init__(self):
self.content = pn.Column("# Page 2", "This is the content of page 2.")
def view(self):
return self.content
# Instantiate pages and add them to the pages dictionary
pages = {
"Page 1": Page1(),
"Page 2": Page2(),
}
# Function to show the selected page
def show_page(page_instance):
main_area.clear()
main_area.append(page_instance.view())
# Define buttons to navigate between pages
page1_button = pn.widgets.Button(name="Page 1", button_type="primary")
page2_button = pn.widgets.Button(name="Page 2", button_type="primary")
# Set up button click callbacks
page1_button.on_click(lambda event: show_page(pages["Page 1"]))
page2_button.on_click(lambda event: show_page(pages["Page 2"]))
# Create the sidebar
sidebar = pn.Column(page1_button, page2_button)
# Create the main area and display the first page
main_area = pn.Column(pages["Page 1"].view())
# Create the Material Template and set the sidebar and main area
template = FastListTemplate(
title="Multi-Page App",
sidebar=[sidebar],
main=[main_area],
)
# Serve the Panel app
template.servable()
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论