[solved] Some beginner questions

Andy314

Hello,
I started with the great desktop GUI of Qt. Now I will integrate some widget based on the QQickWidget. I have a lot of problems with it. It exist a much of documentation for QML for special tasks, but I found nowhere an general overview for it. The only book I found is in italian (Amazon). Exists other good overview documentation for it ?

Here some of my base problems. I will make a simple ListView with text entries. I must set some properties from outsize with C++ (font-size, minimal-size of the list-entries and last but not least the model. I take a simple StringList-model.
I did it by building pure qml-code without the help of the designer and it works now.
The problem is that I will see my layout in the designer, but I can see only the empty ListView. This clear because my model in the pure QML-code is emty (and other problems).
So my first question. How can I define a StringListModel in my QML-Code, but make it possible to overwrite with the C++ code behind?
As well how can I set integer properties to default values in QML and overwrite it later in C++.

Whats the best order in the C++ code:
Set the properties and then the qml-Source or first source and then the properties.

SGaist

Hi,

qmlbook.org is a pretty good starting point for QML.

If you are going to mix QML and C++, you should not try to have business logic in both. Use a C++ model if you need a special model and you'll have an easy path to update it from both the QML and C++ side.

Andy314

Hello @SGaist,
thank you for your answer. I found this book before, but its not really helpfull for my basic questions. QML seem to be very complicated - I am near to the point to give up.

My simple aim is to produce a legal QML file so that I can see and control the layout in the designer. For configuration I must declare and define some variables in the QML File. When the QML file looks good I will change these values via C++ in the running app.

Where and as what shall I declare and define these variable so that I can overwrite them with the setContextProperty("VarName", QVariant(Value)) later ???

SGaist

AFAIK, when you want to communicate between C++ and QML (as in update the value from C++) you will create a QObject based class with properties to automate the update through bindings on the QML side.

Andy314

Ah, I thought it is simpler:

Text {
text: _aExternValue
}

QQmlContext *cont=Q->rootContext();
cont->ContextProperty("_aExternValue", "Hallo")
Q->setSource(QUrl("qrc:/qml/CDListChoose.qml"));

This works but I cannot see it in QML-Designer because _aExternValue is undefined in the pure QML-Code.
My idea wars
property var _aExternValue: "Hallo" (dont know where to define it)
and then set this property from extern after loding the qml-source.
This is the wrong/impossible way ?

When I take your way and define a "Property"-Class in C++, how can I prefill it in pure QML code.

ekkescorner

there are many examples HowTo define Q_PROPERTY
per ex. take a look here:
http://doc-snapshots.qt.io/qt5-5.6/qtpositioning-weatherinfo-example.html

Andy314

I know how to work with properties. A C++ class would not solve the problem because I need this structure not at runtime but in pure QML.
But I solved the problem as wanted

import QtQuick 2.0

//import QtQuick.Controls 1.4

Rectangle {
    id: itsRoot
    objectName: "itsRoot"
    color: "lightgrey"
    width: 500
    height: 500
 //   anchors.fill: parent

    ListView
    {
        property variant itsModel : ["Entry 1", "Entry 2","Entry 3"]
        property int itsFontSize: 50
        property int itsMinEntryHeight: 50

        id: itsListView
        objectName: "itsListView"
        model: itsModel

        anchors.fill: parent
       // anchors.top: text2.bottom
        signal itemClicked(int index)
        spacing: 7
        snapMode: ListView.SnapToItem

        delegate: Rectangle
        {
            id: delrect
            height: Math.max(itsTextView.height + 20, itsListView.itsMinEntryHeight)
            width: parent.width;
            color: "white"
            border.width: 1; radius: 5
             //   LayoutItem.minimumSize: 100

            Text
            {
                //color: yellow
                id: itsTextView
                font.pixelSize: itsListView.itsFontSize
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 10
               // text: name + ": " + itsModel.index
               // anchors.top: itsListView.bottom
                anchors.topMargin: -6;  anchors.bottomMargin: -6
                anchors.rightMargin: -72
//                anchors.horizontalCenter: itsListView.horizontalCenter
//                anchors.bottom: itsListView.top
//                anchors.right: itsListView.left
                text: modelData
               // text: model.display
            }
            MouseArea
            {
                id: mouse_area
                hoverEnabled: true
                anchors.fill: parent
                onClicked:{
                    //console.log("test " + itsListView.currentIndex);
                    //itsListView.itemClicked(itsModel.index)
                    itsListView.itemClicked(index)
                }
            }
        }
    }
}

The ListView has some properties (especaliy the filled model data) so that I can see my layout in the designer. At runtime I overwrite these properties.
My problem was that I have tried to define the properties not in the ListView but in the root widget (Rectange). This did never work !? Why ?
I found this link.
http://doc.qt.io/qt-5/qtqml-javascript-hostenvironment.html#javascript-environment-restrictions JavaScript Environment Restriction
Is the reason that I cannot change variables in the root element ?

JKSH

@Andy314 said:

My problem was that I have tried to define the properties not in the ListView but in the root widget (Rectange). This did never work !? Why ?

QQmlContext *cont=Q->rootContext();
cont->ContextProperty("_aExternValue", "Hallo")
Q->setSource(QUrl("qrc:/qml/CDListChoose.qml"));

You tried to modify the property of your root context. However, your Rectangle is the root object. Use QQuickWidget::rootObject(), not QQuickWidget::rootContext().

Also, you must set the source before you get your root object.

I found this link.
http://doc.qt.io/qt-5/qtqml-javascript-hostenvironment.html#javascript-environment-restrictions JavaScript Environment Restriction
Is the reason that I cannot change variables in the root element ?

No, that article says you cannot modify the JavaScript Global Object. This is not related to your root object.

Andy314

Yeh, that is it !
Now I understand the concept.
Thank you very much.

Call for Presentations - Qt World Summit

Unsolved [solved] Some beginner questions