Page History

...

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

...

Code Block

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

Code Block

language	java
title	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",
        };
    }
}

...

Code Block

language	java
title	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中注册参数界面和表单控件接口，结合着之前添加的单元格控件接口，如下

Code Block

language	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步之后，整个手记就结束了。经过前面13步之后，整个开发就结束了。

完整源码：http://wwwgit.finedeveloposchina.com:2015net/projectsfanruan/FSplugins-free/repostree/pluginsmaster/browse/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结构如下

Code Block

language	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

Versions Compared

Old Version 1

New Version Current

Key