< Anterior | Siguiente >

Lección 5: Crear una página web

En esta lección creará una página web con la forma de un archivo JSP Faces. En la lección siguiente, añadirá datos a esta página mediante los componentes de datos y las funciones creadas en la lección anterior. Cuando la página esté acabada, mostrará una lista de cada registro de la base de datos.
En esta guía de aprendizaje se utiliza la tecnología JavaServer Faces (JSF). JSF ofrece una infraestructura para el desarrollo de interfaces de usuario para aplicaciones web. En JSF, las páginas Web son páginas JavaServer (JSP). Las JSP contienen controles JavaServer que pueden utilizarse para incorporar código Java a la página para suministrar contenido dinámico.

Crear el archivo JSP a partir de una plantilla

  1. En la vista Explorador de empresa, pulse con el botón derecho sobre la carpeta WebContent en el proyecto EGLWeb y a continuación pulse Nuevo > Página web. Es importante seleccionar el lugar en el que desea colocar los archivos nuevos, ya que de lo contrario puede que éstos no aparezcan en el lugar esperado. Se abre la ventana Página Web nueva.
  2. En el campo Nombre de archivo, teclee este nombre de archivo, incluyendo la extensión:
    allcustomers.jsp
  3. Asegúrese de que en el campo Carpeta aparezca la carpeta /EGLWeb/WebContent.
  4. En la lista Plantilla, expanda Plantillas de ejemplo y pulse Familia A (sin navegación). Las plantillas de página web simples de esta categoría se muestran en el recuadro Vista previa.
  5. En el recuadro Vista previa, pulse la plantilla A_gray.htpl.
  6. Compruebe que el recuadro de selección Enlazar página con plantilla esté seleccionado.

    La ventana Página web nueva tiene el aspecto siguiente:

    Pantalla Archivo JSP Faces nuevo

  7. Pulse Finalizar. El archivo JSP Faces nuevo se abre en el editor.
  8. Pulse Diseño para visualizar la vista de diseño en la ventana completa del editor. Aparecerá la vista Rastreo JSF a la derecha la ventana del editor. Eclipse crea esta vista de forma predeterminada, compartiendo espacio con la vista Paleta y otras. No necesita la vista Rastreo JSF para esta guía de aprendizaje. Puede cerrarla pulsando la X de la pestaña.
    La vista Rastreo JSF puede mostrar un triángulo de aviso amarillo.
    Normalmente, querrá visualizar la paleta en esta vista. Deberá pulsar la flecha doble pequeña y seleccionar la vista Paleta de un menú:
    Seleccionar la vista Paleta.
  9. En el archivo allcustomers.jsp, elimine el texto predeterminado que reza "Ponga aquí el contenido de la página" y sustitúyalo por el texto siguiente:
    Lista de todos los clientes
  10. Pulse Intro tres veces para insertar líneas en blanco. Estas líneas dejan espacio para que añada contenido a esta página en la lección siguiente.

    La página tiene este aspecto:

    Aspecto de la página

  11. Guarde el archivo.

Vista previa de la página web en el servidor

Todavía no hay datos de la base de datos en la página web pero puede ejecutar el archivo JSP en el servidor de aplicaciones web y ver qué aspecto tiene la página. Este es un paso importante: garantiza que el servidor de aplicaciones funciona correctamente antes de que la página se complique.
  1. Asegúrese de que el servidor de aplicaciones se ha iniciado. El nombre del servidor debe ser visible en la vista Servidores (ubicada por omisión debajo de la vista del editor). El servidor debe mostrar las palabras Iniciado y Sincronizado entre paréntesis, después del nombre. Si no es así, pulse el nombre del servidor con el botón derecho del ratón y pulse Iniciar. El proceso de inicio puede tardar unos pocos minutos.
    WebSphere Application Server se inicia y se sincroniza
  2. En la vista Explorador de empresa, expanda la carpeta EGLWeb/WebContent si es necesario. Pulse el archivo allcustomers.jsp y pulse Ejecutar como > Ejecutar en servidor. Se abre la ventana Definir un servidor nuevo.
  3. En la ventana Definir un servidor nuevo, seleccione el servidor.
  4. Marque el recuadro de selección Utilizar siempre este servidor al ejecutar este proyecto.
    El servidor está seleccionado.
  5. Pulse Finalizar.

La página web se abre en un navegador web dentro del entorno de trabajo. La página tiene el aspecto siguiente:

Aspecto de la página en el navegador web interno

Si ve un mensaje de error HTTP 404 (página no encontrada), reinicie el servidor y renueve la ventana del navegador.

Si prefiere utilizar un navegador web externo, puede copiar el URL del navegador web dentro del entorno de trabajo y pegar ese URL en el campo de dirección del navegador externo.

Eclipse mostrará de nuevo la vista Rastreo JSF. Puede eliminar permanentemente la vista desplazándose hacia abajo hasta que encuentre un enlace que rece No volver a abrir y pulsando ese enlace.
Opciones para tratar con la vista Rastreo JSF.

Esta página no tiene datos todavía. En la próxima lección añadirá datos a esta página mediante EGL.

< Anterior | Siguiente >

Comentarios