tel./fax: +34 91 675 33 06 [email protected] - www ... · en este tutorial nos centramos en el...

Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)

tel./fax: +34 91 675 33 [email protected] - www.autentia.com

Somos su empresa de Soporte a Desarrollo Informático.Ese apoyo que siempre quiso tener...

1. Desarrollo de componentes y proyectos a medida

TecnologíaDesarrolloSistemas

Gran Empresa

Producción

autentia

Certificacióno Pruebas

Verificación previa

RFP Concurso

Consultora 1

Consultora 2

Consultora 3

Equipo propio desarrolloPiloto

3a

3b

1. Definición de frameworks corporativos.2. Transferencia de conocimiento de nuevas arquitecturas.3. Soporte al arranque de proyectos.4. Auditoría preventiva periódica de calidad.5. Revisión previa a la certificación de proyectos.6. Extensión de capacidad de equipos de calidad.7. Identificación de problemas en producción.

3. Arranque de proyectos basados en nuevas tecnologías

¿Qué ofrece Autentia Real Business Solutions S.L?

Para más información visítenos en: www.autentia.com

Compartimos nuestro conociemiento en: www.adictosaltrabajo.com

Gestor portales (Liferay)Gestor de contenidos (Alfresco)Aplicaciones híbridas

Tareas programadas (Quartz)Gestor documental (Alfresco)Inversión de control (Spring)

BPM (jBPM o Bonita)Generación de informes (JasperReport)ESB (Open ESB)

Control de autenticación y acceso (Spring Security)UDDIWeb ServicesRest ServicesSocial SSOSSO (Cas)

Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery

JPA-Hibernate, MyBatisMotor de búsqueda empresarial (Solr)ETL (Talend)

Dirección de Proyectos Informáticos.Metodologías ágilesPatrones de diseñoTDD

2. Auditoría de código y recomendaciones de mejora

4. Cursos de formación (impartidos por desarrolladores en activo)

Adictos al Trabajo. Formación y desarrollo | JAVA, JEE, UML, XML |. ... http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=elcom...

1 of 12 29/12/2008 18:22

Últimos tutoriales

2008-12-29

El componente outputChart deICEfaces

2008-12-27

JMeter: Tests de rendimiento usando varios clientes distribuidos

2008-12-25

Análisis de rendimiento al usarun Pool de conexiones

2008-12-16

Utilización de grupos en SpringSecurity

2008-12-17

URLs amigables con UrlRewriteFilter

2008-12-10

Modelado BPMN con Bizagi Modeler

2008-12-10

Tramites administrativos tras el nacimiento de un hijo

2008-12-09

Integración de Spring con elenvío de emails: técnicasavanzadas (II)

2008-12-09

Reorganización estratégica

2008-12-05

Activación de los Dispositivosde Entrada en X.Org 1.5.3.

Tutorial desarrollado por

Enrique Viñé Lerma

Consultor tecnológico dedesarrollo de proyectosinformáticos.

Ingeniero Técnico en Informáticapor la Universidad Politécnica deMadrid.

Puedes encontrarme en Autentia

Somos expertos en Java/J2EE

Catálogo de servicios de Autentia

Descargar (6,2 MB)

Descargar en versión comic (17 MB)

AdictosAlTrabajo.com es el Web de difusión de conocimiento deAutentia.

Catálogo de cursos

NUEVO ¿Quieres saber cuánto ganas en relación al mercado?pincha aquí...

Ver cursos que ofrece Autentia Descargar comics en PDF y alta resolución

[¡NUEVO!] 2008-12-01 2008-11-172008-09-01

2008-07-31

Estamos escribiendo un libro sobre la profesión informática y estas viñetas formarán parte de él. Puedes opinar en la seccion comic.

Descargar este documento en formato PDF: elcomponenteoutputchartdeicefaces.pdf

Fecha de creación del tutorial: 2008-12-29

El componente outputChart de ICEfaces

Índice de contenidos

Introducción1.Preparación del entorno2.Creando gráficas con la etiqueta <outputchart>3.Generar gráficas dinámicamente4.Gráficas personalizadas5.Conclusiones6.

