JSF Logic: Dymanically display images and change text style

Presenting data in different styles according to its logic is always required in web application. A typical example will be the online book store, if the quantity of one type of book is below 100, then it should be displayed in bold red to alarm people, otherwise normal style will be used. Sometimes, it is also necessary to display images dynamically based on business logic, for example, the online live soccer match should reflect excactlly  what is happening in the field, like a yellow card should be displayed next to a player's name if he gets one. Here is a sample:



For this sample, the key issue is to use binding attribute of dataTable, and rendered, style attributes of graphicImage and outputText respectively. Binding means binding the instance of current dataTable to a UIData.

OK, let's take a look at the JSP source code:

<hx:dataTableEx id="tableEx1" value="#{pc_TestPortletView.orders.data}" var="vardata" ..  binding="#{pc_TestPortletView.orderStyle.listData}">

<hx:columnEx id="columnEx1">
<f:facet name="header">
<h:outputText styleClass="outputText" value="Order_details" id="text1"></h:outputText>
</f:facet>   
                
<h:outputText id="textOrder_details1" value="#{vardata.order_details}"  styleClass="outputText"style="#{pc_TestPortletView.orderStyle.boldStyle}">
</h:outputText>

<hx:graphicImageEx id="imageEx1" styleClass="graphicImageEx" value="theme/yellow.gif"rendered="#{pc_TestPortletView.orderStyle.displayYellow}">
</hx:graphicImageEx>
</hx:columnEx>

We use the binding attribute to bind the current dataTable instance to a UIData which is listData in this case, and use style and rendered attributes to control the appearance. They are all integrated into the OrderStyle javabean:

public class OrderStyle {

     UIData listData = new UIData();

     boolean displayYellow;

               String boldStyle;

        public String getBoldStyle() {

            int order_id =((Order)(listData.getRowData())).getOrder_id();

            if(order_id==0||order_id==2||order_id==3)

                  boldStyle ="font-weight: bold";

                  //boldStyle="boldSytle";

            else

                  boldStyle = "font-weight: 400";

                  //boldStyle="normalStyle";

            return boldStyle;

      }

      public void setBoldStyle(String boldStyle) {

            this.boldStyle = boldStyle;

      }

public boolean isDisplayYellow() {

            int order_id =((Order)(listData.getRowData())).getOrder_id();

            if(order_id==0||order_id==1||order_id==4)

                  displayYellow= true;

            else

                  displayYellow= false;

            return displayYellow;

      }

      public void setDisplayYellow(boolean displayYellow) {

            this.displayYellow = displayYellow;

      }

public UIData getListData() {

            return listData;

      }

      public void setListData(UIData listData) {

            this.listData = listData;

      }

    ...

}

That's all! (Notice: In this way, the style is applied only to the column, not to the row.)

Now you may ask, could we change the row background* based on logic? The answer is yes. Please keep tracking which is coming soon...

* After test, the way we are using to change the row background according to logic is only suitable to the data table without paging. Here is the code we use, we bind the rowClasses attribute of dataTable to the variable rowColorStyle:

<hx:dataTableEx id="tableEx1"

value="#{pc_TestPortletView.orders.data}"var="vardata"

                        styleClass="dataTableEx" headerClass="headerClass"

                        rowClasses="#{pc_TestPortletView.rowColorStyle}"

                        border="0" cellpadding="2"

                        cellspacing="0"

                        rows="15">

to get the row style, getRowStyle function in OrdersRowStyle is invoked:

public String getRowColorStyle() {

OrdersRowStyle rowStyle = new OrdersRowStyle();

            rowColorStyle = rowStyle.getRowStyle(getOrders().getData());

            returnrowColorStyle;

      }

Here is the OrdersRowStyle class:

 

 

publicclass OrdersRowStyle {

      public String getRowStyle(Order[] order)

      {

            String rowStyle = ""; 

            for(int i=0; i<order.length;i++)

            {

                if(order[i].getOrder_id()==0||order[i].getOrder_id()==3)

                        rowStyle +="darkBrownColor,";

                  else

                        rowStyle +="brownColor,";

            }

            System.out.println("rowStyle: "+rowStyle);

            return rowStyle;

      }

}

The problem is with paging, the row style is repeated on the next pages, like:

 Go to the next page, you will see the same row style is used: