Jun 19 2012

Less Css Framework in JSF 2

by Cem Ikta • Featured, Java • Tags: , , , 3

less cssLESS is the dynamic stylesheet language. Twitter Bootstrap uses it internally. It is similar in structure Saas. An introduction to LESS and comparison to Sass can be found here.

I wanted to use LESS in JSF 2. LESS installation is easy but in JSF 2 necessary to make settings.

I have resources folder in the root of my web application (same folder level with “WEB-INF” folder). A tutorial Resources in JSF 2 can be found here.

All my css and javascripts are under the resources.

LESS installation in html:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less-1.3.0.min.js" type="text/javascript"></script>



I am writing with JSF 2 tags in index.xhtml:

<h:outputStylesheet name="common.less" library="css" />
<h:outputScript name="less-1.3.0.min.js" library="javascript" target="body" />



Target parameter gets “head” oder “body”, better use “body” parameter then less-1.3.0.min.js rendered in body.

But in JSF 2 does not work. LESS need rel="stylesheet/less" but h:outputStylesheet gets rel="stylesheet" from common.less. And common.less file is not rendered as css file.

If your servlet-mapping as below:

<servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<!-- use in index.xhtml -->
<link rel="stylesheet/less" href="/PROJECTNAME/faces/javax.faces.resource/common.less?ln=css" />



if your servlet-mapping with xhtml:

<servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<!-- use in index.xhtml -->
<link rel="stylesheet/less" href="/PROJECTNAME/javax.faces.resource/common.less.xhtml?ln=css" />



I am using with *.xhtml format, all together:

<!-- in web.xml -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>


<!-- in index.xhtml -->
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<!-- TODO use in production compiled css file from less file -->
<link rel="stylesheet/less" href="/PROJECTNAME/javax.faces.resource/common.less.xhtml?ln=css" />

<!-- first less file than less javascript -->
<h:outputScript name="less-1.3.0.min.js" library="javascript" target="body" />
</h:head>



If it works then your common.less file rendered as Css in index.xhtml.

If you get mime type warning for LESS file in Glassfish as below:

WARNING: JSF1091: No mime type could be found for file common.less. To resolve this, add a mime-type mapping to the applications web.xml.

Add LESS file mime type in web.xml in your project.

<mime-mapping>
  <extension>less</extension>
  <mime-type>stylesheet/less</mime-type>
</mime-mapping>



LESS file support in Netbeans 7.1.2:

LESS syntax is so similar to CSS. You can add new file extension in Tools > Options > Miscellaneous > Files, Click new file extension as less and Associated File Type text/x-css


LESS file support in Eclipse Indigo:

Preferences > General > Content Types > Text > CSS, and add Content type:*.less then

Preferences > General > Editors > File Associations, click on Add button and set File type: *.less, and then in the Associated editors box below set the CSS Editor as default.