Organizing the visible Elements, e.g. an Error Message

maxwell31

Hi,

I would like to show an error message in a program, for this I created a file ErrorScreen.qml.

    import QtQuick 2.0
    import QtQuick.Controls 2.2

    Item {
        width: Math.floor(parent.width*0.2)
        height: Math.floor(parent.width*0.2)
        anchors.horizontalCenter: parent.horizontalCenter
        property string headlineText
        property string infoText
        Rectangle {
            id: rectangle
            color: "#efefef"
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.top: parent.top
            Text {
                id: headline
                x: 111
                y: 90
                text: headlineText
                font.bold: true
                font.pixelSize: 24
            }
            Text {
                id: info
                x: 111
                y: 130
                text: infoText
                font.bold: false
                font.pixelSize: 18
            }
        }
    }

Now I am not sure what the best practice is to display this error message. Or even more generally, I don't know what the best practice is to swith between different contents which I placed into seperate qml files. Here my thoughts: I could dynamically create it in QML like this

                    var component;
                    var sprite;
                    component = Qt.createComponent("ErrorScreen.qml");
                    sprite = component.createObject(root, {"headlineText": "Warning", "infoText": "InfoText"});

But then I would have to deal with deleting it upon acknowledgement. So maybe it is better to just have something like this in my main.qml

    ApplicationWindow {

        visible: true
        id: root
        objectName: "MainWindow"
        width: 800
        height: 600

        menuBar: MenuBar {
        }
        LeftBar{
        }
        MainScreen{
        }
        ErrorScreen {
            visible: false
        }
    }

and just set the ErrorScreen to visible once I need it. Here, the LeftBar would be an area at the left side of my application where I place some buttons, and in MainScreen, depending on the state of the application I would display the content of different qml files, like a WelcomeScreen, a WorkScreen... However, if I do it like this, e.g. a button on the WorkScreen should make the ErrorScreen visible, so I wonder what is the best way to access the different Screens which are not in the same scope (e.g. accessing ErrorButton from WorkScreen which is a child of MainScreen or the other way round).

ODБOï

hi,

@maxwell31 said in Organizing the visible Elements, e.g. an Error Message:

e.g. accessing ErrorButton from WorkScreen which is a child of MainScreen or the other way round).

you can alias your WorkScreen in MainScreen to be alble to access it from outside :

// MainScreen.qml

Item{
  property alias myWorkScreen : ws
 ...
    WorkScreen{
       id: ws
    }
}

// WorkScreen.qml

Item{
...
 signal error()
Button{onClicked:error()}
}

Now in you main, you can create a function and connect it to your workScreen signal

ApplicationWindow {

       visible: true
       id: root
       objectName: "MainWindow"
       width: 800
       height: 600

               function workScreenErrorHandler(){
                   console.log("ws err")
              }

       Component.onCompleted:{ //connecting the signal
           mainScreen.myWorkScreen.error.connect(workScreenErrorHandler)
        }

       menuBar: MenuBar {
       }
       LeftBar{
       }
       MainScreen{
         id:mainScreen

       }
       ErrorScreen {
           visible: false
       }
   }

Hope this can help
LA