How to use object type properties

maydin

I am designing my application structure like below. But I cannot use Button type properties shown below.

I tried to put them there with Loader but it takes source (QUrl) and sourceComponent (QQmlComponent).

When I try to bind them to loader source I get this error: Unable to assign Button_QMLTYPE_4 to QUrl

I searched it a lot but I couldnt make it happen. Or i dont know how to search at all :)

// main.qml

Page {
    CustomToolbar {
         leftButton: Button {/*properties*/}
         rightButton: Button {/*properties*/}
    }
}

// CustomToolbar.qml
Toolbar {
    property Button leftButton;
    property Button rightButton;

    // Here should be left button

    Title {...}

    // Here should be right button
}

raven-worx

@maydin
how dynamic should your CustomToolbar be in the end?
Is it enough for you just to set the Buttons in the very beginning? Or do they get replaced dynamically at some point in your application?

For the first case (completely untested though):

// CustomToolbar.qml
Toolbar {
     id: tb
    property Component leftButton: null
    property Component rightButton: null

    Title {
         id: title
         anchors.horizontalCenter: parent.horizontalCenter
         ...
    }

    Component.onCompleted: {
              // create left button
             if( leftButton )
                     leftButton.createObject(tb, {"anchors": {left: tb.left});
              // create right button
              if( rightButton )
                     rightButton.createObject(tb, {"anchors": {right: tb.right});
    }
}

Pablo J. Rogina

@maydin in addition to @raven-worx proposal, you may want to take a look at QML Camera example, and check how they (re)using the buttons on the right...

maydin

@raven-worx It is enough to set Buttons in the very beginning. But this method allows both I guess.

I realized I need to put title and buttons inside RowLayout in Toolbar. Thats why I wrapped Title inside component and added them to RowLayout dynamically as you show.

But there may be one more solution. If property is Button instead Component, I can add them to children property of RowLayout with children.push(leftButton) etc.

Which way is more convenient and why I can define property type as Button, how and where can I use it in future?

raven-worx

@maydin
Yes my example uses Components and creates them when the ToolBar is about to be created.
You can also use instances of items (Button) directly as you said.

Which way is more convenient and why I can define property type as Button, how and where can I use it in future?

i dont understand that question.

maydin

@raven-worx

property Button leftButton
toolbar.children.push(leftButton)

or

property Component leftButton
Component.onCompleted: leftButton.createObject(toolbar)

Which way is better to use? What are advantages or disadvantages in different situations.

raven-worx

@maydin
I think for your case it doesn't make much of a difference.

Components are used when you want to control the time it will be instantiated or simply use them as a template and reuse them whenever you want.
Items (like when you declare the type of the property to 'Button') are already instantiated when they get assigned.