Importing CSS from Java side

Klug · December 12, 2018, 3:47pm

I’m currently migrating our app from the model with polymer models to a near full java model, so each custom component need to have each of it’s components instanciated and placed server side. No problem here, but without CSS, the styling is pretty hard and I don’t know how to add media queries and so on.
So I’ve followed the doc [here]
(https://vaadin.com/docs/v10/flow/importing-dependencies/tutorial-include-css.html) and added the annotations pointing to a copy of the CSS that was embedded in the Polymer model.
Here is the CSS :

.toolbar {
	display: flex;
	justify-content: center;
	background-color: #FFFFFF;
	color: #FFFFFF;
	align-items: center;
	position: relative;
}

vaadin-tab {
	color: #EC1C24;	
	font-size: var(--lumo-font-size-xs);
	padding-left: .75em;
	padding-right: .75em;
}

vaadin-tab[selected]
, 
vaadin-tab:active, 
vaadin-tab:hover {
	color: #FFFFFF;
	background-color: #7197A6;
} 
 
vaadin-tab:before,
vaadin-tab:after {
	background-color: #FFFFFF;
}

vaadin-tabs {
  	overflow: hidden;
}

.branding {
  	display: none;
}

.navigation-tabs a {
  	text-decoration: none;
}

@media (min-width: 600px) {
	vaadin-tab {
		font-size: var(--lumo-font-size-m);
		padding-left: 1em;
		padding-right: 1em;
	}
}

@media (min-width: 1000px) {
	.branding {
		display: block;
		font-size: var(--lumo-font-size-m);
		line-height: normal;
		position: absolute;
		left: 0;
		padding-left: var(--lumo-space-m);
	}
}

I had this part added before and removed it :

:host {
	display: block;
	box-shadow: 0 0 16px 2px var(--lumo-shade-20pct);
	z-index: 200;
	--iron-icon-width: 16px;
	--app-color-red: #EC1C24;
	--app-color-grey: #7197A6;
}

I’ve tried with the annotation and the UI.getCurrent().getPage().addStyleSheet("/styles.component.css");, but the CSS is not applied.
I’ve check on Firefox Dev. Ed. and on Chrome if the CSS file is discovered in the rules and it’s in.
Any idea of what can cause this CSS to be ignored by the component ?

By the way,we are working with Vaadin12.

Diego159 · December 14, 2018, 7:29am

Hello Klug,

I guess the route was not the correct one. Could you tried to import it like this?

@HtmlImport("frontend://styles/your-component-styles.html")
or
@StyleSheet("frontend://styles/your-component-styles.css")

Klug · December 14, 2018, 8:15am

Just tried, same result, no theme applied.
I’m currently trying to include all my CSS in the shared-styles, but having separated CSS for each view would be better.

Klug · December 14, 2018, 12:42pm

I’ve tried via the shared styles, adding all CSS to shared-styles style, but that does not work.
I’ve tried to import the style via annotations @HtmlImport and @StyleSheet.

Diego159 · December 15, 2018, 10:48am

I did not mention it but you need to include your dom-module inside a custom-style, so the dom-module will be loaded in your view, otherwise it will not be loaded.

<dom-module id="shared-styles">
    <template>
        <style include="lumo-color lumo-typography">
            p {
                color: red;
            }
        </style>
    </template>
</dom-module>

<custom-style>
    <style include="shared-styles">
      
    </style>
</custom-style>

Here there is one started that shows how to create your own styles:

https://vaadin.com/start/latest/simple-ui

Klug · December 17, 2018, 1:12pm

I’ve taken a look to the simple-ui code, looked back in my shared-styles.html, and moved my custom CSS from shared-style to the existing custom-style.
But there is no dom-module in this custom-style and the one in the simple-ui is for the dialog overlay, so I don’t really understand what need to be in the dom-module inside the custom-style.
Here is the dom-module that I’ve added inside the custom-style :

<dom-module id="app-navigation-style" theme-for="app-navigation">
  	<template>
  		<style>
  			:host {
			    display: block;
			    box-shadow: 0 0 16px 2px var(--lumo-shade-20pct);
			    z-index: 200;
			    --iron-icon-width: 16px;
			    --color-grey: #EC1C24;
			    --color-red: #7197A6;
			}
			
			.toolbar {
			    display: flex;
			    justify-content: center;
			    background-color: #FFFFFF;
			    color: #FFFFFF;
			    align-items: center;
			    position: relative;
			}
			
			vaadin-tab {
			    color: var(--color-grey);
			    font-size: var(--lumo-font-size-xs);
			    padding-left: .75em;
			    padding-right: .75em;
			}
			
			vaadin-tab[selected]
,
			vaadin-tab:active,
			vaadin-tab:hover {
			    color: #FFFFFF;
			    background-color: var(--color-red);
			}
			
			vaadin-tab:before,
			vaadin-tab:after {
			    background-color: #FFFFFF;
			}
			
			vaadin-tabs {
			    overflow: hidden;
			}
			
			.branding {
			    display: none;
			}
			
			.navigation-tabs a {
			    text-decoration: none;
			}
			
			@media (min-width: 600px) {
			    vaadin-tab {
			        font-size: var(--lumo-font-size-m);
			        padding-left: 1em;
			        padding-right: 1em;
			    }
			}
			
			@media (min-width: 1000px) {
			    .branding {
			        display: block;
			        font-size: var(--lumo-font-size-m);
			        line-height: normal;
			        position: absolute;
			        left: 0;
			        padding-left: var(--lumo-space-m);
			    }
			}
			
  		</style>
  	</template>
  </dom-module>

But the CSS is not applied…
The importHtml annotation is set in the MainView which is the layout for all views of the app.
Is something missing ?

Diego159 · December 18, 2018, 8:59am

Is app-navigation a custom-component?

Theme-modules only work for vaadin-components which implement ´Vaadin.ElementMixin´.

You should not use theme-for="app-navigation".

Diego159 · December 18, 2018, 9:06am

This code should load your styles when it is imported in your application:

<link rel="import" href="../bower_components/polymer/lib/elements/custom-style.html">

<dom-module id="app-navigation-style">
  	<template>
  		<style>
  			// your styles	
  		</style>
  	</template>
</dom-module>

<custom-style>
    <style include="app-navigation-style">
      
    </style>
</custom-style>

You can check this starter for a functional project that uses styles:
https://github.com/vaadin/beverage-starter-flow

Klug · December 18, 2018, 1:57pm

AppNavigation is an extended Div tagged app-navigation. It contains a branding Div with an Anchor and an Image (app logo) and a Tabs component used to navigate through the app. All is done in Java, except the call to the constructor (not overloaded) which is done by the PolymerTemplate of the layout the View.

I’ve tried your last answer, putting the code in the shared-style.html first, not working, and after putting it in an app-navigation.html containing only the dom-module (CSS filled of course) and the custom-style, still not working.
I’m pretty sure I miss something trivial, but can’t found what…

Diego159 · December 18, 2018, 3:44pm

Could you submit the code a Github repository to see it?

Klug · December 18, 2018, 4:23pm

I can’t publish all the app code to github, but I can attach the class code here and the app-navigation.html. Just tell me if you need more. I’ve also joined two screenshots, one of what it should look like with CSS loaded, and the other is the current situation, with custom CSS not loading.
The app is based on the bakery demo, but we’re trying to remove most of the Polymer templates from it.
17442232.java (2.05 KB)
17442235.html (1.64 KB)

Diego159 · December 19, 2018, 11:04am

I created a Github project with the code:https://github.com/DiegoSanzVi/example-style

These tabs have the styles that you wanted to load: