style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">

JSF2 PrimeFaces5 y Maven3 -Ej. Crear Graficas-

Hola este post tiene dos propósitos, el primero es de contribuir con estos temas que por más que busque en esta pagina no encontré algo que satisficiera la duda que tenia ya que ahora que estoy buscando trabajo en las solicitudes de empleo de las empresas encontré que los frameworks más solicitados son: Spring,JSF2, PrimeFaces,RichFaces y como ORM Hibernate y gestor de proyectos Maven y me di a la tarea de buscar en internet algo para que los usuarios de esta pagina encuentren un pequeño soporte del tema (usuarios principiantes como yo).
Y como segundo propósito es el de la ayuda, tips o comentarios acerca de un punto en especial que más adelante lo mencionare.

Bueno iniciemos...

Entorno:

    Eclipse Luna 4.4 { Descargar de EclipseMarketplace: JBoosTools [Luna]}
    JSF 2.2
    PrimeFaces 5.1
    Maven 3.0
    Apache Tomcat 7* (Pueden usar el servidor AS de JBoss 7 pero esto modificaría un poco el pom.xml)

Como primer tema Maven algo que desconocía hace algunos días, este gestor de proyectos tuve una buena impresión ya que delega de algunas cosas al programador como es la búsqueda de los jar´s o plugins en su pom.xml al usar dependencias y el manejo de carpetas, el compile, test del desarrollo y el deploy. (Esto sería como el Dynamic Web Project que te da eclipse por default pero mejorado :P)
Pueden descargar Maven de aquí y agregarlo manualmente o si no con que instalen la herramienta JBoosTools (algo que facilitara muchas cosas) es suficiente.
La herramienta JBoosTools ya contiene wizard como Maven, Hibernate y AS como otros componentes más.

Creamos un proyecto con Maven.

Configuramos el archivo dándole clic derecho /propiedades nos vamos al apartado que dice JavaCompiler indicamos que sera el -> 1.8 en caso de que ustedes tengan una versión anterior indicarla aquí y poner atención al código pom.xml. Ahí mismo en propiedades del proyecto nos vamos a Proyect Facets eh indicamos que trabajaremos con Dynamic Web Module ->3.0 (atención al archivo web.xml) al igual indicamos el Java a usar -> (1,8) al igual seleccionamos la casilla de JavaServer Faces -> 2.2 aplicamos los cambios y de damos Ok (Esto mandara algunos errores pero más adelante se quitaran).

Código del archivo web.xml

<?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"
              xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
              <a href="
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
" title="http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
">http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
</a>          version="3.0">
  <display-name>JSF-Graficas</display-name>
  <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>*.jsf</url-pattern> //apuntamos la salida  a ustedes le saldrá */faces/ esto no cambia nada, en versiones pasadas si.
  </servlet-mapping>
</web-app>

En el archivo pom.xml

<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 <a href="http://maven.apache.org/xsd/maven-4.0.0.xsd">
" title="http://maven.apache.org/xsd/maven-4.0.0.xsd">
">http://maven.apache.org/xsd/maven-4.0.0.xsd">
</a>  <modelVersion>4.0.0</modelVersion>
  <groupId>com.hellocannibal.graficas</groupId>
  <artifactId>JSF-Graficas</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <name>JSF-Graficas</name>
 <build>
    <plugins>
       <plugin>
            <artifactId>maven-compiler-plugin</artifactId>
                 <version>3.0</version>
                 <configuration>
                 <source>1.8</source>
                 <target>1.8</target>
        </configuration>
  </plugin>
 </plugins>
</build>
<repositories>
        <repository>  
                <id>prime-repo</id>  
                <name>PrimeFaces Maven Repository</name>  
                <url>http://repository.primefaces.org</url>  
                <layout>default</layout>  
                </repository>
                </repositories>
