Curso de WEB DYNPRO ABAP

Grupo comercial control

Estructura del curso
• Presentación introductoria (Esta…), tomando como referencia el
aplicación de Caja de Ahorro para ilustrar los diferentes puntos.
• Construcción de una primera aplicación WDA (Ejercicio tomado del
SAP Help).
• Proyecto de diseño y construcción de una aplicación WDA utilizando
el SAP Flight Data Model.
• Diseño y construcción de una aplicación WDA para GCC.
Algunas características importantes de WDA
Desarrollo de interface del usuario (UI) basado en el modelo M/V/C
• En cada componente WDA se busca tener una separación clara entre la
interface del usuario y la lógica del negocio.
• La codificación ha de ser sea mínima y todo el énfasis está en el diseño de la
interface del usuario (UI).
• El desarrollo en WDA es primordialmente declarativo.
Declaración de elementos de UI robusta para tecnologías futuras.
• Los elementos de UI funcionan para múltiples navegadores.
• La definición de los elementos de UI es totalmente independiente del cliente
(navegador) y debería de funcionar para futuros navegadores, sin necesidad
de modificar los componentes WDA.
El desarrollo en WDA, en general
Desarrollo totalmente integrado con el Workbench de ABAP
(SE80).
• Layout de una vista: El desarrollo puede ser de una forma
totalmente gráfica.
• El uso de los elementos de UI es declarativo.
• Funcionalidad del editor de ABAP de "navegación hacia adelante".
• Acceso a todos los tipos de datos declarados en el diccionario de
datos (SE11).
• Fácil de debugguear.
• Acceso directo a toda la demás funcionalidad del Workbench de
ABAP.
Otros aspectos en común con el desarrollo ABAP
• Transporte
• Traducción
• Ampliaciones (para aplicaciones WDA estándar).
El paradigma MVC = Model/View/Controler
• Hay tres "Capas".
• Model o Modelo: Es la "capa" con la lógica de negocio: Obtiene, procesa y
actualiza la información de la aplicación sin preocuparse de cómo se le
muestra al usuario esta información.
• View o Vista: Es la "capa" de interacción o interface del usuario: Muestra al
usuario la información de la aplicación sin preocuparse de cómo se obtiene,
procesa y/o actualiza ésta información.
• Controler o Controlador: Es la capa en la que se vincula la lógica de negocio
con la interface del usuario. En esta capa se da cualquier procesamiento
intermedio de los datos, entre el Modelo y la Vista. Esta "capa" funciona con
base en llamadas y respuestas.
El paradigma MVC = Model/View/Controler
Elementos que integran un componente WDA
Un Componente de WDA tiene...
• Ventanas
• Vistas: Integradas por elementos
de UI dispuestos según un cierto
Layout.
• Controladores, cada uno con:
• Contexto de datos ,
• Atributos,
• Métodos y
• Eventos.
Arquitectura de un Componente de WDA
• La interface del usuario (layout) se define en Vistas
• Las vistas se despliega en Ventanas
• Tanto las Ventanas como las Vistas son, como ya se mencionó,
elementos de un Componente de WDA
• Cada Vista y cada Ventana tiene su propio Controlador.
• Además está el controlador general del Componente de WDA. Este es
la “columna vertebral” de un Componente WDA.
Arquitectura de un Componente de WDA
• Cada controlador (tanto de Vistas y Ventanas como el controlador
general del componente) pueden tener datos en el llamado "Contexto
de datos".
• En un Componente de WDA bien estructurado únicamente el
controlador general accede al Modelo.
• El controlador del componente WDA puede recibir/enviar datos a los
componentes de las vistas y ventanas por medio de ligas entre el
contexto de datos del controlador y los contextos de datos de las
vistas y ventanas.
Arquitectura de un Componente de WDA
Arquitectura de un Componente de WDA
• Existen vistas y controladores de la interface del Componente WDA:
Esto no lo veremos en este curso.
• También están los llamados "Custom Controllers“: Esto no lo veremos
en este curso.
Vistas y Elementos UI
Vistas
• Una vista siempre está inserta en una
Ventana o está anidada dentro de otras
Vistas. No obstante, cuando hay anidación,
de cualquier modo la vista de mayor
jerarquía también está inserta en una
Vantana.
• En la vista se define el layout visible
utilizando Elementos UI .
Vistas y Elementos UI
• Elementos UI
• Son los "bloques" más pequeños que se usan para construir la interface del
usuario (Botones, campos, tablas, etc...)
• Hay librerías predefinidas de estos Elementos UI.
• Tienen propiedades que controlan su comportamiento: Se definen de forma
estática pero pueden ser modificadas de forma dinámica.
• Los Elementos UI pueden anidarse dentro de otros elementos UI. Hay
Elementos UI que son contenedores de otros Elementos UI.
• Se posicionan en una estructura jerárquica en la vista.
 Vistas y Elementos UI

