页面加载动画自定义插件

2.1 应用场景

默认情况下 FineReport 加载动画为蓝白相间条柱变化，且外部元素无背景变化这样的画面风格可能比较突兀。

用户可以使用该插件实现页面加载动画的自定义，定制化效果满足企业用户对报表细节效果的完美追求。

注：移动端不支持

2.2 功能简介

1）提供加载动画的自定义功能。

• 系统全局加载动画的自定义功能，可定制图片动画和尺寸大小。

• 单个模板加载动画的自定义功能，可定制图片动画和尺寸大小。

2）加载时布局元素的背景自定义功能。(新决策前端不支持)

• 系统全局加载时布局元素的背景自定义功能（加载完恢复）。

• 单个模板加载时布局元素的背景自定义功能（加载完恢复）。

3）新增页面动图、元素动图、背景图各项显示禁用功能。

3.1 安装插件

点击下载插件：页面加载动画自定义

设计器插件安装方法参照： 设计器插件管理

服务器安装插件方法参照： 服务器插件管理

安装完成后，默认插件启用，我们接着进行两步骤完成插件配置操作。

3.2 动图目录建立

首先下载动图资源文件：插件动图资源包 .zip (见文末)，解压缩后的得到动图文件夹loadingImages。

将动图文件夹 loadingImages 拷贝到 FineReport 安装路径 %FR_HOME%\webapps\webroot的 help目录下 或者新建的目录下（浏览器可访问到图都可）。

注：不要放入 WEB-INF 和 scripts 中。

文件中默认包含加载动画 GIF，提供用户进行选择配置；同时用户也可添加自定义的各种动图和背景图片放在loadingImages 目录，然后维护参数对应名称，即可生效。

3.3 插件参数配置

3.3.1 全局参数配置

进入到报表平台管理页面（数据决策系统）>管理系统>系统管理>常规，配置加载效果自定义，如下图所示：

参数说明：

1）动画图片路径：

对应存放动图和背景图的文件路径，默认为 %FR_HOME%\webapps\webroot\help\loadingImages。

如果设置了tomcat虚拟目录为 部署路径 + webroot，动画图片路径可为 help\loadingImages\ 

此项可以设置网络共享目录或者URL地址均可，例如：http://shopres.finereport.com/ueditor/loadingImages。

2）背景图：

系统全局背景自定义的图片名称，类型限定为 JPG 格式。默认为 bg_none，即透明背景，值为bg_none或none为禁用不显示。

3）元素动图：

报表画面中局部 HTML 元素加载动图，填写 GIF 文件名称（不含文件扩展名），值为none为禁用不显示。

元素动图宽度、高度：宽度 30 像素、高度 30 像素。

4）页面动图：

报表页面加载动图，填写 GIF 文件名称（不含文件扩展名），值为none为禁用不显示。

页面动图宽度、高度：宽度 60 像素、高度 60 像素。

3.3.2 模板参数配置

在 FineReport 安装路径 %FR_HOME%\webapps\webroot\WEB-INF\resources 下创建文件 LoadingConfig.xml 。

编辑LoadingConfig.xml文件，添加指定模板的属性。所含属性标签如下所示：

• reportName：报表的路径文件名称，包括路径和报表名称；

• bgImage：背景图片名称（不含文件扩展名），值为bg_none或none为禁用不显示;
  

• localPic：元素动图名称（不含文件扩展名），值为none为禁用不显示；

• localWidth：元素动图宽度；

• localHeight：元素动图高度；
  

• wholePic：页面动图名称（不含文件扩展名），值为none为禁用不显示；

• wholeWidth：页面动图宽度；

• wholeHeight：页面动图高度；

备注：属性值包含特殊字符，需要进行转义。

示例如下：

<?xml version="1.0" encoding="UTF-8"?>
<LoadingConfig>
<ReportAttr 
    reportName="doc/example.frm"
    bgImage="bg_yellow" 
    localPic="circle-local" 
    wholePic="circle-whole"/>
<ReportAttr 
    reportName="doc/GettingStarted.cpt" 
    bgImage="bg_yellow" 
    localPic="default-local" 
    wholePic="default-whole"/>
<ReportAttr 
    reportName="doc/GettingStarted-test.cpt" 
    bgImage="bg_yellow" 
    localPic="default-local"  localWidth="200" localHeight="200"
    wholePic="default-whole" wholeWidth="400" wholeHeight="400"/>
</LoadingConfig>

配置文件下载：LoadingConfig.xml

默认提供的动图资源展示，如下图所示：

序号	局部元素动图	页面动图
1
2
3
4
5
6
7
8
9
10
11
12

动图资源文件下载：插件动画资源包.rar

1. 配置参数文件，全局动画参数是可视化配置、模板动画参数是xm配置。配置生效是需要重启服务工程的。

2. 因接口限制，新决策前端，不支持IE浏览器、背景图片更换功能。

3. 如果设置了tomcat虚拟目录为 部署路径 + webroot，动画图片路径可为 help\loadingImages\ 

4. XML文件中属性值包含特殊字符，需要进行转义。