Entendiendo WDP-Caso practico paso a paso.pdf

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

Notas tcnicas Tips de SAP Netweaver ABAP- JAVA Tip White Paper Nro. 13

(Lo nuevo, lo escondido, o simplemente lo de siempre pero bien explicado)

"Tips en breve/Tips en detalle" se enva con frecuencia variable y absolutamente sin cargo como un servicio a nuestros clientes SAP. Contiene notas/recursos/artculos tcnicos desarrollados en forma totalmente objetiva e independiente. Teknoda es una organizacin de servicios de tecnologa informtica y NO comercializa hardware, software ni otros productos. Si desea suscribir otra direccin de e-mail para que comience a recibir los tips enve un mensaje desde esa direccin a [email protected], indicando su nombre, empresa a la que pertenece, cargo y pas.

Tabla de contenido I. WAS y Web Dynpro dentro del universo Netweaver II. Las ventajas de las Web Dynpro y su fundamento MVC III. Creacin de una Web Dynpro Application paso a paso en el SAP Netweaver Developer Studio IV. Dnde obtener informacin adicional.

Teknoda SAPping http://www.teknodatips.com.ar

LLooss nnuueevvooss eesscceennaarriiooss ddee pprrooggrraammaacciinn ccoonn SSAAPP NNeettwweeaavveerr ((sseerriiee ddee vvaarriiooss ttiippss))

Entendiendo las Web Dynpro: un caso prctico paso a paso

Tema: Web Dynpro, Netweaver, SAP Web AS, JAVA, MVC. Descripcin: 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 bsicos de las Web Dynpro y desarrollamos un ejemplo paso a paso.

Nivel: Avanzado Versin: SAP WAS 6.3, 6.4, Netweaver 04 Fecha pub: Enero 2005 Prximos Tips: Entendiendo las Web Dynpro: Cmo construir una Web Dynpro con Web

Services NOTA: Para una correcta comprensin de este artculo, recomendamos la lectura de los tips anteriores Entendiendo el SAP Web Application Server desde el punto de vista del programador Consulte nuestro sitio www.teknodatips.com/sap-netweaver.html para accederlos.


I. Introduccin: Web Dynpro dentro del universo Netweaver

Como tratramos en artculos 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 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 gnesis, y dotado de una doble personalidad SAP nativa y JAVA, permite el desarrollo y la operacin de aplicaciones ABAP, J2EE, as como Web Services.

La tecnologa Web Dynpro es el recurso que ofrece SAP Web Application Server para manejar la capa de presentacin 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 disear las interfaces de usuario basndose en el paradigma MVC (Model View Controler). Las herramientas de diseo de Web Dynpros son independientes del entorno de ejecucin, lo que permite unificar el desarrollo de interfaces para los distintos estndares soportados por el WAS, ABAP, J2EE y .NET.

