Documentos de Académico
Documentos de Profesional
Documentos de Cultura
T13wdyn Jun16
T13wdyn Jun16
http://www.teknodatips.com.ar
Avanzado
Versin:
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.
"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.
II.
III.
IV.
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.
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.
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
2.
3.
En el panel izquierdo se selecciona Web Dynpro y luego en el panel derecho Web Dynpro Project y se
presiona Next.
4.
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.
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.
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.
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.
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.
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.
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.
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.
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>.
//@@begin onPlugDesdeResultadoView(ServerEvent)
//@@end
}
2.
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.
//@@begin onActionEnviar(ServerEvent)
wdThis.wdFirePlugAResultadoView();
//@@end
}
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 .
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
ColCount
Aclaracin: No todos los valores de la propiedades son editables, en algunas se debe seleccionar un valor
predefinido desde una lista desplegable.
Teknoda - Notas Tcnicas de SAP/ ABAP
Dudas o consultas a sapping@teknoda.com
10
2.
Value
Design
header2
Text
ColSpan
3.
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
LabelFor
nombre
PaddingTop
large
etiqueta2
Property
Value
Text
LabelFor
apellido
PaddingTop
large
nombre
Property
Value
tooltip
nombre
value
PaddingTop
large
apellido
Property
Value
tooltip
apellido
value
PaddingTop
large
11
Enviar
Property
Value
text
Enviar
tooltip
Ir a la vista siguiente
Enviar
2.
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
colCount
Value
design
header2
text
colSpan
3.
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.
Value
Text
La aplicacin es un xito
PaddingTop
large
Volver
Property
Value
Text
Volver
Tooltip
Ir a la vista anterior
Volver
12
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.
13
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 .
Desde el ventana Web Dynpro Explorer (ubicada en panel izquierdo,parte superior), se expande el nodo
Web Dynpro ->Web Dynpro Components -> PrimeraComponent.
2.
3.
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.
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.
14
2.
3.
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.
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.
2.
3.
Desde el men contextual del nodo raz Context, se elige la opcin New ->Value Attribute.
4.
5.
Desde el men contextual del atributo Nombre recin creado, se elige Edit Context Mapping.
6.
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.
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 .
15
3.
Se agregan las siguientes lineas de cdigo para que pertenezcan al mtodo manejador de eventos
onPlugDesdeFormularioView():
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.
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.
4.
En siguiente ventana, se dejan los valores asignados por default y se presiona Finish.
16
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.
3.
4.
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.
17
IV.
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
18