java web dynpro movil

TAPM50 Workload Analysis

Desarrollo de un prototipo de Movilidad con Web Dynpro

Daniel Valdés

Prohibida la distribución, reproducción o traducción de este manual o de parte del mismo, sea cual sea el fin y la forma, sinla autorización expresa por escrito de SAP ESPAÑA. La información contenida en este manual puede modificarse o complementarse sin previo aviso.

Reservados todos los derechos.

Copyright

Resumen del curso

Objetivos del curso

Una vez terminado este curso, podrá:

� Comprender la base del Modelo de ProgramaciónWeb Dynpro

� Desarrollar una aplicación Web Dynpro

� Crear e implementar una Interfaz de Usuarioutilizando Vistas y Ventanas

� Crear e implementar lógica de programación a través de los controladores Web Dynpro

� Sabrá utilizar diferentes emuladores

� Pocket PC

� BlackBerry

� Nokia Smartphone

Antes de empezar

� Requisitos previos:

� Conocimientos básicos de Java

� Conocimientos básicos de Web Dynpro

� A quién va dirigido:

� Desarrolladores Java

� Desarrolladores Web Dynpro

� Personal de IT

� Duración: 3 Horas

Unidad 1 Acceso Multicanal

Unidad 2 Introducción a Web Dynpro Java

Unidad 3 Desarrollo de aplicaciones móviles Web Dynpro

Unidad 4 Sumario

Resumen

Contenidos

Bibliografía

Acceso Multicanal

Introducción a Web Dynpro Java

Desarrollo de aplicacionesmóviles Web Dynpro

Sumario

Acceso Multicanal

Contenidos

� Enumerar los diferentes tipos de acceso existentes

Contenidos/Objectivos

� SAP Netweaver – Acceso Multicanal� SAP Netweaver – Introducción a la Tecnología

ObjetivosUna vez terminado este curso, podrá:

��

SAP NetWeaver - Acceso Multicanal

��C

� ��

��

Portal Collaboration

��

Bus. Intelligence

Master Data Mgmt

Knowledge Mgmt

��

Integration Broker

BusinessProcess Mgmt

��

DB and OS Abstraction

Life Cycle M

Mobile .Net Client (mySAP CRM)

AutoID

SMS, Fax, email

Web-based GUI

��

Mobile Java Client

Mobile Browser Client

NetWeaver Voice

SAP NetWeaver Mobile – Introduccióna la Tecnología

� Mobile Java Client

� Optimizado para aplicaciones basadas en PDA o handheld con un escueto conjunto de funciones y un pequeño footprint, como porejemplo Mobile Asset Management

� Technología: Mobile Infrastructure

� Mobile .Net Client (mySAP CRM)

� Diseñado para aplicaciones windows-based ocasionalmentebasadas en CRM Field con un rico conjunto de funciones

� Tecnología: Mobile Client Technology para CRM

SAP NetWeaver Mobile – Introduccióna la Tecnología

Mobile Browser Client

� Tecnología centrada en aplicaciones online donde el navegadorde un dispositivo móvil está siempre conectado a un servidorWeb, como pueda ser un Mobile Sales Online

� Tecnología: Mobile Web Dynpro Online

Resumen

Ahora puede:

� Enumerar los diversos tipos de acceso existentes

Acceso Multicanal

Sumario

Acceso Multicanal

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 aplicación 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 aplicación Web Dynpro básica

Requisitos especiales de SAP parauna Plataforma Web

� Modelo independiente del lenguaje (Java y ABAP) para la creación de interfaces de usuarioprofesionales

� Elementos UI estandarizados

� Interfaces predefinidas a sistemas de backend(Web Services, JavaBeans, RFC, …)

� Independencia del Cliente

� Personalización / adaptación para usuariosfinales

� Interoperabilidad

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 Web Dynpro existente puede ser completamentereutilizado

3) Aplicaciones Web Dynpro más avanzadascomo Employee Self Service, utilizan unaplataforma de vista abstracta conocidacomo Floor Plan Manager.Aquí el layout de pantalla y la navigaciónentre iViews es definida de una maneraabstracta

Elementos UI complejos

Comparativa de

valores

Árbol con tablas

anidadas

Elementos UI complejos

� ��!�

� Model independiente del lenguaje (Java y ABAP) para la creación de interfaces de usuarioprofesionales

El wizard de Modelo permite acceder a servicios de backend

