Settings on top bezel bb10

Question

UPDATE

I wanna implement the setting by swiping the top bezel, here's my code am I doing this right? Currently this doesn't work. I wanna know how to implement it. Where should I put the code for it, and what do I lack of so that it'll work?

import bb.cascades 1.0

NavigationPane {
    //property variant menu;

    Menu.definition: MenuDefinition {
        settingsAction: SettingsActionItem {
            imageSource: "asset:///images/navbar_icon_settings.png"

            onTriggered: {
                cppObj.onSettingsClicked();
            }
        }
        actions: [
            ActionItem {
                title: "Action 1"
                imageSource: "asset:///images/navbar_icon_settings.png"
                onTriggered: {
                    cppObj.onSettingsClicked();
                }
            }
        ]
    }

    firstPage: Page {

        Container {
            background: Color.create("#f9f7f2");
            layout: StackLayout {}

            // Container for holding the title
            Container {
                horizontalAlignment: HorizontalAlignment.Center
                layout: DockLayout {}

                ImageView {
                    horizontalAlignment: HorizontalAlignment.Fill
                    verticalAlignment: VerticalAlignment.Fill
                    imageSource: "asset:///images/navigation_bar.png"
                }

                /*Container {
                    horizontalAlignment: HorizontalAlignment.Right
                    rightPadding: 30
                    topPadding: 40
                    layout: DockLayout {}

                    ImageButton {
                        id: btnsettings
                        verticalAlignment: VerticalAlignment.Center
                        defaultImageSource: "asset:///images/navbar_icon_settings.png"

                        onClicked: {
                            // show settings page when the button is clicked
                            cppObj.onSettingsClicked();
                        }
                    }
                }*/
            }
            Container {
                topPadding: 20
                leftPadding: 20
                rightPadding: 20
                bottomPadding: 20
                background: Color.create("#F4E9E1");
                horizontalAlignment: HorizontalAlignment.Fill
                layout: StackLayout {}

                Label {
                    verticalAlignment: VerticalAlignment.Center
                    horizontalAlignment: HorizontalAlignment.Left
                    text: cppObj.name

                    textStyle {
                        //  fontFamily: FontStyle.Default.Myriad
                        // fontSize: 36
                        color: Color.create("#60323C")
                    }
                }
            }

            Container {
                verticalAlignment: VerticalAlignment.Center
                horizontalAlignment: HorizontalAlignment.Center
                layout: DockLayout {}
                Divider {}
                ScrollView {
                    scrollViewProperties {
                        scrollMode: ScrollMode.Vertical
                    }
                /* ImageView {
                 id: listviewbackground
                 verticalAlignment: VerticalAlignment.Center
                 horizontalAlignment: HorizontalAlignment.Center
                 scalingMethod: ScalingMethod.Fill
                 imageSource: "asset:///images/list_view_cell.png"
                 }*/

                    ListView {
                        id: lvprojects
                        dataModel: cppObj.model()

                        listItemComponents: [
                            ListItemComponent {
                                type: "item"

                                Container {
                                    horizontalAlignment: HorizontalAlignment.Center
                                    layout: DockLayout {}
                                    touchPropagationMode: TouchPropagationMode.Full;

                                    StandardListItem {
                                        title:ListItemData.desc
                                    }
                                }
                            }
                        ]

                        onTriggered: {
                            var selectedItem = dataModel.data(indexPath);

                            onClicked: {
                                // show issue's comment page when the button is clicked
                                cppObj.onIssueClicked(selectedItem.name);
                            }
                        }
                    }
                }
            }
         }
         actions: [
             ActionItem {
                 title: qsTr ("Add Issue")
                 imageSource: "asset:///images/actionbar_icon_add.png"
                 ActionBar.placement: ActionBarPlacement.OnBar

                 onTriggered: {
                     cppObj.onAddIssuesClicked();
                 }
             },

             ActionItem {
                 title: qsTr ("Issues")
                 imageSource: "asset:///images/actionbar_icon_issues.png"
                 ActionBar.placement: ActionBarPlacement.OnBar

                 onTriggered: {
                     cppObj.onIssuesClicked();
                 }
             },

             ActionItem {
                 title: qsTr ("Members")
                 imageSource: "asset:///images/actionbar_icon_members.png"
                 ActionBar.placement: ActionBarPlacement.OnBar

                 onTriggered: {
                     cppObj.onMembersClicked();
                 }
             }
         ]
    }
    /*attachedObjects: [
        ComponentDefinition {
            id: settingsPage
            source: "topsettings.qml"
        }
    ]
    onCreationCompleted: {
        // Create the app menu for the cookbook.
        menu = settingsPage.createObject();
    }
    onPopTransitionEnded: {
        // Transition is done destroy the Page to free up memory.
        page.destroy();
    }*/
}

