How to code an iPhone style popup menu in CN1?

Question

It has probably been covered before, but I couldn’t google anything. What is the best approach for making an iPhone-style pop-up selection menu like attached picture? I've tried with a Dialog, but I haven't found an elegant way to add the Commands so they appear nicely and both trigger the action and close the dialog at the same time. And showing a Cancel entry separately is not supported by a ComponentGroup.

Answer 1

See this sample:

Form hi = new Form("Pop");
Button pop = new Button("Pop");
pop.addActionListener(e -> {
    Dialog dlg = new Dialog();

    // makes the dialog transparent
    dlg.setDialogUIID("Container");
    dlg.setLayout(BoxLayout.y());

    Command optionACmd = new Command("Option A");
    Command optionBCmd = new Command("Option B");
    Command optionCCmd = new Command("Option C");
    Command cancelCmd = new Command("Cancel");

    dlg.add(
            ComponentGroup.enclose(
                    new Button(optionACmd), 
                    new Button(optionBCmd), 
                    new Button(optionCCmd)
                    )).
            add(ComponentGroup.enclose(new Button(cancelCmd)));

    Command result = dlg.showStretched(BorderLayout.SOUTH, true);
    ToastBar.showMessage("Command " + result.getCommandName(), FontImage.MATERIAL_INFO);
});
hi.add(pop);
hi.show();

Which results in this:

Answer 2

Thanks Shai!

I made it into a component in case anybody has a similar need:

class MyPopupMenu extends Dialog {

    private Command cancelCmd = null;

    MyPopupMenu(boolean includeCancel, Command... commands) {
        this(includeCancel?new Command("Cancel"):null, commands);
    }

    MyPopupMenu(Command cancelOptional, Command... commands) {
        super();
        setDialogUIID("Container");
        setLayout(BoxLayout.y());
        setDisposeWhenPointerOutOfBounds(true); //close if clicking outside menu
        ComponentGroup group = new ComponentGroup();
        for (Command cmd : commands) {
            group.add(new Button(cmd));
        }
        add(group);

        this.cancelCmd = cancelOptional;
        if (cancelCmd != null) {
            add(ComponentGroup.enclose(new Button(cancelCmd)));
        }


    /**
     * show the menu and execute the selected Command, 
     * or do nothing if Cancel is selected
     */
    public void popup() {
        Command choice = showStretched(BorderLayout.SOUTH, true);
        if (choice != null && choice != cancelCmd) {
            choice.actionPerformed(null);
        }

    }
}

Answer 3

This is awesome, thanks guys. Any reason my buttons seem to be so small? Trying to figure out which style needs to change to increase the height. Changing the Button padding did not seem to change anything. I used the Business theme as a starting point.