Python全栈应用开发利器Dash 3.x新版本介绍(4)

更多Dash应用开发干货知识、案例,欢迎关注"玩转Dash"微信公众号👇

大家好我是费老师,在前几期文章中,我们针对Python生态中++强大++ 且++灵活++ 的全栈应用开发 框架Dash,介绍了其3.x新版本中众多的新功能及特性:

而今天的文章中,我们将继续介绍Dash3.x新版本中,针对浏览器端回调 等更进阶的应用场景,新增的一些实用方法 ,从而进一步提升Dash应用开发的灵活性🥳。

针对浏览器端环境新增dash_component_api模块

新版本Dash,在应用运行的浏览器端环境 中,新增了dash_component_api模块,可以通过window.dash_component_api或直接的dash_component_api进行引用,以浏览器开发者工具为例:

对于常规的Dash应用开发者,日常主要可以用到其中的getLayout()stringifyId()方法:

使用getLayout()方法自由获取组件信息

我们先来学习3.x版本中新增的dash_component_api.getLayout()方法,只需要将目标组件的id作为参数传入,即可获得完整的目标组件信息,以下面的简单应用为例:

python 复制代码
import dash
from dash import html
import feffery_antd_components as fac
from feffery_dash_utils.style_utils import style

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdSpace(
            [
                fac.AntdButton("测试按钮1", id="test-button1", type="primary"),
                fac.AntdButton("测试按钮2", id="test-button2"),
                fac.AntdAlert(
                    id="test-alert",
                    message="提示信息示例",
                    description="描述信息示例",
                    showIcon=True,
                    action=fac.AntdButton("测试按钮3", type="primary", size="small"),
                ),
            ],
            direction="vertical",
            style=style(width="100%"),
        ),
    ],
    style=style(padding=50),
)

if __name__ == "__main__":
    app.run(debug=True)

为了方便演示,下面我们都直接在浏览器开发者工具/控制台 中举例演示,首先以测试按钮1 为例,直接调用getLayout()方法传入其id属性,即可获得对应组件的全部信息,其中props字段具体记录了组件当前的相关属性值:

并且任何时候调用getLayout(),所获得的组件信息都是最新的,譬如我们点击测试按钮1 几次后再次调用,可以看到props字段中对应的累计点击次数nClicks属性值:

且对于嵌套形式的组件,props属性中对应的字段,也会完整的记录所嵌套组件信息,譬如测试按钮3 是通过警告提示组件AntdAlert的组件型参数action传入的,调用getLayout()获取警告提示组件的信息后,可以看到测试按钮3相关的最新完整信息:

基于新方法getLayout(),我们就可以在浏览器环境 中,随时随地随心所欲地获取任何组件任何信息 ,对于擅长在Dash应用中编写浏览器端回调函数 的朋友,这个新方法大幅提升了在Dash应用中集成javascript实现进阶拓展功能的自由度😎~

使用stringifyId()方法正确转换字典型id

我们都知道Dash应用中,组件的id除了常规的字符型 以外,还支持传入字典型 ,这在模式匹配回调等进阶场景中非常实用。

但在Dash运行的浏览器端环境中,如果要针对这些字典型id目标元素进行定位,直接将原始的字典型id转字符串是行不通的,譬如下面的简单例子:

python 复制代码
import dash
from dash import html
import feffery_antd_components as fac
from feffery_dash_utils.style_utils import style

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdSpace(
            [
                fac.AntdButton(
                    "测试按钮1", id={"type": "test-button", "index": 1}, type="primary"
                )
            ],
            direction="vertical",
            style=style(width="100%"),
        ),
    ],
    style=style(padding=50),
)

if __name__ == "__main__":
    app.run(debug=True)

如果直接将原始的id{"type": "test-button", "index": 1}转字符串后,执行相关js代码进行定位,是获取不到目标元素的:

但在新版本Dash中,我们就可以使用stringifyId()方法对字典型id进行有效的转换,从而实现准确元素定位

基于新版本Dash中针对浏览器端运行环境 所提供的这些实用新方法,我们就可以更充分地融合javascript生态,通过DashPython生态与javascript生态中建立起高效的桥梁,高效实现更多定制化应用功能💪。

篇幅有限,更多新版本Dash更新相关内容,之后的文章中我们继续为大家盘点,敬请期待~


以上就是本文的全部内容,对Dash应用开发感兴趣的朋友,欢迎添加微信号CNFeffery,备注"dash学习"加入我们的技术交流群,一起成长一起进步。

相关推荐
魔障阿Q7 分钟前
华为310P3模型转换及python推理
人工智能·python·深度学习·yolo·计算机视觉·华为
都叫我大帅哥1 小时前
决策树:从零开始的机器学习“算命大师”修炼手册
python·机器学习
这里有鱼汤1 小时前
首个支持A股的AI多智能体金融系统,来了
前端·python
云霄IT1 小时前
python使用ffmpeg录制rtmp/m3u8推流视频并按ctrl+c实现优雅退出
python·ffmpeg·音视频
都叫我大帅哥1 小时前
我给大模型装上“记忆黄金券”:LangChain的ConversationSummaryBufferMemory全解析
python·langchain·ai编程
桃子叔叔1 小时前
28天0基础前端工程师完成Flask接口编写
前端·python·flask
德育处主任2 小时前
『OpenCV-Python』配合 Matplotlib 显示图像
后端·python·opencv
仰望星空的凡人9 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
F_D_Z9 小时前
【PyTorch】图像多分类项目部署
人工智能·pytorch·python·深度学习·分类