Todos los componentes Web Dynpro consiguen acceder a servicios de backend utilizandoobjetos de ejecución conocidoscomo Modelos.

Los modelos son creados a través del Model Wizard en el NetWeaverDeveloper Studio

Web Service Provider

J2EE Backend Server

Escenarios de aplicación con Web Dynpro

J2EE Web Dynpro

Runtime

Deployed Web Dynpro AppDeployed Web

Dynpro App

SAP Enterprise Portal

Web Dynpro Application

HTTP(S)SAP NetWeaver Developer

Studio

SAP NetWeaver Developer

Studio

ABAP Web DynproRuntime

Web DynproAppWeb Dynpro

ABAP development Workbench

Backend ApplicationBackend Application

ABAP Backend Server

Web Service

RMI SOAP RFC

RFC enabled Function ModulesEJB (e.a.)

BusinessData

Independencia del cliente: Navegadores

� Tecnología de-facto estandarizada

� Alta adopción por parte de organizaciones y consumidores

� Accesibilidad sencilla

��

Independencia del cliente: Clientes Locales

� Tiempos de respuesta lo másrápidos posibles

� Optimizado para la utilizaciónmínima de recursos en términosde CPU, Memoria, Ancho de Banda

��

Independencia del cliente: Dispositivos móviles

…en un Pocket PC…en un dispositivoWireless BlackBerry

…en un Nokia SmartPhoneNokia 9500/9300

��"�#��$��%��& ��!'��

Personalización del usuario final / Adaptación

� La adaptación es una parte integral de Web Dynpro

� Modificable y por tanto fácilmente actualizable

� Disponible en todas las aplicaciones Web Dynpro sin ningún esfuerzoadicional para los desarrolladores de aplicaciones

� Personalización basada en rol y usuario final

� Áreas de adaptación

� Cambios estáticos de las pantallas

� Cambiar textos y etiquetas

� Borrar campos

� Cambiar atributos de campos

� Cambiar secuencia de campos

� Añadir campos específicos de clientes

� Textos adicionales y ayuda de usuario final

� Añadir servicios específicos de clientes, Reports

� Ejecución de cualquier tipo de aplicación (via URL) desde cualquier pantalla

Adaptabilidad Web Dynpro –¿Cómo funciona?

(�!$��)��!$�� *��!��+

�� #�,��&�

��'� �� -��

Otra plataformaWeb

Requisito: Interoperabilidad

Web Dynpro

Suspend2

5Resume

.�-�� /�� $��-��! �� 0

� ��$��

Web Dynpro

��#%�$��!� ��

$��&�!��'� ��,� � $� ��

��'� ��-��

��

Paradigma de programación Web Dynpro

Servicios UI genéricos

� Value help, gestión de mensajes

� Herramientas flexibles para la selección de datos por parte de usuarios

Arquitectura Modelo-Vista-Controlador

� Modelo: Encapsula la lógica de negocio y persistencia

� Vista: Muestra los datos proporcionados por el Controlador y Modelo(s)

� Controlador: Manejo de eventos, interacción con modelo, navegación

Énfasis en la declaración – codificación UI coding prácticamente nula

� Declaración de flujos de pantalla y diseño UI (navegación)

� Declaración en tiempo de ejecución de estructuras y flujos de datos

Componente reutilizables

� Integrado con la Infraestructura de Desarrollo NetWeaver

� Construcción de aplicaciones Web a partir de componentesreutilizables

Controlador

El diseño MVC clásico crea una arquitectura para separa el generador de datos del consumidor. Por ejemplo, esto puede utilizarse para:

� Separar la lógica de presentación de la lógica de aplicación� Separar el sistema de negocio de backend de la lógica de aplicación

Petición

Respuesta

Modelo Vista Controlador (MVC) clásico

Capa de Interacción de Usuario

Capa de Interacción de Negocio

Liga el modelo y la vista, seleccionando qué vista mostrar a continuación Modelo

VistaMuestra los datos de aplicación proporcionadospor el modelo.

En Struts o JSF, la vista esuna página JSP.

Separa el sistema de negocio de backend y la aplicación local

Web Dynpro User Interface Zoom-in: 10x

Web Dynpro sólo para el diseño de Interfaces de Usuario

Navegador SAPJ2EE Server

Web DynproClient

Web DynproRuntime

SistemasBackend

Web Dynpro Client Zoom-in: 10x

Canal único entre cliente y runtime

El servidor genera el código HTML y Javascript, mientras queelcliente lo muestra sin necesidad de cargar de nuevo la página

