ltk

ltk

LTK เป็นชุดเครื่องมือเล็กๆ สำหรับการเขียน UI ของเว็บใน PyScript สำหรับคำอธิบายของ PyScript และ LTK ดู YouTube

ดูตัวอย่าง:

• อ่างล้างจาน LTK สำหรับการสาธิตวิดเจ็ตทั้งหมดแบบสด
• ทำไมต้องใช้ LTK? ดูการเสนอขายที่เขียนด้วย LTK แน่นอน
• เว็บไซต์ส่วนตัว chrislaffra.com ซึ่งใช้ภาพเคลื่อนไหว, svg, สไตล์ และตัวจับเวลาจำนวนหนึ่งเพื่อแสดงเรซูเม่แบบภาพ
• การ์ดวันหยุดแบบเคลื่อนไหวที่มีเครื่องประดับต้นไม้โลโก้ PyScript เคลื่อนไหวโดยใช้โค้ด Python ในเบราว์เซอร์โดยใช้ LTK

LTK ถูกนำไปใช้เป็นไลบรารี Python ที่ประกาศและใช้ประโยชน์จาก jQuery สำหรับการดำเนินการ DOM

การติดตั้ง LTK

ติดตั้ง LTK จาก pypi:

 python3 -m pip install pyscript-ltk

สวัสดีชาวโลก

 import ltk

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

เริ่มต้นใช้งาน

หากต้องการเริ่มต้นใช้งาน LTK เราขอแนะนำให้คุณลองใช้ที่ pyscript.com:

• LTK ขั้นต่ำด้วย MicroPython
• LTK ขั้นต่ำพร้อม PyOdide

ข้อมูลจำเพาะของวิดเจ็ต

ประเภทวิดเจ็ตใหม่ถูกสร้างขึ้นโดยคลาสย่อย ltk.Widget :

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

ตามค่าเริ่มต้น วิดเจ็ตจะถูกสร้างขึ้นเป็นองค์ประกอบ div DOM คุณสามารถเลือกแท็กอื่นได้:

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

การสร้าง UI

ในการสร้าง 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 ถูกสร้างขึ้น องค์ประกอบ jQuery ที่เกี่ยวข้องจะถูกแนบไปกับวิดเจ็ตนั้นในตัวสร้าง ltk.Widget.__init__ ใช้ค่า tag ที่กำหนดโดยคลาสการประกาศและองค์ประกอบที่สร้างขึ้นเรียกว่า element เนื่องจากการเรียก append เป็นฟังก์ชัน JavaScript ซึ่งใช้งานโดย jQuery เราจึงไม่ส่งวิดเจ็ต LTK โดยตรง แต่ส่ง element เพื่อผนวกเข้ากับ DOM

จัดแต่งทรงผม

วิดเจ็ตสามารถจัดสไตล์ได้โดยใช้สามวิธีที่แตกต่างกัน:

1. จัดแต่งทรงผมด้วยสไตล์องค์ประกอบโดยใช้ฟังก์ชัน css ของ jQuery :

 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 และสไตล์ชีทภายนอกโดยใช้ฟังก์ชัน addClass ของ jQuery :

 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 หรือสำรวจโฟลเดอร์ 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