JSF 2.0, primefaces 2.0 linechart doesn't appear

UI Components for JSF
Post Reply
ivan
Posts: 13
Joined: 17 Mar 2010, 23:06

17 Mar 2010, 23:58

Hello everybody,

Like Im new in this forum, first i would like to say hello to everybody.
I'im working on a project based on JSF 2.0 technology. I need to display a chart in my page (.xhtml) and i wanted to use the linechart from primefaces 2.0 library but the chart doesn't appear in my page.
In another page i display a tree structure with p:tree and p:treeNode component and it works fine.

My pom.xml

Code: Select all

		<!-- JSF Dependencies -->
                 <dependency>
                    <groupId>com.sun.faces</groupId>
                    <artifactId>jsf-api</artifactId>
                    <version>2.0.2</version>
                </dependency>

                <dependency>
                    <groupId>com.sun.faces</groupId>
                    <artifactId>jsf-impl</artifactId>
                    <version>2.0.2</version>
                </dependency>

<!--  Primefaces -->
		<dependency>
		
			<groupId>org.primefaces</groupId>
			<artifactId>primefaces</artifactId>
			<version>2.0.1-SNAPSHOT</version>
		</dependency>
My web.xml

Code: Select all

 <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>

    <servlet>
		<servlet-name>PrimeFaces Resource Servlet</servlet-name>
		<servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>PrimeFaces Resource Servlet</servlet-name>
		<url-pattern>/primefaces_resource/*</url-pattern>
	</servlet-mapping>
In my .xhtml page, i use the linechart example from primefaces-showcase

Can anybody help me to solve my problem?
Top
cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:
Contact cagatay.civici

18 Mar 2010, 11:57

Hi Ivan,

Welcome to PrimeFaces and forum.

Maybe not related but first thing I've noticed is the jsf dependencies, I think the common dependency maven description is (instead of com.sun -> javax.faces);

Code: Select all

<dependency>
    <groupId>javax.faces</groupId>
    <artifactId>jsf-api</artifactId>
    <version>2.0.2-FCS</version>
</dependency>
<dependency>
    <groupId>javax.faces</groupId>
    <artifactId>jsf-impl</artifactId>
    <version>2.0.2-FCS</version>
</dependency>
Also can you post your linechart code and state which browser do you have?
Top
ivan
Posts: 13
Joined: 17 Mar 2010, 23:06

18 Mar 2010, 14:50

Hi Cagatay,

Thanks for the quick reply. I test my web application with firefox version 3.6 with tomcat 6.0.20 server.

Here again all pom.xml

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.webinspire</groupId>
	<artifactId>WebInspire</artifactId>
	<packaging>war</packaging>
	<name>WebInspire Maven Webapp</name>
	<version>0.0.1-SNAPSHOT</version>
	<description />
	<build>
		<sourceDirectory>${basedir}/java</sourceDirectory>
		<outputDirectory>${basedir}/webapp/WEB-INF/classes</outputDirectory>
		<resources>
			<resource>
				<directory>${basedir}/java</directory>
				<excludes>
					<exclude>**/*.java</exclude>
				</excludes>
			</resource>
		</resources>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<inherited>true</inherited>
				<configuration>
					<source>1.6</source>
					<target>1.6</target>
				</configuration>
			</plugin>


		</plugins>
	</build>
	<dependencies>

		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>1.2.14</version>
		</dependency>

		<dependency>
			<groupId>org.apache.openejb</groupId>
			<artifactId>javaee-api</artifactId>
			<version>5.0-1</version>
			<scope>provided</scope>
		</dependency>

		<!-- JSF Dependencies -->
		<dependency>
			<groupId>javax.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.0.2-FCS</version>
		</dependency>

		<dependency>
			<groupId>javax.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.0.2-FCS</version>
		</dependency>


		<!-- For Servlets -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.1</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
		</dependency>

		<!--The JDBC-Connectors-->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.5</version>
		</dependency>
		<dependency>
			<groupId>postgresql</groupId>
			<artifactId>postgresql</artifactId>
			<version>8.4-701.jdbc4</version>
		</dependency>
		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-annotations</artifactId>
			<version>3.4.0.GA</version>
		</dependency>

		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate</artifactId>
			<version>3.2.5.ga</version>
		</dependency>

		<dependency>
			<groupId>c3p0</groupId>
			<artifactId>c3p0</artifactId>
			<version>0.9.1</version>
		</dependency>

		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-validator</artifactId>
			<version>4.0.2.GA</version>
		</dependency>

		<!--  Primefaces -->
		<dependency>

			<groupId>org.primefaces</groupId>
			<artifactId>primefaces</artifactId>
			<version>2.0.1-SNAPSHOT</version>
		</dependency>



		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>1.4.2</version>
		</dependency>

		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-log4j12</artifactId>
			<version>1.4.2</version>
		</dependency>

	</dependencies>
	
	<!--  Repositories -->
	<repositories>
		<repository>
			<id>maven2-repository.dev.java.net</id>
			<name>Java.net Repository for Maven</name>
			<url>http://download.java.net/maven/2/</url>
			<layout>default</layout>
		</repository>

		<repository>
			<id>apache</id>
			<name>Other projects</name>
			<url>http://people.apache.org/maven-snapshot-repository</url>
		</repository>


		<repository>
			<id>maven2-repository.jboss.com</id>
			<name>Java.net Repository for JBoss</name>
			<url>http://repository.jboss.com/maven2/</url>
		</repository>


		<repository>
			<id>prime-repo</id>
			<name>Prime Technology Maven Repository</name>
			<url>http://repository.prime.com.tr/</url>
			<layout>default</layout>
		</repository>

	</repositories>
