Practical Project in QML: The Toda App

As seen on Behance and Dribbble | Harness the power of Qt and Qml

(58 ratings)

8,107 students

Created by Daniel IT

Last updated 4/2020

English

English [Auto]

30-Day Money-Back Guarantee

What you'll learn

Learn how to take png / jpegs from UI/UX designers and turn them into apps
Script an entire UI without the use of a drag-n-drop designer
Get practical hands-on experience with Qml
Script a UI according to the design of an App Designer
How to Use Qml in the real world

2 sections • 46 lectures • 1h 52m total length

Preview01:36
Preview00:25
Preview00:49
Exercise Files
00:56

Create the folders
00:43
Application Window
02:55
Put in the first Rectangle
00:47
Put in the Column Layout
01:43
Create components folder
05:05
Add text for Date
02:29
Put in another Rectangle
01:55
Create Component ButtonPrimary
04:08
Add Listview to handle Tasks
03:29
Create Task Component
02:54
Put in the Section Delegate
05:14
Put in a Column Layout
00:55
Add the expanded property
02:50
Put in three Rectangles
03:56
Add a Rowlayout
00:56
Add a Rectangle
02:11
Add a Column
01:39
Add text for Title
03:42
Add text for project
04:29
Create the IconicButton component
03:35
Add the FontLoader
01:20
Add contentItem
01:53
Update Iconic Button
02:16
Script the onClicked Signal
02:22
Add RowLayout
01:20
Update Iconic Button to use textSize
02:19
Add search text placeholder
02:57
Add the Image placeholder
01:36
Add a Text Area
02:17
Update Text Area
02:06
Add A Row
01:00
Put in the glyph
01:56
Put in the remaining glyphs
01:31
Add contentItem
00:49
Add a Rowlayout
00:42
Add another glyph
00:54
Add the Text
02:04
Use multiple colors for task
02:09
Use multiple colors cont.
04:01
Make task height dynamic
02:48
Put in the real Profile Pic (Option One)
13:02
Preview02:10

Requirements

A little familiarity with Qt Quick Markup Language(Qml) is required
A computer running a windows OS or
A computer running a Linux OS

Description

This course hopes to help you build up;

1. Your ability to take designs from a designer and turn them into an Application

2. Your ability to build nice and trending apps

3. Built a beautiful portfolio.

4. Approach GUI projects with confidence

We take the inspirational (say imitational) images from Behance (the same are available on Dribbble as well)

then script the App in Qml, separating them into components defined by the UI/UX designer and as seems best

all while taking care to script according to specification. Modern design specification was also used.

You will enjoy the journer and the outcome of your work.

Qt has powered the world of UI's and still powers it. Adobe, VLC, WhatsApp Inc, are a few of notable institutions that use Qt for both UI and also for functional code. But here is the catch, not so recent though, Qt released Qt Quick Markup language (Qml), but rather in CSS style scripting language. This will help the advanced team-work desire to separate UI from core-code functionality.

Also, there is another problem here, you can't seem to find many resources on it online. So here is it, an introduction and a quick practical hands-on, on building a complete Python app with a modern trendy Gui.

Who this course is for:

Python developers
C++ developers
Qt developers

Daniel IT

ten times better

3.7 Instructor Rating
931 Reviews
103,666 Students
6 Courses

Done extensive research on software including; Web servers (Python), FFMpeg (Python), File system operations (PHP & Python), Google Cloud Services (Python), and general research on Qt Markup Language. I have also built numerous software with GUI's, including; GGuides ( a to-do list app), Ninja-Preview ( An app that allows developers to view their qml code ) and python libraries like pyffmpeg and Soloman. Also contributed to other open-source projects like Ninja-Ide ( An Open-Source python IDE ).

Practical Project in QML: The Toda App

What you'll learn

Course content

Introduction4 lectures • 4min

Practical42 lectures • 1hr 49min

Requirements

Description

Who this course is for:

Instructor