01. Introducción

ICEfaces es un entorno de representación web para aplicaciones Java Server Faces, que aumenta las capacidades del framework JSFpara crear interfaces utilizando AJAX y ofrece una rica librería de componentes personalizados para mejorar la presentación de nuestraspáginas.

En este tutorial nos centramos en el componente outputChart de ICEfaces, que permite la representación de gráficas circulares o deejes. Veremos como crear gráficas utilizando la etiqueta "outputChart" en páginas JSP o por medio de código en nuestras clases Java.

Este componente utiliza internamente la librería de código abierto JCharts. Veremos también como crear gráficas más complejas con elAPI de JCharts y enlazarlas a componentes "outputChart".

02. Preparación del entorno

Para la realización de este tutorial se han utilizado las siguientes herramientas:

Eclipse Ganymede 3.4.1ICEfaces 1.7.2-SP1Apache Tomcat 6.0.18

Abrimos el entorno de desarrollo y creamos un nuevo proyecto web dinámico.

Vamos a añadir el soporte para Java Server Faces, abriendo las propiedades del proyecto y seleccionando "Facetas de proyecto".Marcamos la opción para "JavaServer Faces" (y si queremos la versión 1.2).

Inicio Quienes somos Tutoriales Formación Colabora Comunidad Comic Charlas Más

Catálogo deservicios

Autentia (PDF6,2MB)

En formato comic...

Web

www.adictosaltrabajo.com

Buscar

Hosting patrocinado por

Anuncios Google JSP Chart J2EE Java 3D Studio Tutoriales Sun JSF Java Game


2 of 12 29/12/2008 18:22

Últimas ofertas deempleo

2008-12-22

Otras - Mecánica - SEVILLA.

2008-11-27

Comercial - Ventas - ALICANTE.

2008-10-30

Comercial - Ventas - BARCELONA.

2008-10-30

T. Información - Analista /Programador - BARCELONA.

2008-10-27

T. Información - Analista /Programador - CIUDAD REAL.

Facetas del proyecto

En la parte inferior de la ventana nos aparece un enlace, indicando que se requiere configuración adicional. Lo pulsamos y nos aparecela siguiente ventana.

Dejamos la implementación JSF del servidor y añadimos la librería de componentes de ICEfaces pulsando sobre el botón "new".

Añadimos las siguientes librerías necesarias a la carpeta "WebContent/WEB-INF/lib". Todas estas librerías pueden encontrarse dentro dela carpeta lib de la distribución de ICEfaces que hemos descargado.

Anuncios Google


3 of 12 29/12/2008 18:22

Ahora sólamente nos resta configurar el fichero "web.xml" para añadir el soporte de ICEfaces.

Algunos componentes de ICEfaces, como outputChart, generan recursos (en este caso imágenes) que realmente no están almacenadosen un fichero en el servidor. El Blocking Servlet recibirá las peticiones de esas imágenes, que se habrán generado dinámicamente, paraque sean mostradas en la página.

El mapeo para las urls de la forma "/xmlhttp/*" también será necesario, especialmente al utilizar un actionListener disparado al pulsarsobre los elementos de las gráficas.

03. Creando gráficas con la etiqueta <outputchart>

Para comprobar que nuestra configuración es correcta vamos a crear una sencilla página de prueba, a la que llamaremos "prueba.jsp".En esta página vamos a insertar una gráfica gracias al componente "outputchart" de ICEfaces. La etiqueta <outputchart> debe irdentro de un formulario, de lo contrario se producirá un error.

view plain print ?

