notas técnicas de sap / abap – white paper nro. 13 · 2009. 12. 18. · descripción: el...

Teknoda - Notas Técnicas de SAP/ ABAP 1 Dudas o consultas a [email protected]

Notas técnicas de SAP / ABAP – White Paper Nro. 13 (Lo nuevo, lo escondido, o simplemente lo de siempre pero bien explicado)

"Tips en breve/Tips en detalle" se envía con frecuencia variable y absolutamente sin cargo como un servicio a nuestros clientes SAP. Contiene notas/recursos/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 los tips envíe un mensaje desde esa dirección a [email protected], indicando su nombre, empresa a la que pertenece, cargo y país.

Tabla de contenido I. WAS y Web Dynpro dentro del universo Netweaver II. Las ventajas de las Web Dynpro y su fundamento MVC III. Creación de una Web Dynpro Application paso a paso en el SAP Netweaver Developer Studio IV. Dónde obtener información adicional.

I. Introducción: Web Dynpro dentro del universo Netweaver

Como tratáramos en artículos anteriores, SAP Web Application Server 6.40 (WAS) es la componente fundamental de la arquitectura SAP Netweaver, sobre la que se apoyan y corren todo el resto de las

“SAPping”

LLooss nnuueevvooss eesscceennaarriiooss ddee pprrooggrraammaacciióónn ccoonn SSAAPP NNeettwweeaavveerr ((sseerriiee ddee vvaarriiooss ttiippss))

””Entendiendo las Web Dynpro: un caso práctico paso a paso””

Tema: Web Dynpro, Netweaver, SAP Web AS, JAVA, MVC.

Descripción: El objetivo de esta serie de tips es recorrer y ejemplificar el nuevo escenario de desarrollo que SAP ofrece a partir de Netweaver. En este tip, explicamos los fundamentos básicos de las Web Dynpro y desarrollamos un ejemplo paso a paso.

Nivel: Avanzado

Versión: SAP WAS 6.3, 6.4, Netweaver ‘04

Fecha pub: Enero 2005

Próximos Tips: Entendiendo las Web Dynpro: Cómo construir una Web Dynpro con Web Services

NOTA: Para una correcta comprensión de este artículo, recomendamos la lectura de los tips anteriores “Entendiendo el SAP Web Application Server desde el punto de vista del programador” Consulte nuestro sitio www.teknoda.com/tipssap.htm para accederlos.


componentes. (Ver tip anterior “Entendiendo el SAP Web Application Server desde el punto de vista del programador” ). Concebido para funcionar en un entorno Web desde su génesis, y dotado de una “doble personalidad” SAP nativa y JAVA, permite el desarrollo y la operación de aplicaciones ABAP, J2EE, así como Web Services.

La tecnología “Web Dynpro” es el recurso que ofrece SAP Web Application Server para manejar la capa de presentación de las aplicaciones, es decir, la interfaz de usuario de las aplicaciones Web. Totalmente integrado al WAS Web Dynpro provee un conjunto de herramientas para modelar y diseñar las interfaces de usuario basándose en el paradigma MVC (Model View Controler). Las herramientas de diseño de Web Dynpros son independientes del entorno de ejecución, lo que permite unificar el desarrollo de interfaces para los distintos estándares soportados por el WAS, ABAP, J2EE y .NET.

Las herramientas permiten seleccionar patrones de diseño existentes o definir libremente nuevos patrones para el “layout” y el flujo de la aplicación. La descripción de la aplicación se almacena en un “metadata repository” y se utiliza para generar el código de ejecución “runtime” que corresponda según el entorno.

En la versión actual de Netweaver están soportadas las Web Dynpro para JAVA únicamente, que son las que trataremos en este tip. A partir de Netweaver ’04, se incopora la Web Dynpro for ABAP. Este tipo de Web Dynpro se desarrollaría dentro del ABAP Workbench y su ejecución sería llevada a cabo por la personalidad ABAP perteneciente al SAP Web Application Server. Las “Web Dynpro for Java” en cambio se desarrollan en el SAP Netweaver Developer Studio y se ejecutan gracias a la personalidad JAVA del WAS.

Las Web Dynpro for JAVA permitirán integrarse con el Java Dictionary para guardar datos obtenidos desde la vista, en una tabla perteneciente o no al Repositorio de Sap R/3. También pueden ensamblarse con aplicaciones escritas en JAVA tal como EJB (Enterprise Java Beans) o solicitar datos a otras aplicaciones a través de mensajes en XML (esta modalidad de comunicación sumada a ciertos protocolos se denomina Servicios Web).

