How Do I Dynamically Change Styles Based on Selection Criteria in JSF?

Wednesday, June 22, 2011

How Do I Dynamically Change Styles Based on Selection Criteria in JSF?

A recent JUG Meeting featured a fantastic speaker, Arun Gupta, from Oracle. During Arun's Java EE 6 with NetBeans tutorial, a member of the JUG asked a question.

How Do I Dynamically Change Styles Based on Selection Criteria in JSF?

Without disrupting the tutorial, I decided to write a quick application which would change style based on a criteria. In this case, I used the customers name. Specifically, I have a <h:selectOneMenu/> which allows you to pick a letter. This letter changes the style based on whether a customer name begins with the letter. Admittedly, this is contrived, but it demonstrates a point.

The NetBeans project files can downloaded here: VIPCustomers.zip

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!--
 Copyright 2011 Blue Lotus Software, LLC.
 Copyright 2011 John Yeary.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 under the License.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
        <title>VIP Customer Selection</title>
    </h:head>
    <h:body>
        <h:form>
            <h:selectOneMenu value="#{indexBean.vip}" onchange="submit()">
                <f:selectItems value="#{indexBean.letters}"/>
            </h:selectOneMenu>
        </h:form>
        <ul>
            <ui:repeat value="#{indexBean.customers}" var="customer">
                <li>
                    <h:outputText value="#{customer.name}"
                                  style="#{customer.name.startsWith(indexBean.vip) ? 'color:red': 'color:black'}"/>
                </li>
            </ui:repeat>
        </ul>
    </h:body>
</html>

IndexBean.java

/*
 *  Copyright 2011 Blue Lotus Software, LLC.
 *  Copyright 2011 John Yeary <jyeary@bluelotussoftware.com>.
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 *  under the License.
 */
/*
 * $Id: IndexBean.java 365 2011-06-23 03:06:01Z jyeary $
 */
package beans;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.enterprise.context.SessionScoped;
import javax.faces.model.SelectItem;
import javax.inject.Named;
import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import model.Customer;

/**
 *
 * @author John Yeary <jyeary@bluelotussoftware.com>
 * @version 1.0
 */
@Named
@SessionScoped
public class IndexBean implements Serializable {

    private static final long serialVersionUID = 1L;
    @PersistenceContext
    private EntityManager em;
    private String vip = "B";

    @SuppressWarnings("unchecked")
    public List<Customer> getCustomers() {
        return (List<Customer>) em.createNamedQuery("Customer.findAll").getResultList();
    }

    public String getVip() {
        return vip;
    }

    public void setVip(String vip) {
        this.vip = vip;
    }

    public List<SelectItem> getLetters() {
        List<SelectItem> items = new ArrayList<SelectItem>();
        for (int i = 65; i < 91; i++) {
            items.add(new SelectItem(String.valueOf((char) i), String.valueOf((char) i)));
        }
        return items;
    }
}

1 comments :

Hanan Ahmed said...: great Post.thanks try to write about Primfaces as your posts in rich faces; 24 January, 2013 08:43

Java Evangelist John Yeary

Pages

Wednesday, June 22, 2011