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