<?xml version="1.0" encoding="UTF-8"?> 01.<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 02. xmlns="http://java.sun.com/xml/ns/javaee" 03. xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 04. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"05. id="WebApp_ID" 06. version="2.5"> 07. <display-name>IceFacesChart</display-name> 08. <welcome-file-list> 09. <welcome-file>index.jsp</welcome-file> 10. </welcome-file-list> 11. 12. <servlet> 13. <servlet-name>Faces Servlet</servlet-name> 14. <servlet-class>javax.faces.webapp.FacesServlet </servlet-class> 15. <load-on-startup>1</load-on-startup> 16. </servlet> 17. <servlet> 18. <servlet-name>Persistent Faces Servlet </servlet-name> 19. <servlet-class>com.icesoft.faces.webapp.xmlhttp.PersistentFacesServlet </servlet-class> 20. <load-on-startup>1</load-on-startup> 21. </servlet> 22. <servlet> 23. <servlet-name>Blocking Servlet</servlet-name> 24. <servlet-class>com.icesoft.faces.webapp.xmlhttp.BlockingServlet </servlet-class> 25. <load-on-startup>1</load-on-startup> 26. </servlet> 27. 28. <servlet-mapping> 29. <servlet-name>Faces Servlet</servlet-name> 30. <url-pattern>*.faces</url-pattern> 31. </servlet-mapping> 32. <servlet-mapping> 33. <servlet-name>Persistent Faces Servlet </servlet-name> 34. <url-pattern>*.iface</url-pattern> 35. </servlet-mapping> 36. <servlet-mapping> 37. <servlet-name>Persistent Faces Servlet </servlet-name> 38. <url-pattern>/xmlhttp/*</url-pattern> 39. </servlet-mapping> 40. <servlet-mapping> 41. <servlet-name>Blocking Servlet</servlet-name> 42. <url-pattern>/block/*</url-pattern> 43. </servlet-mapping> 44. 45. <listener> 46. <listener-class>com.icesoft.faces.util.event.servlet.ContextEventRepeater </listener-class> 47. </listener> 48.</web-app> 49.


4 of 12 29/12/2008 18:22

Si ponemos la etiqueta sin especificar ningún atributo, se utilizarán los valores por defecto. Esto nos mostrará una gráfica de barrasparecida a la siguiente.

Como curiosidad, el color por defecto de las barras es aleatorio, y podrá cambiar si ejecutamos la aplicación varias veces.

La etiqueta "outputchart" dispone principalmente de los siguientes atributos, que nos permiten personalizar la apariencia de las gráficas.

Atributo Subtipo Valor Descripción Ejemplo Resultado Notas

view plain print ?

<f:view xmlns:h="http://java.sun.com/jsf/html" 01. xmlns:f="http://java.sun.com/jsf/core" 02. xmlns:ice="http://www.icesoft.com/icefaces/component" > 03. <ice:outputDeclaration doctypeRoot="HTML" 04. doctypePublic="-//W3C//DTD XHTML 1.0 Transitional//EN" 05. doctypeSystem="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> 06. <html> 07. <head> 08. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></meta> 09. <title>Prueba de outputChart </title> 10. </head> 11. <body> 12. <ice:form> 13. <ice:outputChart /> 14. </ice:form> 15. </body> 16. </html> 17.</f:view> 18.


5 of 12 29/12/2008 18:22

"pie3d"Gráfica circularen 3 dimensiones

<ice:outputChart type="pie3d"/>

Admite unaúnica serie dedatos. No se muestra laleyenda, porque las etiquetas se muestran junto a cada rodaja

de ejes

"area"Muestra el árearellena bajo lagráfica

<ice:outputChart type="area" data="40,20, 30 : 10, 20, 10"/>

"areastacked"

Muestra áreasapiladas (para varias series dedatos)

<ice:outputChart type="areastacked"data="40, 20, 30 : 10,20, 10"/>

"bar"Diagrama simple de barras

<ice:outputChart type="bar" data="40,20, 30"/>

"barclustered"

Muestra unas barras al lado de las otras (para variasseries de datos)

<ice:outputChart type="barclustered"data="40, 20, 30 : 10,20, 50 : 20, 30, 40"/>

"barstacked"

Muestra barras apiladas unas sobre otras (para variasseries de datos)

<ice:outputChart type="barstacked"data="10, 20, 30 : 30,30, 10"/>

"line"Muestra puntos y líneas entreellos

<ice:outputChart type="line" data="10,20, 30 : 30, 10, 20"/>

"point"Muestrasólamentepuntos