La idea de Web Dynpro es muy poderosa y permite superar carencias muy importantes del desarrollo tradicional de aplicaciones Web, donde la lógica de presentación se mezcla con otros aspectos de la aplicación, o existe código redundante, o donde no es posible independizar la presentación del entorno de ejecución. Las componentes de alto nivel de SAP Netweaver utilizarán, desde ya, el modelo de Web Dynpro. Por ejemplo, como trataremos en próximos tips, las Web Dynpro son la estrategia elegida para la construcción del contenido de SAP Enterprise Portal.


II. Las ventajas de las Web Dynpro y su fundamento MVC (Model View Controller)

Al comparar las Aplicaciones Web Dynpro con otros tipos de aplicaciones Web tradicionales se observa que las Web Dynpro poseen ciertas características que la distinguen y la hacen superior a otros modelos de trabajo, debido a su pautada separación entre la interacción con el usuario y las funcionalidades que hacen al negocio de la aplicación.

Por ejemplo, si lo contrastamos con el modelo JSP vemos que las JSP tienen como unidad de desarrollo la páginaWeb, representada por un archivo con extensión .jsp y la aplicación Web como una serie de páginas JSP conectadas que, en conjunto, proveen los requerimientos funcionales. Por lo tanto, puede encontrarse código perteneciente al giro del negocio disperso en la totalidad de la aplicación; sin obligar al desarrollador a colocar este tipo de codificación en un sector predeterminado de la estructura de la aplicación Si el programador necesita cambiar alguna funcionalidad , debe “bucear“ en la aplicación y ver en qué partes se encuentra distribuida dicha funcionalidad. Este tipo de aplicaciones están libradas a las buenas técnicas de diseño y posterior codificación que se hayan utilizado.

En cambio, si se observa el modelo de Aplicación Web Dynpro, la unidad de desarrollo es una unidad llamada “Component”, compuesta por programas Java que juntos conforman una unidad funcional de negocio. Una componente puede poseer la cantidad de vistas que se desee, pero tiene un sólo controlador global que dirige y encapsula la funcionalidad del negocio. Por lo tanto, la codificación de la funcionalidad del negocio se encuentra acotada al controlador global . Una componente Web Dynpro, comprende un concepto mayor que simplemente una sumatoria de páginas relacionadas ya que las Aplicaciones Web Dynpro están basadas en una arquitectura muy poderosa denominada Model-View-Controller (MVC).

En sintesis, la diferencia esencial de la Web Dynpro es la clara separación de la interfaz de usuario y los servicios de “backend”.

Arquitectura MODEL-VIEW-CONTROLLER (MVC)

La arquitectura MVC es utilizada por los programadores JAVA desde hace unos años y se basa en la estructuración de aplicaciones para permitir la separación de la interfaz de usuario en tres partes distintas:


*El Modelo: Encapsula la funcionalidad del negocio real. Sirve como fuente de datos para cualquier clase de visualización. El modelo provee un único punto para actualizar o recuperar información. *La Vista: Visualiza los datos de la Aplicación usando una representación gráfica. Existe la libertad de mostrar los datos como se desee. Si los datos del modelo cambian, las vistas (al ser dependientes del modelo) deben cambiar.

*El Controlador: Maneja las interacciones entre el modelo y la vista. El controlador es el responsable de manejar los eventos de usuario para actualizaciones a los datos de la aplicación y de conducir los requerimientos de navegación.

Por lo tanto al ser aplicado el modelo MVC sobre las Web Dynpro, observamos que una Web Dynpro está compuesta por 3 componentes: View (Vista), Controller (Controlador), Model (Modelo).

View: comprende los elementos predefinidos de la interfaz de usuario y el “look & feel” de la Web Dynpro, además de la funcionalidad de contrucción de nuevos elementos de la interfaz de usuario.

Controller: Se encarga del manejo de flujo de datos y de la navegación.

Model: Se encarga de la persistencia de los datos. Esto puede ser utilizando JAVA a través EJB, ó ABAP a través de RFC y BAPIs .Como tercera opción tenemos el uso de Web Services

En la siguiente sección, se complementarán los pasos de la construcción de una Web Dynpro ejemplo con fuertes conceptos teóricos.


III. Creación de una Web Dynpro Application en el SAP Netweaver Developer Studio

El entorno de desarrollo de Web Dynpro: SAP Netweaver Developer Studio (SNDS)

