Tạo GUI đầu tiên của bạn trong Python với Glade và GTK+

Python là một ngôn ngữ dễ tiếp cận, hoàn hảo để phân tích dữ liệu và phát triển web. Nhưng đó cũng là một lựa chọn tuyệt vời để phát triển ứng dụng GUI. Và GTK+ và Glade giúp đơn giản hóa quá trình tạo các ứng dụng đa nền tảng hơn nữa.

GTK+ và Glade Interface Designer dành cho nhà phát triển Python

GTK+ (GIMP Toolkit) và Glade Interface Designer là sự kết hợp tuyệt vời dành cho các nhà phát triển Python muốn tạo giao diện đồ họa trực quan và đẹp mắt cho người dùng.

GTK+ là bộ công cụ đa nền tảng mà bạn có thể sử dụng để phát triển GUI. Nó tương thích với nhiều hệ điều hành, bao gồm Linux, Windows và macOS.

Glade Interface Designer, một công cụ đồng hành với GTK+, cho phép bạn thiết kế GUI mà không cần phải viết code bố cục. Bạn có thể sử dụng nó để tạo GUI trong môi trường WYSIWYG chỉ bằng vài cú nhấp chuột với các chức năng kéo và thả đơn giản.

Thiết lập môi trường Python để phát triển GTK+ và Glade

Thiết lập môi trường của bạn là bước quan trọng đầu tiên để đảm bảo quy trình làm việc suôn sẻ và hiệu quả.

1. Cài đặt Python

Bắt đầu bằng cách đảm bảo bạn đã cài đặt Python trên hệ thống của mình. Bạn sẽ thấy code Python 3 trong các ví dụ bạn đọc vì nó cung cấp sự hỗ trợ và tích hợp tốt hơn cho GTK+ và Glade. Đối với Linux và macOS, Python thường được cài đặt sẵn.

Người dùng Windows có thể tải xuống Python từ trang web Python chính thức.

2. Cài đặt GTK+

Bạn có thể cài đặt GTK+ bằng trình quản lý gói.

Đối với hệ thống Linux dựa trên Ubuntu và Debian, hãy sử dụng:

sudo apt-get install libgtk-3-dev

Đối với Fedora và các bản phân phối tương tự:

sudo dnf install gtk3-devel

Trên macOS, sử dụng Homebrew:

brew install gtk+3

Người dùng Windows có thể tải xuống GTK+ từ trang tải xuống chính thức của GTK. Nhưng nếu đã cài đặt MSYS2, bạn có thể mở dòng lệnh MSYS2 và sử dụng lệnh này:

pacman -S mingw-w64-x86_64-python-gobject

3. Cài đặt Glade

Bạn có thể sử dụng dòng lệnh để cài đặt Glade.

Đối với các bản phân phối Linux dựa trên Ubuntu và Debian:

sudo apt-get install glade

Trên Fedora:

sudo dnf install glade

Người dùng macOS có thể sử dụng Homebrew:

brew install glade

Người dùng Windows có thể sử dụng lệnh sau với MSYS2:

pacman -S mingw-w64-x86_64-glade

4. Ràng buộc Python cho GTK+

Cài đặt PyGObject để tích hợp GTK+ với Python. Lệnh bạn sẽ sử dụng cho việc này là:

pip install PyGObject

Nếu xảy ra lỗi như "Building wheel for pycairo (pyproject.toml) did not run" trong quá trình cài đặt PyGObject, bạn cũng sẽ cần cài đặt gói cairo.

Đối với các bản phân phối Linux dựa trên Ubuntu và Debian:

sudo apt-get install libcairo2-dev

Với Fedora:

sudo yum install cairo-devel

Trên macOS:

brew install pygobject3

5. Thiết lập môi trường ảo (tùy chọn)

Bạn nên sử dụng môi trường ảo cho các dự án Python của mình. Điều này cô lập các project dependency của bạn. Tạo và kích hoạt môi trường ảo trên Linux bằng các lệnh terminal sau:

python -m venv myenv
source myenv/bin/activate

Trên Windows sử dụng:

python -m venv myenv
myenv\Scripts\activate

Trên macOS, để đảm bảo rằng môi trường ảo có thể truy cập các gói cài đặt, hãy sử dụng:

python -m venv --system-site-packages myenv
source myenv/bin/activate

6. Xác minh cài đặt

Để xác minh rằng GTK+ và Glade đã được cài đặt, hãy tạo một script Python đơn giản để nhập GTK:

import gi
gi.require_version("Gtk", "3.0")
from gi.repository import Gtk

print("GTK+ version:", Gtk.get_major_version(), Gtk.get_minor_version())

