How do I modify the toolbar's back command button (back arrow) in Codename One?

Question

I am trying to customize the back arrow that results from switching between forms when using the toolbar in Codename One. I know I have to change the UIID somehow but I'm not sure which component to modify. I've tried changing BackCommand and Toolbar in the theme editor but it hasn't resulted in any changes. There's no point in providing any code here as this is strictly an issue with the theme editor.

Edit: I have attached an image showing how the back arrow currently looks in case my issue is unclear (see the top left-hand corner).

Answer 1

Here is a utility method so that you don't have to write the entire code each time. You will have to customize BackButton UIID. This way you can also show IOS/Android style icons

public void setBackCommand(Form currentForm, Runnable r)
{
    Command back = new Command("Back") {

         @Override
         public void actionPerformed(ActionEvent evt) {
             r.run();
         }
    };

    currentForm.getToolbar().setBackCommand(back);

    Button buttonToolbar = currentForm.getToolbar().findCommandComponent(back);
    buttonToolbar.setUIID("BackButton");
     if(getPlatformName().equals("ios"))
         FontImage.setMaterialIcon(buttonToolbar, FontImage.MATERIAL_ARROW_BACK_IOS);
     else 
         FontImage.setMaterialIcon(buttonToolbar, FontImage.MATERIAL_ARROW_BACK);
}

You can then call it like this:

setBackCommand(currentForm, () -> {previousForm.showBack();});

And you can change the Runnable arg to include different code each time you call it