Cascades Development

[Bluenoser]

Now we can define application menus from Cascades in Beta 3, I have been trying to find how we can call other windows from a SettingsActionItem.

I have a Tabbed pane with a declared MenuDefination. I want to call a QML file that is a NavigationPane which contains the settings item list. I have been trying to look though all the docs and sample apps and don't see the proper way to accomplish this. It would be nice to have one of the sample apps with an application menu which calls a settings screen.

Can anyone help or recommend the best practice for this?

Thanks in advance.

[Meghasanghvi]

Hi,

You can check the Weatherguesser Application provided in the samples. In this application they have tabbed pane and from click on tab navigation pane is open. You can implement same in your application and it will work.

Link for the application. https://developer.blackberry.com/cascades/sampleapps/

In this  :Weather guesser is applicatin name.

Feel free to press like button if this help you to resolve your problem.

[Bluenoser]

Hi,

  I can do what I need if I use a NavigationPane and push a page.

NavigationPane {
    id: navigationPane
    
    Menu.definition: MenuDefinition {
        settingsAction: SettingsActionItem {
            imageSource: "asset:///icons/setting.png"
            onTriggered: {
                var page = pageDefinition.createObject();
                navigationPane.push(page);
             }
             attachedObjects: ComponentDefinition {
                 id: pageDefinition;
                 source: "Settings.qml";
             }
         }               
     } 

 but there is no push for a TabbedPane. I need to be able to open up a page that is not a tab element with a back button. This is to open a settings page, which will be a NavigationPane.

[Meghasanghvi]

Sorry, I did not get what you actually trying to achieve.

Can you please give brief idea so i can help you more.

[Bluenoser]

I am trying to implient a Menu for a TabbedPane. The menu is the application menu with Settings and Help buttons. I am trying to open the Settings page from a TabbedPane. As in the code I posted, I can get this to work with a NavigationPane and push a page.

[Bluenoser]

Has anyone been able to create a NavigationPane as an attachedObject inside a TabbedPane? I am still trying to start a NavigationPane from a MenuDefinition.

// Tabbed Pane project template
import bb.cascades 1.0

TabbedPane {
    showTabsOnActionBar: true

     Menu.definition: MenuDefinition {
        helpAction: HelpActionItem {
            imageSource: "asset:///icons/help.png"
        }
        settingsAction: SettingsActionItem {
            imageSource: "asset:///icons/setting.png"
            onTriggered : {
               // Need to create NavigationPane here
            }
        }               
        actions: [
            ActionItem {
                title: "Info"
                imageSource: "asset:///icons/info.png" 
            }
        ]
    } 


    Tab {
        title: qsTr("Tab 1")
        Page {
            id: tab1
            Container {
                Label {
                    text: qsTr("Tab 1 title")
                }
            }
        }
    }
    Tab {
        title: qsTr("Tab 2")
        Page {
            id: tab2
            Container {
                 Label {
                    text: qsTr("Tab 2 title")
                }
            }
        }
    }
    Tab {
        title: qsTr("Tab 3")
        Page {
            id: tab3
            Container {
                // define tab content here
                Label {
                    text: qsTr("Tab 3 title")
                }
            }
        }
    }
    onCreationCompleted: {
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
    attachedObjects: [
        NavigationPane {
            id: navigationPane
            Page {
                Container {
                    Label {
                        text: "Setting Menu"
                    }
                }
            }
        }
    ]
}

[Bluenoser · Accepted solution]

OK. I got it to work.

main.qml

import bb.cascades 1.0

TabbedPane {
    showTabsOnActionBar: true

     Menu.definition: MenuDefinition {
        helpAction: HelpActionItem {
            imageSource: "asset:///icons/help.png"
        }
        settingsAction: SettingsActionItem {
            imageSource: "asset:///icons/setting.png"
            onTriggered : {
               settingsSheet.open()
            }
        }               
        actions: [
            ActionItem {
                title: "Info"
                imageSource: "asset:///icons/info.png" 
            }
        ]
    } 

    attachedObjects: [
       Sheet {
           id: settingsSheet
           objectName: "settingsSheet"
           content: SettingsSheet {
               id: settingsContent
           }
       }
   ]
   
    Tab {
        title: qsTr("Tab 1")
        Page {
            id: tab1
            Container {
                Label {
                    text: qsTr("Tab 1 title")
                }
            }
        }
    }
    Tab {
        title: qsTr("Tab 2")
        Page {
            id: tab2
            Container {
                 Label {
                    text: qsTr("Tab 2 title")
                }
            }
        }
    }
    Tab {
        title: qsTr("Tab 3")
        Page {
            id: tab3
            Container {
                Label {
                    text: qsTr("Tab 3 title")
                }
            }
        }
    }
    onCreationCompleted: {
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}

SettingsSheet.qml

import bb.cascades 1.0

NavigationPane {
    Page {
        Container {
            Label {
                text: "Settings Page"
            }
        }
    }
}