You are on page 1of 72

Consultora + Integracin + I nnovacin

WEB DYNPRO FOR ABAP

ABRIL 2011 | MADRID

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

 Web Dynpro ABAP es el estndar de SAP de tecnologa Interfaces de


Web Dynpro Usuario (UI) para el desarrollo de aplicaciones Web.
Definicin.
 Es un entorno de ejecucin y desarrollo grfico con herramientas
especiales integradas en el Workbench de ABAP(SE80).

 Proporciona un marco que se desarroll debido a que SAP necesitaba un


entorno de desarrollo de aplicaciones basadas en Web que reuniese
todos los requisitos exigidos por su software actual.

 Como punto inicial de partida, se tom el diseo Modelo Vista Controlador


(MVC) que formar la base de la arquitectura Web Dynpro.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Web Dynpro
Evolucin.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

 Uso de herramientas grficas y declarativas que reducen


Web Dynpro significativamente el esfuerzo de implementacin.
Ventajas.
 Diseo estructurado.
 Separacin estricta entre la presentacin, y los datos del proceso.
 Reutilizacin y mejor mantenimiento por el uso de componentes.
 Navegacin y diseo se cambian fcilmente.
 Acceso a los datos en cualquier momento a travs del contexto de la
aplicacin.

 Transporte automtico de datos mediante enlazado (data binding).


 Verificacin automtica de entradas.
 Integracin completa en el entorno de desarrollo de ABAP. Cosa que no
ocurre con Web Dynpro for Java.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Modelo Vista Web Dynpro est basado en el Modelo Vista Controlador:


Controlador  Separacin clara de lgica de negocio y lgica de presentacin.
Introduccin.
 Metamodelo uniforme para todos los tipos de Interfaces de
Usuario.

 Amplia independencia entre la plataforma y la interfaz.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Modelo Vista
Controlador
Introduccin.
Enlaza las capas de Genera los datos de
Capa de interaccin de negocio
usuario y negocio. la aplicacin sin tener
Todos los procesos en cuenta como van
intermedios se a ser mostrados.
MODELO
realizan aqu.
Peticin
CONTROLADOR
Respuesta Capa de interaccin de usuario
Presenta los datos
de la aplicacin sin
VISTA tener en cuenta
como han sido
generados.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Componente  Es una entidad reutilizable y ejecutable.


Web Dynpro  Contiene un determinado nmero de ventanas, vistas, y sus
Definicin. correspondientes controladores.

 Otros Componentes Web Dynpro pueden ser referenciados.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Aplicacin Web  Es el enlace de entrada al componente web dynpro.


Dynpro
Definicin.
 Puede ser llamada desde una interfaz de usuario.
 Como programa independiente se conecta con una direccin URL
que puede ser accedida por un usuario.

 No contiene informacin alguna acerca de los elementos que se


encuentran detrs del Interfaz de Vista.

www.netcheck.es
2.1 2.2 2.3
VISTA VENTANA COTROLADOR
Consultora + Integracin + I nnovacin

Vista  Describe la presentacin en pantalla de los elementos de interfaz de


Definicin. usuario (IU).

 Cada componente Web Dynpro tiene al menos una vista


 La vista est compuesta por el layout, conectores de E/S y controlador de
vista.

www.netcheck.es
2.1 2.2 2.3
VISTA VENTANA COTROLADOR
Consultora + Integracin + I nnovacin

Vista  La navegacin entre vistas esta soportada por conectores.


Definicin.  Los conectores son de entrada o salida.
 Un conector slo puede pertenecer a una vista
 La entrada a una vista provoca la llamada al manejador de eventos.
 Para navegar de una vista a otra, se ha de llamar al conector de salida de
la primera que estar unido al conector de entrada de la segunda por
medio de un enlace de navegacin.

www.netcheck.es
2.1 2.2 2.3
VISTA VENTANA COTROLADOR
Consultora + Integracin + I nnovacin

Ventana  Es un contenedor de vistas.


Definicin.
 Debe existir una vista inicial.
 Slo puede haber una vista activa.
 En ella se define como va a ser la navegacin entre vistas
 La ventana esta compuesta por conectores de E/S y controlador de
ventana.

