visual composer

© SAP ESPAÑA 2005

TAPM50 Workload Analysis

Desarrollo de Aplicaciones para SAP EP mediante

SAP Visual ComposerFrank Soler Roig

NW People Integration Team Leader

© SAP ESPAÑA 2005

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

© SAP ESPAÑA 2005

Resumen del curso

Introducción a SAP Visual Composer

Demo Visual Composer

Arquitectura

ESA and Visual Composer

© SAP ESPAÑA 2005

Objetivos del curso

Una vez terminado este curso :Entender los capacidades y conceptos básicos de SAP Netweaver Visual Composer

Conocer la Arquitectura de SAP Visual Composer

Crear Simples Aplicaciones

© SAP ESPAÑA 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 seehttp:\\service.sap.com\pa

A quien va dirigido:SAP EP Solution & Development Consultants

IT staff

Duración: 1,5 Horas

© SAP ESPAÑA 2005

Unidad Introducción a SAP Visual Composer

Unidad Demostración de SAP Visual Composer

Unidad Arquitectura de SAP Visual Composer

Unidad ESA y SAP Visual Composer

Resumen

Contenidos

Bibliografia

© SAP ESPAÑA 2005



Arquitectura



© SAP ESPAÑA 2005

SAP NetWeaver Technology Map

User Productivity Enablement

Running an Enterprise Portal

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

Enterprise Reporting, Query, and Analysis

Business Planning and Analytical Services Enterprise Data Warehousing

Business Event Management Business Event Resolution Business Task Management

End-to-End Process Integration

Enabling Application-to-Application Processes

Enabling Business-to-Business Processes

Business Process Management

Enabling Platform Interoperability

Business Task Management

Custom Development Developing, Configuring, and Adapting Applications Enabling Platform Interoperability

Unified Life-Cycle Management Software Life-Cycle Management SAP NetWeaver Operations

Application Governance & Security Authentication and Single Sign-On Integrated User and Access Management

Consolidation Enabling Platform Interoperability SAP NetWeaver Operations Master-Data Consolidation Enterprise Knowledge

Management

Enterprise Service Architecture – Design & Deployment

Enabling Enterprise Services

IT Practices IT Scenarios

On the concept of IT Practices and IT Scenarios…

© SAP ESPAÑA 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 estableciendorelaciones entre ambos, sin necesidad de programación.

Visual Composer es completamente‘Web-Enabled’ ( Diseño y Ejecución)

Visual Composer genera el código de las aplicaciones que se modelan, al igual que posee funciones de debugger, tester y de documentadordel modelo que se diseña.

Actualmente SAPVisual Composer es capaz de producir iViews basadasen Java, JSP y HTMLB

© SAP ESPAÑA 2005

Motivación y Objetivo

Cúal es el objetivo de SAP Visual Composer ?

El proposito de SAP Visual Composer es el proveer de una herramienta quepermita 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 paraSAP EP

Reduciendo el TCO ( Total Cost of Ownership ) e Incrementado el ROI ( Return on Investment )

© SAP ESPAÑA 2005

Visual Composer Cross-Application Modelling

© SAP ESPAÑA 2005

Visual ComposerUser Interface Design

© SAP ESPAÑA 2005

Visual ComposerRuntime in the SAP Enterprise Portal

© SAP ESPAÑA 2005

Visual Composer Source (GUI Modelling Language)

© SAP ESPAÑA 2005

SAP Netweaver Development Tools

Content Complexity

RequiredTechnical

Development SkillsContent

Admin

SAP EP PortalContent Studio

SAP NetWeaver Developer Studio (Java + PDK Perspective)

SAP ABAP Development Workbench (Business Server Pages)

PDK for .Net

J2EE/ABAP/.Net Developer

Interactive Applications

Transactional Business

Applications

Web Applications

Business ApplicationDeveloper

Business Expert

SAP NetWeaver Developer Studio (Web Dynpro for Java Perspective)

SAP ABAP Development Workbench(Web Dynpro for ABAP*)

SAP NetWeaver Visual Composer

Display Applications

Developing Portal ContentCreating Portal Content

© SAP ESPAÑA 2005

SAP Visual ComposerFeatures(I)

