一. kettle的组件是如何查出来的，如下图。

查出组件的代码如下。

二。下面看一下，如何实现一个组件。（比如要实现一个 调用一个存储过程的组件）

package org.flhy.ext.trans.steps;

import com.mxgraph.model.mxCell;
import com.mxgraph.util.mxUtils;
import org.flhy.ext.core.PropsUI;
import org.flhy.ext.trans.step.AbstractStep;
import org.flhy.ext.utils.JSONArray;
import org.flhy.ext.utils.JSONObject;
import org.flhy.ext.utils.StringEscapeHelper;
import org.pentaho.di.core.Const;
import org.pentaho.di.core.database.DatabaseMeta;
import org.pentaho.di.core.row.ValueMeta;
import org.pentaho.di.core.row.ValueMetaInterface;
import org.pentaho.di.core.row.value.ValueMetaFactory;
import org.pentaho.di.trans.step.StepMetaInterface;
import org.pentaho.di.trans.steps.dbproc.DBProcMeta;
import org.pentaho.di.trans.steps.selectvalues.SelectMetadataChange;
import org.pentaho.di.trans.steps.selectvalues.SelectValuesMeta;
import org.pentaho.di.trans.steps.sql.ExecSQLMeta;
import org.pentaho.metastore.api.IMetaStore;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
import org.springframework.util.StringUtils;
import org.w3c.dom.Document;
import org.w3c.dom.Element;

import java.util.List;

