自定义控件

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

第二步：用IDEA创建这个工程，如图所示的结构

第三步：放入插件开发所需的jar包

第四步：查找到自定义控件所需的几个接口
控件接口：其中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

第五步：开始建立源文件目录，这个例子的package目录为com.fr.plugin.widget.grid

第六步：建立单元格控件接口的一个实现类com.fr.plugin.widget.grid.CellGridImpl

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;
    }
}

第七步：一个个补充上这个方法的实现，其中的ComboGrid是控件的实现类，CellGridDefinePane是单元格控件的属性设置界面类

CellGridImpl

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 "下拉表格";
    }
}

第八步：在plugin.xml中注册上单元格控件接口

<extra-designer>
    <CellWidgetOptionProvider class="com.fr.plugin.widget.grid.CellGridImpl"/>
</extra-designer>

第九步：web端展现，我们使用easyui。引入js和css代码接口实现如下

JavaScriptFile

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"
        };
    }
}

CssFile

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-report>
    <JavaScriptFileHandler class="com.fr.plugin.widget.grid.JavaScriptFile"/>
    <CssFileHandler class="com.fr.plugin.widget.grid.CssFile"/>
</extra-report>

第十一步：到这里，把该插件打成jar包并安装，就可以在单元格的控件一栏中看到“下拉表格控件了”
第十二步：为了在参数界面和表单中也要能看到该控件，我们需要额外再写一个实现接口的类，这里不妨写为com.fr.plugin.widget.grid.GridImpl

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步之后，整个开发就结束了。

完整源码：http://git.oschina.net/fanruan/plugins-free/tree/master/plugin-paragrid

开发要点

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);

Page tree

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

4 Comments

Dailer-刘荣歆

Anonymous

Anonymous

jacky.li-李星