www.netcheck.es
2.1 2.2 2.3
2.3
WINDOW CONTROLLER
Consultora + Integracin + I nnovacin VISTA VENTANA COTROLADOR

Controlador  Son la parte activa de un componente Web Dynpro.


Definicin.  Definen como interacta el usuario con la aplicacin.
 En una aplicacin hay distintas instancias de controladores (componente,
ventana , vista e interfaz)

 Los datos a los que un controlador tiene acceso estn definidos en su


correspondiente contexto.

 El controlador de componente es visible por los dems controladores.


 El controlador de interfaz no es editable. Para aadir contexto, eventos o
mtodos, se debe marcar el flag de interfaz en sus correspondientes del
controlador de componente.

www.netcheck.es
2.3.1
2.3.1 2.3.2 2.3.3
2.3.3
CONTEXT
CONTEXTO MAPEO Y EVENTOS
EVENT
Consultora + Integracin + I nnovacin ENLAZADO DE
DATOS

Contexto  Es el lugar donde se almacenan los datos que usan el controlador y la


vista.
Definicin.
 Los datos de un contexto estn organizados como una estructura
jerrquica o de rbol.

 Debe ser creado de acuerdo a la estructura de la aplicacin.


 Cada contexto posee un nodo raz (root node), de el dependen
subnodos que a su vez pueden contener atributos y subnodos.

www.netcheck.es
2.3.1
2.3.1 2.3.2 2.3.3
2.3.3
CONTEXT
CONTEXTO MAPEO Y EVENTOS
EVENT
Consultora + Integracin + I nnovacin ENLAZADO DE
DATOS

Contexto Una forma de ver/imaginar un contexto en ejecucin, es tomar, cada nodo


como una tabla:
Definicin.
Nodo raiz

Persona

Nombre
Edad

Elemento (en ejecucin),


Columna Columna sera equivalente a un
registro de una tabla
Nombre Edad
Tabla Nodo A
Juan 24

Miguel 27 Atributo (en ejecucin), sera


equivalente a un campo de uno
Antonio 25
de los registros

www.netcheck.es
2.3.1 2.3.2 2.3.3
CONTEXTO MAPEO Y EVENTOS
Consultora + Integracin + I nnovacin ENLAZADO DE
DATOS

Contexto  Cardinalidad: Es el nmero de elementos que puede contener un nodo


Propiedades. durante la ejecucin.

Nodo A Nombre Edad


Juan 24 1 Nmero de registros que
puede tener la tabla.

Antonio 25 n

 Lead Selection: Indica que elemento de una coleccin de nodos est


actualmente siendo procesado. Web Dynpro realiza un seguimiento
automtico de este elemento.

Nodo A Nombre
Edad
Juan 24

Lead Selection Miguel 27 = Registro seleccindo de


Antonio 25
la tabla.

www.netcheck.es
2.3.1 2.3.2 2.3.3
CONTEXTO MAPEO Y EVENTOS
Consultora + Integracin + I nnovacin ENLAZADO DE
DATOS

Contexto  Singelton: Limita el contenido de un nodo de contexto en ejecucin.


Propiedades. Como resultado, los elementos del nodo en cuestin solo son
instanciados para un elemento del nodo padre.

 Funcin Supply: Este mtodo es llamado cada vez que la lead


selection cambia o hay un intento de lectura de un elemento de un
nodo singleton.

El propsito de rellenar un contexto utilizando una funcin supply es til


cuando el contenido del nodo solamente deba estar disponible bajo
demanda.

www.netcheck.es
2.3.1 2.3.2 2.3.3
CONTEXTO MAPEO Y EVENTOS
Consultora + Integracin + I nnovacin ENLAZADO DE
DATOS

Contexto
Ejemplo alquiler de Contexto en tiempo de diseo Nodo raiz
coches.
Vehculo

Da de alta

Matrcula

Contexto en ejecucin

Nodo raz

Coche rojo Coche azul Coche amarillo

01/03/08 15/02/08 21/02/08

RVB 1982 JMB 9082 CFH 2525

www.netcheck.es
2.3.1 2.3.2 2.3.3
CONTEXTO MAPEO Y EVENTOS
Consultora + Integracin + I nnovacin ENLAZADO DE
DATOS

