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

[rubikon]

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.

[rubikon]

push