You are on page 1of 26

14

Mejora de la Interfaz de Usuario

Copyright © 2004, Oracle. Todos los derechos reservados.


Objetivos

Al finalizar esta lección, debería estar capacitado para:


• Utilizar el inspector de propiedades para modificar
componentes visuales
• Utilizar el panel Structure para modificar elementos de
datos
• Agregar elementos de navegación

Copyright © 2004, Oracle. Todos los derechos reservados.


Modificación de Propiedades de
Componentes Visuales
Para modificar la apariencia de un objeto en el editor visual
puede utilizar:
• Barra de herramientas de formato del editor visual de
HTML/JSP:

• Inspector de propiedades:

Copyright © 2004, Oracle. Todos los derechos reservados.


Uso de la Barra de Herramientas para
Formatear Objetos
Lista Lista Color
desplegable desplegable Tamaño de primer Color
de estilo de fuente de fuente plano de fondo

Negrita/ Alinear a la Lista con Disminuir/


cursiva/ izquierda/ números/ aumentar
subrayado centrar/a la con viñetas sangrado
derecha

Copyright © 2004, Oracle. Todos los derechos reservados.


Uso del Inspector de Propiedades

El inspector de propiedades:
• Muestra atributos de la etiqueta o etiquetas seleccionadas
• Muestra la intersección o unión de atributos para varias
etiquetas seleccionadas
• Distingue visualmente
atributos modificados

Copyright © 2004, Oracle. Todos los derechos reservados.


Adición de Imágenes a JSP

Para agregar imágenes a las JSP, arrastre un archivo de


imagen al editor visual:

Copyright © 2004, Oracle. Todos los derechos reservados.


Uso de Hojas de Estilo

Puede utilizar los siguientes tipos:


• Hojas de estilo disponibles en JDeveloper:
– Oracle
– BLAF (Browser Look and Feel)
– JDeveloper
• Hojas de estilo que se agregan a Component Palette

Copyright © 2004, Oracle. Todos los derechos reservados.


Edición de Hojas de Estilo por Defecto

Para modificar una hoja de estilo existente, ábrala en el


editor de códigos:
• Asistente de código
(Code Insight)
disponible para
archivos CSS.
• Al guardar el archivo
se actualiza la CSS
para el espacio de
trabajo de aplicación
actual.

Copyright © 2004, Oracle. Todos los derechos reservados.


Creación de una Nueva Hoja de Estilo

New Gallery

CSS File

Create Cascading Stylesheet

HTML

untitled1.css

Copyright © 2004, Oracle. Todos los derechos reservados.


Edición de Hojas de Estilo

Copyright © 2004, Oracle. Todos los derechos reservados.


Adición de una Hoja de Estilo a la
Paleta de Componentes
Para agregar una hoja de estilo:
1. Seleccione CSS de la lista
desplegable.
2. Haga clic con el botón derecho del
mouse en Component Palette.
3. Seleccione Add Component.
4. Haga clic en Browse para elegir
archivo.
5. Introduzca un nombre.

Copyright © 2004, Oracle. Todos los derechos reservados.


Aplicación de una Hoja de Estilo a una Página

Copyright © 2004, Oracle. Todos los derechos reservados.


Adición de Botones a una JSP

• Botones de acción de pantalla: Submit y Reset


• Botones de control de datos
– Modelo: Commit y Rollback
– Vista: Navigation y DML

Copyright © 2004, Oracle. Todos los derechos reservados.


Adición de Botones de Control de Datos

Botones de control de datos:


• Se agregan a la JSP
desde la paleta de
control de datos Operaciones
de vista
• Se relacionan con datos
en la página
• Cuando se relacionan con
la vista, pueden controlar Operacione
la navegación o de modelo
iniciar DML
• Cuando se relacionan con el modelo, pueden confirmar
los cambios (commit) o realizar un rollback

Copyright © 2004, Oracle. Todos los derechos reservados.


Adición de Botones de Navegación
Data Control Palette

DepartmentsView1

Drop As:
Navigation Buttons

Copyright © 2004, Oracle. Todos los derechos reservados.


Adición de Botones de Acción de Pantalla

Cursor

Copyright © 2004, Oracle. Todos los derechos reservados.


Funcionalidades Complementarias para Botones

• Utilice eventos de botones.


• Se llevan a cabo la acción
de pantalla más los
eventos definidos.

Copyright © 2004, Oracle. Todos los derechos reservados.


Uso de Lenguajes de Expresión

El lenguaje de expresión:
• Se utiliza en combinación con etiquetas JSTL
• Es un modo de proporcionar contenido dinámico sin
expresiones JSP o archivos de comandos
Uso de una expresión JSP para acceder a un atributo:
<x:aTag att=
"<%= pageContext.getAttribute("aName") %>">

La sintaxis más simple de lenguaje de expresión:


<x:aTag att= "${aName}">

Copyright © 2004, Oracle. Todos los derechos reservados.


Uso de Atributos EL

Para hacer referencia a atributos:


• Póngalos entre ${}
• Anídelos mediante notación de puntos o []
• Incluya ámbito de manera opcional

<c:out value=
"${sessionScope.cart.numberOfItems} ">

Copyright © 2004, Oracle. Todos los derechos reservados.


Uso de Operadores y Literales EL

• Literales: valores que no empiezan por ${

<c:out value="Hello ${customer.firstName}"/>

• Operadores

<c:if test="${bean1.a < 3}" />

Copyright © 2004, Oracle. Todos los derechos reservados.


Uso de Objetos Implícitos EL

Cuando se hace referencia al objeto por el nombre, se


devuelve el objeto en lugar del atributo correspondiente.
Ejemplos:
• ${pageContext} devuelve el objeto pageContext.
• ${pageContext.request.contextPath} devuelve
la ruta de acceso de contexto (obtenida desde
HttpServletRequest).
• ${sessionScope.cart.numberOfItems} devuelve
la propiedad numberOfItems del atributo de ámbito
de sesión denominado cart.
• ${param["mycom.productId"]} devuelve el valor
String del parámetro mycom.productId.

Copyright © 2004, Oracle. Todos los derechos reservados.


Uso de EL para Personalizar una Página

Se puede agregar lógica de visualización condicional


mediante EL
Por ejemplo, se muestra un mensaje y valor sólo si el
valor no está vacío.

Copyright © 2004, Oracle. Todos los derechos reservados.


Resumen

En esta lección ha aprendido a:


• Utilizar el inspector de propiedades para modificar
componentes visuales
• Utilizar el panel Structure para modificar elementos de
datos
• Utilizar EL para agregar lógica de visualización
condicional

Copyright © 2004, Oracle. Todos los derechos reservados.


Práctica 14: Visión General

Esta práctica cubre los siguientes temas:


• Modificación de elementos visuales de una JSP
– Uso de la barra de herramientas de formato
– Uso del Inspector de Propiedades
• Adición de botones de navegación a una JSP
• Adición de un botón a una JSP que llama a una página
Web externa
• Creación de una hoja de estilo y su aplicación a la JSP

Copyright © 2004, Oracle. Todos los derechos reservados.


Práctica 14-1

Copyright © 2004, Oracle. Todos los derechos reservados.


Práctica 14-1

Copyright © 2004, Oracle. Todos los derechos reservados.