Contexto
Ejemplo alquiler de Contexto en tiempo de diseo
coches sin Singleton
Nodo Raz

Vehculo

Da de alta

Matrcula

Cliente

Alquilado DESDE

Alquilado HASTA

www.netcheck.es
2.3.1 2.3.2 2.3.3
CONTEXTO MAPEO Y EVENTOS
Consultora + Integracin + I nnovacin ENLAZADO DE
DATOS

Contexto
Contexto en ejecucin
Ejemplo alquiler de
coches sin Singleton
Nodo Raz

Coche Rojo
Coche Azul

01/01/08
15/02/08
RVB 1982
JMB 9082
Jess Sergio Fernando Isidro

07/02/09 20/03/09
16/08/08 10/01/09
14/02/09 25/02/09
30/08/08 17/01/09

El nmero de instancias de los nodos hijo podra facilmente comenzar a


crecer de forma exponencial, lo cual podra tener importantes
consecuencias para el consumo de memoria de la aplicacin.

www.netcheck.es
2.3.1 2.3.2 2.3.3
CONTEXTO MAPEO Y EVENTOS
Consultora + Integracin + I nnovacin ENLAZADO DE
DATOS

Contexto
Contexto en ejecucin
Ejemplo alquiler de
coches con
Singleton LEAD SELECTION
Nodo Raz

Coche Rojo
Coche Azul Coche Amarillo

01/01/08
15/02/08 21/02/08
RVB 1982
JMB 9082 CFH 2525

Fernando Isidro

16/08/08 10/01/09

30/08/08 17/01/09

Solo se instancian los nodos hijo, para aquel nodo que tiene la Lead
Selecction.

www.netcheck.es
2.3.1 2.3.2 2.3.3
CONTEXTO MAPEO Y EVENTOS
Consultora + Integracin + I nnovacin ENLAZADO DE
DATOS

Contexto  Data Binding: Los elementos IU de la vista son enlazados con el contexto
de la vista. Cualquier cambio del usuario sobre los elementos UI son
Definiciones. reflejados en el contexto.

A su vez el contexto de la vista es enlazado con el contexto del


controlador de componente.

www.netcheck.es
2.3.1 2.3.2 2.3.3
CONTEXTO MAPEO Y EVENTOS
Consultora + Integracin + I nnovacin ENLAZADO DE
DATOS

Contexto  Evento: Es cualquier suceso ante el cual puede reaccionar el sistema.


Definiciones.
 Accin: Es un mecanismo lanzado por el evento para comunicarse con el
controlador de vista. Al crear una accin, automticamente se genera un
mtodo asociado a la misma.

Mtodos

Acciones

Eventos del sistema

Acciones declaradas
por el programador

www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 #
07
INTRODUCCIN ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin
NUESTRA INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
OBJETIVO VISIN USUARIO
SOLUCIN SERVICIOS COMPONENT ALIANZAS
SOLUCIONES DINMICA AVANZADOS

Elemento IU  Es cualquier entidad grfica que ocupa una posicin en el layout de la


vista.
Definicin.
 Estn organizados como una estructura jerrquica o de rbol.
 Por defecto el nodo raz se llama RootUIElementContainer y su tipo es
TransparentContainer.

 Existen elementos que no son visibles en pantalla pero si ocupan una


posicin en la jerarqua como por ejemplo TransparentContainer.

www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 07
#
INTRODUCCIN ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin
NUESTRA INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
OBJETIVO VISIN USUARIO
SOLUCIN SERVICIOS COMPONENT ALIANZAS
SOLUCIONES DINMICA AVANZADOS

Elemento IU  Todos los elementos IU disponibles se dividen en categoras y pueden ser


seleccionados utilizando drag & drop en el editor de vista.
Categoras.

InputField, CheckBox,
TextView, RadioButton,
TextEdit ItemListBox

InteractiveForm,
FileUpload
Group, TabStrip,
PageHeader

Button,
LinkToAction

Table, Tree,
DateNavigator Image, Gant,
ProgressIndicator

