CSS dynamic ? Less Creator?

[vished]

Dear all,

I would like to have my color dynamic.
For example user1 would like to have the top (and base color in) in blue
User2 would like to have the color in the top menu (and base color in) red

How can I do this?
User1 and User2 are not at the same time online. This means it is possible to use everytime only one of my css class.

1)
Is there a for example a creator like a GUI for chanhing easily the base color? I think this is not the case to create this with the elements from Primefaces.

2) Where should I store the generated css classes? I think I cannot save it in the webApp resources folder because it will be change? It should be store in a folder for example from the application server? Or I am wrong?

Any ideas?

[mert.sincan]

I think you can use less.js.
Some links;
http://code.runnable.com/UnP3Yzjpzm8_AA ... or-less-js
http://stackoverflow.com/questions/7823 ... -variables

My example code;
TestView.java;

Code: Select all

package org.primefaces.rio.view;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.context.RequestContext;

@ManagedBean
@SessionScoped
public class TestView implements Serializable {
    
    private String username;
    private String color;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }
    
    public void submit() {
        RequestContext requestContext = RequestContext.getCurrentInstance();
        if(username.equals("Rio"))
            color = "#000000";
        else
            color = "#ffffff";
        String callScript = "changeColor('" + color + "');";
        requestContext.execute(callScript);
    }
}

test.xhtml

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <link rel="stylesheet/less" type="text/css" href="resources/less/layout/rio-layout.less"/>
        <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.js"></script>
        <script type="text/javascript">

            function changeColor(color) {
                less.modifyVars({
                    '@topbar-bgcolor': color
                });
                less.refreshStyles();
            }

        </script>
        <style type="text/css">
            .jqplot-target, .jqplot-axis {
                color: #778D9B;
            }
        </style>
    </ui:define>

    <ui:define name="content">
  
        <div class="Container100">
            <div class="ContainerIndent">
                <div class="Card ShadowEffect HeiAutoOnMobile" style="height:392px;">
                    <h:form>
                        <p:inputText value="#{testView.username}" />
                        <p:commandButton value="Login" actionListener="#{testView.submit}" />

                    </h:form>
                </div>
            </div>
        </div>
        
    </ui:define>

</ui:composition>

I changed the value of @topbar-bgcolor.
If username is "Rio", @topbar-bgcolor-> black
otherwise @topbar-bgcolor-> white.
(Default is #03a9f4)
Screenshot;

[vished]

hm I think this is not that what I want to do:

I have a customer which would like to have the header in green.
Tomorrow I have a customer which would like to have the header in red....

One CSS is in use only one time.
So please correct me if I´m wrong:

I have two css - files in my (e.g.) directory:
- C:/mywebProject/css/custom.css
- C:/mywebProject/css/default.css

custom.css is the css-File which will be customized from the customer
default.css is the default css-file (in case something goes wrong for adjust custom.css)

First question:
Is it possible to use the css - file in my project? How can I do this?
Currently I have:

Code: Select all

<h:outputStylesheet name="css/rio-layout.css" library="rio-layout" />

Second question:
I would like to have a small web interface in which the customer adjust the base color for example.
After he click a button "save" the custom.css will be created.
Is this also possible? How can I do this with less-file?

Thank you very much for any help

[vished]

Ok, I tried your code. This works but I need:

a) The color - Codes are stored in the database for example: @topbar-bgcolor (I will add to this also some other)
I need to load the defined color - code on init from my application.

How can I do this?
So I need moreless to store some color for the header in my database and than: load this stored color on the page load.

[mert.sincan]

I have two css - files in my (e.g.) directory:
- C:/mywebProject/css/custom.css
- C:/mywebProject/css/default.css

custom.css is the css-File which will be customized from the customer
default.css is the default css-file (in case something goes wrong for adjust custom.css)

First question:
Is it possible to use the css - file in my project? How can I do this?
Currently I have:
Code: Select all
<h:outputStylesheet name="css/rio-layout.css" library="rio-layout" />


Second question:
I would like to have a small web interface in which the customer adjust the base color for example.
After he click a button "save" the custom.css will be created.
Is this also possible? How can I do this with less-file?

