Qt Designer QML DummyContextObject

simgunz

When I design a new object such as a custom button, I define a new Item without specifying the width and the height. If I try to edit this object in Qt Designer I could not see the button because it is collapsed in a point of zero dimension.
Is there a way to tell Qt Creator to put a dummy dimensions to display the button correctly?

In the case that the width and height are specified as a function of the parent object dimensions,
in http://qt-project.org/doc/qtcreator-3.0/creator-using-qt-quick-designer.html#creating-dummy-context is explained a way to create a dummy context in order to display the button correctly in the designer but
I can't find the module QmlDesigner 1.0. Anyone know how to do this?

Example:

@import QtQuick 2.0

Rectangle {
id: item1
width:parent.width
height:parent.height

Text {
    id: text1
    text: qsTr("PROVA")
    font.pointSize: 26
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    anchors.fill: parent
}

}@

@import QtQuick 1.0
import QmlDesigner 1.0

DummyContextObject {
parent: Item {
width: 640
height: 300
}
}@

ThomasHartmann

bq. I can’t find the module QmlDesigner 1.0. Anyone know how to do this?

The blog post describes it correctly. The "QmlDesigner" import is just for the designer and not known to QML/the code model.

Note that you can also use the width and height field in the form editor to override width and height of the root item without actually changing the .qml file.

simgunz

Ok I understand. The width and height in the designer do the job of DummyContext.

One more question.

I have the following situation:

@BasicComponent.qml@

@Item{
property Component pageComponent
/CODE/
Loader{
sourceComponent: pageComponent
}
}@

@DerivedComponent.qml@

@BasicComponent{
pageComponent: Item{
/CODE/
}
}@

when I open the DerivedComponent in Qt Designer I can see the DerivedComponent components but I can't edit them, in fact in the navigator the only element displayed is DerivedComponent without any child. Is there a way to edit the DerivedComponent graphically with QtDesigner in this situation? Which are the alternatives to do this?

Thanks

ThomasHartmann

Next to the file name on top of the designer is a combo-box.
There you can select all components defined in the current file and edit them
as if they were defined in a separate file.

simgunz

Thanks. I haven't noticed it.

Now the situation is this:

when "master" is selected I can see all the components but I can't edit them
when in the combo box I select the item loaded by the Loader I can see the hierarchy of the components in the navigator by I can't see any of them on the canvas. Is it because they are custom components created by me? How can I make Qt Designer aware of these new components?

ThomasHartmann

If you components worked in the master document they should work here.
Maybe the size is (0,0) or visibility is false?

simgunz

They are visible and they are inside a layout. May the layout cause the problem?

The size of ImageButton is not defined in the source of ImageButton but it should be set by the layout, in fact in the master the two ImageButton are displayed correctly.

@BasicPage {
id: gameModePage

pageComponent: Item{

    RowLayout {
        id: rowLayout
        anchors.fill: parent

        ImageButton {
            id: buttonModeFood
            buttonId: 1
            buttonPath: "../images/food.jpg"
            Layout.preferredWidth: gameModePage.width/3
            Layout.preferredHeight: gameModePage.height/3
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
            onBtnClicked: foodGamePage()
        }

        ImageButton {
            id: buttonModeLight
            buttonId: 1
            buttonPath: "../images/laser.jpg"
            Layout.preferredWidth: gameModePage.width/3
            Layout.preferredHeight: gameModePage.height/3
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
            onBtnClicked: lightGamePage()
        }
    }
}

}@

simgunz

Actually the size of ImageButton is 0,0, if I set it manually I can see the ImageButton. But I expect the layout set the size.

ThomasHartmann

This the reason:

RowLayout {
id: rowLayout
anchors.fill: parent <-you anchor to the parent
...

simgunz

So, how should I anchor it?

ThomasHartmann

If you leave out the anchors.fill: parent , then the layout will resize itself to its content.