5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
1/89
2005 REALTECH
TAPM50 Workload Analysis
Desarrollo de un prototipo de
Movilidad con Web DynproDaniel Valds
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
2/89
2005 REALTECH
Copyright 2005 SAP ESPAA. Reservados todos los derechos.
Prohibida la distribucin, reproduccin o traduccin de estemanual o de parte del mismo, sea cual sea el fin y la forma, sinla autorizacin expresa por escrito de SAP ESPAA. Lainformacin contenida en este manual puede modificarse ocomplementarse sin previo aviso.
Reservados todos los derechos.
Copyright
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
3/89
2005 REALTECH
Resumen del curso
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
4/89
2005 REALTECH
Objetivos del curso
Una vez terminado este curso, podr:
Comprender la base del Modelo de Programacin
Web Dynpro Desarrollar una aplicacin Web Dynpro
Crear e implementar una Interfaz de Usuarioutilizando Vistas y Ventanas
Crear e implementar lgica de programacin atravs de los controladores Web Dynpro
Sabr utilizar diferentes emuladores
Pocket PC
BlackBerry
Nokia Smartphone
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
5/89
2005 REALTECH
Antes de empezar
Requisitos previos:
Conocimientos bsicos de Java
Conocimientos bsicos de Web Dynpro
A quin va dirigido:
Desarrolladores Java
Desarrolladores Web Dynpro
Personal de IT
Duracin: 3 Horas
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
6/89
2005 REALTECH
Unidad 1 Acceso Multicanal
Unidad 2 Introduccin a Web Dynpro Java
Unidad 3 Desarrollo de aplicaciones mviles Web DynproUnidad 4 Sumario
Resumen
Contenidos
Bibliografa
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
7/89
2005 REALTECH
Acceso Multicanal
Introduccin a Web Dynpro Java
Desarrollo de aplicacionesmviles Web Dynpro
Sumario
Acceso Multicanal
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
8/89
2005 REALTECH
Contenidos
Enumerar los diferentes tipos de acceso existentes
Contenidos/Objectivos
SAP Netweaver Acceso Multicanal
SAP Netweaver Introduccin a la Tecnologa
ObjetivosUna vez terminado este curso, podr:
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
9/89
2005 REALTECH
SAP NetWeaver - Acceso Multicanal
CompositeApplicationFramework
Portal Collaboration
Bus. Intelligence
Master Data Mgmt
Knowledge Mgmt
IntegrationBroker
BusinessProcess Mgmt
J2EE
DB and OS Abstraction
ABAP
LifeCycleMgmt
Mobile .Net Client (mySAP CRM)
AutoID
SMS, Fax, email
Web-based GUI
Mobile Java Client
Mobile Browser Client
NetWeaver Voice
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
10/89
2005 REALTECH
SAP NetWeaver Mobile Introduccina la Tecnologa
Mobile Java Client
Optimizado para aplicaciones basadas en PDA o handheldcon unescueto conjunto de funciones y un pequeofootprint, como por
ejemplo Mobile Asset Management Technologa: Mobile Infrastructure
Mobile .Net Client (mySAP CRM)
Diseado para aplicacioneswindows-basedocasionalmentebasadas en CRM Field con un rico conjunto de funciones
Tecnologa: Mobile Client Technology para CRM
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
11/89
2005 REALTECH
SAP NetWeaver Mobile Introduccina la Tecnologa
Mobile Browser Client
Tecnologa centrada en aplicaciones online donde el navegador
de un dispositivo mvil est siempre conectado a un servidorWeb, como pueda ser un Mobile Sales Online
Tecnologa: Mobile Web Dynpro Online
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
12/89
2005 REALTECH
Resumen
Ahora puede:
Enumerar los diversos tipos de acceso existentes
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
13/89
2005 REALTECH
Acceso Multicanal
Introduccin a Web Dynpro Java
Desarrollo de aplicacionesmviles Web Dynpro
Sumario
Acceso Multicanal
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
14/89
2005 REALTECH
Contenidos
Describir los requisitos a cumplir por un framework Web
Explicar el paradigma MVC Enumerar las principales partes que componen un proyecto Web
Dynpro
Desarrollar su primera aplicacin Web Dynpro
Contenidos / Objectivos
Requisitos especiales de SAP para un framework Web
Paradigma Modelo-Vista-Controlador (MVC) Context mapping y data binding
Perspectivas, editores y vistas
Desarrollo de una aplicacin Web Dynpro bsica
ObjetivosUna vez terminado este curso, podr:
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
15/89
2005 REALTECH
Requisitos especiales de SAP parauna Plataforma Web
Modelo independiente del lenguaje (Java y ABAP)para la creacin de interfaces de usuarioprofesionales
Elementos UI estandarizados
Interfaces predefinidas a sistemas de backend(Web Services, JavaBeans, RFC, )
Independencia del Cliente
Personalizacin / adaptacin para usuariosfinales
Interoperabilidad
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
16/89
2005 REALTECH
Tres opciones para construiruna Interfaz de Usuario
1) Los elementos UI pueden ser situadosen la pantalla de manera individual, e.g.
Radio buttons
Drop Down lists
Input fields
etc
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
17/89
2005 REALTECH
Tres opciones para construiruna Interfaz de Usuario
1) Los elementos UI pueden ser situadosen la pantalla de manera individual, e.g.
Radio buttons
Drop Down lists
Input fields
etc
2) La interfaz de usuario de un componente WebDynpro existente puede ser completamentereutilizado
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
18/89
2005 REALTECH
Tres opciones para construiruna Interfaz de Usuario
1) Los elementos UI pueden ser situadosen la pantalla de manera individual, e.g.
Radio buttons
Drop Down lists
Input fields
etc
2) La interfaz de usuario de un componente WebDynpro existente puede ser completamentereutilizado
3) Aplicaciones Web Dynpro ms avanzadascomo Employee Self Service, utilizan una
plataforma de vista abstracta conocidacomo Floor Plan Manager.
Aqu el layout de pantalla y la navigacinentre iViews es definida de una maneraabstracta
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
19/89
2005 REALTECH
Elementos UI complejos
Comparativa de
valores
rbol con tablas
anidadas
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
20/89
2005 REALTECH
Elementos UI complejos
!
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
21/89
2005 REALTECH
Requisitos especiales de SAP parauna Plataforma Web
Model independiente del lenguaje (Java y ABAP)para la creacin de interfaces de usuarioprofesionales
Elementos UI estandarizados
Interfaces predefinidas a sistemas de backend(Web Services, JavaBeans, RFC, )
Independencia del Cliente
Personalizacin / adaptacin para usuariosfinales
Interoperabilidad
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
22/89
2005 REALTECH
El wizard de Modelo permite acceder aservicios de backend
Todos los componentes WebDynpro consiguen acceder aservicios de backend utilizandoobjetos de ejecucin conocidoscomo Modelos.
Los modelos son creados a travs del Model Wizard en el NetWeaverDeveloper Studio
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
23/89
2005 REALTECH
Web ServiceProvider
J2EEBackendServer
Escenarios de aplicacin con Web Dynpro
J2EE
Web DynproRuntime
Deployed Web
Dynpro AppDeployed WebDynpro App
SAP Enterprise Portal
Web DynproApplication
HTTP(S)SAP
NetWeaverDeveloper
Studio
SAP
NetWeaverDeveloper
Studio
ABAP
Web DynproRuntime
Web Dynpro
AppWeb DynproApp
ABAP developmentWorkbench
Backend ApplicationBackend Application
ABAPBackendServer
WebService
RMI SOAP RFC
RFC enabledFunction Modules
EJB (e.a.)
BusinessData
BusinessData
BusinessData
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
24/89
2005 REALTECH
Requisitos especiales de SAP parauna Plataforma Web
Model independiente del lenguaje (Java y ABAP)para la creacin de interfaces de usuarioprofesionales
Elementos UI estandarizados
Interfaces predefinidas a sistemas de backend(Web Services, JavaBeans, RFC, )
Independencia del Cliente
Personalizacin / adaptacin para usuariosfinales
Interoperabilidad
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
25/89
2005 REALTECH
Independencia del cliente:Navegadores
Tecnologa de-factoestandarizada
Alta adopcin por parte deorganizaciones y consumidores
Accesibilidad sencilla
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
26/89
2005 REALTECH
Independencia del cliente:Clientes Locales
Tiempos de respuesta lo ms
rpidos posibles
Optimizado para la utilizacinmnima de recursos en trminosde CPU, Memoria, Ancho deBanda
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
27/89
2005 REALTECH
Independencia del cliente:Dispositivos mviles
en un Pocket PC
en un dispositivoWireless BlackBerry
en un Nokia SmartPhoneNokia 9500/9300
" #$ % & !'
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
28/89
2005 REALTECH
Requisitos especiales de SAP parauna Plataforma Web
Model independiente del lenguaje (Java y ABAP)para la creacin de interfaces de usuarioprofesionales
Elementos UI estandarizados
Interfaces predefinidas a sistemas de backend(Web Services, JavaBeans, RFC, )
Independencia del Cliente
Personalizacin / adaptacin para usuariosfinales
Interoperabilidad
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
29/89
2005 REALTECH
Personalizacin del usuario final /Adaptacin
La adaptacin es una parte integral de Web Dynpro Modificable y por tanto fcilmente actualizable
Disponible en todas las aplicaciones Web Dynpro sin ningn esfuerzoadicional para los desarrolladores de aplicaciones
Personalizacin basada en rol y usuario final
reas de adaptacin
Cambios estticos de las pantallas
Cambiar textos y etiquetas Borrar campos
Cambiar atributos de campos
Cambiar secuencia de campos
Aadir campos especficos de clientes
Textos adicionales y ayuda de usuario final
Aadir servicios especficos de clientes, Reports
Ejecucin de cualquier tipo de aplicacin (via URL) desde cualquier pantalla
Ad t bilid d W b D
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
30/89
2005 REALTECH
Adaptabilidad Web Dynpro Cmo funciona?
(!$) !$ * !+
Adaptabilidad Web D npro
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
31/89
2005 REALTECH
Adaptabilidad Web Dynpro Cmo funciona?
#,&
Adaptabilidad Web Dynpro
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
32/89
2005 REALTECH
Adaptabilidad Web Dynpro Cmo funciona?
' -
Requisitos especiales de SAP para
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
33/89
2005 REALTECH
Requisitos especiales de SAP parauna Plataforma Web
Model independiente del lenguaje (Java y ABAP)para la creacin de interfaces de usuarioprofesionales
Elementos UI estandarizados
Interfaces predefinidas a sistemas de backend(Web Services, JavaBeans, RFC, )
Independencia del Cliente
Personalizacin / adaptacin para usuariosfinales
Interoperabilidad
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
34/89
2005 REALTECH
Otra plataforma
Web3
Requisito: Interoperabilidad
Web Dynpro
1
Suspend2
4
5Resume
6
.- / $-! 0
$
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
35/89
2005 REALTECH
Web Dynpro
#%$ !
$&!' , $
' -
P di d i W b D
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
36/89
2005 REALTECH
Paradigma de programacin Web Dynpro
Servicios UI genricos
Value help, gestin de mensajes
Herramientas flexibles para la seleccin de datos por parte deusuarios
Arquitectura Modelo-Vista-Controlador Modelo: Encapsula la lgica de negocio y persistencia
Vista: Muestra los datos proporcionados por el Controlador y Modelo(s)
Controlador: Manejo de eventos, interaccin con modelo, navegacin
nfasis en la declaracin codificacin UI coding prcticamente nula
Declaracin de flujos de pantalla y diseo UI (navegacin)
Declaracin en tiempo de ejecucin de estructuras y flujos de datos
Componente reutilizables
Integrado con la Infraestructura de Desarrollo NetWeaver
Construccin de aplicaciones Web a partir de componentesreutilizables
Modelo Vista Controlador (MVC) clsico
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
37/89
2005 REALTECH
Controlador
El diseo MVC clsico crea una arquitectura para separa el generador dedatos del consumidor. Por ejemplo, esto puede utilizarse para:
Separar la lgica de presentacin de la lgica de aplicacin
Separar el sistema de negocio de backend de la lgica de aplicacin
Peticin
Respuesta
Modelo Vista Controlador (MVC) clsico
Capa de Interaccin de Usuario
Capa de Interaccin de Negocio
Liga el modelo y la vista,seleccionando qu vistamostrar a continuacin Modelo
VistaMuestra los datos deaplicacin proporcionadospor el modelo.
En Struts o JSF, la vista esuna pgina JSP.
Separa el sistema denegocio de backend y laaplicacin local
Web Dynpro User Interface Zoom-in:
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
38/89
2005 REALTECH
Web Dynpro User Interface Zoom in:10x
Web Dynpro slo para el diseo de Interfaces de Usuario
Navegador SAPJ2EE Server
WebDynproClient
Web DynproRuntime
SistemasBackend
Web Dynpro Client Zoom in: 10x
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
39/89
2005 REALTECH
Web Dynpro Client Zoom-in: 10x
Canal nico entre cliente y runtimeEl servidor genera el cdigo HTML y Javascript, mientras queelcliente lo muestra sin necesidad de cargar de nuevo la pgina
ClienteWeb Dynpro
Web Dynpro Runtime
Web Dynpro Application
http(s)
Web Dynpro Application
Web Dynpro Application
Web Dynpro Application
Web Dynpro Application
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
40/89
2005 REALTECH
y p ppZoom-in: 10x 10x
Una aplicacin Web Dynpro se compone de uno o ms componentesWeb Dynpro funcionando juntos para ofrecer un proceso de negociocompleto
Aplicacin Web Dynpro
Modelo
Web DynproComponent
ComponenteWeb Dynpro
ComponenteWeb Dynpro
URL
En una aplicacin Web Dynpro, existe un componente que siempre secomporta como componente raz. Este es el punto de inicio para todala funcionalidad y es el nico componente accesible por URL
Componente raz
Web Dynpro Component
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
41/89
2005 REALTECH
y p pZoom-in: 10x 10x 10x
Modelos
ComponentController
Contiene
Window
Implementa
Visible desdeel exterior
Visible desdeel interior
Entidades visuales Entidades programticas
ViewLayout
Declaracionesde Uso
Custo
mC
ontroller
ViewController
InterfaceView
Controller
DeclaracionesdeUso
Interfaceview
Interface
Controller
C o m p o n e n t e W e b D y n p r o
Componentes
Modelo 1
Modelo 2
Web Dynpro Custom Controller
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
42/89
2005 REALTECH
Zoom-in: 10x 10x 10x 10x
Custom Controller
Implementation
RequiredControllers
ControllerInterface
Models Model Usage
Other WDControllers
CustomController
Creado por codificacin o
declaracin explcitaCreado por el Web Dynpro Framework (WDF)
Other WDComponents
ComponentUsage
StandardHook
Methods
InstanceMethods
Context
Root Node
Model
Object
Model
Object Events
Web Dynpro View ControllerZ i
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
43/89
2005 REALTECH
View ControllerImplementation Layout
Creado por codificacin odeclaracin explcita
Creado por el Web Dynpro Framework (WDF)
NavigationPlugs
Actions
Context
Root Node
RequiredControllers
ControllerInterface
Models Model Usage
Other WDControllers
CustomController
Other WDComponents
ComponentUsage
StandardHook
Methods
InstanceMethods
ModelObject
ModelObject
Zoom-in: 10x 10x 10x 10x
Context Mapping: Los datos set t t l d
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
44/89
2005 REALTECH
comparten entre controladores
C o m p o n e n t e W e b D y n p r o
Component Controller View Controller
Relacin de mapeo
Context Root
SalesOrders
LongText
OrderNo
SalesDate
SalesRep
LineItems
Description
ItemNo
Price
Quantity
Context Root
SalesOrders
LongText
OrderNo
SalesDate
SalesRep
LineItems
Description
ItemNo
Price
Quantity
Coleccin de nodo mapeada Origen del mapeode la coleccin de nodo
Declaracinde Utilizacinde Controlador
Binding de elementos UI:M t d d t t ll
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
45/89
2005 REALTECH
Mostrando datos por pantalla
C o m p o n e n t e W e b D y n p r o
View ControllerComponent Controller
Context Root
SalesOrders
LongText
OrderNo
SalesDate
SalesRep
LineItems
Description
ItemNo
Price
Quantity
Context Root
SalesOrders
LongText
OrderNo
SalesDate
SalesRep
LineItems
Description
ItemNo
Price
Quantity
Relacin deContext mappingRelacin deData Binding
View layout
Flujo de datos declarativo:Binding & Mapping
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
46/89
2005 REALTECH
Binding & Mapping
MasterViewOpportunities
Goals...
ProductsCategory
Product IDQuantity...
Valuation...
MasterViewContext
DetailView
Products
CategoryProduct IDQuantity...
DetailViewContext
databinding
Sales...
OpportunitiesGoals
...ProductsCategoryProduct IDQuantity...
Valuation...
...
CustomContext
contextmapping
Perspectivas
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
47/89
2005 REALTECH
p
Perspectivas II
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
48/89
2005 REALTECH
p
La ventana de workbench muestra una o msperspectivas
Una perspectiva contiene un conjunto de vistascon el objetivo comn de lograr un tipoespecfico de tarea (e.g. Java development,
Debugging, ...) Los editores se comparten entre perspectivas
Utilizacin
Abrir una nueva perspectiva: Men Window ->
Perspectives -> Other... Cambiar a otra perspectiva ya abierta
seleccionndola de la barra de shortcuts del ladoizquierdo de la ventana de workbench
Cerrar una perspectiva: Men de contexto en el
icono de perspectiva de la barra de shortcuts Re-ordenacin de vistas arrastrndolas a otra
posicin (igualmente tabulada)
Recuperacin del estado original de unaperspectiva: Menu Window -> Reset Perspective
Editores y Vistas
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
49/89
2005 REALTECH
Editores y Vistas II
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
50/89
2005 REALTECH
Una parte (vista o editor) est activa Una parte puede ser aumentada a pantalla completa o reducida a
su tamao normal haciedo doble clic sobre su propio title bar
La seleccin en una parte puede influir en lo que se muestra en
otras vistas o editores dependientes Vistas Soportan editores
Representaciones estructuradas de objetos
Navegacin a objetos Comienzo de operaciones sobre objetos
Apertura de una nueva vista: Window -> Show View -> Other...
Editores Siempre aparecen en el rea central de edicin
Diferentes tipos de editores (e.g. Java, text file, ...) asociados con tiposde ficheros Men y toolbar pueden mostrar diferentes funciones dependiendo del tipo
de editor
Proyectos
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
51/89
2005 REALTECH
El workspace Eclipse consiste en un conjunto de
de proyectos importados Pueden existir dependencias entre los proyectos
Creacin de un nuevo proyecto: Utilizar elasistente New de la esquina superior izquierda
de la ventana del workbench Import de un proyecto existente: Usar File ->
Import... -> Existing project into workspace yseleccionar la carpeta del proyecto buscado
Proyectos II
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
52/89
2005 REALTECH
Se puede cerrar y abrir proyectos
Los proyectos cerrados no aparecen en todaslas vistas
Usar el men de contexto del proyecto (e.g. enla vista Navigator) para conmutar entre estadoabierto y cerrado (Open Project resp. CloseProject)
Borrado de proyectos:
Seleccionar Delete del men de contexto delproyecto
Elegir si se quiere eliminar el proyecto slo delworkspace o tambin del filesystem (borrado
completo)
Preferencias
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
53/89
2005 REALTECH
Configuracin de usuariopara todas las reas del IDE
Java editor
Debugging
J2EE server
...
Se llega a travs de Window> Preferences
Perspectiva Web Dynpro
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
54/89
2005 REALTECH
Web Dynpro Explorer
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
55/89
2005 REALTECH
Proporciona una vista lgica de losobjetos de los proyectos Web Dynpro
Applications
Models
Components
...
Punto de inicio para la mayor parte de
operaciones en los proyectos Web Dynpro Creacin de nuevos objetos
Edicin y borrado de objetos existentes
Construccin, despliegue y ejecucinde aplicaciones Web Dynpro
Data Modeler
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
56/89
2005 REALTECH
Herramienta grfica para... Modelado del flujo de datos con ayuda de data links
Creacin de nuevas vistas, controladores, etc.
Definicin de mapeo de contextos y model bindings
Navigation Modeler
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
57/89
2005 REALTECH
Herramienta grfica para...
Definicin de la organizacin de las vistas de una aplicacin Web Dynpro
Definicin de la estructura de navegacin
View Designer
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
58/89
2005 REALTECH
Editor WYSIWYG para definir la interfaz de usuario de una vista Web Dynpro Mantenimiento de la estructura de contexto para los datos utilizados en la
vista (ver editor del contexto)
Mantenimiento de relaciones de uso, acciones, mtodos y codificacin Java
Editor de Controlador y Contexto
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
59/89
2005 REALTECH
Mantenimiento de la estructura de contexto para los datos utilizados enel controlador
Mantenimiento de la relaciones de uso, mtodos, eventos y cdigo Java
Message Editor
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
60/89
2005 REALTECH
Mantenimiento de varios tipos de mensajes utilizados en lasaplicaciones Web Dynpro
Relacin uno a uno entre el componente Web Dynpro y el
message pool Este editor no es especfico de Web Dynpro
Cuidado al editir los ficheros.xlf nativos!
Ejercicio prctico:La aplicacinHello World!
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
61/89
2005 REALTECH
# $' 1 2
Utilizar el primer ejercicio del documentoEjercicio / Solucin
Tiene aproximadamente 10 minutes paradesarrollar la aplicacin Hello World!
Resumen
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
62/89
2005 REALTECH
Ahora puede:
Describir los requisitos a cumplir por un framework Web
Explicar el paradigma MVC Enumerar las principales partes que componen un proyecto Web
Dynpro
Desarrollar su primera aplicacin Web Dynpro
Acceso Multicanal
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
63/89
2005 REALTECH
Acceso Multicanal
Introduccin a Web Dynpro Java
Desarrollo de aplicacionesmviles Web Dynpro
Sumario
Contenidos/Objectivos
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
64/89
2005 REALTECH
Contenidos
Describir la arquitectura bsica de Web Dynpro Mobile
Enumerar algunos de los principales elementos UI para WD Mobile
Utilizar un emulador BlackBerry
Desarrollar una aplicacin Mobile bsica
Arquitectura de Web Dynpro Mobile
Elementos UI
Desarrollo de una aplicacin Mobile
ObjetivosUna vez terminado este curso, podr:
Mobile Web Dynpro Architecture Vista general
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
65/89
2005 REALTECH
Web Application Server
Web Dynpro Runtime
CRMCRM
SCMSCM
PLMPLM
R/3R/3R/3R/3R/3httpresponse
Browser-
based Devices
Model Layer
RFCBAPI
Web Service
Backend
httprequest Device and Browser Recognition
Unified Rendering
PIE ClientWML
Client (RIM) Client
Data
UI Tree
Data
UI Tree
Data
UI Tree
Events
EventsEvents
Renderer
RendererRenderer
Arquitectura Mobile Web Dynpro paraBlackBerry
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
66/89
2005 REALTECH
Firewall
SAP WebApplication Server
BlackBerryMobile Data Service
(MDS)
Backend SAP Web ApplicationServer with
Web Dynpro runtime
RIMBlackBerryEnterprise
Server
SAP NetWeaver
Developer Studio
Deploy
RIM
Simulator
Test
Use
Elementos UI existentes para MobileWeb Dynpro
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
67/89
2005 REALTECH
! 3 4 % 545%
Button, Caption, CheckBox, CheckBoxGroup, DropDownByIndex,DropDownByKey, Group, Image, InputField, Label, LinkToAction,LinkToURL, RadioButton, RadioButtonGroupByIndex,
RadioButtonGroupByKey, Table, TextEdit, TextView,TransparentContainer, ViewContainerUIElement
Parmetro URL para BlackBerry ?sap-wd-client=WmlClientParmetro URL para Nokia ?sap-wd-client=NokiaS80Client
! 3 4
Button, Caption, CheckBox, CheckBoxGroup, DropDownByIndex,DropDownByKey, Group, Image, InputField, Label, LinkToAction,LinkToURL, RadioButton, RadioButtonGroupByIndex,
RadioButtonGroupByKey, Table, TabStrip,TextEdit, TextView,TransparentContainer, Tray, ViewContainerUIElement, BarCodeReader,FunctionKey, RFIDReader
Parmetro URL para PocketPC ?sap-wd-client=PieClient
Elementos UI en diferentes navegadores
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
68/89
2005 REALTECH
545%
Button
4
CheckBox
DropDown
mostrado como un link
mostrado como etiqueta WML Seleccin presionandobarra espaciadora
Elementos UI en diferentes navegadores
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
69/89
2005 REALTECH
545%
Group
4
InputField
Link
Usa la anchura de la pantalla completa
Elementos UI en diferentes navegadores
5 45 4
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
70/89
2005 REALTECH
545%
RadioButton
4
TextView
TextEdit
Elementos UI en diferentes navegadores
5 45 4
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
71/89
2005 REALTECH
545%
Image
4
Table
Un ejemplo
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
72/89
2005 REALTECH
en MS IE 6.0 en un Pocket PC en un BlackBerryWireless Handheld
Indicaciones bsicas de manejo
La acentuacin (highlighting) de links e iconos de aplicacin
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
73/89
2005 REALTECH
La acentuacin (highlighting) de links e iconos de aplicacinse realiza o bien moviendo la rueda del ratn o bienpresionando el cursor arriba o abajo.
La seleccin se realiza o bien presionando la rueda del ratno presionando la tecla Enter del teclado.
Cuando se selecciona un link, la nueva pgina no es llamadainmediatamente sino que aparece una especie de men decontexto. Este men tambin se puede lanzar presionando larueda del ratn en cualquier parte de la pantalla.
La acentuacin (highlighting) de una entrada de men en elmen de contexto se realiza o bien moviendo la rueda delratn o bien presionando el cursor arriba o abajo.
La seleccin de una entrada de men se realiza o bienpresionando la rueda del ratn o presionando la tecla Enterdel teclado.
Utilizacin del Emulador Blackberry
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
74/89
2005 REALTECH
36' ! 545%
Aprenda cmo usar el Emulador de BlackBerry
Escriba la URL de la aplicacin Hello World a
travs del teclado o copiando y pegando
Emulador de BlackBerry
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
75/89
2005 REALTECH
Seleccione el navegador a travs del cursor
Emulador de BlackBerry
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
76/89
2005 REALTECH
Abra el navegador utilizando el cursor izquierdo
Emulador de BlackBerry
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
77/89
2005 REALTECH
Presione el cursor izquierdo para visualizar el menUse el cursor downpara seleccionar Add Bookmark
Enter
Emulador de BlackBerry
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
78/89
2005 REALTECH
Escriba la URL de Hello World utilizando el teclado o copie ypegue la URL desde el IDE
Emulador de BlackBerry
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
79/89
2005 REALTECH
Si el teclado no funciona, elija la teclaSYMbolen el emulador yutilice los smbolos de la pantalla
Emulador de BlackBerry
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
80/89
2005 REALTECH
Cree un ttulo y seleccione ADD
Ejercicio prctico:Desarrollo de una aplicacin Mobile
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
81/89
2005 REALTECH
# $'
Cree una aplicacin de Aprobacin deOrden para dispositivos mviles
Realcelo en 3 pasos (tal y como estescrito en el documento del ejercicio)
Instalacin de Simuladores / Emuladores
78 545% 1
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
82/89
2005 REALTECH
78 545% 1
http://www.blackberry.net/developers/na/java/tools/index.shtml
Instale el simulador del dispositivo y el JDE desde la Web
Utilice el emulador
1) En primer lugar, abra el Simulador MDS
2) A continuacin, abra el Simulador
de Dispositivo
Instalacin de Simuladores / Emuladores
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
83/89
2005 REALTECH
98 4
Siga los pasos de la siguiente pgina Webhttp://msdn.microsoft.com/mobility/windowsmobile/howto/windows
mobile5/install/default.aspx
Descargue el Windows Mobile 5.0 SDK para Pocket PC (slo 27 MB)de aqu:http://www.microsoft.com/downloads/details.aspx?familyid=83A52A
F2-F524-4EC5-9155-717CBE5D25ED&displaylang=en
Instalacin de Simuladores / Emuladores
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
84/89
2005 REALTECH
:8 4 !$
Descargue el Series 80 Developer Platform 2.0 SDK para SymbianOS desde aqu:
http://www.forum.nokia.com/main/1,6566,034-369,00.html
Siga la gua de instalacin de Nokia para realizar la configuracin einstalacin inicial
Arquitectura Mobile Web DynproDesarrollo de aplicaciones Mobile
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
85/89
2005 REALTECH
Para el desarrollo de aplicaciones Mobile online
use el mismo modelo de Meta-Datos Web Dynpro
use el mismo IDE SAP NetWeaver Developer Studio
use los mismos elementos UI
use las mismas caractersticas como conexin debackend
Resumen
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
86/89
2005 REALTECH
Ahora puede:
Describir la arquitectura bsica de Web Dynpro Mobile
Enumerar algunos de los principales elementos UI para WD Mobile
Utilizar un emulador BlackBerry
Desarrollar una aplicacin Mobile bsica
Sumario
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
87/89
2005 REALTECH
Acceso Multicanal
Introduccin a Web Dynpro Java
Desarrollo de aplicacionesmviles Web Dynpro
Sumario
Sumario
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
88/89
2005 REALTECH
Soporte para dispositivos conectados basados en navegador
Sin necesidad de instalacin en el dispositivo
Disponible con SAP NetWeaver `04
Basado en Web Dynpro
Completamente integrado en SAP NetWeaver Developer Studio
Soporta elementos UI para dispositivos Pocket PC, dispositivosmviles BlackBerry Wireless y Nokia Smartphones
Elementos UI Web Dynpro estndar, e.g. InputField, Table
Elementos UI especficos del dispositivo, e.g. BarcodeReader, RFIDReader
Primera aplicacin mobile online en dispositivos BlackBerry: MobileSales Online (basado en CRM 3.0)
Bibliografa
5/25/2018 Desarrollo de Un Prototipo de Movilidad Con Web Dynpro
89/89
2005 REALTECH
SAP Developer Network
NetWeaver Developers Guide:www.sdn.sap.com/sdn/developersguide.sdn
SAP Support Portal
SAP Help Portal