自定义控件开发手记

ONE_DATA 2015-09-09 03:37:29
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);
...全文
110 点赞 收藏 1
写回复
1 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
不错不错,值得鼓励
回复
相关推荐
发帖
Web 开发
创建于2007-09-28

8.0w+

社区成员

Java Web 开发
申请成为版主
帖子事件
创建了帖子
2015-09-09 03:37
社区公告
暂无公告