www.netcheck.es
5.1
01 5.2
02 03
5.3 5.4
04 5.5
05 5.6
06 07
#
INTRODUCCIN ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin
NUESTRA INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
OBJETIVO VISIN USUARIO
SOLUCIN SERVICIOS COMPONENT ALIANZAS
SOLUCIONES DINMICA AVANZADOS

Elemento IU  El editor de vista es una herramienta especfica que permite editar el layout de
la vista.
Layout.

Pestaa
Layout
Jerarqua de
Elementos IU
Biblioteca de Aadir
elementos mediante Propiedades
IU men de los
Contextual elementos IU
Drag & Drop

Layout de la
Vista
Botn derecho -> Create
View -> Main View

www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 07
#
INTRODUCCIN ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin
NUESTRA INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
OBJETIVO VISIN USUARIO
SOLUCIN SERVICIOS COMPONENT ALIANZAS
SOLUCIONES DINMICA AVANZADOS

Elemento IU  Es asociar una propiedad de un elemento IU con un atributo del contexto


del controlador de la vista.
Enlazar el
contexto.
 Si el usuario modifica el valor del contexto asociado a la propiedad, esta
cambiar.

2) Crear el elemento IU 3) Enlazar el elemento IU 1) Declarar el atributo


en el Layout al atributo del contexto en el contexto

www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 07
#
INTRODUCCIN ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin
NUESTRA INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
OBJETIVO VISIN USUARIO
SOLUCIN SERVICIOS COMPONENT ALIANZAS
SOLUCIONES DINMICA AVANZADOS

Elemento IU  Para programar el comportamiento de un elemento IU sin necesidad de


acceder al propio elemento, se crea un atributo de contexto del mismo
Control del
tipo de datos que la propiedad.
comportamiento.
 Los mtodos manejadores de accin podrn modificar el valor del
contexto y por lo tanto el comportamiento del elemento.

El elemento IU
readOnly puede
ser controlado
mediante un
atributo de tipo
WDY_BOOLEAN
('X' == Verdadero,
Se declara un nuevo == Falso).
atributo, del tipo
correcto, para controlar
el atributo readOnly.

www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 07
#
INTRODUCCIN ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin
NUESTRA INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
OBJETIVO VISIN USUARIO
SOLUCIN SERVICIOS COMPONENT ALIANZAS
SOLUCIONES DINMICA AVANZADOS

Elemento IU  Esta tcnica ofrece control de programacin sobre cualquier propiedad


enlazable de un elemento IU.
Control del
comportamiento.
 Permite controlar la apariencia del layout de la vista sin necesidad de
acceder a los objetos de los elementos.

La propiedad readOnly se
puede enlazar a un atributo
de contexto booleano.

El input field podr abrirse


para el usuario si se estable
el valor del contexto a ==
Verdadero.

www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 07
#
INTRODUCCIN ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin
NUESTRA INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
OBJETIVO VISIN USUARIO
SOLUCIN SERVICIOS COMPONENT ALIANZAS
SOLUCIONES DINMICA AVANZADOS

Elemento IU  Simples, son capaces de mostrar informacin por si mismo (Group,


Tray).
Tipos.
 Compuestos, necesitan de elementos IU hijos poder mostrar
informacin (Table).

Elemento IU compuesto Table.

Elemento IU compuesto TableColumn.

Cada elemento IU TableColumn tiene


un elemento Caption y otro TextView
(en este caso) como hijos.

www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 #
07
INTRODUCCIN ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin
NUESTRA INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
OBJETIVO VISIN USUARIO
SOLUCIN SERVICIOS COMPONENT ALIANZAS
SOLUCIONES DINMICA AVANZADOS

Elemento IU  Es la forma en que se distribuyen los elementos IU en la pantalla.


Layout.
 La propiedad layout de un elemento coincide con la de su contenedor.
 FlowLayout coloca los elementos de izquierda a derecha de la pantalla, si
el espacio horizontal es pequeo para mostrar los elementos en una sola
lnea son reagrupados automticamente.

 GridLayout posiciona los elementos IU en un contenedor con forma de


cuadrcula. El nmero de columnas de cuadricula se especifica con la
propiedad colCount.

 MatrixLayout coloca los elementos como una estructura de cuadricula. El


