[SOLVED] Using EL in CSS files?

mbeedub · 02 Feb 2010, 17:11

Hi

We want to allow users of our application to set their preferred skin from pre-defined "skins" - which we'll create from CSS. We want to allow "premium" users the ability to define their own skins (e.g. we'll let them select certain colours for certain elements of the application and store this in their account record). We'll use the CSS classes as set up in PF documentation accordingly.

I'd hoped to use EL in some included CSS files to pull the user defined information in but this doesn't seem to work (EL works fine in the XHTML or templates). We're looking at potential creating a component that will do this and out put the CSS into the header of the template but were wondering if there might be a better approach to this.

Apologies if this is a basic question, I'm pretty new to this environment.

Thanks

02 Feb 2010, 17:43

Can you provide a concrete example for your use case? Is it just colors or images can be customized by users as well.

mndot_lance · 02 Feb 2010, 20:36

If I'm understanding correctly... Your question doesn't seem to be specific to the PrimeFaces library, but to a Facelets JSF application in general.

It sounds like you're looking to run all requests for *.css files through the JSF parser, so that EL expressions may be parsed/evaluated. This might not work out for you, since css files aren't xml files... might get rough.

Unless, you're talking about doing something like this:

Code: Select all

<link rel="stylesheet" type="text/css" media="screen" href="#{userBean.preferences.cssFileName}" />

You could bang that right into your <head> and it's going to work. That's definitely how I'd do it.

Good luck

mbeedub · 02 Feb 2010, 22:01

We are going to be using mainly PrimeFaces and RichFaces for components but yes I guess it is a more generic question. It's the former approach we'd like to implement - so it would be ideal if *.css went through the JSF parser, but as you say they don't...

Ultimately we want not only to achieve a consistent interface while mixing the two component libraries but we also want to give users limited ability to "brand" their interfaces.

I did find this http://forums.sun.com/thread.jspa?threadID=5406653 but we're not using JSF 1.0 currently and the other suggestion in that post simply didn't work. Thought I might see if any one on this group had run into anything similar.

Cagatay, it will probably mainly be used just to set colours that will be stored against the user's account.

In terms of specifics, for example we might let the user select a color for borders and header backgrounds. I thought we might implement in a central .css as something like:

Code: Select all

/* Skin the PF Layout */
.pf-layout-resizer{background:#{userAccount.borderColor};border:none;}

/* Skin the PF Panel */
.pf-panel-hd {background:#{userAccount.borderColor};}
.pf-panel, .pf-panel-hd, .pf-panel-bd, .pf-panel-ft {border-color:#{userAccount.borderColor};}

etc

We may well let them upload images such as their logo but at the moment I think this would be mainly straightforward CSS as above.

mndot_lance · 02 Feb 2010, 23:29

work around:

instead of doing:

Code: Select all

<head>
<link rel="stylesheet" type="text/css" media="screen" href="/style.css" />
</head>

do:

Code: Select all

<head>
<style type="text/css">
<ui:include src="/style.css" />
</style>
</head>

and then your .css file as posted. You might have to change the file extension to css.xhtml, and it wouldn't hurt to add the whole CDATA prefix to the contents of <style>

who knows, perhaps this will be a performance improvement for you because you are decreasing the number of HTTPRequests, as style is being sent in one request

have fun

Oleg · 02 Feb 2010, 23:54

You can use EL to reference different images / css files from selected theme (skin). We have e.g. various themes. User choose one on the settings page. Images and css are referenced on pages by path .../themes/#{userSettings.themeName}/img/.... Where themeName is the current selected by user theme.

mndot_lance · 03 Feb 2010, 02:17

Oleg wrote:You can use EL to reference different images / css files from selected theme (skin). We have e.g. various themes. User choose one on the settings page. Images and css are referenced on pages by path .../themes/#{userSettings.themeName}/img/.... Where themeName is the current selected by user theme.

I think he's looking to give the user control over every minor detail of the styling, rather than just what css file they are importing.

mbeedub · 03 Feb 2010, 13:05

There are two requirements really - (1) predefined themes/skins and (2) granular (more user defined) configurable themes.

(1) For predefines skins, mndot_lance's suggestion would work:

<link rel="stylesheet" type="text/css" media="screen" href="#{userBean.preferences.cssFileName}" />

Also for predefined skins, Oleg's suggestion would also work and possibly give us a little less maintenance - Oleg, any chance you could give details of how you achieved that? Are you just doing that within the XHTML code or are you doing it in the CSS itself?

(2) The other requirement is that "premium" users will be allowed to select these predefined skins but also have the ability to define their own by changing certain (defined by us) granular/detailed elements in the style sheet. That's where we'd hoped to use EL directly in the CSS. mndot_lance will try your suggested workaround and report back.

Any other suggestions welcome.

Many thanks for the help so far.

mndot_lance · 12 Feb 2010, 00:22

PS: I am now DOING this, although with .js files instead of .css.

in head:

Code: Select all

<ui:include src="/script/drop-delete-confirm.js" ></ui:include>

/script/drop-delete-confirm.js

Code: Select all

<script language="javascript">
var droppedStatusPK = '#{daoConstants.menuItemDroppedStatusPK}';//there is JSF EL embedded here. Thus, this .js file must be parsed by the JSF engine.
  function doWork() {
    //do work here
  }
</script>

fiorenzino · 12 Feb 2010, 11:40

Hi,

you can use dynamic css inside your xhtml page, in 2 ways:

1)

Code: Select all

<head>
          <ui:include src="/myapp/css/css-dynamic.xhtml" />
</head>

changing the contentType of css-dynamic.xhtml:

Code: Select all

<f:view contentType="text/css">

2)

Code: Select all

<link rel="stylesheet" type="text/css" media="screen" href="/myapp/css/css-dynamic.xhtml" />

And your css:

Code: Select all


<style type="text/css"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">

@page {
	size: A4 portrait;
	margin-top: 32mm;
	margin-bottom: 16mm;

}

....

</style>

With the first method, sometimes, the html page load without css, i think for late download of this.
Also with xhtmlrender filter (xhtml 2 pdf), if you do not want problems, use the second method.

bye

fiorenzo

[SOLVED] Using EL in CSS files?

Who is online