Contenido

Informacin sobre la instalacin. ........................................................................................................ 2

Instalacin del JDK 1.6_27................................................................................................................... 3
Instalacin de Tomcat 7.0.20 .............................................................................................................. 6
Instalacin de Eclipse como entorno de desarrollo .......................................................................... 11
Agregar la perspectiva SQL Explorer ............................................................................................. 16
Manejo de JSP y JSF desde Eclipse: ................................................................................................... 27
Un hola mundo con JSF ................................................................................................................. 27
Preparacion de eclipse: ................................................................................................................. 27
Elegir implementacin de JSF.................................................................................................... 27
Elegir servidor de aplicaciones ...................................................................................................... 28
Habilitar procesamiento de anotaciones ...................................................................................... 28
Creacion del proyecto en eclipse: ................................................................................................. 28
Creacion de un ManagedBean ...................................................................................................... 30
Creacion de una pagina HTML ...................................................................................................... 31
Una vez salvado el fichero "hola.xhtml", con el botn Arrancar la aplicacin: ..................... 32

ISC Victor Alonso Montoya de los Rios

Ilustracin 1 ......................................................................................................................................... 3
Ilustracin 2 ......................................................................................................................................... 4
Ilustracin 3 ......................................................................................................................................... 4
Ilustracin 4 ......................................................................................................................................... 5
Ilustracin 5 ......................................................................................................................................... 6
Ilustracin 6 ......................................................................................................................................... 6
Ilustracin 7 ......................................................................................................................................... 7
Ilustracin 8 ......................................................................................................................................... 7
Ilustracin 9 ......................................................................................................................................... 8
Ilustracin 10 ....................................................................................................................................... 8
Ilustracin 11 ....................................................................................................................................... 9
Ilustracin 12 ..................................................................................................................................... 10
Ilustracin 13 ..................................................................................................................................... 10
Ilustracin 14 ..................................................................................................................................... 11
Ilustracin 15 ..................................................................................................................................... 12
Ilustracin 16 ..................................................................................................................................... 13
Ilustracin 17 ..................................................................................................................................... 14
Ilustracin 18 ..................................................................................................................................... 14
Ilustracin 19 ..................................................................................................................................... 15
Ilustracin 20 ..................................................................................................................................... 15
Ilustracin 21 ..................................................................................................................................... 16
Ilustracin 22 ..................................................................................................................................... 17
Ilustracin 23 ..................................................................................................................................... 18
Ilustracin 24 ..................................................................................................................................... 18
Ilustracin 25 ..................................................................................................................................... 19
Ilustracin 26 ..................................................................................................................................... 19
Ilustracin 27 ..................................................................................................................................... 20
Ilustracin 28 ..................................................................................................................................... 21
Ilustracin 29 ..................................................................................................................................... 22
Ilustracin 30 ..................................................................................................................................... 22
Ilustracin 31 ..................................................................................................................................... 23
Ilustracin 32 ..................................................................................................................................... 24
Ilustracin 33 ..................................................................................................................................... 25
Ilustracin 34 ..................................................................................................................................... 26
Ilustracin 35 ..................................................................................................................................... 26
Ilustracin 36 ..................................................................................................................................... 27
Ilustracin 37 ..................................................................................................................................... 29

ISC Victor Alonso Montoya de los Rios

Preparar una PC con Tomcat y Eclipse

Informacin sobre la instalacin.
La siguiente gua de instalacin se realiz sobre un sistema operativo
Windows 7 Home Basic de 32 bits.
Instalacin del JDK 1.6_27
Primeramente desinstalar cualquier jdk instalado anteriormente en el
equipo desde el panel de control.
Al hacer doble click sobre el instalador se abrir la siguiente pantalla:

Ilustracin 1

Presionar Next para abrir la siguiente pantalla:

ISC Victor Alonso Montoya de los Rios

Ilustracin 2

Cambiar la ubicacin que el instalador trae por defecto a la siguiente

ubicacin:
C:\JAVA\jdk1.6.0_27\

(Copiar y pegar la ubicacin)

Deber quedar del siguiente modo:

Ilustracin 3

ISC Victor Alonso Montoya de los Rios

Presionar Next > para que comience la instalacin.

La instalacin del jre6 dejarla tal cual aparece la ubicacin y dar Next >
Por ultimo presionar finish:

Ilustracin 4

ISC Victor Alonso Montoya de los Rios

Instalacin de Tomcat 7.0.20

Ir a C:\ y en esta carpeta crear una carpeta con el nombre appserv
Hacer doble click en el instalador para que inicie el asistente:

