11 septiembre, 2020

Crear un Proyecto Java Web en Eclipse con JSF 2.3 y Primefaces 7.0

Herramientas

Eclipse IDE

Wildfly 20.0.1 Final


Pasos

1. Crear un Dyamic Web Project



Clic en New Runtime


Ubicamos la ruta en donde tenemos instalado o descomprimido nuestro servidor








2. Agregar los jars para trabajar con primefaces en la carpeta lib del WebContent. 


El archivo cruze-1.0.7.jar es el tema de primefaces elegido. 

Pueden descargar otros temas ingresando al siguiente enlace:

Primefaces Showcase

http://primefaces.org/showcase/

Repositorio Temas Primefaces

https://repository.primefaces.org/org/primefaces/themes/

3. Configurar el archivo descriptor web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="4.0"
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd">
    <display-name>AppWebCrud</display-name>
 
    <!-- Welcome File List -->
    <welcome-file-list>
        <welcome-file>vista/index.xhtml</welcome-file>
    </welcome-file-list>
 
    <!-- Faces Controller -->
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
        <enabled>true</enabled>
        <async-supported>false</async-supported>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
 
    <!-- Primefaces Themes -->
    <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>cruze</param-value>
    </context-param>
 
    <!-- Project Stage -->
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value> <!-- Production -->
    </context-param>
 
    <!-- State Saving Method -->
    <context-param>
        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>server</param-value>
    </context-param>
 
</web-app>

4. Crear las siguientes clases java


Dentro del paquete proyecto.view.modelo crear la siguiente clase.

Usuario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
package proyecto.view.modelo;
 
public class Usuario {
 
    private Integer id;
    private String nombre;
    private String apellido;
    private String edad;
    private String pais;
    private String dni;
 
    public Integer getId() {
        return id;
    }
 
    public void setId(Integer id) {
        this.id = id;
    }
 
    public String getNombre() {
        return nombre;
    }
 
    public void setNombre(String nombre) {
        this.nombre = nombre;
    }
 
    public String getApellido() {
        return apellido;
    }
 
    public void setApellido(String apellido) {
        this.apellido = apellido;
    }
 
    public String getEdad() {
        return edad;
    }
 
    public void setEdad(String edad) {
        this.edad = edad;
    }
 
    public String getPais() {
        return pais;
    }
 
    public void setPais(String pais) {
        this.pais = pais;
    }
 
    public String getDni() {
        return dni;
    }
 
    public void setDni(String dni) {
        this.dni = dni;
    }
 
}

Dentro del paquete proyecto.view.servicio crear la siguiente clase

ServicioUsuario 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
package proyecto.view.servicio;
 
import java.util.ArrayList;
import java.util.List;
 
import javax.ejb.Stateless;
 
import proyecto.view.modelo.Usuario;
 
@Stateless
public class ServicioUsuario {
 
    private List<Usuario> usuarios = new ArrayList<Usuario>();
 
    public void create(Usuario usuario) {
        usuario.setId(usuarios.size() + 1);
        usuarios.add(usuario);
    }
 
    public void update(Usuario usuario) {
        usuario.setNombre(usuario.getNombre());
        usuario.setApellido(usuario.getApellido());
        usuario.setEdad(usuario.getEdad());
        usuario.setPais(usuario.getPais());
        usuario.setDni(usuario.getDni());
    }
 
    public List<Usuario> list() {
        return usuarios;
    }
 
    public List<String> countries() {
        List<String> countries = new ArrayList<String>();
        countries.add("Argentina");
        countries.add("Alemania");
        countries.add("Perú");
        countries.add("Bolivia");
        countries.add("Venezuela");
        return countries;
    }
 
    public void delete(Usuario usuario) {
        System.out.println("Holamundo");
        usuarios.remove(usuario);
    }
 
    public Usuario obtenerObjetoPorId(String userId) {
        return usuarios.get(Integer.parseInt(userId) - 1);
    }
 
    public List<Usuario> getUsuarios() {
        return usuarios;
    }
 
    public void setUsuarios(List<Usuario> usuarios) {
        this.usuarios = usuarios;
    }
 
}

Dentro del paquete proyecto.view.controlador crear las siguientes clases.

ListarUsuario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package proyecto.view.controlador;
 
import java.io.Serializable;
import java.util.List;
 
import javax.annotation.PostConstruct;
import javax.ejb.EJB;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
 
import proyecto.view.modelo.Usuario;
import proyecto.view.servicio.ServicioUsuario;
 
@Named
@ViewScoped
public class ListarUsuario implements Serializable {
 
