润乾报表V4技术资料

FLEX因为具有高度的用户互动性和丰富的用户体验而越来越普及。使用FLEX构建的应用程序能够在所有常见桌面平台上运行，支持对外观的完全自定义，并且支持各种连接到后端数据和服务的方法。在润乾报表中集成FLEX控件，让润乾报表在页面展现上更美观，更强的用户体验。本文将以一个简单的例子介绍如何在润乾报表中集成FLEX控件。

 

FLEX概观及开发环境介绍：

 

编程者在Flex框架中建立Flex应用程序，并在Flash player上应用。Flex的应用框架包括MXML描述语言,ActionScript程序语言和Flex类库。编程者结合MXML和ActionScript建立应用程序，MXML定义用户界面元素，ActionScript定义客户逻辑和程序控制。Flex类库包含了Flex组件，管理器和行为控制。

建立FLEX应用程序的步骤：

1. 使用MXML代码设计和布局Flex容器和控件
2. 在ActionScript代码中完成功能函数定义
3. 编译代码，Flex编译器自定转换MXML代码为ActionScript代码，并编译为ActionScript，并且编译为二进制代码以SWF文件格式输出，并且在flash player上运行。
4. 将SWF文件包装在服务器的网页中。

Flex Builder是Flex的集成开发环境，基于Eclipse工作平台。它可以开发MXML，ActionScript和css代码。可在Adobe官网下载安装文件。

润乾报表中集成FLEX控件实现步骤：

1. 建立与润乾应用相连的Flex项目，并建立一个简单的标签控件。

1）  选择File|New|Flex Project，打开【New Flex Project】对话框。

这里选择应用服务器类型为J2EE。

2）  单击Next按钮，弹出指定服务器位置对话框。

选择润乾报表应用部署的路径，定义RootURL为http://localhost:8080/flexA。其余可保持默认值，本项目中编译完成的Flex项目的SWF生成至乾报表应用目录下的CommunicateProject-debug文件夹中，可供web应用调用。

1. 当前项目下新建一个MXML Application。定义需要嵌入到润乾报表中的控件，并在ActionScript中定义初始化参数的函数initVars()，然后在MXML定义标签来显示数据。

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”initVars()”>

 <mx:Script><![CDATA[

     // 定义可绑定的属性。

     [Bindable]

     public var myName:String;

     [Bindable]

     public var myHometown:String;

     // 给定义的属性赋值。

     private function initVars():void {

        myName = Application.application.parameters.myName;

        myHometown = Application.application.parameters.myHometown;

     }

  ]]></mx:Script>

  <mx:VBox verticalGap=”0″>

  <mx:HBox>

     <mx:Label text=”Name: “/>

     <mx:Label text=”{myName}” fontWeight=”bold”/>

  </mx:HBox>

  <mx:HBox>

     <mx:Label text=”Hometown: “/>

     <mx:Label text=”{myHometown}” fontWeight=”bold”/>

  </mx:HBox>

  </mx:VBox>

</mx:Application>

该应用程序中数据可从外部页面传递，即再Flex外部包装的页面中定义flashVars，然后在MXML文件中通过Application.application.parameters来使用。

作为Flex应用运行的效果如下：

1. 在润乾报表中调用FLEX控件。在需要嵌入FlEX的HTML代码中使用<object>和<embed>标签来调用FLEX对象并传递参数。故可在需要嵌入的FLEX控件的单元格内采用HTML数据类型：

代码为：

<object id=’mySwf’                                          classid=’clsid:D27CDB6E-AE6D-11cf-96B8-444553540000′

codebase=’http://download.macromedia.com/pub/shockwave/cabs/                                  flash/swflash.cab#version=9,0,0,0′

height=’100%’ width=’100%’>

<param name=’src’ value=’Communicate-debug/ApplicationParameter.swf’/>

<param name=’flashVars’ value=’myName=ALEX&myHometown=吉林’/>

<embed name=’mySwf’ src=’Communicate-debug/ApplicationParameter.swf’                                       pluginspage=’http://www.macromedia.com/shockwave/download/

index.cgi?P1_Prod_Version=ShockwaveFlash’

height=’100%’ width=’100%’

flashVars=’firstName=Nick&lastName=Danger’/>

</object>

 

其中利用<param name=’flashVars’ value=’myName=ALEX&myHometown=吉林’/>传递数据，这里参数值是固定的，myName=ALEX，myHometown=吉林。

利用润乾html标签自定义报表发布页面发布报表，或调用润乾默认的报表展现页面，得到如下结果。

 

4.       利用润乾参数模板完成参数传递：

arg1和arg2分别对应参数模板中传递过来的两个参数。

3）  修改flex控件调用单元格内容,使flex控件中显示的数据可从参数模板中获取。

 

=”<object id=’mySwf’                                      classid=’clsid:D27CDB6E-AE6D-11cf-96B8-444553540000′

codebase=’http://download.macromedia.com/pub/shockwave/cabs/                                  flash/swflash.cab#version=9,0,0,0′

height=’100%’ width=’100%’>

<param name=’src’ value=’Communicate-debug/ApplicationParameter.swf’/>

<param name=’flashVars’ value=’myName=”+arg1+”&myHometown=”+arg2+”‘/>

<embed name=’mySwf’ src=’Communicate-debug/ApplicationParameter.swf’                                       pluginspage=’http://www.macromedia.com/shockwave/download/

index.cgi?P1_Prod_Version=ShockwaveFlash’

height=’100%’ width=’100%’

flashVars=’firstName=Nick&lastName=Danger’/>

</object>”

其中利用<param name=’flashVars’ value=’myName=”+arg1+”&myHometown=”+arg2+”‘/>传递数据，这里参数值是动态的，根据arg1和arg2的参数动态变化。

利用润乾html标签自定义报表发布页面发布报表，或调用润乾默认的报表展现页面，得到如下结果。用户在参数表单中输入内容点击查询后，报表模板中嵌入的flex控件可以获取到参数传递值。