APEX 5: Introducción y primeros pasos

Copyright © 2015 Oracle and/or its affiliates. All rights reserved. | 2
Oracle Application Express 5
Daniel Bermudez
Febrero, 2016

Contenido:
• Introducción a APEX y primeros pasos
• Instalación de APEX 5 en Windows
• Creación de Aplicación
• Trabajando con Páginas y Regiones
• Utilizando Formularios
• Agregando Ítems y Botones
• Acciones Dinámicas
• Utilizando los Componentes Compartidos y Navegación
• Mostrando Contenido Dinámico
• Trabajando con Temas Visuales, Plantillas y Archivos
• Implementando Seguridad y Creación de Usuarios
• Enlaces en Reportes
• Gráficos
• Recomendaciones

Introducción a APEX y primeros pasos
Oracle Application Express

• Características
• Diferentes Usuario: Administradores, Desarrolladores y Usuarios
• Funciona con diferentes versiones de BD
• Desde una Bases XE hasta 12c
• Evaluación en Linea
• Esquema de 10mg
• Solo para demostracion
• Sin Costo desde: http://apex.oracle.com
• Fácil de Instalar
• Incluida por defecto en todas las versiones de Base de Datos Oracle
• Descargue la última versión: http://otn.oracle.com/apex
Introducción a APEX y Primeros Pasos

Historia
HTML DB 1.5
▪ Primer Lanzamiento
HTML DB 1.6
▪ Temas
2004 2007 2012-14
APEX 2.1
▪ Oracle XE
APEX 2.2
▪ Paquetes de Aplicaciones
APEX 3.1
▪ Reportes Interactivos
HTML DB 2.0
▪ SQL Espacio de Trabajo
APEX 3.0
▪ Flash Charts
▪ PDF Impresion
▪ Acceso a Migracion
APEX 3.2
▪ Converion de Oracle
Forms to APEX
APEX 4.1
▪ Cargar Datos
▪ Manejo de Errores
▪ ROWID
2006 2009 201120082005
APEX 4.2.x
▪ Mobil
▪ HTML5
▪ Paquetes de Aplicaciones
APEX 4.0
▪ Hojas de Calculo
▪ Acciones Dinamicas
▪ Plug-Ins
▪ Equipo Desarrolladores
2010
APEX 5.0
▪ Diseñador de Paginas
▪ Tema Universal
▪ Ventana Modal
2015
Conociendo algo de historia de Oracle APEX (āʹpěks)

Características
Desarrollo Web
Escritorio y Web
Móvil
Visualización y
Mantenimiento de la
Base de Datos
Capacidad para
realizar grandes
consultas SQL

Características Distinguidas
Entorno de Desarrollo
Web.
No requiere un
software en el cliente
El entorno guarda el codigo
como meta data.
Declarativo – No requiere
código
Las paginas son eficientes con
sólo una solicitud y una
respuesta.
Datos procesados en la base
de Datos

Fuentes de Datos
Utilice la Base de Datos Oracle o Web Services

Una sola instancia/ Multiples espacios de trabajo
• De fácil manejo con la opción de
autoservicio.
• Se puede definir un Workspaces para
cada departamento.
• Relación entre Workspaces y
Esquemas.
• Los Administradores de instancia
gestionan el ambiente y el acceso.
• Los departamentos pueden solicitar
más espacio o acceso a un nuevo
esquema.
De fácil manejo con la opción de autoservicio

Oracle Application Express – Pagina Inicial
Vemos 3 Aplicaciones, 1 Usuario, Noticias y Mensajes

Oracle Application Express – Application Builder
Integrated Development Environment (IDE) with Application Development Graphical “Page Designer”
Interfaz Application Builder

Oracle Application Express – SQL Workshop
Intefaz SQL Workshop

Oracle Application Express – Team Development
Interfaz Team Development.

Oracle Application Express – Packaged Applications
• Completa colección de ejemplos de aplicación.
• Ilustra las mejores prácticas
• Plantillas para personalizar

