Application and prototype development with QML & Qt5

Name: Application and prototype development with QML & Qt5
Rating: 4.1 (73 reviews)

Build beautiful User Interfaces easy and efficiently using QML!

Created byAlexandra Betouni

Last updated 3/2021

English

What you'll learn

Build prototypes or GUI applications in QML
Learn how to make use of Qt's Qt Quick Controls 2 module and styles
Learn how to use animations in QML
Learn basics of working with 3d content in QML
Integrate RSS feed and online radio into QML prototypes
Work with ListViews, GridViews, Pathviews and StackViews in QML
Build responsive UIs with qml
Support for theme switching

Course content

5 sections • 28 lectures • 5h 45m total length

Introduction1:19
Course introduction and rough overview
Qt fundamentals: History1:58
Learn Qt's historical facts. What it is, where is it coming from, why and when to use it
Setting up Qt, Qt Creator environment4:22
Set up of the development environment as well as explanation of it
QML project structure & "Hello World!" example11:54
Very first project creation, code explanation and first coding lessons

Simple widgets in QML1:45
Introduction on how simple widgets like buttons, radio buttons etc are build with QML
Radio Button widget implementation4:59
Implementation of simple widget, radio button in QML
Check Box widget implementation2:32
Implementation of simple widget, check box in QML
Switch Button widget implementation9:32
Implementation of simple widget, switch button in QML
Implement MyButton.qml
ListView, GridView, StackView & PathView32:48
Implementation and explanation of usage of ListView, GridView, PathView and StackView QML UI types
Replace list, grid and path view delegates content.
Animations & Particles11:17
Implementation and explanation of usage of Animations and Particles QML types

What is QtQuickControls 2.0?1:31
Explanation of fundamentals and introduction to the module QtQuick Controls 2
Simple widgets in QtQuickControls 22:26
Implementation and explanation of the second way of building simple widgets in QML using the QtQuick Controls 2 module
QtQuickControls 2 widgets styling47:59
Deep dive into QtQuick Controls 2 styling topic. Create and explain custom style for all widgets built so far in this course.
Implement a style for Dial widget

Intro0:38
introduction into the dashboard application development.
Defining the requirements & needs2:10
Check on the application's functionalities and defining and documenting its needs and requirements
Defining the components and the project structure1:47
Definition of new components and the new structure needed to be implemented based on the outcome of the previous lecture.
Applying the new structure3:15
New project structure visualization and explanation in QtCreator
Implementing new widgets3:29
Hands-on implementing the widgets dashboard application will need
Main UI implementation11:16
Implementation and explanation of main ui common components and application switch mechanism
Inbox app implementation20:49
Implementation of Inbox application, introduction and implementation of application popups.
Add more emails in the list models and make the whole inbox page scrollable.
Calendar app implementation34:21
Implementation and explanation of the Calendar component as well as style customization. Also implementation of more application popups.
Courses app implementation27:30
Introduction to the Canvas type, more popups implementation, working with list models
Latest News app implementation6:22
Implementation and explanation of rss feed presented in the UI
WebRadio app implementation57:02
Implementation of online radio playback. Introduction to 3d usage inside a 2d scene.
Dashboard app implementation20:51
Bringing everything together. Implementation of tile modes and full size for all applications, also re-ordering of the tiles and positions persistency.
Adding new UI Theme7:42
Introduction of a second UI theme and implementation and explanation of the switching mechanism.
Making the UI responsive12:39
Introduction into adding support for making UI responsive topic, implementation and explanations.

Requirements

No programming knowledge is required, nevertheless some basic skills wouldn't be bad to have. All you need is a computer (no matter which operating system).

Description

In this course, you will learn how to develop User Interfaces using QML, fast, easy and reliable! We will start by learning the QML basics, then we will apply what we learned in using the QtQuick Controls 2 module including creating a custom style for our QtQuick Controls 2 widgets and we will end up developing a dashboard prototype application with features like online radio streaming, rss feed, 3d content integration. At the end of this course, you will be able to start already using QML on your own projects and prototypes.

Who this course is for:

UI/UX Developers, UI/UX Designers, UX Concepters, Programmers, Software Engineers
Developers and Designers curious about building beautiful GUIs using the QML language
Designers who want to learn a new prototyping tool

Application and prototype development with QML & Qt5

What you'll learn

Explore related topics

Course content

Intro & Tool set up4 lectures • 20min

Starting with QML Basics6 lectures • 1hr 3min

The QtQuickControls 2.0 Module3 lectures • 52min

Creating the Dashboard Application14 lectures • 3hr 30min

Recommendations / Disclosure1 lecture • 1min

Requirements

Description

Who this course is for: