Building a Real-life App from an App Design in Qt
3.9 (43 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,506 students enrolled

Building a Real-life App from an App Design in Qt

As seen on Behance and Dribbble | Harness the power of Qt and Qml
3.9 (43 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,506 students enrolled
Created by Daniel IT
Last updated 4/2020
English
English [Auto-generated]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 1 article
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Course content
Expand all 46 lectures 01:52:53
+ Introduction
4 lectures 03:46

Ninja-Preview is the previewer for Qml files that we are going to use. There is nothing like it.

Closer alternatives include Qt Creator itself, around (400mb), Qmlview, which is a command prompt utility with no GUI and of course the one we used to use qmlscene, another command prompt utility with no UI.

Head over to the Ninja-preview Github page to download Ninja-Preview. It is the only Installation required for this course.


If you are on Mac and you have python and pip installed already. Please check to see that all GUI's are working in your python build especially spyder, and/or jupyter. If they are working then you can install Ninja-Preview via pypi.org

as

pip install Ninja-Preivew


If you are not on mac, then you shouldn't bother.



Preview 00:49

You can choose to use github, or you can choose not to. If you choose not to, then all you have to do is to click the ```clone or download``` green button, and select the ```Download zip``` option.

Exercise Files
00:56
+ Practical
42 lectures 01:49:07
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
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