java web dynpro movil

89
© 2005 REALTECH TAPM50 Workload Analysis Desarrollo de un prototipo de Movilidad con Web Dynpro Daniel Valdés

Upload: campeador2012

Post on 17-Feb-2015

80 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Java Web Dynpro Movil

© 2005 REALTECH

TAPM50 Workload Analysis

Desarrollo de un prototipo de Movilidad con Web Dynpro

Daniel Valdés

Page 2: Java Web Dynpro Movil

© 2005 REALTECH

Copyright 2005 SAP ESPAÑA. Reservados todos los derechos.

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

Page 3: Java Web Dynpro Movil

© 2005 REALTECH

Resumen del curso

Page 4: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 5: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 6: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 7: Java Web Dynpro Movil

© 2005 REALTECH

Acceso Multicanal

Introducción a Web Dynpro Java

Desarrollo de aplicacionesmóviles Web Dynpro

Sumario

Acceso Multicanal

Page 8: Java Web Dynpro Movil

© 2005 REALTECH

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á:

Page 9: Java Web Dynpro Movil

© 2005 REALTECH

������������

SAP NetWeaver - Acceso Multicanal

������������C

ompo

site

App

licat

ion

Fram

ewor

k

� ��� ���� �������

����������������

Portal Collaboration

��������������� �������

Bus. Intelligence

Master Data Mgmt

Knowledge Mgmt

���� ������ �������

Integration Broker

BusinessProcess Mgmt

��������������������

J2EE

DB and OS Abstraction

ABAP

Life Cycle M

gmt

Mobile .Net Client (mySAP CRM)

AutoID

SMS, Fax, email

Web-based GUI

������������������

Mobile Java Client

Mobile Browser Client

NetWeaver Voice

Page 10: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 11: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 12: Java Web Dynpro Movil

© 2005 REALTECH

Resumen

Ahora puede:

� Enumerar los diversos tipos de acceso existentes

Page 13: Java Web Dynpro Movil

© 2005 REALTECH

Acceso Multicanal

Introducción a Web Dynpro Java

Desarrollo de aplicacionesmóviles Web Dynpro

Sumario

Acceso Multicanal

Page 14: Java Web Dynpro Movil

© 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 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

ObjetivosUna vez terminado este curso, podrá:

Page 15: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 16: Java Web Dynpro Movil

© 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…

Page 17: Java Web Dynpro Movil

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

Page 18: Java Web Dynpro Movil

© 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 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

Page 19: Java Web Dynpro Movil

© 2005 REALTECH

Elementos UI complejos

Comparativa de

valores

Árbol con tablas

anidadas

Page 20: Java Web Dynpro Movil

© 2005 REALTECH

Elementos UI complejos

� �����������������!�

Page 21: Java Web Dynpro Movil

© 2005 REALTECH

Requisitos especiales de SAP parauna Plataforma Web

� Model 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

Page 22: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 23: Java Web Dynpro Movil

© 2005 REALTECH

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

App

ABAP development Workbench

Backend ApplicationBackend Application

ABAP Backend Server

Web Service

RMI SOAP RFC

RFC enabled Function ModulesEJB (e.a.)

BusinessData

BusinessData

BusinessData

Page 24: Java Web Dynpro Movil

© 2005 REALTECH

Requisitos especiales de SAP parauna Plataforma Web

� Model 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

Page 25: Java Web Dynpro Movil

© 2005 REALTECH

Independencia del cliente: Navegadores

� Tecnología de-facto estandarizada

� Alta adopción por parte de organizaciones y consumidores

� Accesibilidad sencilla

�����������

Page 26: Java Web Dynpro Movil

© 2005 REALTECH

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

��������������

Page 27: Java Web Dynpro Movil

© 2005 REALTECH

Independencia del cliente: Dispositivos móviles

…en un Pocket PC…en un dispositivoWireless BlackBerry

…en un Nokia SmartPhoneNokia 9500/9300

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

Page 28: Java Web Dynpro Movil

© 2005 REALTECH

Requisitos especiales de SAP parauna Plataforma Web

� Model 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

Page 29: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 30: Java Web Dynpro Movil

© 2005 REALTECH

Adaptabilidad Web Dynpro –¿Cómo funciona?

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

Page 31: Java Web Dynpro Movil

© 2005 REALTECH

Adaptabilidad Web Dynpro –¿Cómo funciona?

����� ��#�,��&�

Page 32: Java Web Dynpro Movil

© 2005 REALTECH

Adaptabilidad Web Dynpro –¿Cómo funciona?

������'� ��������� -���

Page 33: Java Web Dynpro Movil

© 2005 REALTECH

Requisitos especiales de SAP parauna Plataforma Web

� Model 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

Page 34: Java Web Dynpro Movil

© 2005 REALTECH

Otra plataformaWeb

3

Requisito: Interoperabilidad

Web Dynpro

1

Suspend2

4

5Resume

6

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

� ����������������$������

Page 35: Java Web Dynpro Movil

© 2005 REALTECH

Web Dynpro

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

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

�����'� �������-���� ��������

��������������

Page 36: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 37: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 38: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 39: Java Web Dynpro Movil

© 2005 REALTECH

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

Web Dynpro Application

http(s)

Web Dynpro Application

Web Dynpro Application

Web Dynpro Application

Page 40: Java Web Dynpro Movil

© 2005 REALTECH

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

ComponenteWeb Dynpro

URL

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

Page 41: Java Web Dynpro Movil

