Notas técnicas Tips de SAP Netweaver ABAP JAVA Tip en detalle Nro. 15. (Lo nuevo, lo escondido, o simplemente lo de siempre pero bien explicado)

Transcripción

1 Teknoda SAPping Notas técnicas Tips de SAP Netweaver ABAP JAVA Tip en detalle Nro. 15 (Lo nuevo, lo escondido, o simplemente lo de siempre pero bien explicado) Los nuevos escenarios de programación con SAP Netweaver (serie de varios tips) El modelo BSP (III): Un caso práctico de BSP Extensions Tema: BSP, Netweaver, SAP Web AS, HTML, Internet. Descripción: El objetivo de esta serie de tips es recorrer y ejemplificar el nuevo escenario de desarrollo que SAP ofrece a partir de Netweaver. En este tip, explicamos los fundamentos y las ventajas de la utilización de las BSP Extensions en relación a los desarrollos con BPS s tradicionales. Además, explicamos paso a paso cómo llevar a cabo la creación ejemplo de una aplicación con BSP Extensions. Nivel: Avanzado Versión: 6.20, 6.30, 6.40 Fecha pub: Agosto 2005 NOTA: Para una correcta comprensión de este artículo, recomendamos la lectura de los tips anteriores Entendiendo el SAP Web Application Server desde el punto de vista del programador, El modelo BSP: Cómo construir las primeras BSP y El modelo BSP (II): Un caso práctico con JavaScript. Consulte nuestro sitio para accederlos. "Tips en breve/tips en detalle" se envía con frecuencia variable y absolutamente sin cargo como un servicio a nuestros clientes SAP. Contiene notas/recursos/artículos técnicos desarrollados en forma totalmente objetiva e independiente. Teknoda es una organización de servicios de tecnología informática y NO comercializa hardware, software ni otros productos. Si desea suscribir otra dirección de para que comience a recibir los tips envíe un mensaje desde esa dirección a sapping@teknoda.com, indicando su nombre, empresa a la que pertenece, cargo y país. Tabla de contenido I. Introducción/Resumen Ejecutivo. II. Breve repaso de las BSP. Limitaciones del modelo BSP y la aparición de las BSP Extensions como solución Teknoda - Notas Técnicas de SAP/ ABAP 1

2 III. IV. Entendiendo BSP Extensions y su inserción en el mundo SAP Qué son las BSP Extensions? Diferencias entre BSP tradicional y BSP Extensions Creación de una BSP Application: despliega datos de una tabla perteneciente a un sistema SAP R/3 utilizando BSP Extensions (comparación con BSP sin Extensions) V. Creación de una BSP Application: despliega datos de una tabla de R/3 utilizando BSP extensions VI. VII. Conceptos Adicionales Dónde obtener información adicional. I. Introducción / Resumen Ejecutivo Cómo viéramos en detalle en tips anteriores, a partir de la versión 6.10, SAP sustituye el SAP BASIS System por el SAP Web Application Server. El SAP WAS, al igual que el BASIS que lo precede, provee el cimiento tecnológico sobre el cual se apoya el R/3 Enterprise, el sucesor de R/3, y la mayoría de los componentes de mysap.com. En este rol, el SAP WAS funciona como el nuevo R/3 Kernel, implementando toda la arquitectura de conectividad, seguridad, acceso a bases de datos, y también la interfaz de programación. Concebido para actuar en un mundo dominado por las aplicaciones Web enabled, la principal innovación del SAP WAS es que trae la funcionalidad Web completamente embebida, tanto desde el punto de vista de los protocolos de comunicaciones como del servicio de aplicaciones. En su personalidad Nativa, es decir, como kernel del R/3, el SAP WAS continúa soportando el universo ABAP de versiones anteriores, pero introduce nuevas herramientas para desarrollo de aplicaciones Web fuertemente integradas a R/3. Desde la primera versión del Web AS, (6.10) aparece el modelo de Business Server Pages (BSP s ) como una potente opción para construir aplicaciones Web que accedan dinámicamente a los datos de SAP. En este tip continuamos explorando la personalidad nativa del WAS, y la implementación de BSP s Extensions (Extensiones de Business Server Pages ) embebida dentro del R/3. Recomendamos la lectura de los tips anteriores Tip nro. 10 Entendiendo el SAP Web Application Server desde el punto de vista del programador, Tip Nro.11 El modelo BSP (I): Cómo construir las primeras BSP y Tip nro. 12 El modelo BSP (II): Un caso práctico con Javascripts. Consulte nuestro sitio para accederlos. II. Breve repaso de las BSP Con el lanzamiento de SAP Web Application Server 6.10 (Web AS), SAP introdujo un nuevo acercamiento al desarrollo Web llamado Business Server Pages (BSP). Por primera vez en el SAP WAS 6.10, los desarrolladores podían crear aplicaciones Web combinando el HTML y el lenguaje nativo ABAP dentro de una sola página llamada BSP. Usualmente, una aplicación BSP consiste en un par de páginas BSP s, donde la obtención de datos se codifica en ABAP y el layout se define vía el HTML estándar, de modo que cualquier programador ABAP con modestos conocimientos de HTML puede escribir fácilmente interfaces de usuario y aplicaciones, usando el Workbench de ABAP (SE80). Puede encontrar más detalle acerca de BSP s en los tips: Nro11: El Modelo BSP(I): Cómo construir las primeras BSPs y Tip Nro. 12: EL Modelo BSP (II): Un caso práctico con JavaScripts, publicados anteriormente. Limitaciones del modelo BSP y la aparición de las BSP Extensions como solución Teknoda - Notas Técnicas de SAP/ ABAP 2

