Dynamic Context Menu and the Period

While I am still slowly working on my Meetup for BlackBerry 10 app, I decided to do a “quick” app that handles shopping lists.  This was suggested by a user on the Crackberry.com Forum.  He wanted a basic shopping list that he could easily move regularly bought items to a buy list and check of the items when he purchased them.  He also wanted to be able to move items on the list, but that will be another post (if I get it working).

I decide to keep things really easy and only do a single page for the entire app with a sheet for editing the list items. Since there would be different context menu options based on whether it was the Master or Buy list, I need to figure out a way to change the menu based on which list was loaded.  Each list is created from the same tables by calling the list ID to get the correct items.  Also, the lists are sorted and grouped differently for each view.  The Master list is grouped by the first ItemGrouping::ByFirstChar and the Buy list is ItemGrouping::None.  I also had to make sure that the sort key was unique for each list, since the Master would be alphabetical and the Buy list is by the item position.

List context menus are created using ActionSet and ActionItem to define the menu.  For what I needed to do, the ActionSet would have to be built each time the list changed.  The easy part was to call the C++ code to update the ListView each time the button was clicked.  And from the code in the documentation, I could easily create each of the ActionItems to represent the menu actions.

Here is an example of how to specify ActionSet objects, in C++:

ImageView* imageView = ImageView::create("john.png");
ActionSet* actionSet = ActionSet::create()
   .title("Email")
   .subtitle("From: John Doe")
   .add(ActionItem::create().title("Reply"))
   .add(ActionItem::create().title("Forward"));
imageView->addActionSet(actionSet);

The action item has a title and an image, and it’s created using the builder pattern.

ActionItem* aItem = ActionItem::create()
  .title("myActionTitle")
  .image(Image("asset:///myImage.png"));

While the documentation showed how to create an ActionItem with a Title and an Image, it didn’t show how to do something when the menu option was triggered.  This stumped me for a while and I even tried to create AttachedObjects to define the ActionSets and the dynamically added them to the ListView, but that wasn’t working either.  So, I put up a question on Developer Forum and one of the developers there reminded me of hitting the period to see more things that can be done. [face palm]

So, with that little issue solved, it was just a matter of triggering something either on the QML or C++ side.  Since I was doing screen updates, I found it easier to use a Signal than a Slot, which can easily be connected to QML Javascript functions.

First I create each ActionItem

ActionItem* aiItemDone = ActionItem::create().onTriggered(this, SIGNAL(onItemDone()));
  aiItemDone->setTitle(QString("Item Done"));
  aiItemDone->setImage(Image("asset:///images/ic_done.png"));

And then I add them to the ActionSet based on the list.  And finally attach it to the ListView.

ActionSet* actionSet = ActionSet::create()
.title("Modify Item");
if(master) {
   actionSet->add(aiEditItem);
   actionSet->add(aiDeleteItem);
   actionSet->add(aiAddItem);
} else {
   actionSet->add(aiEditItem);
   actionSet->add(aiDeleteItem);
   actionSet->add(aiRemoveItem);
   actionSet->add(aiMoveItemUp);
   actionSet->add(aiMoveItemDown);
   actionSet->add(aiItemDone);
}
ListView* tlvcListView = Application::instance()->findChild<ListView*>("lvMasterList");
if(tlvcListView) {
   tlvcListView->removeAllActionSets();
   tlvcListView->addActionSet(actionSet);
}

The final results is using one ListView for two lists with two different context menus.