页面加载动画自定义插件使用教程

编辑
  • 文档创建者:mqh
  • 浏览次数:794次
  • 编辑次数:11次
  • 最近更新:mqh 于 2019-08-17
  • 1. 版本

    报表服务器版本JAR 包插件版本
    10.02018-07-31V1.3

    2. 描述

    2.1 应用场景

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

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

    2.2 功能简介

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

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

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

    2)加载时布局元素的背景自定义功能。

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

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

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

    3. 使用示例

    3.1 安装插件

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

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

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

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

    3.2 动图目录建立

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

    将动图文件夹 loadingImages 拷贝到 FineReport 安装路径 %FR_HOME%\webapps\webroot的 help 或 scripts 目录下均可。

    注:不要放入 WEB-INF 中。

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

    3.3 插件参数配置

    全局参数配置

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

    参数说明:

    1)动画图片路径:

    对应存放动图和背景图的文件路径,默认为 %FR_HOME%\webapps\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 像素。

    模板参数配置

    在 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

    4 效果查看

    默认提供的动图资源展示,如下图所示:

    序号局部元素动图页面动图
    1circle-local.gifcircle-whole.gif
    2default-local.gifdefault-whole.gif
    3n01-local.gif
    n01-whole.gif
    4n02-local.gifn02-whole.gif
    5n03-local.gifn03-whole.gif
    6n04-local.gifn04-whole.gif
    7n05-local.gifn05-whole.gif
    8n06-local.gifn06-whole.gif
    9n07-local.gifn07-whole.gif
    10n08-local.gifn08-whole.gif
    11n09-local.gifn09-whole.gif
    12n10-local.gifn10-whole.gif

    动图资源文件下载:插件动图资源包.zip

    附件列表


    主题: 设计思路
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]