| Registrar a un usuario en un sitio Web con Visual Web JSF |
| Paso 2: Operativa |
Vista - RegistroUsuario.jsp - Crear página Visual Web JSF
Para crear una página Visual Web JSF hacemos clic sobre el botón derecho del paquete paqregusuariovwjsf y seleccionamos New | Visual Web JSF Page...
En el cuadro de diálogo New Visual Web JSF Page escribimos RegistroUsuario en el campo de texto FileName
Para salir de este cuadro de diálogo hacemos clic sobre el botón 
Como podemos observar el asistente de NetBeans nos ha creado una página JSP llamada RegistroUsuario.jsp y una Clase Java llamada RegistroUsuario.java
Si hacemos doble clic sobre la página JSP RegistroUsuario.jsp, nos aparece la pestaña RegistroUsuario. Esta pestaña contiene tres botones 
, 
y 
El botón
Al hacer clic sobre este botón, nos aparece un lienzo para poder maquetar la página Web.
- Este lienzo juega el papel de un JPanel Swing
- los componentes se arrastran de la paleta de componentes (Palette) al lienzo
- a diferencia de Swing que tiene diferentes layouts para posicionar los componentes, cuando trabajamos con el Framework Visual Web JSF, el posicionamiento de los componentes en el lienzo se realiza a través del atributo style de CSS2 (Cascade Style Sheet - Hojas de Estilo en Cascada)
En la ventana de propiedades (Properties)
- podemos ver que el asistente de NetBeans ha creado una Hoja de Estilo externa en /resources/stylesheet.css
- vamos a darle título a la página escribiendo Registro Usuario en la propiedad Title
Nota: Para recordar la sintaxis de las CSS podemos hacer clic sobre Apéndice - CSS2 - Hojas de estilo en cascada.
El botón
Al hacer clic sobre este botón, nos aparece el esqueleto de la página JSP que nos ha creado el asistente de NetBeans.
Este es el código de la Página JSP RegistroUsuario.jsp.
Nota: Para recordar la Sintaxis de las páginas JSP podemos ir a Apéndice - Sintaxis de las páginas JSP.
<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:webuijsf="http://www.sun.com/webui/webuijsf"
>
<jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
<f:view>
<webuijsf:page id="page1">
<webuijsf:html id="html1">
<webuijsf:head id="head1" title="Registro Usuaro">
<webuijsf:link id="link1" url="/resources/stylesheet.css"/>
</webuijsf:head>
<webuijsf:body id="body1" style="-rave-layout: grid">
<webuijsf:form id="form1"/>
</webuijsf:body>
</webuijsf:html>
</webuijsf:page>
</f:view>
</jsp:root> |
- <jsp:root
- representa al elemento raíz de la página JSP
- indica al Contenedor Web que la página JSP está escrita con sintaxis XML
- define a través de atributos espacios de nombre (namespaces) para localizar librerías de etiquetas (tag libraries)
- version="2.1"
- este atributo es obligatorio
- indica la versión de la especificación de las Páginas JSP que esta página está utilizando
- xmlns:h="http://java.sun.com/jsf/html"
- las etiquetas de esta Librería de Etiquetas (Tag Libraries) se utilizan para generar etiquetas propias de HTML
- xmlns:f="http://java.sun.com/jsf/core"
- las etiquetas de esta Librería de Etiquetas (Tag Libraries) son independientes de la tecnología de renderización
- xmlns:webuijsf="http://www.sun.com/webui/webuijsf"
- las etiquetas de esta Librería de Etiquetas (Tag Libraries) son componentes WoodStock
- WoodStock son componentes de usuario para la Web basados en JavaServer Faces y AJAX (Asynchronous JavaScript Technology and XML)
- <f:view>
- alberga todos los componentes de la página JSP
- <webuijsf:head id="head1" title="Registro Usuaro">
- el título de la página lo escibimos anteriormente en la ventana de propiedades de los componentes
- <webuijsf:link id="link1" url="/resources/stylesheet.css"/>
- la Hoja de Estilo externa también la vimos escrita en la ventana de propiedades de los componentes
- <webuijsf:body id="body1" style="-rave-layout: grid">
- el estilo del cuerpo de la pçagina también lo vimos escrito en la ventana de propiedades de los componentes con el valor Grid Layout
- <webuijsf:form id="form1"/>
- es el formulario que albergará los diferentes componentes woodStock
El botón
Al hacer clic sobre este botón, nos aparece el esqueleto de la Clase RegistroUsuario que nos ha creado el asistente de NetBeans.
Las Clases como RegistroUsuario reciben el nombre de Backing Beans o Page Beans. Las responsabilidades de este tipo de Clases son
- tratar las acciones que realiza el usuario cuando está interactuando con la página
- relacionarse con los componentes de la página a través de getters y setters
Este es el esqueleto del Backing Bean RegistroUsuario
package paqregusuariovwjsf;
import com.sun.rave.web.ui.appbase.AbstractPageBean;
import javax.faces.FacesException;
public class RegistroUsuario extends AbstractPageBean {
private void _init() throws Exception {
}
public RegistroUsuario() {
}
@Override
public void init() {
super.init();
try {
_init();
} catch (Exception e) {
log("RegistroUsuario Initialization Failure", e);
throw e instanceof FacesException ? (FacesException) e: new FacesException(e);
}
}
public void preprocess() {
}
@Override
public void prerender() {
}
@Override
public void destroy() {
}
protected RequestBean1 getRequestBean1() {
return (RequestBean1) getBean("RequestBean1");
}
protected ApplicationBean1 getApplicationBean1() {
return (ApplicationBean1) getBean("ApplicationBean1");
}
protected SessionBean1 getSessionBean1() {
return (SessionBean1) getBean("SessionBean1");
}
}
|
