Less Css Framework in JSF 2

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.

Black tooltips in eclipse on Ubuntu 12.04

eclipse

ubuntu









Ubuntu tips for java developers:

Eclipse documentation tooltips are default black in Ubuntu 12.04, you can not read the tooltips.  To change the tooltips color,

Install Gnome Color Chooser:

sudo apt-get install gnome-color-chooser

Run Gnome Color Chooser, in Specific tab, you can setup background/foreground colors for tooltips. I am using for foreground black(#000000), background blue(#C2DFFD). Apply and close Gnome Color Chooser.

Reference : www.askubuntu.com

Debug Pyramid projects through eclipse (aptana studio)

aptana studio 3 pyramid framework debug

In my previous post i wrote pyramid framework settings in eclipse (aptana studio).

How can i debug pyramid projects through eclipse (aptana studio)?

When you give  “–reload” parameter in your project run configuration in arguments tab, eclipse will not debug your pyramid application.

development.ini –reload  => start without debugging

1 – delete “–reload” parameter in your project run configuration in arguments tab

development.ini  => start with debugging.

2 – set your debug points in your classes.

3 – click your debug configuration menu in eclipse toolbar -> debug button.

* debug icon credit