Entendiendo WDP-Caso Practico Paso A Paso PDF

Teknoda - Notas Tcnicas de SAP/ ABAP 1
Dudas o consultas a sapping@teknoda.com

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 sapping@teknoda.com, 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
L Lo os s n nu ue ev vo os s e es sc ce en na ar ri io os s d de e p pr ro og gr ra am ma ac ci i n n c co on n
S SA AP P N Ne et tw we ea av ve er r ( (s se er ri ie e d de e v va ar ri io os s t ti ip ps s) )

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<nombre del plug>.

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().getUsuariono
mbre();
//recuperamos el apellido
String apellidoUsuario =
wdThis.wdGetPrimeraComponentController().wdGetContext().currentContextElement().getUsuarioap
ellido();
//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: szibecchi@teknoda.com

Entendiendo WDP-Caso Practico Paso A Paso PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Entendiendo WDP-Caso Practico Paso A Paso PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Teknoda - Notas Tcnicas de SAP/ ABAP 1

Dudas o consultas a sapping@teknoda.com

Anda mungkin juga menyukai