<ice:outputChart type="point" data="10,20, 30 : 30, 10, 20"/>

"custom"Diagrama personalizado

Ver apartado de gráficaspersonalizadas

chartTitle StringTítulo de lagráfica

<ice:outputChart type="pie3d" chartTitle="TITULO"height="200"/>

labelsString []List<String>

Nombres de las etiquetas de lagráfica.Debe haber una etiqueta por cada serie de datos o por cada valor engráficascirculares

<ice:outputChart type="barstacked" labels="Uno, Dos"data="10, 20, 30 : 20, 50, 10" />

data

double []double [] []List<double>List<double []>

Valores de las series de datos.Cada serie puede separarse con ":"

<ice:outputChart type="barstacked" labels="Uno, Dos"data="38.9, 20.5 : 20, 50.0" />

colorsString []List<java.awt.Color>

Colores para las diferentes series de datos o las rodajas delos gráficoscirculares. Debe haber un color por cada seriede datos o por cada valor engráficas

<ice:outputChart type="pie2d" colors="green, red,yellow" data="10, 20, 70" />


6 of 12 29/12/2008 18:22

circulares

height String

Alto de la imagen generada(gráfciacompleta,incluyendotítulos yetiquetas) enpíxeles

<ice:outputChart height="200" />

width String

Ancho de la imagengenerada enpíxeles

<ice:outputChart width="200" />

legendPlacement"top", "bottom", "left", "right", "none"

Colocación de laleyenda. "none" indica que nose muestre

<ice:outputChart legendPlacement="right"/>

Sin efecto para el tipo "pie3d"

legendColumns Integer

Número decolumnas que se mostraránen la leyenda

<ice:outputChart type="barstacked" labels="A, B, C"data="10 : 40 : 35" legendColumns="2" />

Sin efecto para el tipo "pie3d"

horizontal boolean

Indica que las barras se muestren horizontalmente

<ice:outputChart type="bar"horizontal="true"/>

Sólo es válidopara los tipos "bar" y"barclustered"

xaxisTitle String Título del eje X

<ice:outputChartxaxisTitle="Eje X"yaxisTitle="Eje Y"/>

Válido paragráficas conejes

yaxisTitle String Título del eje Y

xaxisLabelsString []List<String>

Rótulos del ejeX. Debe haber un rótulo porcada valor de las series dedatos

<ice:outputCharttype="barclustered" labels="Serie 1, Serie 2" data="10, 20, 30 : 15,13, 40" xaxisLabels="2001, 2002, 2003"/>

Válido paragráficas conejes

shapes

String [] (valores "circle", "diamond","square" o "triangle")List<java.awt.Shape>

Forma de los puntos para lasgráficas delíneas y puntos.Debe haber tantas formascomo series de datos

<ice:outputChart type="line"shapes="circle, triangle"data="10, 20 : 13,19"/>

Válido paratipos "line" y"point"

renderOnSubmit boolean

Por defecto, lagráfica segenera una vez y vuelve a obtenerse en sucesivas peticiones. Si este valor estrue, se volveráa generar lagráfica.

<ice:outputChartchartTitle="Autentia" renderOnSubmit="true"data="30, 40" labels="hola"/>

styleClass

String (por defecto "iceOutChrt" o"iceOutChrt-dis" cuando el componente estádeshabilitado)

Lista de clases CSS separadas por coma parael elemento.

<style type="text/css"> .grafica { border: 10px solidred; float: right;}</style><ice:outputChart styleClass="grafica"/>

actionListener String

Método que selanzará alpulsar sobrealgún elementode la gráfica

Ver apartado de gráficaspersonalizadas

Por supuesto, además de insertar directamente los valores en las páginas JSP, podemos enlazar estos valores con propiedades denuestros bean manejados, como con cualquier componente de JSF.


7 of 12 29/12/2008 18:22

04. Generar gráficas dinámicamente

Ahora que hemos visto cómo funciona la etiqueta OutputChart, vamos a ver un ejemplo de cómo generar componentes dinámicamente,a través de la clase "com.icesoft.faces.component.outputchart.OutputChart". Por medio de esta clase podemos asignar básicamente lasmismas propiedades que con la etiqueta, pero desde nuestro código Java.

