RibbonBackStageView: Add RibbonBackStageMenuItem for convenient use.

example/qml/Qt5/example.qml

@@ -864,11 +864,46 @@ RibbonWindow {
         blurEnabled: true
         blurTarget: root.windowItems
         radius: borderRadius
-        pageModel: [{"menu_text":"Home", "menu_icon":RibbonIcons.Home, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"Home"}},
+        RibbonBackStageMenuItem{
-            {"menu_text":"File", "menu_icon":RibbonIcons.Document, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"File"}},
+            menuText: "Home"
-            {"menu_text":"Search", "menu_icon":RibbonIcons.Search, "type":RibbonBackStageView.MenuItemLocation.Body, "sourceComponent":t_content, "sourceArgs":{'pageName':"Search"}},
+            menuIcon: RibbonIcons.Home
-            {"menu_text":"Account", "menu_icon":RibbonIcons.PersonAccounts, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>console.log("Menu Account clicked")},
+            type: RibbonBackStageView.MenuItemLocation.Head
-            {"menu_text":"About", "menu_icon":RibbonIcons.Info, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>root.showWindow(Qt.resolvedUrl("about.qml"))},
+            sourceComponent: t_content
-            {"menu_text":"Settings", "menu_icon":RibbonIcons.Settings, "type":RibbonBackStageView.MenuItemLocation.Tail, "sourceUrl":Qt.resolvedUrl("pages/SettingsMenuPage.qml")}]
+            sourceArgs:{'pageName':"Home"}
+        }
+        RibbonBackStageMenuItem{
+            menuText: "File"
+            menuIcon: RibbonIcons.Document
+            type: RibbonBackStageView.MenuItemLocation.Head
+            sourceComponent: t_content
+            sourceArgs:{'pageName':"File"}
+        }
+        RibbonBackStageMenuItem{
+            menuText: "Search"
+            menuIcon: RibbonIcons.Search
+            type: RibbonBackStageView.MenuItemLocation.Body
+            sourceComponent: t_content
+            sourceArgs:{'pageName':"Search"}
+        }
+        RibbonBackStageMenuItem{
+            menuText: "Account"
+            menuIcon: RibbonIcons.PersonAccounts
+            type: RibbonBackStageView.MenuItemLocation.Tail
+            clickOnly: true
+            clickFunc: ()=>console.log("Menu Account clicked")
+        }
+        RibbonBackStageMenuItem{
+            menuText: "About"
+            menuIcon: RibbonIcons.Info
+            type: RibbonBackStageView.MenuItemLocation.Tail
+            clickOnly: true
+            clickFunc: ()=>root.showWindow(Qt.resolvedUrl("about.qml"))
+        }
+        RibbonBackStageMenuItem{
+            menuText: "Settings"
+            menuIcon: RibbonIcons.Settings
+            type: RibbonBackStageView.MenuItemLocation.Tail
+            sourceUrl: Qt.resolvedUrl("pages/SettingsMenuPage.qml")
+        }
     }
 }

example/qml/Qt6/example.qml

