강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Desktop Application

[Beginner] QML Programming Part 2

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

(4.8) 5 reviews

35 learners

  • qtdev
이론 실습 모두
iot
Qt
QML
C++

Reviews from Early Learners

What you will learn!

  • Developing Modern UI with QML

  • UI development using QML and C++

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 Example Source Code" ) Text { x : 80 y : 70 text : "Hello World" font. pixelSize : 25 } }

QML example source code execution screen

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

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 🙋‍♀

  • Anyone (developers, designers) who wants to easily implement modern, advanced UI/UX using QML in Qt

  • Those who want to increase source code maintainability and reusability by separating design logic and functional logic.

  • Designers and developers can communicate and collaborate effectively through the same tools as QML.

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.

The 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 implement 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. Anaimation
Animations provide an easy way to apply animations to GUI elements. For example, a button might appear and disappear. Animations can be used for this. A button might disappear for one second, for example, or a specific amount of time can be given for the Opacity value to change from 100% to 0%.

Using these animations, you can create effects similar to those used on GUIs. You can also implement effects that allow smooth screen transitions. Therefore, in this section, you'll learn how to use animations on GUI elements.

Section 2. Implementing a Ball Bounding Example Using Animation and Easing Curves
Easing Curves allow you to create more sophisticated effects by using specific options within your animations. For example, by accelerating a specific time interval during a 10-second animation, you can create a variety of effects.
In this section, you will learn how to use easing curves in animation through practical examples.

Section 3. State and Transition
A state represents a condition. A transition represents an action. For example, in an on/off switch, the conditions are "ON" and "OFF," and the action (transition) is defined as the change from "ON" to "OFF." Using states and transitions, you can group complex behaviors and have them change collectively when the conditions change, making complex GUI implementations easier to implement.

Section 4. Implementing an Image Viewer Example Using State and Transition
In this section, we will implement an Image Viewer using the State and Transition learned in the previous section.

Section 5. Model and View
Models and Views are used to display large amounts of data on a GUI. For example, when displaying 100 data items in a table, the data is stored in the Model, and the View represents how the data stored in the Model is displayed on the GUI. The View can be a table or a tree. In this section, you'll learn how to use Models and Views.

Section 6. Implementing a Chess Game Using Model and View
Learn how to implement an example of a Chess Knight using Model and View.

Section 7. Integration between QML and C++
Learn how to call specific class-specific functions in C++ from QML, and how to call specific JavaScript functions from C++. You'll also learn how to call functions and pass data between QML and C++ through hands-on examples.

Section 8. Implementing New QML Types Using C++
You'll learn how to implement your own custom types, like those provided by QML. In a hands-on example, you'll learn how to implement a Timer type yourself.

Section 9. Implementing QML Types Using the QQuickPaintedItem Class
Just as we used QPainter to display 2D graphic elements on QWidget, we will learn how to use QQuickPaintedItem class provided in C++ to display 2D graphic elements on QML Type using QPainter.

Section 10. Implementing QML Types in Nested Structures
When simply implementing a Type, you may need to implement a hierarchical structure. For example, you may need to implement multiple Types within a Type. In this section, we'll learn how to implement a hierarchical Type through the topic of Chart.

Section 11. Mapping QML Objects and Variables from C++
In this section, you will learn about data exchange between C++ and QML and how to map variable types between C++ and QML.

Section 12. Implementing a Chat Example Using C++ and QML
This section demonstrates a simple chat example, implementing chat functionality in C++ and the screen in QML. This section teaches you how to build applications using C++ and QML.

Q&A 💬

👉 See how you've changed after learning.

  • After taking this course, you'll be able to use QML fluently. You'll also understand the differences and pros and cons of using QML in real-world projects versus the traditional C++/Qt approach, QWidget.

  • Additionally, when implementing a project using QML, you can completely separate the design logic (QML part) and functional logic (C++) of the implemented source code, thereby increasing the reusability of the written code.

Q. In addition to theory and grammar, will I be able to access a variety of practical examples?

Yes, you can. After each section's theoretical lecture, you'll have a hands-on coding session with the instructor, using examples. This allows you to learn practical programming skills using QML in the workplace.

Q. Are there any reference materials or textbooks for the lectures I am studying?

I currently serve as an administrator for the Qt Developer Community ( qt-dev.com ). You can find additional resources related to Qt and QML on this site.

Q. Is there anything I need to know before attending the lecture?

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 course.

Q. What level of content is covered in the class?

Covers everything from QML basics to advanced topics for various application areas.

💾 Note

  • For more details, please check out the previewed Section 1 [QML Reference and Recommended Qt Versions for Learning QML] lesson.

To these people
I recommend it!

Who is the target audience for learning?

  • Those who want to develop UI using QML

  • Anyone who wants to develop UI using QML in the Qt framework