// author sf 2019-08-06
@Component("DBProc")
@Scope("prototype")
public class DBProc extends AbstractStep {

? ?@Override
? ?public void decode(StepMetaInterface stepMetaInterface, mxCell cell, List<DatabaseMeta> databases, IMetaStore metaStore) throws Exception {
? ? ? DBProcMeta DBProcsMeta = (DBProcMeta) stepMetaInterface;

? ? ? String con = cell.getAttribute("connection");
? ? ? DBProcsMeta.setDatabase(DatabaseMeta.findDatabase(databases, con));
? ? ? DBProcsMeta.setProcedure(cell.getAttribute("procedure"));
? ? ? DBProcsMeta.setResultName(cell.getAttribute("resultName"));
? ? ? DBProcsMeta.setAutoCommit("Y".equalsIgnoreCase(cell.getAttribute("autoCommit")));
? ? ? DBProcsMeta.setResultType(ValueMetaFactory.getIdForValueMeta(cell.getAttribute("resultType")));

// ? ?JSONArray jsonArray = JSONArray.fromObject(cell.getAttribute( "argument" ));
// ? ?DBProcsMeta.allocate( jsonArray.size() );
// ? ?for(int i=0; i<jsonArray.size(); i++) {
// ? ? ? JSONObject jsonObject = jsonArray.getJSONObject(i);
// ? ? ? DBProcsMeta.getArgument()[i] = jsonObject.optString("name");
// ? ?}
//
// ? ?JSONArray jsonDirectionArray = JSONArray.fromObject(cell.getAttribute( "argumentDirection" ));
// ? ?DBProcsMeta.allocate( jsonDirectionArray.size() );
// ? ?for(int i=0; i<jsonDirectionArray.size(); i++) {
// ? ? ? JSONObject jsonObject = jsonDirectionArray.getJSONObject(i);
// ? ? ? DBProcsMeta.getArgumentDirection()[i] = jsonObject.optString("directionname");
// ? ?}
//
// ? ?JSONArray jsonTypeArray = JSONArray.fromObject(cell.getAttribute( "argumentType" ));
// ? ?DBProcsMeta.allocate( jsonTypeArray.size() );
// ? ?for(int i=0; i<jsonTypeArray.size(); i++) {
// ? ? ? JSONObject jsonObject = jsonTypeArray.getJSONObject(i);
// ? ? ? DBProcsMeta.getArgumentType()[i] = jsonObject.optInt("typeName");
// ? ?}

? ? ? JSONArray jsonArray = JSONArray.fromObject(cell.getAttribute("parameterFields"));

? ? ? String[] argument = new String[jsonArray.size()];
? ? ? String[] argumentDirection = new String[jsonArray.size()];
? ? ? int[] argumentType = new int[jsonArray.size()];

? ? ? for (int i = 0; i < jsonArray.size(); i++) {
? ? ? ? ?JSONObject jsonObject = jsonArray.getJSONObject(i);

? ? ? ? ?argument[i] = jsonObject.optString("name");
? ? ? ? ?argumentDirection[i] = jsonObject.optString("direction");

? ? ? ? ?argumentType[i] = ValueMetaFactory.getIdForValueMeta(jsonObject.optString("type"));

? ? ? }

? ? ? DBProcsMeta.setArgument(argument);
? ? ? DBProcsMeta.setArgumentDirection(argumentDirection);
? ? ? DBProcsMeta.setArgumentType(argumentType);

? ?}

? ?@Override
? ?public Element encode(StepMetaInterface stepMetaInterface) throws Exception {

? ? ? DBProcMeta ?DBPMeta = (DBProcMeta) stepMetaInterface;

? ? ? Document doc = mxUtils.createDocument();
? ? ? Element e = doc.createElement(PropsUI.TRANS_STEP_NAME);

? ? ? e.setAttribute("connection", DBPMeta.getDatabase() == null ? "" : DBPMeta.getDatabase().getName());
? ? ? e.setAttribute("procedure", DBPMeta.getProcedure());
? ? ? e.setAttribute("resultName", DBPMeta.getResultName());
? ?// jsonObject.put("type",ValueMetaFactory.getValueMetaName(DBPMeta.getArgumentType()[j]) );

? ? ? e.setAttribute("resultType",ValueMetaFactory.getValueMetaName(Integer.valueOf(DBPMeta.getResultType())));
? ? ? e.setAttribute("autoCommit",DBPMeta.isAutoCommit() ? "Y" : "N");

// ? ?JSONArray arguments = new JSONArray();
// ? ?for ( int i = 0; i < DBPMeta.getArgument().length; i++ ) {
// ? ? ? String name = DBPMeta.getArgument()[i];
// ? ? ? JSONObject jsonObject = new JSONObject();
// ? ? ? jsonObject.put("name", name);
// ? ? ? arguments.add(jsonObject);
// ? ?}
// ? ?e.setAttribute("arguments", arguments.toString());
//
// ? ?JSONArray directions = new JSONArray();
// ? ?for ( int i = 0; i < DBPMeta.getArgumentDirection().length; i++ ) {
// ? ? ? String directionname = DBPMeta.getArgumentDirection()[i];
// ? ? ? JSONObject jsonObject = new JSONObject();
// ? ? ? jsonObject.put("directionname", directionname);
// ? ? ? arguments.add(jsonObject);
// ? ?}
// ? ?e.setAttribute("argumentDirection", directions.toString());
//
// ? ?JSONArray argumentTypes = new JSONArray();
// ? ?for ( int i = 0; i < DBPMeta.getArgumentType().length; i++ ) {
// ? ? ? String typeName = String.valueOf(DBPMeta.getArgumentType()[i]);
// ? ? ? JSONObject jsonObject = new JSONObject();
// ? ? ? jsonObject.put("typeName", typeName);
// ? ? ? arguments.add(jsonObject);
// ? ?}
// ? ?e.setAttribute("argumentType", argumentTypes.toString());
? ? ? JSONArray jsonArray = new JSONArray();
? ? ? String[] parameters = DBPMeta.getArgument();
? ? ? for(int j=0; j<parameters.length; j++) {
? ? ? ? ?JSONObject jsonObject = new JSONObject();
? ? ? ? ?jsonObject.put("name", parameters[j]);
? ? ? ? ?jsonObject.put("direction", DBPMeta.getArgumentDirection()[j]);

? ? ? ? ?jsonObject.put("type",ValueMetaFactory.getValueMetaName(DBPMeta.getArgumentType()[j]) );

? ? ? ? ?jsonArray.add(jsonObject);
? ? ? }
? ? ? e.setAttribute("parameterFields", jsonArray.toString());
? ? ? return e;
? ? ??

? ?}

}
encode方法 编码，他是要结合EXT +mxgraph2 获取到参数值。在放到DBProcMeta 中。

