ทำไมต้อง OOP ใน GUI Development?

สถาปัตยกรรมของ Qt Framework

PySide6 ไม่ได้เป็นแค่ Library แต่มันคือ Framework ที่บังคับใช้ Design Patterns หลายอย่าง

S - Single Responsibility

class MainWindow(QMainWindow):
  def login(self):
    # เชื่อมต่อ Database ในนี้
    # ตรวจสอบ Password ในนี้
    # เปลี่ยนหน้าจอในนี้

class AuthService: # Logic
  def verify(self, user, pass): ...

class LoginWindow(QMainWindow): # View
  def on_login_click(self):
    # เรียกใช้ AuthService
    if self.auth_service.verify(...):
       self.show_main()

O - Open/Closed Principle

"ขยายความสามารถของ Widget ด้วยการสืบทอด (Subclassing) แทนการแก้ไขโค้ดเดิม"

class BlinkingButton(QPushButton):
    def __init__(self, text):
        super().__init__(text)
        self.timer = QTimer(self)
        self.timer.timeout.connect(self.toggle_color)
        self.timer.start(500)

    def toggle_color(self):
        # Logic เปลี่ยนสี...
        pass

L - Liskov Substitution

"Custom Widget ของคุณต้องทำงานแทนที่ Widget แม่ได้โดย Layout ไม่พัง"

D - Dependency Inversion

class Button:
  def click(self):
    # ต้องรู้จัก database_save
    database_save()

class Button(QPushButton):
  # ไม่รู้ว่าใครจะมารับ signal นี้
  clicked.connect(any_func)

Design Pattern: Observer

หัวใจของการสื่อสารใน Qt คือ Signal (Publisher) และ Slot (Subscriber)

from PySide6.QtCore import Signal, QObject

class DataSensor(QObject):
    # 1. ประกาศ Signal
    data_changed = Signal(float)

    def read_value(self):
        new_val = 25.5
        # 2. ปล่อยสัญญาณ (Notify Observers)
        self.data_changed.emit(new_val)

# 3. เชื่อมต่อ (Subscribe)
sensor = DataSensor()
label = QLabel()
sensor.data_changed.connect(label.setNum)

Composition > Inheritance

ในการสร้าง UI ที่ซับซ้อน เรามักจะ "ประกอบ" Widget เล็กๆ เข้าด้วยกัน แทนที่จะสืบทอดลึกๆ

Qt's MVC Architecture

Qt ใช้สถาปัตยกรรมแบบ Model/View เพื่อแยกข้อมูลออกจากการแสดงผล

การสร้าง Custom Model

class MyModel(QAbstractListModel):
    def data(self, index, role):
        # คืนค่าข้อมูลตาม role (DisplayRole, BackgroundRole ฯลฯ)
        if role == Qt.DisplayRole:
            return self.my_data[index.row()]

    def rowCount(self, index):
        return len(self.my_data)

Design Pattern: Singleton

ใน GUI App เรามักมีสิ่งที่มีได้แค่อันเดียว เช่น QApplication หรือ ConfigurationManager

# ใน PySide6, qApp เป็น Global Pointer ที่เข้าถึงได้เสมอ
from PySide6.QtWidgets import QApplication, qApp

def some_function():
    # ปิดโปรแกรมจากที่ไหนก็ได้
    qApp.quit()

Factory Pattern? (Qt Designer)

ไฟล์ .ui ที่ได้จาก Qt Designer จะถูกแปลงเป็น Python class ที่ทำหน้าที่เหมือน Factory สร้าง Widget ให้เรา

การจัดการ Threading

thread = QThread()
worker = Worker()
worker.moveToThread(thread)
thread.started.connect(worker.run)
thread.start()

Event Filter & Chain of Responsibility

Event ใน Qt (เช่น เมาส์คลิก, ปุ่มกด) จะถูกส่งต่อกันเป็นลูกโซ่

Design Pattern: Command

save_action = QAction("Save", self)
save_action.setShortcut("Ctrl+S")
save_action.triggered.connect(self.save_file)

# ใช้ Action เดียวกันในหลายที่
file_menu.addAction(save_action)
toolbar.addAction(save_action)

Base Dialog Class

ใช้ Inheritance สร้าง Template สำหรับ Dialog

class BaseEditorDialog(QDialog):
    def __init__(self):
        super().__init__()
        self.setup_common_ui() # ปุ่ม OK/Cancel

    def accept(self):
        if self.validate(): # Template Method Pattern
            super().accept()

    def validate(self):
        raise NotImplementedError

โครงสร้างโปรเจกต์ (Best Practice)

QSS: Decorating the UI

Qt Style Sheets (QSS) ช่วยให้เราแยกการตกแต่ง (Appearance) ออกจากโครงสร้างโค้ด (คล้าย CSS ในเว็บ)

เตรียมตัวเข้าสู่ Lab Session

Lab: Inventory Manager

Step 1: เริ่มต้นโปรเจกต์

Step 2: กำหนดโครงสร้างข้อมูล

ในไฟล์ model.py สร้างคลาส Product เพื่อเป็นตัวแทนข้อมูล (DTO)

from dataclasses import dataclass