I found a new solution. You can add default.css and custom.css into webapp/resources/rio-layout/css/
Then, please follow this steps;
- add this tags in template;

Code: Select all

        ....
        <h:outputStylesheet name="css/default.css" library="rio-layout" rendered="#{testView.flag}" />
        <h:outputStylesheet name="css/custom.css" library="rio-layout" rendered="#{not testView.flag}" />
</h:body>

- please try my test codes;
test.xhtml

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="content">
  
        <div class="Container100">
            <div class="ContainerIndent">
                <div class="Card ShadowEffect HeiAutoOnMobile" style="height:392px;">
                    <h:form>
                        <p:inputText value="#{testView.username}" />
                        <p:commandButton value="Login" actionListener="#{testView.submit}" ajax="false" />

                    </h:form>
                </div>
            </div>
        </div>
        
    </ui:define>

</ui:composition>

TestView.java

Code: Select all

package org.primefaces.rio.view;

import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "testView")
@SessionScoped
public class TestView implements Serializable {
    
    private String username;
    private boolean flag = true;
    
    @PostConstruct
    public void init() {
        
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }
    
    public void submit() {
        if(username.equals("Rio"))
            flag = true;
        else
            flag = false;
    }

    public boolean isFlag() {
        return flag;
    }

    public void setFlag(boolean flag) {
        this.flag = flag;
    }
}

If username is "Rio", "default.css" loading. If not 'Rio', "custom.css" loading.

My default.css and custom.css;
default.css

Code: Select all

#layout-topbar {
    background-color: white !important;
}

custom.css

Code: Select all

#layout-topbar {
    background-color: black !important;
}

[mert.sincan]

a) The color - Codes are stored in the database for example: @topbar-bgcolor (I will add to this also some other)
I need to load the defined color - code on init from my application.

How can I do this?
So I need moreless to store some color for the header in my database and than: load this stored color on the page load.

For this question, I think you can add a list into your database. Exp;

Code: Select all

Username   | Layout color (type of String)
-------------------------------------------------
aragorn    | layout color informations (for aragorn) (exp; topbar-bgcolor-> black, topbar-* -> red etc. )
other user | .....

Then, in bean.java

Code: Select all

@ManagedBean
@SessionScoped
public class TestView implements Serializable {

    @PostConstruct
    public void init() {
        /*get database values */
        RequestContext requestContext = RequestContext.getCurrentInstance();
        String callScript = "changeColor('" + layout color informations for user + "');";
        requestContext.execute(callScript);
    }

Then,

Code: Select all

<ui:define name="head">
        <link rel="stylesheet/less" type="text/css" href="resources/less/layout/rio-layout.less"/>
        <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.js"></script>
        <script type="text/javascript">

            function changeColor(color_informations) {
                less.modifyVars({
                    /* add color_informations */
                });
                less.refreshStyles();
            }