如下图DBProc.js 相当于kettle中的DBProcDialog

DBProcDialog = Ext.extend(KettleTabDialog, {
? ?title: '调用DB存储过程',
? ?width: 600,
? ?height: 450,
? ?initComponent: function() {
? ? ? var me = this, cell = getActiveGraph().getGraph().getSelectionCell();

? ? ? var wConnection = new Ext.form.ComboBox({
? ? ? ? ?flex: 1,
? ? ? ? ?displayField: 'name',
? ? ? ? ?valueField: 'name',
? ? ? ? ?typeAhead: true,
? ? ? ? ?mode: 'remote',
? ? ? ? ?forceSelection: true,
? ? ? ? ?triggerAction: 'all',
? ? ? ? ?selectOnFocus:true,
? ? ? ? ?store: getActiveGraph().getDatabaseStoreAll(),
? ? ? ? ?name: 'connection',
? ? ? ? ?value: cell.getAttribute('connection')
? ? ? });

? ? ? var onDatabaseCreate = function(dialog) {
? ? ? ? ?getActiveGraph().onDatabaseMerge(dialog.getValue());
? ? ? ? ?wConnection.setValue(dialog.getValue().name);
? ? ? ? ?dialog.close();
? ? ? };

? ? ? var wprocedure = new Ext.form.TextField({
? ? ? ? ?// region: 'center',
? ? ? ? ?fieldLabel: '存储过程名称',
? ? ? ? ?anchor: '-10', value: cell.getAttribute('procedure')});
? ? ? var wautoCommit = new Ext.form.Checkbox({fieldLabel: '启用自动提交', checked: cell.getAttribute('autoCommit') == 'Y'});
? ? ? var wresultName = new Ext.form.TextField({fieldLabel: '返回值名称', ?anchor: '-10', value: cell.getAttribute('resultName')});
? ?// var wresultType = new Ext.form.TextField({fieldLabel: '返回值类型', ?anchor: '-10', value: cell.getAttribute('resultType')});
? ? ? var wresultType = ?new Ext.form.ComboBox({
? ? ? ? ?store: new Ext.data.JsonStore({
? ? ? ? ? ? fields: ['value', 'text'],
? ? ? ? ? ? data: [
? ? ? ? ? ? ? ?{value: 'Number', text: 'Number'},
? ? ? ? ? ? ? ?{value: 'String', text: 'String'},
? ? ? ? ? ? ? ?{value: 'Date', text: 'Date'}

? ? ? ? ? ? ]
? ? ? ? ?}),
? ? ? ? ?displayField: 'text',
? ? ? ? ?valueField: 'value',
? ? ? ? ?typeAhead: true,
? ? ? ? ?mode: 'local',
? ? ? ? ?forceSelection: true,
? ? ? ? ?triggerAction: 'all',
? ? ? ? ?selectOnFocus:true,
? ? ? ? ?value: cell.getAttribute('resultType')
? ? ? });

? ? ? var store = new Ext.data.JsonStore({
? ? ? ? ?fields: [ 'name', 'direction', 'type'],
? ? ? ? ?data: Ext.decode(cell.getAttribute('parameterFields') || Ext.encode([]))
? ? ? });

? ? ? this.getValues = function(){
? ? ? ? ?return {

? ? ? ? ? ? connection: wConnection.getValue(),
? ? ? ? ? ? procedure: wprocedure.getValue(),
? ? ? ? ? ? autoCommit: wautoCommit.getValue() ? "Y" : "N",
? ? ? ? ? ? resultName: wresultName.getValue(),
? ? ? ? ? ? resultType: ?wresultType.getValue(),
? ? ? ? ? ? parameterFields: Ext.encode(store.toJson())
? ? ? ? ?};
? ? ? };

? ? ? this.tabItems = [{
? ? ? ? ?title: '基本配置',
? ? ? ? ?xtype: 'KettleForm',
? ? ? ? ?bodyStyle: 'padding: 10px 0px',
? ? ? ? ?labelWidth: 150,
? ? ? ? ?items: [{
? ? ? ? ? ? xtype: 'compositefield',
? ? ? ? ? ? fieldLabel: '数据库连接',
? ? ? ? ? ? anchor: '-10',
? ? ? ? ? ? items: [wConnection, {
? ? ? ? ? ? ? ?xtype: 'button', text: '编辑...', handler: function() {
? ? ? ? ? ? ? ? ? var databaseDialog = new DatabaseDialog();
? ? ? ? ? ? ? ? ? databaseDialog.on('create', onDatabaseCreate);
? ? ? ? ? ? ? ? ? databaseDialog.show(null, function() {
? ? ? ? ? ? ? ? ? ? ?databaseDialog.initTransDatabase(wConnection.getValue());
? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ?}
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ?xtype: 'button', text: '新建...', handler: function() {
? ? ? ? ? ? ? ? ? var databaseDialog = new DatabaseDialog();
? ? ? ? ? ? ? ? ? databaseDialog.on('create', onDatabaseCreate);
? ? ? ? ? ? ? ? ? databaseDialog.show(null, function() {
? ? ? ? ? ? ? ? ? ? ?databaseDialog.initTransDatabase(null);
? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ?}
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ?xtype: 'button', text: '向导...'
? ? ? ? ? ? }]
? ? ? ? ?},

? ? ? ? ? ? wprocedure,wautoCommit,wresultName,
? ? ? ? ? ? {

? ? ? ? ? ? ? ?xtype: 'compositefield',
? ? ? ? ? ? ? ?fieldLabel: '数据库连接',
? ? ? ? ? ? ? ?anchor: '-10',
? ? ? ? ? ? ? ?items :wresultType

? ? ? ? ? ? }

? ? ? ? ?]
? ? ? },
? ? ? ? ?{
? ? ? ? ?title: '参数',
? ? ? ? ?xtype: 'editorgrid',
? ? ? ? ?tbar: [{
? ? ? ? ? ? text: '新增字段', handler: function(btn) {
? ? ? ? ? ? ? ?var grid = btn.findParentByType('editorgrid');
? ? ? ? ? ? ? ?var RecordType = grid.getStore().recordType;
? ? ? ? ? ? ? ?var rec = new RecordType({ ?name: '', direction: '' ,type:''});
? ? ? ? ? ? ? ?grid.stopEditing();
? ? ? ? ? ? ? ?grid.getStore().insert(0, rec);
? ? ? ? ? ? ? ?grid.startEditing(0, 0);
? ? ? ? ? ? }
? ? ? ? ?},{
? ? ? ? ? ? text: '删除字段', handler: function(btn) {
? ? ? ? ? ? ? ?var sm = btn.findParentByType('editorgrid').getSelectionModel();
? ? ? ? ? ? ? ?if(sm.hasSelection()) {
? ? ? ? ? ? ? ? ? var row = sm.getSelectedCell()[0];
? ? ? ? ? ? ? ? ? store.removeAt(row);
? ? ? ? ? ? ? ?}
? ? ? ? ? ? }
? ? ? ? ?}

? ? ? ? ?],
? ? ? ? ?columns: [new Ext.grid.RowNumberer(),
? ? ? ? ?// var wresultName = new Ext.form.TextField({fieldLabel: '返回值名称', ?anchor: '-10', value: cell.getAttribute('resultName')});

? ? ? {
? ? ? ? ? ? ? ?header: '名称', dataIndex: 'name', width: 100, editor: new Ext.form.TextField({
? ? ? ? ? ? ? ? ? // store: new Ext.data.JsonStore({
? ? ? ? ? ? ? ? ? // ? ? fields: ['value', 'text'],
? ? ? ? ? ? ? ? ? // ? ? data: [
? ? ? ? ? ? ? ? ? // ? ? ? ?{value: 'INT', text: 'INT'},
? ? ? ? ? ? ? ? ? // ? ? ? ?{value: 'OUT', text: 'OUT'},
? ? ? ? ? ? ? ? ? // ? ? ? ?{value: 'INTOUT', text: 'INTOUT'},
? ? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? ? // ? ? ]
? ? ? ? ? ? ? ? ? // }),
? ? ? ? ? ? ? ? ? displayField: 'text',
? ? ? ? ? ? ? ? ? valueField: 'value',
? ? ? ? ? ? ? ? ? typeAhead: true,
? ? ? ? ? ? ? ? ? mode: 'local',
? ? ? ? ? ? ? ? ? forceSelection: true,
? ? ? ? ? ? ? ? ? triggerAction: 'all',
? ? ? ? ? ? ? ? ? selectOnFocus:true
? ? ? ? ? ? ? ?})
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ?header: '方向', dataIndex: 'direction', width: 100, editor: new Ext.form.ComboBox({
? ? ? ? ? ? ? ? ? store: new Ext.data.JsonStore({
? ? ? ? ? ? ? ? ? ? ?fields: ['value', 'text'],
? ? ? ? ? ? ? ? ? ? ?data: [
? ? ? ? ? ? ? ? ? ? ? ? {value: 'IN', text: 'IN'},
? ? ? ? ? ? ? ? ? ? ? ? {value: 'OUT', text: 'OUT'},
? ? ? ? ? ? ? ? ? ? ? ? {value: 'INOUT', text: 'INOUT'},

? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? }),
? ? ? ? ? ? ? ? ? displayField: 'text',
? ? ? ? ? ? ? ? ? valueField: 'value',
? ? ? ? ? ? ? ? ? typeAhead: true,
? ? ? ? ? ? ? ? ? mode: 'local',
? ? ? ? ? ? ? ? ? forceSelection: true,
? ? ? ? ? ? ? ? ? triggerAction: 'all',
? ? ? ? ? ? ? ? ? selectOnFocus:true
? ? ? ? ? ? ? ?})
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ?header: '类型', dataIndex: 'type', width: 100, editor: new Ext.form.ComboBox({
? ? ? ? ? ? ? ? ? store: new Ext.data.JsonStore({
? ? ? ? ? ? ? ? ? ? ?fields: ['value', 'text'],
? ? ? ? ? ? ? ? ? ? ?data: [
? ? ? ? ? ? ? ? ? ? ? ? {value: 'Number', text: 'Number'},
? ? ? ? ? ? ? ? ? ? ? ? {value: 'String', text: 'String'},
? ? ? ? ? ? ? ? ? ? ? ? {value: 'Date', text: 'Date'},

? ? ? ? ? ? ? ? ? ? ?]
? ? ? ? ? ? ? ? ? }),
? ? ? ? ? ? ? ? ? displayField: 'text',
? ? ? ? ? ? ? ? ? valueField: 'value',
? ? ? ? ? ? ? ? ? typeAhead: true,
? ? ? ? ? ? ? ? ? mode: 'local',
? ? ? ? ? ? ? ? ? forceSelection: true,
? ? ? ? ? ? ? ? ? triggerAction: 'all',
? ? ? ? ? ? ? ? ? selectOnFocus:true
? ? ? ? ? ? ? ?})
? ? ? ? ? ? },

? ? ? ? ?],
? ? ? ? ?store: store
? ? ? }];

? ? ? DBProcDialog.superclass.initComponent.call(this);
? ?}

});

Ext.reg('DBProc', DBProcDialog);
三.组件画好之后效果如下 待完善。

cs