3 Con el lanzamiento del SAP WAS 6.20, aparecen las BSP Extensions como una de sus principales mejoras. La necesidad de mejorar las BSP a partir de estas nuevas BSP Extensions surgen debido a la dificultad de mantenimiento de dichas aplicaciones BSP. Esta complicación en el mantenimiento, no ocurre sólo en aplicaciones BSP tradicionales; también se manifiesta en cualquier aplicación web que no presente una clara separación entre la capa lógica de negocios y la capa de presentación tales como: aplicaciones Java integramente construidas con JSP y Servlet, aplicaciones compuestas por páginas ASP, aplicaciones solamente de paginas HTML con algún script,etc Es importante recordar que durante el proceso de compilación de la BSP sólo se controlan las secciones pertenecientes a código ABAP. La porción de código HTML de la BSP puede contener errores, los cuales no serán detectados durante la activación de la Aplicación BSP. Por esta razón, se dificulta el mantenimiento de las BSP s, ya que cuanto más complejo sea el código, más compleja será la búsqueda de errores. La creación de una aplicación BSP requiere un esfuerzo de los programadores para el diseño de la interfaz. Existen algunas opciones estándar tales como: CSS, que facilitan el diseño de la pagina web (Ver conceptos adicionales, Hojas de Estilos (CSS)) y la ayuda del Tag Browser. No obstante, el programador debe realizar la interfaz casi a mano y un cambio en la interfaz de una página BSP puede requerir un cambio en todas las paginas BSP. Esto conlleva a que las BSPs sean difíciles de mantener o reutilizar, e inclusive pueden volverse complicadas de modularizar. Además, requiere la necesidad de indagar en etiquetas HTML y herramientas que nos permitan desarrollar una interfaz más amigable como JavaScript. Para subsanar estos inconvenientes, SAP WAS 6.20 presenta dos mejoras clave: 1) Las BSP Extensions (las cuales estudiaremos más en detalle en el transcurso de este tip), son bibliotecas de etiquetas estándar que nos permite utilizar elementos complejos en la interfaz, como tablas y estructuras de árbol, de forma fácil, escribiendo menos líneas de código en comparación con las BSP s tradicionales. SAP provee un conjunto de BSP extensions predefinidas muy completas en el Web AS Asimismo brinda la posibilidad de crear BSP extensions propias. 2) Model View Controller, es un esquema ampliamente utilizado en Java, es un enfoque de estructurar las aplicaciones Web que separa la interacción con el usuario en tres partes distintas: El Modelo (Model): encapsula los datos de negocio y la funcionalidad del negocio. Es la fuente de datos para cualquier tipo de visualización. La vista (View): permite visualizar los datos de la aplicación usando representación gráfica. Permite exhibir los datos de la aplicación de formas diferentes. El controlador (Controller): es el responsable de las respuestas a los eventos del usuario y ordenar la actualización de los datos de la aplicación y manipular los pedidos de navegación. III. Entendiendo BSP Extensions y su inserción en el mundo SAP Qué son las BSP Extensions? Son bibliotecas de tags que provee elementos complejos a la interfaz de usuario, muy fáciles de implementar por el programador. Estos elementos complejos realzan el diseño de la interfaz, brindando un aspecto moderno y dinámico. La librería más difundida de las BSP Extensions es HTMLB, cuyo significado es HTML Business. La mayoría de los tags HTMLB (BSP Extensions), tienen un tag equivalente en HTML. Por ejemplo la etiqueta o tag <form> en HTML tiene su equivalente <htmlb:form> en HTMLB, de forma similar la etiqueta <body> en HTML tiene su equivalente <htmlb:body>. Algunas bibliografías llaman a los tags como elementos BSP. A continuación se presenta un cuadro de equivalencias entre tags de HTML y HTML Teknoda - Notas Técnicas de SAP/ ABAP 3