ClienteWeb Dynpro

Web Dynpro Runtime

http(s)

Web Dynpro ApplicationZoom-in: 10x 10x

Una aplicación Web Dynpro se compone de uno o más componentesWeb Dynpro funcionando juntos para ofrecer un proceso de negociocompleto

Aplicación Web Dynpro

Modelo

Web DynproComponent

ComponenteWeb Dynpro

En una aplicación Web Dynpro, existe un componente que siempre se comporta como componente “raíz”. Este es el punto de inicio para todala funcionalidad y es el único componente accesible por URL

Componente raíz

Web Dynpro ComponentZoom-in: 10x 10x 10x

Modelos

ComponentController

Contiene

Window

Implementa

Visible desdeel exterior

Visible desdeel interior

Entidades visuales Entidades programáticas

ViewLayout

Declaracionesde Uso

trolle

ViewController

InterfaceView

Controller

trolle

rC 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 ControllerZoom-in: 10x 10x 10x 10x

Custom Controller

Implementation

RequiredControllers

ControllerInterface

Models Model Usage

Other WDControllers

CustomController

Creado por codificación o declaración explícita

Creado por el Web Dynpro Framework (WDF)

Other WDComponents

ComponentUsage

StandardHook

Methods

InstanceMethods

Context

Root Node

ModelObject

ModelObject Events

View Controller

Implementation Layout

Creado por codificación o declaración explícita

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

Web Dynpro View ControllerZoom-in: 10x 10x 10x 10x

Context Mapping: Los datos se 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

Relación de mapeo

Context Root

SalesOrders

LongText

OrderNo

SalesDate

SalesRep

LineItems

Description

ItemNo

Quantity

Context Root

SalesOrders

LongText

OrderNo

SalesDate

SalesRep

LineItems

Description

ItemNo

Quantity

Colección de nodo mapeada Origen del mapeode la colección de nodo

Declaraciónde Utilizaciónde Controlador

Binding de elementos UI: 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

Quantity

Context Root

SalesOrders

LongText

OrderNo

SalesDate

SalesRep

LineItems

Description

ItemNo

Quantity

Relación de Context mapping Relación de Data Binding

View layout

Flujo de datos declarativo: Binding & Mapping

MasterViewOpportunities

Goals...

ProductsCategoryProduct IDQuantity...

Valuation...

MasterViewContext

DetailView

ProductsCategoryProduct IDQuantity...

DetailViewContext

data binding

Sales...

OpportunitiesGoals

...Products

CategoryProduct IDQuantity...

Valuation...

CustomContext

context mapping

Perspectivas

Perspectivas II

� La ventana de workbench muestra una o másperspectivas

� Una perspectiva contiene un conjunto de vistas con el objetivo común de lograr un tipoespecífico de tarea (e.g. Java development, Debugging, ...)

� Los editores se comparten entre perspectivas

� Utilización

� Abrir una nueva perspectiva: Menú „Window -> Perspectives -> Other...“

� Cambiar a otra perspectiva ya abiertaseleccionándola 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-ordenación de vistas arrastrándolas a otraposición (igualmente tabulada)

� Recuperación del estado original de unaperspectiva: Menu „Window -> Reset Perspective“

Editores y Vistas

Editores y Vistas II

� Una parte (vista o editor) está activa

� Una parte puede ser aumentada a pantalla completa o reducida a su tamaño normal haciedo doble clic sobre su propio title bar

� La selección en una parte puede influir en lo que se muestra en otras vistas o editores dependientes

� Vistas� Soportan editores� Representaciones estructuradas de objetos� Navegación a objetos� Comienzo de operaciones sobre objetos� Apertura de una nueva vista: „Window -> Show View -> Other...“

� Editores� Siempre aparecen en el área central de edición� Diferentes tipos de editores (e.g. Java, text file, ...) asociados con tipos

de ficheros� Menú y toolbar pueden mostrar diferentes funciones dependiendo del tipo

de editor

Proyectos

� El workspace Eclipse consiste en un conjunto de de proyectos importados

� Pueden existir dependencias entre los proyectos

� Creación de un nuevo proyecto: Utilizar el asistente „New“ de la esquina superior izquierdade la ventana del workbench

� Import de un proyecto existente: Usar „File -> Import... -> Existing project into workspace“ y seleccionar la carpeta del proyecto buscado

Proyectos II

� Se puede cerrar y abrir proyectos