subelemento MatrixHeadData para especificar el elemento que aparece
al principio de cada lnea. Las elementos se alinean verticalmente.

 RowLayout coloca los elementos en una sola fila. El subelemento


RowHeadData permite especificar que elementos aparecen al comienzo
de cada nueva fila del contenedor.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Atributos  El sistema genera atributos por defecto en los controladores al crear un


predefinidos componente web dynpro.

Definicin.  No pueden ser eliminados y son necesarios para el desarrollo del


componente.

 WD_CONTEXT: Existe en todos los controladores y es una referencia al


contexto del controlador en el que nos encontramos.

 WD_THIS: Existe en todos los controladores y es una referencia al propio


controlador.

 WD_COMP_CONTROLLER: Existe en el controlador de ventana y vista. Es


una referencia al controlador de componente.

 Se puede consultar las declaraciones de datos internas que hace el


componente cuando creamos el contexto en el siguiente botn.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Mtodos  Tambin llamados mtodos Hook, son generados por el sistema al


predefinidos crear un componente web dynpro.
Definicin.  No pueden ser eliminados pero si programados.
 Varan en funcin del controlador en el que nos encontremos.
 El sistema decide cuando son llamados y no el programador.
 WDDOINIT, WDDOEXIT: Existen en todos los controladores y son el
primero y el ltimo en ejecutarse.

 WDDOAFTERACTION,WDDOBEFOREACTION , DDOMODIFYVIEW,
WDDOONCONTEXTMENU pertenecen al controlador de vista.

 WDDOAPPLICATIONSTATECHANGE, WDDOBEFORENAVIGATION,
WDDOPOSTPROCESSING del controlador de componente.

 WDDOONCLOSE, WDDOONOPEN del controlador de ventana.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 1  Crear un nuevo componente con dos vistas.


Objetivo.  La vista principal consta de dos campos de entrada y un botn.
 Al pulsar el botn se navega a la segunda vista.
 La segunda vista consta de dos campos de entrada que muestran la