    private static final long serialVersionUID = 1L;
 
    @EJB
    private ServicioUsuario servicioUsuario;
    private List<Usuario> listaUsuarios;
 
    @PostConstruct
    public void init() {
        listaUsuarios = servicioUsuario.list();
    }
 
    public List<Usuario> getListaUsuarios() {
        return listaUsuarios;
    }
 
    public void setListaUsuarios(List<Usuario> listaUsuarios) {
        this.listaUsuarios = listaUsuarios;
    }
 
}

CrearUsuario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
package proyecto.view.controlador;
 
import java.io.IOException;
import java.io.Serializable;
import java.util.List;
 
import javax.annotation.PostConstruct;
import javax.ejb.EJB;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
 
import proyecto.view.modelo.Usuario;
import proyecto.view.servicio.ServicioUsuario;
 
@Named
@ViewScoped
public class CrearUsuario implements Serializable {
 
    private static final long serialVersionUID = 1L;
 
    @EJB
    private ServicioUsuario servicioUsuario;
    private List<String> countries;
    private String pais_seleccionado;
 
    private Usuario usuario;
 
    @PostConstruct
    public void init() {
        countries = servicioUsuario.countries();
        usuario = new Usuario();
    }
 
    public void create() throws IOException {
        usuario.setPais(pais_seleccionado);
        servicioUsuario.create(usuario);
        ExternalContext context = FacesContext.getCurrentInstance().getExternalContext();
        context.redirect("index.xhtml");
    }
 
    public Usuario getUsuario() {
        return usuario;
    }
 
    public void setUsuario(Usuario usuario) {
        this.usuario = usuario;
    }
 
    public List<String> getCountries() {
        return countries;
    }
 
    public void setCountries(List<String> countries) {
        this.countries = countries;
    }
 
    public String getPais_seleccionado() {
        return pais_seleccionado;
    }
 
    public void setPais_seleccionado(String pais_seleccionado) {
        this.pais_seleccionado = pais_seleccionado;
    }
 
}

ActualizarUsuario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
package proyecto.view.controlador;
 
import java.io.IOException;
import java.io.Serializable;
import java.util.List;
 
import javax.annotation.PostConstruct;
import javax.ejb.EJB;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
 
import proyecto.view.modelo.Usuario;
import proyecto.view.servicio.ServicioUsuario;
 
@Named
@ViewScoped
public class ActualizarUsuario implements Serializable {
 
    private static final long serialVersionUID = 1L;
 
    @EJB
    private ServicioUsuario servicioUsuario;
    private List<String> countries;
    private String pais_seleccionado;
    private Usuario usuario;
 
    @PostConstruct
    public void init() {
        countries = servicioUsuario.countries();
        FacesContext fc = FacesContext.getCurrentInstance();
        String userId = fc.getExternalContext().getRequestParameterMap().get("userId");
        usuario = servicioUsuario.obtenerObjetoPorId(userId);
    }
 
    public void update() throws IOException {
        usuario.setPais(pais_seleccionado);
        servicioUsuario.update(usuario);
        ExternalContext context = FacesContext.getCurrentInstance().getExternalContext();
        context.redirect("index.xhtml");
    }
 
    public List<String> getCountries() {
        return countries;
    }
 
    public void setCountries(List<String> countries) {
        this.countries = countries;
    }
 
    public String getPais_seleccionado() {
        return pais_seleccionado;
    }
 
    public void setPais_seleccionado(String pais_seleccionado) {
        this.pais_seleccionado = pais_seleccionado;
    }
 
    public Usuario getUsuario() {
        return usuario;
    }
 
    public void setUsuario(Usuario usuario) {
        this.usuario = usuario;
    }
 
}

EliminarUsuario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
package proyecto.view.controlador;
 
import java.io.IOException;
import java.io.Serializable;
 
import javax.annotation.PostConstruct;
import javax.ejb.EJB;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
 
import proyecto.view.modelo.Usuario;
import proyecto.view.servicio.ServicioUsuario;
 
@Named
@ViewScoped
public class EliminarUsuario implements Serializable {
 
    private static final long serialVersionUID = 1L;
 
    @EJB
    private ServicioUsuario servicioUsuario;
    private Usuario usuario;
 
    @PostConstruct
    public void init() {
        FacesContext fc = FacesContext.getCurrentInstance();
        String userId = fc.getExternalContext().getRequestParameterMap().get("userId");
        usuario = servicioUsuario.obtenerObjetoPorId(userId);
    }
 