Ilustracin 5

Presionar Next >

Ilustracin 6

Dar click en I Agree.

6

ISC Victor Alonso Montoya de los Rios

Click en Next >

Ilustracin 7

Dejar los valores por defecto, solamente aadir un usuario y

contrasea que fungir como administrador de nuestro Tomcat.
En la siguiente pantalla indicar la ubicacin de la instalacin de
nuestro jdk tal como muestra la figura:

Ilustracin 8

ISC Victor Alonso Montoya de los Rios

Cambiar la ubicacin de tomcat a C:\appserv\tomcat 7.0 tal como

muestra la figura:

Ilustracin 9

Presionar finish para iniciar el servidor Tomcat:

Ilustracin 10

Aparecer un block de notas mostrando informacin de la instalacin,

esta ventana puede cerrarse.
8

ISC Victor Alonso Montoya de los Rios

En el rea de notificaciones deber de aparecer el icono del servidor

tomcat:

Ilustracin 11

Ir a la ubicacin:
C:\appserv\Tomcat 7.0\bin
Windows vista en adelante:
Dar click derecho en el fichero Tomcat7w.exe, propiedades, e ir a la
pestaa de compatibilidad y seleccionar Ejecutar como administrador.
Dar nuevamente click derecho, Enviar a, Escritorio (Acceso directo).
Windows XP:
Dar click derecho en el fichero Tomcat7w.exe, Enviar a, Escritorio
(Acceso directo).
Cada vez que se deseara ejecutar deber darse click derecho y
ejecutar como administrador.
Con esto podremos abrir el monitor de nuestro Servidor.

Abrir el navegador web y en la barra de direcciones ir a la siguiente

direccin:
http://localhost:8080

ISC Victor Alonso Montoya de los Rios

Deber aparecer la siguiente pgina:

Ilustracin 12

Al presionar cualquiera de estas 3 opciones se nos pedir el nombre

de usuario y contrasea que le indicamos al asistente, con los cuales
podremos ver las aplicaciones que tenemos en nuestro servidor.

Ilustracin 13

En caso de ser necesario un cambio en el usuario, esto se puede

realizar en el archivo:
C:\appserv\Tomcat 7.0\conf\tomcat-users.xml
Las aplicaciones debern estar guardadas dentro de la carpeta en
forma de proyectos:
C:\appserv\Tomcat 7.0\webapps
10

ISC Victor Alonso Montoya de los Rios

Instalacin de Eclipse como entorno de desarrollo

Descomprimir los archivos comprimidos:
sqlexplorer_plugin-3.6.1_SR4.zip
eclipse-jee-helios-SR2-win32.zip
El contenido de SQL Explorer ser el siguiente:

Ilustracin 14

11

ISC Victor Alonso Montoya de los Rios

El contenido de eclipse ser el siguiente:

Ilustracin 15

La operacin que debe realizarse es la siguiente:

1.- Copiar el contenido de la carpeta plugins de SQL Explorer dentro
de la carpeta plugins de eclipse.
2.- Copiar el contenido de la carpeta features de SQL Explorer dentro
de la carpeta features de eclipse
3.-Copiar el archivo change_log directamente dentro de la carpeta de
eclipse.
Una vez realizado esto, la carpeta de SQL Explorer se puede
desechar.
La carpeta llamada eclipse debe cambiarse a la siguiente localizacin:
C:\JAVA
12

ISC Victor Alonso Montoya de los Rios

Ilustracin 16

De este modo tanto eclipse como el jdk queden ubicados dentro de la

misma carpeta.

13

ISC Victor Alonso Montoya de los Rios

Ahora proceder como muestra la imagen para enviar el acceso directo

al escritorio:

Ilustracin 17

Aparecer el Acceso directo:

Ilustracin 18

Hacer doble click para iniciar el IDE.

14

ISC Victor Alonso Montoya de los Rios

Nos aparecer la siguiente pantalla, solo hay que presionar OK:

Ilustracin 19

Al cerrar la pantalla de bienvenida veremos por primera vez la

perspectiva de desarrollo:

Ilustracin 20

15

ISC Victor Alonso Montoya de los Rios

Agregar la perspectiva SQL Explorer

Como primer paso, debemos considerar que nuestras aplicaciones en

Java utilizan un driver denominado JDBC (Provisto por nuestro
Proveedor de la base de datos) por lo tanto debemos tener este
archivo a la mano (En este caso se trata de ORACLE cuyo JDBC es
un fichero de nombre classes12.jar)
Para tener este fichero (classes12.jar) a la mano es conveniente
contenerlo en la ubicacin:
C:\JAVA\classes.jar

