[Sơ cấp] Lập trình QML Phần 1

QML dành cho phát triển UI Qt,
hướng dẫn chi tiết từ cơ bản đến thực hành.

Triển khai UI trên Qt Framework,
mạnh mẽ hơn với QML!

Ngôn ngữ lập trình QML?

Là ngôn ngữ lập trình giúp bạn dễ dàng phát triển giao diện người dùng hiện đại và cao cấp
trong framework Qt.

QML(Qt Modeling Language) là ngôn ngữ lập trình được cung cấp bởi Qt framework. QML là ngôn ngữ lập trình có thể được sử dụng để phát triển UI trong Qt framework, nhằm mục đích triển khai các giao diện người dùng hiện đại và cao cấp một cách dễ dàng.

Khi phát triển chương trình GUI bằng Qt framework, chúng ta có thể phân biệt giữa logic thiết kế của phần UI và logic chức năng của phần tính năng. Trong số đó, QML là ngôn ngữ có thể được lựa chọn thay thế cho C++ khi phát triển UI tương ứng với logic thiết kế. Đặc biệt, khi phát triển UI bằng QML, logic thiết kế và logic chức năng có thể được tách biệt hoàn toàn, giúp tăng khả năng tái sử dụng mã nguồn.

Việc phát triển logic thiết kế bằng QML giúp triển khai giao diện người dùng (UI) dễ dàng và nhanh chóng hơn nhiều so với việc sử dụng C++. Ngoài ra, bạn có thể dễ dàng áp dụng các công nghệ GUI hiện đại và cao cấp như Flickable, Gesture, Animation, 3D.

Cú pháp đơn giản, khả năng đọc ngắn gọn
Hãy trải nghiệm những ưu điểm của QML.

Hãy cùng xem ví dụ xuất "Hello World" thường thấy khi bắt đầu học một ngôn ngữ lập trình nhé? Bạn có thể dễ dàng thấy được QML là một ngôn ngữ tinh gọn đến mức nào.

import QtQuick

Window {
    width: 300
    height: 200
    visible: true
    title: qsTr("Mã nguồn ví dụ QML")

    Text {
        x: 80
        y: 70
        text: "Hello World"
        font.pixelSize: 25
    }
}

_{Mã nguồn ví dụ QML}

_{Màn hình thực thi mã nguồn ví dụ QML}

QML rất dễ dàng và đơn giản. Ngay cả những người không phải là nhà phát triển cũng có thể dễ dàng hiểu được. Vì vậy, các nhà thiết kế và nhà phát triển có thể trao đổi với nhau thông qua mã QML và chia sẻ ý tưởng với nhau.

Do đó, khi sử dụng QML, nhà thiết kế và nhà phát triển có thể hợp tác với nhau trên cùng một công cụ phát triển, giúp rút ngắn thời gian phát triển so với trước đây.

Nhập môn lập trình QML
Đề xuất cho những đối tượng sau 🙋‍♀️

Mục tiêu khóa học 💡

• Bạn có thể học cách phát triển UX/UI hiện đại và cao cấp bằng cách sử dụng QML.
• Bạn có thể học được cách phân tách hoàn toàn giữa logic thiết kế và logic chức năng khi sử dụng QML.
• Vì bạn có thể học lý thuyết theo từng phần và trực tiếp viết mã dựa trên nhiều ví dụ thực tế khác nhau, bạn có thể tiếp thu các kỹ năng phát triển QML cần thiết trong thực tế một cách tự nhiên.

Hãy khám phá những đặc điểm riêng của khóa học này
📖 📖

Lý thuyết và thực hành cùng lúc

Khóa học được thiết kế để bạn có thể nâng cao kỹ năng thực tế bên cạnh cú pháp QML. Sau khi học lý thuyết ở mỗi chương, các bài học được chuẩn bị để bạn có thể tự mình thực hiện các ví dụ thực tế theo bài giảng, từ đó nâng cao năng lực làm việc thực tiễn.

Vượt qua rào cản trực tuyến

Hình ảnh của giảng viên được đưa vào cùng màn hình bài giảng. Thông qua các tiết học cùng màn live coding sống động, hãy trải nghiệm việc học mọi lúc mọi nơi với cảm giác như đang tham gia một lớp học trực tiếp.

