Lea en SAP Netweaver . . .

Desanudando Conceptos: SAP HANA

No hay “newsletter”, conferencia o evento del ambiente ERP que en los últimos meses haya ahorrado detalles y especulaciones sobre el nuevo paradigma: SAP HANA.

En medio del marketing “hype”, es siempre difícil para los que estamos en el ruedo decodificar lo esencial de las nuevas tecnologías, así que aquí va nuestro aporte para ayudar a una cabal y conceptual comprensión de SAP HANA.

FaceBookTwitterGoogle+

SAP Netweaver / ABAP                  Notas técnicas / Tips / Tutorials

Tutorial ABAP paso a paso: Cómo crear una Web Dynpro ABAP

Aprenda a crear una Web Dynpro ABAP definiendo paso a paso todas las componentes involucradas para su creación, mediante un ejemplo sencillo.

En el tip Entendiendo los fundamentos de las Web Dynpro en SAP publicado anteriormente en Teknodatips, se trataron los conceptos fundamentales referidos a las aplicaciones Web Dynpro en SAP: qué son y lo que hay que tener en cuenta para su desarrollo y ejecución:

  • el patrón de diseño MVC (Model -View-Controller) en el que se basan,
  • los diferentes entornos de ejecución para las Web Dynpro ABAP / para las Web Dynpro JAVA
  • y los entornos de desarrollo de una Web Dynpro ABAP (ABAP Workbench)  y JAVA (SAP Netweaver Developer Studio).

En el presente tip, se abordará la creación de una Web Dynpro ABAP, paso a paso, que como un primer acercamiento, se trata de una Web Dynpro sencilla. Sin embargo, de todas maneras es necesario para su creación definir varios elementos que implican el despliegue de numerosas pantallas que detallan el paso a paso, para un mejor entendimiento de este tutorial.

La Web Dynpro ABAP ejemplo a desarrollar busca información en una tabla de SAP, basándose en un dato ingresado por el usuario, que determinará la acción de búsqueda apropiada y el posterior despliegue de información visualizable en una tabla.

Cabe recordar que para la creación de una Web Dynpro for ABAP es necesario ingresar al ABAP Workbench - Transacción SE80, lo mismo que se haría para el desarrollo de cualquier aplicación en este entorno.

Pasos necesarios para la creación de una aplicación Web Dynpro ABAP

Para la creación de una Web Dynpro ABAP es necesario definir varios elementos de manera separada que se detallan en los distintos pasos, hasta la creación de la aplicación Web Dynpro.

I) Pasos para la creación de la componente de la Web Dynpro: Atributos y Nodos

1) Ir a la transacción SE80 y elegir la opción Web Dynpro Comp./ Intf. En este mismo paso serán creados: la componente (Component), la Interfaz (Interface) y la ventana (Window) de la Web Dynpro.

ABAP-Se80-WebDynpro-1

2) Al elegir esta opción se solicitará un nombre para la componente a crear, Z_WEB_DYNPRO_EJEMPLO, y también se solicita ingresar el nombre de la Ventana (Windows), que en este caso se dio el mismo nombre Z_WEB_DYNPRO_EJEMPLO, como se muestra en la siguiente figura: (Posteriormente como con toda aplicación, se lo deberá asignar a un Paquete y luego asociarlo a una Orden de transporte.)

ABAP-Creo-WebDynpro-2

3) En la pantalla obtenida, sólo resta completar una Descripción:

ABAP-Creo-WebDynpro-3

En este punto de los pasos creados ya se puede observar cómo se va conformando la Web Dynpro a crear:

  • 1. Componet Controller: Sólo hay un controlador de componente por componente Web Dynpro. Este es un controlador global, visible para todos los otros controladores. El controlador componente (COMPONENTCONTROLLER) impulsa la funcionalidad de todo el componente. Este controlador no tiene una interfaz visual.
  • 2. Component Interface: permite la comunicación entre los elementos de dos componentes de Web Dynpro.
  • 3. Windows: Aloja las vistas creadas que se verán al ejecutar la aplicación Web Dynpro.

4) Luego, hacer Doble Click en COMPONENTCONTROLLER, y verificar que la aplicación esté en modo de cambio para definir el Context, dentro del cual se colocaran los datos que conformara mi modelo: atributos y nodos.

ABAP-Creo-Atributo-4

5) Para esta Web Dynpro se creará sólo un Atributo y un Nodo. Se define el Atributo: el nombre (AEROLINEA) y el tipo de dato del atributo (STRING) y luego Aceptar.

