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:

1. when "master" is selected I can see all the components but I can't edit them
2. 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.