Bài 2: Tích hợp Qt Designer và PyUIC vào Pycharm

Trong Bài 1 các bạn đã biết cách cài đặt và sử dụng Qt Designer. Tuy nhiên việc mở phần mềm Qt Designer để thiết kế, sau đó chuyển qua Pycharm cũng làm mất khá nhiều thời gian. Và đặc biệt ta cũng cần biết được các tên biến control được khai báo và bố trí như thế nào trong giao diện “.ui”. Vì vậy bài này Tui sẽ hướng dẫn các bạn cách thức tích hợp Qt Designer vào Pycharm để chỉ cần một cú click chuột là có thể mở giao diện lên để cập nhật thiết kế cũng như tạo mới, đồng thời cũng hướng dẫn cách tích hợp PyUIC để tự động tạo mã nguồn Python từ các giao diện “.ui” bằng một cú click chuột.

Các bạn xem hình dưới đây:

Làm thế nào để ta tích hợp được 3 menu chức năng vào External Tools:

menu “Create new Qt Designer“, dùng để mở phần mềm Qt Designer và thiết kế một giao diện mới
menu “Open Selected Qt Designer“, dùng để mở file giao diện thiết kế đang chọn để cập nhật thêm giao diện cho nó
menu “Generate Python Code with PyUIC“, chức năng này dùng để tự động tạo mã lệnh Python cho giao diện đang chọn.

Để làm được điều trên, Chúng ta tiến hành các bước như sau:

Bước 1: Vào menu File/ chọn Settings…

Bước 2: Tìm tới mục “External Tools” như hình dưới đây:

Trong màn hình External Tools, bạn quan sát thấy ở bên trên có danh sách các nút lệnh “+”, “-“, …. dùng để thêm menu, xóa menu, chỉnh sửa menu, di chuyển vị trí xuất hiện:

Bước 3: Tạo menu “Create new Qt Designer“

Menu này có chức năng là nhấn vào thì mở phần mềm Qt Designer lên để tạo màn hình giao diện thiết kế mới.

Nhấn vào biểu tượng dấu “+” để tạo mới một menu:

Sau đó tiến hành định nghĩa cho các fields như sau:

Name: Nhập vào tên của menu, ví dụ “Create new Qt Designer”
Description: Nhập vào mô tả cho menu, ví dụ “This function used to Create new Qt Designer”
Program: Trỏ tới chính xác file designer.exe mà ta cài Qt Designer, trong trường hợp này thì nó là đường dẫn “C:\Program Files (x86)\Qt Designer\designer.exe“, dĩ nhiên tùy vào lúc bạn cài đặt, phải trỏ cho đúng
Working directory: Mục này phải cho phần mềm biết đường dẫn hiện tại của dự án là gì. Ta dùng chính xác mã lệnh: $ProjectFileDir$

Sau đó nhấn nút “OK” để tạo menu “Create new Qt Designer”, xem kết quả:

Bước 4: Tạo menu “Open Selected Qt Designer“

Menu này có chức năng là khi lập trình viên bấm chuột phải file giao diện “.ui” thì giao diện này sẽ được mở lên trong Qt Designer để ta tiếp tục thiết kế. Mọi sự thay đổi lúc thiết kế lúc ta lưu trữ nó sẽ tự động cập nhật trong dự án.

Trong màn hình External Tools ta tiếp tục lặp lại thao tác nhấn vào nút “+” để mở màn hình thêm menu mới:

Name: Nhập vào tên của menu, ví dụ “Open Selected Qt Designer“
Description: Nhập vào mô tả cho menu, ví dụ “This tool used to open Open Selected Qt Designer”
Program: Trỏ tới chính xác file designer.exe mà ta cài Qt Designer, trong trường hợp này thì nó là đường dẫn “C:\Program Files (x86)\Qt Designer\designer.exe“, dĩ nhiên tùy vào lúc bạn cài đặt, phải trỏ cho đúng
Arguments: Cần cho phần mềm biết ta đang bấm chuột phải vào file giao diện “.ui” nào. Ta dùng chính xác mã lệnh: “$FileDir$\$FileName$”. Lưu ý là có nháy kép bao bọc mã lệnh để trong trường hợp bạn lưu source code trong thư mục có khoảng trắng thì nó vẫn hiểu. Đối số này sẽ được truyền cho phần mềm Qt Designer, nên khi mở phần mềm lên nó sẽ tự động mở màn hình giao diện theo đúng đường dẫn này.
Working directory: Mục này phải cho phần mềm biết đường dẫn hiện tại của dự án là gì. Ta dùng chính xác mã lệnh: $ProjectFileDir$

Nhấn nút “OK” để tạo menu “Open Selected Qt Designer“:

Bước 5: Tạo menu “Generate Python Code with PyUIC“