Application Builder > Page Designer
• Duplicar los diferentes componetes en la misma pagina
• Arboles de componentes para mejor visualización de la página.
• Arrastrar y Soltar para los componentes
• Actualizar varios atributos sin salir de la página en el Editor de
propiedades
• Filtrar la vista de página especifica del enfoque actual con paneles
deslizables.
• Copiar componentes a otras páginas.
El entorno para desarrollo de paginas

Application Builder > Page Designer

Application Builder > Code Editor
• Syntax Highlighting
• Copiar componentes a otras páginas.
• Sintaxis resaltada
• Deshacer y Rehacer
• Buscar/Remplazar
• Autocompletado
• Validación Código
• Usado para diseñar los componentes
Ejecute SQL, PL/SQL, JavaScript, HTML, CSS

Instalación de APEX 5 en Windows

• Descargar la Ultima Version de APEX
• Descargar del sitio oficial: http://otn.oracle.com/apex
• Descomprimir en la ruta C:apex
• Conectar al SQL Plus y Ejecutar
• @apexins.sql APEX APEX TEMP /i/
• @apxchpwd.sql
• @apex_epg_config.sql C:
• @apxldimg.sql C:
• ALTER USER anonymous ACCOUNT UNLOCK;
• ALTER USER xdb ACCOUNT UNLOCK;
• ALTER USER apex_public_user ACCOUNT UNLOCK;
• ALTER USER flows_files ACCOUNT UNLOCK;
• ALTER system SET job_queue_processes=20 scope=both;

• Conectar al SQL Plus y Ejecutar
• ALTER system SET shared_servers=10 scope=both;
• EXEC DBMS_XDB.SETHTTPPORT(8080);
• EXEC dbms_xdb.setListenerLocalAccess(l_access => FALSE);
• Rutas del Navegador
• Administración de instancia APEX
• http://localhost:8080/apex/apex_admin
• Conectar a un WORKSPACE
• http://localhost:8080/apex/

Creación de Aplicación

• Ingresar a Application Builder
• Dar clic en el botón Crear
• Seleccionamos el tipo de aplicación
• Ingresamos los datos del formulario
• Dar clic en Siguiente
1
2
3
4

• Ingresar a Application Builder
• Dar clic en Siguiente
• Llenamos los campos requeridos del formulario
• Confirmamos la creación
5
7
6

Trabajando con Páginas y Regiones

• Paginas
• Dar clic en el botón Crear Pagina
• Seleccionar Pagina en Blanco
• Ingresar los datos del formulario
• Seleccionar el tipo de opción de menú
• Confirmar
1
2 3
4

1
2
3
4
5

Regiones
• Breadcrumb
• Calendar
• Chart
• Classic Report
• Classic Report
(base on
function)
• Help Text
• Interactive
Report
• Legacy Calendar
• List
• Map Chart
• PL/SQL
Dynamict
Content
• Region Display
Selector
• Static Content
• Tabular Form
• Tree
• URL
1 2 3 4 5 6
1211
1098
7
13 14 15 16

Breadcrumb
• Breadcrumb
• Se presenta en la parte superior de la
página
• Se adapta según el tamaño de la página
• Nos permite la navegación hacia otras
sesiones de la aplicación,
• Nos da la ubicación de la página

Breadcrumb
1
2
3
4

Reporte Clásico
• Reporte Clásico
• Seleccione la pestaña Región
• Después de clic sostenido en
“Classic Report”
• Arrastre y Suelte en
“CONTENT BODY”
• En propiedades de clic al
icono para maximizar
• Digite la consulta y Valide
• Guarde la página

Reporte Clásico
1
2
3
4

Reporte Clásico
(based on Funtion)
• Reporte Clásico (based on
Funtion)
• Después de clic sostenido en “Classic
Report (based on Funtion)”
• Arrastre y Suelte en “CONTENT
BODY”
• En propiedades de clic al icono para
maximizar

