how to add a css style property dynamically in JSF

Question

I am using primeface for the UI components and I have to set the background of the layout unit temporary its done by using the css style,

 .layoutCustomStyle.ui-layout-unit-content
  {
     background-image: url('resources/images/backgrnd.png');
  }

The id of the layoutunit is "layoutId" and the styleclass used is "layoutCustomStyle"

in xhtml,

<p:layoutUnit position="top" id= "layoutId" styleClass ="layoutCustomStyle">
</p:layoutUnit>

But what I want is to add the background image dynamically. The image will be chosen by file browser so, I cannot add a separate class for that and use bean.

UIViewRoot view = FacesContext.getCurrentInstance().getViewRoot();
UIComponent comp= view.findComponent("layoutId");
Map<String, Object> attrMap = comp.getAttributes();
String className = (String)attrMap.get("styleClass");

using this I can set and get class names but how to change the attribute "background-image:" dynamically?

Hope the question is clear.Any help appreciated.

Thanks in advance, Pegasus

Dynamically mean on what EVENT you want to change backgrounds??Are you using any Bean class?? I you tell me correctly then I'll provide the code for you. — Kishor Prakash
– Kishor Prakash, Commented Aug 2, 2013 at 9:43
There is a file browser and the chosen image should be set as the background. Yes I am using bean class.I am using primeface fileupload component for choosing the image file. — user2632444
– user2632444, Commented Aug 2, 2013 at 9:59

BalusC · Accepted Answer · 2013-08-02 12:16:47Z

5

Use style attribute instead of styleClass.

answered Aug 2, 2013 at 12:16

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2632444 Over a year ago

I added style "background-image:url("")" dynamically. But on calling "update" the layoutunit disappears(it moves some where up near header layout unit and is hidden). its the problem with "update"

BalusC Over a year ago

Just use style="#{bean.style}" instead where #{bean} is a view scoped bean. Manually grabbing components and directly manipulating them programmatically has always been a fishy way.

imalfabon · Accepted Answer · 2018-07-26 17:50:03Z

This is an old question but at this time has been viewed 10,354 times. I want to share the way i resolve 'add a css style property dynamically' in primefaces 6.2

In my layout i have a header that i need change dyamically the image every 10|20 secs.

 <h:panelGrid id="cabecera" columns="2" cellpadding="1" columnClasses="..."   
       style="width:100%; background-size: cover; background-position: center; background-image: url('#{request.contextPath}/resources/images/header/Vignette/#{userSelected.headerFile}');">    
            <h:form id="...."  >

I have a list with the names of all the images that i can use and userSelected.headerFile choose one randomly.

Three similar options:

1.- At first i Use p:poll directly to update the panelGrid id 'cabecera':

<p:poll interval="10" update="@([id$=cabecera])" autoStart="true"/>

Of course that works, on every update the background image change. That could be enough in some cases where the update and page blink don´t be problem.

2.- Using a little of JavaScript, a bean method in the listener of p:poll. Declare a js function to change the background property (or any other):

 <script> 
     function headerBackground(urlBG) {
         var laUrl =  (urlBG); 
         document.getElementById('cabecera').style.backgroundImage = laUrl;
     }
 </script>

In my Bean userSelected i declared a method to call the javascript function via RequestContext.getCurrentInstance().execute(...). I decided received the url only and add the rest of values in the function:

public void callJSheaderBackground(String url) {
    String jsFunc="headerBackground(\"".concat(url.trim()).concat("\")");
    try{
        RequestContext requestContext = RequestContext.getCurrentInstance();  
        requestContext.execute(jsFunc);
    }catch(Exception ex){
        ...
    }
}

Finally the p:poll

  <p:poll interval="20"  listener="#{userSelected.callJSheaderBackground('url(\''.concat(request.contextPath).concat('/resources/images/header/Vignette/').concat(userSelected.headerFile).concat('\')'))}"  autoStart="true"/>

3.- Calling directly a JS function My JS function, reciving the contextPath and the image file name as parameters:

 function setVignetteAsBackground(contextPath,vignetteName) {
     var laUrl =  "url('" + (contextPath)+'/resources/images/header/Vignette/'+(vignetteName)+"')";  
     document.getElementById('cabecera').style.backgroundImage = laUrl;
 }

Then directly calling from p:poll on the onstart|oncomplete event:

<p:poll interval="20" onstart="setVignetteAsBackground('#{request.contextPath}','#{userSelected.headerFile}')"  autoStart="true"/>

Hopefully be useful for somebody.

Collectives™ on Stack Overflow

how to add a css style property dynamically in JSF

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related