</project>
My web.xml

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	version="2.5"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>


	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>

	<servlet>
		<servlet-name>PrimeFaces Resource Servlet</servlet-name>
		<servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>PrimeFaces Resource Servlet</servlet-name>
		<url-pattern>/primefaces_resource/*</url-pattern>
	</servlet-mapping>


	<context-param>
		<param-name>javax.faces.INTERPRET_EMPTY_STRING_SUBMITTED_VALUES_AS_NULL</param-name>
		<param-value>true</param-value>
	</context-param>
</web-app>
My .xhtml file with linechart code

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui">
	<head>
		<title>MyTest</title>
	</head>
	<body>
		<h1>
			<h:outputText value="Test" />
		</h1>

		<h:form id="form">

					<p:lineChart value="#{theraBean.births}" var="birth"
					xfield=" #{birth.year}" style="chartStyle">
					<p:chartSeries label="Boys" value="#{birth.boys}" />
					<p:chartSeries label="Girls" value="#{birth.girls}" />
				</p:lineChart>
				<p:messages></p:messages>
		</h:form>
	</body>
</html>
My theraBean

Code: Select all


import java.util.ArrayList;

import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="theraBean")
@SessionScoped
public class TherapyProgressBean {
	
	private List<Birth> births;
	
	public TherapyProgressBean(){
		births=new ArrayList<Birth>();
			 births.add(new Birth(2004, 120, 52));  
			 births.add(new Birth(2005, 100, 60));  
			 births.add(new Birth(2006, 44, 110));  
			 births.add(new Birth(2007, 150, 135));  
			 births.add(new Birth(2008, 125, 120)); 


		
	}
	public List<Birth> getBirths() {
		System.out.println("**************************************** getBirths: "+births);
		return births;
	}

}
The class Birth is same as in the given example (primefaces->showcase->linechart)

The output:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!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">
	<head>
		<title>MyTest</title>
	</head>
	<body>
		<h1>Test
		</h1>
<form id="form" name="form" method="post" action="/WebInspire/Admin/therapyProgress.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />

<script type="text/javascript">YAHOO.widget.Chart.SWFURL = "/WebInspire/primefaces_resource/2.0.1-SNAPSHOT/yui/charts/assets/charts.swf"</script><script type="text/javascript">PrimeFaces.onContentReady("form:j_idt5", function() {
form_j_idt5_widget_data = [{year:" 2004",boys:120,girls:52},
{year:" 2005",boys:100,girls:60},
{year:" 2006",boys:44,girls:110},
{year:" 2007",boys:150,girls:135},
{year:" 2008",boys:125,girls:120}];
var form_j_idt5_widget_dataSource = new YAHOO.util.DataSource(form_j_idt5_widget_data);
form_j_idt5_widget_dataSource.responseType=YAHOO.util.DataSource.TYPE_JSARRAY;
form_j_idt5_widget_dataSource.responseSchema = {fields:["year","boys","girls"]};
var form_j_idt5_widget_seriesDef = [{displayName:'Boys', yField:'boys'},{displayName:'Girls', yField:'girls'}];
var yAxis = new YAHOO.widget.NumericAxis();
var xAxis = new YAHOO.widget.CategoryAxis();
form_j_idt5_widget = new YAHOO.widget.LineChart('form:j_idt5',form_j_idt5_widget_dataSource,{xField:'year',series:form_j_idt5_widget_seriesDef,expressInstall:'/WebInspire/primefaces_resource/2.0.1-SNAPSHOT/yui/assets/expressinstall.swf',style:chartStyle,xAxis:xAxis,yAxis:yAxis});
});
</script><div id="form:j_idt5" style="width:500px;height:350px"></div><div id="form:j_idt8" class="pf-messages"><div class="pf-messages-error"><span class="pf-messages-error-icon"></span><ul><li><span class="pf-messages-error-summary">Une ou plusieurs ressources partagent la cible 'head', mais aucun composant 'head' n'a été défini dans la vue.</span></li></ul></div></div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="1580413015942845240:5078254251588299265" autocomplete="off" />
</form>
	</body>
</html>
in the output, i print out error messages with the tag <p:messages/> and i get the message: Une ou plusieurs ressources partagent la cible 'head', mais aucun composant 'head' n'a été défini dans la vue.
It's in french but the meaning if I translate: many ressources share the same head target but no head component has been declared in the view.
Top
cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:
Contact cagatay.civici

18 Mar 2010, 15:29

You need to replace <head /> with <h:head /> as you are using JSF 2.0.
Top
ivan
Posts: 13
Joined: 17 Mar 2010, 23:06

18 Mar 2010, 16:03

Hi,

I tried this code:

my .xhtml page with h:head tag

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui">
	<h:head>

		<title>MyTest</title>
	</h:head>
	<body>
		<h1>
			<h:outputText value="Test" />
		</h1>

		<h:form id="form">

					<p:lineChart value="#{theraBean.births}" var="birth"
					xfield=" #{birth.year}" style="chartStyle">
					<p:chartSeries label="Boys" value="#{birth.boys}"/>
					<p:chartSeries label="Girls" value="#{birth.girls}"/>
				</p:lineChart>
				<p:messages></p:messages>
		</h:form>
	</body>
</html>
Now, no more error messages but still nothing about my chart, it doesn't appear!!!

Output code:

Code: Select all

<form id="form" name="form" method="post" action="/WebInspire/Admin/therapyProgress.xhtml" enctype="application/x-www-form-urlencoded">
<input name="form" value="form" type="hidden">
<script type="text/javascript">YAHOO.widget.Chart.SWFURL = "/WebInspire/primefaces_resource/2.0.1-SNAPSHOT/yui/charts/assets/charts.swf"</script><script type="text/javascript">PrimeFaces.onContentReady("form:j_idt8", function() {
form_j_idt8_widget_data = [{year:" 2004",boys:120,girls:52},
{year:" 2005",boys:100,girls:60},
{year:" 2006",boys:44,girls:110},
{year:" 2007",boys:150,girls:135},
{year:" 2008",boys:125,girls:120}];
var form_j_idt8_widget_dataSource = new YAHOO.util.DataSource(form_j_idt8_widget_data);
form_j_idt8_widget_dataSource.responseType=YAHOO.util.DataSource.TYPE_JSARRAY;
form_j_idt8_widget_dataSource.responseSchema = {fields:["year","boys","girls"]};
var form_j_idt8_widget_seriesDef = [{displayName:'Boys', yField:'boys'},{displayName:'Girls', yField:'girls'}];
var yAxis = new YAHOO.widget.NumericAxis();
var xAxis = new YAHOO.widget.CategoryAxis();
form_j_idt8_widget = new YAHOO.widget.LineChart('form:j_idt8',form_j_idt8_widget_dataSource,{xField:'year',series:form_j_idt8_widget_seriesDef,expressInstall:'/WebInspire/primefaces_resource/2.0.1-SNAPSHOT/yui/assets/expressinstall.swf',style:chartStyle,xAxis:xAxis,yAxis:yAxis});
});
</script><div id="form:j_idt8" style="width: 500px; height: 350px;"></div><div id="form:j_idt11" class="pf-messages"></div><input name="javax.faces.ViewState" id="javax.faces.ViewState" value="-7933656640264520164:4728574438364633666" autocomplete="off" type="hidden">
</form>


Do you have any other suggestions??
Top
cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:
Contact cagatay.civici

18 Mar 2010, 16:29

Can you see the lineChart here;

http://www.primefaces.org:8080/prime-sh ... eChart.jsf
Top
ivan
Posts: 13
Joined: 17 Mar 2010, 23:06

18 Mar 2010, 16:37

Hi,

Using firefox, i can. I see the chart of boys and girls.

Im asking myself if something is wrong with my browser (Firefox). Right now im upgrading my IE to IE8, to see if it works with IE8
Top
ivan
Posts: 13
Joined: 17 Mar 2010, 23:06

18 Mar 2010, 17:38

Even with IE8, I still have the same problem...no linechart!!!

Is it possible that there is a conflict with jars??? But I still don't know why the <p:tree> <p:treeNode> components work but not the <p:linechart>!!!

Other point:
In web.xml, we have:

<servlet>
<servlet-name>PrimeFaces Resource Servlet</servlet-name>
<servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>PrimeFaces Resource Servlet</servlet-name>
<url-pattern>/primefaces_resource/*</url-pattern>
</servlet-mapping>


in my webapp structure, should I have something like: Webapps\WebInspire\primefaces_resource file and inside all jars or scripts which are invoked???
Top
cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:
Contact cagatay.civici

18 Mar 2010, 18:09

Can you see online showcase charts with your IE8?
Top
ivan
Posts: 13
Joined: 17 Mar 2010, 23:06

18 Mar 2010, 18:58

Hi,

Maybe, I didn't express myself very well. I tried the given link about linechart. It works with IE8 and Firefox but with my application, it still doesn't work.
The chart doesn't appear!!!

Do you any example which displays a chart using JSF 2.0 and primefaces 2.0.1-Snapshot???

Thanks
Top
Post Reply

Return to “PrimeFaces”

  • Information

  • Who is online

    Users browsing this forum: No registered users and 32 guests