Un elemento fundamental
para ser un buen
desarrollador WDA es
dominar la MAYOR
cantidad de elementos UI
para, de esta forma, poder
utilizarlos en el diseño de
vistas atractivas y
amigables al usuario.
Definiendo el layout de elementos UI en una
vista…
Controladores y Contextos de datos

Controladores:
• Cada Vista y Ventana tiene su propio
controlador.
• También está el controlador general del
Componente WDA.
• Los controladores de Vistas y Ventanas tienen,
primordialmente, la lógica de la "capa" de
interface con el usuario.
• En los controladores de las Vistas se definen
eventos de la interface UI y se implementa sus
métodos manejadores de los eventos.
• El controlador del Componente WDA es el que
tiene la interacción con el Modelo (lógica de
negocio).
• Todos los controladores pueden leer y escribir
información en los nodos de su contexto.
Controladores y Contextos de datos
Contexto
• Es una jerarquía de Nodos y Atributos.
• Contiene los datos de la interface del
usuario (de forma directa o indirecta).
• Los elementos UI se pueden vincular con
los nodos y atributos del contexto para que
el usuario pueda crear, editar o eliminar
datos del contexto.
• Existe funcionalidad para leer/actualizar la
información del contexto por medio de
código ABAP.
Controlador y contexto de una vista
Elementos de un nodo en el contexto / Una
tabla
El controlador del componente
• El controlador del componente es
la “columna vertebral” de todo el
componente WDA
• Tiene su propio contexto
• En un componente WDA bien
estructurado, tiene la lógica de la
interacción con el modelo.
Mapeo entre contextos
• Los nodos del contexto del controlador del componente se pueden
mapear con los nodos de los otros contextos (Vistas y Ventanas).
• El transporte de datos entre el contexto del controlador del
componente y los otros contextos es instantáneo y bi-direccional.
Funciona como una referencia en ABAP entre un FIELD-SYMBOL y su campo
referenciado.
Interacción entre Vistas y Controladores
Definición estática del contexto
• El contexto tiene una estructura bi-
dimensional de nodos y atributos.
• Cada nodo puede ser un conjunto del
elementos, todos con la misma
estructura del nodo.
• El número máximo y mínimo de los
elementos de un nodo se define en la
cardinalidad del nodo.
• (0..1)
• (1..1)
• (0..n)
• (1..n)
Datos complejos en el contexto, en tiempo de
ejecución
• Los nodos con cardinalidad (0..n)
o bien (1..n) pueden tener
múltiples elementos en tiempo
de ejecución.
• Cada elemento, a su vez, puede
tener su propio conjunto de sub-
nodos los cuales, a su vez,
pueden ser conjuntos de
elementos.
Vistas anidadas
• El elemento UI
"ViewContainer"
es el que permite
generar una
estructura de
vistas anidadas.
• La vinculación en
si entre las vista
con el elemento UI
"ViewContainer" y
la vista o vistas
anidada se define
en la Ventana.
Navegación entre vistas
• Para definir la navegación entre
vistas hay que definir un punto de
salida y un punto de entrada para
cada vista usando un "Outbound-
plug" y un "Inbound-plug".
• Adicionalmente para establecer
un flujo de navegación hay que
crear un "Link de navegación"
entre el "Outbound-plug" de una
vista y el "Inbound-plug" de la
otra.
Navegación entre vistas