Fusion Charts intergration with JSF

[Fusion Charts intergration with JSF]

Hi All,

 

I am beginner in FusionChart. I was trying to use your example but I am getting this error while rendering <fc:render> tag.

java.lang.ClassCastException: javax.faces.component.UIViewRoot cannot be cast to com.fusioncharts.jsf.UIChart

 

Can you please help me out, its extremely urgent.

 

Many thanks in advance.

 

Thanks,

Saurav

 

Hi,I have tried it out in my application. To use FusionCharts with JSF, you would need to create a Component. I created a component ChartTag. Let me describe how you have to do it. ( I am assuming that you have a JSF application atleast an empty one)

 

1. Create a charts.tld file in WEB-INF folder with the following contents:

 

</P><FONT size=2><P><?xml version="1.0" encoding="UTF-8"?> </P><P><!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN" "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd"> </P><P><taglib> </P><P><tlib-version>1.0</tlib-version> </P><P><jsp-version>1.2</jsp-version> </P><P><short-name>fc</short-name> </P><P><uri>http://localhost/</uri> </P><P><tag> </P><P><name>fusioncharts</name> </P><P><tag-class>charts.ChartTag</tag-class> </P><P><body-content>JSP</body-content> </P><P><attribute></P><P><name>filename</name></P><P></attribute></P><P><attribute></P><P><name>url</name></P><P></attribute></P><P><attribute></P><P><name>xml</name></P><P></attribute> </P><P><attribute></P><P><name>chartId</name></P><P></attribute></P><P><attribute></P><P><name>width</name></P><P></attribute></P><P><attribute></P><P><name>height</name></P><P></attribute></P><P><attribute></P><P><name>debugMode</name></P><P></attribute></P><P><attribute></P><P><name>registerWithJS</name></P><P></attribute></P><P></tag> </P><P></taglib> </FONT></P><P>

 

2. Modify faces-config.xml present in WEB-INF folder to have the following text:

 

</P><FONT size=2><P><?xml version="1.0" encoding="UTF-8"?></P><P><!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"</P><P>"http://java.sun.com/dtd/web-facesconfig_1_1.dtd"></P><P><faces-config></P><P><component></P><P><component-type>chart</component-type></P><P><component-class>charts.UIChart</component-class></P><P></component></P><P><lifecycle/></P><P><application></P><P><locale-config/></P><P></application></P><P><factory/></P><P></faces-config></P></FONT><P>

 

3. Now we need to write the java classes for charts.ChartTag and charts.UIChart. Create a folder called charts and write the following java classes:

 

ChartTag.java

 

<P>package charts;
import javax.faces.component.UIComponent; 
import javax.faces.webapp.UIComponentTag; 
public class ChartTag extends UIComponentTag{ <P>String chartId;
String filename;
String xml;
String url;
String width;
String height;
String debugMode;
String registerWithJS;

public String getChartId() { 
 return chartId;
}<P> public void setChartId(String id) {
 this.chartId= id;
}
public String getFilename() { 
 return filename;
}<P> public void setFilename(String filename){
 this.filename= filename;
}
public String getXml() { 
 return xml;
}<P> public void setXml(String xml){
 this.xml= xml;
}
public String getUrl() { 
 return url;
}<P> public void setUrl(String url) {
 this.url= url;
}
public String getWidth() { 
 return width;
}<P> public void setWidth(String width) {
 this.width= width;
}
public String getHeight() { 
 return height;
}<P> public void setHeight(String height) {
 this.height= height;
}
public String getDebugMode() { 
 return debugMode;
}<P> public void setDebugMode(String debugMode) {
 this.debugMode= debugMode;
}
public String getRegisterWithJS() { 
 return registerWithJS;
}<P> public void setRegisterWithJS(String registerWithJS) {
 this.registerWithJS= registerWithJS;
}<P>public void release() { 
// the super class method should be called 
super.release(); 
chartId=null;
filename=null;
xml=null;
url=null;
width=null;
height=null;
debugMode=null;
registerWithJS=null;
} 
protected void setProperties(UIComponent component) {
// the super class method should be called 
super.setProperties(component); 
if(chartId != null)
component.getAttributes().put("id", chartId);
if(filename != null)
component.getAttributes().put("filename", filename);<P>if(xml!=null)
component.getAttributes().put("xml", xml);
if(url!=null)
component.getAttributes().put("url", url);
if(width!=null)
component.getAttributes().put("width", width);
if(height!=null)
component.getAttributes().put("height", height);
if(debugMode!=null)
component.getAttributes().put("debugMode", debugMode);
if(registerWithJS!=null)
component.getAttributes().put("registerWithJS", registerWithJS);<P>} 
public String getComponentType() { 
return "chart"; 
} 
public String getRendererType() {
// null means the component renders itself 
return null; 
} 
} <P>

 