ABAP-Defino-Atributo-5

6) Luego se crea el nodo, que en este caso va a hacer referencia a la tabla SFLIGHT:

ABAP-Creo-Nodo-6

7) Se define el nodo con nombre SFLIGHT e indicar que referencia a la tabla SFLIGHT (parámetro Dictionary structure) y hacer Click en Add Attribute from Structure.

ABAP-Defino-Nodo-7

8) Se obtiene la siguiente pantalla donde se seleccionarán los campos que tendrá el nodo definido y luego Aceptar. Es importante recordar Guardar los cambios al finalizar (botón SAVE).

ABAP-Defino-Nodo-8

II) Pasos para la creación de la vista de una Web Dynpro

Una vez creada la componente de la Web Dynpro ABAP, es necesario crear la vista, que va a contener los objetos visualizables en la aplicación Web Dynpro.

1) Sobre la componente definida (Z_WEB_DYNPRO_EJEMPLO) presionar botón derecho del mouse → Create View

ABAP-Creo-Vista-9

2) Se le asigna el nombre a la vista: 'Vista1' y se completa el campo Descripción y luego Aceptar.

ABAP-Vista-Descripcion-10

3) Al crear la vista, aparece la siguiente pantalla para insertar los objetos visualizables de la aplicación, y seleccionar desde allí la solapa Context:

ABAP-Vista-Creada-11

4) En este punto es necesario que la vista cuente con los datos que obtiene del COMPONENTCONTROLLER definido anteriormente, para poder utilizarlo como referencia.

ABAP-Context-Vista-12

5) El pasaje se realiza mediante la copia del nodo y atributo del contexto del COMPONENTCONTROLLER al contexto de la vista ‘Vista1’.

ABAP-Copiar-Context-Vista-13

6) Para realizar la copia se elije en el campo View/Controller Names la opción: COMPONENTCONTROLLER, y se selecciona los radioButton correspondientes (los que están marcados) y luego Aceptar.

ABAP-Copiar-Context-Vista-14

7) Se hace Click en CONTEXT y luego Aceptar.

ABAP-Copiar-Context-Vista-15

8) La siguiente imagen muestra la copia realizada al contexto de la 'Vista1'.

ABAP-Context-Final-Vista-16

9) En la solapa de Layout de la vista ‘Vista1’ se define el diseño de la vista, en el que se insertarán los siguientes elementos: Label (Etiqueta), Input field (Campo para el ingreso de dato por parte del usuario) y un Table (Resultado de la búsqueda seleccionada) (Elegir Insert Element)

ABAP-Layout-Vista-17

10) Se crea el elemento Input Field de la vista 'Vista1' con el nombre I_AEROLINEA y Aceptar.

ABAP-Crear-Elemento-WDA-18

11) En este paso se "mapea" el Input field con el atributo del contexto, presionando el botón del campo Value.

ABAP-Referencia-InputField-19

12) Se establece el "mapeo" indicado seleccionando el atributo AEROLINEA’ y Aceptar para finalizar el “mapeo”.

ABAP-Referencia-InputField-20

13) Una vez finalizada la creación del Input field, se crea el Label, que se lo asocia desde el campo LabelFor al Input field I_AEROLINEA y en el campo Text se escribe una etiqueta relacionada con el ingreso de dato, por ejemplo: Aerolinea

ABAP-Asocia-Label-21

14) Una vez completada la inserción de todos los elementos, donde el último elemento creado fue Table y se lo creó con nombre ‘TABLA’, se realiza un enlace (Create Binding) para referenciar al Nodo del contexto y así poder definir los campos que lo integran:

ABAP-Referencia-Tabla-22

15) Se presiona el botón Context para el posterior despliegue del contexto dentro de la vista ‘Vista1’.

ABAP-Referencia-Tabla-23

16) Luego, se selecciona el nodo SFLIGHT, que tiene los campos que conformarán la estructura de la tabla . Luego Aceptar.

ABAP-Referencia-Tabla-24

17) En esta pantalla se puede indicar el modo de visualización de la tabla (para este ejemplo se lo dejó en TextView) y con ésto queda completado el “enlace” de la tabla con el contexto. Finalmente, Aceptar.

ABAP-Referencia-Tabla-25

18) Una vez “mapeados” los valores de cada elemento, se necesita crear un evento asociado al elemento I_AEROLINEA. Para eso se hace Click en el botón onEnter, que es el que se ejecutará cuando el usuario presione Enter.

ABAP-Creo-Evento-26

