Concept of how to pass (hierarchical) data to a custom item



  • Hello.

    First thing: I'm very unexpired with QML and JavaScript!

    I want to have two different GUIs for my application. One for keyboard/mouse based systems and one for touchscreen based systems.

    The menu should be a bottom aligned bar with buttons on it which represents the top level menu item. By taping the menu entry, another bar with buttons should appear which represents the submenu items.

    So the texts of the buttons of the submenubar have to change dynamically depending on the button clicked on the mainmenu,

    In the future the information (text, maybe icons, ...) for the buttons of the submenubar (and in the future also of the mainmenubar) should be provided by a C++ backend which currently not exists. So for my first test I added fake data.

    Now, my question is how to provide the data to the submenubar in the most elegant/efficient or 'correct' way?

    I have three ideas how this could be realized:

    • via property aliases as I have done it in my first approach. But I find this solution not much elegant
    • via a JavaScript function (setTexts) which don't work in first approach and I don't know if this is the best way and why it not works
    • maybe via some kind of Model/view or databinding functionality which could be an elegant way but I have no idea if this is possible.

    This is a minimal example with both, the normal menu and the touch menu bar in it:
    @
    //main.qml
    import QtQuick 2.0
    import QtQuick.Controls 1.0
    import QtQuick.Layouts 1.0
    import QtQuick.Window 2.0

    ApplicationWindow {
    width: 360
    height: 360

    menuBar: MenuBar {
    Menu {
    title: "File"
    MenuItem { text: "Open..." }
    MenuItem { text: "Close" }
    }

    Menu {
    title: "Edit"
    MenuItem { text: "Cut" }
    MenuItem { text: "Copy" }
    MenuItem { text: "Paste" }
    }

    Menu {
    title: "?"
    MenuItem { text: "Help" }
    MenuItem { text: "About" }
    }
    }

    SubMenubar {
    id: subMenuBar;
    y: mainbar.y
    }

    Rectangle {
    id: mainbar;
    height: 50
    width: parent.width
    color: "#bb5555"
    anchors.bottom: parent.bottom

    RowLayout {
    anchors.margins: 8
    anchors.fill: parent

    Button {
    text: "File"
    anchors.centerIn: parent.Center
    onClicked: {
    subMenuBar.text1 = "Open..."
    subMenuBar.text2 = "Close"
    subMenuBar.text3 = ""
    // var texts = [ "Open...", "Close" ]
    // subMenuBar.setTexts(texts)
    subMenuBar.state == "" ? subMenuBar.state = "active" : subMenuBar.state = ""
    }
    }

    Button {
    text: "Edit"
    anchors.centerIn: parent.Center
    onClicked: {
    subMenuBar.text1 = "Cut"
    subMenuBar.text2 = "Copy"
    subMenuBar.text3 = "Paste"
    // var texts = [ "Cut", "Copy", "Paste" ]
    // subMenuBar.setTexts(texts)
    subMenuBar.state == "" ? subMenuBar.state = "active" : subMenuBar.state = ""
    }
    }

    Button {
    text: "?"
    anchors.centerIn: parent.Center
    onClicked: {
    subMenuBar.text1 = "Help"
    subMenuBar.text2 = "About"
    subMenuBar.text3 = ""
    // var texts = [ "Help", "About" ]
    // subMenuBar.setTexts(texts)
    subMenuBar.state == "" ? subMenuBar.state = "active" : subMenuBar.state = ""
    }
    }

    Item { Layout.fillWidth: true }
    }
    }
    }

    //SubMenubar.qml
    import QtQuick 2.0
    import QtQuick.Controls 1.0
    import QtQuick.Layouts 1.0

    Rectangle {
    id: self
    height: 50
    width: parent.width
    color: "#55bb55"

    function setTexts(texts) {
    var lTexts = [ first.text, second.text, third.text ]

    console.log(texts.length)

    for (var i=0; i<lTexts.length; i++) {
    if(i < texts.length ) {
    console.log(i + " then " + texts[i])
    lTexts[i] = texts;
    }
    else {
    console.log(i + " else ")
    lTexts[i] = ""
    }
    }
    }

    property alias text1: first.text;
    property alias text2: second.text;
    property alias text3: third.text;

    RowLayout {
    anchors.margins: 8
    anchors.fill: parent

    Button {
    id: first
    anchors.centerIn: parent.Center
    visible: text != ""
    }

    Button {
    id: second
    anchors.centerIn: parent.Center
    visible: text != ""
    }

    Button {
    id: third
    anchors.centerIn: parent.Center
    visible: text != ""
    }

    Item { Layout.fillWidth: true }
    }

    states: [
    State {
    name: "active"
    PropertyChanges {
    target: self
    explicit: true
    y: y - height
    }
    }
    ]

    transitions: [
    Transition {
    NumberAnimation { properties: "y"; easing.type: Easing.OutCirc; duration: 300 }
    }
    ]
    }
    @

    So, what is the best way to do this?

    Thanx in advance.



  • push


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.