When we initially launched Codename One it was pretty hard to imagine todays apps. Menus and back navigation
were miles apart when comparing Android 2.x and iOS 4.x… So we created a very elaborate set of abstractions
(command behavior) that served as a set of patch framework we could live with for a while.
But like any patch framework this started crumbling under its shear weight and this lead us to the
Toolbar API. The reason we
could do that is that a lot of the platform differences have converged, in 2012 it was blasphemy to have
a back button in Android title area and now it’s the official material design guideline.
So while platforms are still different their differences are more refined an less conceptual and that is the perfect
environment for the
Toolbar solved most of these differences in a very portable and robust way but
one thing it didn’t codify was back button behavior, this was mostly due to the many nuances within this functionality
and due to our bad experience with abstracting it in the old command behavior framework.
In the previous implementation we would just call:
This would implicitly place the command in the title for iOS and wouldn’t do it for other platforms.
When you use this with the Toolbar API
you would only get the hardware back button behavior and the command wouldn’t map to the title area leaving
iOS users with no other means to navigate.
To solve this in a more generic way we now added 4 new methods to
public Command setBackCommand(String title, ActionListener<ActionEvent> listener) public void setBackCommand(Command cmd) public Command setBackCommand(String title, BackCommandPolicy policy, ActionListener<ActionEvent> listener) public void setBackCommand(Command cmd, BackCommandPolicy policy)
setBackCommand(String, ActionListener<ActionEvent>) will set the
hardware back command and always set the material design back arrow to the left title area. This will allow you
to keep a consistent look across platforms.
You will notice the usage of
BackCommandPolicy, that is an enum with the following possible values:
ALWAYS– Show the back command always within the title bar on the left hand side. This will add the command
supplied “as is” but will give it the
AS_REGULAR_COMMAND– this is effectively the same as calling
addCommandToLeftBarand setting the
hardware back command. This is identical to the
ALWAYSoption with the exception of using the
UIID instead of the
AS_ARROW– this is the default behavior for
setCommand. Uses the material design arrow icon for the back
button which will always appear on all platforms
ONLY_WHEN_USES_TITLE– this will only place the back command when the theme constant
is set to true. By default only the iOS themes have it set to true so the back command will only appear on the title
for iOS devices
WHEN_USES_TITLE_OTHERWISE_ARROW– this option combines the logic of
It will use the command to show the back button on iOS devices but will use the material design arrow icon
for other devices
NEVER– this adds nothing to the title bar. It only sets the hardware button. Effectively this option is here mostly
GUI Builder Apps
The old GUI builder has a navigation stack that automatically adds back buttons. Thus apps built with the old
GUI builder had a problem mapping to back behavior with the
We now fixed that so the UIBuilder
checks if a
Toolbar is installed and if so calls its version of
setBackCommand effectively using the
If this isn’t what you had in mind but you still want to use the
Toolbar with an old GUI builder app you can override the
protected void setBackCommand(Form f, Command backCommand)
You can then set the command as you see fit to the parent form.
Simpler Icon Font
One of the minor annoyances with using icon fonts is the need to adapt them to a given style. This works nicely
when we have a component like a button where we can use the buttons style as the basis for the UI but it
becomes painful with features such as commands where we don’t have a reference to the style object.
To make this a bit easier we made this code simpler:
Style s = UIManager.getInstance().getComponentStyle("TitleCommand"); FontImage icon = FontImage.createMaterial(FontImage.MATERIAL_SEARCH, s, 3);
FontImage icon = FontImage.createMaterial(FontImage.MATERIAL_SEARCH, "TitleCommand", 3);
This will create a 3mm icon with the search icon and the foreground/background scheme of the