Jun 19 2012
Less Css Framework in JSF 2
LESS 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.