Tutorial Proyecto Web Con Eclipse

Si se han seguido todos los tutoriales anteriores (Instalación Eclipse, Instalación Plugin, Instalación Servidor), ha estas alturas ya debemos tener nuestro ambiente de desarrollo listo para trabajar.

En este tutorial vamos a crear un proyecto Web con un pequeño Demo de aplicación funcional, Mediante eclipse crearemos un nuevo proyecto JSF (Java Server Faces) y realizaremos una serie de configuraciones que nos permitirán generar nuestro código fuente Base desde el cual podremos seguir trabajando.......................Empecemos.

Requisitos.

IDE Eclipse

Plugin JBoss Tools
JBoss 4.2.3.GA
JDK 1.6

Variable de Entorno JBOSS_HOME

Variable de Entorno JAVA_HOME

Creación Del Proyecto.

Desde Eclipse vamos a "File/New/Other..." allí se cargará una ventana donde ingresaremos en el campo la palabra jsf, de esta forma nos aparece la opción de JSF Project (Recordemos que para que esta opción este disponible, debe estar previamente instalado el plugin JBoss Tools), la seleccionamos y damos click en Next

 

Posteriormente ingresamos el nombre del proyecto, dejamos el campo por defecto “JSF Environment” y seleccionamos en “Template” la opción “JSFKickStartWithoutLibs”, con esto,  le decimos a Eclipse que vamos a crear un demo de una aplicación web (el demo es muy básico pero cuenta con interfaz gráfica, bean y reglas de navegación), sino entonces crearíamos el proyecto en blanco, solo con la estructura y configuración inicial.

Presionamos Next, acto seguido se carga una ventana donde debemos configurar el servidor de nuestra aplicación, (eso sucede porque no se asignó previamente el servidor) indicándonos que el server es requerido, presionamos en New… para asociar el servidor.

Se cargará una ventana donde seleccionaremos el server con el que vamos a trabajar, para este caso usaremos JBoss4.2.3.GA que instalamos previamente en algún directorio de nuestra máquina.

Damos Click en Next y se carga otra ventana indicándonos que se debe asignar la ruta donde se encuentra alojado server, para esto presionamos en el botón Browse… y buscamos el directorio de instalación del JBoss

Después de encontrar el directorio lo seleccionamos y regresamos a la ventana inicial con la configuración deseada.

Como vemos ya no tenemos ningún error o advertencia, ahora solo nos queda dar en Finish para crear el proyecto, después de esto se cargara una ventana de dialogo donde nos preguntan si deseamos cambiar a la perspectiva “Web Development perspective” esto es opcional.

Como vemos nuestro proyecto fue creado, y en caso de haber seleccionado "Yes" en la ventana de dialogo, estaremos en la perspectiva mencionada (Se puede evidenciar en la esquina superior derecha de Eclipse)

Esta perspectiva está más orientada al diseño, puesto que simplemente con arrastrar y soltar podemos agregar componentes a nuestras páginas, más adelante veremos cómo.

Si no se definió esta perfectiva igual seguiremos trabajando normalmente (para los que no nos gusta arrastrar y soltar) pero en caso de que queramos acceder a ella, simplemente por "Windows/Open Perspective" la buscamos y listo.

Ya teniendo nuestro proyecto creado, vamos a hacer un pequeño recorrido por la estructura del mismo, podemos empezar ya, pero a modo personal me gusta trabajar con la vista Navigator ya que me parece un poquito más ordenada, sin embargo pueden seguir trabajando por el Project Explorer (Es cuestión de gustos…) Para esto seleccionamos “Window/Show View/Navigator”

y listo, tenemos la nueva opción de navegación, ahora sí, veamos la estructura del proyecto.

Como vemos tenemos nuestro proyecto web funcional, tenemos el archivo index.jsp, el directorio JavaSource que contiene la clase User.java, un bean creado por defecto, que tiene los métodos set y get necesarios, Tenemos también un archivo de propiedades donde se establecen todos los mensajes o texto que tendrán las etiquetas del aplicativo. También podemos ver un directorio pages que contiene las pantallas de la aplicación y dentro del WEB-INF encontramos por ejemplo el archivo faces-config.xml con las reglas de navegación entre páginas.

Si ingresamos a la página inputUserName.jsp vemos que gracias al plugin JBoss Tools podemos trabajar con las opciones de solo código, código y pantalla, además de una vista previa de lo que estamos haciendo. 