Reporte Clásico (based on Funtion)
1
2
3
4

Reporte Interactivo
• Reporte Interactivo
• Después de clic sostenido en “Classic
Report (based on Funtion)”
BODY”
maximizar

Reporte Clásico (based on Funtion)
1
2
3
4

PL/SQL Dynamict Content
• Después de clic sostenido en “PL/SQL
Dynamict Content”
BODY”
maximizar
• Digite el codigo PL/SQL y Valide

1
2
3
4

Static Content
Static Content
• Después de clic sostenido en “Static
Content”
BODY”
maximizar
• Digite el código HTML
1
2
3
4

Taller 1
Cree una aplicación con 3 paginas cada una debe
contener 3 regiones.

Utilizando Formularios

• Dar clic en el botón Crear Pagina
• Seleccionar «Form»
• Seleccionar el Tipo de Formulario
• Dependiendo el formulario
seleccionado nos presenta una serie
de opciones, se deben completar y
confirmar
1
2
3 4

Form on a Table with Report
• Ingrese los datos al formulario
• Seleccione la Tabla o Vista
• Seleccione la opción de Navegación
• Seleccione los campos de la Tabla o
Vista
• Seleccione el icono de Edición
1
2
3
4
5

• Seleccione el campo llave
• Seleccione los campos de la Tabla o
Vista
• Seleccione los botones del formulario
• Confirmar
6
7
8
5
9
10

Reporte
Interactivo
generado por el
tipo de
formulario
seleccionado,
con la opción de
edición.
Formulario
generado para la
creación y
actualización de
los datos del
reporte
interactivo.

Form on a Table or View
• Seleccione la Tabla o Vista
• Ingrese los datos de la Región del
Formulario
1
2
3
4

• Seleccione el campo llave
• Seleccione los campos de la Tabla o Vista
• Digite el número de página en caso de
redirección
• Confirmar
7
5
6
5
8
9

Formulario
generado para el
ingreso de datos de
la tabla o vista
vinculados en su
creación.

Form on a SQL Query
• Cree la consulta para el formulario
• Confirmar
Form on a SQL Query
1
2
4
3
5

Form on a SQL Query
Formulario
generado para el
ingreso de datos de
la consulta realizada
en su creación.

Taller 2
Cree 2 Paginas una con un Formulario “Form on a
Table with Report” y la otra con “Form on a Table or
View” y “Form on a SQL Query”.

Agregando Ítems y Botones

Items
• Checkbox
• Color Picker
• Date Picker
• Display Image
• Display Only
• File Browser
• Hidden
• List Manager
• Number Field
• Password
• Popup LOV
• Radio Group
• Rich Text Editor
• Select List
• Shuttle
• Text Field
• Text Field with
autocomlete
• Textarea
• Yes/No
1 2 3 4 5 6
1312
111098
14 15
16
17
7
14
18

