ImGuiFileDialog là một thư viện tiện ích được thiết kế cho Dear ImGui, giúp nhà phát triển dễ dàng thêm chức năng chọn tệp chuyên nghiệp vào ứng dụng của họ. Bài viết này sẽ hướng dẫn bạn các bước đơn giản để tích hợp và sử dụng ImGuiFileDialog một cách hiệu quả, ngay cả khi bạn mới bắt đầu.

Chuẩn bị: Tải xuống ImGuiFileDialog

Để bắt đầu, bạn cần thêm ImGuiFileDialog vào dự án của mình. Bạn có thể tải mã nguồn bằng lệnh sau:

git clone https://gitcode.com/gh_mirrors/im/ImGuiFileDialog

Các tệp cốt lõi bạn cần quan tâm trong thư mục đã tải xuống là:

• ImGuiFileDialog.h: Tệp tiêu đề chứa các khai báo.
• ImGuiFileDialog.cpp: Tệp triển khai logic của thư viện.
• ImGuiFileDialogConfig.h: Tệp cấu hình cho phép tùy chỉnh.

Các bước tích hợp nhanh chóng

1. Thêm các tệp vào dự án của bạn

Sao chép ba tệp cốt lõi trên vào thư mục mã nguồn của dự án và đảm bảo trình biên dịch có thể truy cập chúng. Nếu bạn đang sử dụng CMake để quản lý bản dựng, hãy thêm các tệp này vào danh sách tệp nguồn trong tệp CMakeLists.txt của bạn.

2. Bao gồm tệp tiêu đề

Trong tệp nguồn nơi bạn muốn sử dụng hộp thoại tệp, hãy thêm dòng sau để bao gồm tệp tiêu đề:

#include "ImGuiFileDialog.h"

3. Khởi tạo và sử dụng hộp thoại

Trong vòng lặp kết xuất (render loop) của ImGui, thêm đoạn mã sau để hiển thị và xử lý hộp thoại tệp:

/* Khai báo biến để giữ trạng thái mở của hộp thoại */
bool showFileDialog = false;

/* Nút để mở hộp thoại */
if (ImGui::Button("Chọn tệp tin")) {
    showFileDialog = true;
    /* Mở hộp thoại với các tham số: 
     * "Key" duy nhất cho hộp thoại, Tiêu đề hiển thị, Bộ lọc tệp (ví dụ: ".txt", ".cpp"), Thư mục mặc định
     */
    ImGuiFileDialog::Instance()->OpenDialog("FileSelectionKey", "Chọn một tệp", ".txt,.cpp,.h", ".");
}

/* Xử lý hiển thị và kết quả của hộp thoại */
if (showFileDialog) {
    /* Hiển thị hộp thoại tệp */
    if (ImGuiFileDialog::Instance()->Display("FileSelectionKey")) {
        /* Kiểm tra xem người dùng đã xác nhận lựa chọn hay chưa */
        if (ImGuiFileDialog::Instance()->IsOk()) {
            /* Lấy tên tệp đầy đủ đã chọn */
            std::string selectedFileName = ImGuiFileDialog::Instance()->GetFilePathName();
            /* Lấy đường dẫn tệp đầy đủ đã chọn */
            std::string selectedFilePath = ImGuiFileDialog::Instance()->GetFilePath();
            
            /* Thực hiện xử lý với đường dẫn tệp đã chọn ở đây */
            // Ví dụ: std::cout << "Đã chọn: " << selectedFileName << std::endl;
        }
        /* Đóng hộp thoại sau khi xử lý */
        ImGuiFileDialog::Instance()->Close();
        showFileDialog = false; /* Đặt lại trạng thái để không hiển thị lại nếu không có tương tác */
    }
}

Tùy chỉnh

Bạn có thể sửa đổi tệp ImGuiFileDialogConfig.h để tùy chỉnh các khía cạnh của hộp thoại, ví dụ:

• Đặt bộ lọc tệp mặc định.
• Điều chỉnh kích thước và vị trí của hộp thoại.
• Kích hoạt hoặc hủy kích hoạt tính năng xem trước tệp.

Nguồn tham khảo

• Để biết hướng dẫn chi tiết hơn, vui lòng tham khảo tệp Documentation.md trong kho lưu trữ.
• Thông tin về giấy phép: LICENSE.

Câu hỏi thường gặp

Hỏi: Hộp thoại không hiển thị, phải làm sao?
Đáp: Hãy đảm bảo rằng ngữ cảnh ImGui của bạn đã được khởi tạo đúng cách và bạn đã gọi phương thức ImGuiFileDialog::Instance()->Display() trong vòng lặp kết xuất.

Hỏi: Làm thế nào để thêm bộ lọc tệp tùy chỉnh?
Đáp: Chỉ định bộ lọc trong tham số thứ ba của phương thức OpenDialog. Ví dụ: ".png,.jpg,.jpeg" sẽ chỉ hiển thị các tệp hình ảnh.

Bằng cách làm theo các bước trên, bạn đã tích hợp thành công ImGuiFileDialog vào dự án của mình. Thư viện nhỏ gọn này không chỉ dễ sử dụng mà còn cung cấp nhiều tùy chọn cấu hình, làm cho nó trở thành một lựa chọn tuyệt vời cho các ứng dụng Dear ImGui.