[Beginner] QML Programming Part 1

QML for Qt UI development,
We will explain in detail from introduction to practice.

Qt Framework UI implementation,
More powerful with QML!

Programming language QML?

Modern, advanced UI in the Qt framework
It is a programming language that is easy to develop in.

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, making it easy to implement modern, advanced 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 functional portion. Among these, QML is a language of choice as an alternative to C++ when developing UIs that correspond to the design logic . Specifically, developing UIs with QML allows for a complete separation of design and functional logic, thereby increasing source code reusability.

Developing design logic using QML allows you to implement UIs much more easily and quickly than developing using C++. It also allows you to easily apply modern, advanced GUI technologies like Flickable, Gesture, Animation, and 3D.

Easy grammar, concise readability
Experience the benefits of QML.

Let's look at a "Hello World" output example, a common example when first learning a programming language. It's easy to see how concise QML is.

 import QtQuick Window { width: 300 height: 200 visible: true title: qsTr("QML 예제소스코드") Text { x: 80 y: 70 text: "Hello World" font.pixelSize: 25 } }

_{QML example source code}

_{QML example source code execution screen}

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

Therefore, QML allows designers and developers to collaborate using the same development tools , reducing development time compared to before.

Introduction to QML Programming
I recommend this to these people 🙋‍♀️

Course Objectives 💡

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

Unique features of this course
Check it out 📖

Theory and practice at once

In addition to QML grammar, the course is designed to enhance practical skills. After each section's theoretical study, you'll learn practical examples and practice them yourself, further enhancing your practical skills.

Beyond the online walls

We've captured the image of a knowledge sharer on the screen. Learn anytime, anywhere, as if you were taking an offline class, with vivid live coding.

Lecture Structure 📖

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

Section 2. QML Syntax and Structure
This section covers the structure and syntax of QML, and how to use QML through practical examples.
Section 3. Type
Type is a concept similar to QWidget in Qt. In this section, we'll learn what Type is, focusing on the most frequently used types provided by QML. As a practical example, we'll implement a button type using the Accessible type and report on it.

Section 4. Events
This section covers how to implement event handling for user interface events, such as touch, mouse, and keyboard input. You'll also learn how to implement signals in QML. In this hands-on example, you'll learn how to handle signals in detail through examples of connecting signals to methods (functions).

Section 5. Implementing Dynamic UI using Loader type
You'll learn how to dynamically change specific areas of a UI. For example, you'll learn how to transition from GUI screen A to screen B when a certain condition is met. Therefore, in this section, you'll learn how to dynamically implement screens. The final hands-on example will demonstrate how to dynamically change screens using the Loader type.

Section 6. Canvas
Learn how to display images, lines, shapes, and text on the screen, similar to a Paint program. As an example, let's cover how to draw in Paint using a color selection.

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

Section 8. Module Programming
Learn how to modularize user-defined types, such as frequently used GUI modules like buttons and combo boxes. You'll also learn how to modularize and implement QML through hands-on examples.

Section 9. Using JavaScript in QML
Learn how to use JavaScript functions in QML and how to import JavaScript files in QML. In this hands-on example, you'll learn more about using JavaScript by implementing a calculator.

Section 10. Dialog
Learn how to use dialogs in QML. You'll also learn how to use them by implementing a hands-on example: a dialog for selecting a color.

Section 11. Layout
In addition to Anchors, QML also supports Layouts such as RowLayout, ColumnLayout, GridLayout, and Layout. In this lesson, we'll learn how to use various Layouts.

Section 12. Type Positioning
Type Positioning teaches you how to display types on screen. For example, you'll learn how to arrange types horizontally, vertically, or in a checkerboard pattern.

Section 13. Qt Quick Controls
Qt Quick Controls provide the GUI interfaces needed to compose screens, including Buttons, Dials, CheckBoxes, and BusyIndicators. In this section, you'll learn how to use Qt Quick Controls.

Q&A 💬