<dependencies>
        <dependency>
                <groupId>com.sun.faces</groupId>
                <artifactId>jsf-api</artifactId>
                <version>2.2.2</version>
        </dependency>
                <dependency>
                <groupId>com.sun.faces</groupId>
                <artifactId>jsf-impl</artifactId>
                <version>2.2.2</version>
        </dependency>
 <dependency>
        <groupId>javax.servlet</groupId>
         <artifactId>javax.servlet-api</artifactId>
                <version>3.0.1</version>
                </dependency>
 <dependency>  
        <groupId>org.primefaces</groupId>  
        <artifactId>primefaces</artifactId>  
         <version>5.1</version>  
</dependency>
</dependencies>                                                                        
</project>

Una vez teniendo esto, damos clic derecho sobre el proyecto y nos vamos a la opción Maven -> Update Project (Alt+F5) Y con esto se nos quitaran los errores que tuviéramos al integrar las dependencias al proyecto.

Ahora vamos al código JSF ...
Nos vamos a la carpeta Java Resource-> src/main/java-> creamos un paquete -> creamos una clase.

Aquí esta el segundo punto fundamental por el cual de igual manera subí este post y es el de concretar esta gráfica con datos provenientes de una Base de Datos y que mejor si ya estoy usando Maven que usar Hibernate pera Oracle o PostgreSQL (odio MySql eso es más de PHP jajaja ... ) sería genial que me guiarán para el desarrollo de esto con algún comentario o tip todo sera de gran ayuda.

package com.hellocannibal.main;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;

import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.BarChartModel;

import org.primefaces.model.chart.ChartSeries;

@ManagedBean (name="main") //podemos quitarle el nombre y hacer la llamada por Produccion
public class Produccion {

    private BarChartModel compras;
 
    @PostConstruct
    public void init() {
        createAnimatedModels();
    }
 
    public BarChartModel getCompras(){
        return compras;
    }
 
    private void createAnimatedModels() {
     
       
        compras= initBarModel();
        compras.setTitle("Grafica de Compras");
        compras.setAnimate(true);
        compras.setLegendPosition("ne");
        Axis  yAxis=compras.getAxis(AxisType.Y);
        yAxis.setLabel("Compras");
        yAxis.setMin(0);
        yAxis.setMax(200);
       
       
        yAxis=compras.getAxis(AxisType.X);
        yAxis.setLabel("Años");  
    }
    private BarChartModel initBarModel() {
        BarChartModel model = new BarChartModel();
 
       
        ChartSeries apple = new ChartSeries();
        apple.setLabel("Apple");
        apple.set("2005", 58);
        apple.set("2006", 79);
        apple.set("2007", 92);
        apple.set("2008", 100);
        apple.set("2009", 135);
       
        ChartSeries android = new ChartSeries();
        android.setLabel("Android");
        android.set("2005", 149);
        android.set("2006", 190);
        android.set("2007", 194);
        android.set("2008", 150);
        android.set("2009", 121);
       
        model.addSeries(apple);
        model.addSeries(android);
       
        return model;
    }
 
}

Y por último creamos el index.xhtml. Al igual como se han dado cuenta esta gráfica cuenta con animación esto le da un plus a nuestro trabajo.

<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

<h:head><title>JSF</title></h:head>
<body>
<h:panelGrid columns="2" columnClasses="left,right" style="width:100%">
    <p:chart type="bar" model="#{main.compras}" style="width:400px;" /> // "#{llamadas a nuestros modelos de integración}"
</h:panelGrid>
</body>
</html>

Como vemos el uso de estos frameworks facilita y hace más legible nuestro código. Y el uso de Maven sobre nuestros proyectos es agradable bueno para ser la primera ves que lo uso me gusto su entorno de repositorios y dependencias por cierto de aquí saque todas las dependencias que use. Otra cosa les recomiendo que se metan a la pagina de PrimeFaces y chequen los demos y jueguen con ellos esta padres ahí viene mucha documentación y muy sencilla de entender. Y espero más adelante usar algo de RichFaces y compartirlo con ustedes.

