自定义控件开发手记

finereport8.0开始提供接口了，最近在学习插件开发知识，有谁一起来学习交流下啊？？

自定义控件开发手记（图文版请见http://dwz.cn/1G1SPZ）

源码：https://coding.net/u/finereport/p/plugins/git/tree/master/plugin-paragrid

第一步，建立插件源码文件夹


2.用IDEA创建这个工程，如图所示的结构


3.放入插件开发所需的jar包


4.查找到自定义控件所需的几个接口
控件接口：其中b和c都是继a接口的
接口 描述 编号
com.fr.design.fun.ParameterWidgetOptionProvider 参数界面控件接口 a
com.fr.design.fun.CellWidgetOptionProvider 单元格控件接口 b
com.fr.design.fun.FormWidgetOptionProvider 表单控件接口 c
com.fr.stable.fun.JavaScriptFileHandler 用于引入js文件的接口 d
com.fr.stable.fun.CssFileHandler 用于引入css文件的接口 e
5.开始建立源文件目录，这个例子的package目录为com.fr.plugin.widget.grid


6.建立单元格控件接口的一个实现类com.fr.plugin.widget.grid.CellGridImpl
package com.fr.plugin.widget.grid;

import com.fr.design.beans.BasicBeanPane;
import com.fr.design.fun.impl.AbstractCellWidgetOptionProvider;
import com.fr.form.ui.Widget;

public class CellGridImpl extends AbstractCellWidgetOptionProvider {

@Override
public Class<? extends Widget> classForWidget() {
return null;
}

@Override
public Class<? extends BasicBeanPane<? extends Widget>> appearanceForWidget() {
return null;
}

@Override
public String iconPathForWidget() {
return null;
}

@Override
public String nameForWidget() {
return null;
}
}
7.一个个补充上这个方法的实现，其中的ComboGrid是控件的实现类，CellGridDefinePane是单元格控件的属性设置界面类

package com.fr.plugin.widget.grid;

import com.fr.design.beans.BasicBeanPane;
import com.fr.design.fun.CellWidgetOptionProvider;
import com.fr.form.ui.Widget;

public class CellGridImpl implements CellWidgetOptionProvider {

@Override
public Class<? extends Widget> classForWidget() {
return ComboGrid.class;
}

@Override
public Class<? extends BasicBeanPane<? extends Widget>> appearanceForWidget() {
return CellGridDefinePane.class;
}

@Override
public String iconPathForWidget() {
return "/com/fr/plugin/widget/grid/images/table.png";
}

@Override
public String nameForWidget() {
return "下拉表格";
}
}
8.在plugin.xml中注册上单元格控件接口

<extra-designer>
<CellWidgetOptionProvider class="com.fr.plugin.widget.grid.CellGridImpl"/>
</extra-designer>
9.web端展现，我们使用easyui。引入js和css代码接口实现如下

package com.fr.plugin.widget.grid;

import com.fr.stable.fun.impl.AbstractJavaScriptFileHandler;

public class JavaScriptFile extends AbstractJavaScriptFileHandler {

@Override
public String[] pathsForFiles() {
return new String[]{
"/com/fr/plugin/widget/grid/easyui/jquery.easyui.min.js",
"/com/fr/plugin/widget/grid/web/combogrid.js"
};
}
}
package com.fr.plugin.widget.grid;

import com.fr.stable.fun.impl.AbstractCssFileHandler;

public class CssFile extends AbstractCssFileHandler {

@Override
public String[] pathsForFiles() {
return new String[]{
"/com/fr/plugin/widget/grid/easyui/easyui.css",
"/com/fr/plugin/widget/grid/easyui/icon.css",
};
}
}
在plugin.xml注册上web文件引用接口
<extra-core>
<JavaScriptFileHandler class="com.fr.plugin.widget.grid.JavaScriptFile"/>
<CssFileHandler class="com.fr.plugin.widget.grid.CssFile"/>
</extra-core>
11.到这里，把该插件打成jar包并安装，就可以在单元格的控件一栏中看到“下拉表格控件了”
12.为了在参数界面和表单中也要能看到该控件，我们需要额外再写一个实现接口的类，这里不妨写为com.fr.plugin.widget.grid.GridImpl

package com.fr.plugin.widget.grid;

import com.fr.design.fun.ParameterWidgetOptionProvider;
import com.fr.design.fun.impl.AbstractFormWidgetOptionProvider;
import com.fr.form.ui.Widget;

public class GridImpl extends AbstractFormWidgetOptionProvider implements ParameterWidgetOptionProvider {
@Override
public Class<? extends Widget> classForWidget() {
return ComboGrid.class;
}

@Override
public Class<?> appearanceForWidget() {
return XComboGrid.class;
}

@Override
public String iconPathForWidget() {
return "/com/fr/plugin/widget/grid/images/table.png";
}

@Override
public String nameForWidget() {
return "下拉表格";
}
}
参数界面（表单）控件与单元格控件实现不同的地方，就在于public Class<?> appearanceForWidget()这个方法，因为我们可以看到所有的控件，在参数界面和表单中的属性设置是一样的，而在单元格控件中时设置属性是另外一个界面

在做好了之后，继续在plugin.xml中注册参数界面和表单控件接口，结合着之前添加的单元格控件接口，如下
<extra-designer>
<ParameterWidgetOptionProvider class="com.fr.plugin.widget.grid.GridImpl"/>
<FormWidgetOptionProvider class="com.fr.plugin.widget.grid.GridImpl"/>
<CellWidgetOptionProvider class="com.fr.plugin.widget.grid.CellGridImpl"/>
</extra-designer>
经过前面13步之后，整个手记就结束了。

开发要点
1.单元格控件的设置界面类需要继承BasicBeanPane并且需要实现DicPaneAndTreePaneCreator接口
2.表单和参数控件设置界面类需要继承XWidgetCreator类，这里由于和下拉框比较相似，所以继承了XWidgetCreator的子类XWriteAbleRepeatEditor
3.表单和参数控件属性编辑器，分为基本类型（数字、布尔值、字符串）和自定义类型（其他），基本类型是会自定调用系统内置的编辑器，自定义类型则需要继承AbstractPropertyEditor类
4.ComboGrid类public String getXType()方法的返回值要和combogrid.js中注册JS对象的值一致:$.shortcut('combogrid', FR.ComboGrid);
5.控件在web端展现的基本JS结构如下

(function($){
FR.MyImpl = FR.extend(FR.Widget, {
_defaultConfig: function () {
return $.extend(FR.Widget.superclass._defaultConfig.apply(), {
width : 120,
height : 24
});
},
_init: function () {
FR.Widget.superclass._init.apply(this, arguments);
},
getValue : function() {

},
setValue : function(v) {

}
});
})(jQuery);