Codename One Back Command on left and Menu on Right

Question

i am trying to make an app in Codename one where i want to create a handburger menu on the right side at the top of the screen and a back button on the left side, but cannot get it to work I know it can be done where you have a handburger menu on the left side and a button on the right side. I made a picture of how I want it to look like. The back button is added in paint and not through the code. Picture of app example

below is the code that I have used to get the menu on the right side.

public class MainForm {
    public static Form mainForm;
    Command cmd_back, cmd_AboutTheApp;
    private enum SideMenuMode {
        SIDE, RIGHT_SIDE {
            public String getCommandHint() {
                return SideMenuBar.COMMAND_PLACEMENT_VALUE_RIGHT;
            }
        };

        public String getCommandHint() {
            return null;
        }
        public void updateCommand(Command c) {
            String h = getCommandHint();
            if(h == null) {
                return;
            }
            c.putClientProperty(SideMenuBar.COMMAND_PLACEMENT_KEY, h);
        }
    };
    SideMenuMode mode = SideMenuMode.RIGHT_SIDE;

    public void init(Object context) {
        theme = UIManager.initFirstTheme("/theme");
        UIManager.getInstance().setThemeProps(theme.getTheme theme.getThemeResourceNames()[0]));
        UIManager.getInstance().getLookAndFeel().setMenuBarClass(SideMenuBar.class);
        Display.getInstance().setCommandBehavior(Display.COMMAND_BEHAVIOR_SIDE_NAVIGATION);
    }

    public void start() {
        if(mainForm != null){
            mainForm.show();
            return;
        }
        mainForm = new Form();
        mainForm.setTitleComponent(title);
        mainForm.setLayout(new BorderLayout());
        addCommands(mainForm);
    }
    private void addCommands(Form f){
        cmd_Back = new Command("Back");
        final Button btn_Back = new Button("Back");
        cmd_Back.putClientProperty("TitleCommand", btn_Back);
        btn_BackButton.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent evt) {
                //do some thing
            }
        });
        cmd_AboutTheApp = new Command("About the app");
        final Button btn_AboutTheApp = new Button("About the app");
        cmd_AboutTheApp.putClientProperty("SideComponent", btn_AboutTheApp);
        btn_AboutTheApp.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent evt) {
                //do some thing
            }
        });
        mode.updateCommand(cmd_Back);
        f.addCommand(cmd_Back);

        mode.updateCommand(cmd_AboutTheApp);
        f.addCommand(cmd_AboutTheApp);
    }
}

if I move the back button so that it is added after AboutTheApp button then the back button is displayed on the right side of the screen but also to the right of the menu, which is also on the right side. I've tried a lot of different ways but none seems to be working

Answer 1

We supported a right side menu bar in the SideMenuBar but not in the Toolbar API. We support placing components/commands in the left/right side of the title area in the Toolbar API but not in the SideMenuBar.

I guess the solution is to add support for the right menu bar into the Toolbar API but I'm not sure what the complexities are for such a change.

I suggest filing an RFE in the issue tracker asking for this but it probably won't be soon as we are closing the features for 3.3 right now.

Answer 2

I have an app that does this. Search Google Play (or App Store) for "Torquepower Diesel Cummins Engine" app.

1. in the theme Constants I set my own rightSideMenuImage and rightSideMenuPressImage, but the default hamburger menu may be OK for you.

2. On the beforeXXXX of each form I do something like this:

   super.beforePartNumberForm(f);
   
   Toolbar tb = createToolbar(f);
   
   createBackCommand(f, tb);
   addHelpX(tb);
   addViewCartX(tb);
   addCallTorquepowerX(tb);
   addReverseSwipe(f);
   

3. create the toolbar

   Toolbar createToolbar(Form f) {
   
       Toolbar tb = new Toolbar();
       f.setToolBar(tb);
   
       Label l = new Label();
       l.setIcon(res.getImage("tpd_logoZZ.png"));
   
       tb.setTitleComponent(l);
   
       return tb;
   }
   

4. create the back button

   void createBackCommand(Form f, Toolbar tb) {
   
       Command c = new Command("") {
           @Override
           public void actionPerformed(ActionEvent evt) {
               back();
           }
       };
   
       c.setIcon(res.getImage("black_left_arrow-512.png"));
       c.setPressedIcon(res.getImage("grey_left_arrow-512.png"));
   
       // MUST set this before adding to toolbar, else get null pointer
       f.setBackCommand(c);
   
       tb.addCommandToLeftBar(c);
   }
   

5. add whatever commands are needed to the sidemenu

   void addHelpX(Toolbar tb) {
       Command c = new Command("Help") {
           @Override
           public void actionPerformed(ActionEvent evt) {
               showForm("HelpForm", null);
           }
       };
   
       c.putClientProperty(SideMenuBar.COMMAND_PLACEMENT_KEY, SideMenuBar.COMMAND_PLACEMENT_VALUE_RIGHT);
       c.putClientProperty("SideComponent", new SideMenuItem(fetchResourceFile(), c.toString(), "very_basic_about.png"));
       c.putClientProperty("Actionable", Boolean.TRUE);
   
       tb.addCommandToSideMenu(c);
   
   }
   

I use my own SideMenuItem which is:

public class SideMenuItem extends Button {
    SideMenuItem() {
        this("");
    }

    SideMenuItem(String s) {
        super(s);
        setUIID("SideMenuItem");
        int h = Display.getInstance().convertToPixels(8, false);
        setPreferredH(h);
    }

    SideMenuItem(Resources res, String s, String icon) {
        super();
        setIcon(res.getImage(icon));
        setText(s);
        setUIID("SideMenuItem");
        int h = Display.getInstance().convertToPixels(8, false);
        setPreferredH(h);
    }
}