1

I am using the CodenameOne GUI builder to add an image to a button. I added the image to the res file and then clicked [Pick Image] in the Property Inspector (see my screenshots). The button image (a plus sign) appears in the GUI. I hit 'save' in the GUI Builder and then close it, then go back to NetBeans and run a debug simulation, and the icon appears, so far so good. .

But now I run the debug simulation again and the button image is gone! I open the GUI Builder and it's gone there as well: the button has reverted to [Pick Image] and, when I click [Pick Image], my image is missing from the res file.

What is going on here? I repeated this three times with the same result- I literally ran the Debug sim twice without doing anything in between and the icon disappears, and there is no indication in the Output messages to indicate that there is a problem.

The Form1.gui file shows a reference to the icon image so maybe the resource file is being cleared in between makes?

<component type="Button" icon="resFile:plus.png" name="Up" actionEvent="true">
</component>

[EDIT] I found that if I add the images using the CNO Designer on the theme.res file, the images 'stick' and I can get a good build. HOWEVER, when I make code changes and then open the GUI Builder again the images are removed from the res file.

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Doug Sisco
  • 121
  • 9
  • This seems to be a conflict between the way the GUI builder handles images and the way CSS loads them in. So the CSS overrides the changes you made in the GUI builder. A workaround is to add equivalent CSS images that will work with the GUI builder. Not ideal. We need to give this some thought. – Shai Almog Dec 30 '22 at 05:34
  • I don't quite understand about adding equivalent CSS; I guess I just don't understand enough about how CNO adds images during a make. Besides, what good is a GUI Builder if I can't do something as simple as adding images? Anyway, so far the image files are staying in the res file, maybe because I am keeping the Designer window open. – Doug Sisco Dec 30 '22 at 10:16

2 Answers2

1

can you add a code snippet of how you add the image ...

According to the error message, you may have chosen the incorrect path, or maybe you have added the path incorrectly in the code.

rainer
  • 3,295
  • 5
  • 34
  • 50
  • I don't add the image in code, I add it using the GUI Builder: I select the button in the Component Tree, then in Property Inspector I click on Pick Image, then Image From Disk. The image loads and appears in the preview pane. – Doug Sisco Dec 30 '22 at 10:06
  • Another way is to add the image to the res file in the GUI Builder: click on the little Add Image icon (upper right corner), select the image and it is added to the res file. Then in the button's Property Inspector select Pick Image but then choose 'res file'. Either way, the image is added to the GUI Builder preview (as shown in my screen clips). – Doug Sisco Dec 30 '22 at 10:12
1

Unfortunately, the old CN1 Designer is not compatible with the CSS compiler. If your project uses CSS, you should add images to the resource file directly in CSS (e.g. by adding it as a background-image on some element), or import it via the GUI builder, as, adding it that way will also add a reference to the image inside the .css file.

This stems from the CSS compiler pruning "unused" images in the resource file. If the image isn't referenced in the CSS file anywhere, it will be removed from the output .res file.

steve hannah
  • 4,586
  • 11
  • 18
  • I *AM* importing the images using the GUI Builder, that's the problem (see my reply to Rainer, above). The images are getting 'pruned' when adding images this way. It's only when I add them using the old CNO Designer that the images don't get 'pruned'. Thanks for your comments, though, at least I know now that there is a 'pruning' process that is taking place. – Doug Sisco Dec 30 '22 at 19:19
  • When adding via the GUI builder the CSS file should be implicitly modified to add the images in there. Does that happen? Is it possible the GUI builder is changing the CSS and you're accidentally reverting the changes? – Shai Almog Dec 31 '22 at 04:19
  • Check in your codenameone_settings.properties file and make sure that it has `codename1.cssTheme=true` – steve hannah Dec 31 '22 at 13:24
  • Thanks, Steve. The codenameone_settings.properties file did NOT have codename1.cssTheme=true, so I added it. Then in GUI Builder I re-added the two button icons to the .res file and did a clean build, and the icons have not been deleted. I'm not totally convinced that this was the problem, I'll post again after a few more hours into this project. Thanks again Shai and Steve for your suggestions. – Doug Sisco Jan 01 '23 at 23:32