python的Gui库Taipy简化使用说明(flask后端)

1. 引言

• **介绍taipy库**：
• Taipy — Build Python Data & BI web applications
  • Taipy是一个用于快速开发Web应用的Python库。
  • 它提供了一套丰富的UI组件和工具，使得开发者能够以Pythonic的方式构建Web界面。
  • Taipy服务器使用flask框架，可以使用Taipy构建服务器，或者使用原生的flask做服务器。

2. 快速入门

• **安装taipy库**：

pip install taipy

• **创建第一个taipy应用**：

from taipy import Gui 
import taipy.gui.builder as tgb 


with tgb.Page() as page: 
    tgb.text("Hello, Taipy!", mode="md") 
Gui(page).run()

3. 核心概念

• **页面（Page）**：
  • 页面是taipy中的基本单位，代表Web应用中的一个视图。
  • 页面可以通过Page类创建，并通过with语句添加内容。
• **组件（Component）**：
  • 组件是构成页面的基本元素，如按钮、输入框、图表等。
  • 组件通过tgb模块中的函数创建。
• **状态（State）**：
  • 状态管理应用的数据，可以跨页面共享。
  • 状态通过State对象管理，可以在回调函数中访问和修改。
• **回调（Callback）**：
  • 回调函数响应用户的交互事件，如按钮点击、输入变化等。
  • 回调通过设置组件的on_action属性定义。

4. 页面构建

• **创建页面**：
  • 使用Page类创建页面，并通过with语句添加视觉元素。
  • 示例代码：

with tgb.Page() as page:
    tgb.text("Welcome to Taipy!", mode="md")

• **多页面组织**：
  • 使用pages字典将路径与页面对象关联起来，实现多页面应用。
  • 示例代码：

pages = {
    "/": root_page,
    "home": home_page,
    "about": about_page
}
Gui(pages=pages).run()

5. 常规组件

下面只列出3个最常用的组件，其他组件见官网相关介绍。

Text组件

• **属性**：
  • value：显示的文本值。
  • mode：文本的处理方式，如"raw"、"pre"、"markdown"。
  • format：应用于值的格式，如日期/时间格式化字符串。
• **示例代码**：

import taipy.gui.builder as tgb

with tgb.Page() as page:
     tgb.text("Hello, Taipy!", mode="md")
     tgb.text("Pi value: {3.14159}", format="%.5f")

Button组件

• **属性**：
  • label：按钮上显示的标签。
  • on_action：当按钮被按下时触发的函数或函数名。
• **示例代码**：

tgb.button("Click Me", on_action=on_button_click)

Input组件

• **属性**：
  • value：此控件所代表的值。
  • password：如果为True，则文本被遮掩。
  • label：与输入关联的标签。
• **示例代码**：

  with tgb.Page() as page:
       tgb.input("{username}", label="Username")
       tgb.input("{password}", label="Password", password=True)

6. 布局组件

Layout组件

• **属性**：
  • columns：定义列的权重列表，用于创建栅格布局。
  • gap：定义列与列之间的间隔大小。
• **示例代码**：

import taipy.gui.builder as tgb

with tgb.layout(columns="1 2", gap="10px"):
     with tgb.part():
         tgb.text("Left content")
     with tgb.part():
         tgb.text("Right content")

Part组件详细说明

属性详解：

        render：控制部分的可见性。

        page和 partial：如何将页面或partial内容嵌入到部分中。

示例代码：

import taipy.gui.builder as tgb

with tgb.part(render=False):
    tgb.text("This part is not visible")

7. 绑定变量

(1) 绑定变量概述

绑定变量是Taipy中用于存储和管理应用状态的变量。它们可以与UI组件关联，以便在用户与界面交互时自动更新。

(2) 绑定变量的声明和使用

• **声明**：在页面或应用级别声明绑定变量。
• **使用**：在UI组件中使用花括号 { } 包围变量名来引用绑定变量。

from taipy.gui import Gui
import taipy.gui.builder as tgb

# 变量初始值
input_value = ""

def input_changed(state):
    state.input_value = "hello world"  # 更新绑定变量

with tgb.Page() as page:
    tgb.input("{input_value}", on_change=input_changed)  # 绑定变量用于输入框
    tgb.text("Input value: {input_value}")  # 显示绑定变量的值

Gui(page).run()

8. taipy使用原生flask

使用原生flask作服务器，可以使用 flask 的全部功能（含模板），以及全部三方库

注意：taipy的页面urls，和flask的url，不要重复

import taipy.gui.builder as tgb
from taipy.gui import Gui,navigate
from flask import Flask, render_template, session

# 创建原生的Flask应用程序实例
app = Flask(__name__)
app.secret_key = 'taipy-flask-web'

@app.route('/login')
def login():
    return render_template('login.html')

# 导航到登录页面
def on_action(state):
    navigate(state,"/login")

with tgb.Page() as index:
    tgb.text("这是主页面")
       
with tgb.Page() as page2:
    tgb.text("这是次页面")
    tgb.button("登录",on_action=on_action)

pages = {
        "/":index,
        "page2": page2
}

# 设置参数flask，可以使用原生的flask创建的服务器
Gui(pages=pages,flask=app).run(use_reloader=True,dark_mode=False)