Loading CSS in Vaadin 7 Portlet

[Soeren Kemmann，修改在10 年前。]

Hi there,

I am using Liferay 6.2.0 CE GA1 and I am trying to add a Vaadin 7 portlet with custom CSS files, but the CSS files are not loaded.
When I start the portlet with "?debug" there is the error saying:
"CSS files may have not loaded properly."

The "process" to create the portlet was:
1. I have created a new Vaadin 7 portlet with Eclipse ... (this creates the liferay-portlet.xml etc. in the WEB-INF folder as well)
2. I have added an AbstractJavaScriptComponent component (a diagram from D3). The diagram relies for the styling on additional css information. So, I have added the information to the "VAADIN/themes/myPortlet/myPortlet.scss"

Everything works fine if I deploy the project to a regular tomcat. Deploying it to liferay results in a message that the some CSS files couldn't be found or loaded and the Diagram looks unstyled!?

Anyone, any idea?

[David H Nebinger，修改在10 年前。]

Vaadin portlets cannot use CSS files in the standard Vaadin way.

You have a couple of choices:

1. Put your CSS rules in the Liferay theme.
2. Put your CSS rules in the Liferay Vaadin theme.
3. Import a CSS file using the liferay-portlet.xml file.

[Soeren Kemmann，修改在10 年前。]

Waoh ... thanks for the quick answer/help! Awesome ...

The first option is to make the portlet custom css globally available, right? (Integrate it into the liferay theme).
The second option I don't understand ... what is a liferay vaadin theme? If it is the one selected when annotating @Theme("liferay"), then I do not understand option one. ;-)

Nevertheless ... I think for me the only real option is to have it defined cleanly per portlet, which is include the css file somehow. If I follow your third suggestion it would mean to add
<header-css>/css/myStyles.css</header-css>
to the liferay-portlet.xml, is that correct?
If I do so Eclipse complains about a content mismatch of <portlet> and in liferay the app says that it does not contain any portlet!?

My liferay-portlet.xml is:

<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->

<liferay-portlet-app>
    <portlet>
        <!-- Matches definition in portlet.xml. -->
        <!-- Note: Must not be the same as servlet name. -->
        <portlet-name>Jstest Application portlet</portlet-name>
        <instanceable>true</instanceable>
        <header-portlet-css>/css/myStyles.css</header-portlet-css>
        <ajaxable>false</ajaxable>
    </portlet>
</liferay-portlet-app>

so ... how do I correctly add an CSS file to liferay-portlet.xml?

[David H Nebinger，修改在10 年前。]

So first you can put your CSS into the Liferay theme using a theme plugin. This is pretty straightforward for any Liferay developer.

The second option is to put it in the Vaadin Liferay theme. Vaadin has it's own theme mechanism, but it's handled at a global level in Liferay (all Vaadin portlets must use the same theme and the @Theme annotation won't really work). These files are typically in the /html/vaadin/ directory somewhere, and you can add your rules to the liferay theme file, styles.css, and deploy using a JSP hook to replace the default file.

For the last option, there are other attributes that you can add to the portlet tag for importing css rules, including header-portal-css and header-portlet-css, etc. Check out the liferay-portlet-app_6_0_0.dtd file to find the attributes and how they work.

[Suresh Yadagiri，修改在9 年前。]

We may need to prefix .liferay class for our custom styles

1. Add CSS to our custom theme sytles.css (docroot//VAADIN/themes/mytheme/styles.css

/* Lay the options horizontally */

.liferay .v-select-optiongroup-horizontal .v-select-option {
display: inline-block;
}
/* Avoid wrapping if the layout is too tight */
.liferay .v-select-optiongroup-horizontal {
white-space: nowrap;
}
/* Some extra spacing is needed */
.liferay .v-select-optiongroup-horizontal
.v-select-option.v-radiobutton {
padding-right: 50px;
}

.liferay .v-select-optiongroup-horizontal
.v-select-option.v-checkbox {
padding-right: 50px;
}

2. Load css in the portlet through liferay-portlet.xml place the tag in correct order as per liferay-portlet.xml DTD

<header-portlet-css>/VAADIN/themes/ptstheme/styles.css</header-portlet-css>

3. In the UI class apply style
optGroup.addStyleName("horizontal");

[David H Nebinger，修改在9 年前。]

I'm not sure that will work, Suresh. It's certainly worth a try, but Liferay and Vaadin themes have never played well as long as I've been using them, you get things like !important getting in the way, the GWT engine applying theming at runtime, ...

[Vishnu Mohan，修改在9 年前。]

If we add HTML files directly to WEB-INF folder of Liferay-Vaadin portlet and adding that html file to the customlayout() of vaadin will it take?? Where we want to put html files in liferay vaadin project.
need to know the folder path ??
need to create theme??

[David H Nebinger，修改在9 年前。]

If you use the InputStream constructor for CustomLayout, your html templates can be anywhere. If you are not using the InputStream constructor just the layout name, it has to be in the VAADIN/themes/themename/layouts directory.

If you're using the standalone Vaadin for building portlets, then this directory is within your own project. If you're using the shred Vaadin environ for building portlets, then this directory is the one in ROOT/html.