Khi bạn chạy script này, nó sẽ xuất ra phiên bản GTK+ đã cài đặt. Nếu mọi việc suôn sẻ, bạn đã thiết lập được môi trường phát triển của mình.

Tạo một ứng dụng GUI đơn giản với Glade Interface Designer và Python

Bạn có thể thiết kế ứng dụng GUI của mình trong Glade Interface Designer và xuất bố cục dưới dạng file dự án. Sau đó, bạn có thể truy cập file dự án đó từ code Python của mình.

Thiết kế GUI với Glade

Giao diện kéo và thả của Glade giúp bạn dễ dàng tập trung vào thiết kế mà không bị sa lầy vào code cơ bản. Khởi động Glade từ menu ứng dụng hoặc dòng lệnh của hệ thống bằng lệnh này:

glade

Bạn sẽ thấy giao diện Glade nơi bạn có thể bắt đầu tạo bố cục GUI của mình.

Nút Create New Project ở trên cùng bên trái cung cấp một canvas trống cho thiết kế GUI của bạn. Glade cung cấp nhiều loại widget ở thanh trên cùng, bao gồm các nút, kiểu nhập văn bản và nhãn. Kéo các widget này vào canvas để bắt đầu tạo kiểu cho GUI của bạn. Bạn có thể thay đổi kích thước và định vị các widget theo nhu cầu thiết kế của mình.

Đầu tiên, chọn widget GtkWindow từ menu Toplevels:

Ở trang General trên thanh bên phải của Glade, bạn sẽ thấy tùy chọn ID. ID này là tên duy nhất của widget bạn đã thêm. Trong ví dụ này, hãy gán ID myMainWindow cho GtkWindow mà bạn đã thêm.

Bây giờ, bạn có thể thêm widget vào cửa sổ chính mà bạn đã tạo. Đi tới Containers ở thanh trên cùng, chọn widget GtkBox và kéo widget đó vào không gian làm việc của bạn. Sau đó cung cấp cho nó một ID, myMainBox.

Sau khi thêm widget GtkBox, bạn sẽ thấy nhiều tùy chọn khác nhau ở bên phải không gian làm việc dành riêng cho widget đó. Bạn có thể chỉnh sửa toàn bộ thiết kế của mình tại đây mà không cần viết bất kỳ code nào.

Tiếp theo, thêm widget Control vào thiết kế của bạn. Để làm như vậy, hãy đi tới Control ở thanh trên cùng, chọn GtkButton làm ví dụ và kéo nó vào bất kỳ đâu trong GtkBox. Cung cấp ID cho nó, myButton. Nếu muốn, bạn cũng có thể thay đổi văn bản của nút bằng tab General ở bảng bên phải.

GtkButton là một widget có thể nhấp vào, vì vậy bạn có thể xác định trình xử lý Python cho nó và viết code thích hợp sau này. Chuyển đến tab Signals ở menu bên phải và chỉ định trình xử lý cho tín hiệu được nhấp vào. Đối với ví dụ này, hãy gọi nó là on_button_clicked.

Bây giờ, bạn có thể lưu thiết kế GUI của mình dưới dạng file dự án. Lưu file dưới dạng myDesign.glade.

Sử dụng file thiết kế Glade từ code Python

Tạo file app.py trong cùng thư mục với file myDesign.glade của bạn. Dán đoạn code sau vào file này:

import gi
gi.require_version("Gtk", "3.0")
from gi.repository import Gtk
from gi.repository import Gdk

class MyApp:
    def __init__(self):

        # Load the Glade file to construct the GUI

        self.builder = Gtk.Builder()
        self.builder.add_from_file("myDesign.glade")


        # Retrieve the main window from Glade and set up the close event

        self.window = self.builder.get_object("myMainWindow")
        self.window.connect("destroy", Gtk.main_quit)


        # Retrieve the button from Glade and connect the click event

        self.button = self.builder.get_object("myButton")
        self.button.connect("clicked", self.on_button_clicked)


        # Variable to toggle the background color

        self.color_toggle = False

    def on_button_clicked(self, widget):

        # Click the button and the background color will change

        color = "#FF0000" if self.color_toggle else "#00FF00"
        self.window.modify_bg(Gtk.StateType.NORMAL, Gdk.color_parse(color))
        self.color_toggle = not self.color_toggle

    def run(self):
        self.window.show_all()
        Gtk.main()

if __name__ == "__main__":
    app = MyApp()
    app.run()

Code này sẽ thay đổi màu nền mỗi khi bạn nhấp vào nút. Lưu ý các lệnh gọi đến self.builder.get_object() chuyển ID của các widget mà bạn đã xác định trong Glade.

Chạy script Python của bạn bằng lệnh này để xem kết quả:

python3 app.py