Versiones de SAP EP compatible con SAP NW Visual ComposerVisual Composer es capaz de crear iviews para SAP EP 6.0 ( Patch 4 o mayor ) y para SAP EP NW’04 ( Stack 05 o mayor )

ConectividadSAP

SAP ERP: BAPI/RFC a partir de la version 3.1 en adelanteSAP BI and BW : Infocubos en todas las releases

Con TercerosBase de Datos

§ Mediante JDBC§ Solo es capaz de ejecutar procedures de las BDs.

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

© SAP ESPAÑA 2005

SAP Visual ComposerFeatures(II)

Soporte Multi LenguajeSoporta todos los lenguajes que en portal SAP EP esten operativosPara llevar a cabo dicha traducción se hace uso de la ‘Portal Translation Tool’ que SAP EP posee.

Soporte HTTPS / SSLVisual composer puede correr en mode SSLLas iViews que genera pueden tambien correrse en modo SSLLa comunicación entre VC y el Portal puede tambien hacer uso de SSL ( Fase de Diseño y Test )

Seguridad en los Modelos/Diseños de las aplicaciones de VCProtección mediante password de los modelos en el caso que mas de 1 developer haga uso del mismo VC

Importación/Exportación de los Modelos/Diseños de las aplicaciones de VCUn upgrade del VC solo sobreescribe el código, no los modelos.

Eventos entre iViewsMediante Portal’s client side eventing API (EPCF).

Campos dinámicos haciendo uso de expresiones lógicas y dinámicasCalcular, validar o formatear los valores de los campos que provengande los sistemas de backend o que el usuario rellene

© SAP ESPAÑA 2005

SAP Visual ComposerBI 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 construcción de queries

Templates for OLAP and relational queries: Ranking, Variance, Trend..

Wizard for freeform relational queries: joins, filters, sorting

SQL Editor

MDX Editor

© SAP ESPAÑA 2005

Visual ComposerFeatures Scope

© SAP ESPAÑA 2005

Introduccion a SAP Visual Composer


Arquitectura


Demo SAP Visual Composer

© SAP ESPAÑA 2005

Creando Aplicaciones con SAP NetWeaver Visual Composer - Procesos

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

ModelingVisual Composer allows to easily model a freestyle application.

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

Configuring and adaptingConfigure 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.

Developing Modeling Testing Configuring & Adapting Upgrade

© SAP ESPAÑA 2005

Developing Modeling Testing Configuring & Adapting Upgrade

Creando Aplicaciones con SAP NetWeaver Visual Composer - Esquema

AS ABAP:ABAP Workbench

EP:UI RuntimePersonali-zation

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

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

EP:Portal ContentStudio

(7) Check application within portal (11) Redefine roles

(6) Deploy in portal(10) Redesign page

(13a) Change BAPI/ RFC

(13b) Implement New BAPI / RFC

(1) Implement BAPI / RFC

© SAP ESPAÑA 2005

Visual ComposerSteps para la Creación de Contenido

Creación de un Modelo

Conexión con SAP Enterprise Portal

Creación de un Package

Creación de una Pagina

Creación de una iView

Conexión a un sistema de backend

Obtención de los contenedores de información del sistema de backend

Diseñamos el flujo lógico de la aplicación

Chequeo del modelo

Deploy del package en SAP Enterprise Portals

© SAP ESPAÑA 2005

Visual ComposerCreación de un Modelo (I)

Abrimos el IE6 browser con la siguiente URL:

1.File menu2.Create icon3.Create a blank

Model link

http://<machine name>.<domain>:<port>/VCserver/

© SAP ESPAÑA 2005

Visual ComposerCreación de un Modelo

Asignamos un nombre al Modelo

Indicamos el VC Server dondequeremos almacenar el modelo

(Opcional) Protegemos el modelomediante password

Click Ok

© SAP ESPAÑA 2005

Visual ComposerConexión con SAP Enterprise Portal

Informamos de la URL del portal http://<portalserver>:50000 y clickeamos en el semáforo.

Introducimos un usuario y password del portal, mediante el cual podamosacceder a los sistemas de backend que este tenga configurado

Posteriorment el semáforo pasa color verde despues del logon

© SAP ESPAÑA 2005

Visual ComposerCreación de un modelo

