CODEWITHSUNDEEP
codenameone
Think.Smart
Think.Smart

Reputation: 523

How to overlay CSS onto the main resource theme in Codenameone

My goal is simply to have a UID which allows me to put a shadow around different components, but still have the main theme.res used in my project. I'm finding i can only have one or the other running in the simulator at once - this is my problem.

enter image description here

After a lot of messing in the theme and then research it seems that i can't achieve this shadow affect in the theme, but it has to be done in CSS. I followed the CN1 research pages to produce the CSS below which then gave me the ability to have shadow UIDs in my project

BottomShadow {
box-shadow: 2pt 22pt 22pt 0px rgba(61,59,61,0.48);
padding-bottom: 2mm;
padding-top: 1mm;

}

But i am finding that when I use the CN1 Settings > Enable CSS, this stops the project from using my main theme.res (most likely because the settings creates a theme.css.res which overides it). But i have lots of 'regular' UIDs in my main theme that i need to run, as well as locales. I have read about people being able to overlay the CSS on the main theme, but this doesn't work for me. 

        theme = UIManager.initNamedTheme("/theme", "Theme");
    if (Display.getInstance().isTablet()) {
        UIManager.getInstance().addThemeProps(theme.getTheme("Theme_Tablet"));
    }
    try {
        Resources css = Resources.openLayered("/theme.css");
        UIManager.getInstance().addThemeProps(css.getTheme(css.getThemeResourceNames()[0]));
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

I either get CSS or the main theme running, not both. FYI here is my Console info, when i start the app in the simulator, if it helps. Thanks

Found theme.css file.  Watching for changes...
 CSS> Retina Scale: 1.0
 CSS> Input: C:\...\css\theme.css
 CSS> Output: C:\...\src\theme.res
 CSS> Acquiring lock on CSS checksums file C:\...\.cn1_css_checksums...
 CSS> Lock obtained
 CSS> C:\...\src\theme.res has been modified since it was last compiled.       Making copy at C:\...\css\.backups\theme.res.1570314993006.bak
 CSS> Waiting for web browser
 CSS> Opening JavaFX Webview to render some CSS styles
 CSS> Waiting for web browser
 CSS> Web browser is available
 CSS> Releasing lock
 CSS> CSS file successfully compiled.  C:\...\src\theme.res
 CSS> Watching file C:\...\css\theme.css for changes...

Upvotes: 1

Views: 48

Answers (1)

Shai Almog
Shai Almog

Reputation: 52760

What the CSS does for this particular case is create a screenshot of the effect as an image to create that shadow. So if you generated a CSS theme res you can just open it in the designer and export it. You can then reimplement it in your non-CSS theme with the exported resource and (image screenshots).

You also have the option of a theme overlay which requires some manual work. Load the CSS theme then load your theme as an overlay add theme instead of as a set theme. This is covered in the developer guide under theme overlays.

BTW I'm guessing you've seen this and don't like the effect or need to interact with it: https://www.codenameone.com/blog/in-the-shadow.html

Upvotes: 1

Related Questions