Jesper K. Pedersen

In the fourth module of our "Introduction to Qt / QML" series we explore components: that is, how to reuse QML code by encapsulating it in a separate piece that we can then create as many times as needed. In this video, the basics of creating an "out-of-line" component is defined as well as how to define a proper API for our components.

To complete the discussion about defining the interface of a component, this session shows how to add functions to a component ("methods"), as well as signals. Declarative programming is also discussed and why certain designs match QML's spirit much better than others.

In this video we discuss how sizing works when creating a reusable component, including how to make components that have adequate width and height out of the box. We also showcase GammaRay, the free software introspection tool for Qt applications developed by KDAB.

This video discusses keyboard handling in Qt Quick. Whether you have a physical keyboard, a virtual one, or maybe some special hard keys, you may want to have the elements in your scene react to the keypresses. There are a few ways to manage keyboard input: from just using an element such as TextInput, that solves the whole problem for us, to actually having custom logic to handle keyboard events.

Touch input extends beyond simple tapping to include gestures like flick motions for scrolling and pinch-to-zoom with two fingers. This video explains Qt Quick's gesture handling basics using built-in elements, demonstrating how to create touch interfaces by composing gesture elements with familiar components like images, rectangles, and text.

Sometimes you need to explore Qt's source code to understand behavior, track bugs, or learn implementation details. Qt is open source with high-quality, readable code available through download or binary installers. This video demonstrates setting up Qt Creator to quickly navigate Qt's source code using Locator shortcuts for efficient exploration.

The third module of the "Introduction to Qt/QML" series covers user interaction methods in Qt Quick applications. Qt Quick provides elements for mouse, touch, gesture, and keyboard input. This video focuses on MouseArea, the element handling mouse input, demonstrating how to make applications react to mouse presses, clicks, and other mouse interactions.

This video shows how to recreate the famous "Hello World" example using Qt Quick and QML. You will learn how to actually go from a QML source file to having a standalone running executable, that indeed shows the "Hello World" text.

Introducing the most basic visual transformations that you can apply to items in a Qt Quick scene. Any visual item can be scaled, rotated, or made translucent by acting on certain properties. This video explains how these properties work, and how visual transformations are propagated to children elements.

The transformations introduced in the previous video are not everything that Qt Quick offers. Sometimes we may need to rotate an item around an arbitrary point, or shear it using a custom 4x4 matrix. This video will feature an example of a custom visual transformation: we will create a very simple analog clock by rotating two images around a custom point.

User interfaces are built by positioning controls on screen. While changing x/y coordinates works for individual items, it doesn't scale for entire interfaces. Layout managers automatically handle positioning and sizing. This video introduces Qt Quick's anchor layouts - the simplest yet most common system. Anchors "glue" element sides together, making it easy to place elements side-by-side or align within parents.

This video discusses the dreaded "binding loop detected" warning that comes from the QML engine. Sometimes, it's pretty clear that we have created a loop (property A depends on B, which depends on A) and we can easily fix our code. Some other times, especially when anchor layouts are involved, this is not so clear. Watch this video for an explanation of what is going wrong and how to fix it.

Qt Quick offers more than simple colored rectangles with "color: 'red'". This video demonstrates various color specification methods including HTML hex-strings and normalized RGB floating point values, plus creating gradients in Qt Quick for more sophisticated visual effects beyond basic solid colors.

This video showcases an exercise from our QML training course, where students are asked to reproduce a simple UI using Qt Quick and QML. As a side product, they learn more about positioning Qt Quick elements in a scene.

It is often said that QML is a declarative programming language. But what does it mean? A cornerstone of the meaning is the ability of properties to be linked to each other, creating so-called property bindings. In this video we explore the semantics of bindings across different elements.

It is often said that QML is a declarative programming language. But what does it mean? A cornerstone of the meaning is the ability of properties to be linked to each other, creating so-called property bindings. In this video we will explore the semantics of bindings across different elements.

This video showcases an exercise from our QML training course, where students are asked to reproduce a simple UI using Qt Quick and QML. As a side product, they learn more about positioning Qt Quick elements in a scene.

This video showcases an exercise from our QML training course, where students are asked to reproduce a simple UI using Qt Quick and QML. As a side product, they learn more about positioning Qt Quick elements in a scene.

The first in a video series that teaches the foundations of programming with Qt Quick / QML. The content is extracted from our highly rated "Introduction to QML" training course regularly taught around the world by KDAB engineers. This video shows how to recreate the famous "Hello World" example using Qt Quick and QML. You will learn how to actually go from a QML source file to having a standalone running executable, that indeed shows the "Hello World" text.