TAPM50 Workload Analysis

Desarrollo de Aplicaciones para SAP EP mediante SAP Visual Composer

Frank Soler Roig NW People Integration Team Leader
SAP ESPAA 2005

Copyright

Copyright 2005 SAP ESPAA. Reservados todos los derechos. Prohibida la distribucin, reproduccin o traduccin de este manual o de parte del mismo, sea cual sea el fin y la forma, sin la autorizacin expresa por escrito de SAP ESPAA. La informacin contenida en este manual puede modificarse o complementarse sin previo aviso. Reservados todos los derechos.

SAP ESPAA 2005

Resumen del curso

Introduccin a SAP Visual Composer Demo Visual Composer Arquitectura ESA and Visual Composer

SAP ESPAA 2005

Objetivos del curso

Una vez terminado este curso :

Entender los capacidades y conceptos bsicos de SAP Netweaver Visual Composer Conocer la Arquitectura de SAP Visual Composer Crear Simples Aplicaciones

SAP ESPAA 2005

Antes de empezar
Requisitos previos:

TEPFUN - SAP EP Fundamentals TEPD10 - Introduction to SAP Enterprise Portal Development TEPS20 - SAP Enterprise Portal Application For detailed curriculum information see http:\\service.sap.com\pa

A quien va dirigido:

SAP EP Solution & Development Consultants IT staff

Duracin: 1,5 Horas

SAP ESPAA 2005

Contenidos

Resumen
Unidad Unidad Unidad Unidad

Introduccin a SAP Visual Composer Demostracin de SAP Visual Composer Arquitectura de SAP Visual Composer ESA y SAP Visual Composer

Bibliografia

SAP ESPAA 2005

Introduccin a SAP Visual Composer

Introduccin a SAP Visual Composer

Demo Visual Composer

Arquitectura

ESA and Visual Composer

SAP ESPAA 2005

SAP NetWeaver Technology Map

IT Practices
User Productivity Enablement Running an Enterprise Portal

IT Scenarios
Enabling User Collboration Business Task Management Mobilizing Business Processes Enterprise Knowledge Management

Data Unification

Master-Data Harmonization

Master-Data Consolidation

Central Master-Data Management

Enterprise Data Warehousing

Business Information Management Business Event Management End-to-End Process Integration

Enterprise Reporting, Query, and Analysis

Business Planning and Analytical Services

Enterprise Data Warehousing

Business Event Resolution Enabling Applicationto-Application Processes

Business Task Management

Enabling Business-toBusiness Processes

Business Process Management

Enabling Platform Interoperability

Business Task Management

Custom Development

Developing, Configuring, and Adapting Applications

Enabling Platform Interoperability

Unified Life-Cycle Management Application Governance & Security

Software Life-Cycle Management

SAP NetWeaver Operations

Authentication and Single Sign-On

Integrated User and Access Management

Consolidation Enterprise Service Architecture Design & Deployment

Enabling Platform Interoperability

SAP NetWeaver Operations

Master-Data Consolidation

Enterprise Knowledge Management

Enabling Enterprise Services

On the concept of IT Practices and IT Scenarios

SAP ESPAA 2005

SAP NetWeaver Technology Map

IT Practices
User Productivity Enablement Running an Enterprise Portal

IT Scenarios
Enabling User Collboration Business Task Management Mobilizing Business Processes Enterprise Knowledge Management

Data Unification

Master-Data Harmonization

Master-Data Consolidation

Central Master-Data Management

Enterprise Data Warehousing

Business Information Management Business Event Management End-to-End Process Integration

Enterprise Reporting, Query, and Analysis

Business Planning and Analytical Services

Enterprise Data Warehousing

Business Event Resolution Enabling Applicationto-Application Processes

Business Task Management

Enabling Business-toBusiness Processes

Business Process Management

Enabling Platform Interoperability

Business Task Management

Custom Development

Developing, Configuring, and Adapting Applications

Enabling Platform Interoperability

Unified Life-Cycle Management Application Governance & Security

Software Life-Cycle Management

SAP NetWeaver Operations

Authentication and Single Sign-On

Integrated User and Access Management

Consolidation Enterprise Service Architecture Design & Deployment

Enabling Platform Interoperability

SAP NetWeaver Operations

Master-Data Consolidation

Enterprise Knowledge Management

Enabling Enterprise Services

On the concept of IT Practices and IT Scenarios

SAP ESPAA 2005

Overview
Que es SAP Visual Composer ?
Visual Composer es una herramienta de modelado visual que permite el