19) Para crear el evento se le asigna el nombre: OBTENGO_DATOS, en el campo Action, y se completa el campo Descripción. Luego Aceptar.

ABAP-Creo-Evento-27

20) Es necesario definir el código que estará asociado a la acción del evento. Para escribir dicho código, se realiza Doble Click en ‘OBTENGO DATOS’. NOTA: el código asociado a este evento se encuentra al final de este artículo. (*)

ABAP-Asocio-Evento-28

 

21) Al completar los pasos anteriores del paso II), ya se tiene la vista 'Vista1' creada. Es necesario guardar los cambios y luego activar los objetos inactivos de la aplicación como se muestra en la pantalla. Luego Aceptar.

ABAP-Activo-Objetos-29

 

Los pasos I) y II) crearon el COMPONENT CONTROLLER y la VISTA, respectivamente, de la aplicación Web Dynpro for ABAP.

El paso siguiente (III) completa la componente Windows, que conforma una aplicación Web Dynpro ABAP.

III) Paso que completa la componente Windows que conforma una Web Dynpro ABAP

1) En este paso se procede a añadir a la Ventana (Windows) las vistas que serán utilizadas y se reflejarán en la web, y conforman la parte “visible” de la Web Dynpro.

Para este ejemplo se selecciona la vista ‘Vista1’ y se lo “arrastra” hasta la solapa de Window debajo de la ventana con nombre ‘Z_WEB_DYNPRO_EJEMPLO’. Se guardan los cambios y se activa.

ABAP-Completo-Ventana-30

IV) Pasos para la creación y ejecución de la Aplicación Web Dynpro (Web Dynpro Application)

Para que la aplicación Web Dynpro ABAP pueda ser invocada desde el Browser, es necesario crear una “Web dynpro Application” .

1) Posicionarse en el panel izquierdo sobre el objeto Z_WEB_DYNPRO_EJEMPLO. Elegir Create Web Dynpro Application y asignarle como nombre, por ejemplo, el que tiene por defecto (‘Z_WEB_DYNPRO_EJEMPLO’) y una Descripción asociada. Luego indicar el Paquete donde se creará la aplicación.

 

ABAP-Creo-WebDynproAplication-31

2) Una vez creada la Web Dynpro Appplication, para ejecutarla es necesario posicionarse sobre la nueva componente creada, presionar botón derecho del mouse y elegir el item Test

ABAP-Test-WebDynproAplication-32

3)Al presionar Test , la aplicación Web Dynpro ABAP se abrirá en una ventana del Browser para su ejecución. Ingrese la aerolínea y presione Enter::

ABAP-Ingreso-datos-Test-WebDynproApplication-33

 

4) Finalmente, en la imagen siguiente se muestra la tabla con el resultado final de la ejecución, con los datos de la aerolínea ingresada, en el ejemplo: LH.

ABAP-Resultado-final-Test-WDApplication-34

(*) Código del evento definido en la Web Dynpro ABAP

 

method ONACTIONOBTENGO_DATOS .

 

DATA lo_el_context TYPE REF TO if_wd_context_element.

DATA ls_context TYPE wd_this->element_context.

DATA lv_aerolinea LIKE ls_context-aerolinea.

DATA lo_nd_sflight TYPE REF TO if_wd_context_node.

DATA lo_el_sflight TYPE REF TO if_wd_context_element.

DATA ls_sflight TYPE wd_this->element_sflight.

data it_sflight type table of wd_this->element_sflight.

* get element via lead selection

lo_el_context = wd_context->get_element(  ).

 

get single attribute

lo_el_context->get_attribute(

EXPORTING

name =  'AEROLINEA'

IMPORTING

value = lv_aerolinea ).

 

 

* navigate from <CONTEXT> to <SFLIGHT> via lead selection

lo_nd_sflight = wd_context->get_child_node( name = wd_this->wdctx_sflight ).

 

get element via lead selection

lo_el_sflight = lo_nd_sflight->get_element(  ).

* get all declared attributes

lo_el_sflight->get_static_attributes(

IMPORTING

static_attributes = ls_sflight ).

 

 

select carrid connid fldate price from sflight

into corresponding fields of table it_sflight

where carrid = lv_aerolinea.

 

lo_nd_sflight->bind_table( it_sflight ).

endmethod.

 


Copyright 2012 - Teknoda S.A.