Creamos la clase "EjemploGraficas" que generará dos componentes de tipo OutputChart y los añadirá a un componente HtmlPanelGrid.

Modificamos el fichero "faces-config.xml" para añadir un bean manejado de la clase anterior.

Modificamos "prueba.jsp" de forma que sólamente contenga un panel enlazado a la propiedad "panel" de nuestro bean manejado.

<ice:outputChart chartTitle="#{miBean.title}" 01. data="#{miBean.data}" 02. labels="#{miBean.labels}" 03. colors="#{miBean.colors}" /> 04.

view plain print ?

package backing; 01. 02.import java.awt.Color; 03.import java.util.ArrayList; 04.import java.util.List; 05. 06.import com.icesoft.faces.component.ext.HtmlPanelGrid; 07.import com.icesoft.faces.component.outputchart.OutputChart; 08. 09.public class EjemploGraficas { 10. 11. HtmlPanelGrid panel = new HtmlPanelGrid(); 12. 13. /* Añadir graficas al panel */ 14. public EjemploGraficas() { 15. panel.getChildren().add(getEjemplo1()); 16. panel.getChildren().add(getEjemplo2()); 17. } 18. 19. /* Generar grafica circular */ 20. public OutputChart getEjemplo1() { 21. OutputChart outputChart = new OutputChart(); 22. 23. outputChart.setChartTitle( "Tutoriales en Autentia" ); 24. outputChart.setType( "pie2d"); 25. outputChart.setData( new double [] {180.0, 76.0, 42.0, 28.0}); 26. outputChart.setLabels( new String [] {"Roberto", "Alejandro", "Carlos", "Francisco Javier"}); 27. outputChart.setColors( new String [] {"green", "blue", "cyan", "yellow"}); 28. outputChart.setLegendPlacement( "right"); 29. outputChart.setLegendColumns( 1); 30. 31. return outputChart; 32. } 33. 34. /* Generar grafica con ejes */ 35. public OutputChart getEjemplo2() { 36. OutputChart outputChart = new OutputChart(); 37. List<Color> colores = new ArrayList<Color>(); 38. 39. outputChart.setChartTitle( "Prueba con ejes"); 40. outputChart.setType( "barclustered"); 41. outputChart.setData( new double [] [] {new double [] {180.0, 76.0, 42.0, 28.0}, 42. new double [] {120.0, 30.0, 10.0, 25.0}, 43. new double [] {100.0, 40.0, 13.0, 56.0}}); 44. outputChart.setLabels( new String [] {"Serie 1", "Serie 2", "Serie 3"}); 45. colores.add( new Color(26, 86, 138)); 46. colores.add( new Color(200)); 47. colores.add( new Color(100)); 48. outputChart.setColors(colores); 49. outputChart.setXaxisLabels( new String [] {"L1", "L2", "L3", "L4"}); 50. outputChart.setXaxisTitle( "Eje X"); 51. outputChart.setYaxisTitle( "Eje Y"); 52. 53. return outputChart; 54. } 55. 56. public HtmlPanelGrid getPanel() { 57. return panel; 58. } 59. 60. public void setPanel(HtmlPanelGrid panel) { 61. this.panel = panel; 62. } 63.} 64.

<managed-bean> 01. <managed-bean-name>ejemploGraficas</managed-bean-name> 02. <managed-bean-class>backing.EjemploGraficas </managed-bean-class> 03. <managed-bean-scope>request</managed-bean-scope > 04.</managed-bean> 05.

<ice:form> 01. <ice:panelGrid binding="#{ejemploGraficas.panel}" columns="2"> 02.</ice:form> 03.


8 of 12 29/12/2008 18:22

Cuando se muestre la JSP se ejecutará el constructor de nuestra clase, el cual añadirá las gráficas al panel. El resultado será elsiguiente:

05. Gráficas personalizadas

