Está en la página 1de 10

Introducción al Desarrollo Visual de JSP con

JDeveloper 10g
1 . Prerequisitos
2 . Paso 1: Formateo HTML
2.1 . Crear un Nuevo Espacio de Trabajo, un Proyecto y una JSP
2.2 . Formateo HTML
2.3 . Formatear una Lista
2.4 . Añadir un Enlace
3 . Paso 2 - Utilizar Imágenes
4 . Paso 3 - Utilizar CCS
4.1 . Aplicar un Estilo CSS y Personalizarlo
4.2 . Añadir un CSS a la Paleta de Componentes
5 . Paso 4 - Tablas HTML
6 . Paso 5 - Formularios HTML
7 . Paso 6 - Etiquetas JSP

Puede encontrar la versión original de este artículo en Inglés en:

http://otn.oracle.com

Prerequisitos
Para poder realizar los ejercicios de este artículo necesitará tener instalado Oracle JDeveloper 10g.

Paso 1: Formateo HTML


Este paso guiará los pasos del usuario para primero crear un espacio de trabajo, un proyecto y una página JSP inicial.
Luego demostrará como hacer un formateo HTML sencillo como añadir negritas, cambiar el color de la fuente, el
alineamiento, etc.

Crear un Nuevo Espacio de Trabajo, un Proyecto y una JSP


1. En el Navegador de aplicaciones, pulse con el botón derecho, sobre Applications y elija New Application
Workspace en el menú contextual:

2. En el diálogo Create Application Workspace, seleccione el nombre de la aplicación como


simple_jsp . Deje el campo Application Package Prefix y seleccione No Template [ All
Technologies ] para la plantilla de la aplicación. Pulse sobre Ok para generar su espacio de trabajo y un
proyecto vacío.
3. En el Navegador, pulse con el botón derecho sobre el nuevo project, y elija New... para invocar a la
Galería de Objetos Nuevos. En ella, abra el nodo Web Tier, seleccione la categoría JavaServer Pages
(JSP) y haga doble click en el ítem JSP Page .

4. Ponga nombre al fichero JSP, simple.jsp, y pulse sobre Ok para generar una página JSP vacía.

5. Su nueva página JSP aparecerá en el Editor Visual


6. Observe que el entorno de edición visual JSP/HTML es realmente una combinación de editores visuales y
de código fuente, el Structure Pane de la parte inferior izquierda que permite acceso en forma de árbol a
todos los elementos de la página, el Property Inspector en la parte inferior derecha, que permite
seleccionar los atributos, y la Component Palette de la parte superior derecha que permite insertar
etiquetas/elementos en la página JSP/HTML.

7. Como paso opcional, divida la vista del editor para mostrar tanto el editor visual como el editor de código
fuente. Sobre la pestaña simple.jsp de la parte superior del editor, pulse con el botón derecho y seleccione
Split Document. JDeveloper mostrará las dos vistas al mismo tiempo:

8. También puede seleccionar Unsplit Document para volver a la vista 'sólo visual', o mantener abierta la
vista de código fuente y hacer ediciones simultáneas en la página JSP.

Formateo HTML
1. Pulse sobre el editor visual JSP e introduzca algún texto. Por ejemplo: Intro to JSP Visual Editing.

2. Después de introducir su texto, pulse sobre el menú desplegable de la parte izquierda de la barra de
herramientas y seleccione Heading 2 para formatear el texto como H2.
3. Después de la selección, su texto aparecerá inmediatamente con el nuevo formato H2.
4. Introduzca un retorno de carro y cambie de nuevo al formato de párrafo. Luego introduzca algún texto
aleatorio. Puede copiar y pegar el siguiente texto en el editor:
5. This is a paragraph of random text. This text will be used to
demonstrate How to format HTML in the
JSP/HTML visual editor . This is a paragraph of random text.
This text will be used to demonstrate
how to format HTML in the JSP/HTML visual editor.

6. Seleccione una porción del texto con el ratón y pulse sobre el botón B de la barra de herramientas para
ponerlo en negrita.

7. Seleccione otra porción del texto y pulse sobre el botón I para poner el texto en cursiva:

8. Aplique el formateo de fuente seleccionando algún texto y seleccione una fuente Times New Roman y
especifique un tamaño de 5.

9. Ahora aplique algún formateo de color. Seleccione de nuevo algún texto y pulse sobre el Foreground
Color y seleccione el color a aplicar al texto:

10. Experimente con diferentes combinaciones de formateo.


11. Ahora aplicaremos algún formateo de alineamiento. Seleccione todo el párrafo y pulse sobre el botón Align
Right de la barra de herramientas.
12. Seleccione otros alineamientos y observe el cambio en el código fuente según usted los aplica.

Formatear una Lista


1. Debajo del párrafo anterior, introduza el siguiente texto en párrafos separados: one, two, three. (Después
de cada palabra introduzca un retorno de carro). Seleccione los tres párrafos y luego pulse sobre el botón de
lista desordenada de la barra de tareas.