Items
Checkbox
Muestra varios valores como casillas de control, lo
que permite al usuario final seleccionar varios
valores. Se necesita una lista de valores para los
elementos que se muestran como casillas de
control. Los valores correspondientes a las casillas
de control se almacenan en una sola cadena
delimitada por dos puntos.
Color Picker
Muestra un campo de texto con un icono del
selector de color. Los usuarios finales pueden
introducir un código de color HTML directamente o
hacer clic en el icono para ver una paleta de colores
emergente. El usuario final puede hacer clic en un
color de la paleta para obtener el código de color
HTML correspondiente para el color seleccionado.
Date Picker
Muestra un campo de texto con un icono de
calendario. Lo usuarios finales pueden introducir la
fecha directamente en el elemento de texto hacer
clic en el icono del calendario para seleccionar una
fecha y, opcionalmente, una hora, en el calendario
emergente. La hora solo aparece en el calendario
emergente si Marcar de Formato de este elemento
incluye componentes de hora.
Display Image
Muestra una imagen almacenada en columnas BLOB
de una base de datos o basada en una URL de
imagen.
Display Only
Muestra un elemento de texto no editable.
File Browser
Muestra un campo de texto con el botón Examinar…
Este botón permite al usuario localizar y cargar un
archivo desde un sistema de archivos local.
Hidden
Los elementos que se incluyen en el origen de
página, pero no se presentan. Los valores de los
elementos ocultos se guardan en el estado de la
sesión. Normalmente, se utilizan para almacenar los
valores que necesita el procesamiento de páginas u
otros elementos de página, pero no se deben
mostrar al usuario final.
List Manager
Muestra un elemento de texto con un icono de lista
de valores emergente, los botones Agregar y
Eliminar y una lista de valores seleccionados. Puede
escribir el valor o elegirlo en la lista de elementos
disponibles. A continuación, puede utilizar los
botones para gestionar los valores seleccionados.
Estos valores se almacenan en una sola cadena
Number Field
Muestra un campo numérico. Este tipo de elemento
valida automáticamente que el valor sea un
número.
Text Field
Muestra un campo de texto.
Yes/No
Se muestra como un conmutador de inversión en
las interfaces de usuario móviles y como una lista
de selección en las interfaces de usuario de
escritorio.

Items
Rich Text Editor
Muestra un área de texto con opciones de formato
de texto completas, Los usuarios finales pueden
mejorar el contenido mostrado de una forma similar
al uso de un procesador de texto como Microsoft
Word. Los usuarios finales también pueden cortar y
pegar en este elementos documentos que están en
el formato de archivo RTF (formato de texto
enriquecido).
Select List
Muestra un elemento con un selector de lista de
valores incorporado. Cuando el usuario final hace
clic en el elemento, la lista de valores soportados se
muestra directamente en línea con el elemento
actual. Seleccionar Lista es más adecuado para
listas discretas y relativamente pequeñas. Los
usuarios finales pueden seleccionar de una forma
muy rápida un valor en la lista sin necesidad de
cambiar el foco a un cuadro de dialogo emergente.
Para listas de mayor tamaño, suele ser mejor Lista
de Valores Emergente.
Shuttle
Se muestra como una lista de selección múltiple que
incluye dos cuadros que contienen listas. En la lista
de la izquierda se muestra la lista de valores de
origen que no se han seleccionado y en la lista de la
derecha se muestran los valores seleccionados
actualmente. Los usuarios finales pueden
seleccionar uno o más valores en una lista y, a
continuación, utilizar los controles del seleccionar
uno o más valores en una lista y, a continuación,
utilizar los controles del selector para mover los
valores seleccionados o todos los valores. Los
valores actuales se almacenan en una sola cadena
Text Field with autocomlete
Muestra un campo de texto que presenta una lista
de posibles valores basados en el texto que ya ha
introducido el usuario final, en línea con el elemento
de texto. La lista se acota aún más cuando el
usuario final introduce más texto.
Textarea
Muestra un área de texto de varias filas.
Radio Group
Muestra varios valores como opciones de un grupo
de botones de radio, lo que permite al usuario final
seleccionar un solo valor.
Popup LOV
Muestra un elemento de texto con un icono de lista
de valores emergente. Cuando el usuario final hace
clic en el icono, se abre una ventana emergente con
un campo de búsqueda y una lista de valores
soportados. Las listas de valores emergentes son
perfectas para listas largas porque los usuarios
finales pueden introducir criterios de búsqueda para
reducir los valores disponibles que se muestran.
Para listas relativamente pequeñas, suele ser mejor
Seleccionar Lista.

Items
1
2
3
4

Botones
• Icon
• Icon [Hot]
• Text
• Text[Hot]
• Text with Icon
• Text with Icon
[Hot]
1 2 3 4 5 6

Botones
1
2
3
4

Acciones Dinámicas

