Multi-Image is not loaded from CSS file

[brazso]

Multi-image loading generates null pointer exception from css file. The latter one contains the following style/uuid:

MenuImageContainer { background-image: url(images/menu.png); }

Image is from project belongs to the book named "Create an Uber Clone in 7 Days". In fact it is a directory containing the images in different densities:

css
|--images
||---- menu.png
|||------ hd.png
|||------ high.png
|||------ medium.png
|||------ veryhigh.png

The directory named menu.png is still found (renaming that I got file not found error), but the following error is printed to the log during css -> res generation:

Found theme.css file. Watching for changes...
CSS> Retina Scale: 1.0
CSS> Input: C:\Users\brazso\eclipse-workspace\UberClone\css\theme.css
CSS> Output: C:\Users\brazso\eclipse-workspace\UberClone\src\theme.res
CSS> Acquiring lock on CSS checksums file C:\Users\brazso\eclipse-workspace\UberClone.cn1_css_checksums...
CSS> Lock obtained
CSS> C:\Users\brazso\eclipse-workspace\UberClone\src\theme.res has been modified since it was last compiled. Making copy at C:\Users\brazso\eclipse-workspace\UberClone\css.backups\theme.res.1538404967458.bak
CSS> No reader for this format
CSS> Releasing lock
CSS> java.lang.RuntimeException: java.lang.NullPointerException
CSS> at com.codename1.designer.css.CSSTheme.getBackgroundImage(CSSTheme.java:2048)
CSS> at com.codename1.designer.css.CSSTheme.getBackgroundImages(CSSTheme.java:1778)
CSS> at com.codename1.designer.css.CSSTheme.updateResources(CSSTheme.java:1491)
CSS> at com.codename1.designer.css.CN1CSSCLI.compile(CN1CSSCLI.java:364)
CSS> at com.codename1.designer.css.CN1CSSCLI.main(CN1CSSCLI.java:222)
CSS> at com.codename1.designer.ResourceEditorApp.main(ResourceEditorApp.java:528)
CSS> at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
CSS> at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
CSS> at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
CSS> at java.lang.reflect.Method.invoke(Method.java:498)
CSS> at com.codename1.impl.javase.JavaFXLoader.runWithJavaFX(JavaFXLoader.java:263)
CSS> at com.codename1.impl.javase.JavaFXLoader.main(JavaFXLoader.java:323)
CSS> at com.codename1.designer.ResourceEditorApp.main(ResourceEditorApp.java:259)
CSS> Caused by: java.lang.NullPointerException
> CSS> at com.codename1.designer.css.CSSTheme.getBackgroundImage(CSSTheme.java:2021)
CSS> ... 12 more

Cheking the source, CSSTheme.java:2021 probably dpis array is null
} else if (dpis[0] > 0) {

However I could not debug that file, I'm just guessing.

[shannah]

You can't use multi-images like that in CSS. The background-image: url(....) directive needs to point to an actual image (or images).

You can, however, use existing multi-images as constants.

E.g.

#Constants {
    checkBoxCheckDisFocusImage: "Check-Box_Normal.png";
}

This will search for an image (or multi-image directory) at the following locations:

• %BASEPATH%/res/*/Check-Box_Normal.png
• %BASEPATH%/../res/*/Check-Box_Normal.png

For example, suppose our css file is at /path/to/myproject/css/theme.css.

Then the following locations would work for Check-Box_Normal.png (and Check-Box_Normal.png can be a directory with the appropriately named images - e.g. hd.png, etc..)

• /path/to/myproject/css/res/Theme/Check-Box_Normal.png
• /path/to/myproject/res/Theme/Check-Box_Normal.png
• /path/to/myproject/css/res/OtherTheme/Check-Box_Normal.png

This is set up so that the standard XML version of the theme.res file will work.

This would allow the multi-image to be loaded using Resources.getImage("Check-Box_Normal.png") or via UIManager.getThemeImageConstant("checkBoxCheckDisFocusImage")

Adding support for this directly via a background-image:url() directive is problematic because of the way that image borders are generated. While not impossible - it would be quite a difficult thing to do in a way that is comprehensive and consistent across all types of inputs.

[brazso]

Thanks for the detailed clarification of Image Constants. From the source I could find out its operation myself, there was no problem with it. However I found background-image: url() directive for multi-images more convenient, moreover your document contains it, so I tried to insert its missing support to the source: diff.txt. At first glance it works, however there can be errors with all type of inputs, as you mentioned in your reply. I cannot test them. Take a look at it, maybe it can be used. Meanwhile I go on with the Uber Clone (book) based on CSS.

[shannah]

I added code in the above commit that will produce a background image using the specified multi-image - but I have disabled it. This will produce unexpected results with generating image borders so it isn't appropriate. However, I left the code in as a guideline in case we want to implement it fully later.