2. Ahora introduzca más elementos en la lista : four, five. Observe cómo el editor visual aplica el formato de
lista.

3. Seleccione de nuevo toda la lista en el editor visual, o en el Structure Pane. Pulse sobre el botón de lista
ordenada de la barra de herramientas.

4. Seleccione un subconjunto de elementos de la lista y luego indéntelos pulsando sobre el botón indent de la
barra de herramientas. Cambie la sublista a una lista no ordenada.

5. Siga experimentando indentando y des-indentando los elementos de la lista.

Añadir un Enlace
1. Esta nueva tarea muestra cómo asociar un enlace con algún texto existente.

Seleccione una porción de texto o una palabra en la JSP utilizando el ratón. Por ejemplo, seleccione las
palabras, visual editor del párrafo anterior.
En la Component Palette, seleccione la paleta HTML en la lista desplegable. Pulse sobre el elemento
Link de la paleta. Aparecerá un diálogo donde podrá introducir la URL:. Introduzca una URL válida como
http://oracle.com.
2. También es posible insertar tanto el texto como el enlace asociado en su página sin tener primero que
seleccionar texto existente. Esto se hace arrastrando y soltando el elemento List de la paleta de
componentes a cualquier parte del su página y luego introduciendo los valores para URL y text del enlace.

Paso 2 - Utilizar Imágenes


Esta parte del artículo le mostrará como trabajar con imágenes en JDeveloper 10g.

1. Arrastre y suelte la imagen de Oracle desde su navegador a su página JSP en JDeveloper. Responda Yes
para grabar la imagen en el Document Root de su aplicación.

2. Es posible arrastrar y soltar imágenes directamente desde el escritorio y desde navegadores.


3. Redimensione la imagen de Oracle arrastando uno de los puntos de agarre de la esquina inferior derecha de
la imagen:

4. Vuelva a dejar la imagen a su tamaño original pulsando con el botón derecho sobre la imagen y
seleccionando Reset Size.:

5. Observe que también puede resetear el tamaño utilizando el enlace de tareas Reset Link del Property
Inspector.
6. Como paso opcional, añada una imagen utilizando la paleta de componentes. Sobre la paleta, seleccione
HTML en la lista desplegable. Esto mostrará los elementos HTML. Ahora arrastre y suelte el elemento
Image en su página JSP. En el díalogo, localice la misma imagen de Oracle e insertela en la página.:
7. Mueva la imagen a una posición diferente de su página pulsando sobre ella para seleccionarla y entonces
arrastrarla a otra posición:

8. También puede probar a copiar, pegar, cortar y borrar la imagen en el editor visual.

Paso 3 - Utilizar CCS


Estos pasos explican como trabajar con CSS en JDeveloper 10g.

Aplicar un Estilo CSS y Personalizarlo


1. Añada un estilo CSS a su JSP cambiando primero la Component Palette a CSS y luego arrastrando y
soldando el estilo jdeveloper a su página. Observe el cambio en la apariencia de su página. Cambie a la
vista Source y observe los cambios en el código.

2. En el Navegador, observe que se ha añadido un nuevo fichero jdeveloper.css en el directorio css/ . Edite
este fichero haciendo doble click sobre él para abrirlo. Observe la sintaxis coloreada en el Editor de Código.
Observe también la estructura CCS en el Structure Pane.

3. Cambie el atributo color de la entrada H2 en el fichero CSS. En el Structure Pane haga click sobre H2 y
atualice el valor color en el Property Inspector. Use el selector de color para elegir uno diferente.

4. Vuelve al editor visual JSP y pulse sobre el botón refresh para ver los cambios.
Añadir un CSS a la Paleta de Componentes
1. Pulse con el botón derecho sobre la Component Palette y seleccione Add Component..

2. Use el navegador de ficheros para localizar cualquier fichero CSS que quiera añadir a la paleta. Si no tiene
ningún CSS diferente puede seleccionar la misma hoja de estilos jdeveloper.css (localizada en el directorio
public_html/css) y proporcionarle un nombre diferente.

Paso 4 - Tablas HTML


Estos pasos explican como trabajar con tablas HTML en el editor visual JSP/HTML .

1. Añada una tabla HTML a su JSP arrastando y soltando un elemento table de la paleta de componentes
HTML. En el diálogo acepte las selecciones por defecto y pulse OK.

2. Introduzca algún contenido HTML en las celdas de la tabla:

3. Añada una nueva fila pulsando en la celda inferior derecha y pulsando la tecla Tab. Aparecerá una nueva
fila al final de la tabla:

4. Copie el contenido de la segunda fila seleccionando toda la fila y pulsando Ctrl-C, luego pulse en una fila
vacía y pulse Ctrl-V.

Nota: para seleccionar toda la fila, puede arrastar el ratón por toda la fila o situar el cursor en la fila y
pulsando el botón derecho seleccionar: Table-> Select Row
5. Experimente más cosas con las opciones del menú contextual. Inserte y borre columnas y filas, divida y
mezcle celdas, etc...

