| Implementar el patrón MVC | |
| Inicio | Cursos infosintesis.net liberados | Java EE | Registrar a un usuario en un sitio Web (MVC) | |
| Registrar a un usuario en un sitio Web (MVC) | |
| Paso 3: Operativa |
Vista - index.jsp - Relacionar la página JSP a una hoja de estilo externa
Antes de relacionar la página JSP index.jsp a una Hoja de estilo en cascada externa, vamoa a crear la CSS en cuestión siguiendo el guión del siguiente vínculo Apéndice - Crear una Hoja de estilo en cascada
Este es el código del fichero estilos.css generado por el asistente de NetBeans.
| root { display: block; } |
Ahora vamos a borrar la regla root por completo de tal forma que el fichero estilos.css se quede vacío.
|
Nota: Para recordar la sintaxis de las CSS podemos hacer clic sobre Apéndice - CSS2 - Hojas de estilo en cascada.
NetBeans tiene un asistente que nos ayuda a escribir hojas de estilo en cascada. En nuestro caso vamos a crear una nueva regla basada en el selector body. Este es el resultado final que queremos conseguir con ayuda del asistente de NetBeans.
| body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } |
Para crear la regla body hacemos clic con el botón derecho del ratón sobre un espacio en blanco del fichero estilos.css y seleccionamos Create Rule.

también podemos conseguir el mismo objetvio haciendo clic sobre el botón Create Rule.

en el cuadro de diálogo Style Rule Editor marcamos el radio button HTML Element y seleccionamos body

para salir de este cuadro de diálogo hacemos clic sobre el botón ![]()

Para que la propiedad font-family tenga los valores Arial, Helvetica, sans-serif en la pestaña Font marcamos los valores correspondientes. Y para que la propiedad font-size tenga el valor 12, marcamos este valor en la lista de tamaños de fuentes de la misma pestaña Font. Como podemos observar, en la ventana body - Preview se van mostrando los cambios que estamos realizando.

La página index.jsp que nos proporciona NetBeans la encontramos en la carpeta Web Pages de nuestro proyecto

Este es el contenido de esta página JSP. Como podemos observar le hemos cambiado el título de la página original y le hemos añadido un elemento <link> para que esta página sepa donde está ubicada la hoja de estilo en cascada externa.
| <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Formulario Registro usuario</title> <link rel="stylesheet" href="/proregusuariomvc/css2/estilos.css" type="text/css"> </head> <body> <h2>Hello World!</h2> </body> </html> |