Las herramientas permiten seleccionar patrones de diseo existentes o definir libremente nuevos patrones para el layout y el flujo de la aplicacin. La descripcin de la aplicacin se almacena en un metadata repository y se utiliza para generar el cdigo de ejecucin runtime que corresponda segn el entorno. En la versin actual de Netweaver estn 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 desarrollara dentro del ABAP Workbench y su ejecucin sera 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 permitirn integrarse con el Java Dictionary para guardar datos obtenidos desde la vista, en una tabla perteneciente o no al Repositorio de Sap R/3. Tambin pueden ensamblarse con aplicaciones escritas en JAVA tal como EJB (Enterprise Java Beans) o solicitar datos a otras aplicaciones a travs de mensajes en XML (esta modalidad de comunicacin 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 lgica de presentacin se mezcla con otros aspectos de la aplicacin, o existe cdigo redundante, o donde no es posible independizar la presentacin del entorno de ejecucin. Las componentes de alto nivel de SAP Netweaver utilizarn, desde ya, el modelo de Web Dynpro. Por ejemplo, como trataremos en prximos tips, las Web Dynpro son la estrategia elegida para la construccin 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 caractersticas que la distinguen y la hacen superior a otros modelos de trabajo, debido a su pautada separacin entre la interaccin con el usuario y las funcionalidades que hacen al negocio de la aplicacin.

Por ejemplo, si lo contrastamos con el modelo JSP vemos que las JSP tienen como unidad de desarrollo la pginaWeb, representada por un archivo con extensin .jsp y la aplicacin Web como una serie de pginas JSP conectadas que, en conjunto, proveen los requerimientos funcionales. Por lo tanto, puede encontrarse cdigo perteneciente al giro del negocio disperso en la totalidad de la aplicacin; sin obligar al desarrollador a colocar este tipo de codificacin en un sector predeterminado de la estructura de la aplicacin Si el programador necesita cambiar alguna funcionalidad , debe bucear en la aplicacin y ver en qu partes se encuentra distribuida dicha funcionalidad. Este tipo de aplicaciones estn libradas a las buenas tcnicas de diseo y posterior codificacin que se hayan utilizado.

En cambio, si se observa el modelo de Aplicacin 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 slo controlador global que dirige y encapsula la funcionalidad del negocio. Por lo tanto, la codificacin de la funcionalidad del negocio se encuentra acotada al controlador global . Una componente Web Dynpro, comprende un concepto mayor que simplemente una sumatoria de pginas relacionadas ya que las Aplicaciones Web Dynpro estn basadas en una arquitectura muy poderosa denominada Model-View-Controller (MVC). En sintesis, la diferencia esencial de la Web Dynpro es la clara separacin 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 aos y se basa en la estructuracin de aplicaciones para permitir la separacin 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 visualizacin. El modelo provee un nico punto para actualizar o recuperar informacin.

*La Vista: Visualiza los datos de la Aplicacin usando una representacin grfica. 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 aplicacin y de conducir los requerimientos de navegacin.

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, adems de la funcionalidad de contruccin de nuevos elementos de la interfaz de usuario.

Controller: Se encarga del manejo de flujo de datos y de la navegacin. Model: Se encarga de la persistencia de los datos. Esto puede ser utilizando JAVA a travs EJB, ABAP a travs de RFC y BAPIs .Como tercera opcin tenemos el uso de Web Services

En la siguiente seccin, se complementarn los pasos de la construccin de una Web Dynpro ejemplo con fuertes conceptos tericos.


III. Creacin 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 (acrnimo de Integrated Development Environment) basado en el framework de Eclipse cuya finalidad es la creacin de Aplicaciones de JAVA y J2EE. Esta herramienta provee la insfraestructura necesaria para administrar diferentes versiones de cdigo dentro de un equipo de desarrolladores, transportar software, manejar la internacionalizacin, elegir y manipular las diferentes formas de persistencia y ms 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 jeraRqua de componentes de un proyecto Web Dynpro, dentro del editor de cdigo, para la disposicin de los elementos UI , etc.

Tambin 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 Cdigo).

Ejemplo de Web Dynpro A continuacin desarrollaremos una aplicacin Web Dynpro a la que llamaremos PrimeraWebDynpro.

Esta aplicacin va estar compuesta por 2 vistas. La primera vista debera tener el siguiente aspecto:

El usuario ingresar su nombre y su apellido en las cajas de texto correspondientes. Cuando presione el botn Enviar, los datos sern mostrados en la segunda vista.

El aspecto de la segunda vista ser el siguiente:


El nombre y el apellido sern mostrados en la segunda vista dentro de la etiqueta Mensaje. El botn Atrs 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 continuacin 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 creacin 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 an 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 creacin 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, automticamente 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. Adems, de manera automtica, se crea un objeto Windows que tiene el mismo nombre que nuestra componente creada (PrimeraComponent). Una vista slo puede ser desplegada en el Browser si est embebida dentro de un objeto Windows. El mencionado objeto tambin se encarga de guardar la navegacin de las vistas creadas. A continuacin crearemos la segunda vista embebida en la componente PrimeraComponent.

Pasos para la creacin de una o ms 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 diseo y se estira para formar un rea rectangular de un tamao considerable.

4. Aparece el ayudante, se elige la opcin Embed new View option y se presiona el botn Next.

5. Se ingresa el nombre para la nueva vista ResultadoView y se presiona el botn Finish.

Como ya se tienen las dos vistas definidas, se debe indicar la navegacin entre las vistas. En consecuencia, se crean puntos de entrada y salida para cada vista habilitando conectores de entradas y salidas (inbound plugs youtbound 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 travs de la propiedad StartView cal va ser la primera vista que se despliegue en el Browser. La estructura de navegacin partir de esta vista.

Cada vez que se coloca un inbound plug se genera automticamente un mtodo que maneja dicho evento en el fuente java que representa a la vista


La secuencia de pasos para definir la navegacin est dividida en dos partes. La primera parte se refiere a la creacin de los plugs y la segunda parte para conectar a los links de navegacin.

1 Parte: Pasos para la creacin 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 opcin Create Outbound Plug.

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

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

5. Se selecciona la opcin 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 creacin 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 conexin de los plugs por el uso de links de navegacin 1. Para la creacin del link de navegacin 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 lnea desde el outbound plug de FormularioView al inbound plug de ResultadoView.

2. De manera similar, se crean los links de navegacin 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 vern 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 cdigo de java generado para dicha vista. De manera automtica , en dicho cdigo veremos implementados los mtodos 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 accin apropiada que permita relacionar un elemento de interfaz de usuario (por ejemplo un botn) con el traslado a otra vista. En consecuencia se necesita implementar un mtodo que acte como un manejador de eventos y reaccione ante tal accin (por ej: presionar un bton), ejecutndose luego el cambio correspondiente.

Pasos para la creacin de actions (acciones) e implementacin de la navegacin 1. Dentro del EditorView de FormularioView, se elige la solapa Actions.

2. Se presiona el botn New.

3. Aparece el ayudante para crear una nueva accin. Entonces, se ingresa el nombre Enviar para la nueva accin, 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 accin, 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 accin 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 accin. 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 mtodo wdFirePlugToResultView() perteneciente al outbound plug. Para la ejecucin de dicho mtodo, se utiliza la variable privada wdThis que pertenece a la Interface IPrivateResultadoView. La misma se utiliza siempre que se necesite un mtodo 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). Simultneamente, 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 estn acomodados bajo el nodo raz 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 travs de la ventana Properties view .