Ilustracin 21

Procederemos a dirigirnos a nuestro IDE Eclipse.

16

ISC Victor Alonso Montoya de los Rios

Una vez dentro de Eclipse procedemos tal como la imagen muestra a

continuacin:

Ilustracin 22

17

ISC Victor Alonso Montoya de los Rios

Enseguida seleccionamos SQL Explorer y damos OK:

Ilustracin 23

En la parte superior derecha ahora tendremos 2 perspectivas:

Ilustracin 24

18

ISC Victor Alonso Montoya de los Rios

Nos dirigiremos a la SQL Explorer para aadir un nuevo Connection

Profile con el cual podremos hacer querys a nuestra base de datos:

Ilustracin 25

Nos aparecer el siguiente asistente para realizar la conexin a

nuestra base de datos (En este ejemplo ORACLE):

Ilustracin 26

19

ISC Victor Alonso Montoya de los Rios

Dentro del campo Name: pondremos un nombre con el cual

reconozcamos de que conexin se trata.
Como an no hemos agregado nuestro driver correspondiente, por el
momento el campo driver no nos muestra el que deseamos, para esto
iremos al botn Add/Edit Drivers:

Ilustracin 27

Donde Iremos a SQL Explorer > JDBC Drivers > Oracle Thin
Driver > Edit

20

ISC Victor Alonso Montoya de los Rios

Donde nos aparecer la siguiente pantalla:

Ilustracin 28

Donde iremos a la pestaa Extra Class Path ya continuacin

haremos click en Add JARs

21

ISC Victor Alonso Montoya de los Rios

Buscaremos nuestro fichero classes12.jar:

Ilustracin 29

Y a continuacin haremos click en List Drivers:

Ilustracin 30

22

ISC Victor Alonso Montoya de los Rios

Ahora en el campo Driver Class Name aparecern 2 Drivers con

nombres muy similares, elegiremos el que dice
oracle.jdbc.driver.OracleDriver
Y modificaremos el campo Example URL de acuerdo a la base de
datos ORACLE donde estaremos trabajando, ejemplo:

Ilustracin 31

23

ISC Victor Alonso Montoya de los Rios

Presionamos OK y ahora veremos que el campo Oracle Thin Driver

esta seleccionado, daremos OK:

Ilustracin 32

24

ISC Victor Alonso Montoya de los Rios

El formulario deber lucir de la siguiente manera:

Ilustracin 33

Nota: El usuario y contrasea debe ser proporcionado por el

administrador de la base de datos, as como la direccin de la misma.
En la parte superior izquierda deberemos ver que nos aparece nuestra
conexin a la base de datos con el usuario que ingresamos:

25

ISC Victor Alonso Montoya de los Rios

Ilustracin 34

Para poder realizar consultas Crearemos un nuevo archivo SQL:

Ilustracin 35

Ahora la pantalla debera ser como la siguiente y ya podremos realizar

consultas a nuestra base de datos:

26

ISC Victor Alonso Montoya de los Rios

Ilustracin 36

Manejo de JSP y JSF desde Eclipse:

Un hola mundo con JSF

Vamos a montar aqu desde casi cero un pequeo proyecto eclipse

con un "Hola Mundo" de Java Server Faces (JSF)
Preparacin de eclipse:
Elegir implementacin de JSF

La primera es indicarle que implementacin vamos a usar de JSF.

Para ello, en "window" -> "preferences" -> "java" -> "build path" ->
"user libraries", aadimos una librera nueva a la que podemos llamar
"mujarra" (el nombre del proyecto de la implementacin de JSF que
hemos descargado), o cualquier otro nombre que nos guste. Una vez
creada, y en la misma ventana, la seleccionamos y pulsamos el botn
"Add jars...". Buscamos el directorio lib de donde hayamos
desempaquetado nuestra implementacin de JSF y aadimos el jar
que aparecen ah javax.faces.jar.

27

ISC Victor Alonso Montoya de los Rios

Elegir servidor de aplicaciones

Lo segundo que necesitamos, es decirle a eclipse dnde tenemos la

instalacin de Tomcat. Para ello, en "windows" -> "preferences" ->
"server" -> "runtime environments" pulsamos el botn "Add".
Aparecer una ventana en la que debemos elegir qu servidor de
aplicaciones tenemos instalado y qu versin (tomcat, glassfish, etc).
Una vez elegido, le damos a "next" y en la siguiente ventana le
ponemos un nombre de nuestra eleccin que nos ayude a identificarlo
y ponemos el path donde tenemos instalado ese servidor (en mi caso
C:\appserv\Tomcat 7.0)
Habilitar procesamiento de anotaciones