@@ -864,11 +864,46 @@ RibbonWindow {
         blurEnabled: true
         blurTarget: root.windowItems
         radius: borderRadius
-        pageModel: [{"menu_text":"Home", "menu_icon":RibbonIcons.Home, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"Home"}},
+        RibbonBackStageMenuItem{
-            {"menu_text":"File", "menu_icon":RibbonIcons.Document, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"File"}},
+            menuText: "Home"
-            {"menu_text":"Search", "menu_icon":RibbonIcons.Search, "type":RibbonBackStageView.MenuItemLocation.Body, "sourceComponent":t_content, "sourceArgs":{'pageName':"Search"}},
+            menuIcon: RibbonIcons.Home
-            {"menu_text":"Account", "menu_icon":RibbonIcons.PersonAccounts, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>console.log("Menu Account clicked")},
+            type: RibbonBackStageView.MenuItemLocation.Head
-            {"menu_text":"About", "menu_icon":RibbonIcons.Info, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>root.showWindow(Qt.resolvedUrl("about.qml"))},
+            sourceComponent: t_content
-            {"menu_text":"Settings", "menu_icon":RibbonIcons.Settings, "type":RibbonBackStageView.MenuItemLocation.Tail, "sourceUrl":Qt.resolvedUrl("pages/SettingsMenuPage.qml")}]
+            sourceArgs:{'pageName':"Home"}
+        }
+        RibbonBackStageMenuItem{
+            menuText: "File"
+            menuIcon: RibbonIcons.Document
+            type: RibbonBackStageView.MenuItemLocation.Head
+            sourceComponent: t_content
+            sourceArgs:{'pageName':"File"}
+        }
+        RibbonBackStageMenuItem{
+            menuText: "Search"
+            menuIcon: RibbonIcons.Search
+            type: RibbonBackStageView.MenuItemLocation.Body
+            sourceComponent: t_content
+            sourceArgs:{'pageName':"Search"}
+        }
+        RibbonBackStageMenuItem{
+            menuText: "Account"
+            menuIcon: RibbonIcons.PersonAccounts
+            type: RibbonBackStageView.MenuItemLocation.Tail
+            clickOnly: true
+            clickFunc: ()=>console.log("Menu Account clicked")
+        }
+        RibbonBackStageMenuItem{
+            menuText: "About"
+            menuIcon: RibbonIcons.Info
+            type: RibbonBackStageView.MenuItemLocation.Tail
+            clickOnly: true
+            clickFunc: ()=>root.showWindow(Qt.resolvedUrl("about.qml"))
+        }
+        RibbonBackStageMenuItem{
+            menuText: "Settings"
+            menuIcon: RibbonIcons.Settings
+            type: RibbonBackStageView.MenuItemLocation.Tail
+            sourceUrl: Qt.resolvedUrl("pages/SettingsMenuPage.qml")
+        }
     }
 }

lib_source/CMakeLists.txt

@@ -39,7 +39,7 @@ set(qml_files RibbonTabBar.qml RibbonTabButton.qml RibbonView.qml
     RibbonScrollBar.qml RibbonWindow.qml RibbonMessage.qml
     RibbonMessageListView.qml RibbonTour.qml RibbonTourContent.qml
     RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml
-    RibbonRadioButton.qml)
+    RibbonRadioButton.qml RibbonBackStageMenuItem.qml RibbonObject.qml)
 
 set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/")
 

lib_source/qml/Qt5/RibbonBackStageMenuItem.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.15
+import RibbonUI 1.0
+
+RibbonObject {
+    id: control
+    required property string menuText
+    property var menuIcon
+    property var menuIconFilled
+    required property var type
+    property var sourceComponent
+    property var sourceArgs
+    property bool clickOnly: false
+    property var sourceUrl
+    property var clickFunc
+    property int propertyCount: 0
+    property_names: ['menuText','menuIcon','menuIconFilled','type','sourceComponent','sourceArgs','clickOnly','sourceUrl','clickFunc']
+}

lib_source/qml/Qt5/RibbonBackStageView.qml

@@ -21,7 +21,7 @@ Popup {
     property string backText: qsTr("Back")
     property int radius: 0
     property var pageModel: []
-
+    default property alias data: data_container.data
     signal backBtnClicked()
 
     background: Item{}
@@ -35,11 +35,28 @@ Popup {
         }
     }
 
-    Component.onCompleted: refreshModel()
+    Component.onCompleted: {
+        for(let index = pageModel.length; index < data_container.resources.length; index++)
+        {
+            if(data_container.resources[index] instanceof RibbonBackStageMenuItem)
+            {
+                let item = data_container.resources[index]
+                item.getPropertiesReady()
+                pageModel.push(item.properties)
+            }
+        }
+        if(pageModel.length)
+            pageModelChanged()
+        refreshModel()
+    }
     onPageModelChanged: refreshModel()
     onAboutToShow: show()
     onBackBtnClicked: hide()
 