        </script>
    </ui:define>
...

[vished]

Thanks. I will try this.
One question before: what do you mean here exactly /* add color_informations */.
Can you give me an example for /* add color_informations */

Do you mean here?
less.modifyVars({
'@topbar-bgcolor': color
});

I would prefere to define this String directly in my ManagedBean and use something like:
function changeColor(color) {
less.modifyVars({
color
});
less.refreshStyles();

function changeColor(color_informations) {
less.modifyVars({
/* add color_informations */
});
less.refreshStyles();
}
[/code]

[mert.sincan]

Do you mean here?
less.modifyVars({
'@topbar-bgcolor': color
});

Yes.

function changeColor(color) {
less.modifyVars({
color
});
less.refreshStyles();

I agree with you. I wanted to say something like you told. Exp;

Code: Select all

// bean.java
@PostConstruct
public void init() {
   /*get database values */
   colorArray = ... // exp; colorArray[0] = "topbar-bgcolor: red", colorArray[1] = ... etc.

   RequestContext requestContext = RequestContext.getCurrentInstance();
   String callScript = "changeColor('" + colorArray + "');";
   requestContext.execute(callScript);
}

//JS
function changeColor(colorArray) {
   var variables = new Object;
    $.each( colorArray, function( i, item ) {
       var itemArr = item.split(":"),
             key = itemArr[0], value = itemArr[1];

       variables['@' + key] = value;  /* variables['@topbar-bgcolor'] = 'red' */
    });
   less.modifyVars(variables);
   less.refreshStyles();
}

[vished]

So I had time to test it but it´s not working for me. Here my code:

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:shiro="http://shiro.apache.org/tags">

<h:head>
	<f:facet name="first">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
	</f:facet>


	<h:outputScript name="js/ripple-effect.js" library="rio-layout" />
	<h:outputScript name="js/perfect-scrollbar.js" library="rio-layout" />
	<h:outputScript name="js/layout.js" library="rio-layout" />


	<link href="/favIcon/favIcon.ico" />



	<ui:define name="head">
		<link rel="stylesheet/less" type="text/css"
			href="resources/less/layout/rio-layout.less" />
		<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.js"></script>
		<script type="text/javascript">

        function changeColor(colorArray) {
        	   var variables = new Object;
        	    $.each( colorArray, function( i, item ) {
        	       var itemArr = item.split(":"),
        	             key = itemArr[0], value = itemArr[1];

        	       variables['@' + key] = value;  /* variables['@topbar-bgcolor'] = 'red' */
        	    });
        	   less.modifyVars(variables);
        	   less.refreshStyles();
        	}

        </script>
	</ui:define>
</h:head>

Here the method:

Code: Select all

	public void init() {
		/* get database values */
		List<String> colorArray = new ArrayList<String>();
		
		

		String s1 = "topbar-bgcolor: red";
		colorArray.add(s1);

		RequestContext requestContext = RequestContext.getCurrentInstance();
		String callScript = "changeColor('" + colorArray + "');";
		requestContext.execute(callScript);

	}

Could you help me, please.

[mert.sincan]

Hi Vished,

Sorry for my late reply. I changed my above codes. Please try the following example;

TestView.java

Code: Select all

package org.primefaces.rio.view;

import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import org.primefaces.context.RequestContext;

@ManagedBean(name = "testView")
public class TestView {
    private String placeholder;
    
    @PostConstruct
    public void init() {
        /* dummy variable to call init method on page */
        placeholder = "TESTTT";
        
        /* --get database values -- */
            List<String> colorArray = new ArrayList<String>();
            String s1 = "topbar-bgcolor: red";
            String s2 = "logo-bgcolor: yellow";
            colorArray.add(s1);
            colorArray.add(s2);
        /* ------------------------ */

        StringBuilder sb = new StringBuilder();
        for(String item: colorArray) {
            sb.append(item).append(";"); // topbar-bgcolor: red;logo-bgcolor: yellow;
        }
        
        RequestContext requestContext = RequestContext.getCurrentInstance();
        String callScript = "changeColor('" + sb.toString() + "');";
        requestContext.execute(callScript);
    }

    public String getPlaceholder() {
        return placeholder;
    }

    public void setPlaceholder(String placeholder) {
        this.placeholder = placeholder;
    }    
}

template.xhtml

Code: Select all

<h:body>
         .....
        <h:outputStylesheet name="css/font-awesome.css" library="rio-layout" />
        <h:outputStylesheet name="css/rio-layout.css" library="rio-layout" />  <!-- you can remove this line -->

        <link rel="stylesheet/less" type="text/css" href="resources/less/layout/rio-layout.less"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.js"></script>
        <script type="text/javascript">
            function changeColor(colorString) {
                var colorArray = colorString.split(";"),
                    variables = [];

                $.each(colorArray, function (i, item) {
                    var itemArr = item.split(":"),
                        key = itemArr[0], value = itemArr[1];
                    
                    if(key.length) {
                        variables['@' + key] = value;  /* variables['@topbar-bgcolor'] = 'red' */
                    }
                });
                
                less.modifyVars(variables);
                less.refreshStyles();
            }
        </script>
    </h:body>

</html>

empty-page.xhtml

Code: Select all

<ui:define name="content">
        <div class="Container100">
            <div class="ContainerIndent">
                <div class="Card ShadowEffect TexAlCenter">
                    <p:inputText placeholder="#{testView.placeholder}" />
                </div>
            </div>
        </div>
</ui:define>

Screenshot;