� Los proyectos cerrados no aparecen en todaslas vistas

� Usar el menú de contexto del proyecto (e.g. en la vista Navigator) para conmutar entre estadoabierto y cerrado („Open Project“ resp. „Close Project“)

� Borrado de proyectos:

� Seleccionar „Delete“ del menú de contexto del proyecto

� Elegir si se quiere eliminar el proyecto sólo del workspace o también del filesystem (borradocompleto)

Preferencias

� Configuración de usuariopara todas las áreas del IDE

� Java editor

� Debugging

� J2EE server

� ...

� Se llega a través de „Window –> Preferences“

Perspectiva Web Dynpro

Web Dynpro Explorer

� Proporciona una vista lógica de losobjetos de los proyectos Web Dynpro

� Applications

� Models

� Components

� ...

� Punto de inicio para la mayor parte de operaciones en los proyectos Web Dynpro

� Creación de nuevos objetos

� Edición y borrado de objetos existentes

� Construcción, despliegue y ejecuciónde aplicaciones Web Dynpro

Data Modeler

Herramienta gráfica para...

� Modelado del flujo de datos con ayuda de data links

� Creación de nuevas vistas, controladores, etc.

� Definición de mapeo de contextos y model bindings

Navigation Modeler

Herramienta gráfica para...

� Definición de la organización de las vistas de una aplicación Web Dynpro

� Definición de la estructura de navegación

View Designer

� 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, métodos y codificación Java

Editor de Controlador y Contexto

� Mantenimiento de la estructura de contexto para los datos utilizados en el controlador

� Mantenimiento de la relaciones de uso, métodos, eventos y código Java

Message Editor

� Mantenimiento de varios tipos de mensajes utilizados en lasaplicaciones Web Dynpro

� Relación uno a uno entre el componente Web Dynpro y el message pool

� Este editor no es específico de Web Dynpro¡Cuidado al editir los ficheros.xlf nativos!

Ejercicio práctico: La aplicación Hello World!

#�� $��'� 1�� 2

� Utilizar el primer ejercicio del documentoEjercicio / Solución

� Tiene aproximadamente 10 minutes paradesarrollar la aplicación Hello World!

Resumen

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 aplicación Web Dynpro

Acceso Multicanal

Sumario

Acceso Multicanal

Contenidos

� Describir la arquitectura básica de Web Dynpro Mobile� Enumerar algunos de los principales elementos UI para WD Mobile� Utilizar un emulador BlackBerry� Desarrollar una aplicación Mobile básica

Contenidos/Objectivos

� Arquitectura de Web Dynpro Mobile� Elementos UI� Desarrollo de una aplicación Mobile

Mobile Web Dynpro Architecture –Vista general

Web Application Server

Web Dynpro Runtime

CRMCRM

SCMSCM

PLMPLM

R/3R/3R/3R/3R/3http response

Browser-based Devices

Model Layer

RFC BAPI

Web Service…

Backend

http request Device and Browser Recognition

Unified Rendering

PIE ClientWML

Client (RIM) <Other> Client

UI Tree

Events

EventsEvents

Renderer

RendererRenderer

Arquitectura Mobile Web Dynpro paraBlackBerry

Firewall

SAP WebApplication Server

BlackBerryMobile Data Service

Backend SAP Web Application Server with

Web Dynpro runtime

RIMBlackBerryEnterprise

Server

SAP NetWeaverDeveloper Studio

Deploy

RIMSimulator

TestUse

Elementos UI existentes para Mobile Web Dynpro

��!��3��4��%�5��45��%

� Button, Caption, CheckBox, CheckBoxGroup, DropDownByIndex, DropDownByKey, Group, Image, InputField, Label, LinkToAction, LinkToURL, RadioButton, RadioButtonGroupByIndex, RadioButtonGroupByKey, Table, TextEdit, TextView, TransparentContainer, ViewContainerUIElement

� Parámetro URL para BlackBerry ?sap-wd-client=WmlClientParámetro 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

� Parámetro URL para PocketPC ?sap-wd-client=PieClient

Elementos UI en diferentes navegadores

5��45��%

Button

��4��

CheckBox

DropDown

• mostrado como un link

• mostrado como etiqueta WML <select>• Selección presionandobarra espaciadora

5��45��%

��4��

InputField

• Usa la anchura de la pantalla completa

5��45��%

RadioButton

��4��

TextView

TextEdit

5��45��%

��4��

Un ejemplo…