desarrollo de aplicaciones y contenidos complejos para SAP Enterprise Portals mediante un conjunto de objetos y fuentes datos estableciendo relaciones entre ambos, sin necesidad de programacin.
Visual Composer es completamente

Web-Enabled ( Diseo y Ejecucin)

Visual Composer genera el cdigo de

las aplicaciones que se modelan, al igual que posee funciones de debugger, tester y de documentador del modelo que se disea.
Actualmente SAPVisual Composer

es capaz de producir iViews basadas en Java, JSP y HTMLB

SAP ESPAA 2005

Motivacin y Objetivo
Cal es el objetivo de SAP Visual Composer ?

El proposito de SAP Visual Composer es el proveer de una herramienta que permita a los clientes de SAP crear facilmente y rapidamente aplicaciones y contenidos para SAP EP con el objetivo de :
Minimizar el tiempo y el esfuerzo en el momento de crear contenido para

SAP EP
Reduciendo el TCO ( Total Cost of Ownership ) e Incrementado el ROI (

Return on Investment )

SAP ESPAA 2005

Visual Composer Cross-Application Modelling

SAP ESPAA 2005

Visual Composer User Interface Design

SAP ESPAA 2005

Visual Composer Runtime in the SAP Enterprise Portal

SAP ESPAA 2005

Visual Composer Source (GUI Modelling Language)

SAP ESPAA 2005

SAP Netweaver Development Tools

Content Complexity Web Applications SAP NetWeaver Developer Studio (Java + PDK Perspective) SAP ABAP Development Workbench (Business Server Pages) PDK for .Net SAP NetWeaver Developer Studio (Web Dynpro for Java Perspective) SAP ABAP Development Workbench (Web Dynpro for ABAP*) SAP NetWeaver Visual Composer

Transactional Business Applications Interactive Applications SAP EP Portal Content Studio Content Admin Creating Portal Content
SAP ESPAA 2005

Display Applications

Business Expert

Required Technical Development Business Application J2EE/ABAP/.Net Skills Developer Developer Developing Portal Content

SAP Visual Composer Features(I)

Versiones de SAP EP compatible con SAP NW Visual Composer

Visual Composer es capaz de crear iviews para SAP EP 6.0 ( Patch 4 o

mayor ) y para SAP EP NW04 ( Stack 05 o mayor )

Conectividad

SAP

SAP ERP: BAPI/RFC a partir de la version 3.1 en adelante SAP BI and BW : Infocubos en todas las releases Base de Datos
Mediante JDBC Solo es capaz de ejecutar procedures de las BDs.

Con Terceros

Siebel systems ( >= 6.0 ) Any JDBC compliant database Only connects to stored procedures

SAP ESPAA 2005

SAP Visual Composer Features(II)

Soporte Multi Lenguaje

Soporta todos los lenguajes que en portal SAP EP esten operativos Para llevar a cabo dicha traduccin se hace uso de la Portal
Translation Tool que SAP EP posee. Soporte HTTPS / SSL

Visual composer puede correr en mode SSL Las iViews que genera pueden tambien correrse en modo SSL La comunicacin entre VC y el Portal puede tambien hacer uso de SSL
( Fase de Diseo y Test ) Seguridad en los Modelos/Diseos de las aplicaciones de VC

Proteccin mediante password de los modelos en el caso que mas de

1 developer haga uso del mismo VC Importacin/Exportacin de los Modelos/Diseos de las aplicaciones de VC

Un upgrade del VC solo sobreescribe el cdigo, no los modelos.

Eventos entre iViews

Mediante Portals client side eventing API (EPCF).

Campos dinmicos haciendo uso de expresiones lgicas y dinmicas

Calcular, validar o formatear los valores de los campos que provengan

de los sistemas de backend o que el usuario rellene
SAP ESPAA 2005

SAP Visual Composer BI Kit Features

Conectividad extendida basada en BI Java Connectors

BI ODBO and BI XMLA connector

MS Analysis Services, SAS,

Hyperion

BI JDBC connector

RDBMS, CSV, Excel,

BI SAP Query connector

mySAP ERP data

Native BW Web Applications

Herramientas de construccin de queries

Templates for OLAP and relational queries: Ranking, Variance, Trend.. Wizard for freeform relational queries: joins, filters, sorting SQL Editor MDX Editor

SAP ESPAA 2005

Visual Composer Features Scope

SAP ESPAA 2005

Demo SAP Visual Composer