IMPORTANTE:
“Notas técnicas de SAP ABAP" se envía con frecuencia variable y sin cargo como servicio a nuestros clientes SAP. Contiene notas/tutoriales/artículos técnicos desarrollados en forma totalmente objetiva e independiente. Teknoda es una organización de servicios de tecnología informática y NO comercializa hardware, software ni otros productos.
Si desea suscribir otra dirección de e-mail para que comience a recibir las Notas Técnicas SAP, envíe un mensaje desde esa direcciónsapping@teknoda.com, aclarando nombre, empresa, cargo y país del suscriptor.

SAP, SAP Netweaver, R/3 y ABAP son marcas registradas de SAP AG. SAP no es el editor de esta publicación y no es responsable de la misma en ningún aspecto. La información contenida en esta publicación ha sido generada por nuestros especialistas a partir de fuentes consideradas confiables y del ejercicio profesional cotidiano. No obstante, por la posibilidad de error humano, mecánico, cambio de versión u otro, Teknoda no garantiza la exactitud o completud de la misma.
COPYRIGHT TEKNODA S.A. PROHIBIDA SU REPRODUCCION TOTAL O PARCIAL SIN CONSENTIMIENTO DE TEKNODA


n_Celeste-Coopa - Especialista ABAP

Comentarios  

0 #23 Pedro Cauã 25-06-2017 07:40
Porque muita gente ainda não consegue enxergar a importância
de artigos como esse ? Parabéns pelo material!
Citar
0 #22 Amparo 18-10-2016 22:12
Hola!!!

Bastante interesante, una pregunta, solicité la creación de un servicio para cambio de password a través de webdynpros, lo que quiero saber es si se pueden poner links en las pantallas de tal forma que al dar clic, abra un pdf con instrucciones.

Muchas gracias de antemano
Citar
0 #21 Raju 13-09-2016 14:45
Nice explanation Celeste. Very helpful.
Citar
+1 #20 Kevek 14-12-2015 17:17
Cito a Celeste:
Cito a Willy:
Hola Celeste!

He seguido tu ejemplo paso a paso y cuando se abre el browser de internet explorer.. no se carga nada...qué debe ser?

Saludos.

Willy.


Verificar la configuración de parámetros del server ABAP para ver si está incluido el parametro que tiene el nombre completo del servidor (mencionando el dominio completo), en la Tx rz10. Además, incluir en el archivo hosts de Windows una entrada con la IP y el nombre del host ABAP. Esto te puede ayudar!


Hola Celeste, me pasa como a Willy... he seguido todos los pasos pero al ejecutar no se me carga la aplicación en el navegador. He intentado entrar en la transacción RZ10 como has dicho, pero en esta transacción debo meter un perfil... y no sé ni qué perfil debo meter. Podrías explicar esta parte con algo más de detalle?
Citar
0 #19 Chelo 25-03-2015 00:39
Cito a Mehdi:
se debe a la configuracion del host,a mi tb me daba el mismo error.

Hola, me podrias ayudar con la configuracion , no se como hacerla , me pasa lo mismo.
Citar
0 #18 Chelo 25-03-2015 00:37
Buenas noches , exelente tutorial , solo que no se como configurar el host para que me aparezca en la patalla la informacion de la tabla , agradeceria su ayuda.
Citar
0 #17 Ivan Dario 22-12-2014 15:32
Excelente TIP Celeste , soy nuevo en ABAP y bueno quiero conocer mas
Citar
0 #16 Celeste 26-08-2014 16:04
Cito a Willy:
Hola Celeste!

He seguido tu ejemplo paso a paso y cuando se abre el browser de internet explorer.. no se carga nada...qué debe ser?

Saludos.

Willy.


Verificar la configuración de parámetros del server ABAP para ver si está incluido el parametro que tiene el nombre completo del servidor (mencionando el dominio completo), en la Tx rz10. Además, incluir en el archivo hosts de Windows una entrada con la IP y el nombre del host ABAP. Esto te puede ayudar!
Citar
0 #15 Willy 18-07-2014 11:23
Hola Celeste!

He seguido tu ejemplo paso a paso y cuando se abre el browser de internet explorer.. no se carga nada...qué debe ser?

Saludos.

Willy.
Citar
0 #14 merito 17-01-2014 17:51
gracias buena herramienta
Citar

Escribir un comentario


Código de seguridad
Refescar

Suscribirse a Teknodatips


Recibirá un mail cada vez que se publique un nuevo tip. Seleccionar AL MENOS un casillero:
  • AS/400 Tips
  • SAP/ABAP Tips



Joomla Extensions powered by Joobi
Copyright © 2017 Teknoda tips - Tecnologia SAP Netweaver - IBM AS400 - System i - iSeries. Todos los derechos reservados.