CSSInject add-on

Vaadin 6 / 7 / 8 Framework UI
21

Hello, I was trying to use yout add on with Vaadin 7.3.5 and I get this error:

 threw exception [com.vaadin.server.ServiceException: java.lang.NullPointerException]
 with root cause
java.lang.NullPointerException
    at com.vaadin.server.AbstractExtension.extend(AbstractExtension.java:57)
    at org.vaadin.cssinject.CSSInject.extend(CSSInject.java:23)
    at org.vaadin.cssinject.CSSInject.<init>(CSSInject.java:19)
    at com.heb.ordering.console.OrderingItems.<init>(OrderingItems.java:90)
    at com.heb.ordering.console.OrderingWorkArea.<init>(OrderingWorkArea.java:12)
    at com.heb.ordering.console.OrderingConsole.<init>(OrderingConsole.java:57)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(Unknown Source)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(Unknown Source)
    at java.lang.reflect.Constructor.newInstance(Unknown Source)
    at java.lang.Class.newInstance(Unknown Source)
    at com.vaadin.navigator.Navigator$ClassBasedViewProvider.getView(Navigator.java:336)
    at com.vaadin.navigator.Navigator.navigateTo(Navigator.java:512)
    at com.vaadin.ui.UI.doInit(UI.java:646)

this is my code:

CSSInject cssTab = new CSSInject( getUI());
cssTab.setStyles(  getTabStyle()  );
tbCategorias.setStyleName("orderingtab");
22

would be good to create demos simple functionality, thus be clear where each component will call it.

23

Hi folks!
I am very new to Vaadin and I’ve been trying to do the following:
I have a table that loads a few rows of data with each row representing a logged event in a system I am working on…each event has been color coded through the use of a color picker ( i keep the colors chosen in my database as hex strings).
What i need to do is for each row I need to paint a few cells (not all) according to the colors in my database so, i thought to myself that this could probably be achieved with the table.setCellStyleGenerator by injecting some css…so i tried the following but it does not seem to work…for that matter it does not seem to do anything…what am i doing wrong?

CSSInject css = new CSSInject(getUI());

table.setCellStyleGenerator(new Table.CellStyleGenerator() {
@Override
public String getStyle(Table source, Object itemId,
Object propertyId) {
if(itemId instanceof EventLog)
if(propertyId!=null)
if(propertyId.equals(“eventDate”)){
String color = ((EventLog)itemId).getEventType().getBackColor();
css.setStyles(“.”+color+" { background: “+color+”; }");
return css.getStyles();
}
return null;
}
});

Any help will be greatly appreciated as i have been stuck on this for quite some time now…

24

Hi,

CellStyleGenerator only supports adding new “style names” to the cells, not actual inline CSS styles. So you can add those custom CSS class names and their corresponding CSS rules to the page using CSSInject, and then return those CSS class names with the CellStyleGenerator.

In pseudo-code:

[code]
loop colors
create “selector” for “color”
insert css background property with “color”

cell-style-generator
return correct “selector” for “color”
[/code]Hope this helps!

25

Thanks!!!
It worked like a charm! Your help is much appreciated!

26

Hello,
I am trying to use this add-on with the Calendar extension to dynamically modify the color of an event.
But after opening a week the background of the events are plain white though they have the right style name.
Only after jumping to another week and back the coresponding css files are evaluated.
The code snippet is:

for (event ← returnList){
val css = new CSSInject()
css.setValue(“.v-calendar-event-” + event.getStyleName + event.generateBackgroundStyle()) theWindow.addComponent(css)}

Do you have any idea what could be wrong?
Thank you
Tobias

27

I don’t even know how to change an event’s background color, but introducing as its style “colorX” (this is the default color-set).

28

I installed this add-on in Vaadin 7.5.1, installed using ivy. But nothing happen. I was trying to use the native way but after a time switching Colors and Font the “Page” becomes huge and hangs browser.
My settings:
ivy.xml

ivysettings.xml

and the java code ( based in CSSInjectWithColorpicker example from
https://vaadin.com/wiki/-/wiki/Main/Dynamically%20injecting%20CSS). .

TextArea textLabel = new TextArea(null, text);
textLabel.setWidth("100%");
textLabel.setHeight("200px");
// IMPORTANT: We are here setting the style name of the label, we are going to use this in our injected styles to
// target the label
textLabel.setStyleName("text-label");
panelContent.addComponent(textLabel);
......
    // Version 2 (for Vaadin 7)
    CSSInject css = new CSSInject(getUI());
    //css.setStyles(".v-app .v-textarea.text-label { color:" + color.getCSS() + "; }");
    css.setStyles(".text-label { color:" + color.getCSS() + "; }");
29

Can somebody provide some documentation on CSSInject and its loading. I would like to know when and where the injected CSS gets loaded. When we initialized the CSSInject object using CSSInject css = new CSSInject(getUI()); inside any component the newly added css will be loaded to the UI of the application or to the component?

Thanks
Shailesh

30

Hi, I’ve been trying to make the CSS injection work but I don’t get any new CSS in my code. It doesn’t do anything at all. What am I missing? This is my code:

my_component.addStyleName("hello");

SSInject css = new CSSInject(UI.getCurrent());
css.setStyles(".hello { border: 1px solid red; }");
31

SSInject css = new CSSInject(UI.getCurrent());
css.setStyles(“.hello { border: 1px solid red; }”);

my_component.addStyleName(“hello”);

32

also not working here. In the UI class, init method, we have:

@Override
protected void init(final VaadinRequest request) {
super.init(request);

CSSInject injector = new CSSInject(getUI());
injector.addStyleSheet(new ExternalResource("http://spot-ci.dev.cp.local:5000/injected-styles.css"));

}

But the CSS is never loaded. Can somebody confirm, that this component works for him?

33

Hi All,

I was implemented toolbar window in maven application. When extends toolbarwindow it throws “java.lang.NoSuchMethodError: org.vaadin.cssinject.CSSInject: method ()V not found”

16:05:35,942 SEVERE [com.vaadin.server.DefaultErrorHandler]
(http-localhost/127.0.0.1:9870-3) : java.lang.NoSuchMethodError: org.vaadin.cssinject.CSSInject: method ()V not found
at org.vaadin.toolbarwindow.ToolbarWindow.(ToolbarWindow.java:22) [toolbarwindow-0.1.jar:0.1]

at com.shaic.claim.ViewDetails.getViewPreviousClaimDetails(ViewDetails.java:3674) [classes:]

at com.shaic.claim.ViewDetails$1.buttonClick(ViewDetails.java:946) [classes:]

at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) [rt.jar:1.7.0_25]
34

What style you want to change the button ?

35

I want to use minimize button in Window, So i am trying to use toolbar window instead of normal window in vaadin. I got this issue when i am initializing Toolbar Window class.

36

use vaadin > to 7.0

37

The jar downloaded using the Maven pom entry is corrupt.

I had to manually download and push in the my maven repo to work.

I used the following entry

vaadin-addons
http://maven.vaadin.com/vaadin-addons

    <dependency>
       <groupId>org.vaadin.addons</groupId>
       <artifactId>cssinject</artifactId>
       <version>2.0.3</version>
    </dependency>
38

I suggest just doing it in JavaScript using an extension (subclass of AbstractJavaScriptExtension), or otherwise using

Page.getCurrent().getJavaScript().execute(...)
39

Could you add support for Vaadin 8?

40

Much easier

Page.getCurrent().getJavaScript().execute("$('head').append('<style type=\"text/css\">.v-table-body{background: red !important}</style>');");