概述

Shiny使使用Python代码构建web应用程序变得容易。它使您能够自定义应用程序的布局和样式，并动态响应事件，例如按下按钮或下拉选择。在浏览器中呈现本站点上的示例Pyodide，但你也可以安装的在你自己的项目中使用它。

如果你有这方面的经验闪亮的R，我们建议从快速入门学习Shiny for R和Shiny for Python的主要区别。

闪亮的应用程序由两部分组成:用户界面(或用户界面)，以及服务器函数。它们用a组合闪亮的。应用程序对象。

下面的交互示例显示了这一点。

#| standalone: true #| components: [editor, viewer] from shiny import App, ui # Part 1: ui ---- app_ui = ui。page_fluid("Hello, world!"，) #第二部分:服务器---- def server(输入，输出，会话):…#注意变量必须是"app"。app = app (app_ui, server)

请注意UI部分是如何定义访问者在其网页上看到的内容的。现在这只是静态文本“Hello, world!”。应用程序的动态部分发生在服务器函数中，该函数目前是空的。

请注意

您可以修改示例代码，然后通过按代码窗格右上角的播放按钮重新运行它。

尝试将页面文本更改为“你好，闪亮的世界!”然后重新运行应用程序。

在下一节中，我们将修改UI和服务器以接收来自用户的输入，并显示一些计算!

添加UI输入和输出

实现基本交互性的第一步是向UI添加输入和输出。

#| standalone: true #| components: [editor, viewer] from shiny import App, ui app_ui = ui。page_fluid (ui。input_slider("n"， "Choose a number n:"， 0,100,40)， ui. output_text_veratim ("txt")) def server(input, output, session):…app = app (app_ui, server)

请注意添加的两个新UI部分:

  • input_slider ()创建滑块。
  • output_text_verbatim ()创建一个字段以显示动态生成的文本。目前还没有文本，但我们将在接下来添加它。

添加服务器逻辑

现在我们可以添加到服务器函数中。在服务器函数内部，我们将定义一个名为三种。的内容output_text_verbatim (txt)在UI中。

尝试移动下面的滑块以查看文本输出自动更改。

#| components: [editor, viewer] from shiny import ui, render, App app_ui = ui。page_fluid (ui。input_slider("n"， "n"， 0,100,40)， ui.output_text_verbatim("txt")，) def server(输入，输出，会话):@输出@渲染。text def txt():返回f"n*2是{input.n() *2}" #这是一个闪亮的。应用程序对象。它必须命名为“app”。app = app (app_ui, server)

注意，在server函数中，我们做了以下操作:

  • 定义一个名为三种，其输出显示在UI中output_text_verbatim (txt)。
  • 用@render.text，表示结果是文本(而不是图像)。
  • 用@output，表示结果应该显示在网页上。

(很快我们就会看到其他类型的渲染。修饰符,像render.plot。)

最后，注意我们的txt ()函数取滑动条的值n，并返回其值乘以2。要访问滑块的值，我们使用input.n ()。注意，这是一个可调用对象(类似于函数)，必须调用它才能获得值。

这种从UI输入到服务器代码，再返回到UI输出的反应性数据流是Shiny工作的基础。

反应流

当你在上面的应用程序中移动滑块时，一系列动作被启动，导致屏幕上的输出发生变化。这叫做反应性。

下图显示了更新后的输入如何流经Shiny应用程序。

通过Shiny应用程序的响应式代码流

输入，比如滑动条n，都是响应性值:当它们改变时，它们会自动导致使用它们的任何响应性函数(如txt ())重新计算。

布局UI

到目前为止，我们的UI由输入和输出组件组成。Shiny也有布局组件，可以包含其他组件并以视觉方式排列它们。侧边栏布局、选项卡导航和卡片就是这样的例子。

为了演示这一点，我们将为简单的Shiny应用程序使用一种常见的布局策略，并将输入控件放在左侧狭窄的侧边栏中。在下面的代码中，我们使用该函数ui.layout_sidebar ()将页面分成两个面板。这个函数有两个参数:aui.panel_sidebar和一个ui.panel_main，每个组件都可以包含您希望分别显示在左侧和右侧的任何组件。

#| standalone: true #| components: [editor, viewer] #| layout: vertical #| viewheight: 550导入matplotlib。创建一些随机数据t = np。Linspace (0,2 * np。Pi, 1024) data2d = np.sin(t)[:， np。[新]* np.cos(t)[np。[] app_ui = ui。page_fixed (ui。h2(“玩颜色贴图”)，ui。这个应用程序是基于[Matplotlib示例][0]，显示2D数据与用户可调的颜色图。我们使用一个范围滑块来设置颜色图所覆盖的数据范围。[0]: https://matplotlib.org/3.5.3/gallery/userdemo/colormap_interactive_adjustment.html """)， ui。layout_sidebar (ui。panel_sidebar (ui。input_radio_buttons("cmap"， "Colormap type"， dict(viridis="Perceptual"， gist_heat="Sequential"， RdYlBu="Diverging"))， ui。input_slider(“范围”、“色彩范围”,1,1,价值=(1,1),步骤= 0.05),),ui。Panel_main (ui.output_plot("plot")))) def server(输入，输出，会话):@输出@渲染。Plot def Plot (): fig, ax = plt.subplots() im = ax。imshow(data2d, cmap=input.cmap()， vmin=input.range()[0]， vmax=input.range()[1]) fig.colorbar(im, ax=ax) return fig app = app (app_ui, server)

注意Shiny是如何使用嵌套函数调用来指示父/子关系的。在这个例子中，ui.input_radio_buttons ()在…里面ui.panel_sidebar (),ui.panel_sidebar ()是在ui.layout_sidebar ()等等。

这个例子还包括一些用减价字符串字面值，并使用ui.markdown ()函数将其呈现为HTML。

闪亮的UI是HTML

在这一点上值得注意的是，Shiny UI完全由HTML组成。上一节中的每个嵌套函数调用都会返回一个HTML片段。

要想很好地使用Shiny，你是否懂HTML并不重要，但如果你懂HTML，这个事实可能有助于形成一个关于Shiny UI如何工作的心理模型。

#| components: [editor, cell] from shiny import UI UI。input_numeric("n"， "n"， 0)

添加一个ui.panel_sidebar电话在ui.input_numeric只需用额外的HTML (a)包装控件即可< div >和< >形式(在本例中)。生成的HTML的嵌套与UI中Python函数调用的嵌套相匹配。

#| components: [editor, cell] ui。panel_sidebar (ui。input_numeric("n"， "n"， 0))

下一个步骤

在接下来的部分中，我们将更深入地研究用户界面，然后服务器逻辑。然后,我们将把所有东西放在一起使用三个示例应用程序。虽然这三个应用程序本身都很有用，但接下来我们将看看如何使用更高级的方法来改进它们反应性编程概念。

最后，我们将介绍最好的方法运行和调试闪亮的应用程序。