WebDynpro中显示IGS服务动态生成的商业图表及集成图表到Adobe交互式表单

英文版本：How to display a dynamically generated business chart from IGS in WebDynpro for ABAP application and Adobe Interactive Form?
链接地址：http://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/15176

如果在此博客中的图片看不清楚，请参考原文地址。

• ABAP /OO development knowledge。
• WebDynpro for ABAP development knowledge。
• Adobe Lifecycle Design knowledge，使用ADOBE交互式表单来进行开发，以及和WDA进行集成。

注意事项

从Netweaver 7.02/7.20 开始，在WebDynpro For ABAP的开发环境中Business Grahpics 这个UI控件，已经扩展了一个能够被绑定的新属性，这个属性叫做ImageData, 所以
你可能不需要以下的某些步骤。这个新的ImageData属性能够让你在BusinessGrahpicsUI控件中接受一个由后台IGS产生的XSTRING数据流，这样就避免了一些额外的步骤，并且
让IGS和图片的下载，以及在Adobe交互式中表单中之间的集成变的更加容易。

前言

在WDA开发环境中，标准的WDA已经提供了一个BusinessGraphic UI控件用来访问IGS(Internet Graphic Service)服务，这个UI控件能够用于产生一个商业图表，比如线图，饼图，
以及柱状图等等，这个控件是采用一种后台间接访问IGS服务的方式来生成这些商业图表，使用的方式也相对简单，只要需要把这个对象和相应的ContextNode做绑定，然后给这个
ContextNode赋值，然后这个UI控件就会按照绑定的值来显示图形，在大多数的WDA的应用中，这个UI控件非常有用处，比如用来做数据的线性分析，趋势分析等等。

但是你也许会发现BusinessGraphicUI控件有着以下的显而易见的缺陷，以下是一些真实的案例:
A) 用户想下载这些生成的图形，但是对于BusinessGraphics这个UI控件来说，是相当困难的事情，你如何让用户来下载这些生成的商业图表呢？
B) 用户想把这些商业图表插入到Adobe交互式的PDF 表单中去，如何取出这些生成商业图表，然后把转化成真正的BMP/GIF/JPG图形，然后嵌入到PDF表单中去呢？

解决方案概览

在一些案例中，你也可以直接调用IGS的API来生成这些商业图表，而不是用采用WDA的BusinessGrahpicUI控件的方式，这些商业图表通过直接的IGS API调用的方式自动生成，
效率更加高效而且节省系统资源，然后我们把这些生成的图表转化成XSTRING的类型，然后保存在ICM的缓存中一段时间（这个一段时间其实就是IE浏览器和服务器之间的SESSION的
生命周期，一般来说我们设置20～30分钟，用户可以自由设定这个有效期），然后生成一个唯一的URL地址来指向这个图表文件，然后再WDA开发的VIEW中，我们使用IMAGE UI控件，而不是Business Graphic控件，然后把这个URL绑定到这个IMAGE控件上，如果你希望在某些时候手动的删除这些ICM中的图表，你可以使用手动的去调用CLASS IF_HTTP_SERVER中的一个静态方法来完成。

Figure 1

新建一个ABAP Class，这个CLASS按照输入的参数用来生成商业图表，然后返回一个唯一的URL（HTTP://XXXX/XXX.JPG），你可以把这个CLASS定位成ASSISTANT CLASS，因为这样Webdynpro Application的运行效率会更高。

在WDA的程序中，新创建一个IMAGE UI控件，然后把这个控件的“Source”属性绑定到这个新创建的URL上，一旦商业图表在我们ABAP CLASS中被生成，然后IMAGE UI控件就能
根据绑定的URL来显示这个这个图片，当然你可以在ABAP CLASS中来控制这个图片的大小，你也可以在WDA的Image UI控件中的属性中来设置这些高度，宽度等等。

步骤-1，一个非常重要的例子程序

Figure 2

GRAPHICS_IGS_ADMIN: 这个程序是IGS服务的运行期管理视图
GRAPHICS_IGS_CE_TEST: 一个用来生成柱状图的例子
GRAPHICS_IGS_GUI_CE_DEMO: 你可以使用这个程序来定义你希望生成的商业图表的的描述文件，比如图表的类型，线图还是柱图，宽度，大小，背景颜色以及风格，
这个是一个非常好的学习如何建造一个生成商业图表的数据结构的例子，请浏览这个程序，在开始开发工作之前顺便思考一下的一些问题：

• 在我的WDA应用程序中，但用户点击生成报告按钮，你希望生成多少个图表？
• 在我的WDA应用成学中，程序如何来识别每个图表？
• 你希望生成生成什么样子的商业图表?
• 你希望商业图表是什么样子的？颜色，大小，X轴和Y轴等等。

Figure 3

一旦你执行这个例子程序GRAPHICS_IGS_CE_TEST，你将会看见一个柱状图表，这个图形通过直接调用IGS的API来生成，你可以得到一个返回的图片文件，只是
这个图片文件被保存在一个w3mimetabtype类型的表中，这个w3mimetabtype是一个table类型。

Figure 4

步骤-2，转化图片文件称一个XSTRING类型

