ltk

ltk

LTK est une petite boîte à outils pour écrire des interfaces utilisateur Web en PyScript. Pour une explication de PyScript et LTK, voir YouTube.

Pour des exemples, voir :

• L'évier de cuisine LTK pour une démo live de tous les widgets.
• Pourquoi utiliser LTK ? Voir le pitch, rédigé avec LTK, bien sûr.
• Un site Web personnel, chrislaffra.com, qui utilise un certain nombre d'animations, de svg, de styles et de minuteries pour restituer un CV visuel.
• Une carte de vœux animée où les ornements d'arbre avec le logo PyScript sont animés à l'aide du code Python dans le navigateur utilisant LTK.

LTK est implémenté en tant que bibliothèque Python déclarative et exploite jQuery pour les opérations DOM.

Installation de LTK

Installez LTK depuis pypi :

 python3 -m pip install pyscript-ltk

Bonjour le monde

 import ltk

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

Commencer

Pour démarrer avec LTK, nous vous recommandons de l'essayer sur pyscript.com :

• LTK minimal avec MicroPython
• LTK minimal avec PyOdide

Spécification du widget

De nouveaux types de widgets sont créés en sous-classant ltk.Widget :

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

Par défaut, les widgets sont créés en tant qu'éléments div DOM. Vous pouvez choisir une autre balise :

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

Création d'une interface utilisateur

Pour créer une interface utilisateur, les éléments sont construits de manière déclarative :

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

Les widgets sont ajoutés aux autres à l'aide des appels append et appendTo de jQuery :

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

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

Lorsqu'un widget LTK est créé, un élément jQuery correspondant lui est attaché dans le constructeur ltk.Widget.__init__ . Il utilise la valeur tag définie par la classe déclarante et l'élément construit est appelé element . Comme l'appel append est une fonction JavaScript, implémentée par jQuery, nous ne transmettons pas directement le widget LTK, mais passons son element à ajouter au DOM.

Stylisme

Les widgets peuvent être stylisés en utilisant trois approches différentes :

1. Styliser avec des styles d'éléments à l'aide de la fonction css de jQuery :

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

2. Styliser à l'aide d'un dict pour faciliter le partage de styles :

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

3. Styliser à l'aide de classes CSS et d'une feuille de style externe, à l'aide de la fonction addClass de jQuery :

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

La feuille de style externe doit avoir ces règles :

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

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

Des feuilles de style externes peuvent être incluses dans le index.html d'origine ou injectées lors de l'exécution depuis Python en utilisant :

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

Événements

Les gestionnaires d'événements sont attachés à l'aide de mécanismes jQuery .

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

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

Vous pouvez également utiliser le décorateur plus déclaratif :

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

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

Exemples

Voir l'évier de cuisine LTK ou explorez le dossier examples

Applications créées à l'aide de LTK

• Feuilles Py

Licence

LTK est couvert par la licence Apache :

• La licence Apache est une licence logicielle open source permissive.

• Il permet aux utilisateurs d'utiliser, de modifier et de distribuer librement le logiciel (y compris à des fins commerciales).

• Les versions modifiées peuvent être distribuées sans avoir à publier le code source. Bien que les modifications du code source doivent être documentées.

• La licence nécessite des versions modifiées pour conserver la licence Apache et la mention de droit d'auteur.

• Le logiciel est fourni par les auteurs « tel quel », sans aucune garantie.

• Les utilisateurs ne bénéficient pas de droits de brevet de la part des contributeurs, mais les contributeurs ne peuvent pas révoquer les brevets accordés pour des contributions antérieures.

• La licence ne nécessite pas que les œuvres dérivées adoptent la licence Apache. Bien que cela soit encouragé par souci de cohérence.

Télécharger la nouvelle version sur PyPi

Si vous n'avez jamais exécuté setuptools, twine, etc. sur votre machine, procédez comme suit :

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

Pour créer un build, incrémentez d'abord la version dans pyproject.toml :

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

Ensuite, intégrez le package dans une distribution source et une roue Python :

 python3 -m build

Vérifiez ensuite si la build fonctionne pour pypi :

 twine check dist/*

Téléchargez ensuite dans l'environnement de test pypi :

 twine upload --repository pypitest dist/*

Enfin, si le téléchargement du test pypi semble fonctionner correctement, exécutez :

 twine upload dist/*

Si vous obtenez une erreur indiquant qu'une certaine version existe déjà, vérifiez le contenu du dossier dist .