    public void delete() throws IOException {
        servicioUsuario.delete(usuario);
        ExternalContext context = FacesContext.getCurrentInstance().getExternalContext();
        context.redirect("index.xhtml");
    }
 
    public Usuario getUsuario() {
        return usuario;
    }
 
    public void setUsuario(Usuario usuario) {
        this.usuario = usuario;
    }
 
}

5. Crear la vista

Creamos una carpeta vista dentro del WebContent y dentro creamos las siguientes páginas



index.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
 
<h:head>
</h:head>
 
<h:body style="margin:0px;">
    <p:breadCrumb>
        <p:menuitem value="Index" url="http://localhost:8080/AppWebCrud/faces/vista/index.xhtml" />
        <p:menuitem value="Crear" url="http://localhost:8080/AppWebCrud/faces/vista/crear.xhtml" />
        <p:menuitem value="Administrar" url="http://localhost:8080/AppWebCrud/faces/vista/index.xhtml" />
    </p:breadCrumb>
 
    <p:dataTable id="data" var="item"
        value="#{listarUsuario.listaUsuarios}" rowKey="#{item.id}"
        emptyMessage="No hay usuarios disponibles">
        <p:column headerText="Nombre">
            <h:outputText value="#{item.nombre}" />
        </p:column>
 
        <p:column headerText="Apellido">
            <h:outputText value="#{item.apellido}" />
        </p:column>
 
        <p:column headerText="Edad">
            <h:outputText value="#{item.edad}" />
        </p:column>
 
        <p:column headerText="Pais">
            <h:outputText value="#{item.pais}" />
        </p:column>
 
        <p:column headerText="Dni">
            <h:outputText value="#{item.dni}" />
        </p:column>
 
        <p:column headerText="Actions" style="text-align:center;">
            <p:button icon="ui-icon-delete" value="E" outcome="eliminar">
                <f:param name="userId" value="#{item.id}" />
            </p:button>
            <p:spacer width="10" />
            <p:button icon="ui-icon-update" value="A" outcome="actualizar">
                <f:param name="userId" value="#{item.id}" />
            </p:button>
        </p:column>
    </p:dataTable>
</h:body>
</html>

crear.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
 
<h:head>
</h:head>
 
<h:body style="margin:0px;">
    <p:breadCrumb>
        <p:menuitem value="Index" url="http://localhost:8080/AppWebCrud/faces/vista/index.xhtml" />
        <p:menuitem value="Crear" url="http://localhost:8080/AppWebCrud/faces/vista/crear.xhtml" />
        <p:menuitem value="Administrar" url="http://localhost:8080/AppWebCrud/faces/vista/index.xhtml" />
    </p:breadCrumb>
 
    <h:form id="form">
        <div style="padding: 15px;">
            <div style="padding: 15px;">
                <p:outputLabel value="Nombre: " style="font-weight:bold;" />
                <p:inputText value="#{crearUsuario.usuario.nombre}" style="width:100%" />
            </div>
 
            <div style="padding: 15px;">
                <p:outputLabel value="Apellido: " style="font-weight:bold;" />
                <p:inputText value="#{crearUsuario.usuario.apellido}" style="width:100%" />
            </div>
 
            <div style="padding: 15px;">
                <p:outputLabel value="Edad: " style="font-weight:bold;" />
                <p:inputText style="width:100%" value="#{crearUsuario.usuario.edad}" />
            </div>
 
            <div style="padding: 15px;">
                <p:outputLabel value="Pais: " style="font-weight:bold;" />
                <p:selectOneMenu style="width:100%" value="#{crearUsuario.pais_seleccionado}">
                    <f:selectItem itemLabel="Seleccionar pais" itemValue="null" />
                    <f:selectItems value="#{crearUsuario.countries}" />
                </p:selectOneMenu>
            </div>
 
            <div style="padding: 15px;">
                <p:outputLabel value="Dni: " style="font-weight:bold;" />
                <p:inputText style="width:100%" value="#{crearUsuario.usuario.dni}" />
            </div>
 
            <div style="padding: 30px;">
                <p:commandButton value="Registrar Usuario" action="#{crearUsuario.create}" ajax="true" style="width:100%;" />
                <p:spacer width="10" />
                <p:button outcome="index" value="Cancelar" style="width:100%;" />
            </div>
        </div>
    </h:form>
</h:body>
</html>

actualizar.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
 
<h:head>
</h:head>
 