Introduccion a SAP Visual Composer

Demo Visual Composer

Arquitectura

ESA and Visual Composer

SAP ESPAA 2005

Creando Aplicaciones con SAP NetWeaver Visual Composer - Procesos

Developing Modeling Testing Configuring & Adapting Upgrade

Developing
For building applications Visual Composer makes use of pre-built components. For R/3 systems the pre-built components are either BAPIs or RFCs.

Modeling
Visual Composer allows to easily model a freestyle application.

Testing
Visual Composer provides some built-in tools to easily check the model and application for errors.

Configuring and adapting

Configure the application to your needs to improve user experience.

Upgrade
To upgrade your application you can either change the BAPI/RFC oder implement a new one using Visual Composer.

SAP ESPAA 2005

Creando Aplicaciones con SAP NetWeaver Visual Composer - Esquema

Developing EP:
UI Runtime Personalization

Modeling

Testing

Configuring & Adapting

(12) Personalize implicitly or explicitly or as permitted by the administrator

Upgrade

EP:
Portal Content Studio

(7) Check application within portal (6) Deploy in portal

(11) Redefine roles (10) Redesign page

EP:
Visual Composer

(3) Model freestyle application (2) Discover BAPI / RFC

(5) Run application in preview (4) Check model for errors

(9) Customize application if applicable (8) Reconfigure / change application if necessary

(14b) upgrade model by switch to new BAPI (14a) No action required

AS ABAP:
ABAP Workbench
(1) Implement BAPI / RFC

(13b) Implement New BAPI / RFC (13a) Change BAPI/ RFC

SAP ESPAA 2005

Visual Composer Steps para la Creacin de Contenido

Creacin de un Modelo Conexin con SAP Enterprise Portal Creacin de un Package Creacin de una Pagina Creacin de una iView Conexin a un sistema de backend Obtencin de los contenedores de informacin del

sistema de backend
Diseamos el flujo lgico de la aplicacin Chequeo del modelo Deploy del package en SAP Enterprise Portals

SAP ESPAA 2005

Visual Composer Creacin de un Modelo (I)

Abrimos el IE6 browser con la siguiente URL:
http://<machine name>.<domain>:<port>/VCserver/

1. File menu 2. Create icon 3. Create a blank Model link

SAP ESPAA 2005

Visual Composer Creacin de un Modelo

Asignamos un nombre al Modelo

Indicamos el VC Server donde queremos almacenar el modelo (Opcional) Protegemos el modelo mediante password Click Ok

SAP ESPAA 2005

Visual Composer Conexin con SAP Enterprise Portal

Informamos de la URL del portal http://<portalserver>:50000 y clickeamos en el semforo. Introducimos un usuario y password del portal, mediante el cual podamos acceder a los sistemas de backend que este tenga configurado

Posteriorment el semforo pasa color verde despues del logon

SAP ESPAA 2005

Visual Composer Creacin de un modelo

Creacin del Modelo/Package:

Seleccionamos Elements en la barra de herramientas vertical derecha Hacemos Drag del icono Module desde Elements al area del projecto, y

hacemos doble click sobre el icono. Le damos un nombre nivoco al package sin espacios, tal como BankDetailsModule. Le damos Double-click sobre dicho package creado
SAP ESPAA 2005

Visual Composer Creacin de una pagina

Creacin de la pgina:
Hacemos Drag del icono Page desde Model Elements al area del projecto,

y hacemos doble click sobre el icono Le damos un nombre nivoco a la pgina sin espacios, tal como BankDetailsPage. Le damos Double-click sobre dicha pagina creada

SAP ESPAA 2005

Visual Composer Creacin de una iview

Creacin de la iView
Hacemos Drag del icono iView desde Page Elements al area del projecto, y

hacemos doble click sobre el icono Le damos un nombre nivoco a la iview sin espacios, tal como BankDetailsiView. Le damos Double-click sobre dicha iview creada

SAP ESPAA 2005

Visual Composer Conexin a un sistema de backend(I)

Seleccionamos Data en la barra de herramientas vertical derecha:

Si estamos conectados y logeados en el