Is player knowledge necessary?

  • C++ Basics

  • Qt Basics

Recommended for
these people

Who is this course right for?

  • For those who want to develop UI using QML

  • For those who want to develop UI using QML in Qt framework

Need to know before starting?

  • C++ Basics

  • Qt

Hello
This is

1,013

Learners

85

Reviews

102

Answers

4.7

Rating

9

Courses

지식공유자 소개 ✒️


근무경력
: Embedded 분야 SW Team leader
LG전자, VS사업부 IVI선행플랫폼/모듈개발
SW마에스트로, SW 멘토

강의경력
삼성전자, Qt & QML 강의
LG전자, Qt & QML 분야 사내 강사
한컴아카데미 Qt 강의 출강
다수의 IT기업 Qt 강의 출강


저서
Qt 프로그래밍
Qt Quick 프로그래밍
Qt5 프로그래밍 가이드
MeeGo 프로그래밍 완벽 가이드
Qt 실전 프로그래밍

SW커뮤니티 운영
Qt 개발자 커뮤니티 운영자 ( www.qt-dev.com )

Curriculum

All

47 lectures ∙ (8hr 56min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

5 reviews

4.8

5 reviews

  • 좋은 꽁치님의 프로필 이미지
    좋은 꽁치

    Reviews 1

    Average Rating 5.0

    5

    32% enrolled

    • 김대진
      Instructor

      좋은 꽁치님, 좋은평가해 감사합니다. 새해 복 많이 받으세요. ^^

  • Son님의 프로필 이미지
    Son

    Reviews 2

    Average Rating 5.0

    5

    83% enrolled

    로드맵을 따라가며 강의 잘 보고 있습니다. Qt와 QML에 대해 전반적으로 이해하는데 큰 도움이 되었습니다. 그리고 자료도 깃허브에 공유해 주셔서 좋습니다. 추후에 부분적인 실습 말고 전체를 활용할 수 있는 프로젝트(여러 화면에서 동작하는 프로그램)가 있으면 정말 좋을 것 같습니다. 웹 강의들을 보면 초반에는 문법이나 네트워크 수업을 하다가 실습 프로젝트로 CRUD 게시판 만들기를 하는 것처럼 배운 것 들을 활용하여 하나의 프로젝트를 만들어 가는 과정이 있으면 부분적으로 머리에 남아있는 개념들이 하나로 연결되며 완성될 것 같습니다. 추후에 나올 임베디드 강의도 기다리고 있겠습니다. 감사합니다.

    • 김대진
      Instructor

      안녕하세요. Son님, 이런 Detail한 수강평 감사합니다. 무엇을 개선해야 할지 알려주셔서 너무 감사합니다. 정말 너무 소중한 피드백 감사합니다. 언젠가 기회가 되면 제가 커피한잔 사겠습니다. ^^; 그리고 프로젝트 형식의 강의로 "임시제목: 실시간 개인 방송국 구현 프로젝트를 구현"라는 강의를 준비하고 있습니다. 그런다음 "Qt를 이용한 임베디드 리눅스 프로그래밍" 강의와 "Qt for MCU" 강의를 진행할 계획을 가지고 있습니다. 마지막으로 좋은 피드백 너무 감사합니다.

  • JunHwan Song님의 프로필 이미지
    JunHwan Song

    Reviews 3

    Average Rating 5.0

    5

    100% enrolled

    좋은강의였습니다. 다음에 심화과정도 해주셨으면 좋겠습니다. 파이썬-QML 부탁드립니다.

    • 김대진
      Instructor

      안녕하세요. JunHwan Song 님 좋은 평가 너무 감사합니다. Qt Python 관련한 영상도 준비하고 있습니다. :)

  • 다중언어GUI님의 프로필 이미지
    다중언어GUI

    Reviews 8

    Average Rating 4.9

    4

    100% enrolled

    C++과 QML 간 Interaction 부분이 여전히 어려워서 여러번 봐야겠지만, 전체적으로 QML에 대한 주요 기능들을 잘 알려주셔서 감사합니다. 반복 학습을 통해서 숙달해 나가야할 거 같네요.

    • 김대진
      Instructor

      안녕하세요. 다중언어GUI님 의견 주셔서 감사합니다.

  • sunny75님의 프로필 이미지
    sunny75

    Reviews 95

    Average Rating 5.0

    5

    100% enrolled

    2024/09/07/토 17:45 강의 잘 들었습니다. QT QML 에 대해서 많이 알게 되었습니다. QT QML 1편/2편 좋은 강의 만들어 주셔서 감사합니다. 즐거운 하루 보내세요.

    • 김대진
      Instructor

      안녕하세요. sunny75님 좋은 평가해 주셔서 감사합니다. 김대진 드림.

$29.70

qtdev's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!