自定义控件简单到令人发指的开发历程

迈达斯之手

本帖最后由迈达斯之手于 2016-12-6 13:15 编辑

这个控件的开发来源是问题求助里面的帖子
传送门 ----》》》》 http://bbs.fanruan.com/thread-83243-1-1.html
插件已经在帖子的楼层里面提供了下载，下面就说一下开发的过程吧
第一步：实例化一个注册控件的接口
给四个信息我们的控件类，界面类，图标路径，控件类型名字

package com.hg.free.plugin.customcombo.param;
import com.fr.design.designer.creator.XComboBox;
import com.fr.design.fun.impl.AbstractParameterWidgetOptionProvider;
import com.fr.form.ui.Widget;
public class WidgetRegister extends AbstractParameterWidgetOptionProvider {
@Override
public Class<? extends Widget> classForWidget() {
return CustomComboBox.class;
}
@Override
public Class<?> appearanceForWidget() {
return XComboBox.class;
}
@Override
public String iconPathForWidget() {
return "/com/fr/web/images/combobox.png";
}
@Override
public String nameForWidget() {
return "自定义下拉框";
}
}

复制代码

第二步：重写我们的控件类‘

package com.hg.free.plugin.customcombo.param;
import com.fr.form.ui.ComboBox;
import com.fr.ui.DataFilter;
public class CustomComboBox extends ComboBox {
private static final long serialVersionUID = 7169771062153345236L;
@Override
public String getXType() {
return "customcombo";
}
@Override
protected DataFilter createDataFilter() {
return new CustomComboBoxDataFilter();
}
}

复制代码

因为是要改变过滤的方式那么就重写一个过滤器喽

package com.hg.free.plugin.customcombo.param;
import com.fr.form.ui.ComboBoxDataFilter;
public class CustomComboBoxDataFilter extends ComboBoxDataFilter {
@Override
public boolean isMatch(String txt, String filter) {
if(null==txt && null!=filter)return false;
if(null==txt && null==filter)return true;
return txt.indexOf(filter)!=-1;
}
}

复制代码

第三步：继承前端控件JS

;
(function($){
FR.CustomComboBoxEditor = FR.extend(FR.ComboBoxEditor, {
_init: function () {
FR.CustomComboBoxEditor.superclass._init.apply(this, arguments);
}
});
$.shortcut("customcombo", FR.CustomComboBoxEditor);
})(jQuery);

复制代码

好了~以上就是全部的代码开发~然后写个xml用ant打包成插件就可以了,
是不是简单到令人发指~{:5_147:}

=======================================小丁丁分割线=================================================
解释一下代码吧：
首先来看我们的JS~这段代码是什么意思呢？
就是我定义了一个控件类型为CustomComboBoxEditor的控件，他继承了ComboBoxEditor的全部方法和属性，并且我把新定义的控件类型的标记声明为customcombo
，这个标记有啥用勒，其他用途就不说了，单单说在这里的用途~就是JAVA 本身是不能让前端取生成什么控件的~而是通过告诉前端一个配置~前端的JS引擎（姑且这么称呼他吧）~根据这个配置去执行对应的脚本生成对应的dom样式之类的~shortcut你就这么理解~后台返回一个配置是要生成customcombo这个控件~那么它就像一个map一样找到了对应的键值FR.CustomComboBoxEditor~然后把该控件的配置丢到这个方法里面去执行。就生成我们的控件了~

因为这个例子中并没有对前端有任何修改的要求~所以就没做任何改动~下面看后台
我们这个例子是要修改模糊匹配的方式~
那么原来控件匹配的机制是怎么搞的勒~
是这样的：假设我是一个老板（妈蛋也只能假设一下了{:8_219:}）~现在我想了解一份纸质合同的细节~但是公司有一大坨纸质合同我怎么找呢~当然是请个秘书了（美女最好{:8_208:}）~我告诉她我要的合同大概是有些什么信息~然后她去找出来把最后找到的合同给我就可以了~
我们这里控件ComboBox就是老板，ComboBoxDataFilter就是秘书~就是这么个意思~这里每个秘书肯定都有自己找合同的一套方法~以前那个秘书是只要有点相关的就都找出来了~新来的这个秘书是只找老板提示的信息匹配到的合同~查找匹配的方法就是isMatch

这个代码就是这样的~代码的开发其实只要仔细分析就能够映射到现实生活中的很多事务处理上面~因为代码也是人设计的~逻辑总逃脱不了人处理事务的思维~