在前面的例子中，你已经能够得多一个图表的文件了，即使它只是一个w3mimetabtype 类型的文件，只是图片以这种方式储存而已，所以你不得不转化这个图片文件
成XSTRING的类型，如果你希望显示这个图片在WDA的应用程序中的话，使用以下的步骤来执行图片文件的转化。

Figure 5

• 定义一个类型为cl_igs_image_converter的局部类实例 L_IGS_IMGCONV .
• 调用方法SETIMAGE (L_IMAGE_MIME is a w3mimetabtype type picture file you have to convert.)
• 调用方法 EXECUTE去转换图表到目标类型
• 调用GET_IMAGE 去获得转换后的图表文件.
• 调用FM ‘SCMS_BINARY_TO_XSTRING’, 然后你能得到一个XSTRING类型的图片文件 (L_BMP_XSTREAM).

步骤-3，生成一个唯一的URL来标识图片

现在你已经生成了一个图表文件，而且是JPG类型的XSTRING类型，你可以把这个对象文件直接绑定找IMAGE UI控件中去，但是运行这个WDA应用程序的过程中，如果一旦用户点击这个IMAGE 的话，IE浏览器会提示用户去打开或者下载这个文件到本地，这显然是不我们不希望得到的结果。我们的解决防范是直接显示这个图片在IMAGE UI控件中，然后这个图片文件还能被嵌入到ADOBE交互式表单中去显示，而且还能和表单的内容一起保存到本地成为一个PDF文档。

Figure 6

• 定义一个类型为IF_HTTP_RESPONSE的局部类实例L_CACHED_RESPONE
• 把我们前面生成的图表文件，这个时候还是XSTRING类型放入这个HTTP的Reponse中通过调用SET_DATA方法.
• 设置Set header data,以及Status，以及有效时间（用秒表示）, 当前代码中的IV_CACHE_TIMEOUT 是定义成1800表，是30分钟
• 然后生成一个唯一的ID为生成图片，并且同时渠道WDA应用所在的服务器的HTTP地址以及路径 
  

Figure 7

• 把这个图片文件放入到HTTP REPONSE中，通过调用方法SERVER_CACHE_UPLOAD.
• 返回图片的URL地址 (http://XXXXX:port/SAP/PUB/…./XXXX.JPG), 同时你可以可以使用T-CODE:SMICM来检查生成的图片被放在ICM中的位置。

步骤-4，在WDA的应用程序中显示商业图表

Figure 8

如何下载图表?

你可以利用SAP表的工具类CL_WD_RUNTIME_SERVICES 来取得XSTRING内容，然后把这些XSTRING对象发送到前端的IE浏览器，甚至你可以利用SAP标准的FM
去压缩多个XSTRING对象成一个ZIP文件，然后让用户一次性全部下载。

Figure 9

如何嵌入这些图片到一个ADOBE的交互式表单中去呢?

在有些WDA的应用程序中，用户在查询完数据，然后生成了商业图表，如果希望这些数据和图表能保存成在一个AODBE交互式表单中，那应该怎么办呢？你可以在WDA的开发环境中，使用ADOBE交互式表单UI控件来进行开发，或者你也可以直接建立PDF的表单模板，然后使用ABAP DICTIONARY类型的接口，不使用那个控件也可以，通过调用
FM的方式，然后你能得到一个XSTRING文件，你只是需要把这个XSTRING保存成一个PDF文件就可以了。

Figure 10

这个图片是一个例子展示了商业图表是如何被嵌入到一个PDF表单中去的，一旦用户保存这个表单到本地，那末图片也会随之被嵌入到PDF表单，然后
作为PDF文档的一部分。

嵌入商业图表到ADOBE表单中

首先建立一个Graphic元素在FORM对象中(注意，不是FORM接口对象！！)

Figure 11

Figure 12

设置图片的类型为‘Graphic Reference’-图片引用，为什么要这样设置，因为我们的商业图表已经保存在ICM中，而且有一个URL地址是可以直接访问的
所以我们只是需要引用这个URL就可以了。

Figure 13

• Graphic Reference, 直接引用图片的URL，然后这个商业图表就能够被直接显示出来，而不是重新创建一个内存中的拷贝.
• Graphic Content, 你需要传入一个XSTRING类型的图片对象，显然我们只是需要选择上面的属性就可以了。

Figure 14

在这个步骤中, 使用鼠标吧PIC_A1A2拖到ADOBE FORM的开发区域中，然后系统会自动会为你创建一个IMAGE FIELD这么一个对象，然后这个对象就会显示生成的
商业图表文件，当然是通过应用URL的方式。

关于Image Field 以下的属性请设置好，双击这个IMAGE FIELD对象，然后后边的PANEL中会显示这个对象的一些属性，其中下面的属性，请务必注意：

• Embeded this picture, 如果这个复选框没有被设置上的话，一旦用户选择保存PDF按钮，然后这个ADOBE 表单会被保存到本地，但是里面所引用的商业图表却没有能够被
  嵌入进去和PDF同时被保存到本地，所以请勾上。
• Visibility, Set Original Picture Size这个属性，不要让ADOBE FORM来调整你的商业图形的大小和比例。请直接选择Set Original Picture Size，显示图片的原始大小，图片的
  大小还是在图片生成的时候去控制。