And here's the topsettings.qml

MenuDefinition {
    settingsAction: SettingsActionItem {
        imageSource: "asset:///images/navbar_icon_settings.png"

        onTriggered: {
            cppObj.onSettingsClicked();
        }
    }

Settings is not displayed:

enter image description here

Why you've included `MenuDefinition` in an attached component? Attached objects have nothing to do with the Application Menu which you're likely trying to build. — Sunseeker, Jul 19 '13 at 05:19

score 1 · Answer 1 · answered Jul 18 '13 at 12:03

Your code looks good: the only issue is that you try to define your Menu.definition in a Page, but you should be defining it in a Pane. See here for example: https://github.com/Kernald/tt-rss-bb10/blob/master/assets/main.qml#L9

By the way, note that you have predefined actions for Help and Settings. See the link before, I used them too.

Sunseeker · Answer 2 · 2013-07-19T04:45:31.140

1

Let's say you have the NavigationPane as the QML document loaded first upon application launch, so that's should be placed in MenuDefinition like that:

NavigationPane {

    Menu.definition: MenuDefinition {
        helpAction: HelpActionItem {
            onTriggered: {               
            }
        }
        actions: [
            ActionItem {
                title: "Action 1"
                imageSource: "asset:///images/ic_action1.png"
                onTriggered: {
                }
            },
            ActionItem {
                title: "Action 2"
                imageSource: "asset:///images/ic_action2.png"
                onTriggered: {
                }
            }
        ]
    }

    firstPage: Page {
    }
}

Note, that there might be up to 4 elements and HelpActionItem as well SettingsActionItem are already defined if you want to implement similar menu entries.

edited Jul 19 '13 at 04:45

answered Jul 19 '13 at 01:53

Sunseeker

1,503
9
21

Put this piece of code in the `Page`, `NavigationPane` etc which is loaded first upon application launch. Have a look at the updated answer of mine – Sunseeker Jul 19 '13 at 04:43
please show the code of a QML file which you specify in `QmlDocument::create()` for the following `Application::setScene()` call – Sunseeker Jul 19 '13 at 05:22
So your code works as expected for me - I swipe down from the top bezel and can see an application menu. Isn't it what you're trying to do? – Sunseeker Jul 19 '13 at 05:45
I want the settings to come out, but it doesn't display to me though :( – kev Jul 19 '13 at 06:15
What do you mean under the settings - application menu or some independent QML page which shall be displayed on tapping "Settings" application menu entry? – Sunseeker Jul 19 '13 at 06:20
I mean I want the settings button to be on application menu when swiped down. And when I tap on the settings button it should redirect to other qml page. Posted the picture above of what it currently looks like – kev Jul 19 '13 at 06:28
Then the problem is in your `cppObj` which `cppObj.onSettingsClicked()` method you're calling there. Please provide the code for `cppObj` object and what's happening in your logs when you tap on "settings" – Sunseeker Jul 19 '13 at 06:37
Have you seen the snapshot of whats going on to the app? Supposedly when you swipe down from the view the settings button should be displayed right? but that doesn't happen to me. I'm referring to the settings button inside the menu – kev Jul 19 '13 at 06:42

Settings on top bezel bb10

2 Answers2