4 HTMLB <htmlb:form> id method Librería HTMLB, BSPExtensions Elemento BSP o tag de la librería HTMLB Atributo id de un elemento o tag de la librería HTMLB Atributo method de un elemento o tag de la librería HTMLB HTML <form> Mame Method HyperText Markup Language Etiqueta </htmlb:form> Cierre del elemento o tag </form> Cierre Cuadro comparativo de etiquetas HTML y elementos BSP Atributo nombre Atributo method HTMLB (BSP Extensions) HTML(HyperText Markup Language)... <htmlb:form id = my form method = post >... </htmlb:form>. <form method= post name= myform >. </form> Comparación del uso elemento BSP form y etiqueta form en código Es conveniente destacar que la mayoría de los elementos BSP no utilizan el atributo universal de HTML llamado"name", en su lugar utilizan el atributo"id", que identifica cada elemento. Teknoda - Notas Técnicas de SAP/ ABAP 4

5 Texto Hola If me->width is not inicial. Concatenate html = width = 100% no wrap into html. < MyExt inputfield id = mi_id invalid = false value = Hola /> IV. Diferencias entre BSP tradicional y BSP Extensions BSP Tradicionales El compilador no detecta errores en el código HTML de la BSP, antes de su despliegue en el Browser. No permite un buen mantenimiento cuando la aplicación comienza a crecer. Requieren un conocimiento bajo de ABAP Objects Posee elementos de interfaz gráfica tradicionales, pertenecientes al HTML. Los elementos de interfaz gráficos están limitados a los utilizados por las diferentes versiones de HTML, NO permite crear sus propias librerias. Permite la utilización de Javascript. BSP Extensions El compilador detecta errores en los tags de HTMLB de la BSP, antes de su despliegue en el Browser. Si la aplicación posee errores, no permite la activación de la misma. Las Aplicaciones realizadas con BSP Extensions + MVC permiten un alto grado de escalabilidad. Requiere un conocimiento elevado de ABAP Objects para la correcta composición de la Aplicación BSP Extensions. Tienen elementos de interfaz gráfica, sofisticados y fáciles de codificar y con baja cantidad de código. Las BSP Extensions permiten crear sus librerias de Tags. propias Las BSP Extensions son generadas y utilizadas como reportes por SAP BW. Teknoda - Notas Técnicas de SAP/ ABAP 5

