[Lập Trình C] Hướng Dẫn Tạo GUI Bằng GTK – F-code

TÁC GIẢ: BÙI NGỌC HUY

Chắc hẳn trước giờ khi nghe tới lập trình C thì ai cũng sẽ nghĩ ngay đến màn hình console, cái giao diện chắc hẳn rất quen thuộc với mọi người. Hôm nay mình sẽ giới thiệu một thứ mới lạ hơn, đó là tạo GUI (Graphical User Interface) cho ứng dụng. Hy vọng qua bài viết này các bạn có thể thấy được nhiều thứ mà ngôn ngữ C có thể làm được.

GTK là gì?

GTK, viết tắt của từ GIMP Toolkit, là một bộ công cụ để xây dựng GUI (Graphical User Interface) trên nhiều nền tảng khác nhau. Thư viện của GTK chứa một bộ các đối tượng đồ họa hay gọi là widgets. Các bạn có thể tham khảo Software architecture của nó ở hình bên dưới.

Bản thân thư viện của GTK được viết bằng ngôn ngữ C nhưng các bạn có thể sử dụng nhiều ngôn ngữ khác để xây dựng như là Javascript, Python, Perl… Các bạn có thể xây dựng cấu trúc của các cửa số một cách thủ công nhưng đối với các giao diện phức tạp thì mình khuyên là nên sử dụng “GtkBuilder XML description format” để khởi tạo thay vì phải làm thủ công. Trong bài viết này vì mình chỉ hướng dẫn tạo giao diện đơn nên sẽ không sử dụng XML mà sẽ làm thủ công.

Cài đặt môi trường

Có nhiều cách để cài GTK trên windows, các bạn có thể tham khảo ở đây, trong bài viết này mình sẽ hướng dẫn dùng MSYS2 để cài đặt.

MSYS2 là một phần mềm cung cấp môi trường giống như UNIX cho windows.

Bước 1: Tải msys2 tại link này(phiên bản 64bit), cứ next next là xong rồi

Bước 2: Bật msys2 lên và nhập dòng lệnh dưới đây vào.

pacman -Syu

Bước 3: Tắt msys2 lên và bật lại, gõ tiếp dòng lệnh dưới đây:

pacman -Su

Bước 4: Gõ dòng lệnh dưới đây để cài đặt GTK và những dependencies của nó

pacman -S mingw-w64-x86_64-gtk3

Bước 5:Để có thể sử dụng C để lập trình ứng dụng GTK, ta cần phải cài compiler chẳng hạn như gcc.

pacman -S mingw-w64-x86_64-toolchain base-devel

Các bạn có thể bỏ trống rồi enter để cài hết hoặc chọn như mình.

Khi nó hỏi

Enter a selection (default=all):

lần nữa thì chỉ cần bỏ trống rồi enter để nó cài tất cả.

Mô tả ứng dụng

Chúng ta sẽ thiết kế một ứng dụng bao gồm

• 1 label với nội dung là “Hello world”
• 1 button khi nhấn vào sẽ in ra “clicked”

Ứng dụng chúng ta sẽ có giao diện đơn giản như hình dưới:

Bắt đầu thôi

Trước khi bắt đầu code, có một số điều chúng ta cần lưu ý:

• Mỗi GtkApplicationWindow chỉ chứa 1 widget
• Chúng ta sẽ sử dụng container GtkBox (gồm 2 rows) để bao quanh ứng dụng.
• Tạo một buttonBox, bên trong buttonBox chứa 1 label dùng để hiển thị text.

Các bạn có thể nhìn vào hình bình dưới để hình dung cấp độ của từng widget.

Bây giờ hãy vào “C:\msys64\home\Admins” (đường dẫn mặc định khi cài đặt msys2, bạn nào cài đặt chỗ khác thì chỉnh lại) tạo file main.c

Để sử dụng GTK chúng ta phải include thư viện vào bằng cách:

#include <gtk/gtk.h> Tiếp đến là hàm main

