Codename One app shown in a centered rectangle on wide screens - codenameone

Question

Note for the readers: this question is referred exclusively to Codename One.
Because I have multiple targets for the same app (Android, iOS, Javascript), that can be run on small screens (that is the typical use case) but also on wide screens, I have to do a choice about the UI.
I want to simplify my life: mobile devices held on portrait mode are my primary target, so... all wide screens (desktop and tablet) will show the app inside a vertical rectangle in the center of the screen. Maybe this is not the best solution, but it can make sense. I suppose that the width of that centered rectangle is 9 cm (my iPhone device width is about 7 cm and my Android device width is about 8 cm).
So... what is a proper way to accomplish this requirement?
Initially I thought that I can create a BaseForm with a code that override the show() method, setting a left and right margin for ContentPane, LayeredPane and Toolbar before calling super.show()... but this solution seems to me a poor way to go and also an overhead, because in that case I'll need to recalculate the margins and to revalidate the BaseForm for every change of size of screen... and, however, this solution will not work with FABs or Dialogs. So... it's not a solution.
It could be nice if I can choose a background (an image or a color) for all the space outside the centered rectangle containing the app.
Any better idea?

Answer 1

This is probably something that we need to implement in the system to make it seamless. Any approach you choose will require some work.
If I were doing something like this I'd create a special form with no title that acts as your background. I'd give it a special custom layout manager that centers the content. Something like:
public CenterOneCompnentLayout class Layout {
public void layoutContainer(Container parent) {
if(parent.getComponentCount() == 1) {
Component cmp = parent.getComponentAt(0);
cmp.setWidth(convertToPixels(9));
cmp.setHeight(parent.getHeight());
cmp.setY(0);
cmp.setX(parent.getWidth() / 2 - cmp.getWidth() / 2);
}
}
public Dimension getPreferredSize(Container parent) {
return new Dimension(100, 100);
}
}
Now just add the actual form to this background form. The rest should work "as is". I think you would need to guard against some things and it's possible this hack will produce some side effects due to the nesting of the forms. But ultimately it should work.