Carácteristicas
• Comportamiento en la parte del cliente definido de
una manera declarativa
• Código JavaScript y Jquery implementado en el
núcleo de Application Express
• Permite definir de forma declarativa las acciones:
• Show / Hide
• Enable / Disable
• Calls SQL y PL/SQL Javascript
• Add / Remove Styles
• Cada una con múltiples estados True y False
El proceso de implementación de una acción dinámica
consiste en lo siguiente:
1. Editar o crear un elemento, botón, región, Expresión
JavaScript o selector de jQuery en una página.
2. Crear una acción dinámica de la página de la
aplicación que llama a la acción.
3. Ejecutar la aplicación para probar la acción dinámica.
Acciones Dinámicas 1
3
2
4

Acciones Dinámicas

Taller 3
De las paginas creadas y vamos adicionarle Items y
Botones, y crear mínimo 2 acciones dinámicas.

Utilizando los Componentes Compartidos y
Navegación

Utilizando los Componentes Compartidos y Navegación
Seguridad
Temas Visuales
Seguridad
Temas Visuales
Aplicación
Aplicación
Página
Navegación
Navegación
Navegación

Aplicación

Carácteristicas
Permite crear Items que se comportan como variables globales de la aplicación.
Application Items
2

Aplicación

Carácteristicas
Permite crear Computaciones a nivel de aplicación.
Application Computations

Navegación

Permite crear listas de navegación y de menú.
Lists

Navegación

Creamos listas de navegación de la aplicación.
Navigation Menu

Navegación

Muestra la ruta de navegación de la página actual.
Breadcrumbs
1
3
2
4

Página

Creamos listas de valores que
pueden ser utilizadas en cualquier
pagina.
List of Values
1
3
2
4

Trabajando con Temas Visuales, Plantillas y
Archivos

Trabajando con Temas Visuales, Plantillas y Archivos
Imagen
Javascript
Estilo CSS
Estilo CSS
Imagen
Imagen
1
2 3

1
2
3
4

Taller 4
Crear 4 Componentes Compartidos y Aplicarlos a las
paginas Creadas.

Implementando Seguridad
y Creación de Usuarios

Seguridad
Apex proporciona varias funciones para aumentar la seguridad en el tiempo de
ejecución y desarrollo de aplicaciones, son:
• Autentificación. determinar si un usuario tiene permisos para acceder a una aplicación.
• Cuentas de Usuario. Los privilegios de desarrollo se definen utilizando las cuentas de usuario de Apex.
• TimeOut de Sesión. Se puede pueden definir el tiempo de la sesión y el tiempo de inactividad máximos
para los desarrolladores de Apex.
• Configuración Segura.
• Cross-Site Scripting. Si se ha introducido un código malicioso en una aplicación de Apex, se puede
representar en regiones HTML y otras ubicaciones de la aplicación durante la representación normal
de la página.
• Inyección SQL . Apex soporta el uso de variables de enlace en todas las sentencias SQL y PL/SQL.
• Protección del Estado de la Sesión. La protección del estado de la sesión es una funcionalidad
incorporada que evita que los piratas informáticos alteren las URL de la aplicación

Esquemas de Autenticación
Para los esquemas de seguridad de la aplicación que se está creando, se
presentan tres opciones básicas:
• Application Express: este esquema permite ingresar a la aplicación
únicamente a los usuarios con cuentas activas dentro de la herramienta.
• No Authentication (Sin Autenticación): La aplicación a crear no posee
esquemas de seguridad, cualquier persona puede ingresar a la misma.
• Database Account (Cuenta de Base de Datos): Los usuarios que pueden
ingresar a la aplicación son aquellos que poseen una cuenta en la base
de datos en donde residirá la aplicación.
• Custom(Personalizado): Los usuarios que pueden ingresar a la aplicación
son aquellos que están definidos en una Tabla creada por nosotros.

