| Registrar a un usuario en un sitio Web con Visual Web JSF |
| Paso 4: Operativa |
Vista - RegistroUsuario.jsp - Agregar componente Image al lienzo
Para descargarnos la imagen de un asterisco (
) y situarla en una carpeta de imagenes de nuestro proyecto vamos a relaizar los siguientes pasos
- en la ventana Projects vamos a crear una carpeta llamada imagenes debajo de proregusuariovwjsf | Web Pages
- para descargarnos la imagen en cuestión, hacemos clic sobre imagenAsterisco.zip que contiene el fichero
asterisco.gif
- colocamos la imagen descargada bajo la siguiente estructura de directorios C:\isg\javaee\prosjava\proregusuariovwjsf\web\imagenes
Ahora vamos a situar una imagen en el lienzo arrastrando el icono Image en dicho lienzo
Vamos a cambiar la propiedad id a imgAsterisco y seguidamente vamos a hacer clic sobre el botón con puntos supensivos 
que se encuentra a la derecha de la propiedad url de este componente
En el cuadro de diálogo imgAsterisco - url, seleccionamos la imagen asterisco.gif y seguidamente hacemos clic sobre el botón 
Ahora vamos a cambiar los estilos de posicionamiento de las siguientes propiedades
El lienzo nos ha quedado de la siguiente forma
Esta es la página JSP RegistroUsuario.jsp después de añadir un componente Image
<?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>
<f:loadBundle basename="paqregusuariovwjsf.Bundle" var="mensajes"/>
<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:staticText id="stxRegistroUsuario"
style="font-size: 24px; font-weight: bold;
left: 210px; top: 10px; position: absolute" text="#{mensajes.literal_registroUsurario}"
/>
<webuijsf:staticText id="stxCamposRequeridos"
style="font-size: 10px;
left: 280px; top: 40px; position: absolute" text="#{mensajes.literal_camposRequeridos}"
/>
<webuijsf:label for="nombre"
id="lb1nombre"
style="left: 28px; top: 80px; position: absolute" text="#{mensajes.literal_nombre}"
/>
<webuijsf:textField required="true"
id="nombre"
style="left: 28px; top: 100px; position: absolute"
/>
<webuijsf:message for="nombre" id="msgNombre"
showDetail="false" showSummary="true"
style="left: 28px; top: 123px; position: absolute"
/>
<webuijsf:button id="btnEnviar"
style="position: absolute; left: 96px; top: 168px" text="#{mensajes.literal_enviar}"
/>
<webuijsf:image id="imgAsterisco" style="left: 265px; top: 39px; position: absolute" url="/imagenes/asterisco.gif"
/>
</webuijsf:form>
</webuijsf:body>
</webuijsf:html>
</webuijsf:page>
</f:view>
</jsp:root> |
Esta es la página Web que recibe el usuario cuando se ejecuta la aplicación Web
