This was a brilliant two-part video series dude. I just spent the last 4-5 hours going through these two videos again, building the UI on Figma (using Flaticons' stuff) and then coding it...with a few enhancements like the enum. It was VERY educational! You are incredible... Thanks again!
Awesome video--glad you picked up on the right-click Q_PROPERTY thing. But you don't have to manually move the implementation to the .cpp file--the IDE will do that for you as well. Just right-click on the method (in the .h file), and there'll be an option in the contextual menu to move the implementation to the .cpp file. The other thing I always do is to, before having the IDE generate my implementation(s) for me, is to manually create a private section in the .h file. Then the IDE will add the variables (from the Q_PROPERTY macro) into that area. By the way--I got all these tips from Daniel Gakwaya's awesome QML courses on Udemy. I've been through those courses last year, but am revisiting them now as a refresher. So your UI-creation videos are an awesome continuation on his, because you are putting into practice then things that his videos teach. It's really the perfection complement.
Another thing that I would do in your video, is to register your enum as an uninstantiable type, right there in main.cpp. Like this: qmlRegisterUncreatableType("Monty", 1, 0, "HeatSelectState", "Cannot instantiate an Enumeration"); ...something like that. Although you could not then instantiate the enumeration type from the QML side, you could at least use a more descriptive check (ie; no magic numbers): if (systemController.systemState === HeatSelectState.HEATING) ... (and so on.)
Oh, regarding the length of your video--I'd say you shouldn't change a thing. It takes as long as it takes to get your point across, and as I mentioned above, your videos in this series are a *perfect* carry-through from Daniel Gakwaya's QML courses on Udemy. The material itself is not really terribly difficult to grasp, conceptually. However there's just so much of it that it's difficult to know how you might use all this stuff. And that's where this 2-part series comes in: You get to see how to use all the basic QML stuff, to put together such an application. Albeit simple, it's complete and very instructional in terms of providing further building blocks in the journey to becoming a great Qt Quick developer. So thanks again for making the effort to create and upload these videos. It's much-appreciated!
Thanks for the comments as always, Tom! Always happy to read your comments as they teach me a thing or two. Thanks for the feedback on the video as well, definitely helpful in determining what videos I should create next!
@@MontyTheSoftwareEngineer OK, I'm working through the two videos in this Temperature Control series today, and when I tried my own advice about the enum (given above), it failed! So I was a little "off" on the enum thing. The good news is that it WILL work, but the bad news is that my example was not accurate as I was doing it from (incorrect) memory. So here's what you need to do, or at least what I did to make it work, for anyone following along at home: 1) Move your enum into its own class: I created a second class called HeatSelectState, and moved the enum from the SystemController class into this new class. 2) Declare the enum in the new class, but DO NOT name it to be the same as the class name--the Qt MOC will go beserk if you try that (ask me how I know). I just named the enum to be HeatState, so the fully-qualified enum name is "HeatSelectState::HeatState." You will now use that name in the SystemController class. 3) Include your heatselectstate.h file in the header for the SystemController class, and then anywhere you need to use the enum, use the full name I showed in #2. 4) (The good part) Go into the main.cpp file and register your enum CLASS as an uncreatable type, like this: // Note: specifies the CLASS name, not the enum name (this one cost me 30 minutes, duh...) qmlRegisterUncreatableType("com.monty.heatstate", 1, 0, "HeatState", "Cannot instantiate an Enumeration"); 5) Finally, go import "com.monty.heatstate" into your main.qml file, and then you will have access to the "HeatState" enum values on the Qt Quick side. So then you can do this sort of thing in QML/JS: Component.onCompleted: { var state = sysController.sysState if (state === HeatState.HEATING) { console.log("Heating") } else if (state === HeatState.COOLING) { console.log("Cooling") } else { console.log("Auto") } } The main point(s) here is(are) that you CANNOT simply register your enum as an uncreatable type if you leave it in the SystemController class, because you need to register SystemController as a "creatable" type in order to, you know, use it on the Qt Quick side. And since you need a class name to register as an uncreatable type, and since you cannot name the enum within a class the same name as the class's name, then you need to name them differently--but register the class name (ie; type) in main.cpp as your uncreatable type (see my comment in the code snippet in #5). But the code now works fine, and there are no more magic numbers in my QML code: I'm able to just do stuff like the JS snippet I included in #5 above. Sorry for the long explanation, but I needed to keep it clear in my brain so that I wouldn't lead you astray a second time. LOL!
@@bluehornet6752 Awesome, thanks for the reply Tom! I'm editing the video for the implementation for the Drink Dispenser video now, wish I released that video before you went through this one! I updated the GitHub for ThermostatExample to show how to easily use the enums; in short, the Q_ENUM macro should expose the enum without having to put it in its own class. As long as the import statement for the package is used, you can use the enums, if you check out the Thermostat example in github, you will see I added in examples into HomeScreen.qml and HeatSelectDialog.qml
Best Tutorial on practical application of Qt Quick, QML and C++ I've seen for intermediate programmers. You should teaching in Udemy if not already. You may want to consider creating a 3 or 4 part video series for beginners but this 2 part was perfect for me.
Thanks! I did recently put a course on Udemy actually, www.udemy.com/course/from-start-to-finish-qt-qml-online-multiplayer-game/?referralCode=70DCA7EEB8DF62074185
I like your style man ! I quit my last job because I hated WPF (and C#, there's no such thing as thread safe signal/slots in that language and async stuff sucks, what I love about Qt is that I can make a multithreaded program without using locks and therefore a very deterministic program with which I can easily reason), QML is more sane than XAML
Very Helpful video, I'm motivated to getting back to QML. I did't care much about the length of video because the video met the Objective from Figma to QML/QT
Thank you for the 2-part video! It was very helpful and helped me a lot, especially with the integration of the C++ and the QML side. I hope you can share more videos on QML in the future. Cheers ^_^
I managed to run your example under Qt6, it displays well but I get these error messages related to AboutPage.qml displayed on the console: AboutPage.qml:6:5: TypeError: Cannot read property 'height' (and width too) of null and AboutPage.qml:3:1: QML AboutPage: StackView has detected conflicting anchors. Transitions may not execute properly.
Back when I was learning QML, the designer was not yet released and the technical previews were extremely buggy. Because of that, I always just did QML ui via the markup language and have become comfortable with it. May eventually take the qml designer for a spin sometime to see how much it has improved over the years.
Hi @MontyTheSoftwareEngineer , thanks for this video. I have a question in swipeview. I couldnot find any video for this. My question is this. I have added 3 pages(Item based page) in a swipeview .I can swipe to the particular page. Now I want to access the property of the current Item. How will I be able to this ? Please help 🙏🏻
if you use Qt6, use import QtQuick.Controls.Basic when customizing the slider and use the assignement operator if you want to update a C++ property in QML
Followed everything keenly to the point of customizing the slider. After customizing the slider, the handle can no longer slide. I am using Qt 6.2.2 Windows.
Best QML educational videos!! Please keep generating comprehensive videos like these
This was a brilliant two-part video series dude. I just spent the last 4-5 hours going through these two videos again, building the UI on Figma (using Flaticons' stuff) and then coding it...with a few enhancements like the enum. It was VERY educational! You are incredible...
Thanks again!
Awesome! Glad you did that, making it your own and making your own improvements is the best way to get in depth knowledge!
Thanks Monty for your efforts. Great video. Please upload more of such videos.
Your video is the best for practicing. Yes, it's long, but it's a comprehensive tutorial. I can do my own app due to your video. Please, do more :).
Now that is what I call a real tutorial, you should be an example other youtubers should follow.
THANK YOU VERY MUCH.
Big thanks please continue the way you are making thanks once again
Thank you for the feedback!
Awesome video--glad you picked up on the right-click Q_PROPERTY thing. But you don't have to manually move the implementation to the .cpp file--the IDE will do that for you as well. Just right-click on the method (in the .h file), and there'll be an option in the contextual menu to move the implementation to the .cpp file. The other thing I always do is to, before having the IDE generate my implementation(s) for me, is to manually create a private section in the .h file. Then the IDE will add the variables (from the Q_PROPERTY macro) into that area.
By the way--I got all these tips from Daniel Gakwaya's awesome QML courses on Udemy. I've been through those courses last year, but am revisiting them now as a refresher. So your UI-creation videos are an awesome continuation on his, because you are putting into practice then things that his videos teach. It's really the perfection complement.
Another thing that I would do in your video, is to register your enum as an uninstantiable type, right there in main.cpp. Like this:
qmlRegisterUncreatableType("Monty", 1, 0, "HeatSelectState", "Cannot instantiate an Enumeration");
...something like that. Although you could not then instantiate the enumeration type from the QML side, you could at least use a more descriptive check (ie; no magic numbers):
if (systemController.systemState === HeatSelectState.HEATING) ...
(and so on.)
Oh, regarding the length of your video--I'd say you shouldn't change a thing. It takes as long as it takes to get your point across, and as I mentioned above, your videos in this series are a *perfect* carry-through from Daniel Gakwaya's QML courses on Udemy. The material itself is not really terribly difficult to grasp, conceptually. However there's just so much of it that it's difficult to know how you might use all this stuff. And that's where this 2-part series comes in: You get to see how to use all the basic QML stuff, to put together such an application. Albeit simple, it's complete and very instructional in terms of providing further building blocks in the journey to becoming a great Qt Quick developer.
So thanks again for making the effort to create and upload these videos. It's much-appreciated!
Thanks for the comments as always, Tom! Always happy to read your comments as they teach me a thing or two. Thanks for the feedback on the video as well, definitely helpful in determining what videos I should create next!
@@MontyTheSoftwareEngineer OK, I'm working through the two videos in this Temperature Control series today, and when I tried my own advice about the enum (given above), it failed! So I was a little "off" on the enum thing. The good news is that it WILL work, but the bad news is that my example was not accurate as I was doing it from (incorrect) memory. So here's what you need to do, or at least what I did to make it work, for anyone following along at home:
1) Move your enum into its own class: I created a second class called HeatSelectState, and moved the enum from the SystemController class into this new class.
2) Declare the enum in the new class, but DO NOT name it to be the same as the class name--the Qt MOC will go beserk if you try that (ask me how I know). I just named the enum to be HeatState, so the fully-qualified enum name is "HeatSelectState::HeatState." You will now use that name in the SystemController class.
3) Include your heatselectstate.h file in the header for the SystemController class, and then anywhere you need to use the enum, use the full name I showed in #2.
4) (The good part) Go into the main.cpp file and register your enum CLASS as an uncreatable type, like this:
// Note: specifies the CLASS name, not the enum name (this one cost me 30 minutes, duh...)
qmlRegisterUncreatableType("com.monty.heatstate", 1, 0, "HeatState",
"Cannot instantiate an Enumeration");
5) Finally, go import "com.monty.heatstate" into your main.qml file, and then you will have access to the "HeatState" enum values on the Qt Quick side. So then you can do this sort of thing in QML/JS:
Component.onCompleted: {
var state = sysController.sysState
if (state === HeatState.HEATING) {
console.log("Heating")
} else if (state === HeatState.COOLING) {
console.log("Cooling")
} else {
console.log("Auto")
}
}
The main point(s) here is(are) that you CANNOT simply register your enum as an uncreatable type if you leave it in the SystemController class, because you need to register SystemController as a "creatable" type in order to, you know, use it on the Qt Quick side. And since you need a class name to register as an uncreatable type, and since you cannot name the enum within a class the same name as the class's name, then you need to name them differently--but register the class name (ie; type) in main.cpp as your uncreatable type (see my comment in the code snippet in #5).
But the code now works fine, and there are no more magic numbers in my QML code: I'm able to just do stuff like the JS snippet I included in #5 above. Sorry for the long explanation, but I needed to keep it clear in my brain so that I wouldn't lead you astray a second time. LOL!
@@bluehornet6752 Awesome, thanks for the reply Tom! I'm editing the video for the implementation for the Drink Dispenser video now, wish I released that video before you went through this one! I updated the GitHub for ThermostatExample to show how to easily use the enums; in short, the Q_ENUM macro should expose the enum without having to put it in its own class. As long as the import statement for the package is used, you can use the enums, if you check out the Thermostat example in github, you will see I added in examples into HomeScreen.qml and HeatSelectDialog.qml
Thanks, you can explain very well. Such real-world examples are extremely educational.
Best Tutorial on practical application of Qt Quick, QML and C++ I've seen for intermediate programmers. You should teaching in Udemy if not already. You may want to consider creating a 3 or 4 part video series for beginners but this 2 part was perfect for me.
Thanks! I did recently put a course on Udemy actually, www.udemy.com/course/from-start-to-finish-qt-qml-online-multiplayer-game/?referralCode=70DCA7EEB8DF62074185
I like your style man ! I quit my last job because I hated WPF (and C#, there's no such thing as thread safe signal/slots in that language and async stuff sucks, what I love about Qt is that I can make a multithreaded program without using locks and therefore a very deterministic program with which I can easily reason), QML is more sane than XAML
Very Helpful video, I'm motivated to getting back to QML.
I did't care much about the length of video because the video met the Objective from Figma to QML/QT
Thank you very much for the feedback, it's greatly appreciated! QML is awesome, I vote you get back into it!
QML is better than XAML, Qt is better than .NET I'm done with Microsoft crap !
Wonderful... 1 hour well spent
Thank you for the 2-part video!
It was very helpful and helped me a lot, especially with the integration of the C++ and the QML side.
I hope you can share more videos on QML in the future.
Cheers ^_^
Love your turorial videos. Helps me a lot.
Very educational. Thanks for taking the time to make these vids!
This is amazing tutorial. You should keep going with newer version of Qt or new use cases.
Do make long and detailed video .better than wondering how something was done
Thanks for this great video!! Underrated
Do you have patronite or something like this? You help me a lot with my univeristy project. I want to thank you for you job!
Very good work, it's really helpful
Thank you buddy!!
I managed to run your example under Qt6, it displays well but I get these error messages related to AboutPage.qml displayed on the console: AboutPage.qml:6:5: TypeError: Cannot read property 'height' (and width too) of null and AboutPage.qml:3:1: QML AboutPage: StackView has detected conflicting anchors. Transitions may not execute properly.
Thank you for the video! I learnet flaticon and figma. However I have a question, why didn't you use Qt's QML ui designer from the beginning?
Back when I was learning QML, the designer was not yet released and the technical previews were extremely buggy. Because of that, I always just did QML ui via the markup language and have become comfortable with it. May eventually take the qml designer for a spin sometime to see how much it has improved over the years.
@@MontyTheSoftwareEngineer the designer is still buggy
Hi @MontyTheSoftwareEngineer , thanks for this video. I have a question in swipeview. I couldnot find any video for this.
My question is this. I have added 3 pages(Item based page) in a swipeview .I can swipe to the particular page. Now I want to access the property of the current Item. How will I be able to this ? Please help 🙏🏻
This series is super helpful! Please for the love of god don't go any faster haha
Hey Monty! Thanks for the videos, can i use the qt6 for this project?
if you use Qt6, use import QtQuick.Controls.Basic when customizing the slider and use the assignement operator if you want to update a C++ property in QML
please do this in pyside/python
Followed everything keenly to the point of customizing the slider. After customizing the slider, the handle can no longer slide. I am using Qt 6.2.2 Windows.
Use this:
background: Rectangle
{
height : parent.height
width : 3
anchors.centerIn : parent
implicitWidth: 10
implicitHeight: 200
}
Can you explain this why this was happening @@PrashantKumarSharma
@@rajat346 igorkam.blogspot.com/2017/12/qml-vertical-slider.html
use import QtQuick.Controls.Basic
nice video
이분 너무 멋있다 ㅎ
Thank you
i used "source:"../Assests/flame.png" instead of "qrc:" and it worked