Portal, apareceran la lista de todos los sistemas disponibles que este posee, seleccionando uno de ellos.( En nuestro caso un sistema R3 T90CLNT090
Procedermos a buscar una BAPI de

dicho sistema.

SAP ESPAA 2005

Visual Composer Conexin a un sistema de backend(II)

Una vez encontremos la BAPI BAPI_BANK_GETLIST la arrastaremos hacia el area de trabajo. importaran desde SAP R3 al SAP Visual Composer

Todos los metadatos de la BAPI se

SAP ESPAA 2005

Visual Composer Conexin a un sistema de backend(III)

Chequeamos el buen

funcionamiento de la BAPI
Introducimos unos valores como

input para ejecutar el test

SAP ESPAA 2005

Visual Composer Diseamos flujo lgico de la aplicacin(I)

Creamos un Input Form:

Arrastramos desde el nodo Input desde BAPI_BANK_GETLIST and lo

soltamos en el area de trabajo. Escogemos Add Input Form en el menu flotante Renombramos dicho form por un nombre unvoco

SAP ESPAA 2005

Visual Composer Diseamos flujo lgico de la aplicacin(II)

Creamos una vista de Tabla :

Arrastramos desde el nodo Bank List desde BAPI_BANK_GETLIST and lo

soltamos en el area de trabajo Escogemos Add Table View en el menu flotante. Renombramos dicho form por un nombre unvoco

SAP ESPAA 2005

Visual Composer Diseamos flujo lgico de la aplicacin(III)

Definimos los campos de entrada/salida de datos

SAP ESPAA 2005

Visual Composer Diseamos flujo lgico de la aplicacin(IV)

Modificamos el layout

SAP ESPAA 2005

Visual Composer Chequeamos el modelo

Testeamos la iview

SAP ESPAA 2005

Visual Composer Deploy en SAP Enterprise Portals

Desplegamos la aplicacin
1. Cambiamos la vista hasta el nivel del Model 2. Clickeamos en el iconoDeployer en la barra de herramientas vertical derecha 3. Le damos a Deploy. 4. Si el deployment ha sido correcto aparecer el siguiente mensaje : Created Components succesfully

SAP ESPAA 2005

Visual Composer Ejemplo de Modelo Complejo

SAP ESPAA 2005

Arquitectura

Introduccion a SAP Visual Composer

Demo Visual Composer

Arquitectura

ESA and Visual Composer

SAP ESPAA 2005

SAP Visual Composer Product Roadmap

Visual Composer 6.0 Preliminary Version for SAP Analytics

Next Version of Visual Composer

2005

Q3

Q4

Q1

Q2

2006

Q3

Q4

Q1

Visual Composer 6.0

Focus Portal Content Development Supported

Next Version of Visual Composer

Focus SAP Analytics Supported

UI Technology: HTML/B Freestyle (Building Blocks) Backends: ERP / BI / DB (JDBC) / Portal versions: EP 6.0 SP2 / EP as part of NetWeaver 2004 VC Server: IIS 5.0 / MS SQL
SAP ESPAA 2005

UI Technology: HTML/B / Flash Freestyle (Building Blocks) Backends: ERP / BI / DB (JDBC) / Portal versions: EP as part of NetWeaver 2004 / EP as part of NetWeaver 2004s VC Server: J2EE

Arquitectura Actual Visual Composer on SAP EP 6.0

Visual Composer se instala como un addon en SAP Enterprise Portal

SAP ESPAA 2005

Futura Arquitectura (Next Version of Visual Composer)

Web Browser (IE) (Designtime) Adobe SVG Microsoft XML Web Browser (Runtime) Flash Client

VC Server

deploy

Flex Server

HTML/B Connectivity Layer

Development Server
save

deploy

Portal
save

J2EE Server
J2EE J2EE DB DB PCD PCD
export

SAP ESPAA 2005

Business Packages

Visual Composer Status Actual de la herramienta

What will be released?

Visual Composer with focus on SAP Analytic Applications The released version is an enhancement of the GA version

Where can you find more information about Visual Composer?

SAPNet: https://sapneth6.wdf.sap.corp/nw-vc SDN: https://www.sdn.sap.com/sdn/visualcomposer.sdn Central Note 716752

SAP ESPAA 2005

ESA and Visual Composer

Introduccion a SAP Visual Composer

Demo Visual Composer

Arquitectura

ESA and Visual Composer

SAP ESPAA 2005

ESA and Visual Composer

SAP ESPAA 2005

Bibliografa

Online Documentation (http://help.sap.com/nw04 ) SDN

(https://www.sdn.sap.com/sdn/visualcomposer.sdn? )

SAPNet (http://service.sap.com/nw-vc )

SAP ESPAA 2005

Dudas

Dudas
SAP ESPAA 2005

Feedback

Gracias a todos !

SAP ESPAA 2005