Menu này có chức năng là tự động tạo mã lệnh Python từ giao diện “.ui”, nó rất hữu ích để cho lập trình viên biết được các biến control nào được bố trí trong giao diện để lập trình tương tác sau này.

Trong màn hình External Tools ta tiếp tục lặp lại thao tác nhấn vào nút “+” để mở màn hình thêm menu mới:

Name: Nhập vào tên của menu, ví dụ “Generate Python Code with PyUIC“
Description: Nhập vào mô tả cho menu, ví dụ “This function used to generate Python Code with PyUIC”
Program: Trỏ tới chính xác file python.exe mà ta cài Python, trong trường hợp này thì nó là đường dẫn “C:\Python311\python.exe“, dĩ nhiên tùy vào lúc bạn cài đặt, phải trỏ cho đúng
Arguments: Cần cho phần mềm biết ta đang bấm chuột phải vào file giao diện “.ui” nào và file mã lệnh Python nào nên được tạo ra cho giao diện này. Ta dùng chính xác mã lệnh: -m PyQt6.uic.pyuic “$FileName$” -o “$FileNameWithoutExtension$.py”. Lưu ý là có nháy kép bao bọc mã lệnh để trong trường hợp bạn lưu source code trong thư mục có khoảng trắng thì nó vẫn hiểu. Đối số này sẽ được truyền cho phần mềm Qt Designer, nên khi mở phần mềm lên nó sẽ tự động mở màn hình giao diện theo đúng đường dẫn này.
Arguments: Trong trường hợp 1 dự án có nhiều cấp thư mục khác nhau, có thể lồng nhau, ta có nhiều file giao diện ui khác nhau thì nên dùng cú pháp: -m PyQt6.uic.pyuic “$FileDir$\$FileName$” -o “$FileDir$\$FileNameWithoutExtension$.py”
Working directory: Mục này phải cho phần mềm biết đường dẫn hiện tại của dự án là gì. Ta dùng chính xác mã lệnh: $ProjectFileDir$

Nhấn nút “OK” để tạo menu “Generate Python Code with PyUIC“:

Bước 6: Thử nghiệm các menu vừa tạo

Ta có 2 nơi để sử dụng các menu này trong Pycharm:

Vào menu Tools/ chọn External Tools/ chọn các menu
hoặc bấm chuột phải vào dự án/file chọn External Tools/ Chọn các menu

Hoặc:

Ví dụ bây giờ ta chọn chức năng “Create new Qt Designer“, phần mềm Qt Designer sẽ hiển thị như dưới đây với màn hình chọn New Form:

Nếu ta bấm chuột phải vào file “HelloWorldDialog.ui” rồi chọn “Open Selected Qt Designer“, chương trình Qt Designer sẽ được mở lên cùng với màn hình giao diện đang chọn này:

Nếu ta bấm chuột phải vào file “HelloWorldDialog.ui” rồi chọn “Generate Python Code with PyUIC“, chương trình sẽ tự động tạo mã lệnh “HelloWorldDialog.py” cho giao diện này:

Chọn Generate Python Code with PyUIC, ta có kết quả:

Bước 7: Lập trình để hiển thị cửa sổ giao diện bằng lớp Generate Python

Khi “HelloWorldDialog.py” được tạo ra thì ta có thêm một phương án lựa chọn cho việc hiển thị cửa sổ giao diện (tức là phương án tải file .ui vẫn dùng bình thường). Cách số 2 này ta làm như sau:

Tạo một lớp Python, ví dụ đặt tên “TestHelloWorldDialogUI.py”, sau đó ta viết mã lệnh như sau:

from PyQt6.QtWidgets import QApplication, QDialog
from HelloWorldDialog import Ui_Dialog

app=QApplication([])
dialog=QDialog()
window = Ui_Dialog()
window.setupUi(dialog)
dialog.show()
app.exec()

Chạy mã lệnh “TestHelloWorldDialogUI.py” lên ta có kết quả:

Như vậy rõ ràng ta vẫn có được giao diện như mong muốn, nhưng phương án Generate Python code này có gì hay hơn phương án load file UI như đã nói trong bài số 1? Phương án này hay hơn rất nhiều đó là ta có thể dễ dàng truy suất tới các biến control trên giao diện thông các các lớp, có thể dễ dàng mở rộng mã lớp, tạo thêm các lớp kế thừa để bổ sung thêm các chức năng khác một cách tối ưu nhất có thể.

Source code bài này tải ở đây:

https://www.mediafire.com/file/lpehrxzl7clssbj/HelloWorld.rar/file

Các bài học sau Tui sẽ trình bày chi tiết từng layout và control cụ thể để các bạn có thể tự tay xây dựng được các giao diện theo ý muốn của mình.

Chúc các bạn thành công