En la imagen anterior también se puede ver en el panel de la derecha las opciones que brinda la perspectiva recomendada por eclipse, como se mencionó anteriormente solo sería cuestión de elegir el componente que necesitamos y arrastrarlo al código.

Carga del Servidor desde Eclipse

Para poder desplegar nuestra aplicación, tenemos que hacer uso del servidor, para eso desde Eclipse, en caso de que no se encuentre la vista de servidores, se cargará desde Windows/Show view/Server allí presionamos click derecho y agregamos new server

Se cargará nuevamente una ventana donde definiremos el servidor a utilizar, realizando un proceso similar a los anteriores, nuevamente escogemos JBoss v4.2 y presionamos finish.

Vemos como ha quedado agregado correctamente el servidor.

Ahora aumentaremos el tiempo de espera del servidor, ya que en ocasiones cuando tenemos aplicaciones muy grandes, el servidor no permite el despliegue, pues por defecto el tiempo de espera es muy corto,  para esto simplemente damos doble click en el server y aumentamos el tiempo en la opción TimesOuts

Ahora para el despliegue de la aplicación desde eclipse podemos pararnos en el servidor y dar click derecho, luego seleccionar la opción Run o simplemente desde este mismo icono en las opciones de la esquina.

Luego de esto se muestra el progreso del despliegue desde la consola de Eclipse, vemos que todo está correcto y esperamos hasta que nos indique que se ha iniciado, también se pueden ver otras opciones, por ejemplo desde el cuadrito rojo podemos finalizar el despliegue (Vemos que es igual al despliegue desde el run.bat del servidor como evidenciamos en el tutorial anterior).

Ahora para ejecutar nuestra aplicación, damos click derecho al index.jsp y seleccionamos run as/run on server (En algunas versiones de Eclipse, haciendo esto no permite la ejecución desde el index, tendríamos que verificar haciendo lo mismo pero desde la página inputUserName.jsp, posiblemente se deba a algún error en el plugin)

Acto seguido se carga una ventana indicándonos el servidor configurado, presionamos Next.

  

Después se carga otra donde nos da la opción de agregar el proyecto que queremos desplegar, en caso de que no esté agregado previamente, o si queremos agregar otros proyectos asociados al nuestro.

Al presionar Finish se abre un navegador propio de eclipse donde podemos ver nuestra aplicación en funcionamiento.

La aplicación cuenta con reglas de navegación definidas, también el campo se encuentra validado, por ejemplo, si ingresamos una cadena menor a 3 caracteres, nos informará mediante un error en pantalla.

Luego nos devolvemos usando la flecha "atrás" del navegador e ingresamos un nombre valido, presionamos el botón y ahora si nos redirecciona a otra página enviando el nombre ingresado como parámetro.

También podemos ver la aplicación desde cualquier navegador, simplemente copiamos la ruta generada y con el servidor arriba la podemos probar.

Si vamos a la carpeta deploy de nuestro servidor, vemos que se ha generado un archivo .war el cual es el empaquetado del proyecto, lo que permite que la aplicación sea desplegada.

Debemos tener en cuenta que este archivo se genera porque desplegamos el proyecto desde Eclipse, definimos cual servidor asociar y dimos Run desde ahí, entonces el IDE lo que hace es leer esas configuraciones y almacenar el empaquetado en la carpeta Deploy.

también podemos desplegar la aplicación desde el run.bat como vimos en otro tutorial, pero la aplicación que se desplega es la ultima almacenada en el server, ya que los cambios que hagamos, para que se puedan evidenciar, tendríamos que desplegarlos desde el Eclipse.

En el próximo tutorial, veremos una forma de automatizar ese proceso por medio de tareas Ant, las cuales podemos configurar para que al ejecutar una tarea, se realicen una serie de pasos predefinidos como por ejemplo generar el empaquetado del proyecto, establecer la ruta del mismo, copiarlo a otro directorio, generar documentación, entre muchas otras opciones que esta herramienta nos ofrece.

Nos vemos en una próxima entrada!!!

También te podría Interesar. 

• Tutorial Aplicaciones Web con Jboss Seam
• Instalando el Plugin JBoss Tools En Eclipse
• Trabajando con SVN desde Eclipse
• Leer Archivo Properties en Java
• Despliegue de Aplicación Web Con Ant
• Instalación del servidor de aplicaciones JBoss
• Configuración Ambiente de Desarrollo... Descarga de Eclipse

¿Hay algo que quieras anexar o comentar sobre esta entrada?  no dudes en hacerlo....