Con lo visto hasta ahora podemos generar un amplio abanico de gráficas, personalizando casi todas sus características importantes.Pero en ocasiones, puede que eso no sea suficiente.

Si queremos generar algo más complejo como, por ejemplo, varios tipos diferentes de series (barras, líneas, áreas...) en una mismagráfica, podemos hacerlo utilizando directamente el API de "jCharts", sobre el que se apoya el componente "outputChart". De estamanera podremos generar cualquier gráfica que pueda generarse con "jCharts" y después enlazarla con nuestro componente visual.

Vamos a ver un ejemplo en el que generaremos una gráfica con series de datos que incluyan barras y líneas. Además, veremos cómoutlizar la propiedad "actionListener" del componente para disparar un evento al pulsar sobre algún valor de la gráfica.

Creamos la clase "EjemploJChart" dentro del paquete "backing":


9 of 12 29/12/2008 18:22

view plain print ?

package backing; 01. 02.import java.awt.Color; 03.import java.awt.Paint; 04.import java.awt.Shape; 05.import java.awt.Stroke; 06. 07.import javax.faces.event.ActionEvent; 08. 09.import org.krysalis.jcharts.axisChart.AxisChart; 10.import org.krysalis.jcharts.chartData.AxisChartDataSet; 11.import org.krysalis.jcharts.chartData.DataSeries; 12.import org.krysalis.jcharts.properties.AxisProperties; 13.import org.krysalis.jcharts.properties.ChartProperties; 14.import org.krysalis.jcharts.properties.ClusteredBarChartProperties; 15.import org.krysalis.jcharts.properties.LegendProperties; 16.import org.krysalis.jcharts.properties.LineChartProperties; 17.import org.krysalis.jcharts.properties.PointChartProperties; 18.import org.krysalis.jcharts.types.ChartType; 19. 20.import com.icesoft.faces.component.outputchart.OutputChart; 21. 22.public class EjemploJChart { 23. 24. // Valores del elemento pulsado en la grafica por el usuario 25. private String valor; 26. 27. // Grafica generada con jCharts, enlazada al componente 28. private static AxisChart grafica; 29. 30. /* Evento disparado cuando el usuario pulse sobre un elemento de la grafica */ 31. public void areaPulsada(ActionEvent event) { 32. OutputChart chart = (OutputChart) event.getSource(); 33. 34. // Recuperamos los valores del elemento pulsado 35. String leyenda = chart.getClickedImageMapArea().getLengendLabel(); 36. String etiqueta = chart.getClickedImageMapArea().getXAxisLabel(); 37. double valor = chart.getClickedImageMapArea().getValue(); 38. 39. // Cambiamos el valor del texo a mostrar 40. this.valor = leyenda + " (" + etiqueta + ") = " + valor; 41. } 42. 43. /* 44. * Indica cuando debe representarse nuevamente la grafica. Recibe el 45. * componente a representar. 46. */ 47. public boolean actualizar(OutputChart component) { 48. if (grafica == null || component.getChart() == null) { 49. generarGrafica(); 50. // Asignamos la grafica personalizada al componente 51. component.setChart(grafica); 52. 53. return true; 54. } 55. 56. return false; 57. } 58. 59. /* 60. * Construye una grafica utilizando jCharts. La grafica tendra dos conjuntos 61. * de datos diferentes, uno de barras y otro de lineas 62. */ 63. private void generarGrafica() { 64. try { 65. /********** Se establecen las propiedades generales del diagrama **********/ 66. String [] etiquetasX = { "Enero", "Febrero", "Marzo" }; 67. String tituloX = "Mes"; 68. String tituloY = "Euros"; 69. String tituloGrafica = "Gastos e ingresos" ; 70. /**************************************************************************/ 71. 72. DataSeries series = new DataSeries(etiquetasX, tituloX, tituloY, 73. tituloGrafica); 74. 75. /********** Se construye el primer conjunto de datos (barras) **********/ 76. String [] leyenda = { "Sueldo", "Extras", "Tickets" }; 77. Paint [] colores = new Color[] { new Color(0xFF5566), 78. new Color(0x00FFFF), new Color(0xFFFF00) }; 79. double[][] datos = { { 1700, 1900, 1900 }, { 120, 220, 230 }, {180, 160, 189} }; 80. 81. AxisChartDataSet axisChartDataSet = new AxisChartDataSet(datos, 82. leyenda, colores, ChartType.BAR_CLUSTERED, 83. new ClusteredBarChartProperties()); 84. series.addIAxisPlotDataSet(axisChartDataSet); // Se añade la serie 85. /********************************************************************************/86. 87. /********** Se construye el segundo conjunto de datos (lineas) **********/ 88. leyenda = new String[] { "Vivienda", "Transporte" }; 89. colores = new Paint[] { new Color(0x445566), new Color(0xAABBCC) }; 90. datos = new double[][] { { 1000, 1100, 1150 }, { 400, 560, 700 } }; 91. 92. Stroke[] estiloLineas = { LineChartProperties.DEFAULT_LINE_STROKE, 93. LineChartProperties.DEFAULT_LINE_STROKE }; 94. Shape[] estiloPuntos = { PointChartProperties.SHAPE_CIRCLE, 95. PointChartProperties.SHAPE_SQUARE }; 96. 97. axisChartDataSet = new AxisChartDataSet(datos, leyenda, colores, 98. ChartType.LINE, new LineChartProperties(estiloLineas, estiloPuntos)); 99.


10 of 12 29/12/2008 18:22

Esta clase genera una gráfica de ejemplo que presenta gastos e ingresos a lo largo de un trimestre. Las series de gastos se representancon líneas, mientras que las de ingresos lo hacen mediante barras verticales. Por simplicidad se han añadido únicamente dos o tresseries de cada tipo.

El método actualizar es el que realiza la generación de la gráfica cuando ésta aún no se ha inicializado, e irá enlazado con la propiedad"renderOnSubmit" del componente. Cuando se vaya a visualizar el componente se llamará a este método y, si es la primera vez, segenerará la gráfica.

Es importante notar que podemos tener diferentes conjuntos de datos, pero en cada uno debe cumplirse lo siguiente:

La cardinalidad de "leyenda", "colores" y "datos" debe ser la misma, ya que se refieren a una misma serie.

La cardinalidad de cada uno de los elementos de "datos" debe coincidir a su vez con el número de etiquetas en el eje X.

Modificamos el fichero prueba.jsp para mostrar un texto que indicará el valor pulsado sobre la gráfica y la propia gráfica:

Compilamos y publicamos nuestros cambios, y arrancamos de nuevo el servidor. El resultado será una gráfica como la siguiente:

Si pulsamos sobre un elemento de la gráfica, veremos que se actualiza el texto de la parte superior:

06. Conclusiones

Las conclusiones que podemos extraer de este tutorial son las siguientes:

Podemos utilizar el componente outputChart para crear gráficas de forma rápida y sencilla en nuestras páginas JSF.

El componente outputChart dispone de bastantes propiedades que nos permiten configurar los datos y la apariencia de lasgráficas a mostrar.

Podemos manejar los eventos que se producen al pulsar sobre los elementos de nuestras gráficas para realizar acciones, comomostrar información ampliada, abrir otras páginas o cualquier cosa que se nos ocurra.

Si necesitamos gráficas más sofisticadas, podemos utilizar el API de JCharts para crearlas y enlazarlas a componentesoutputChart para obtener todas las ventajas que nos ofrecen JSF e ICEfaces.

Y eso es todo. Desde Autentia os animamos a utilizar este componente si necesitáis utilizar gráficas en vuestras aplicaciones, lo cualmejorará notablemente la presentación y permitirá tener un interfaz más intuitivo y amigable para los usuarios.

view plain print ?

<ice:outputText value="Valor pulsado: #{ejemploJChart.valor}" ></ice:outputText> 01.<ice:outputChart id="outputChart" 02. type="custom" 03. renderOnSubmit="#{ejemploJChart.actualizar}" 04. actionListener="#{ejemploJChart.areaPulsada}" /> 05.


11 of 12 29/12/2008 18:22

¿Qué te ha parecido el tutorial? Déjanos saber tu opinión y ¡vota!

Muy malo Malo Regular Bueno Muy bueno

Votar

Puedes opinar sobre este tutorial haciendo clic aquí.Puedes firmar en nuestro libro de visitas haciendo clic aquí.Puedes asociarte al grupo AdictosAlTrabajo en XING haciendo clic aquí.

Añadir a favoritos Technorati.

Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento-No comercial-Sin obras derivadas2.5

Recuerda

Autentia te regala la mayoría del conocimiento aquí compartido (Ver todos los tutoriales). Somos expertos en: J2EE, Struts, JSF, C++, OOP, UML, UP, Patrones dediseño ... y muchas otras cosas.

¿Nos vas a tener en cuenta cuando necesites consultoría oformación en tu empresa?, ¿Vas a ser tan generoso con nosotroscomo lo tratamos de ser con vosotros?

Somos pocos, somos buenos, estamos motivados y nos gusta lo que hacemos ...

Autentia = Soporte a Desarrollo & Formación.

[email protected]

Servicio de notificaciones:

Si deseas que te enviemos un correo electrónico cuando introduzcamos nuevos tutoriales.

Formulario de subcripción a novedades:

E-mail Aceptar


12 of 12 29/12/2008 18:22

Nota:

Los tutoriales mostrados en este Web tienen como objetivo la difusión del conocimiento. Los contenidos y comentarios de los tutorialesson responsabilidad de sus respectivos autores. En algún caso se puede hacer referencia a marcas o nombres cuya propiedad yderechos es de sus respectivos dueños. Si algún afectado desea que incorporemos alguna reseña específica, no tiene más quesolicitarlo. Si alguien encuentra algún problema con la información publicada en este Web, rogamos que informe al [email protected] para su resolución.

Tutoriales recomendados

Nombre Resumen Fecha Visitas Valoración pdf

Genera gráficas comolas de Google Chart con Eastwood

Si no conoces JFreeChart pero quieres hacer gráficas tanllamativas como las de Google Chart, Eastwood te resultarámuy útil

2008-04-03 1847 - pdf

Manejar tablas de datos con JSF

En este tutorial os mostramos un ejemplo de utilización de laextension del componente DataTable, realizada por laimplementación Tomahawk de MyFaces

2006-03-09 15044 - pdf

Applet con gráficasJFreeChart

Os mostramos como mostrar en un applet las graficas generadas por JFreeChart sin necesidad cargar las clases en el cliente

2003-09-21 26164 - pdf

Probando entornos para JSF

En este tutorial os mostramos con ejemplos como utliizar dos conocidos entornos de desarrollo para JSF: Exadel Studio y Sun Studio Creator

2006-02-17 18370 - pdf

Gráficas en Java conJFreeChart

Os mostramos como generar gráficas profesionales, enaplicaciones y servlets, en Java con la librería gratuitaJFreeChart

2003-08-10 60839 - pdf

Ejemplo de web con ICEfaces

Creación de una web paso a paso con ICEFaces, Tomcat 5.5 yEclipse

2008-01-16 5447 - pdf

Generación automáticade gráficas en un web

Daniel nos muestra cómo ha desarrollado las gráficas delcomparador de sueldos de la web de Adictosaltrabajo.com

2008-02-29 2344 - pdf

Integración de JSF 1.2,Facelets e ICEFaces en Tomcat 6

Integración de JSF 1.2, Facelets e ICEFaces en Tomcat 6 2007-12-10 6154 - pdf

JSF y comparativa con Struts

Os mostramos los pasos necesarios para empezar a utilizar JSF (Java Server Faces) y su comparación / relación con Struts

2005-09-08 33186 - pdf

Gráficos con iReportEn este tutorial vamos a realizar ejemplos y a explicar como crear y configurar gráficas con iReport para poder dar unaspecto más profesional y funcional a nuestros informes.

2007-05-17 26958 - pdf

tel./fax: +34 91 675 33 06 [email protected] - www ... · en este tutorial nos centramos en el...

Documents