informacin recogida en la vista principal.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 1 1. Crear componente (ZWD_G#_E# donde G# es el nmero de


grupo y E# el nmero de ejercicio).
Pasos a seguir.
2. Crear un nodo (flight_info) en el contexto del controlador de
componente (estructura sflight, campos carrid y connid).

3. Crear contexto para la vista principal.

4. Aadir los elementos UI y enlazarlos con el contexto.

5. Crear una segunda vista(output_view) y contexto.

6. Aadir los elementos UI y enlazarlos con el contexto.

7. Crear conector de salida para la vista principal (o_output).

8. Crear conector de entrada para la segunda vista (I_main).

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

9. Incluir la segunda vista en la ventana.


Ejercicio 1
Pasos a seguir. 10. Crear enlace de navegacin para las vistas en la ventana del
componente.

11. Crear accin (GO) para el evento onclick del botn en la vista
principal.

12. Programar el mtodo asociado a la accin con la llamada al


conector de salida (se recomienda usar el asistente).

13. Crear aplicacin (ZAPP_G#_E# ).

14. Correr aplicacin y depurar errores.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

1. Crear componente y asignar nombres a la ventana y vista principal


Ejercicio 1
Solucin.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

2. Sobre el nodo raz.


Ejercicio 1
Solucin.

Aadir atributos desde estructura.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

3. Arrastrar los nodos del contexto del controlador de componente a la


Ejercicio 1 vista para enlazarlos.
Solucin.

4. Sobre RootElementContainer aadimos un elemento Group.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Sobre el Group crear formulario del nodo de contexto flight_info.


Ejercicio 1
Solucin.

Jugar con las propiedades de los elementos (layout, layout data)

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

5. Sobre la carpeta de vistas


Ejercicio 1
Solucin.

6. Ajustar la propiedad readonly de los elementos input_field.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

7. Pestaa Outbound Plugs.


Ejercicio 1
Solucin.

8. Pestaa Inbound Plugs.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

9. En la pestaa window.
Ejercicio 1
Solucin.

10. Sobre el conector de salida.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

11. Pulsar nuevo, en el evento onclick de las propiedades del botn.


Ejercicio 1
Solucin.

12. Ver el mtodo creado en la pestaa methods y programarlo.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

13. Sobre el componente creamos y guardamos.


Ejercicio 1
Solucin.

14. Sobre la aplicacin.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 2
 Usaremos el mtodo WDDOINIT del controlador de la vista para inicializar
el campo Airline con el valor AA.
Objetivo.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

1. Copiar el componente creado para el ejercicio 1


Ejercicio 2 (ZWD_G# _E2).
Pasos a seguir.
2. Programar el mtodo WDINIT para ello:

I. Obtener la referencia del nodo flight_info.


II. Obtener el elemento lead selection.
III. Establecer AA como valor inicial.

3. Crear la aplicacin

4. Correr la aplicacin y depurar errores.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

1. Sobre el componente.
Ejercicio 2
Solucin.

2. Mtodo WDINIT.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 3
 Crear un elemento IU Table en la vista output_view, para mostrar los
resultados de acuerdo a la entrada del usuario.
Objetivo.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 3 1. Copiar el componente creado para el ejercicio 2 (ZWD_G# _E3).


Pasos a seguir.
2. Crear un nodo(flight_tab) en el contexto del controlador de
componente (estructura sflight, campos carrid, connid, fldate,
planetype, seatsmax y seatsocc).

3. Enlazar el nuevo nodo con el contexto de la vista output_view

4. Aadir un group y dentro de este un elemento table enlazado al nuevo


nodo en la vista output_view.

5. Crear un mtodo en el controlador del


componente(rellenar_flight_tab). Este recoge los datos del nodo
flight_info con los que hace una select a la tabla sflight e introduce el
resultado en el nodo flight_tab.

6. Modificar la accin GO de main_view para que llame al mtodo


creado en el controlador de componente antes de navegar a
output_view.

7. Crear aplicacin, correr aplicacin y depurar errores.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

4. Sobre el elemento table.


Ejercicio 3
Solucin.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

5. En el controlador del componente.


Ejercicio 3
Solucin.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

6. En el mtodo correspondiente a la accin.


Ejercicio 3
Solucin.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 4
 Crear una tabla que muestre las reservas de pasajeros cuando
seleccionemos un vuelo en la tabla que muestra los resultados de la
Objetivo. entrada del usuario.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

1. Copiar el componente del ejercicio 3 (ZWD_G# _E4).


Ejercicio 4
Pasos a seguir. 2. Crear un subnodo singleton(booking_tab) en flight_tab, en el contexto del
controlador de componente (estructura sbook, campos bookid,
customid, custtype, luggweight, class y passname).

3. Enlazar el nuevo nodo con el contexto de la vista output_view

4. Aadir un group y dentro de este un elemento table enlazado al nuevo


nodo en la vista output_view.

5. Crear una funcin supply(booking_read) para el nodo booking_tab.

6. Programar la funcin booking_read para obtener los atributos del nodo


padre (flight_tab), leer las reservas de la tabla de diccionario sbook e
insertar los registros en el nodo(booking_tab).

7. Crear aplicacin, correr aplicacin y depurar errores.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

5. En las propiedades del nodo escribir el nombre de la funcin y activar.


Ejercicio 4
Solucin.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

6. En el controlador del componente.


Ejercicio 4
Solucin.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

CROSS-  Son componentes web dynpro reutilizables.


COMPONENT  Es posible construir una aplicacin Web Dynpro que conste de diferentes
Definicin. componentes, tiene sentido cuando varios componentes acceden a un
mismo conjunto de datos.

 El interfaz de componente permite la comunicacin entre componentes y


llamadas del usuario al componente .

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

 Crear un componente que muestre los datos personales de una persona.


Ejercicio 5
Objetivo.  Incluir el componente creado para que muestre los datos del cliente al
seleccionar una reserva.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

1. Crear componente ZWD_G# _E5_AUX.


Ejercicio 5
Pasos a seguir. 2. Crear un nodo (customer_data) en el contexto del controlador de
componente (estructura scustom, campos id, name, street, postbox,
postcode, city, country, telephone).

3. Enlazar el nuevo nodo con el contexto de la vista main_view.

4. Crear un group y dentro de este enlazar el nuevo nodo como formulario.

5. Crear un mtodo de interfaz en el controlador del


componente(mostrar_cliente) con un parmetro de entrada
(customer_id de tipo scustom-id). Este busca los datos del usuario y los
inserta en el nodo. Usar clase cl_abapwd_flight_model par obtener los
datos del usuario.

6. Copiar el componente del ejercicio 4 (ZWD_G# _E5).

7. Aadir el componente AUX al componente que acabamos de crear.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

8. Enlazar el interfaz del componente AUX con la vista output_view.


Ejercicio 5
Pasos a seguir. 9. Aadir un elemento ViewContainerUIElement en la vista output_view del
componente ZWD_G# _E5.

10. Crear una accin(cargar_datos_cliente) para el evento


OnLeadSelection de la tabla que muestra las reservas.

11. Programar el mtodo asociado a la accin para que obtenga el


parmetro customer_id correspondiente al registro seleccionado en la
tabla de reservas y llame al mtodo de interfaz mostrar_cliente del
componente AUX que enlazamos.

12. En la ventana(main_window) enlazar el elemento


viewContainerUIElement de la vista output_view con el componente
AUX.

13. Crear aplicacin, correr aplicacin y depurar errores.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 5 5. Marcar el flag de interfaz.


Solucin.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 5 7. En la pestaa used components del componente.


Solucin.
Nombre de componente
Tipo de componente

8. En la pestaa propiedades de la vista.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

11. En el mtodo correspondiente a la accin.


Ejercicio 5
Solucin.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 5 12. En el mtodo correspondiente a la accin.


Solucin.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

CROSS-
COMPONENT
 Es una forma de alimentar a un componente sin tener que usar mtodos de
interface.
Mapeo inverso.
 Consiste en mapear un nodo de un componente web dynpro A con el
de otro componente web dynpro B.

 El componente B est contenido dentro del A.


 El tipo de los nodos de ambos componentes debe de ser el mismo.
 Para que esta operacin pueda llevarse a cabo, es necesario que el nodo
del componente B tenga activados los flag de interface y elemento de
entrada externa.

 Pararealizar el mapeo es necesario crear un controlador de uso de


componente en el A.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 6  Realizar el ejercicio 5 pero alimentando al componente AUX por medio


Objetivo. de mapeo inverso en vez de por mtodos de interface.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 6 1. Activar los flag necesarios del componente ZWD_G# _E5_AUX para poder
realizar el mapeo inverso.
Pasos a seguir.
2. Copiar el componente del ejercicio 5 (ZWD_G# _E6).

3. Crear un nodo (customer_data) en el contexto del controlador de


componente (estructura scustom, campos id, name, street, postbox,
postcode, city, country, telephone).

4. Modificar el mtodo asociado a la accin cargar_datos_cliente para


que obtenga el atributo customer_id correspondiente al registro
seleccionado en la tabla de reservas, obtenga los datos
correspondientes al cliente y los inserte en el nodo creado anteriormente.

5. Crear un controlador de uso para el componente AUX.

6. Mapear el nodo customer_data del controlador de componente


(ZWD_G# _E6) con el nodo del componente AUX en el controlador de
uso.

7. Crear aplicacin, correr aplicacin y depurar errores.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 6 4. Mtodo asociado a la accin.


Solucin.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 6 5. Sobre el componente usado.


Solucin.

6. Sobre el controlador de interfaz del componente usado, nuevo.

www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS

Ejercicio 6
Solucin.

www.netcheck.es
MADRID BARCELONA

c/ Velzquez, 70 Gran Va Carlos III, 84


www.netcheck.es
3 y 4 planta 3 planta
Consultora + Integracin + Innovacin 28001 Madrid 08028 Barcelona
T.: +34 91 5784738 T.:+34 93 492 34 18
Fax: +34 91 7810159 Fax:+34 93 496 57 01

www.netcheck.es
MADRID BARCELONA

c/ Velzquez, 70 Gran Va Carlos III, 84


www.netcheck.es
3 y 4 planta 3 planta
Consultora + Integracin + Innovacin 28001 Madrid 08028 Barcelona
T.: +34 91 5784738 T.:+34 93 492 34 18
Fax: +34 91 7810159 Fax:+34 93 496 57 01

www.netcheck.es