SAP Netweaver Developer Studio es un IDE (acrónimo de Integrated Development Environment) basado en el framework de Eclipse cuya finalidad es la creación de Aplicaciones de JAVA y J2EE. Esta herramienta provee la insfraestructura necesaria para administrar diferentes versiones de código dentro de un equipo de desarrolladores, transportar software, manejar la internacionalización, elegir y manipular las diferentes formas de persistencia y más capacidades para todo el ciclo de vida del desarrollo de este tipo de Aplicaciones.

El SAP Netweaver Developer, por tener sus basamentos en Eclipse ofrece diferentes “perspectivas” relacionadas con el tipo de funcionalidad que se desee utilizar. Por ejemplo para desarrollar Web Dynpros, tenemos la “perspectiva Web Dynpro”. Cada “perspectiva” está compuesta por un grupo de ventanas que permite navegar dentro de un árbol de jeraRquía de componentes de un proyecto Web Dynpro, dentro del editor de código, para la disposición de los elementos UI , etc.

También existen dentro del SNDS la perspectiva JAVA (para crear aplicaciones standard de Java), Dictionary (permite utilizar tablas pertenecientes al repositorio de SAP y generar nuevas tablas), Web Services (crear web Services), J2EE Development (desarrollo de aplicaciones J2EE), y Debug (para depurar el Código).

Ejemplo de Web Dynpro A continuación desarrollaremos una aplicación Web Dynpro a la que llamaremos “PrimeraWebDynpro”.

Esta aplicación va estar compuesta por 2 vistas. La primera vista debería tener el siguiente aspecto:

El usuario ingresará su nombre y su apellido en las cajas de texto correspondientes. Cuando presione el botón “Enviar”, los datos serán mostrados en la segunda vista.

El aspecto de la segunda vista será el siguiente:

El nombre y el apellido serán mostrados en la segunda vista dentro de la etiqueta “Mensaje”. El botón “Atrás” servirá para volver a la primera vista.

Para comenzar a construir una Web Dynpro, lo primero que debemos hacer es abrir SAP Netweaver Developer Studio. Su ruta de acceso es Inicio -> Programas-> SAP Netweaver Developer Studio-> SAP Netweaver Developer Studio(Console) y hacemos doble click sobre la misma. Entonces, se desplegará una ventana de DOS que nos permite ver como levanta SAP Netweaver Developer Studio. A continuación aparecerá una pantalla como esta:


Lo primero que debemos hacer es seleccionar la perspectiva con la cual vamos a trabajar. Por lo tanto se elige del menu principal: Window - > open Perspective - > Web Dynpro. Luego crearemos el Proyecto que contendra nuestra Web Dynpro

Pasos para la creación de un proyecto Web Dynpro

1. Se elige File -> New ->Project.

2. Aparece el ayudante de New Project

3. En el panel izquierdo se selecciona Web Dynpro y luego en el panel derecho Web Dynpro Project y se presiona Next.

4. En la siguiente pantalla de propiedades del proyecto,se coloca el nombre del proyecto PrimeraWebDynpro, se dejan los seteos por defecto del Project contents y el Project language.

Hasta el momento, hemos creado la estructura del proyecto, pero aún no hemos definido las vistas y su layout, los controladores, los eventos. Para ello, debemos definir previamente una componente Web Dynpro que los encapsule.

Pasos para la creación de una componente Web Dynpro

1. Se expande el nodo Web Dynpro y nos posicionamos sobre Web Dynpro Components. Se realiza “click derecho” del mouse y se selecciona del menú contextual Create Web Dynpro Component

2. Aparece el ayudante para “New WebDynpro Component ”. Se ingresa el nombre del Component Name PrimeraComponent y se especifica el paquete (tal como com.teknoda.ejemplo.primerawdynpro) .

3. Se corrige PrimeraComponentView en la caja de texto de view name por el nombre de la primera vista a crear llamada FormularioView.

4. Se dejan todos los seteos por defecto que aparezcan. Cerciorarse que se encuentre tildado Embed New View.

5. Se presiona Finish.


6. Se hace un click sobre el dibujo del “diskette” que se encuentra en la barra de herramientas, de esta forma el proyecto queda guardado.

En el panel derecho, automáticamente aparece abierto el Data Modeler view, mientras en el Web Dynpro Explorer (Panel Izquierdo) al expandir el nodo New Web Dynpro Component se puede ver nuestra nueva componente creada PrimeraComponent .

