miércoles, 24 de abril de 2013

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!!!

26 comentarios:

  1. Hola Cristian,
    Estoy siguiendo tu tutorial y me encontré con este mensaje al ejecutar el servidor:


    Starting JBoss v4.2 at localhost has encountered a problem
    Server port In Use 8080-Http

    No se cómo proceder, pero también tengo instalado XAMMPP control panel con Apache y MySql, acabo de hacer un curso de programación Android, quizás hay algún problema de compatibilidad.........

    Saludos desde Barcelona, España
    Maria Beltrán

    ResponderEliminar
    Respuestas
    1. Hola Mar, el error es porque el puerto por defecto es el 8080, solo que este puerto lo usan otras aplicaciones y posiblemente lo tienes configurado en otra parte...... algo que puedes hacer es o bien finalizar la aplicación que use el puerto, o ingresar con doble clic al server ahí en eclipse y darle otro puerto al server, puede ser el 8090 u otro que esté libre...... espero que te sirva ;)

      Eliminar
    2. Hola Cristian, esto se me complica ya que además de no arrancar el servidor por timeout (y le he regalado tiempo) , hay problemas con el Visual page Editor.
      He consultado con JBoss Comunity y debo hacer unos cambios

      Me han aconsejado cambiar de versión de Eclipse y de JBoss tools ya que tengo un W8.1
      Me han dado este link que creo muy interesante para todos

      https://community.jboss.org/wiki/MatrixOfSupportedPlatformsRuntimesAndTechnologiesInJBossToolsJBDS

      Te tendré al día con respecto a este incidente a ver si consigo seguir tus tutoriales ya que son realmente interesantes.

      María Beltrán

      Eliminar
    3. Hola Mar, hace un mes aproximadamente tuve un problema similar al tuyo, me tiraba el error del tiempo excedido para arrancar el servidor y también le di más tiempo, liberé los puertos de comunicación que utiliza y tampoco me sirvió, intenté de todo sin saber lo que ocasionaba mi problema, el problema fue que actualicé a la ultima versión de Java (7u45) desde ese momento ya no me arrancó el servidor y tuve otros problemas jejeje me regresé a la versión anterior de Java(7u40) y todo me va de maravilla, no digo que con esto se arregle tu problema pero a mi me funcionó :D, saludos desde México.

      Eliminar
  2. Hola amigo, una pregunta, para ti que diferencia tiene el trabajar como servidor JBoss y TomCat?

    ResponderEliminar
    Respuestas
    1. Hola Bvida_100 no podria darte una respuesta 100% certera, sin embargo tengo entendido que JBoss es un servidor de Aplicaciones mucho mas robusto (Hasta donde se, tomcat es un contenedor web) y mucho mas enfocado a tecnologias EJB, muchas empresas que conozco trabajan con el Jboss precisamente por esa seguridad que brinda....

      Eliminar
  3. Hola Cristian Henao, primeramente felicitarte por tan buen material, quisiera saber cual es el link del siguiente tutorial que es las automatizaciones con ANT, muchas gracias y sigue adelante

    ResponderEliminar
    Respuestas
    1. Hola Abel, gracias por comentar, te cuento que el link està ahì en los enlaces al final de la entrada o tambien puedes ver en la parte superior el boton "indice de contenido", la parte de ant esta en los 2 ultimos enlaces de la primera seccion sobre configurar un ambiente de desarrollo....un saludo ;)
      http://codejavu.blogspot.com/p/blog-page_12.html

      Eliminar
  4. Muy buen tutorial :) me sirvió mucho. Me encanta este blog

    ResponderEliminar
    Respuestas
    1. Uy Laurita muchas gracias, me alegra que te gustara :) , gracias por comentar

      Eliminar
  5. esta bien detallado, no te olvides en publicar mas cosas y gracias por todo man.!
    donde puedo hacer algunas consultas.!se podrá aquí en tu blog??

    ResponderEliminar
    Respuestas
    1. Hola, claro desde que pueda y tenga tiempo no hay problema ;)

      Eliminar
  6. hola disculpa la molestia, primero decirte q esta muy bueno el tutorial, te felicito.
    pero sabes q en la pantalla para elegir el servidor no me aparece la carpetita de jboss con las diferentes versiones del jboss y entonces no puedo elegir el 4.2.3. tendras una idea de por que?
    el paso q tengo problema es en "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."
    desde ya muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Hola, posiblemente sea la versión de Eclipse con la que trabajes, pero no sabria realmente si es por ese motivo, me parece extraño, mira en mi canal de youtube hay algunos videos que depronto te sirven ;) un saludo

      Eliminar
  7. Hola muy buen tutorial, pero seria interesante que también lo puedes hacer en Videos y publicarlos..seria genial, gracias

    ResponderEliminar
    Respuestas
    1. Hola, claro mira tengo algunos videos sobre el tema, te comparto uno ;)
      https://www.youtube.com/watch?v=SAfGl7XbFNI

      Eliminar
  8. Hola, mira no tienes alguno donde uses algún tipo de Framework como ZK o PrimeFaces

    ResponderEliminar
  9. Si bien han salido diversos programas, lenguajes y aplicaciones para creár páginas web, yo me inclino por el desarrollo con php, puesto que es mas compatible y portable, no digo que este tutorial no otorge algo, si no que eclipse se debe enfocar mas en el desarrolo de software y no de sitios web. saludos

    ResponderEliminar
  10. Feliz tarde..Quiero felicitarte por tu pedagogia..siendo tan extenso y complejo..Desearia un ejemplo mas a un ejemplo..de dia a dia del programador..

    ResponderEliminar
  11. Quisiera poder apreciar un ejemplo sencillo..usando mvc..iniciando un menu sencillo con 2 opciones.1 Empresa . 2 Productos..Con base de datos mysql."Empresa" CodigoEmp char 10, Descripcion Vchar 180, FechaSistema Date; "Producto" CodigoProd Char 4, DescripcionProd Varchar 200, FechaSistema Date, Aplicar Crud..Al llamado de programa en cada opcion. Usando formularios. GRACIAS

    ResponderEliminar

Eres libre de realizar cualquier comentario, desde que pueda ayudar con gusto lo atenderé, y si es un critica, bienvenida sea!!!