6 Las BSP Extensions se encuentran presentes en productos del SAP Business Suite como la nueva versión de CRM 4.0. En la siguiente tabla comparativa vemos el código del layout de una BSP tradicional y su equivalente en una BSP Extension. Ambos códigos permiten el despliegue de una tabla perteneciente al SAP R/3 en un Web Browser. El código de la BSP Tradicional es extenso, debe detallarse columna por columna y la tabla carece de elementos extras, como la selección de un registro, o determinar la cantidad de registros a desplegar por pantalla. En cambio, el código de la aplicación con BSP Extensions es compacto, claro e implementa sólo las funciones de las barras de desplazamiento. Aplicación sin BSP Extensions <%@page language="abap"%> <html> <head><title> Despliega clientes pertenecientes a la tabla SCUSTOM </title> </head> <h2>esta es una tabla extraída del R/3</h2> <body> <table border = 1> <tr><th>id</th> <th>name</th> <th>form</th> <th>street</th> <th>city</th> <th>country</th> <th>region</th> <% for (i =0 ; i<clientes.length;i++){ %> </tr><td><% =clientes[i].id %></td> <td><% =clientes[i].name %></td> <td><% =clientes[i].form %></td> <td><% =clientes[i].street %></td> <td><% =clientes[i].city %></td> <td><% =clientes[i].country %></td> <td><% =clientes[i].region %></td> <% } %> </table> </body> </html> Aplicación con BSP Extensions <%@page language="abap"%> <%@extension name="htmlb" prefix="htmlb"%> <htmlb:content design="design2003"> <htmlb:page title = "Despliega tabla SCUSTOM "> <htmlb:form> <htmlb:tableview id="tabla" visiblerowcount="5" table="<%= ZSCUSTOM %>"> </htmlb:tableview> </htmlb:form> </htmlb:page> </htmlb:content> Teknoda - Notas Técnicas de SAP/ ABAP 6

7 V. Creación de una BSP Application: despliega datos de una tabla perteneciente a un sistema SAP R/3 utilizando BSP Extensions (comparación con BSP sin Extensions) Continuando con el ejemplo de creación de BSPs realizado en el tip anterior (Nro. 11: El modelo BSP (I): Cómo construir las primeras BSPs), mejoraremos el enfoque utilizado en el ejemplo desarrollado en dicho tip, de forma tal que se puedan visualizar los mismos datos, pero esta vez utilizando BSP Extensions. Se hará uso del elemento BSP llamado Table View que permite visualizar datos pertenecientes a una tabla interna del R/3. Los pasos a seguir son: 1) Abrir el Web Application Builder, accesible desde la transacción SE80. (Cabe recordar que el Web Application Builder es una colección integrada de herramientas que incluye, entre otras cosas, un BSP editor y un debugger para los scripts ABAP y JAVA. ) 2) Crear la BSP Application que formará parte del respositorio de SAP. En el siguiente ejemplo, se muestra cómo se despliega en un Web Browser el contenido de la tabla SCUSTOM (contiene datos de clientes) perteneciente al sistema SAP R/3. El objetivo es recuperar y usar sus datos en una BSP, utilizando ABAP. La BSP a crear trabajará con sólo 3 componentes: el Layout, el Page Attribute (almacena los datos de los clientes) y el Event Handler (para realizar la consulta y poder obtener los datos a desplegar). Entonces, para comenzar: Crear una BSP Application con nombre z_bspext1 y luego una página con extensión.htm. Activar la BSP Application y la nueva página. (Recordar los pasos a seguir para la creación de la BSP Application, ya detallados en el tip anterior). Una vez completados estos pasos, continuar con los siguientes: 1. Seleccionar el tab Page Attributes en la ventana del editor. 2. Colocar en la columna de Attribute el nuevo parámetro llamado ZSCUSTOM (observar la s final). 3. Seleccionar en la columna de TypArt la opción TYPE. 4. Colocar en la columna de Associated Type el tipo de dato ABAP ZSCUSTOMTAB, el cual es una estructura tipo tabla de la tabla SCUSTOM. Esta estructura debe ser creada previamente en el data dictionary. El parámetro ZSCUSTOM será usado para almacenar la lista de clientes recuperada desde la tabla SCUSTOM durante el runtime. 5. Seleccionar el tab Layout en la ventana del editor. 6. Verificar la existencia de la directiva < %@page language="abap"%> como primera en el layout. Esta directiva indica que se trabaja con ABAP. 7. Incorporar en el layout el código HTML como se muestra en la siguiente imagen: Teknoda - Notas Técnicas de SAP/ ABAP 7

