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資料夾的內容。