Making repeating code generic

Circuits

So I have come up with a plan for how I want to implement my keypad. In total the code will looking something similar to this (haven't refined the idea yet):

Rectangle
{
  id: rect
  anchors.verticalCenter: parent.verticalCenter
  width: parent.width - 100
  height: parent.height
  anchors.centerIn: parent
  color: "white"
  radius: 5

  QtObject
  {
    id: modelData

    property var label: "The Label"
    property var unit: "The Unit"

    property int minValue: 0
    property int maxValue: 100
    property int value: 100
  }

  Text
  {
    id: numericEntryDisplay
    elide: Text.ElideRight
    width: parent.width
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottom: parent.bottom
    horizontalAlignment: Text.AlignHCenter
    text: modelData.value
  }

  Text
  {
    id: unitText
    text: modelData.unit
    anchors.left: parent.right
    anchors.bottom: parent.bottom
  }

  MouseArea
  {
    anchors.fill: parent
    onClicked: showNumericKeyboard("systemDialog", 
                                   [qsTr("Cancel"), qsTr("Finished")], 
                                   1, modelData, qsTr(""), 0);
  }
}

The problem is that I am going to have instantiate this code 3 or 4 times per page. So I am looking to make it more generic. Perhaps make it it's own component? In general, what would the process of making this generic look like?

For instance, I would love it if I could just call it something like KeypadRect and whenever I call that I could specify a few things... for example in my mind it would look something like:

KeypadRect
{
  id: inputX
  anchors
  {
    //some anchoring bindings
  }
  model: 
  {
    value: x
    unit: "x"
    minValue: y
    etc...
  }
}

Would I need to wrap it in Item to do this or what's the Qt standard for doing something like this?

sierdzio

@Circuits said in Making repeating code generic:

Would I need to wrap it in Item to do this or what's the Qt standard for doing something like this?

Your top-level Rectangle is enough
Add a property for your model, to expose it to the outside world
Move your code to a new QML file and remember to start file name with Capital letter (otherwise QML engine won't see it)
Then you can start using that component in your other QML files (if it's in different directory, use import statement)

Circuits

@sierdzio "Add a property to your model, to expose it to the outside world."

Could you elaborate a bit on this? What would this property be? Do you mean:

property (x) myModel: QtObject
  {
    id: modelData

    property var label
    property var unit

    property int minValue
    property int maxValue
    property int value
  }

sierdzio

I meant the rectangle. Only top-level properties are visible to the outside (to other QML files). It can even be something as simple as:

Rectangle {
  property alias model: modelData
}

Circuits

@sierdzio Perhaps I am not allowed to do what I am trying to do. I will post the code so you know what's going on:

//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id: _theWindow
    visible: true
    width: 640
    height: 480

    function showComponent(settingValue)
    {
        var comp = Qt.createComponent("qrc:/theObjectToCreate.qml");
        comp.createObject(_theWindow,{"settingValue": settingValue})
    }

    RectComp {
        id: _theRectangleComponent
        property alias theAlias: _theRectangleComponent
        theAlias.myObject.mainValue: 5
    }
}

//RectComp.qml
import QtQuick 2.12
import QtQuick.Window 2.12

Rectangle
{
    id: _theRectangle
    width: 100
    height: 100
    anchors.centerIn: parent
    color: "lightblue"

    property alias myObject: _theObject

    QtObject
    {
        id: _theObject
        property int mainValue
    }
    
    MouseArea
    {
        anchors.fill: parent
        onClicked: showComponent(_theObject);
    }
}

//theObjectToCreate.qml
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id: _newWindow
    visible: true
    width: 640
    height: 480

    property QtObject settingValue

    Rectangle
    {
        id: _newRectangle
        width: 100
        height: 100
        color: "gray"
        anchors.centerIn: parent

        Text
        {
            id: _displayText
            anchors.centerIn: parent
            text: settingValue.mainValue
        }
    }
}

As you can see I am attempting to create a Component on a click. The Component will then display the values passed to it from the QtObject and I would like to set that QtObject's properties from within main. However, the second rectangle is displaying 0 when I am expecting it to display 5.

EDIT:

So I figured out that I can set the value if I do something like this:

RectComp {
        id: _theRectangleComponent
        property alias theAlias: _theRectangleComponent
        Component.onCompleted: theAlias.myObject.mainValue = 5
    }

but I was hoping I could just set the _theObject's property values from within main as though they were _theRectangleComponent's own properties. Perhaps that just isn't possible?

sierdzio

@Circuits said in Making repeating code generic:

property alias theAlias: _theRectangleComponent

This line is completely unnecessary.

theAlias.theModel.mainValue: 5

This should be:

theModel.mainValue: 5

Circuits

@sierdzio That's how I figured it should work but it doesn't seem to like the QtObject property. For instance, if I setup two property's inside of RectComp.qml like so:

//RectComp.qml
...
Rectangle
{
    id: _theRectangle
    ...
    property alias myObject: _theObject
    property string genericString

    QtObject
    {
        id: _theObject
        property int mainValue
    }
    ...

and I then try to assign values to them in main:

genericString: "generic"
myObject.mainValue: 5

There is no trouble with genericString but I get an error on myObject.mainValue: 5:

Cannot assign to non-existent property "mainValue"

However, if I instead assign it a value in main like so:

Component.onCompleted:
{
  myObject.mainValue = 5
}

then it works.

Circuits

@Circuits Fixed by making the QtObject an internal component of _theRectangle like so:

//RectComp.qml
import QtQuick 2.12
import QtQuick.Window 2.12

Rectangle
{
    id: _theRectangle
    width: 100
    height: 100
    anchors.centerIn: parent
    color: "lightblue"

    property alias myObject: _theObject

    InternalObjectComp
    {
        id: _theObject
    }
    
    MouseArea
    {
        anchors.fill: parent
        onClicked: showComponent(_theObject);
    }
}