What causes a discrepancy in the display of images between the GUI Builder, the device, and the Codename One Simulator?

Question

What causes a discrepancy in the display of images between the GUI Builder, the device, and the Codename One Simulator?

Currently, I am in the process of designing my app's UI using the GUI Builder. I have created a new Form and defined a style as follows:

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

Upon applying this style to a label, it displays correctly within the GUI Builder. https://i.sstatic.net/J8UTw.png

However, when I run the project on the simulator, the icon does not appear anymore. https://i.sstatic.net/0UqaK.png

I also attempted using a Scaled Label with the FinishFlag icon from the res file, which showed up in the GUI Builder but failed to display on the simulator. No error messages were logged indicating any issues with the file.

Please note that all related png files are stored in the res/myCustomTheme.css folder along with their respective subfolders (ranging from low to hd resolution). The src/theme.res file includes the necessary images, per Shai's advice: https://i.sstatic.net/4GMjU.png

How can I ensure the picture appears on the simulator?

Edit: Upon manually coding the UI by adding a labeled component with the specified UIID to the central region of a BorderLayout, the icon did not show unless 3 spaces or more were added to the Label. This behavior strikes me as unusual, is it intentional?

Update September 13th, 2017: Upon building the app and testing it on an actual Android device, the labels now appear. https://i.sstatic.net/qhMer.png

Update September 15th, 2017: To address the issue of components not displaying, following the accepted answer, one must remove the top or bottom constraint of the non-visible component and set it to auto (by clicking on the lock) to allow ample space for the components. After setting the bottom constraint of the progress bar and labels to "auto", the expected result finally appeared on the simulator:

https://i.sstatic.net/31xDA.png

Any assistance would be greatly appreciated,

css codenameone

Answer 1

Answer №1

It appears that the culprit in your issue lies within the layout insets rather than the images used. If you take a closer look, you'll notice that none of the lower components are appearing on the simulator, such as the "progression" label and the three zeroes.

While I cannot directly view the constraints set for the flags or zeroes labels, it is clear that the "progression" label has fixed insets both at the top and bottom. This rigidity could be causing a zero height if there isn't adequate space allocated. Consider making either the top or bottom insets flexible by setting them to "auto."

To further troubleshoot, switch the simulator to the desktop theme so you can adjust the window size and observe how the form adapts to different dimensions.

You can also confirm this suspicion by overriding the layoutContainer() method of the form and examining the height of your flag label:

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

Answer 2

It appears that the culprit in your issue lies within the layout insets rather than the images used. If you take a closer look, you'll notice that none of the lower components are appearing on the simulator, such as the "progression" label and the three zeroes.

While I cannot directly view the constraints set for the flags or zeroes labels, it is clear that the "progression" label has fixed insets both at the top and bottom. This rigidity could be causing a zero height if there isn't adequate space allocated. Consider making either the top or bottom insets flexible by setting them to "auto."

To further troubleshoot, switch the simulator to the desktop theme so you can adjust the window size and observe how the form adapts to different dimensions.

You can also confirm this suspicion by overriding the layoutContainer() method of the form and examining the height of your flag label:

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

Answer 3

Answer №2

There may not be a clear-cut solution for this issue, so perhaps Steve can provide some insight, but here is what appears to be happening.

In your project, there are two resource files: theme and theme.css.

The images referenced in theme.css display correctly for your styles. However, because the loading process only recognizes theme and not theme.css, these images are not recognized by the simulator as they belong to a different file that the theme res file is not aware of.

The GUI builder likely scans all available res files, hence allowing you to include them which could lead to errors. Below are some workarounds you can consider:

Load theme.css and exclude theme - remember to set the inheritNativeThemeBool flag and avoid using the designer tool if you choose this option
Utilize the designer tool to directly load the images instead of relying on CSS
Explicitly open and load the css res file using Resources.open and specifically assign it to the Form
Explicitly open and load the css res file using Resources.open and designate it as the global resource file

Answer 4

There may not be a clear-cut solution for this issue, so perhaps Steve can provide some insight, but here is what appears to be happening.

In your project, there are two resource files: theme and theme.css.

The images referenced in theme.css display correctly for your styles. However, because the loading process only recognizes theme and not theme.css, these images are not recognized by the simulator as they belong to a different file that the theme res file is not aware of.

The GUI builder likely scans all available res files, hence allowing you to include them which could lead to errors. Below are some workarounds you can consider:

Load theme.css and exclude theme - remember to set the inheritNativeThemeBool flag and avoid using the designer tool if you choose this option
Utilize the designer tool to directly load the images instead of relying on CSS
Explicitly open and load the css res file using Resources.open and specifically assign it to the Form
Explicitly open and load the css res file using Resources.open and designate it as the global resource file

What causes a discrepancy in the display of images between the GUI Builder, the device, and the Codename One Simulator?

Answer №1

Answer №2

Similar questions

Ways to display a vertical scrollbar within a select box

Mystery factor triggering the appearance of scrollbar as the window is resized to a specific width threshold

What is the most efficient way to modify the color of an ID within a list?

Is there a way to display a specific item in the breadcrumbs with a unique color that contrasts with the other items?

When the browser window is minimized, the @media CSS will wrap to the bottom line

Is there a way to fix the issue of ContextMenu not appearing at the right position within a scrollable

Limit the radius to only apply on big screens using tailwind css

Looking for a solution to fix parallax images appearing blurred or pixelated on an iPhone? Seeking guidance on

Tips for ensuring two blocks, each containing two pairs, remain next to each other within a div without being separated

How can I deactivate Bootstrap specifically within a certain block of content?

Steps to create a persistent bottom modal with scrollable content

disregard the background styling applied to the parent element with the class of `.wrapper`

WordPress Website Failing to Recognize @import Rule

Tips for avoiding tagline text overlapping with other content

A guide on displaying containers with jQuery and CSS

What is the best way to ensure an image is shown in full screen exclusively on mobile devices?

Alignment problem detected in Firefox and Safari, but works perfectly in Chrome

How to reference ASP.NET Core Blazor static files within a css asset

MUI Gradient Tracked Button

Is it not feasible to place a well within a column using Bootstrap?