TALLER 6_3: CREANDO UN COMPOSITE COMPONENT
Objetivo:
En este ejercicio usted creará una aplicación web usando la tecnología JSF para
la gestión de un listado de usuarios. La aplicación permitirá gestionar los
siguientes datos personales: Identificación, nombres y apellidos y tendrá un
Coposite Component que capture los datos del usuario.
Tareas:
Creando la aplicación web Java:
1. En primer lugar se creará una aplicación web. Para realizar seleccione
File -> New proyect -> Java Web -> Web Application y seleccione la opción
Next.
2. En el campo Project Name digite taller6_3 y en Project Location
asegúrese que se encuentre el directorio donde está almacenando los
talleres y selecciones Next.
3. En el listado Server seleccione el Glassfish Server 4.1 y en Java EE
Versión asegúrese que se encuentra seleccionado Java EE 7. Deje el
campo Context Path sin variación y de click en Next.
4. Seleccione el framework JavaServer Faces y verifique que en la pestaña
Libraries se encuentre seleccionada la opción JSF 2.2 en el campo
“Server Library” y que en la pestaña configuration se encuentre
diligenciado el campo JSF Servlet URL Pattern con el valor “/faces/*” y de
clic en Finish.
5. Verifique que se creó el proyecto web y explore las diferentes carpetas y
archivos.
Creando el modelo del negocio:
Los objetos del negocio van a estar representados por clases java que
implementan el patrón Data Transfer Object.
6. Cree la siguiente clase java con sus correspondientes atributos en el
paquete taller6_3.[Link]:
UsuarioDTO
- identificación : String
- nombres : String
- apellidos: String
+ UsuarioDTO(String, String, String)
+ UsuarioDTO()
+ setIdentificacion(String):void
+ getIdentificacion(): String
……
No olvide crear sus correspondientes métodos de acceso (get y set).
También cree los constructores señalados.
Creando el bean manejado (UsuarioMBean):
7. Cree el bean manejado UsuarioMBean en el paquete taller6_3.vista de
alcance de sesión.
8. Importe el objeto UsuarioDTO y la interfaz List incluyendo las siguientes
líneas:
import taller6_3.[Link];
import [Link];
import [Link];
9. Adicione atributos que permitan manejar la referencia a un objeto
UsuarioDTO (llamado usuario) y a un listado de usuarios (use el objeto
List<UsuarioDTO> y llame el atributo listaUsuarios).
10. Cree un método void init() donde inicialice los dos atributos creados e
instancie objetos de tipo UsuarioDTO y adiciónelos a la lista.
@PostConstruct
public void init(){
usuario = new UsuarioDTO();
listaUsuarios = new ArrayList<>();
[Link](new UsuarioDTO("7988888", "Rosalba", "Hernandez"));
[Link](new UsuarioDTO("666666", "Marina", "Casas"));
}
Nota: NO olvide crear los respectivos métodos de acceso (get y set) de
los atributos creados.
11. Cree un método para adicionar nuevos usuarios a la lista:
public String adicionarUsuario(){
[Link]("identificación = "+ [Link]());
[Link](usuario);
usuario = new UsuarioDTO();
return "";
}
12. Cree un método que reciba el objeto UsuarioDTO que se desea editar, se
lo asigne al atributo usuario y redirija al usuario a la página de edición:
public String editarUsuario(UsuarioDTO u){
usuario = u;
return "editusuario";
}
Creando la plantilla ([Link]):
13. Cree una plantilla JSF llamada [Link] en el directorio WEB-
INF/template. Para hacer esto de clic derecho en Source Package y luego
selecione New > Other > JavaServer Faces > Facelets Template.
Diligencie los campos File Name con template y folder con WEB-
INF\template. Seleccione un layout que contenga secciones arriba,
izquierda y en el centro y luego de clic en finish.
14. Modifique el contenido de la parte superior incluyendo un texto de
bienvenida
<ui:insert name="top">Bienvenido a la aplicación para la gestión de usuarios</ui:insert>
15. Incluya en la sección izquierda un vínculo con la opción “Gestionar
usuarios”. Use la etiqueta “h:link”. En el atributo outcome del h:link use la
palabra usuario.
<h:link outcome="index">Inicio</h:link>
<br/>
<h:link outcome="usuario">Gestionar Usuarios</h:link>
Creando el componente para capturar los datos del usuario
([Link]):
16. Debido a que el formulario de creación también va a ser usado para la
actualización de personas se sugiere crear un componente que pueda ser
reusado en ambos casos. Para esto cree un componente compuesto en
la ruta /resources/usercomp con el nombre [Link]. Puede
usar el wizard de creación de composite components que ofrece netbeans
dando clic derecho en el directorio resource y seleccionando New > Other
> JavaServer Faces > JSF Composite Components y diligencie los
campos File Name y Folder.
17. El componente debe tener un atributo que referencie al DTO que
almacena los datos del usuario.
<cc:interface>
<cc:attribute name="usuarioDTO" type="taller6_3.[Link]" />
</cc:interface>
18. En este componente cree una tabla donde solicite los datos que hacen
parte del objeto UsuarioDTO con la ayuda de las siguientes etiquetas:
h:outputLabel : Etiquetas
h:inputText : Cajas para la captura de texto
<cc:implementation>
<h:outputLabel id="lbIdentificacion" for="inputIdentificacion">Identificacion:</h:outputLabel>
<h:inputText id="inputIdentificacion" value="#{[Link]}"></h:inputText>
<br/>
<h:outputLabel id="lbNombres" for="inputNombres">Nombres:</h:outputLabel>
<h:inputText id="inputNombres" value="#{[Link]}"></h:inputText>
<br/>
<h:outputLabel id="lbApellidos" for="inputApellidos">Apellidos</h:outputLabel>
<h:inputText id="inputApellidos" value="#{[Link]}"></h:inputText>
<br/>
</cc:implementation>
Creando la página de gestión de usuarios([Link]) :
19. Cree una página JSF llamada [Link] y aplíquele la plantilla creada.
Para esto puede usar la opción de Netbeans dando clic derecho sobre el
directorio web pages y seleccionando New > Other > JavaServer Faces >
Facelets Template Client. En file Name use usuario, en template navegue
hasta encontrar le template creado. En generate root tag selecciones
ui:composition y finalmente seleccione la sección content de la plantilla.
Luego de clic en finish.
20. En la etiqueta raíz de la página [Link] incluya el esquema que hace
referencia al componente creado
xmlns:uc="[Link]
21. Invoque el componente creado (usercomp) en la sección content dentro
de una etiqueta form.
<uc:usuariocomp usuarioDTO="#{[Link]}" />
22. Cree un botón que invoque el método para incluir un nuevo usuario
<h:commandButton id="button" value="Crear"
action="#{[Link]()}" />
23. Cree una tabla para mostrar los datos de las personas que hacen parte
del directorio. Para esto use las etiquetas:
<h:dataTable id="usuarios" var="usuario" value="#{[Link]}"
border="1" cellspacing="0">
<h:column id="identificacion" >
<f:facet name="header">
<h:outputText value="Identificación" />
</f:facet>
<h:outputText value="#{[Link]}" />
</h:column>
<h:column id="nombres" >
<f:facet name="header">
<h:outputText value="Nombres" />
</f:facet>
<h:outputText value="#{[Link]}" />
</h:column>
<h:column id="Apellidos" >
<f:facet name="header">
<h:outputText value="Apellidos" />
</f:facet>
<h:outputText value="#{[Link]}" />
</h:column>
<h:column id="actualizar" >
<h:commandLink value="Actualizar"
action="#{[Link](usuario)}" />
</h:column>
</h:dataTable>
Creando la página de actualización de usuarios([Link]) :
24. Cree una página JSF llamada [Link] y aplíquele la plantilla
creada. Para esto puede usar la opción de Netbeans dando clic derecho
sobre el directorio web pages y seleccionando New > Other > JavaServer
Faces > Facelets Template Client. En file Name use editusuario, en
template navegue hasta encontrar le template creado. En generate root
tag selecciones ui:composition y finalmente seleccione la sección content
de la plantilla. Luego de clic en finish.
25. En la etiqueta raíz de la página [Link] incluya el esquema que hace
referencia al componente creado
xmlns:uc="[Link]
26. Invoque el componente creado (usercomp) en la sección content dentro
de una etiqueta form.
<uc:usuariocomp usuarioDTO="#{[Link]}" />
27. Cree un botón que invoque el envío de datos diligenciados en los
campos del formulario de usuario y lo retorne a la página de gestión de
usuarios ([Link]):
<h:commandButton id="button" value="Actualizar" action="usuario" />
28. Despliegue la aplicación.
