ltk

LTK

LTK 是一个用 PyScript 编写 Web UI 的小工具包。有关 PyScript 和 LTK 的说明，请参阅 YouTube。

示例请参见：

• LTK kitchensink 用于所有小部件的现场演示。
• 为什么使用LTK？当然，请参阅用 LTK 编写的推介。
• 个人网站 chrislaffra.com，使用大量动画、svg、样式和计时器来呈现视觉简历。
• 动画节日贺卡，其中 PyScript 徽标树装饰在浏览器中使用 Python 代码使用 LTK 进行动画处理。

LTK 作为声明性 Python 库实现，并利用jQuery进行 DOM 操作。

安装LTK

从 pypi 安装 LTK：

 python3 -m pip install pyscript-ltk

你好世界

 import ltk

ltk . Text ( "Hello World" ). appendTo ( ltk . body )

入门

要开始使用 LTK，我们建议您在 pyscript.com 上尝试一下：

• 使用 MicroPython 实现最小 LTK
• 使用 PyOdide 实现最小 LTK

小部件规格

新的小部件类型是通过子类化ltk.Widget创建的：

 class HBox ( Widget ):
    classes = [ "ltk-hbox" ]

默认情况下，小部件被创建为div DOM 元素。您可以选择不同的标签：

 class Preformatted ( Widget ):
    classes = [ "ltk-pre" ]
    tag = "pre" 

创建用户界面

要创建 UI，需要以声明方式构建元素：

 ltk . Table (
    ltk . TableRow (
        ltk . TableHeader ( "header1" )
        ltk . TableHeader ( "header2" )
    ),
    [
        ltk . TableRow (
            ltk . TableData ( value1 ),
            ltk . TableData ( value2 ),
        )
        for value1 , value2 in data
    ],
)

通过使用jQuery的append和appendTo调用将小部件添加到其他小部件中：

 ltk . body . append (
    ltk . Table (...). element
)

container = ltk . VBox (...)
ltk . H1 ( "This is a header" ). appendTo ( container )

创建 LTK 小部件时，会在ltk.Widget.__init__构造函数中将相应的 jQuery 元素附加到它。它使用声明类定义的tag值，构造的元素称为element 。由于append调用是一个 JavaScript 函数，由 jQuery 实现，因此我们不直接传递 LTK 小部件，而是传递其element以追加到 DOM。

造型

可以使用三种不同的方法来设计小部件的样式：

1. 使用jQuery的css函数设置元素样式：

 ltk . Text ( "Error: Flux capacitor low!" )
    . css ( "background-color" , "red" )
    . css ( "color" , "white" )
    . css ( "padding" , 8 )

2. 使用dict进行样式设置可以更轻松地共享样式：

 error = {
    "background-color" : "red" ,
    "color" : "white" ,
    "padding" : 8 ,
}
ltk . Text ( "Error: Flux capacitor low!" , error )

3. 使用 CSS 类和外部样式表，使用jQuery的addClass函数进行样式设置：

 ltk . Text ( "Some text" ). addClass (" my - special - text )

外部样式表应具有以下规则：

. ltk-text {
    font-family : Arial;
}

. my-special-text {
    font-family : Courier;
    background-color : red;
    color : white;
    padding : 8 px ;
}

外部样式表可以包含在原始index.html中，也可以使用以下命令在运行时从 Python 注入：

 ltk . inject_style ( "https://example.org/awesome_styles.css" )

活动

事件处理程序是使用jQuery机制附加的。

 def buy ( event ):
    purchase (...)

ltk . Card ( "Buy Now" ). on ( "click" , ltk . proxy ( buy ))

您还可以使用更具声明性的装饰器：

 @ ltk . callback
def buy ( event ):
    purchase (...)

ltk . Card ( "Buy Now" ). on ( "click" , buy )

示例

请参阅 LTK kitchensink 或浏览examples夹

使用 LTK 构建的应用程序

• pysheets

执照

LTK 受 Apache 许可证保护：

• Apache 许可证是一种宽松的开源软件许可证。

• 它允许用户自由使用、修改和分发软件（包括用于商业目的）。

• 修改后的版本无需发布源代码即可分发。尽管源代码的更改应该记录在案。

• 该许可证需要修改版本以保留 Apache 许可证和版权声明。

• 该软件由作者“按原样”提供，不提供任何保证。

• 用户不会被贡献者授予专利权，但贡献者不能撤销先前贡献的专利授予。

• 该许可证不要求派生作品采用 Apache 许可证。尽管为了一致性而鼓励这样做。

将新版本上传到 PyPi

如果您从未在计算机上运行过 setuptools、twine 等，请执行以下操作：

 python3 -m pip install --user --upgrade setuptools wheel twine build

要进行构建，首先增加pyproject.toml中的版本：

[ project ]
name = "pyscript-ltk"
version = "0.1.22"

然后将包构建到源代码发行版和 Python 轮子中：

 python3 -m build

然后验证构建是否适用于 pypi：

 twine check dist/*

然后上传到pypi测试环境：

 twine upload --repository pypitest dist/*

最后，如果 pypi 测试上传看起来工作正常，请运行：

 twine upload dist/*

如果出现某个版本已存在的错误，请检查dist文件夹的内容。