QML Designer Custom Properties

onek24

Hello,

i couldn't find anything using google, so i'll just ask it here. If i create custom Components using custom Properties, is it possible to have this properties in the QML Designer below the property section on the right?

stevenceuppens

Hi,

Not they i know, and it would indeed be a nice feature!

I created a suggestion on Jira!

stevenceuppens

https://bugreports.qt-project.org/browse/QTCREATORBUG-12100

onek24

Hello stevenceuppens,

currently i am using custom designer templates for that. I will write you a tutorial on how to accomplish that in a few days because i have no time at the moment. You have to manually point to the variables/properties so this isn't done that quickly and also design the layout by yourself.

Even the QtCreator and Designer itself uses .qml files for that.

onek24

Hey,

you'll have to create a folder named "designer" as a subdir of your custom Component. If your Component is in for example a folder named "MyComponents", then it would be "MyComponents/designer". In that folder you have to create a qml-file with the name of your Component-qml file and add "Specifics" at the end of the name. If Your Component is named "MyButton.qml", the file to create would be "designer/MyButtonSpecifics.qml".

The QtCreator Designer automatically reads the Specifics files.

Please look up "...\Qt\Tools\QtCreator\share\qtcreator\qmldesigner\propertyEditorQmlSources\QtQuick" and look at the Specifics for the default QML Components on how to design your Specifics.

I hope it's understandable and helped you. Feel free to ask if you didn't understand something.

Frime

Hi!

Thanks for the hint! Is there an official documentation for that issue? I'm not really able to follow these specific files.

I'm looking for a way to rearrange/order/group the Properties of my QML Custom Controls in QtQuick Designer. Some of my Controls have more than 20 Properties. And its hard to deal with that much properties.

a little example/a link to a more detailed documentation would be really nice.

Thanks in advance!
Frime

ThomasHartmann

Sorry, there is no official documentation.
You can have a look at GridViewSpecifics.qml as an example of a big property sheet. You can use Section to group properties.

imyrvold

@onek24

This was a very helpful post. I have been able to make components as you have described here. The only thing I have been unable to work is getting ComboBox to set my component backend value.

I have a file named RteTextFieldSpecifics.qml where I have (as an example):

                ComboBox {
                    model: ["one", "two", "three"]
                    backendValue: backendValues.rteSignal
                    Layout.fillWidth: true
                    scope: "RteTextField"
                    manualMapping: false
                }

When I select e.g. "two", my RteTextField in main.qml will be:

    RteTextField {
        id: rteTextField1
        name: "myname"
        x: 149
        y: 79
        rteSignal: RteTextField.two
        value: 70
    }

What I want is rteSignal to be populated as a text string:
rteSignal: "two"

If I set manualMapping to true, nothing happens to the component.

Can someone give me a hint to what I should do to make this work as I want to?

RamK

Can anyone tell what is the purpose of specifics.qml files and what should be the format ?

ThomasHartmann

@imyrvold

Sorry for the late answer.

The ComboBox component "assumes" by default that you want to set an enum.
If like in your case you want to do something completely different you have to set manualMapping to true and
implement the currentTextChanged signal yourself. In the implementation you would do backendValue.value to currentText.
Keep in mind that you also have to also change the currentIndex if the backendValue changes.
For this you have to implement onValueFromBackendChanged and set the currentIndex according to backendValue.value.

You should have a look at: qt-creator/src/plugins/qmldesigner/componentsplugin/Controls/TabPositionComboBox.qml.

ThomasHartmann

@RamK

The specifics files define a custom property sheet. This is currently not documented, but you can have a look at the Qt Creator source code.