CODEWITHSUNDEEP
csscodenameone
HelloWorld
HelloWorld

Reputation: 2355

Why does a picture appear in the GUI Builder and on the device but not in Codename One Simulator?

I am designing my app UI with the GUI Builder. I created a new Form and defined a style as follow :

FinishFlagIcon {
background-image: url(pics/FinishFlag.png);
cn1-background-type: cn1-image-scaled-fit;
cn1-source-dpi: 320;
font-size: 11.9mm; 
}

I set this style on a label and it appears on the GUI Builder. Project in the GUI Builder

However when I launch the project in the simulator it does not appear anymore. Project in the simulator

I also tried to use a Scaled Label and defined the icon as FinishFlag (which was present in the res file), and again it appeared in the GUI Builder but not in the simulator. Of course there is no error printed in the console telling me the file could not be found.

Please note: the res/myCustomTheme.css folder holds all the subfolders related to the png (and those subfolders are populated with low to hd pngs) and the src/theme.res has the pictures (folowing Shai's advice) : Project theme.res file with the images

So what should I do to make the picture appear in the simulator ?

Edit : I tried to hand code the UI and added a Label (with the UIID defined above) to the the central area of a BorderLayout. I does not appear either until I add 3 spaces or more to the Label. I did not try again with the GUI Builder. It looks odd to me, is it done on purpose ?

Edit September 13th 2017 : If I build the app and open it on a real Android device then the labels appear. Project on the device

Edit September 15th 2017 : For people having the issue of component not showing, as advised in the accepted answer the solution consists in removing top or bottom constraint of the component not showing and setting it to auto (click on the lock) so that there is enough space for the components. So eventually after setting to "auto" the bottom constraint of the progress bar an labels the expected result appear on the simulator :

Layout with fewer constraints on the bottom components

Any help appreciated,

Upvotes: 1

Views: 102

Answers (2)

steve hannah
steve hannah

Reputation: 4716

The images in your issue are a red herring. It looks like the problem is with your layout insets. Notice that none of your lower components are showing up in the simulator. The "progression" label, the three zeroes, etc...

I can't see the constraints you are using for the flags or the zeroes labels, but I can see that the "progression" label has fixed insets on both top and bottom. This may result in a zero height if there isn't enough space for it. Try changing either the top or bottom insets to "auto" so that they are flexible.

Try changing the simulator to use the desktop theme so that you can resize the window and see how the form looks at different sizes.

You can also easily verify this by overriding the layoutContainer() method of the form, and check the height that your flag label is getting:

public void layoutContainer() {
   super.layoutContainer();
   System.out.println("finishflag height: "+gui_FinishFlag.getHeight());
}

Upvotes: 2

Shai Almog
Shai Almog

Reputation: 52760

I'm not sure what's the "right" solution for this so maybe Steve can interject but this is what's happening.

You have two resource files: theme & theme.css.

The images in theme.css work great for your styles. However, since the loading process loads theme and not theme.css the simulator is unaware of these images as the theme res file doesn't know of them.

The GUI builder is probably scanning all the res files here so it lets you do that which might be a mistake... You have the following options to workaround this:

  • Load theme.css and discard theme - you will need to define the inheritNativeThemeBool flag and should no longer use the designer tool if you take that approach

  • Use the designer tool to load the images rather than CSS

  • Explicitly load the css res file using Resources.open and explicitly pass it to the Form

  • Explicitly load the css res file using Resources.open and set it as the global resource file

Upvotes: 1

Related Questions