Cấu trúc khóa học 📖

Phần 1. What is QML
QML là ngôn ngữ thông dịch được cung cấp bởi Qt Framework. Trong phần này, chúng ta sẽ tìm hiểu về các đặc điểm và ưu điểm của QML.

Phần 2. Cú pháp và Cấu trúc của QML
Tìm hiểu về cấu trúc và cú pháp của QML. Và đây là phần học về cách sử dụng QML thông qua các ví dụ thực hành
Phần 3. Type
Type là một khái niệm tương tự như QWidget của Qt. Trong phần này, bạn sẽ tìm hiểu Type là gì và tập trung vào các Type thường xuyên được sử dụng trong số các Type mà QML cung cấp. Và đây là thời gian để thực hành triển khai một Type nút bấm bằng cách sử dụng Accessible type thông qua ví dụ thực tế.

Phần 4. Events 
Đây là phần học về cách triển khai xử lý các Event phát sinh trên giao diện người dùng như chạm, chuột, bàn phím, v.v. Ngoài ra, bạn sẽ được học về cách triển khai Signal trong QML. Trong các ví dụ thực hành, bạn sẽ tìm hiểu chi tiết cách xử lý Signal thông qua ví dụ kết nối Signal và Method (hàm).

Phần 5. Triển khai Dynamic UI bằng Loader type
Bạn sẽ học cách thay đổi động một khu vực cụ thể trong UI. Ví dụ, bạn sẽ học cách chuyển từ màn hình GUI A sang màn hình B khi đáp ứng một điều kiện nhất định. Do đó, thông qua phần này, bạn sẽ học cách triển khai màn hình một cách linh hoạt. Trong bài tập thực hành cuối cùng, chúng ta sẽ dành thời gian tìm hiểu ví dụ về cách thay đổi màn hình động bằng cách sử dụng Loader type.

Phần 6. Canvas
Chúng ta sẽ tìm hiểu về các phương pháp để hiển thị hình ảnh, đường kẻ, hình khối và văn bản trên màn hình giống như ứng dụng Paint. Chúng ta sẽ cùng thực hiện một ví dụ về việc chọn màu sắc và vẽ tranh trên bảng vẽ.

Phần 7. Graphic Effects 
Tìm hiểu về cách sử dụng các hiệu ứng như Blur, Blend, Color trên hình ảnh. 

Phần 8. Module Programming 
Bạn sẽ học cách mô-đun hóa các Type do người dùng định nghĩa, tương tự như việc mô-đun hóa các mô-đun thường dùng trên GUI như nút bấm và hộp tổ hợp. Và chúng ta sẽ tìm hiểu cách triển khai QML bằng cách mô-đun hóa thông qua các ví dụ thực hành trực tiếp. 

Phần 9. Sử dụng JavaScript trong QML 
Bạn sẽ học cách sử dụng các hàm JavaScript trong QML. Và tìm hiểu cách Import các tệp JavaScript vào QML. Trong ví dụ thực hành, bạn có thể học chi tiết về cách sử dụng JavaScript thông qua việc triển khai máy tính. 

Phần 10. Dialog
Chúng ta sẽ tìm hiểu về cách sử dụng Dialog trong QML. Và thông qua ví dụ thực hành tự triển khai một Dialog chọn Color, bạn có thể học được cách sử dụng Dialog.

Phần 11. Layout 
Trong QML, ngoài Anchors, bạn có thể sử dụng các Layout như RowLayout, ColumnLayout, GridLayout, Layout, v.v. Trong phần này, chúng ta sẽ tìm hiểu về cách sử dụng các loại Layout khác nhau.

Phần 12. Type Positioning 
Type Positioning là phần học về các phương pháp để hiển thị các Type trên màn hình. Ví dụ, bạn sẽ học cách sắp xếp các Type theo chiều ngang, chiều dọc hoặc theo dạng lưới khi bố trí chúng.

Phần 13. Qt Quick Controls 
Qt Quick Controls cung cấp các giao diện GUI cần thiết để cấu thành màn hình như Button, Dial, CheckBox, BusyIndicator, v.v. Trong phần này, bạn sẽ học cách sử dụng Qt Quick Controls.

Hỏi & Đáp 💬