[Beginner] QML Programming, Part 1

QML for Qt UI development,
explained in detail from the basics to hands-on practice.

Implementing UI with the Qt framework, 
more powerfully with QML!

The QML programming language?

It is a programming language that allows you to easily develop modern, advanced UIs
with the Qt framework.

QML (Qt Modeling Language) is a programming language provided by the Qt framework. QML is a programming language that can be used for UI development in the Qt framework, making it easy to implement modern, sophisticated UIs.

When developing GUI programs using the Qt framework, you can distinguish between the design logic for the UI and the functional logic for the program's functionality. Among these, QML is a language that can be chosen as an alternative to C++ when developing the UI corresponding to the design logic. In particular, developing the UI with QML allows you to completely separate the design logic from the functional logic, increasing source code reusability.

By developing design logic with QML, you can implement UIs much more easily and quickly than with C++. You can also easily apply modern, advanced GUI technologies such as Flickable, Gesture, Animation, and 3D.

Easy syntax and concise readability
Experience the advantages of QML.

Shall we take a look at the “Hello World” output example commonly used when first learning a programming language? You can easily see how concise a language QML is.

import QtQuick

Window {
    width: 300
    height: 200
    visible: true
    title: qsTr("QML Example Source Code")

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

_{QML Example Source Code}

_{QML example source code execution screen}

QML is easy and simple. Even non-developers can understand it easily. Therefore, designers and developers can communicate with each other using QML code and share ideas.

Therefore, by using QML, designers and developers can collaborate with the same development tools and shorten the development period compared to before.

Introduction to QML Programming 
Recommended for those who 🙋‍♀️

Course Objective 💡

• You can learn how to develop modern, advanced UX/UI using QML.
• You can learn how to completely separate design logic from functional logic when using QML.
• By studying the theory in each section and writing code yourself through a variety of practical examples, you can naturally develop the QML skills needed in the workplace.

What makes this course unique
Check it out 📖

Theory and practice all at once

The course is structured to help you improve not only your QML syntax skills but also your practical abilities. After learning the theory in each section, you can enhance your professional skills through lessons featuring hands-on examples that you implement yourself by following along with the course.

Beyond the Barriers of Online Learning

The instructor’s image is included on the lecture screen. Learn anytime, anywhere through classes featuring vivid live coding, creating an experience much like attending an in-person class.

Course structure 📖

Section 1. What is QML
QML is an interpreted language provided by the Qt Framework. In this section, we will explore the features and advantages of QML.

Section 2. QML Syntax and Structure
This section teaches the structure and syntax of QML, as well as how to use QML through hands-on examples.
Section 3. Types
A type is a concept similar to Qt's QWidget. In this section, you will learn what types are and focus on commonly used types provided by QML. You will also implement a button type using the Accessible type through a hands-on example.

Section 4. Events 
This section teaches you how to implement event handling for events that occur in the user interface, such as touch, mouse, and keyboard events. You will also learn how to implement Signals in QML. In the practice example, you will learn how to work with Signals in detail by connecting a Signal to a Method (function). 

Section 5. Implementing a Dynamic UI Using the Loader Type 
Learn how to dynamically change a specific area of the UI. For example, you will learn how to switch from GUI screen A to screen B when certain conditions are met. Through this section, you will learn how to implement screens dynamically. In the final hands-on example, we will cover how to dynamically change screens using the Loader type.

Section 6. Canvas 
Learn how to display images, lines, shapes, and text on the screen, like in a drawing program. As an example, we will look at how to select a color and draw on a canvas.

Section 7. Graphic Effects
Learn how to apply effects such as Blur, Blend, and Color to images.

Section 8. Module Programming 
You will learn how to modularize user-defined types, just as you would modularize modules frequently used in GUIs, such as buttons and combo boxes. You will also learn how to modularize and implement QML through hands-on examples. 

Section 9. Using JavaScript in QML 
You will learn how to use JavaScript functions in QML. You will also learn how to import JavaScript files into QML. Through a hands-on calculator implementation, you can learn in detail how to use JavaScript. 

Section 10. Dialog
Learn how to use dialogs in QML. In the hands-on example, you will also learn how to use dialogs by implementing a dialog for selecting a color yourself.

Section 11. Layout 
In QML, in addition to Anchors, you can use layouts such as RowLayout, ColumnLayout, GridLayout, and Layout. In this lesson, you will learn how to use various layouts.

Section 12. Type Positioning 
Learn how to display Types on the screen using Type Positioning. For example, learn how to arrange Types horizontally, vertically, or in a grid-like layout.

Section 13. Qt Quick Controls 
Qt Quick Controls provides the GUI interfaces needed to build screens, such as Button, Dial, CheckBox, and BusyIndicator. In this section, you will learn how to use Qt Quick Controls.

Q&A 💬

Q. Is there anything I should learn before taking the course?

This course requires basic knowledge of C++ and Qt. If you have no experience with Qt, we recommend taking the previous “Qt Programming” course before taking this one.

[Introduction] Qt 6 Programming Part 1

qtdev

$84.70

29%

$59.40

Beginner / GUI, Qt

4.5

(50)

400+

Qt allows you to develop SW that is compatible with various operating systems. In other words, you can develop SW that runs on various platforms with the source code developed once with Qt.

Beginner

GUI, Qt

[Introduction] Qt 6 Programming Part 1

qtdev

$84.70

29%

$59.40

Beginner / GUI, Qt

4.5

(50)

400+

[Introduction] Qt 6 Programming Part 2

qtdev

$84.70

29%

$59.40

Beginner / Qt, GUI

4.9

(21)

200+

This lecture is the second part of Qt Programming Part 1. If you are new to Qt, we recommend that you study Part 1 first and then Part 2.

Beginner

Qt, GUI

[Introduction] Qt 6 Programming Part 2

qtdev

$84.70

29%

$59.40

Beginner / Qt, GUI

4.9

(21)

200+