Integrating C++ with QML

hi i'm monty the software engineer and in this video we're going to go over how to use c plus classes in your qml code so here we can see we have a basic qml application and if we run it it's just a blank window first let's start off by creating a new c plus class we'll call it sum class and what we're going to want to do is make the base class q object now once we have this class let's go into the header and add a slot called call me and with this function we're going to add a q debug statement and have it debug out i'm being called now there are two ways that i like to use c objects within qml the most common way that i see other people doing it is through setting the context property so we'll go over that first we need to include our sum class header then we need to create our sum class object and we'll just call it test class we're also going to need qml context and then we're going to create that qkml context pointer root context equals engine which is our q qml application engine dot root context and now let's set the root context set context property and now we're going to give it an identifier which we'll use in our qml code in order to access this class so we'll just name it class a and we'll pass it the test class object perfect and now within our main.qml let's first add a button oh we first need to put the import statement in controls and we'll just call it my button and let's just put it within the center of our application and for the text we'll just say click me and when it's clicked we'll have it saying class a now when we started typing in class a we can see that qt creator is already trying to auto complete this for us meaning that this qml is already aware that class a is something that we may want to use call me and again it auto completed this function here so if we run this application now we can see click me here and if we click it we can see in our application output i'm being called so the qml is now accessing this function within the c plus plus class another way that i like to use c plus classes within my qml code is through registering a type so let's go through that next first we can comment out all the code that is this method and then simply add qml register type register type and we need to give it some class and now we need to give it a package name so i'll just call it monty and then a major version number and a minor version number and now we need to give this component a name that we'll use in the qml code so i'll just call it uh some class it doesn't have to be the same name as the class itself but i like to do that just so it's a little easier for me when i'm in the code i don't have to recall what i named it so here back in our qml we'll get rid of class a first we need to import monty 1.0 and now that we've imported our monty package we can use the class just like any other qml component so i named it some class and i'll give it an id of my class and then here i'll say when i click this button i want my class dot call me now let's run this and we can see here when we hit click me it says i'm being called so that's another way to access the c plus function within qml now what's the difference between the two methods let's first get rid of this and get rid of this and let's go back to our sum class and within our class constructor let's add a debug statement saying i'm being created now if we go back to the main.cpp get rid of this and then go back to our first method of context property and then back to our main.qml here let's leave out any kind of reference to my new class and not use it at all so if we hit run once the application loads we can see here i'm being created has been debugged out meaning even though we're not using it in our qml code the object itself has still been created and is running in the background conversely now if we go back to the register type method so we'll get rid of all this get rid of this and then put back the qmo register type now even if we add the import statement import monty 1.0 and we run it we can see here that debug statement has not been printed out so that class hasn't been created yet now if we add the class here some class id my class and then run it now we can see the debug has been printed out meaning the class has been created so with register type the qml will dictate when the class is created and when it's destroyed once you use a different qml page for example if we add a new page.qml and we go to that page if the main.qml page is destroyed the class is also destroyed meaning it's not running within the background but if we use the set context property method you always need to have this class initialized and running in the background now if you're going to be using some class throughout your qml application this is a perfectly good way to do so this way you maintain the state if there is any of test class throughout the lifetime of your application now let's go back to our sum class and show another way that we can expose a function to our qml and that is through q invokable and we'll call this another function avoid another function and if we add this into our cpp and just say q debug another function let's go back to our main cpp i like to use qml register type so i'm just going to keep using it that way go 1.0 okay so here let's use my class on clicked my class dot another function if we run it we can see if we hit click me another function is being debugged out and that is how to use it using a function declared with the q invokable macro so what if we want to use variables from our c plus class the way that i like to do it is through cue properties so if we start typing in cue property here now i like to use this because it it gives you an easy to use template where i can say this is a q string and what i like to name it is sumvar now we can use this as a guide on which functions we need to implement in our code so first we want to add some var which is a q string and then we're going to want some way to write to it which is set some var so here i'll do void set some var and that will take a q string and then notify will want a signal that will notify when our sum bar has changed and then we'll also add a private variable which will keep track of the state of some var so q string m sum var which now let's go into our cpp and on the side we'll open up our header file so we know which methods we need to implement so first one is key string some var so we'll do q string sum class var and this will just return m sumvar next one we want is the setter set some var so void some class set some var and this will take a q string and we'll just say new var first we'll check if m sum var if it doesn't equal new var then we'll want m sub r to equal new var and then we'll omit our signal that some var has changed now in our constructor let's set the initial value of m sum var and we'll set it to 1 2 3. now in our main.qml let's close this out we already have my class here so let's create a text label id my label and we'll just put that in the top top center of our application so anchors top parent dot top horizontal center parent dot horizontal center and let's also give it a top margin 20. so it's not right at the top let's set the pixel size so it's a little easier to read and we'll set the text to my class dot sumvar and we can see here it already wants to autocomplete it for us and notice how with the q property we're not using any parentheses after some var uh on clicked let's actually have myclass dot set sumbar to one actually abc now let's run this example so we can see here that my label has grabbed the initial text of what some var is it's one two three and if we hit click me so the click me button has used the set setsumvar function to set the value of msumvar to abc the qml was notified of the changed and changed the value of mylabel to the new abc now we could have also used q invokable made a getter method for some var so let's try that out q string get some var and we'll put this into our c plus plus and we'll just do the same thing return m sum var and now if we do that in our qml code let's set this instead of some var as myclass.getsumvar here we can see that since we're not using the q property we have the parentheses and let's see what happens when we run this code here we can see that it gets the initial value of one two three however since it's not a cube property and the qml is not aware of any changes when updates are made hit click me it's now abc however qml wasn't notified of it and it still thinks it's one two three so it hasn't updated the value we could do this simply by adding a connection so let's do that let's add a connection here connections and we'll target the my class variable now we'll open up the sum class header and we'll look for some var changed one thing to keep in mind is qml is very picky about the syntax used so the signal has to start with a lowercase letter and then in the qml side we do on and then a capital letter some bar changed and we'll just say my label dot text equals get my class dot get some var so you can see here we need a capital s and in our sum class we needed a lowercase s for our signal so let's try this out we can see my label has the initial one two three we'll hit click me and the connections work with the on some bar changed it's notified it knows to update mylabel.txt myclass.getsomevar and now it has the new abc value

Channel: MontyTheSoftwareEngineer

Views: 7,973

Keywords: qt, qml, c++, cpp, integrating, use, object, qmlregistertype, set, context, property, setcontextproperty, q_property, q_invokable, qstring, dynamic

Id: ragZPvRe6Pk

Length: 13min 26sec (806 seconds)

Published: Sat Mar 06 2021