Как сделать одну HTML страницу, чтобы выбрать другой CSS стилей для темы, используя выпадающий список

Question

HTML код:

<h:panelGrid columns="2" cellpadding="10">   
<h:outputText value="Color:"></h:outputText> 
<p:themeSwitcher effect="fade" style="width:165px" id="color"> 
       <f:selectItem itemLabel="Green" itemValue="href='#{request.contextPath}/theme/primefaces-aristo/theme.css" /> 
       <f:selectItem itemLabel="Blue" itemValue="href='#{request.contextPath}/theme/primefaces-aristo/theme1.css" /> 
</p:themeSwitcher> 

</h:panelGrid> 

создать 2 различных CSS стилей, которые являются theme.css и theme1.css

Проблема заключается в том, что я выбираю theme1.css (ярлык как синий), он не работает, и тема остается неизменной.

Как это решить? Есть идеи?

UPDATE:

JAVA страница:

private String csspath = ""; 
private String selectedCss = "Pink"; 
private boolean trigger_valuechange_refresh; 

public Test() { 
    if(this.selectedCss.equals("Pink")) { 
     this.csspath = "/theme/primefaces-aristo/theme1.css"; 
    } else { 
     this.csspath = "/theme/primefaces-aristo/theme.css"; 
    } 
} 

public String getCsspath() { 
    return csspath; 
} 

public String getSelectedCss(){ 
    return selectedCss; 
} 

public void setSelectedCss(String selectedCss){ 
    this.selectedCss = selectedCss; 
} 

public void handleTest_combo_box_trans_groupValueChange() { 
    this.trigger_changeValue_refresh = true; 


if (this.trigger_changeValue_refresh) { 
    if (_tg != null) { 
     getTransactActivityType_ByLogCategory(_tg); 
    } 
    this.trigger_changeValue_refresh = false; 
    } 
} 

HTML:

<h:outputStylesheet name="#{pc_Test.csspath}" value="#{pc_Test.csspath}" /> 

<p:selectOneMenu value="#{pc_Test.selectedCss}"> 
<p:ajax update="form1" listener="#{pc_Test.changeValue}"/> 
<f:selectItem itemLabel="Green" itemValue="Green" /> 
<f:selectItem itemLabel="Pink" itemValue="Pink" /> 

Это мой обновленный код. У меня есть некоторые проблемы на странице JAVA, которая является частью изменения стоимости. Любая идея решить эту проблему?

Answer 1

Personnaly Я бы использовал управляемый компонент в области сеанса для хранения пользовательского выбора css.

@ManagedBean(name = "CSSManager") 
@SessionScoped 
public class CSSManager { 
    private String csspath = ""; 
    private String selectedCss = "Blue"; 

    public CSSManager() { 
     if(this.selectedCss.equals("Blue"))) { 
      this.csspath = "css/theme1.css"; 
     } else { 
      this.csspath = "css/theme.css"; 
     } 
    } 

    public void changeValue(){ 

    } 

    public String getCsspath() { 
     return csspath; 
    } 

    public String getSelectedCss(){ 
     return selectedCss; 
    } 

    public void setSelectedCss(String selectedCss){ 
     this.selectedCss = selectedCss; 
    } 
} 

И внутри HTML код:

<h:outputStylesheet name="#{CSSManager.csspath}" value="#{CSSManager.csspath}" /> 

Не забудьте поместить файл CSS внутри WebContent/ресурсов/CSS/папки.

Это должно сделать трюк

Update:

<p:selectOneMenu value="#{CSSManager.selectedCss}"> 
    <p:ajax update="Your Main Form" listener="#{CSSManager.changeValue}"/> 
    <f:selectItem itemLabel="Blue" itemValue="Blue" /> 
    <f:selectItem itemLabel="Green" itemValue="Green" /> 
</p:selectOneMenu> 

Answer 2

Я хотел бы использовать следующий подход:

Вы управлять выбранный CSS в ManagedBean и позволить пользователю выбрать его Одер ее желанию стиль с <p:selectOneMenu>. Так что ваша страница XHTML выглядит следующим образом:

<h:outputStylesheet library="css" name="#{myBean.stylesheet}" /> 

<p:selectOneMenu value="#{myBean.stylesheet}"> 
    <p:ajax event="itemSelect" update="main" /> 
    <f:selectItem itemLabel="Green" itemValue="theme.css" /> 
    <f:selectItem itemLabel="Blue" itemValue="theme1.css" /> 
</p:selectOneMenu> 

С помощью <p:ajax> вы можете запустить обновление на какой области (например, окружающих <h:form id="main">) и применить новый стиль. Я не знаю, правильно ли прослушивается itemSelect, но вы можете узнать, пытаясь.

Ваш соответствующий ManagedBean будет выглядеть следующим образом:

@ManagedBean 
@SessionScoped 
public class MyBean { 
    private String stylesheet; 

    //getter and setter 
} 

Это только подход, который я бы и, следовательно, не проверял. Но это способ, которым он мог бы работать. Надеюсь, я немного помогу тебе.