Академический Документы
Профессиональный Документы
Культура Документы
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
http://otn.oracle.com
Prerequisitos
Para poder realizar los ejercicios de este artículo necesitará tener instalado Oracle JDeveloper 10g.
4. Ponga nombre al fichero JSP, simple.jsp, y pulse sobre Ok para generar una página JSP vacía.
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:
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.
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.
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.
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.
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.
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.
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...
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.
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.
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
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.