This one is really simple once you know how it is done. However I have spent quiet some time trying to figure out how the OptionMenu works in a bada application. With the help of Adrian and Nour on the forums we could finally get it to work within a few hours (thank you guys!) Let this small post be an example of how to deal with the menu!

I have modified the Simple Finger Drawing app (projects) a little to include a small menu that will be used soon for further features. I have also introduced further changes and improvements (see the first post here). The actual version is 1.0.8.

There are three most important things to learn about an OptionMenu:

1. It can be added to a Form object/component only.
2. The form style has to implement the FORM_STYLE_OPTIONKEY flag
3. You have to make it show yourself. Clicking on the menu will not automatically show the menu.

I have created a new member (menu_) plus several static constants (ON_MENU, ON_MENU_SAVE, ON_MENU_LOAD) within the class DrawingBoardForm (Derived from Form) and included new code in the Initialize() method of the DrawingBoardClass.cpp.

/*
 * This function must be used instead of Construct(...) to initialize the board object
 */
void
DrawingBoardForm::Initialize(const Osp::Base::String & title, InheritanceContainer &parent,
 Brush &brush)
{
 // First construct the form with one softkey and menu and connect it to the parent
 this->Construct(FORM_STYLE_SOFTKEY_0 | FORM_STYLE_OPTIONKEY);
 this->setParent(parent);
 this->SetBackgroundColor(Color(255,255,255,255));
 this->AddTouchEventListener(*this);
 canvas_ = this->GetCanvasN();

 // Then set up the brush
 brush_ = &brush;

 // Define the softkey and connect it to the listener (this form itself)
 this->SetSoftkeyEnabled(SOFTKEY_0, true);
 this->SetSoftkeyText(SOFTKEY_0, String("Choose Brush"));
 this->SetSoftkeyActionId(SOFTKEY_0, DrawingBoardForm::ON_SELECT_BRUSH);
 this->AddSoftkeyActionListener(SOFTKEY_0, *this);

 // setup the menu
 menu_ = new OptionMenu();
 menu_->Construct();
 menu_->SetShowState(false);
 menu_->AddItem(String("Save Image"), DrawingBoardForm::ON_MENU_SAVE);
 menu_->AddItem(String("Load Image"), DrawingBoardForm::ON_MENU_LOAD);
 menu_->AddActionEventListener(*this);
 this->AddControl(*menu_);
 this->SetOptionkeyActionId(DrawingBoardForm::ON_MENU);
 this->AddOptionkeyActionListener(*this);

}

The code is self-explanatory: After setting the relevant style flag for the form I create an OptionMenu object, construct it, set the show state to false (the menu is hidden by default) and add two Items including the action ID codes to it. Further I specify that the form object itself is going to handle the events when the user selects an option menu item. Then I add the OptionMenu control to the form.

Finally, and this one is important, I have to give the form the action ID to associate with the event of somebody clicking on a menu. Furthermore I have to tell the form which IActionEventListener is going to handle that event (the form itself in our case).

This is pretty low level, you might think. Why cannot the framework handle the opening process of the menu automatically, right? While I do agree that this one adds some extra work, it also means though, that you get some extra flexibility. Now you are able to add some additional functionality associated with this unspectacular event, who knows what it might be good for? To open a menu you have to modify the OnActionPerformed() function.

void
DrawingBoardForm::OnActionPerformed(const Osp::Ui::Control& source, int actionId)
{
 switch(actionId)
 {
    case DrawingBoardForm::ON_SELECT_BRUSH:
        this->sendContainerActionToParent(DrawingBoardForm::ON_SELECT_BRUSH);
        break;
    case DrawingBoardForm::ON_MENU:
        menu_->SetShowState(!menu_->GetShowState());
        menu_->Show();
        break;
    case DrawingBoardForm::ON_MENU_SAVE:
        // to be added later
        break;
    case DrawingBoardForm::ON_MENU_LOAD:
        // to be added later
        break;
 }
}

Basically you flip the switch on the menu’s show state and call its Show() function to enforce that state.

One final interesting thing to note is this: when a user closes the menu by touching the menu button, without selecting any menu item (canceling any further menu-related action) the ON_MENU event is not called! That means that the code we have put above will actually not be executed in this case. Here the framework seems to handle the OptionMenu behavior automatically. This makes you ponder, huh?

Get the latest code of the Simple Finger Drawing app in the projects section!

Related posts:

1. bada Tutorial: zooming a map with softkeys
2. Bada Tutorial: UI Lists (part 2) – Custom List
3. Bada Tutorial: UI Lists (part 1)