8 Layout language="abap"%> name="htmlb" prefix="htmlb"%> <htmlb:content design="design2003"> <htmlb:page title = "Despliega tabla SCUSTOM "> <htmlb:form> <htmlb:tableview id="tabla" visiblerowcount="5" table="<%= ZSCUSTOM %>"> </htmlb:tableview> </htmlb:form> </htmlb:page> </htmlb:content> Adición de Event handlers: 8. Seleccionar el tab Event Handlers. 9. Seleccionar de la lista desplegable On Inicialization. 10. Copiar la siguiente consulta : 11. Guardar las tareas realizadas. 12. Activar la BSP Application. 13. Ejecutar la BSP Application. Se desplegará automáticamente la página en el Web Browser: Como otro ejemplo, se pueden seguir los mismos pasos anteriores para crear una BSP que defina un formulario de entrada de datos. En este caso, el Event Handler a utilizar sería OnInputProcessing. Finalmente, se activa la aplicación BSP Extension y se la ejecuta. La siguiente figura muestra cómo debe quedar desplegada. Teknoda - Notas Técnicas de SAP/ ABAP 8

9 Figura perteneciente a una Aplicación con BSP Extensions Para poder observar las diferencias, se incluye la siguiente salida correspondiente al despliegue de la aplicación BSP tradicional equivalente (sin extensions): Figura perteneciente a una Aplicación BSP Tradicional Tener en cuenta por lo mencionado y construido en los párrafos anteriores, que los elementos pertenecientes a la librería de HTMLB son superiores con respecto a diseño y practicidad El elemento TableView siempre incluye las barras de desplazamiento y no hay que incluir líneas de código para su buen funcionamiento, Teknoda - Notas Técnicas de SAP/ ABAP 9

10 simplemente debe completarse el atributo visiblerowcount para indicar la cantidad de líneas a desplegar por cada página que aparezca en pantalla VI. Conceptos adicionales Hojas de Estilos (CSS) Las hojas de estilo separan en un documento el estilo lógico del estilo físico, dejando este último en bloques de definición de estilos separados de la estructura del documento. CSS son las siglas de "Cascade Style Sheet". Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML, y trata de dar la separación definitiva de la lógica (estructura) y el físico (presentación) del documento. La finalidad de las hojas de estilo es crear unos estilos físicos, separados de las etiquetas HTML (en lugar de como parámetros de las etiquetas) y aplicarlos en los bloques de texto en los que se quieran aplicar. CSS permite aplicar al documento un formato de modo mucho más exacto. Las hojas de Estilo poseen las siguientes ventajas: definir la distancia entre líneas del documento, aplicar identado a las primeras líneas del párrafo, colocar elementos en la página con mayor precisión y definir la visibilidad de los elementos, margenes, subrayados, tachados, etc. VII. Dónde obtener información adicional SAP Developers Network SAP NetWeaver - SAP NetWeaver Software IMPORTANTE Copyright 2005 Teknoda S.A. Agosto SAP, R/3 y ABAP son marcas registradas de SAP AG. Teknoda agradece el permiso de SAP para usar sus marcas en esta publicación. SAP no es el editor de esta publicación y no es, por lo tanto, responsable de su contenido. La información contenida en este artículo ha sido recolectada en la tarea cotidiana por nuestros especialistas a partir de fuentes consideradas confiables. No obstante, por la posibilidad de error humano, mecánico, cambios de versión u otro, Teknoda no garantiza la exactitud o completud de la información aquí volcada. Dudas o consultas: sapping@teknoda.com Teknoda - Notas Técnicas de SAP/ ABAP 10