+    Item{
+        id: data_container
+    }
+
     RibbonBlur{
         id: blur_bg
         anchors.fill: parent
@@ -204,18 +221,18 @@ Popup {
 
                     RibbonIcon{
                         id :rib_icon
-                        iconSource: typeof(model.menu_icon) === "number" ? model.menu_icon : 0
+                        iconSource: typeof(model.menuIcon) === "number" ? model.menuIcon : 0
-                        iconSourceFilled: typeof(model.menu_icon_filled) === "number" ? model.menu_icon_filled : iconSource
+                        iconSourceFilled: typeof(model.menuIconFilled) === "number" ? model.menuIconFilled : iconSource
                         iconSize: menu_label.visible ? menu_label.contentHeight : 16
-                        visible: typeof(model.menu_icon) === "number" && model.menu_icon
+                        visible: typeof(model.menuIcon) === "number" && model.menuIcon
                         Layout.alignment: Qt.AlignVCenter
                         filled: item_bg.view.currentIndex === index && item_bg.isCurrentMenu
-                        color: model.menu_iconColor ? model.menu_iconColor : back_btn.textColor
+                        color: model.menuIconColor ? model.menuIconColor : back_btn.textColor
                     }
                     Image {
                         id: pic_icon
-                        source: typeof(model.menu_icon) === "string" ? model.menu_icon : ""
+                        source: typeof(model.menuIcon) === "string" ? model.menuIcon : ""
-                        visible: typeof(model.menu_icon) === "string"
+                        visible: typeof(model.menuIcon) === "string"
                         fillMode:Image.PreserveAspectFit
                         mipmap: true
                         autoTransform: true
@@ -225,7 +242,7 @@ Popup {
                     }
                     Text{
                         id: menu_label
-                        text: model.menu_text
+                        text: model.menuText
                         color: !mouse.containsMouse && RibbonTheme.modernStyle && item_bg.view.currentIndex === index && item_bg.isCurrentMenu ? RibbonTheme.isDarkMode ? "#779CDB" : "#5882BB" : back_btn.textColor
                         Layout.alignment: Qt.AlignVCenter
                         verticalAlignment: Text.AlignVCenter
@@ -241,7 +258,7 @@ Popup {
                             w += (rib_icon.visible || pic_icon.visible) && menu_label.text ? item.spacing : 0
                             return item_bg.width - w - item_bg.margins * 4
                         }
-                        Layout.leftMargin: (!model.menu_icon && model.menu_text) ? menu_label.contentHeight + item.spacing : 0
+                        Layout.leftMargin: (!model.menuIcon && model.menuText) ? menu_label.contentHeight + item.spacing : 0
                     }
                 }
 
@@ -417,7 +434,7 @@ Popup {
                 model: control.pageModel
                 Loader {
                     active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
-                    source: typeof(modelData.sourceUrl) !== 'undefined' ? modelData.sourceUrl : ""
+                    source: typeof(modelData.sourceUrl) !== 'undefined' && modelData.sourceUrl !== ""? modelData.sourceUrl : ""
                     sourceComponent: typeof(control.pageModel[modelData.globalIndex].sourceComponent) !== 'undefined' && typeof(modelData.sourceUrl) === 'undefined' ? control.pageModel[modelData.globalIndex].sourceComponent : undefined
                     onLoaded: {
                         if (typeof(modelData.sourceArgs) === 'undefined')

lib_source/qml/Qt5/RibbonObject.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.15
+
+QtObject {
+    id: control
+    property var properties: ({})
+    property var property_names: []
+
+    function getPropertiesReady(){
+        properties = {}
+        for (let i = 0; i < property_names.length; i++){
+            if(typeof control[property_names[i]] !== 'undefined')
+            {
+                properties[property_names[i]] = control[property_names[i]]
+            }
+        }
+    }
+}

lib_source/qml/Qt6/RibbonBackStageMenuItem.qml

@@ -0,0 +1,17 @@
+import QtQuick
+import RibbonUI
+
+RibbonObject {
+    id: control
+    required property string menuText
+    property var menuIcon
+    property var menuIconFilled
+    required property var type
+    property var sourceComponent
+    property var sourceArgs
+    property bool clickOnly: false
+    property var sourceUrl
+    property var clickFunc
+    property int propertyCount: 0
+    property_names: ['menuText','menuIcon','menuIconFilled','type','sourceComponent','sourceArgs','clickOnly','sourceUrl','clickFunc']
+}

lib_source/qml/Qt6/RibbonBackStageView.qml

@@ -21,7 +21,7 @@ Popup {
     property string backText: qsTr("Back")
     property int radius: 0
     property var pageModel: []
-
+    default property alias data: data_container.data
     signal backBtnClicked()
 
     background: Item{}
@@ -35,11 +35,28 @@ Popup {
         }
     }
 
-    Component.onCompleted: refreshModel()
+    Component.onCompleted: {
+        for(let index = pageModel.length; index < data_container.resources.length; index++)
+        {
+            if(data_container.resources[index] instanceof RibbonBackStageMenuItem)
+            {
+                let item = data_container.resources[index]
+                item.getPropertiesReady()
+                pageModel.push(item.properties)
+            }
+        }
+        if(pageModel.length)
+            pageModelChanged()
+        refreshModel()
+    }
     onPageModelChanged: refreshModel()
     onAboutToShow: show()
     onBackBtnClicked: hide()
 
+    Item{
+        id: data_container
+    }
+
     RibbonBlur{
         id: blur_bg
         anchors.fill: parent
@@ -204,18 +221,18 @@ Popup {
 
                     RibbonIcon{
                         id :rib_icon
-                        iconSource: typeof(model.menu_icon) === "number" ? model.menu_icon : 0
+                        iconSource: typeof(model.menuIcon) === "number" ? model.menuIcon : 0
-                        iconSourceFilled: typeof(model.menu_icon_filled) === "number" ? model.menu_icon_filled : iconSource
+                        iconSourceFilled: typeof(model.menuIconFilled) === "number" ? model.menuIconFilled : iconSource
                         iconSize: menu_label.visible ? menu_label.contentHeight : 16
-                        visible: typeof(model.menu_icon) === "number" && model.menu_icon
+                        visible: typeof(model.menuIcon) === "number" && model.menuIcon
                         Layout.alignment: Qt.AlignVCenter
                         filled: item_bg.view.currentIndex === index && item_bg.isCurrentMenu
-                        color: model.menu_iconColor ? model.menu_iconColor : back_btn.textColor
+                        color: model.menuIconColor ? model.menuIconColor : back_btn.textColor
                     }
                     Image {
                         id: pic_icon
-                        source: typeof(model.menu_icon) === "string" ? model.menu_icon : ""
+                        source: typeof(model.menuIcon) === "string" ? model.menuIcon : ""
-                        visible: typeof(model.menu_icon) === "string"
+                        visible: typeof(model.menuIcon) === "string"
                         fillMode:Image.PreserveAspectFit
                         mipmap: true
                         autoTransform: true
@@ -225,7 +242,7 @@ Popup {
                     }
                     Text{
                         id: menu_label
-                        text: model.menu_text
+                        text: model.menuText
                         color: !mouse.containsMouse && RibbonTheme.modernStyle && item_bg.view.currentIndex === index && item_bg.isCurrentMenu ? RibbonTheme.isDarkMode ? "#779CDB" : "#5882BB" : back_btn.textColor
                         Layout.alignment: Qt.AlignVCenter
                         verticalAlignment: Text.AlignVCenter
@@ -241,7 +258,7 @@ Popup {
                             w += (rib_icon.visible || pic_icon.visible) && menu_label.text ? item.spacing : 0
                             return item_bg.width - w - item_bg.margins * 4
                         }
-                        Layout.leftMargin: (!model.menu_icon && model.menu_text) ? menu_label.contentHeight + item.spacing : 0
+                        Layout.leftMargin: (!model.menuIcon && model.menuText) ? menu_label.contentHeight + item.spacing : 0
                     }
                 }
 
@@ -417,7 +434,7 @@ Popup {
                 model: control.pageModel
                 Loader {
                     active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
-                    source: typeof(modelData.sourceUrl) !== 'undefined' ? modelData.sourceUrl : ""
+                    source: typeof(modelData.sourceUrl) !== 'undefined' && modelData.sourceUrl !== ""? modelData.sourceUrl : ""
                     sourceComponent: typeof(control.pageModel[modelData.globalIndex].sourceComponent) !== 'undefined' && typeof(modelData.sourceUrl) === 'undefined' ? control.pageModel[modelData.globalIndex].sourceComponent : undefined
                     onLoaded: {
                         if (typeof(modelData.sourceArgs) === 'undefined')

lib_source/qml/Qt6/RibbonObject.qml

@@ -0,0 +1,17 @@
+import QtQuick
+
+QtObject {
+    id: control
+    property var properties: ({})
+    property var property_names: []
+
+    function getPropertiesReady(){
+        properties = {}
+        for (let i = 0; i < property_names.length; i++){
+            if(typeof control[property_names[i]] !== 'undefined')
+            {
+                properties[property_names[i]] = control[property_names[i]]
+            }
+        }
+    }
+}