© 2005 REALTECH

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

Cus

tom

Con

trolle

r

ViewController

InterfaceView

Controller

Dec

lara

cion

esde

Uso

Inte

rface

vie

w

Inte

rface

Con

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

Page 42: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 43: Java Web Dynpro Movil

© 2005 REALTECH

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

ModelObject

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

Page 44: Java Web Dynpro Movil

© 2005 REALTECH

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

Price

Quantity

Context Root

SalesOrders

LongText

OrderNo

SalesDate

SalesRep

LineItems

Description

ItemNo

Price

Quantity

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

Declaraciónde Utilizaciónde Controlador

Page 45: Java Web Dynpro Movil

© 2005 REALTECH

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

Price

Quantity

Context Root

SalesOrders

LongText

OrderNo

SalesDate

SalesRep

LineItems

Description

ItemNo

Price

Quantity

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

View layout

Page 46: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 47: Java Web Dynpro Movil

© 2005 REALTECH

Perspectivas

Page 48: Java Web Dynpro Movil

© 2005 REALTECH

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“

Page 49: Java Web Dynpro Movil

© 2005 REALTECH

Editores y Vistas

Page 50: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 51: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 52: Java Web Dynpro Movil

© 2005 REALTECH

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)

Page 53: Java Web Dynpro Movil

© 2005 REALTECH

Preferencias

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

� Java editor

� Debugging

� J2EE server

� ...

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

Page 54: Java Web Dynpro Movil

© 2005 REALTECH

Perspectiva Web Dynpro

Page 55: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 56: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 57: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 58: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 59: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 60: Java Web Dynpro Movil

© 2005 REALTECH

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!

Page 61: Java Web Dynpro Movil

© 2005 REALTECH

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!

Page 62: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 63: Java Web Dynpro Movil

© 2005 REALTECH

Acceso Multicanal

Introducción a Web Dynpro Java

Desarrollo de aplicacionesmóviles Web Dynpro

Sumario

Acceso Multicanal

Page 64: Java Web Dynpro Movil

© 2005 REALTECH

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

ObjetivosUna vez terminado este curso, podrá:

Page 65: Java Web Dynpro Movil

© 2005 REALTECH

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

Data

UI Tree

Data

UI Tree

Data

UI Tree

Events

EventsEvents

Renderer

RendererRenderer

Page 66: Java Web Dynpro Movil

© 2005 REALTECH

Arquitectura Mobile Web Dynpro paraBlackBerry

Firewall

SAP WebApplication Server

BlackBerryMobile Data Service

(MDS)

Backend SAP Web Application Server with

Web Dynpro runtime

RIMBlackBerryEnterprise

Server

SAP NetWeaverDeveloper Studio

Deploy

RIMSimulator

TestUse

Page 67: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 68: Java Web Dynpro Movil

© 2005 REALTECH

Elementos UI en diferentes navegadores

5��45���%

Button

���4�����

CheckBox

DropDown

• mostrado como un link

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

Page 69: Java Web Dynpro Movil

© 2005 REALTECH

Elementos UI en diferentes navegadores

5��45���%

Group

���4�����

InputField

Link

• Usa la anchura de la pantalla completa

Page 70: Java Web Dynpro Movil

© 2005 REALTECH

Elementos UI en diferentes navegadores

5��45���%

RadioButton

���4�����

TextView

TextEdit

Page 71: Java Web Dynpro Movil

© 2005 REALTECH

Elementos UI en diferentes navegadores

5��45���%

Image

���4�����

Table

Page 72: Java Web Dynpro Movil

© 2005 REALTECH

Un ejemplo…

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

Page 73: Java Web Dynpro Movil

© 2005 REALTECH

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.

Page 74: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 75: Java Web Dynpro Movil

© 2005 REALTECH

Emulador de BlackBerry

Seleccione el navegador a través del cursor

Page 76: Java Web Dynpro Movil

© 2005 REALTECH

Emulador de BlackBerry

Abra el navegador utilizando el cursor izquierdo

Page 77: Java Web Dynpro Movil

© 2005 REALTECH

Emulador de BlackBerry

Presione el cursor izquierdo para visualizar el menú

Use el cursor down para seleccionar “Add Bookmark“

Enter

Page 78: Java Web Dynpro Movil

© 2005 REALTECH

Emulador de BlackBerry

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

Page 79: Java Web Dynpro Movil

© 2005 REALTECH

Emulador de BlackBerry

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

Page 80: Java Web Dynpro Movil

© 2005 REALTECH

Emulador de BlackBerry

Cree un título y seleccione ADD

Page 81: Java Web Dynpro Movil

© 2005 REALTECH

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)

Page 82: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 83: Java Web Dynpro Movil

© 2005 REALTECH

Instalación de Simuladores / Emuladores

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

Page 84: Java Web Dynpro Movil

© 2005 REALTECH

Instalación de Simuladores / Emuladores

: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

Page 85: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 86: Java Web Dynpro Movil

© 2005 REALTECH

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

Page 87: Java Web Dynpro Movil

© 2005 REALTECH

Acceso Multicanal

Introducción a Web Dynpro Java

Desarrollo de aplicacionesmóviles Web Dynpro

Sumario

Sumario

Page 88: Java Web Dynpro Movil

© 2005 REALTECH

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)

Page 89: Java Web Dynpro Movil

© 2005 REALTECH

Bibliografía

� SAP Developer Network

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

� SAP Support Portal

� SAP Help Portal