Cada Web Dynpro Component posee vistas entre sus elementos. Además, de manera automática, se crea un objeto Windows que tiene el mismo nombre que nuestra componente creada (PrimeraComponent). Una vista sólo puede ser desplegada en el Browser si está embebida dentro de un objeto Windows. El mencionado objeto también se encarga de guardar la navegación de las vistas creadas.

A continuación crearemos la segunda vista embebida en la componente PrimeraComponent.

Pasos para la creación de una o más vistas

1. Se expande el nodo Web Dynpro ->Web Dynpro Components -> PrimeraComponent -> Windows.

2. Se realiza doble click en el nodo del objeto Windows anteriormente creado PrimeraComponent, de esta forma en el panel derecho se visualiza el Diagram View.

3. Se elige el icono Embed View de la paleta que se encuentra a la izquierda de la ventana del Diagram View. Se realiza un click en el ícono, luego el mouse se ubica en el panel del diseño y se estira para formar un área rectangular de un tamaño considerable.

4. Aparece el ayudante, se elige la opción Embed new View option y se presiona el botón Next.

5. Se ingresa el nombre para la nueva vista ResultadoView y se presiona el botón Finish.

Como ya se tienen las dos vistas definidas, se debe indicar la navegación entre las vistas. En consecuencia, se crean puntos de entrada y salida para cada vista habilitando conectores de entradas y salidas (“inbound plugs” y“outbound plugs”). Los “inbound plugs” definen los posibles puntos de entrada de una vista mientras que, “outbound plugs” brindan la posibilidad de navegar hacia otra vista. Los “plugs” forman parte del controlador de la vista y se asignan una sola vista.

Consideraciones importantes sobre las Vistas y los “plugs”:

• Cada vista tiene que tener al menos un inbound plug mientras que el outbound plug es opcional.

• En general, varias vistas se encuentran embebidas en un objeto Windows, por lo tanto hay que determinar a través de la propiedad StartView cúal va será la primera vista que se despliegue en el Browser. La estructura de navegación partirá de esta vista.

• Cada vez que se coloca un inbound plug se genera automáticamente un método que maneja dicho evento en el fuente java que representa a la vista

La secuencia de pasos para definir la navegación está dividida en dos partes. La primera parte se refiere a la creación de los “ plugs” y la segunda parte para conectar a los links de navegación.

• 1º Parte: Pasos para la creación de “inbound “ y “outbound plugs”

1. Dentro del Diagram View, se selecciona el rectangulo que representa la primera vista, FormularioView, con un click derecho del mouse, se despliega el menú contextual.

2. Se selecciona la opción Create Outbound Plug.


3. Aparece el ayudante, se ingresa el nombre del “outbound plug “ AResultadoView y se presiona Finish.

4. Se selecciona el rectángulo que representa la segunda vista, ResultadoView, con un click derecho del mouse, se despliega el menú contextual.

5. Se selecciona la opción Create Inbound Plug.

6. Se ingresa el nombre del “inbound plug” DesdeFormularioView, se dejan los seteos por defectos para el manejador de eventos y se presiona Finish.

7. Se repiten los pasos apropiadamente para la creación del “outbound plug” AformularioView para la vista ResultadoView y el “inbound plug” DesdeResultadoView para la vista FormularioView.

Tabla indicadora de las correspondencia entre “plugs” y “Vistas”

outbound plug inbound plug

FormularioView AResultadoView DesdeResultadoView

ResultadoView AformularioView DesdeFormularioView

• 2 º Parte: Pasos para la conexión de los “plugs” por el uso de links de navegación

1. Para la creación del link de navegación de la primera vista , se selecciona el ícono Create Link desde la paleta que se encuentra a la izquierda de la ventana Diagram View y se dibuja la línea desde el “outbound plug “de FormularioView al “inbound plug” de ResultadoView.

2. De manera similar, se crean los links de navegación desde la segunda vista ResultadoView hacia la primera vista FormularioView.

Si se expande el árbol perteneciente al Web Dynpro Explorer (panel izquierdo de la perspectiva), desde Windows->Primera Component ,al abrir este último nodo, se verán las dos vistas FormularioView y ResultadoView. Al realizar doble click sobre, por ejemplo: FormularioView, se desplega una ventana llamado Editor View justo debajo de la ventana de Diagram View. La misma cuenta con 5 solapas, al seleccionar la solapa Implementation, se observa el código de java generado para dicha vista. De manera automática , en dicho código veremos implementados los métodos correspondientes a cada “inbound plug”, que se llaman onPlug.