Saludos.

Comentarios

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.

¡Excelente aporte!

¡Excelente aporte!

Por cierto, desde Servlet 3.0 y dependiendo de la implementación de JSF, es posible evitar la configuración del servlet javax.faces.webapp.FacesServlet en el archivo web.xml. Esto gracias a la clase com.sun.faces.config.FacesInitializer (código de una implemetación aquí), la cual agrega este servlet en el momento del despliegue de la aplicación Web.

De esta forma, se podría acceder a una página, por ejemplo el archivo index.xhtml, con:

  • faces/index.xhtml
  • index.jsf
  • index.faces

Por supuesto, si se desea tener un control más preciso de los patrones o utilizar otro, basta con configurar el servlet en el archivo web.xml.

~~~

Imagen de chicowed

Que IDE me recomiendan

Que IDE me recomiendan Usar?, actualmente utilizo el netbeans y la verdad es que me parece bastante bien, pero veo que muchos utilizan Eclipce, deberia cambiar de IDE?

¿Qué IDE usar? → Ver encuesta


¿Qué IDE utilizas a menudo para programar en java?

▲ ¿Ya viste[s] ésta encuesta? ▲

Imagen de arterzatij

Muy bueno! Estaria genial

Muy bueno!

Estaria genial para la comunidad que lo pudieras subir a github y compartir el repo

Imagen de hellocannibal

Claro !!

Aquí les dejo la liga del Proyecto en mi github.
Y de casualidad sabe alguien sobre algún buen tutorial o alguna documentación de Spring4 con Hibernate4 para ir iniciando con eso, sería de gran ayuda :D

Re: Que IDE me recomiendan

Si puedes pagar, sin duda IntelliJ IDEA.

De lo contrario, pues yo me decantaría por NetBeans, más que nada por qué me parece que es más simple y trae casi todo out-of-the-box. Ahora que si te gusta dejar las cosas puestas a punto, puedes usar Eclipse.

Fuera de esos tres, pues no te recomendaría nada; a menos que te guste ser de esos que hacen scripts para compilar y automatizar su proceso, en cuyo caso te recomendaría SublimeText qué no es un IDE en sí, pero te permite editar muy fácil... y si eres de los fans de la terminal, pues puedes editar cómodamente y compilar/probar en la terminal.

Unas pequeñas observaciones

Primero que nada es bueno ver un aporte de JSF. Pareciera que lo tenemos algo olvidado, genial por eso.

Ahora, solo tengo dos comentarios por hacer y este es:
1) El uso de la etiqueta @ManagedBean. Desde hace rato se desaconseja su uso en favor de @Named, aquí pueden ver una discusión de hace un año tocando ese tema.

2) Si dejas sin especificar el atributo name del ManagedBean (el atributo value en @Named) lo puedes llamar cómo #{produccion.atributo}, con "p" no con "P".

Y pues eso.

Saludos.

Imagen de hellocannibal

Ok tomare nota de sobre

Ok tomare nota de sobre @Named y si lo otro que dices por eso comente en la linea :

@ManagedBean (name="main") //podemos quitarle el nombre y hacer la llamada por Produccion

era lo mismo, así queda...

 <p:chart type="bar" model="#{produccion.compras}" style="width:400px;" />

Y si con 'p' (minúscula)

NOTA: No confundir

NOTA: No confundir las anotaciones de Contexts and Dependency Injection (CDI) con las anotaciones de JSF. El ejemplo de Eduardo, como él mismo menciona, está pensado para ejecutarse sobre Tomcat. Para poder utilizar anotaciones de CDI, se requiere que el servidor de aplicaciones soporte CDI (por ejemplo, Glassfish 3/4 o JBoss AS 7). En Tomcat, es posible instalar CDI: Bauke Scholtz tiene una sucinta guía de instalación.

style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">