…en MS IE 6.0 …en un Pocket PC …en un BlackBerryWireless Handheld

Indicaciones básicas de manejo

� La acentuación (highlighting) de links e iconos de aplicaciónse realiza o bien moviendo la rueda del ratón o bienpresionando el cursor arriba o abajo.

� La selección se realiza o bien presionando la rueda del ratóno presionando la tecla Enter del teclado.

� Cuando se selecciona un link, la nueva página no es llamadainmediatamente sino que aparece una especie de menú de contexto. Este menú también se puede lanzar presionando la rueda del ratón en cualquier parte de la pantalla.

� La acentuación (highlighting) de una entrada de menú en el menú de contexto se realiza o bien moviendo la rueda del ratón o bien presionando el cursor arriba o abajo.

� La selección de una entrada de menú se realiza o bienpresionando la rueda del ratón o presionando la tecla Enter del teclado.

Utilización del Emulador Blackberry

3��6��'� ��!�� 5��45��%

� Aprenda cómo usar el Emulador de BlackBerry

� Escriba la URL de la aplicación “Hello World“ a través del teclado o copiando y pegando

Emulador de BlackBerry

Seleccione el navegador a través del cursor

Abra el navegador utilizando el cursor izquierdo

Presione el cursor izquierdo para visualizar el menú

Use el cursor down para seleccionar “Add Bookmark“

Escriba la URL de “Hello World“ utilizando el teclado o copie y pegue la URL desde el IDE

Si el teclado no funciona, elija la tecla SYMbol en el emulador y utilice los símbolos de la pantalla

Cree un título y seleccione ADD

Ejercicio práctico: Desarrollo de una aplicación Mobile

#�� $��'� ��

� Cree una aplicación de Aprobación de Orden para dispositivos móviles

� Realícelo en 3 pasos (tal y como estáescrito en el documento del ejercicio)

Instalación de Simuladores / Emuladores

78�5��45��%��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 continuación, abra el Simulador

de Dispositivo

98��4��

� Siga los pasos de la siguiente página Webhttp://msdn.microsoft.com/mobility/windowsmobile/howto/windowsmobile5/install/default.aspx

� Descargue el Windows Mobile 5.0 SDK para Pocket PC (sólo 27 MB) de aquí:http://www.microsoft.com/downloads/details.aspx?familyid=83A52AF2-F524-4EC5-9155-717CBE5D25ED&displaylang=en

: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 guía de instalación de Nokia para realizar la configuración e instalación inicial

Arquitectura Mobile Web Dynpro–Desarrollo de aplicaciones Mobile

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 características como conexión de backend

Resumen

Ahora puede:

� Describir la arquitectura básica de Web Dynpro Mobile� Enumerar algunos de los principales elementos UI para WD Mobile� Utilizar un emulador BlackBerry� Desarrollar una aplicación Mobile básica

Acceso Multicanal

Sumario

� Soporte para dispositivos conectados basados en navegador

� Sin necesidad de instalación 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, dispositivosmóviles BlackBerry Wireless y Nokia Smartphones

� Elementos UI Web Dynpro estándar, e.g. InputField, Table

� Elementos UI específicos del dispositivo, e.g. BarcodeReader, RFIDReader

� Primera aplicación mobile online en dispositivos BlackBerry: Mobile Sales Online (basado en CRM 3.0)

Bibliografía

� SAP Developer Network

� NetWeaver Developer‘s Guide: www.sdn.sap.com/sdn/developersguide.sdn

� SAP Support Portal

� SAP Help Portal

java web dynpro movil

Documents

abap web · pdf fileabap web dynpro 3 unit 1 web dynpro...

how to use calendar in web dynpro - archive · how to use...

create uwl screen using web dynpro java api

how to use the ejb model in a web dynpro for java …...web...

bpm and web dynpro for java

sappress inside web dynpro for java

monicaradytia@ java web dynpro: create sales ... · pdf...

abap-entwicklung in eclipse - thali · web dynpro java...

best-practices for optimizing web dynpro java application...

java movil

iniciación web dynpro for java

automating adding value helps in web dynpro for java ·...

using ejb functionality in web dynpro java with the web

using web dynpro java and web dynpro abap applications in...

keyboard access for web dynpro for abap / for java · pdf...

accessing abap functions in web dynpro java · accessing...

ejb and java bean model usage in web dynpro java and java...

web dynpro for java - edv-buchversand

enable-disable & show-hide ui elements in web dynpro java

manual web dynpro java - forosap