En las propiedades del proyecto, en "java compiler" -> "Annotation

processing", asegurarnos que est marcada la casilla "Enable
annotation processing". Antes hay que crear el proyecto... segn el
siguiente punto.
Creacin del proyecto en eclipse:

En eclipse hacemos "File" -> "new" -> "Dynamic Web Project" y nos
saldr una ventana como la de ms abajo. En el men que aparece
desplegado en la foto de dicha ventana seleccionamos "java server
faces v2.0 project".
En la parte de "target runtime" debemos elegir el servidor tomcat que
tengamos instalado y que hemos configurado en el punto anterior, si
no lo tenamos ya.

28

ISC Victor Alonso Montoya de los Rios

Ilustracin 37

Vamos pulsando "next" varias veces, rellenando los campos que nos
pidan (dejando por defecto lo que no queramos cambiar). Hay dos
cosas que podemos tener en cuenta:

29

En una de las ventanas aparece un check para "generate web.xml

deployment descriptor" que por defecto no est chequeada.
Debemos marcarla si no queremos crear el fichero web.xml a
mano.

ISC Victor Alonso Montoya de los Rios

En la ltima ventana nos pregunta por la librera de implementacin

de "jsf". Debemos elegir "User library" y seleccionar la que hemos
creado en el punto "Preparacin de eclipse" de este tutorial.

Listo, aceptando todo lo que queda, se generar nuestro proyecto

eclipse, con huecos para meter todo.
Creacin de un ManagedBean

Cuando arranquemos nuestra aplicacin, Tomcat y JSF se encargarn

de instanciar una serie de clases que estarn accesibles de alguna
manera desde nuestra pgina HTML, jsp, o lo que sea. Estas clases
deben ser beans de java (constructor sin parmetros y mtodos set y
get) y deben llevar la anotacin @ManagedBean.
Nuestra aplicacin es muy tonta, un "hola mundo", as que crearemos
una bean de estos que slo tenga el mtodo getSaludo() y devuelva
"hola". Dicha clase, con su nombre de paquete, debe meterse en el
directorio "Java resources : src" de eclipse. O bien, simplemente con el
botn derecho encima del nombre del proyecto, hacemos "new" ->
"class" y ya eclipse se encargar de colocarla en el sitio adecuado.

30

ISC Victor Alonso Montoya de los Rios

Esta clase puede ser as

package jsfJava;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class HolaMundo {
public String getSaludo (){
return "hola";
}
}

Creacin de una pgina HTML

Vamos a hacer ahora la pgina xhtml que coger este saludo y lo

mostrar en el navegador. Sobre el proyecto pulsamos botn derecho
del ratn y elegimos "new" -> "HTML file". Por defecto se pondr en el
directorio "WebContent" del proyecto. Ponemos un nombre para la
pgina (por ejemplo, "hola.xhtml") y pulsamos "next". En la siguiente
ventana, marcamos "use HTML template" y elegimos "new facelet
composition page". Pulsamos "finish" y listo.

31

ISC Victor Alonso Montoya de los Rios

Ahora, con eclipse, la editamos para que se parezca a esto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Hola mundo</title>
</h:head>
<h:body>
#{holaMundo.saludo}
</h:body>
</html>
Bsicamente hemos quitado cosas que no usaremos y nos quedamos
con :

xmlns:h para indicar que vamos a usar tags <h:....> propios de JSF,
como <h:head> y <h:body>. Podramos usar perfectamente los
<head> y <body> tradicionales.
Ojo al #{holaMundo.saludo} que es donde est el truco. Salvo que
lo definamos de otra manera, la instancia de nuestra clase
HolaMundo se llama igual, pero con la primera letra en minscula.
A los mtodos getSaludo() se accede smplemente con .saludo.
Ese trozito de cdigo, cuando lo visualicemos en el navegador,
mostrar el resultado de la llamada a holaMundo.getSaludo(), es
decir, "hola".

Una vez salvado el fichero "hola.xhtml", con el botn

32

ISC Victor Alonso Montoya de los Rios

Arrancar la aplicacin:

derecho del ratn sobre l, "run as" -> "run on a server" y nos saldr
una ventana preguntando qu servidor de aplicaciones queremos
usar. Elegimos el "tomcat" que configuramos anteriormente y listo.
Eclipse arrancar el "tomcat" y nos abrir el navegador mostrando la
pgina hola.xhtml. En ella veremos escrito "hola".

33

ISC Victor Alonso Montoya de los Rios