of 26
8/14/2019 Lesson 14 - Enhancing the UI
1/26
14Copyright 2004, Oracle. Todos los derechos reservados.
Mejora de la Interfaz de Usuario
8/14/2019 Lesson 14 - Enhancing the UI
2/26
Copyright 2004, Oracle. Todos los derechos reservados.
Objetivos
Al finalizar esta leccin, debera estar capacitado para:
Utilizar el inspector de propiedades para modificar
componentes visuales
Utilizar el panel Structure para modificar elementos dedatos
Agregar elementos de navegacin
8/14/2019 Lesson 14 - Enhancing the UI
3/26
Copyright 2004, Oracle. Todos los derechos reservados.
Modificacin 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:
8/14/2019 Lesson 14 - Enhancing the UI
4/26
Copyright 2004, Oracle. Todos los derechos reservados.
Uso de la Barra de Herramientas para
Formatear Objetos
Listadesplegable
de estilo
Listadesplegable
de fuenteTamao
de fuente
Colorde primer
plano
Colorde fondo
Negrita/
cursiva/
subrayado
Alinear a la
izquierda/
centrar/a la
derecha
Lista con
nmeros/
con vietas
Disminuir/
aumentar
sangrado
8/14/2019 Lesson 14 - Enhancing the UI
5/26
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 interseccin o unin de atributos para varias
etiquetas seleccionadas Distingue visualmente
atributos modificados
8/14/2019 Lesson 14 - Enhancing the UI
6/26
Copyright 2004, Oracle. Todos los derechos reservados.
Adicin de Imgenes a JSP
Para agregar imgenes a las JSP, arrastre un archivo de
imagen al editor visual:
8/14/2019 Lesson 14 - Enhancing the UI
7/26Copyright 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
8/14/2019 Lesson 14 - Enhancing the UI
8/26Copyright 2004, Oracle. Todos los derechos reservados.
Edicin de Hojas de Estilo por Defecto
Para modificar una hoja de estilo existente, brala en el
editor de cdigos:
Asistente de cdigo
(Code Insight)disponible para
archivos CSS.
Al guardar el archivo
se actualiza la CSS
para el espacio detrabajo de aplicacin
actual.
8/14/2019 Lesson 14 - Enhancing the UI
9/26Copyright 2004, Oracle. Todos los derechos reservados.
Creacin de una Nueva Hoja de Estilo
CSS File
HTML
New Gallery
untitled1.css
Create Cascading Stylesheet
8/14/2019 Lesson 14 - Enhancing the UI
10/26Copyright 2004, Oracle. Todos los derechos reservados.
Edicin de Hojas de Estilo
8/14/2019 Lesson 14 - Enhancing the UI
11/26
8/14/2019 Lesson 14 - Enhancing the UI
12/26Copyright 2004, Oracle. Todos los derechos reservados.
Aplicacin de una Hoja de Estilo a una Pgina
8/14/2019 Lesson 14 - Enhancing the UI
13/26Copyright 2004, Oracle. Todos los derechos reservados.
Adicin de Botones a una JSP
Botones de accin de pantalla: Submit y Reset
Botones de control de datos
Modelo: Commit y Rollback
Vista: Navigation y DML
8/14/2019 Lesson 14 - Enhancing the UI
14/26Copyright 2004, Oracle. Todos los derechos reservados.
Adicin de Botones de Control de Datos
Botones de control de datos:
Se agregan a la JSP
desde la paleta de
control de datos
Se relacionan con datos
en la pgina
Cuando se relacionan con
la vista, pueden controlar
la navegacin oiniciar DML
Cuando se relacionan con el modelo, pueden confirmar
los cambios (commit) o realizar un rollback
Operacione
de modelo
Operaciones
de vista
8/14/2019 Lesson 14 - Enhancing the UI
15/26Copyright 2004, Oracle. Todos los derechos reservados.
Adicin de Botones de Navegacin
Navigation Buttons
DepartmentsView1
Drop As:
Data Control Palette
8/14/2019 Lesson 14 - Enhancing the UI
16/26Copyright 2004, Oracle. Todos los derechos reservados.
Adicin de Botones de Accin de Pantalla
Cursor
8/14/2019 Lesson 14 - Enhancing the UI
17/26Copyright 2004, Oracle. Todos los derechos reservados.
Funcionalidades Complementarias para Botones
Utilice eventos de botones.
Se llevan a cabo la accin
de pantalla ms los
eventos definidos.
8/14/2019 Lesson 14 - Enhancing the UI
18/26Copyright 2004, Oracle. Todos los derechos reservados.
Uso de Lenguajes de Expresin
El lenguaje de expresin:
Se utiliza en combinacin con etiquetas JSTL
Es un modo de proporcionar contenido dinmico sin
expresiones JSP o archivos de comandos
Uso de una expresin JSP para acceder a un atributo:
La sintaxis ms simple de lenguaje de expresin:
8/14/2019 Lesson 14 - Enhancing the UI
19/26Copyright 2004, Oracle. Todos los derechos reservados.
Uso de Atributos EL
Para hacer referencia a atributos:
Pngalos entre ${}
Andelos mediante notacin de puntos o []
Incluya mbito de manera opcional
8/14/2019 Lesson 14 - Enhancing the UI
20/26Copyright 2004, Oracle. Todos los derechos reservados.
Uso de Operadores y Literales EL
Literales: valores que no empiezan por${
Operadores
8/14/2019 Lesson 14 - Enhancing the UI
21/26Copyright 2004, Oracle. Todos los derechos reservados.
Uso de Objetos Implcitos EL
Cuando se hace referencia al objeto por el nombre, se
devuelve el objeto en lugar del atributo correspondiente.
Ejemplos:
${pageContext} devuelve el objetopageContext.
${pageContext.request.contextPath} devuelvela ruta de acceso de contexto (obtenida desde
HttpServletRequest).
${sessionScope.cart.numberOfItems} devuelve
la propiedad numberOfItems del atributo de mbitode sesin denominado cart.
${param["mycom.productId"]} devuelve el valor
String del parmetromycom.productId.
8/14/2019 Lesson 14 - Enhancing the UI
22/26Copyright 2004, Oracle. Todos los derechos reservados.
Uso de EL para Personalizar una Pgina
Se puede agregar lgica de visualizacin condicional
mediante EL
Por ejemplo, se muestra un mensaje y valor slo si el
valor no est vaco.
8/14/2019 Lesson 14 - Enhancing the UI
23/26Copyright 2004, Oracle. Todos los derechos reservados.
Resumen
En esta leccin ha aprendido a:
Utilizar el inspector de propiedades para modificar
componentes visuales
Utilizar el panel Structure para modificar elementos dedatos
Utilizar EL para agregar lgica de visualizacin
condicional
8/14/2019 Lesson 14 - Enhancing the UI
24/26Copyright 2004, Oracle. Todos los derechos reservados.
Prctica 14: Visin General
Esta prctica cubre los siguientes temas:
Modificacin de elementos visuales de una JSP
Uso de la barra de herramientas de formato
Uso del Inspector de Propiedades Adicin de botones de navegacin a una JSP
Adicin de un botn a una JSP que llama a una pgina
Web externa
Creacin de una hoja de estilo y su aplicacin a la JSP
8/14/2019 Lesson 14 - Enhancing the UI
25/26Copyright 2004, Oracle. Todos los derechos reservados.
Prctica 14-1
8/14/2019 Lesson 14 - Enhancing the UI
26/26
Prctica 14-1