Ở 2 dòng đầu tiên, chúng ta chỉ khởi tạo biến status để lưu trạng thái của ứng dụng và khái báo pointer của application.

Tiếp theo, chúng ta sẽ tạo một GtkApplication instance. Và kết nối event activate của GtkApplication với hàm activate. Chúng ta sẽ định nghĩa GUI ở trong hàm activate.

Bên trong hàm activate, đầu tiên chúng ta sẽ khai báo các pointer cần sử dụng:

Tiếp đến ta sẽ tạo một window với size mặc định là 200-200 và đặt title cho nó là “Window”

Sau đó chúng ta sẽ tạo tiếp 1 label để hiển thị dòng chữ Hello world và tạo nút button có label là “Click Me”

Sau khi tạo xong label và button. chúng ta cần phải tạo một container để chứa 2 widget này. Như hình bên dưới mình sẽ tạo một gtkBox có spacing là 5 (khoảng cách giữa các child, tính bằng pixels), thêm label vào với padding là 50px và button_box với padding là 10px.

Cuối cùng chúng ta chỉ cần kết nối sự kiện click với hàm onClicked và thêm thằng gtkBox vào window vừa tạo ở trên, sau đó hiển thị ra là được.

Cuối cùng Hàm onClicked chỉ đơn giản như thế này.

Để compile được thì các bạn hãy mở msys2 lên (lưu ý không được dùng cmd của windows để gõ lệnh vì môi trường khác nhau). Nhập như sau vào

gcc `pkg-config --cflags gtk+-3.0` -o app main.c `pkg-config --libs gtk+-3.0` Nếu compile thành công thì gõ tiếp dòng dưới đây để chạy ứng dụng. ./app

Lưu ý: Nếu bạn gặp lỗi như hình dưới đây:

thì nguyên nhân có thể là chưa cập nhập biến môi trường. Gõ dòng lệnh sau vào msys2 shell để cập nhập:

PATH=/mingw64/bin:$PATH

Hoặc cũng có thể do bạn chạy nhầm msys2 (phải chạy msys2 mingW 64 bit).

Các bạn có thể tham khảo thêm API tại đây.

Một điều cần lưu ý

1. Id của application khi khởi tạo GTK instance bằng gtk_application_new phải
   • ID bao gồm 1 hoặc nhiều phần tử, phân cách nhau bằng dấu chấm. Mỗi phần tử phải chứa ít nhất 1 ký tự. Ví dụ hello.world => chứa 2 phần tử là hello và world
   • Mỗi phần tử chỉ bao gồm các kí tự “[A-Z][a-z][0-9]_-“. Không khuyến khích sử dụng dấu gạch ngang. Lý do: tham khảo ở đây
   • Mỗi ID phải có ít nhất một dấu chấm
   • ID không được phép bắt đầu bằng dấu chấm
   • ID phải ít hơn 255 kí tự
2. Tuy ở bài viết này không đề cập tới vấn đề này nhưng mình sẽ nói đến cho những bạn nào muốn tìm hiểu hơn. Ở bài viết trên mình hướng dẫn các bạn xây dựng GUI một cách thủ công, không sử dụng công cụ như Glade. Trường hợp các bạn sử dụng glade để tạo GUI trên linux thì sẽ cần phải thêm “-export-dynamic” vào đoạn compile. Mục đích là để signal callback được thêm vào symbol table. Một điều cần chú ý là option này chỉ hỗ trợ ELF targets, không áp dụng với PE targets. Vì vậy ở windows chúng ta phải cần declare signal callback bằng G_MODULE_EXPORT để có thể thêm vào symbol table (nếu không chúng ta không thể bắt được các signal chẳng hạn như việc click vào button, việc đóng một window)

Bài viết của mình tới đây là kết thúc, mong rằng bài viết này có thể giúp bạn khám phá được nhiều điều hay ho mà ngôn ngữ C có thể làm được.

Chia sẻ:

• X
• Facebook

Thích Đang tải...

Có liên quan