[Beginner] QML Programming Part 1

QML for Qt UI development,
we'll guide you in detail from introduction to practice.

Qt framework UI implementation,
more powerful with QML!

Programming language QML?

It is a programming language that allows you to easily develop modern, advanced UIs
in 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 within the Qt framework, and it is designed to easily implement modern and sophisticated UIs.

When developing GUI programs using the Qt framework, you can distinguish between the design logic of the UI and the functional logic of the features. 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 for a complete separation of design and functional logic, which can increase source code reusability.

Developing design logic with QML allows you to implement UIs much more easily and quickly than with C++. Additionally, you can easily apply advanced modern GUI technologies such as Flickable, Gesture, Animation, and 3D.

Easy syntax, concise readability
Experience the advantages of QML.

Let's take a look at the "Hello World" example, which is commonly used when first learning a programming language. You can easily see how concise 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. It is easy to understand even for non-developers. Therefore, designers and developers can communicate and share ideas with each other using QML code.

Therefore, by using QML, designers and developers can collaborate using the same development tools, allowing them to shorten development time more than before.

Introduction to QML Programming
Recommended for 🙋‍♀️

Course Objectives 💡

• You can learn how to develop modern, advanced UX/UI using QML.
• You can learn how to completely separate design logic from functional logic using QML.
• By studying theory section by section and writing code yourself through various practical examples, you can naturally acquire the QML development skills required in the field.

Check out the unique features of this course
📖

Theory and practice all at once

The course is designed to enhance your practical skills beyond just QML syntax. After learning the theory in each section, you can boost your professional capabilities through hands-on lessons where you implement practical examples step-by-step along with the lecture.

Beyond the barriers of online

The instructor is featured on the lecture screen. Learn anytime, anywhere through vivid live coding sessions that make you feel as if you are attending an in-person class.

Course Structure 📖

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

Section 2. QML Syntax and Structure
Learn the structure and syntax of QML. This is a section where you will learn how to use QML through practical examples.
Section 3. Types
A Type is a concept similar to Qt's QWidget. In this section, you will learn what a Type is and focus on the frequently used Types among those provided by QML. You will also have time to implement a button Type using the Accessible type as a practical example.

Section 4. Events
This section covers how to implement event handling for events that occur on the user interface, such as touch, mouse, and keyboard. You will also learn how to implement signals in QML. In the practical exercises, you will learn in detail how to handle signals through examples of connecting signals and methods (functions).

Section 5. Implementing Dynamic UI using Loader type
You will learn how to dynamically change specific areas within the UI. For example, you will learn how to switch from GUI screen A to screen B when certain conditions are met. Therefore, through this section, you will learn how to implement screens dynamically. In the final practical example, we will cover how to dynamically change screens using the Loader type.

Section 6. Canvas
You will learn how to display images, lines, shapes, and text on the screen, similar to a drawing application. We will go over an example where you can select a color and draw on a canvas.

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

Section 8. Module Programming
You will learn how to modularize user-defined types, similar to modularizing frequently used GUI modules such as buttons and combo boxes. You will also explore how to implement QML modularization through hands-on practice examples.

Section 9. Using JavaScript in QML
You will learn how to use JavaScript functions in QML. Additionally, you will learn how to import JavaScript files into QML. In the practice examples, you can learn in detail how to use JavaScript by implementing a calculator.

Section 10. Dialog
Learn how to use dialogs in QML. You can also learn how to use dialogs by directly implementing a color selection dialog as a practical exercise.

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

Section 12. Type Positioning
In Type Positioning, you will learn how to display types on the screen. For example, you will learn how to arrange types horizontally, vertically, or in a grid-like pattern.

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

Q&A 💬