desarrollo de un prototipo de movilidad con web dynpro

Upload: jgago

Post on 15-Oct-2015

70 views

Category:

Documents


0 download

TRANSCRIPT

  • 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