<h:body style="margin:0px;">
    <p:breadCrumb>
        <p:menuitem value="Index" url="http://localhost:8080/AppWebCrud/faces/vista/index.xhtml" />
        <p:menuitem value="Crear" url="http://localhost:8080/AppWebCrud/faces/vista/crear.xhtml" />
        <p:menuitem value="Administrar" url="http://localhost:8080/AppWebCrud/faces/vista/index.xhtml" />
    </p:breadCrumb>
 
    <h:form id="form">
        <div style="padding: 15px;">
            <div style="padding: 15px;">
                <p:outputLabel value="Nombre: " style="font-weight:bold;" />
                <p:inputText value="#{actualizarUsuario.usuario.nombre}" style="width:100%" />
            </div>
 
            <div style="padding: 15px;">
                <p:outputLabel value="Apellido: " style="font-weight:bold;" />
                <p:inputText value="#{actualizarUsuario.usuario.apellido}" style="width:100%" />
            </div>
 
            <div style="padding: 15px;">
                <p:outputLabel value="Edad: " style="font-weight:bold;" />
                <p:inputText style="width:100%" value="#{actualizarUsuario.usuario.edad}" />
            </div>
 
            <div style="padding: 15px;">
                <p:outputLabel value="Pais: " style="font-weight:bold;" />
                <p:selectOneMenu style="width:100%" value="#{actualizarUsuario.pais_seleccionado}">
                    <f:selectItem itemLabel="Seleccionar pais" itemValue="null" />
                    <f:selectItems value="#{actualizarUsuario.countries}" />
                </p:selectOneMenu>
            </div>
 
            <div style="padding: 15px;">
                <p:outputLabel value="Dni: " style="font-weight:bold;" />
                <p:inputText style="width:100%" value="#{actualizarUsuario.usuario.dni}" />
            </div>
 
            <div style="padding: 30px;">
                <p:commandButton value="Actualizar Usuario" action="#{actualizarUsuario.update}" ajax="true" style="width:100%;" />
                <p:spacer width="10" />
                <p:button outcome="index" value="Cancelar" style="width:100%;" />
            </div>
        </div>
    </h:form>
</h:body>
</html>

eliminar.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
 
<h:head>
</h:head>
 
<h:body style="margin:0px;">
    <p:breadCrumb>
        <p:menuitem value="Index" url="http://localhost:8080/AppWebCrud/faces/vista/index.xhtml" />
        <p:menuitem value="Crear" url="http://localhost:8080/AppWebCrud/faces/vista/crear.xhtml" />
        <p:menuitem value="Administrar" url="http://localhost:8080/AppWebCrud/faces/vista/index.xhtml" />
    </p:breadCrumb>
 
    <h:form id="form">
        <div style="padding: 15px;">
            <div style="padding: 15px;">
                <p:outputLabel value="Nombre: " style="font-weight:bold;" />
                <p:outputLabel value="#{eliminarUsuario.usuario.nombre}" style="width:100%" />
            </div>
 
            <div style="padding: 15px;">
                <p:outputLabel value="Apellido: " style="font-weight:bold;" />
                <p:outputLabel value="#{eliminarUsuario.usuario.apellido}" style="width:100%" />
            </div>
 
            <div style="padding: 15px;">
                <p:outputLabel value="Edad: " style="font-weight:bold;" />
                <p:outputLabel value="#{eliminarUsuario.usuario.edad}" style="width:100%" />
            </div>
 
            <div style="padding: 15px;">
                <p:outputLabel value="Pais: " style="font-weight:bold;" />
                <p:outputLabel value="#{eliminarUsuario.usuario.pais}" style="width:100%" />
            </div>
 
            <div style="padding: 15px;">
                <p:outputLabel value="Dni: " style="font-weight:bold;" />
                <p:outputLabel value="#{eliminarUsuario.usuario.dni}" style="width:100%" />
            </div>
 
            <div style="padding: 15px;">
                <p:commandButton value="Eliminar" action="#{eliminarUsuario.delete}" ajax="true" style="width:100%" />
                <p:spacer width="10" />
                <p:button value="Cancelar" outcome="index" style="width:100%" />
            </div>
        </div>
    </h:form>
</h:body>
</html>


6. Ejecutar el proyecto

Clic derecho al proyecto / Run As / Run on Server

En la ventana que aparece debemos seleccionar el servidor con que hemos configurado el proyecto






Descargar proyecto

Corre la voz

No hay comentarios, ¡cuéntame algo!

Me gustaría saber tu opinión. ¡Saludos!

Suscribirse a: Comentarios de la entrada (Atom)
joseltoro© 2019 Todos los derechos reservados