Codenameone form with header picture - how to navigate?

Question

I'm writing a codenameone application where I want to have an image displayed across the top of the screen as a header. I do not want to include this image in every form/container that I create so therefore I came up with the following solution:

I have a Main form which contains the image (North) and a container (Center) which will then hold all the components of the specific screen that I want to show.

I will then create containers that represent each individual screen. My idea was to add these containers to the container of the main form, one by one and that navigation between them would be handled by changing the contents of that main screen container.

But I cannot find out how to make this work. As long as I have one single screen to show it is easy... The main form container can be an embedded container that is set to show the container for the single screen. But when I try to navigate to another I cannot make it work.

So, is there another approach I should use? If not, how should I handle navigation between screens?

Answer 1

Is this with a GUI builder app or with a handcoded app?

Either way a simple way of customizing this if your app has a side menu or Toolbar would be to customize the TitleArea UIID to include your background image. E.g. start with a modern theme like the Business Theme and in the designer theme change the title area border property to be "Empty".

Then define the background image to be the image you want with "scaled to fit" or "aligned bottom" depending on what you want. Make sure to include enough space in the image for the title are and use a multi image so it will adapt for other OS's.