Integrate C++ and QML. Qt 5.4

Homer JS

I was reading the Qt documentation for the past couple of hours trying to figure out a way to make a UI created with Qt Quick UI (QML) communicate (interact) with C++ code (functions... etc.).

I've read the 5 or 6 similar questions on here to but I'm kind of confused, I have problems figuring out where to start or what to do first. I'd appreciate it a lot if someone could take the time and list the steps needed to make this work.

What i've done so far. I tried doing ...>add new Item> C++ class but I failed with an error saying:" failed to add one or more files to project"> It seems like the files (.. .cpp and .h) are created, they were in the folder where the other project files were but not included in the project. What I wanna do is just something simple like changing the text of the textedit through a C++ function or any other way possible.

//Test.qml (main.qml)
@import QtQuick 2.1
import QtQuick.Window 2.0

Rectangle {
id: rootRect
width: Screen.width/2
height: Screen.height/2
color: "gray"

Button{}

Rectangle{
    id: textField
    width: 120
    height: 40
    color: "white"
    x:274; y: 61
    border.color: "blue"
    border.width: 4
    radius: 2

}

TextEdit {

    id: display
    x: 274
    y: 61
    width: 80
    height: 20
    text: qsTr("Text Edit")
    font.pixelSize: 22
    color: "black"
    anchors.centerIn: textField

}

Rectangle{
    id: inputField
    width: textField.width
    height: textField.height
    border.color: "green"
    border.width: 3
    color: "white"
    x: 140; y: 61
}

TextEdit{
    id: input
    color: "red"
    font.pixelSize: 30
    anchors.centerIn: inputField
    text: "Some Text"


}

}@

//Button.cpl

@import QtQuick 2.0
import QtQuick.Window 2.0

Item {

property string defaultText: "New Text"


Rectangle{
id: button
width: rootRect.width/6
height: rootRect.height/8
color: "black"
x: 200; y: 200
radius: 10

}

MouseArea{
    id: buttonClickArea
    width: 0
    anchors.rightMargin: 0
    anchors.bottomMargin: 0
    anchors.fill: button

    onClicked: {

            display.text = defaultText
    }
}

}@

Thank you for taking the time to read this and/or any replies.

SGaist

Hi and welcome to devnet,

Is your project based on the Qt Quick application template ?

Homer JS

Thank you.

Yes, SGaist, it is. It's just a simple UI with a button and two textedit fields.

SGaist

I meant: is it a pure QML project or do you use e.g. a QtQuick2ApplicationViewer to show your QML window ?

Homer JS

I'm preety new to Qt, actually, It's my first time I got my hands on it (not new to c++ though). To be hones I don't know what that "QtQuick2ApplicationViewer" is.

I just went: new project>Application>Qt Quick UI and then after that i added another new item - right click (on the project, left side window of Qt) > add new > QML File (Qt Quick 2).

I don't know if I'm allowed to paste links here but if it's not I'll remove it right away. Was following this guys tutorials. https://www.youtube.com/watch?v=QvQAu8n8FRI&index=9&list=PLB22HyVdO1GkLFrvRi5vIo5XcWS0EflxD

SGaist

No problem with sharing links as long as they are related to Qt :)

Ok, so the tutorial is using a Qt Quick UI project which means QML only and no C++. You need to create a new project using the Qt Quick Application template. With that one you'll be able to use both C++ and QML. You also have the "Extending QML Functionalities using C++" chapter in Qt's documentation that should help you get started with mixing QML and C++

Homer JS

Thank You very much.

I guess I'll have to dig into the documentation some more.

Thanks again.