To add a context menu to a control in QML, you use the contextActions list property. You add the ActionSet that contains your ActionItem objects to this list. When you add your ActionItem objects to the ActionSet, you use the actions list property to hold the actions. Here's how to create a blue Container with a context menu that includes three actions:
import bb.cascades 1.0
Page {
content: Container {
Container {
preferredWidth: 200
preferredHeight: 200
background: Color.Blue
contextActions: [
ActionSet {
title: "Action Set"
subtitle: "This is an action set."
actions: [
ActionItem {
title: "Action 1"
},
ActionItem {
title: "Action 2"
},
ActionItem {
title: "Action 3"
}
]
} // end of ActionSet
] // end of contextActions list
} // end of blue Container
} // end of top-level Container
} // end of Page
The actions list property of ActionSet is a default property, meaning that you don't need to include the actions list property explicitly. You can simply start adding ActionItem objects to the ActionSet directly, allowing you to save some space and indents in your code.
Here's what the ActionSet from the example above looks like without the actions list property. Note that when you use this approach, you no longer need to separate the ActionItem objects with commas.
ActionSet {
title: "Action Set"
subtitle: "This is an action set."
ActionItem {
title: "Action 1"
}
ActionItem {
title: "Action 2"
}
ActionItem {
title: "Action 3"
}
}
The ActionItem objects that you add to an ActionSet are the same ones that you can add as actions on a screen. So, you can do similar things when a user selects an action. You can change properties of other controls, display new screens, and so on. You can also add images to the actions, and these images are visible when the context menu is partially displayed.
Here's how to create a context menu for an ImageView that contains three actions. Each action includes a custom image and starts a different animation for the control.
import bb.cascades 1.0
Page {
content: Container {
layout: DockLayout {}
ImageView {
// Use layout properties to center the image on the
// screen
layoutProperties: DockLayoutProperties {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
}
imageSource: "asset:///images/evil_smiley_small.png"
animations: [
// A translation animation that moves the image
// downwards by a small amount
TranslateTransition {
id: translateAnimation
toY: 150
duration: 1000
},
// A rotation animation that spins the image
// by 180 degrees
RotateTransition {
id: rotateAnimation
toAngleZ: 180
duration: 1000
},
// A scaling animation that increases the size
// of the image by a factor of 2 in both the
// x and y directions
ScaleTransition {
id: scaleAnimation
toX: 2.0
toY: 2.0
duration: 1000
}
]
contextActions: [
ActionSet {
title: "Animations"
subtitle: "Choose your animation"
// This action plays the translation animation
ActionItem {
title: "Slide"
imageSource: "asset:///images/slide_action.png"
onTriggered: {
translateAnimation.play();
}
}
// This action plays the rotation animation
ActionItem {
title: "Spin"
imageSource: "asset:///images/spin_action.png"
onTriggered: {
rotateAnimation.play();
}
}
// This action plays the scaling animation
ActionItem {
title: "Grow"
imageSource: "asset:///images/grow_action.png"
onTriggered: {
scaleAnimation.play();
}
}
} // end of ActionSet
] // end of contextActions list
} // end of ImageView
} // end of Container
} // end of Page