Creación del Modelo/Package:Seleccionamos “Elements” en la barra de herramientas vertical derechaHacemos 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 comoBankDetailsModule.Le damos Double-click sobre dicho package creado

© SAP ESPAÑA 2005

Visual ComposerCreación de una pagina

Creación de la página:Hacemos Drag del icono “Page” desde “Model Elements” al area del projecto, y hacemos doble click sobre el iconoLe damos un nombre únivoco a la página sin espacios, tal comoBankDetailsPage.Le damos Double-click sobre dicha pagina creada

© SAP ESPAÑA 2005

Visual ComposerCreación de una iview

Creación de la iViewHacemos Drag del icono “iView” desde “Page Elements” al area del projecto, y hacemos doble click sobre el iconoLe damos un nombre únivoco a la iview sin espacios, tal como BankDetailsiView.Le damos Double-click sobre dicha iview creada

© SAP ESPAÑA 2005

Visual ComposerConexión 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 lossistemas disponibles que este posee, seleccionando uno de ellos.( En nuestrocaso un sistema R3 ‘T90CLNT090’

Procedermos a buscar una BAPI de dicho sistema.

© SAP ESPAÑA 2005

Visual ComposerConexión a un sistema de backend(II)

Una vez encontremos la BAPI ‘BAPI_BANK_GETLIST ‘ la arrastaremoshacia el area de trabajo.

Todos los metadatos de la BAPI se importaran desde SAP R3 al SAP Visual Composer

© SAP ESPAÑA 2005

Visual ComposerConexión a un sistema de backend(III)

Chequeamos el buenfuncionamiento de la BAPI

Introducimos unos valores comoinput para ejecutar el test

© SAP ESPAÑA 2005

Visual ComposerDiseñamos flujo lógico de la aplicación(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 flotanteRenombramos dicho form por un nombre unívoco

© SAP ESPAÑA 2005

Visual ComposerDiseñamos flujo lógico de la aplicación(II)

Creamos una vista de Tabla :Arrastramos desde el nodo “Bank List” desde BAPI_BANK_GETLIST and lo soltamos en el area de trabajoEscogemos “Add Table View” en el menu flotante.Renombramos dicho form por un nombre unívoco

© SAP ESPAÑA 2005

Visual ComposerDiseñamos flujo lógico de la aplicación(III)

Definimos los campos de entrada/salida de datos

© SAP ESPAÑA 2005

Visual ComposerDeploy en SAP Enterprise Portals

1

2

3

4

Desplegamos la aplicación

1. Cambiamos la vista hasta el nivel del ‘Model’2. Clickeamos en el icono‘Deployer’ en la barra de herramientasvertical derecha3. Le damos a “Deploy”.4. Si el deployment ha sido correcto apareceráel siguiente mensaje : “Created Components succesfully”

© SAP ESPAÑA 2005

Visual Composer 6.0Focus

Portal Content DevelopmentSupported

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

Next Version of Visual ComposerFocus

SAP AnalyticsSupported

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 2004sVC Server: J2EE

20052005 Q3 Q4 Q1 Q220062006 Q3 Q4

Next Version of Visual Composer

Visual Composer 6.0

Q1

SAP Visual Composer Product Roadmap

Preliminary Versionfor SAP Analytics

© SAP ESPAÑA 2005

Arquitectura Actual Visual Composer on SAP EP 6.0

Visual Composer se instala como un addon en SAP Enterprise PortalVisual Composer se instala como un addon en SAP Enterprise Portal

© SAP ESPAÑA 2005

Futura Arquitectura(Next Version of Visual Composer)

J2EEDB

J2EEDB PCDPCD

Development Server

VC Server Flex Server

Portal

HTML/B

Connectivity Layer

Web Browser (IE)(Designtime)

Adobe SVGWeb Browser

(Runtime)

Flash Client

J2EE Server

deploy

deploy

save save

export

Bus

ines

s Pa

ckag

es

Microsoft XML

© SAP ESPAÑA 2005

Visual ComposerStatus 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 ESPAÑA 2005

Bibliografía

Online Documentation

(http://help.sap.com/nw04 )

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

SAPNet

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

visual composer

Documents

sap visual composer

copyright sap espaa

horas sap espaa

scenarios sap espaa

visual composerintroduccin

este manual o

reservados todos los

integrated user