Solapa Implementation de la vista FormularioView

public void onPlugDesdeResultadoView (com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent)

{

//@@begin onPlugDesdeResultadoView(ServerEvent)

//@@end

}


Solapa Implementation de la vista ResultadoView

public void onPlugDesdeFormularioView (com.sap.tc.webdynpro.progmodel.api.IWDCustomEvt wdEvent )

{

//@@begin onPlugDesdeFormularioView(ServerEvent)

//@@end

}

Nosotros utilizaremos onPlugDesdeFormularioView para recibir el nombre y apellido enviados desde la vista FormularioView

Para navegar de una vista a otra, necesitamos una acción apropiada que permita relacionar un elemento de interfaz de usuario (por ejemplo un botón) con el traslado a otra vista. En consecuencia se necesita implementar un método que actúe como un “manejador de eventos” y reaccione ante tal acción (por ej: presionar un bóton), ejecutándose luego el cambio correspondiente.

Pasos para la creación de actions (acciones) e implementación de la navegación 1. Dentro del EditorView de FormularioView, se elige la solapa Actions.

2. Se presiona el botón New.

3. Aparece el ayudante para crear una nueva acción. Entonces, se ingresa el nombre Enviar para la nueva acción, se deja las opciones del Event handler por default.

4. Luego, se asigna al campo Fire plug , el “Outbound plug ” AResultadoView, se presiona Finish. La nueva acción, Enviar, se encuentra asociado con el metodo que actua como manejador de eventos onActionEnviar que se puede observar en la lista de acciones.

5. Se repiten los mismos pasos para la acción Volver perteneciente a la vista ResultadoView y se asigna al campo Fire plug , el “Outbound plug ” AFormularioView.

6. Se guarda toda la nueva metadata eligiendo el ícono Save All Metadata desde la barra de herramientas.

Luego de haber creado las 2 acciones: Enviar y Volver, tendremos implementados los metodos relacionados al manejo de eventos de cada acción. Para visualizarlos, se clickea la solapa Implementation de ambas vistas.

Solapa Implementation de la vista FormularioView

public void onActionEnviar (com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent)

{

//@@begin onActionEnviar(ServerEvent)

wdThis.wdFirePlugAResultadoView();

//@@end

}


Solapa Implementation de la vista ResultadoView