Pasos para la realizacin del diseo de la vista FormularioView 1. Desde la ventana Outline view, se elige el nodo raz RootUIElementContainer y se setean las

propiedades tal como indica la siguiente tabla:

Property Value Layout GridLayout

CellPadding 5

ColCount 3

Aclaracin: 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 aplicacin prueba de Teknoda!!!!!

ColSpan 3

3. Desde la ventana Outline view, se selecciona el elemento RootUIElementContainer y desde el men contextual se elige la opcin 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 contina con la vista ResultadoView.

Pasos para la realizacin del diseo de la vista ResultadoView 1. Desde la ventana Outline view, se elige el nodo raz 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 dinmicamente 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 opcin 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 ms de la interfaz de usuario Volver (con el type Button). Asignar los siguientes valores a las propiedades:

message

Property Value Text La aplicacin 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 explcitamente. De una manera sencilla y amigable, el concepto de Web Dynpro permite relacionar los datos a travs del context. El context est representado en el esquema MVC con la funcin 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 intervencin de otro nuevo contexto llamado standard o global, cuyo mbito de dominio abarca la totalidad de la aplicacin Web Dynpro. El contexto global acompaa al ciclo de vida de toda la aplicacin.

Es importante aclarar que los datos del contexto local pueden hacerse visible a las vistas que se desee, a travs de contexto global, sin necesidad de hacer copia de los datos explcitamente 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 Aplicacin

*Define las posibilidades de interactuar con el Usuario

*Maneja la llegada de los eventos *Manipula el modelo

*Define el flujo de Control, determina la prxima vista

*Define los datos al acceso de la Aplicacin

*Encapsula la funcionalidad de negocios


De acuerdo a los conceptos explicados en los prrafos anteriores, se debe crear el contexto global o tambin 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 cal o cuales elementos mapear al contexto global. Finalmente, debe asegurarse que los elementos del cada view context estn ligados a las propiedades de los elementos de interfaz de usuario .

Pasos para la creacin 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 raz Context y se selecciona la opcin 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 raz del contexto

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

Ms tarde, se usar la definicin 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 ttulo Required Controllers, se elige Add. 4. En la lista que aparece del Ayudante con el ttulo Select new Controller, se marca con una tilde la opcin

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 creacin 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 raz Context, se elige la opcin New ->Value Attribute.

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

5. Desde el men contextual del atributo Nombre recin 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 adaptndolos 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 vinculacin 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 botn .... La ubicacin del botn es a la derecha y al final de la fila de la propiedad .

5. Finalmente, se selecciona nodo Nombre en la ventana recin desplegada y se presiona OK.

Se vuelve a realizar los mismos pasos para la vista ResultadoView, para la propiedad text del DefaultTextView, asignndose esta vez el elemento de contexto TextoCabecera , En la ventana del EditorView, se ve cmo 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 generacin 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 cdigo para que pertenezcan al mtodo 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 obtencin 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 aplicacin se encuentra en condiciones de sufrir un proceso de deploy.

Pasos para la creacin 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 opcin 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

versin 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 travs de la ruta Inicio->Programas-> SAP Management Console.

6. Dentro de la solapa Arbol, SAP Systems -> nombre del sistema por ej P64, en cada mquina nmero de instancia, se debe realizar click derecho y se selecciona la opcin Start del menu contextual.

7. Se expande el nodo mquina 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 reconstruccin 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 aplicacin PrimeraComponent; se selecciona la opcin 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 aplicacin Web Dynpro desarrollada, concluye la realizacin del proyecto Web Dynpro.


IV. Dnde obtener informacin 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 publicacin. SAP no es el editor de esta publicacin y no es, por lo tanto, responsable de su contenido. La informacin contenida en este artculo ha sido recolectada en la tarea cotidiana por nuestros especialistas a partir de fuentes consideradas confiables. No obstante, por la posibilidad de error humano, mecnico, cambios de versin u otro, Teknoda no garantiza la exactitud o completud de la informacin aqu volcada.

Dudas o consultas: [email protected]

Documents

Entendiendo WDP-Caso practico paso a paso.pdf