UIChart.java

 

<P>package charts;
import java.io.IOException;
import javax.faces.component.UIOutput;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
public class UIChart extends UIOutput {
public void encodeBegin(FacesContext context) throws IOException {
 ResponseWriter writer = context.getResponseWriter();
 String chartId = (String)getAttributes().get("id");</P><P>  writer.startElement("div", this);
 writer.writeAttribute("id", chartId+"Div" , null);</P><P>  writer.writeAttribute("align","center",null); 
 writer.writeText("Chart.",null); <P>  writer.endElement("div");
<P> String chartSWF= (String)getAttributes().get("filename");
String url= (String)getAttributes().get("filename");
String xml= (String)getAttributes().get("xml");
String chartWidth= (String)getAttributes().get("width");
String chartHeight= (String)getAttributes().get("height");</P><P> String debugMode= (String)getAttributes().get("debugMode");
int debugModeInt = boolToNum(new Boolean(debugMode));</P><P> String registerWithJS= (String)getAttributes().get("registerWithJS");
int regWithJSInt = boolToNum(new Boolean(registerWithJS));<P>writer.startElement("script",this);
writer.writeAttribute("type","text/javascript",null);  
writer.writeText("var chart_"+chartId+" = new FusionCharts('"+chartSWF+"', '"+chartId+"', '"+chartWidth +"', '"+chartHeight+"', '"+ debugModeInt+"', '"+regWithJSInt+"');",null);<P>
if (xml==null || xml.equals(""))
writer.writeText("chart_"+chartId+".setDataURL(""+url+"");",null);
else 
writer.writeText("chart_"+chartId+".setDataXML(""+xml+"");",null);<P>// Finally render the chart
writer.writeText("chart_"+chartId+".render('"+chartId+"Div');",null);
}<P> public void encodeEnd(FacesContext context) throws IOException {
 ResponseWriter writer = context.getResponseWriter();
 writer.endElement("script");
}
/**
    * Converts a Boolean value to int value<br>
    * 
    * @param bool Boolean value which needs to be converted to int value 
    * @return int value correspoding to the boolean : 1 for true and 0 for false
    */
  public int boolToNum(Boolean bool) {
int num = 0;
if (bool.booleanValue()) {
    num = 1;
}
return num;
}
}
<P>

 

4. After writing the java classes, we now have to use the new component in our JSF. Here is how we do that:

 

</P><FONT size=2><P><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> </P><P><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> </P><P><%@ taglib uri="http://localhost/" prefix="fc" %> </P><P><html> </P><P><head> </P><P><title>Show Custom Component</title> </P><P><script type="text/javascript" src="FusionCharts/FusionCharts.js"></P><P></script></P><P></head> </P><P><body> </P><P><f:view> </P><P><f:verbatim>This is JSF example</f:verbatim> </P><P><fc:fusioncharts chartId="MyChart" filename="FusionCharts/Column3D.swf" width="700" height="300" xml="<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' formatNumberScale='0' showBorder='1'><set label='Jan' value='462' /><set label='Feb' value='857' /><set label='Mar' value='671' /><set label='Apr' value='494' /><set label='May' value='761' /><set label='Jun' value='960' /><set label='Jul' value='629' /><set label='Aug' value='622' /><set label='Sep' value='376' /><set label='Oct' value='494' /><set label='Nov' value='761' /><set label='Dec' value='960' /></chart>" debugMode="false" registerWithJS="false"> </P><P></fc:fusioncharts> </P><P></f:view> </P><P></body> </P><P></html> </P></FONT><P>

 

Do not forget to include FusionCharts.js present in the FusionCharts folder. This folder will also contain the swf files required to generate the chart. I have used the xml directly here. you could give the url to the xml also.

 

Here I have hard-coded the xml, you could get the xml from the backing bean also.

 

In case you have problems with the above code, please feel free to ask questions.

 

Srividya