Skip to content

ใช้ไพทอนทำ UI tookit เป็นเว็บแอพด้วย Flexx

Flexx เป็นโมดูลภาษาไพทอนด้าน UI tookit บนเทคโนโลยีเว็บ เป็นเครื่องมือสำหรับการสร้างอินเทอร์เฟซผู้ใช้แบบกราฟิก โดยใช้เทคโนโลยีเว็บในการแสดงหน้าต่างการใช้งาน

สามารถนำไปใช้สร้าง โปรแกรมบนเดสก์ท็อป , เว็บแอพ
ประกอบไปด้วย

  • ui - widgets
  • app - event loop และ server
  • react - reactive programming
  • pyscript - แปลง Python ไปเป็น JavaScript
  • webruntime - สำหรับใช้งานแบบไทม์ไลน์

รองรับเฉพาะไพทอน 3  ใช้ BSD License

สามารถติดตั้งได้โดยใช้คำสั่ง pip:

pip install flexx

ตัวอย่างการใช้งาน
ตัวอย่างที่ 1 ปุ่มกดบนหน้าเว็บ
โค้ด

from flexx import app, ui, react

class Example(ui.Widget):

    def init(self):
        self.count = 0
        with ui.HBox():
            self.button = ui.Button(text='Click me', flex=0)
            self.label = ui.Label(flex=1)

    @react.connect('button.mouse_down')
    def _handle_click(self, down):
        if down:
            self.count += 1
            self.label.text('clicked %i times' % self.count)

main = app.launch(Example)
app.run()

ผลลัพธ์

ใช้ไพทอนทำ UI tookit เป็นเว็บแอพด้วย Flexx
ตัวอย่างที่ 2 แปลงโค้ดไพทอนไปเป็น JavaScript

from flexx.pyscript import py2js, evalpy
js = py2js('for i in range(10): print(i)')
print(js)

ผลลัพธ์

var i;
for (i = 0; i < 10; i += 1) {
    console.log(i);
}

อ่านเอกสารการใช้งานได้ที่ https://flexx.readthedocs.org/en/latest/index.html

ตัวอย่างการนำโมดูลนี้ไปใช้งาน http://52.21.93.28:8000/

ติดตามบทความต่อไปนะครับ
ขอบคุณครับ

Published on Categories web-developer, web-framework

About wannaphong

วรรณพงษ์ ภัททิยไพบูลย์ ผู้ดูแลเว็บ wannaphong.com และผู้เขียนบทความบล็อกนี้ นักศึกษาชั้นปีที่ 1 สาขาวิทยาการคอมพิวเตอร์และสารสนเทศ คณะวิทยาศาสตร์ประยุกต์และวิศวกรรมศาสตร์ มหาวิทยาลัยขอนแก่น วิทยาเขตหนองคาย

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *