Settings on top bezel bb10 - qml

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:

Answer 1

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.

Answer 2

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.