Roles de Usuario en APEX
• Usuarios finales. Son usuarios de la aplicación sin ningún acceso a las
capacidades de desarrollo o administrativas.
• Desarrolladores. Son usuarios que crean y editan aplicaciones y
modifican objetos de Base de Datos. Los desarrolladores pueden tener
sus propios espacios de trabajo o compartir un espacio de trabajo.
• Administradores de área de trabajo. Son los desarrolladores que
realizan tareas de administrador específicas de un espacio de trabajo,
tales como la gestión de cuentas de usuario, espacio de trabajo de
seguimiento de la actividad, y la visualización de archivos de registro.
• Administradores de Instancia. Son superusuarios que manejan la
instancia completa donde se alojan los servicios de Administración de
APEX.

Opciones de Seguridad en el Navegador
Implementando Seguridad y Creación de Usuarios
• Browser Cache: prevenir el botón atrás y mostrar contenido después de
cerrar la sesión (APEX 4.1)
• Embed in Frames: evitar que otras aplicaciones de la integración y el
control remoto en su aplicación (APEX 4.1)
• Definir las cabeceras HTTP personalizadas a nivel de instancia y de
aplicación (APEX 5.0)

Autenticación y Autorización
Autenticación flexible - cambiar la autenticación del propio entorno de
desarrollo - LDAP, SSO, encabezado HTTP variable, etc. (APEX 5.0)
• Autorizaciones y condiciones para los procesos a demanda (APEX 4.2)
• Asignar grupos de espacio de trabajo a otros grupos (APEX 5.0)
• Conjunto de miembros de un grupo para la sesión de inicio, incluidos los
grupos externos(APEX 5.0)
• Está en la autorización de grupos (APEX 5.0)

Instancia y Workspace
• Limita correos electrónicos (APEX 4.1)
• Límite de carga de archivos (APEX 5.0)
• Limitar la salida de depuración (APEX 5.0)
• Límite de solicitudes simultáneas por sesión y por espacio de trabajo (APEX
5.0)
• Acceso espacio de trabajo límite por nombre de host (APEX 5.0)

Cifrado
• Cookie de sesión mas fuertes (APEX 4.2)
• SH-1 / SH-2 para checksums(APEX 5.0)
• Algoritmo de hash para contraseñas de usuario, mejorada para espacios
de trabajo (APEX 5.0)
• Las nuevas aplicaciones / formularios están protegidos por la checksums
de forma predeterminado (APEX 5.0)

1
Temas Visuales
2
4
5
3
Nombre
Tipo de
Seguridad
Función
De Ingreso

1
2
4
3
Nombre
Mensaje de
Error
Condición
De Ingreso
5
6

Taller 5
Crear una aplicación desde 0 con 4 paginas(Reporte Clásico, Reporte
Interactivo, Formulario con Informe Interactivo, Reporte con filtro
por Hiredate, Job, Empno) una tabla de usuarios y una función para
el ingreso a la aplicación o crear 2 esquemas de autorización y
aplicarlos a las paginas creadas.

Enlaces en Reportes

Carácteristicas
• Nos permite realizar
enlaces a ventanas modales
o paginas
• Pasamos el valor de una
columna a otras páginas o
regiones.
• Crear Maestro – Detalle en
las páginas.
Enlaces en Columnas

Enlaces en Columnas
1
3
2
4

Gráficos

Carácteristicas
• Se puede crear desde las opciones de Región y desde
los Reportes Interactivos.
• Muestra datos utilizando diferentes tipos de gráficos
incorporados.
Graficas
1
3
2

Graficas
1
3
2
7
6
5
4

Graficas
8
10
9

Recomendaciones

Libros

Enlaces
• Oracle Technology Network http://otn.oracle.com/apex
• APEX Community http://apex.oracle.com/community
• Oracle Learning Library http://www.oracle.com/oll
• Hosted evaluation site http://apex.oracle.com
• APEX Cloud Service http://cloud.oracle.com
Documentación, Recursos y Servidores de Alojamiento

APEX 5: Introducción y primeros pasos

APEX 5: Introducción y primeros pasos

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a APEX 5: Introducción y primeros pasos

Similar a APEX 5: Introducción y primeros pasos (20)

APEX 5: Introducción y primeros pasos