1. Introducción al Desarrollo Visual de JSP con JDeveloper 10g 1 . Prerequisitos2 . 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 Enlace3 . Paso 2 - Utilizar Imágenes4 . Paso 3 - Utilizar CCS 4.1 . Aplicar un Estilo CSS y Personalizarlo 4.2 . Añadir un CSS a la Paleta de Componentes5 . Paso 4 - Tablas HTML6 . Paso 5 - Formularios HTML7 . 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 En el Navegador de aplicaciones, pulse con el botón derecho, sobre Applications y elija New Application Workspace en el menú contextual: 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. 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 . Ponga nombre al fichero JSP, simple.jsp, y pulse sobre Ok para generar una página JSP vacía. Su nueva página JSP aparecerá en el Editor Visual 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. 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: 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 Pulse sobre el editor visual JSP e introduzca algún texto. Por ejemplo: Intro to JSP Visual Editing. 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. Después de la selección, su texto aparecerá inmediatamente con el nuevo formato H2. 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: 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. 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. Seleccione otra porción del texto y pulse sobre el botón I para poner el texto en cursiva: Aplique el formateo de fuente seleccionando algún texto y seleccione una fuente Times New Roman y especifique un tamaño de 5. 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: Experimente con diferentes combinaciones de formateo. 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. Seleccione otros alineamientos y observe el cambio en el código fuente según usted los aplica. Formatear una Lista 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. Ahora introduzca más elementos en la lista : four, five. Observe cómo el editor visual aplica el formato de lista. 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. 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. Siga experimentando indentando y des-indentando los elementos de la lista. Añadir un Enlace 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. 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. 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. Es posible arrastrar y soltar imágenes directamente desde el escritorio y desde navegadores. Redimensione la imagen de Oracle arrastando uno de los puntos de agarre de la esquina inferior derecha de la imagen: Vuelva a dejar la imagen a su tamaño original pulsando con el botón derecho sobre la imagen y seleccionando Reset Size.: Observe que también puede resetear el tamaño utilizando el enlace de tareas Reset Link del Property Inspector. 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.: Mueva la imagen a una posición diferente de su página pulsando sobre ella para seleccionarla y entonces arrastrarla a otra posición: 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 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. 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. 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. 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 Pulse con el botón derecho sobre la Component Palette y seleccione Add Component.. 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 . 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. Introduzca algún contenido HTML en las celdas de la tabla: 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: 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 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. 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:. 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. 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...) 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. 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: 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. 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. 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: 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. 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. 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.