Infragistics
I hereby declare that this document is based on my personal experiences during the POC for a project.
When a web application is developed by a large team or teams spread over different locations, or for a large organization, where different vendors develop different parts of an application, to maintain consistency in look and feel of the application(s), there need to be some standard defined for the web pages.
This is made easy by some third party frameworks. JSF library provides framework for different components on the web page like labels, buttons and text boxes. Infragistics (http://www.infragistics.com) provides similar framework (Product Name: NetAdvantage for JSF) for chart, grid, tab, tree etc structures.
Here we will see how charts (pie and column) can be created and how their properties can be managed through style sheets (.css).
2.2 IntendedReaders
This document is targeted at readers who would be developing code in java/j2ee and would want to create charts dynamically on the web pages based on the data available in the backing bean.
This document is not intended to be reference document on NetAdvantage for JSF by Infragistics. It is simply a documentation of my learning during my work for POC in a project. NetAdvantage for JSF offers more controls than described here.
The user should have NetAdvantage for JSF 2007 Volume 1 on his machine. Visithttp://www.infragistics.comfor the product. Installation guide is provided with the installation. He should also have JDK installed on his machine. My machine had JDK1.5 and NetBeans5.0 as IDE fromhttp://www.netbeans.org. The desktop’s O/S being Windows XP Professional.
- Infragistics
- NetAdvantage for JSF
- JSF
- J2EE
- Chart
- Web
- Style sheet
Install JDK and NetBeans on machine. If you have NetBeans less than 5.0, add JSF libraries (jsf-api.jarandjsf-impl.jar) on machine and have them in the classpath.Crate a new Web Application project in the IDE. If you intend to work for trial only, it is prudent to work in index.jsp or welcomeJSF.jsp which is created by default.
We will create a tabbed structure inwelcomeJSF.jspwherein one tab has pie chart that binds to a bean (ChartBean) and another tab has column chart that binds to another bean (ChartBean1).
Add following line(s) to the jsp if not already present.
<%@ page contentType="text/html" language="java"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="ig" uri="http://www.infragistics.com/faces/netadvantage"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Add<html>, <head>, <title>, <meta>, <body>tags as required by the HTML page. Add following line to point the JSF components to correct style sheet. This stylesheet is applied only to JSF components and not to the NetAdvantage components. Style sheets that are applied to the NetAdvantage components are explained in following sections.
<link href="resources/default.css" _fcksavedurl="resources/default.css" rel="stylesheet" type="text/css">
resources/default.cssis relative path of .css file on my machine.
Now we start with creating tabs in the page. Add following lines to the file between<body>and</body>tags. Let’s call it Code1.
<f:view>
<h:form>
<ig:tabView>
<ig:tabItem value="First Tab">
<h:outputText value="This is First Tab"/>
</ig:tabItem>
<ig:tabItem value="Disabled Tab" disabled="true">
<h:outputText value="This text will never be seen"/>
</ig:tabItem>
<ig:tabItem value="Second Tab">
<h:outputText value="This is Second Tab"/>
</ig:tabItem>
</ig:tabView>
</h:form>
</f:view>
Compile and Run (Press F6 for NetBeans). This is how the page looks like now. If you want to know more about the URL, refer Addendum A.
Let us now create a Pie Chart in the First Tab. Before that, let us see how we can change the appearance of charts once created. The NetAdvantage product has some themes defined. One can see those themes inweb esourcesinfragistics hemesfolder in the project folder.
Each theme has images for grid, tab, tree, chart etc components and a style sheet for each of the component. We would be interested in style sheet for charts i.e.igf_chart.css.
Blue is the default theme. One can change the theme by changing (or adding) following line inweb.xml. Here I have changed theme to green.
<context-param><param-name>com.infragistics.faces.THEME</param-name><param-value>green</param-value></context-param>
How about trying to create our own themes? Some colorful images and a default .css is what are required!!
Add following code in place of<h:outputText value="This is First Tab"/>line in the Code1.
<ig:chart chartType="pie" id="chart1" projectionType="2d" style="width: 400; height: 400" binding="#{chartBean.chartComponent}" dataPointListener="#{chartBean.processDataPoint}" >
<ig:caption position="top" caption="Pie Chart" />
<ig:series dataSource="#{chartBean.data}" dataMapping="value: data; tooltipCaption: caption; markerCaption: label;" markerCaptionVisible="true"/>
</ig:chart>
Lets look at<ig:chart.In the above code, the chart type is specified as pie. Theidis chart1. Id of each chart has to be different than other.styleattribute specifies width and height of chart. In NetAdvantage, one can specify appearance of a component with attribute “style” and define different attributes inside it, or specify class name in “styleClass” attribute and have that class in the style sheet of applied theme. We will see an example ofstyleClassin the column chart section. Projection type is2d. It could be3dalso. In case of 3d projection the pie looks like cylinder. One needs to specifyperspectiveandrotationattributes for 3D charts.
bindingspecifies that this chart would bind to chart component of theChartBeanclass. HeregetChartComponentmethod ofChartBeanclass would be called to get the chart component.
dataPointListenerattributes specifies which method ofChartBeanwould be called upon clicking any data point on the chart.
<ig:captionis self explanatory.
<ig:seriesis the actual data that is being displayed in form of chart. The explanation below would be clearer once we go thru the java class section (Section 6.2, Creating backing bean).dataSourcespecifies thatgetDatamethod ofChartBeanwould be called to get the data for the chart.dataMappingspecifies how each sector of the pie is being displayed. For value of each sector,getDatamethod would be called on each of the objects in the list returned bygetDatamethod ofChartBean.
getDatamethod ofChartBeanreturns List ofRowobjects. And for value of each sector,getDatamethod ofRowclass is called. SimilarlygetCaptionandgetLabelmethods ofRowobjects are called to gettoolTipCaptionandmarkerCaptionrespectively.
markerCaptionVisiblespecifies that the caption should visible or not. In this case it will be visible and contain value returned bygetLabelmethod as specified indataMappingattribute. IfmarkerCaptionVisibleis not specified, caption is not visible.
In the Source Package folder in NetBeans, create a new package and write supporting bean there. I have created package calledchartand have a classChartBeanas supporting bean. Focus being more on creation of chart, the data is generated in the bean itself, rather than some DAO class and Database. The bean needs to be registered in thefaces-config.xmlfile inweb-infdirectory.
Code is as below.
package chart;
import com.infragistics.faces.chart.component.IChartAttributes;
import com.infragistics.faces.chart.enumeration.BulletType;
import com.infragistics.faces.chart.event.DataPointEvent;
import com.infragistics.faces.chart.helper.ChartAttributesHelper;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
public class ChartBean { //this is the class that binds to chart object
private UIComponent chartComponent;
public class Row { // class that holds the data
private Float data = null;
public Row(Float data) { // constructor of data class
this.data = data;
}
//following are the methods of data class. Each one is called for dataMapping attribute of ig:series tag
public Float getData() {return data;}
public String getCaption() { return Float.toString(data); }
public Object getLabel() { return Float.toString(data); }
}
/** Creates a new instance of ChartBean */
public ChartBean() {
}
// methods of Chart to get chart object, getting the data for chart and to handle click event
public UIComponent getChartComponent() {
// called when binding chart to chart tag
return chartComponent;
}
public void setChartComponent(UIComponent chartComponent) {
this.chartComponent = chartComponent;
}
public List getData() {
List objList = new ArrayList();
int cnt = 5;
for(int i=1; i<=cnt; i++) {
double y=10.0*Math.random();
objList.add(new Row(Float.valueOf((float)y)));
}
return objList;
}
public void processDataPoint(DataPointEvent dataPointEvent) {
// called when clicked any sector pie chart
IChartAttributes dataPoint = dataPointEvent.getDataPoint();
Number value = ChartAttributesHelper.getValue(dataPoint);
dataPoint.setTooltipCaption("Value : " + value.toString());
}
}
As the theme applied is green, we need to editigf_chart.cssinweb esourcesinfragistics hemesgreenfolder. There are some classes defined by default in the style sheet and we can create custom classes. We will see custom classes in Column Chart’s sections (section 7). Below are the relevant classes from style sheet for this chart.
.chart {
border: 3 solid #ffff00; padding: 2; /*’solid’ can be ‘dotted’ also*/
background: #000000 vertical #ffffff
/*This means vertical gradient starting from black to white*/
/*In place of vertical, you can write horizontal for horizontal gradient*/
}
.pane {
margin: 2; border: solid 3 orange; padding: 2;
background: #0000FF #000000 vertical /*such specificatoin is also ok*/
}
.caption {
margin: 2; padding: 4; border: solid 0 #006600;
color: #00FF00; font-family: Arial; font-size: 16; font-weight: bold;
background: red /*standard color names can be written in English also*/
}
.series {
color: black; font-family: verdana; font-size: 20;
border: 1 solid white; border-join-style: join-miter; border-cap-style: cap-round; background: #00ffff;
}
.series_max {
color: black; font-family: verdana; font-size: 20;
border: 1 solid white; border-join-style: join-miter; border-cap-style: cap-round; background: #ff00ff;
}
Here we see how these default classes reflect on the chart.
Note that in the stylesheet we specify styling forseriesandseries_maxonly. Styling for all the data between these is automatically decided by the framework.
Note - Java class need to be compiled every time there is any change to NetAdvantage stylesheet.
Let us now create a Column Chart in the Second Tab. Theme, once applied, is applied to entire application. Hence it would be green in this case also. The style sheets would have some extra classes for axis, grid etc which are essential parts of this type of charts. Also we will see custom styling classes in this section.
Add following code in place of<h:outputText value="This is Second Tab"/>line in the Code1.
<ig:chart chartType="Column" id="chart2" projectionType="2d" style="width: 400; height: 400" binding="#{chartBean1.chartComponent}" dataPointListener="#{chartBean1.processDataPoint}" >
<ig:caption position="top" caption="Column Chart" />
<ig:axis type="x" autoRange="true" autoRangeSnap="false" autoTickMarks="false" autoGridLines="true" >
<ig:tickMark value="0" tickCaption="0:00" />
<ig:tickMark value="1" tickCaption="1:00" />
<ig:tickMark value="2" tickCaption="2:00" />
<ig:tickMark value="3" tickCaption="3:00" />
<ig:tickMark value="4" tickCaption="4:00" />
<ig:tickMark value="5" tickCaption="5:00" styleClass="tickMarkClass"/>
<ig:tickMark value="6" tickCaption="6:00" />
</ig:axis>
<ig:axis type="y"autoRange="true" autoRangeSnap="true" autoTickMarks="true" autoGridLines="true"/>
<ig:series shapeType="chamfered" dataMapping="value: data; tooltipCaption: caption; markerBulletStyleClass: markerClass;" markerBulletVisible="true" dataSource="#{chartBean1.data}" />
</ig:chart>
Things differ not much from pie chart in<ig:charttag, except for chart type is nowColumn. And that the data binds to another class, calledChartBean1.<ig:captionis same as pie chart.
<ig:axistags specify x and y axis for the chart. Here I have specified appearance of x axis and left y axis’s style to be created automatically by the framework.
<ig:serieshas three things to notice.shapeTypedetermines how the corners of the columns would be seen.markerBulletStyleClassspecifies which class in stylesheet would determine appearance of marker bullets. And then we specify visibility of Marker Bullet on chart.tickMarkClassdetermines the appearance of the tick mark. I have specified this class only for one tick mark to distinguish it from others.
In the same package as
mentioned for pie chart write supporting beanChartBean1.Again,
the data is generated in the bean itself, rather than some data access object
and database. The bean needs to be registered in the
faces-config.xmlfile
inweb-infdirectory.
Code is as below.
package chart;
import com.infragistics.faces.chart.component.IChartAttributes;
import com.infragistics.faces.chart.enumeration.BulletType;
import com.infragistics.faces.chart.event.DataPointEvent;
import com.infragistics.faces.chart.helper.ChartAttributesHelper;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
public class ChartBean1 {
private UIComponent chartComponent;
public class Row {
private Float data = null;
public Row(Float data) {
this.data = data;
}
public Float getData() {return data;}
public String getCaption() { return String.valueOf(Math.floor(data.floatValue()*100.0)/100.0); }
public Object getMarkerClass() { if (data>2) return "redMarkerClass";
else return "greenMarkerClass";
}
}
/** Creates a new instance of ChartBean1 */
public ChartBean1() {
}
public UIComponent getChartComponent() {
return chartComponent;
}
public void setChartComponent(UIComponent chartComponent) {
this.chartComponent = chartComponent;
}
public void processDataPoint(DataPointEvent dataPointEvent) {
IChartAttributes dataPoint=dataPointEvent.getDataPoint();
Number value=ChartAttributesHelper.getValue(dataPoint);
dataPoint.setTooltipCaption("Value : " + value.toString());
}
public List getData() {
List objList = new ArrayList();
int cnt = 5;
for(int i=0; i<=cnt; ++i) {
double y=10.0*Math.random();
Float x=10.0f*i/cnt;
objList.add(new Row(Float.valueOf((float)y)));
}
return objList;
}
}
Most of the classes that are applicable to the column chart are the same as described for the pie chart. I have changed values in some of the classes so the usage of them is more apparent.
e.g. background of the caption is now yellow, border of the pane is dotted, gradient of the chart and panel is changed. Gradient is now horizontal for Pane. Visibility of marker caption is not specified, hence that is not seen on the chart.
The classes which are relevant here in addition to the ones explained for pie chart are mentioned below.
.axis {
border: solid #ff0000
}
.axisGrid {
border: solid #0000ff
}
.axisTick {
color shadow-color: #ffff00; font-family: Verdana; font-size: 10;
color: #ffff00
border: solid #ffff00;
}
.series {
color: black; font-family: verdana; font-size: 20;
border: 1 solid white; border-join-style: join-miter; border-cap-style: cap-round; background: #ffff00;
}
.series_max {
color: black; font-family: verdana; font-size: 20;
border: 1 solid white; border-join-style: join-miter; border-cap-style: cap-round; background: #ffff00;
}
.redMarkerClass {
background: #ff0000;
}
.greenMarkerClass {
background: #00ff00;
}
.tickMarkClass{
color: red;
}
tickmarkClass,redMarkerClassandgreenMarkerClassare custom styling classes.
Here we see how these default classes reflect on the chart.
Note that based on the value of the data, name of the marker style class is returned as property of the data from java code (if (data>2) return "redMarkerClass"; else return "greenMarkerClass";). That style class name is mapped tomarkerBulletStyleClassproperty of<ig:series. The style specified in that class (redMarkerClassorgreenMarkerClassas defined in.cssfile) is applied to marker and is rendered on the page.
Behavior of theseriesandseries_maxclass here is different than seen in Pie charts. Background of columns does not change according toseriesandseries_maxbackgrounds. Rather, the rendered color is somewhere in middle of the colors specified inseriesandseries_max. To avoid uncontrolled background, I havespecified yellow (#ffff00) in bothseriesandseries_max.
There are more chart types than Pie and Column e.g. Line and RangeColumn. It is also possible to combine more than one series in one chart. Even different chart types can be combined together, e.g. line and column.
The NetAdvantage product is evolving. Each of the tags used here has more attributes than mentioned in this doc. It still can be explored further.
The URL(http://localhost:8084/NetAdvantageTester/welcomeJSF.faces) has following components.
The web server (Tomcat, bundled with NetBeans) is running on local host.
8084 is the default port on which server is listening.
NetAdvantageTester is the name of the project I created.
welcomeJSF.jsp is the name of jsp I created.
Wondering why .faces instead of .jsp? It is because, that is what I have specified in properties of project while creating this project. See below-
10. References
Book(s):
Java Docs of NetAdvantage that is part of installation
User Guide of NetAdvantage that is part of installation
RSS feed