JavaDabbaDoo.org -Tu comunidad Java parlante 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.

NetBeans 6 - Nueva regla CSS - Create Rule

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

NetBeans 6 - Nueva regla CSS - Create Rule

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

NetBeans 6 - Nueva regla CSS - Style Rule Editor - HTML Element: body

para salir de este cuadro de diálogo hacemos clic sobre el botón OK

NetBeans 6 - Nueva regla CSS - Style Rule Editor - OK

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.

NetBeans 6 - Nueva regla CSS - body - Style Builder

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

NetBeans 6 - Projects | proregusuariomvc | Web Pages | index.jsp

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>
Página anterior
Ignasi Pérez Valls
Infosintesis Solutions Group


Febrero 2009
Dudas y comentarios: Foro [3-02] Implementar Patrón de diseño MVC
 
 
 
 
JavaDabbaDoo.org
Tu comunidad Java parlante. Cursos abiertos, tutoriales y mucho mucho más ...