public void onActionVolver (com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

{

//@@begin onActionVolver(ServerEvent)

wdThis.wdFirePlugAFormularioView();

//@@end

}

Aquí, se puede observar como se llama al método wdFirePlugToResultView() perteneciente al “outbound plug”. Para la ejecución de dicho método, se utiliza la variable privada wdThis que pertenece a la Interface IPrivateResultadoView. La misma se utiliza siempre que se necesite un método que se comunique internamente al ViewController (el concepto del “View Controller” será desarrollado posteriormente).

Una vez que tenemos definidas las acciones podemos empezar a trabajar con el “layout “ de la vista.

Para comenzar, se selecciona la solapa Layout en el EditorView, donde se muestra por ej: la vista FormularioView representada por una caja de texto predefinida de color gris (predefined default text). Simultáneamente, si se observa el Outline view (panel izquierdo zona inferior) desplegará una lista de todos los elementos de la interfaz de usuario que se vayan inlcuyendo. Todos los elementos de la interfaz de usuario están acomodados bajo el nodo raíz y representado en formato de árbol. Si se realiza un click derecho sobre un elemento de UI que se encuentra en el árbol y se selecciona Properties del menu contextual, se puede visualizar las propiedades de dicho elemento UI, a través de la ventana Properties view .

Pasos para la realización del diseño de la vista FormularioView 1. Desde la ventana Outline view, se elige el nodo raíz RootUIElementContainer y se setean las

propiedades tal como indica la siguiente tabla:

Property Value

Layout GridLayout

CellPadding 5

ColCount 3

Aclaración: No todos los valores de la propiedades son editables, en algunas se debe seleccionar un valor predefinido desde una lista desplegable.

2. Se elige el nodo hijo DefaultTextView y se setean las siguientes propiedades:

Property Value

Design header2

Text Bienvenidos a la aplicación prueba de Teknoda!!!!!

ColSpan 3


3. Desde la ventana Outline view, se selecciona el elemento RootUIElementContainer y desde el menú contextual se elige la opción Insert Child.

4. Se ingresa el Id etiqueta, se elige el tipo Label y se presiona Finish. Luego se setean las propiedades indicadas en la tabla Etiqueta.

5. Se crean 4 nuevos elementos de la interfaz de usuario: nombre (con el tipo InputField), etiqueta2 (con el tipo Label), apellido (con el tipo InputField),Enviar (con el type Button).

etiqueta

Property Value

Text Por favor coloque su nombre

LabelFor nombre

PaddingTop large

etiqueta2

Property Value

Text Por favor coloque su apellido

LabelFor apellido

PaddingTop large

nombre

Property Value

tooltip nombre

value Se deja en blanco.Se completa luego

PaddingTop large

apellido

Property Value

tooltip apellido

value Se deja en blanco.Se completa luego

PaddingTop large

Enviar

Property Value

text Enviar

tooltip Ir a la vista siguiente

Event > onAction Enviar

Una vez concluida la vista FormularioView, se continúa con la vista ResultadoView.


Pasos para la realización del diseño de la vista ResultadoView 1. Desde la ventana Outline view, se elige el nodo raíz RootUIElementContainer y se setean las

propiedades tal como indica la sig. tabla.

Property Value

layout GridLayout

cellPadding 5

colCount 2

2. Se elige el nodo hijo DefaultTextView y se setean las siguientes propiedades

Property Value

design header2

text Este sector se dejará en blanco. Aquí colocaremos una cadena cuyo contenido será generado dinámicamente y el valor será asignado

retrospectivamente en el siguiente

colSpan 2

3. Desde la ventana Outline view, se selecciona el elemento RootUIElementContainer y desde el menú contextual se elige la opción Insert Child.

4. Se ingresa el Id message, se elige el tipo TextView y se presiona Finish. Luego se setean las propiedades indicadas en la tabla Etiqueta.

5. Se crean un nuevo elemento más de la interfaz de usuario Volver (con el type Button).

Asignar los siguientes valores a las propiedades:

message

Property Value

Text La aplicación es un éxito

PaddingTop large

Volver

Property Value

Text Volver

Tooltip Ir a la vista anterior

Event > onAction Volver

Finalmente, se guardan los cambios en la metadata y se selecciona el ícono “Save All Metadata” que se encuentra en la barra de Herramientas.

Ahora, lo que resta es estar seguros que los datos que se ingresen en la vista FormularioView sean transportados correctamente a la vista ResultadoView. Sin embargo, en el esquema MVC que implementa Web Dynpro no necesita implementar el traslado de los datos explícitamente. De una manera sencilla y amigable, el concepto de Web Dynpro permite relacionar los datos a través del context. El context está representado en el esquema MVC con la función del controlador.


Cada vista posee siempre un controlador, que guarda sus datos localmente, este controlador se denomina “view context” o “local context”. Cada elemento de la interfaz de usuario de una vista debe ser “ligado”, por el propio desarrollador, a su correspondiente contexto local. Para compartir datos entre las vistas, se necesita la intervención de otro nuevo contexto llamado “standard” o “global”, cuyo ámbito de dominio abarca la totalidad de la aplicación Web Dynpro. El contexto global acompaña al ciclo de vida de toda la aplicación.

Es importante aclarar que los datos del contexto local pueden hacerse visible a las vistas que se desee, a través de contexto global, sin necesidad de hacer copia de los datos explícitamente entre los dos contextos ( global y local ). Existe otra forma, que es simplemente mapear los elementos de la interfaz relevantes de cada uno de los contextos locales al contexto “standard” o “global”, para que pueda ser compartido. Esto es conocido como “context mapping”. Sin embargo, un elemento del “View Context” o “Local Context” puede ser mapeado al correspondiente elemento del contexto “standard” o “global” de la componente de la Web Dynpro. Luego de este mapeo, los datos son almacenados en el contexto global de la componente y no en el contexto local de cada vista.

*Despliega los datos de la Aplicación

*Define las posibilidades de interactuar con el Usuario

*Maneja la llegada de los eventos

*Manipula el modelo

*Define el flujo de Control, determina la próxima vista

*Define los datos al acceso de la Aplicación

*Encapsula la funcionalidad de negocios


De acuerdo a los conceptos explicados en los párrafos anteriores, se debe crear el contexto “global” o también llamado “component context”, luego se crean los contextos locales o “view contexts” (en este caso son dos, porque tenemos dos vistas). Recuerde, usted puede elegir cúal o cuales elementos mapeará al contexto global. Finalmente, debe asegurarse que los elementos del cada “view context” estén ligados a las propiedades de los elementos de interfaz de usuario .

Pasos para la creación del Component Context (Contexto Global) 1. Desde el ventana Web Dynpro Explorer (ubicada en panel izquierdo,parte superior), se expande el nodo

Web Dynpro ->Web Dynpro Components -> PrimeraComponent.

2. Se realiza doble click en el nodo Component Controller .

3. En el panel derecho, aparecerá la solapa Context .

4. Se abre el menu contextual, en el nodo raíz Context y se selecciona la opción New ->Value Attribute. Ahora se puede crear un nuevo atributo

5. Se ingresa el Usuarionombre y se presiona Finish. El nodo atributo es adicionado al nodo raíz del contexto

6. Se vuelve a realizar para el nuevo atributo Usuarioapellido.

Más tarde, se usará la definición del contexto perteneciente a la componente Web Dynpro para implementar los datos transferidos desde contexto local correspondiente a las respectivas vistas.


Pasos para agregar las dependencias de los campos de entrada de la vista FormularioView 1. Se abre la ventana EditorView de FormularioView.

2. Se selecciona la solapa Properties.

3. Bajo el título Required Controllers, se elige Add.

4. En la lista que aparece del Ayudante con el título Select new Controller, se marca con una tilde la opción PrimeraComponent – com.teknoda.ejemplosprimerawdynpro y se presiona OK.

5. Repetir los pasos 1-4 para ResultadoView.

Ahora se encuentran creadas la dependencias de las vistas con el controlador global del proyecto.

Pasos para la creación de un contexto para las dos vistas FormularioView y ResultadoView

1. Se abre el EditorView para el FormularioView.

2. Se elige la solapa Context.

3. Desde el menú contextual del nodo raíz Context, se elige la opción New ->Value Attribute.

4. Se ingresa el nombre del atributo Nombre y se presiona Finish.

5. Desde el menú contextual del atributo Nombre recién creado, se elige Edit Context Mapping.

6. Desde el contexto de la componente component, se elige el elemento Usuarionombre. Luego se presiona Finish.

6. Nuevamente se repiten los pasos 4 y 5 (para el atributo Apellido), desde el contexto de la componente component, se elige el elemento Usuarioapellido. Luego se presiona Finish.

7. Repetir los pasos del 1-4 adaptándolos a la vista ResultView y se crea nuevamente un atributo del contexto, denominado TextoCabecera (todavia no hemos realizado el “mapping” al contexto global.)

Pasos para la vinculación de los elementos de la Interfaz con el contexto local para ambas vistas

1. Se abre EditorView para el FormularioView

2. Se elige la solapa Layout.

3. Se selecciona el Input Field nombre.

4. En la ventana Properties, se asigna el valor a la propiedad value con el atributo del contexto apropiado (Nombre). El mismo se selecciona de una ventana que se despliega al hacer un click sobre el botón “...”. La ubicación del botón es a la derecha y al final de la fila de la propiedad .

5. Finalmente, se selecciona nodo Nombre en la ventana recién desplegada y se presiona OK.

Se vuelve a realizar los mismos pasos para la vista ResultadoView, para la propiedad text del DefaultTextView, asignándose esta vez el elemento de contexto TextoCabecera ,

En la ventana del EditorView, se ve cómo queda la vista ResultadoView.Dentro del diagrama de dicha vista, se observa claramente un cuadrado que representa el elemento del contexto TextoCabecera.

En resumen, ya tenemos creados los datos que relacionan los elementos de la interfaz de usuario con sus correspondientes atributos del contexto local .


Pasos para la generación de la linea de texto que aparece en TextoCabecera de la vista ResultadoView 1. Se abre el Editor View para la vista ResultadoView .

2. Se elige la solapa Implementation .

3. Se agregan las siguientes lineas de código para que pertenezcan al método manejador de eventos onPlugDesdeFormularioView():

public void onPlugDesdeFormularioView (com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

{

//@@begin onPlugDesdeFormularioView(ServerEvent)

String textoCabecera ="Bravo, ";

//recuperamos el nombre

String nombreUsuario = wdThis.wdGetPrimeraComponentController().wdGetContext().currentContextElement().getUsuarionombre();

//recuperamos el apellido

String apellidoUsuario = wdThis.wdGetPrimeraComponentController().wdGetContext().currentContextElement().getUsuarioapellido();

//lo concatenamos en una misma cadena

textoCabecera = textoCabecera +" "+ nombreUsuario +" "+ apellidoUsuario + "!";

//Se lo asignamos al TextoCabecera de la vista ResultadoView

wdContext.currentContextElement().setTextoCabecera(textoCabecera);

//@@end

}

4. Se guarda la nueva metadata completa con el ícono Save All Metadata que se encuentra en la barra de herramientas.

Antes de poder seguir con las tareas de “deployment” (gracias al motor J2EE); se necesita la obtención de un objeto que tenga comprimido en su interior todas los elementos y la componente que estuvimos creando. Dicho objeto es una Web Dynpro Application. Una vez que tenemos ese objeto “Web Dynpro Application”, la aplicación se encuentra en condiciones de sufrir un proceso de “deploy”.

Pasos para la creación de una Web Dynpro Application 1. Para abrir el Ayudante , se elige Create Application desde el menú contextual de nodo Applications.

2. Se ingresa el nombre para la Web Dynpro Application PrimeraApplication, se especifica el nombre del paquete com.teknoda.ejemplosprimerawdynpro para las clases de Java que y se presiona Next.

3. En la ventana siguiente, se elige la opción Use existing component y se presiona Next.

4. En siguiente ventana, se dejan los valores asignados por default y se presiona Finish.


Simplemente nos queda realizar un “deploy ” de la Web Dynpro Application, para luego poder lanzarla y verla en el Browser. Pero antes debemos cumplir con los siguientes requisitos:

• Que se encuentren levantados el SAP J2EE Engine y el Software Deployment Manager (SDM)

• Para el chequeo de los seteos del Servidor, se selecciona el menú Window ->Preferences -> SAP J2EE Engine.

Prerrequisitos

Pasos para levantar el SAP J2EE Engine y Software Deployment Manager (SDM)

1. Se ubica la ruta para acceder al motor J2EE C:\usr\sap\P64\JC00\j2ee\admin (esta ruta pertenece a la versión SAP Web Application Server 6.40)

2. Se realiza un doble click en el archivo go.bat

3. Se ubica la ruta para acceder al SDM C:\usr\sap\P64\JC00\SDM\program

4. Se realiza un doble click en el archivo startSDM.bat

5. Luego, se abre la ventana SAP Management Console a través de la ruta Inicio->Programas-> SAP Management Console.

6. Dentro de la solapa Arbol, SAP Systems -> nombre del sistema por ej P64, en cada máquina número de instancia, se debe realizar click derecho y se selecciona la opción Start del menu contextual.

7. Se expande el nodo máquina numero de instancia 0, se observan 2 nodos Process List y ProcessTable.

8. Se realiza un click en ProcessTable à se despliegan en el panel derecho los nombres de los servicios iniciados y su correspondiente estado.

9. Se verifica que los servicios: J2EE Dispatcher, J2EE Server, SDM Server tengan status Running o Starting.

Pasos para la reconstrucción del proyecto Web Dynpro 1. Es importante volver a salvar la metadata, desde el menú contextual del proyecto PrimeraWebDynpro.

2. En el Web Dynpro Explorer, desde el menú contextual del nodo del proyecto PrimeraWebDynpro, se elige Rebuild Project.

En la solapa Tasks (panel derecho, parte inferior), verificar que no se encuentre error alguno.

Pasos para implementar y lanzar el proyecto 1. En el Web Dynpro Explorer, se abre el menú contextual perteneciente al objeto de la aplicación PrimeraComponent; se selecciona la opción Deploy new archive and run.

Entonces, SAP NetWeaver Developer Studio despliega la primera vista FormularioView en el Web Browser.

El ver desplegada en el Browser la aplicación Web Dynpro desarrollada, concluye la realización del proyecto Web Dynpro.


IV. Dónde obtener información adicional SAP Developers Network www.sdn.sap.com

SAP NetWeaver - http://www.sap.com/solutions/netweaver/

IMPORTANTE Copyright 2005 Teknoda S.A. Enero 2005. SAP, R/3 y ABAP son marcas registradas de SAP AG. Teknoda agradece el permiso de SAP para usar sus marcas en esta publicación. SAP no es el editor de esta publicación y no es, por lo tanto, responsable de su contenido. La información contenida en este artículo ha sido recolectada en la tarea cotidiana por nuestros especialistas a partir de fuentes consideradas confiables. No obstante, por la posibilidad de error humano, mecánico, cambios de versión u otro, Teknoda no garantiza la exactitud o completud de la información aquí volcada. Dudas o consultas: [email protected]

notas técnicas de sap / abap – white paper nro. 13 · 2009. 12. 18. · descripción: el...

Documents