插件文档

【仅供内部供应商使用，不提供对外解答和培训】

Page tree

【仅供内部供应商使用，不提供对外解答和培训】

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

前言

FineReport除了内置的图表、新特性图表插件外，还提供了第三方图表开发的API，方便进行个性化、第三方的图表开发。但是第三方图表API接口过于复杂，用户很难快速的实现并使用自己想使用的第三方新图表。

解决方法

在原有的图表接口基础之上，对接口进行了简化和修改，让用户可以快速的写出第三方图表插件并使用。

关键接口

（1）IndependentChartProvider

 

package com.fr.chart.fun;

import com.fr.chart.chartattr.Chart;
import com.fr.stable.fun.Level;

/**
 * Created by eason on 15/4/21.
 * 图表接口
 */
public interface IndependentChartProvider extends Level {

 String XML_TAG = "IndependentChartProvider";

 int CURRENT_API_LEVEL = 3;

 /**
 * 图表的国际化的名字的key
 *
 * @return 图表国际化的名字的key
 */
 String getChartName();

 /**
 * 该种图表所有的图表类型，比如柱形图就有堆积柱形图，百分比堆积柱形图等等
 *
 * @return 所有的图表类型
 */
 Chart[] getChartTypes();

 /**
 * 图表在web端展现时需要的JS文件
 *
 * @return JS文件数组
 */
 String[] getRequiredJS();

 /**
 * JS对象名，该对象一般是一个函数，执行后会在给定的dom中绘制图表
 *
 * @return JS对象名
 */
 String getWrapperName();

 /**
 * 定义在设计器里展现的图的路径
 *
 * @return 图的路径
 */
 String getChartImagePath();

}

 

 

（2）IndependentChartUIProvider
此接口用户不必实现 ，只需要继承 AbstractIndependentChartUI4Custom 类，并实现如下方法即可

 



package com.fr.design.chart.fun;

import com.fr.chart.chartattr.Plot;
import com.fr.design.beans.BasicBeanPane;
import com.fr.design.condition.ConditionAttributesPane;
import com.fr.design.gui.chart.ChartEditPaneProvider;
import com.fr.design.gui.frpane.AttributeChangeListener;
import com.fr.design.mainframe.chart.AbstractChartAttrPane;
import com.fr.design.mainframe.chart.gui.ChartDataPane;
import com.fr.design.mainframe.chart.gui.ChartStylePane;
import com.fr.design.mainframe.chart.gui.data.report.AbstractReportDataContentPane;
import com.fr.design.mainframe.chart.gui.data.table.AbstractTableDataContentPane;
import com.fr.design.mainframe.chart.gui.type.AbstractChartTypePane;
import com.fr.stable.fun.Level;

/**
 * Created by eason on 14/12/29.
 *
 * @since 8.0
 * 自定义图表类型设设计界面接口
 */
public interface IndependentChartUIProvider extends Level {

 String XML_TAG = "IndependentChartUIProvider";

 int CURRENT_API_LEVEL = 3;

/**
 * 当前接口的API等级,用于判断是否需要升级插件
 *
 * @return API等级
 */
int currentAPILevel();
 /**
 * 图表配置面板
 *
 * @return图表配置面板
 */
 ChartEditPaneProvider getChartConfigPane(String plotID);

}

关键抽象类

（1）IndependentChartProvider

 

package com.fr.chart.fun;

import com.fr.chart.chartattr.Chart;
import com.fr.stable.fun.Level;

/**
 * Created by eason on 15/4/21.
 * 图表接口
 */
public interface IndependentChartProvider extends Level {

 String XML_TAG = "IndependentChartProvider";

 int CURRENT_API_LEVEL = 3;

 /**
 * 图表的国际化的名字的key
 *
 * @return 图表国际化的名字的key
 */
 String getChartName();

 /**
 * 该种图表所有的图表类型，比如柱形图就有堆积柱形图，百分比堆积柱形图等等
 *
 * @return 所有的图表类型
 */
 Chart[] getChartTypes();

 /**
 * 图表在web端展现时需要的JS文件
 *
 * @return JS文件数组
 */
 String[] getRequiredJS();

 /**
 * JS对象名，该对象一般是一个函数，执行后会在给定的dom中绘制图表
 *
 * @return JS对象名
 */
 String getWrapperName();

 /**
 * 定义在设计器里展现的图的路径
 *
 * @return 图的路径
 */
 String getChartImagePath();

}

 

 

（2）IndependentChartUIProvider
此接口用户不必实现 ，只需要继承 AbstractIndependentChartUI4Custom 类，并实现如下方法即可

 



package com.fr.design.chart.fun;

import com.fr.chart.chartattr.Plot;
import com.fr.design.beans.BasicBeanPane;
import com.fr.design.condition.ConditionAttributesPane;
import com.fr.design.gui.chart.ChartEditPaneProvider;
import com.fr.design.gui.frpane.AttributeChangeListener;
import com.fr.design.mainframe.chart.AbstractChartAttrPane;
import com.fr.design.mainframe.chart.gui.ChartDataPane;
import com.fr.design.mainframe.chart.gui.ChartStylePane;
import com.fr.design.mainframe.chart.gui.data.report.AbstractReportDataContentPane;
import com.fr.design.mainframe.chart.gui.data.table.AbstractTableDataContentPane;
import com.fr.design.mainframe.chart.gui.type.AbstractChartTypePane;
import com.fr.stable.fun.Level;

/**
 * Created by eason on 14/12/29.
 *
 * @since 8.0
 * 自定义图表类型设设计界面接口
 */
public interface IndependentChartUIProvider extends Level {

 String XML_TAG = "IndependentChartUIProvider";

 int CURRENT_API_LEVEL = 3;

/**
 * 当前接口的API等级,用于判断是否需要升级插件
 *
 * @return API等级
 */
int currentAPILevel();
 /**
 * 图表配置面板
 *
 * @return图表配置面板
 */
 ChartEditPaneProvider getChartConfigPane(String plotID);

}

 

 

 

实际示例

绿色主题

 

package com.fr.solution.theme.green;
 
import com.fr.fs.fun.impl.AbstractThemeVariousProvider;
 
public class ThemeGreen extends AbstractThemeVariousProvider {
 
    @Override
    public String name() {
        return "AcrossGreen";
    }
 
    @Override
    public String text() {
        return "横向目录";
    }
 
    @Override
    public String coverPath() {
        return "/com/fr/solution/theme/green/files/cover.png";
    }
 
    @Override
    public String scriptPath() {
        return "/com/fr/solution/theme/green/files/theme.js";
    }
 
    @Override
    public String stylePath() {
        return "/com/fr/solution/theme/green/files/style.css";
    }
}

 

关键配置xml

 

<extra-platform>
    <ThemeVariousProvider class="com.fr.solution.theme.green.ThemeGreen"/>
</extra-platform>

 

可以看到只要实现了接口的几个方法，并按照平台主题的API接口开发好主题，就可以开发出来一个主题插件了。开发好的主题插件可以上传到应用中心方便共享给所有的用户。

效果图

安装插件后，插件管理中心可以看到该插件

 

 

之后决策平台的管理员可以在平台的外观设置中选择该主题，安装后切换主题的位置

之后决策平台的效果就是下图这样了

 

源码

如果你希望查看完整的示例源码，可以看这里：http://www.finedevelop.com:2015/projects/PB/repos/plugin-theme-green

  • No labels

【仅供内部供应商使用，不提供对外解答和培训】