Paso 5 - Formularios HTML


Estos pasos le muestran como trabajar con elementos de formularios HTML.

1. En la misma página añada un campo de texto arrastrando y soltando un elemento Text Field de la paleta de
componentes HTML. Observe como ahora JDeveloper le ofrece añadir el necesario elemento de
formulario. Pulse Yes para continuar introduciendo su campo de texto. Usando el Property Inspector,
seleccione el valor del atributo size a 30 y el del atributo name como name

Observe que los elementos de formulario se renderizan con una línea de puntos roja alrededor del campo.
Añada una etiqueta a la izquierda del campo con el texto Name:.

2. Situe el cursor a la derecha del texto e introduzca un nuevo párrafo (pulse return). En la siguiente línea
añada el texto Address: y luego añada un elemento Text Area desde la paleta de componentes. Use el
Property Inspector para seleccionar el atributo cols a 30 y el name como address.

3. Introduzca una nueva línea debajo del área de texto y añada una lista desplegable arrastrando y soltando un
elemento DropDown en la página. Una vez que apareca al lista desplegable, haga doble click sobre ella
para invocar al editor ComboBox

Seleccione el name como country y el size como 1. (No marque el checkbox Allow Multiple Selections.)

Pulse sobre el botón New para añadir nuevas Options: a la lista. Edite los campos Value y Caption y
ponga us y United States respectivamente. Añada las opciones de otro país pulsando sobre el botón New y
editando los valores indicados. (Puedes usar: uk y United Kingdom, fr y france...)

4. Antes de añadir un boton submit, y de definir la acción del formulario, crearemos una página JSP que será
el objetivo donde enviar nuestro formulario. De la misma forma en que lo hizo en el paso 1, cree una nueva
página JSP llamada results.jsp. Editaremos esta página más tarde en el paso 6.
5. Vuelve a la página original donde está nuestro formulario y añada un Submit Button HTML y sitúelo
dentro del formulario, debajo del selector de país:

6. Ahora seleccionaremos el atributo action del formulario HTML. Para seleccionar el formulario en el editor
visual, pulse dentro de él con el botón derecho y seleccione Form -> Select Form Tag. Una vez
seleccionado, puede seleccionar el atributo action como results.jsp en el Property Inspector. En
el caso de que obtenga el valor results.jsp de la lista desplegable, tendrá que eliminar el caracter
"/" que se ha añadido al nombre de la acción results.jsp.

Paso 6 - Etiquetas JSP


Estos pasos finales le muestran como trabajar con etiqueyas JSP básicas en el editor visual.

1. En la nueva página results.jsp, primero añadiremos una expresión JSP para mostrar el parámetro name
pasado desde el formulario. En la Component Palette seleccione la página JSP. Arrastre y suelte un
elemento Expression en la página. Debería ver un icono en la representación visual de la expresión JSP.
Haga doble click sobre el icono y edite su valor.

Introduzca request.getParameter("name") en el diálogo del editor. Pulse OK para


aceptarlo. Antes de probar la página puede añadir algún texto antes de la expresión como: Name
parameter is:

Grabe la página results.jsp.

En general todas las acciones estandar y las etiquetas personalizadas JSP se representan como iconos en el
editor visual. Una vez insertado dentro de una página puede usar el Property Inspector o hacer doble click
sobre el icono para editar sus atributos.

2. Pruebe su formulario y la página de resultados ejecutando la página original simple.jsp haciendo doble
click en la página y seleccionando Run. Cuando aparezca el formulario introduzca su nombre en el campo
Name: y pulse el botón submit. Debería aparecer la página results.jsp mostrando su nombre:
3. En el siguiente paso usaremos una librería de etiquetas personalizada en lugar de mostrar el valor de un
parámetro de la petición.
4. En la página results.jsp añadamos una etiqueta personalizada en el JavaServer Pages Standard Tag
Library (JSTL) para mostrar los valores de otro parámetro del formulario. Introduzca un retorno de carro
después de la expresión JSP y añada un nuevo texto:: Country:.

Cambie la página de la paleta de componentes a JSTL Core y arrastre y suelte una etiqueta out en la
página después de Country:. Seleccione el atributo value como: ${param.country}. Cuando se
renderize esto mostrará el valor del parámetro country

Sientase libre de añadir otra etiqueta out para mostrar el parámetro address

Grabe la página results.jsp.

JSTL es la primera librería de etiquetas JSP que usa el Expression Language (EL) para mostrar datos de
parámetros. EL proporciona una forma compacta y sencilla de mostrar e interactuar con cualquier dato de
aplicaciones Web, incluyendo valores de parámetros de la petición. La siguiente versión de JSP (2.0)
también soportará EL sin la necesidad de una etiqueta out. Los usuarios podrán introducir expresiones EL
directamente en la página JSP y se renderizarán en tiempo de ejecución.

5. Vuelva a ejecutar la página del formulario original simple.jsp, introduzca valores en el formulario y
observe cómo la página results.jsp muestra los parámetros que se le pasan.