@dataclass
class Product:
    name: str
    price: float
    quantity: int

    def total_value(self):
        return self.price * self.quantity

Step 3: สร้าง InventoryModel

ยังอยู่ใน model.py สร้าง Model สำหรับ Qt Table View

from PySide6.QtCore import Qt, QAbstractTableModel

class InventoryModel(QAbstractTableModel):
    def __init__(self, products=None):
        super().__init__()
        self.products = products or []
        self.headers = ["Name", "Price", "Qty", "Total"]

    def rowCount(self, index):
        return len(self.products)

    def columnCount(self, index):
        return len(self.headers)

    def data(self, index, role):
        if role == Qt.DisplayRole:
            product = self.products[index.row()]
            col = index.column()
            if col == 0: return product.name
            if col == 1: return f"{product.price:.2f}"
            if col == 2: return str(product.quantity)
            if col == 3: return f"{product.total_value():.2f}"
    
    def headerData(self, section, orientation, role):
        if role == Qt.DisplayRole and orientation == Qt.Horizontal:
            return self.headers[section]

Step 4: เมธอดสำหรับเพิ่มข้อมูล

เพิ่มเมธอด add_product ใน InventoryModel เพื่อให้ View อัปเดตอัตโนมัติ (Observer Pattern)

    def add_product(self, product):
        # แจ้ง View ว่ากำลังจะเพิ่มแถวใหม่ 1 แถว
        self.beginInsertRows(self.index(0, 0), self.rowCount(None), self.rowCount(None))
        
        self.products.append(product)
        
        # แจ้ง View ว่าเพิ่มเสร็จแล้ว (View จะวาดใหม่เอง)
        self.endInsertRows()

Step 5: สร้าง Input Form (View)

แยกส่วนกรอกข้อมูลออกมาเป็น Widget อิสระ (SRP & Composition) ใน view.py

from PySide6.QtWidgets import QWidget, QFormLayout, QLineEdit, QSpinBox, QDoubleSpinBox, QPushButton, QVBoxLayout

class ProductForm(QWidget):
    def __init__(self):
        super().__init__()
        layout = QFormLayout(self)
        
        self.name_input = QLineEdit()
        self.price_input = QDoubleSpinBox()
        self.price_input.setMaximum(100000)
        self.qty_input = QSpinBox()
        
        self.add_btn = QPushButton("Add Product")
        
        layout.addRow("Name:", self.name_input)
        layout.addRow("Price:", self.price_input)
        layout.addRow("Quantity:", self.qty_input)
        layout.addRow(self.add_btn)

Step 6: รวมร่าง (Main Window)

สร้าง MainWindow ใน view.py และนำ Model มาเชื่อมกับ View

from PySide6.QtWidgets import QMainWindow, QTableView, QVBoxLayout, QWidget
from model import InventoryModel, Product

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Inventory Manager")
        
        # 1. Setup Model
        self.model = InventoryModel()
        
        # 2. Setup Views (Composition)
        self.table = QTableView()
        self.table.setModel(self.model) # Binding
        self.form = ProductForm()
        
        # 3. Layout
        container = QWidget()
        layout = QVBoxLayout(container)
        layout.addWidget(self.table)
        layout.addWidget(self.form)
        self.setCentralWidget(container)
        
        # 4. Signals
        self.form.add_btn.clicked.connect(self.handle_add)

Step 7: เชื่อม Logic (Slot)

เพิ่มเมธอด handle_add ใน MainWindow เพื่อรับค่าจาก Form และส่งเข้า Model

    def handle_add(self):
        name = self.form.name_input.text()
        price = self.form.price_input.value()
        qty = self.form.qty_input.value()
        
        if name:
            new_product = Product(name, price, qty)
            self.model.add_product(new_product)
            
            # Clear inputs
            self.form.name_input.clear()
            self.form.price_input.setValue(0)
            self.form.qty_input.setValue(0)

Step 8: Entry Point (main.py)

import sys
from PySide6.QtWidgets import QApplication
from view import MainWindow

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec())

Step 9: ตกแต่งด้วย CSS (QSS)

ลองเพิ่มโค้ดนี้ใน main.py ก่อน window.show()

app.setStyleSheet("""
    QMainWindow { background-color: #2c3e50; }
    QLabel { color: #ecf0f1; font-size: 14px; }
    QLineEdit, QSpinBox, QDoubleSpinBox {
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #bdc3c7;
    }
    QPushButton {
        background-color: #27ae60;
        color: white;
        padding: 8px;
        border-radius: 4px;
        font-weight: bold;
    }
    QPushButton:hover { background-color: #2ecc71; }
    QTableView {
        background-color: white;
        alternate-background-color: #ecf0f1;
        selection-background-color: #3498db;
    }
""")

ภารกิจท้าทาย #1: Delete Feature

ภารกิจท้าทาย #2: Search Filter

สรุปผลการเรียนรู้

เอกสารอ้างอิง

• Qt for Python (PySide6) Documentation
• Python GUIs: PySide6 Tutorials
• Martin Fitzpatrick, Create GUI Applications with Python & Qt6

จบการนำเสนอ

"GUI ที่ดี ไม่ใช่แค่สวย แต่ต้องมีโครงสร้างที่ดีด้วย"