Object type TemplateComponent can't be mapped to a valid class

背景: Object type TemplateComponent can't be mapped to a valid class

TemplateComponent 在 pentaho cde 下，不选择RequireJS Support ，无法使用。

 

如果选中，又会造成其他问题，D3、FusionCharts等第三方插件无法使用。

 

 

分析源码发现，TemplateComponent并没有放入到cdf-bootstrap-script-includes.js中。故对源码进行修改...

 

pentaho的cdf-bootstrap-script-includes.js文件，通过resources.properties配置

 

 

 

1.配置

resources.properties

 

script=js-legacy/components/template.js
link=js/components/theme/TemplateComponent.css

 

 

js-legacy/components/template.js 文件从js/components/TemplateComponent.js拷贝，并进行适当的修改，一下代码是pentaho ctools cdf 8.3版本，将原Logger, Utils替换为Dashboards，修改后，代码如下：

/*!
 * Copyright 2002 - 2019 Webdetails, a Hitachi Vantara company. All rights reserved.
 *
 * This software was developed by Webdetails and is provided under the terms
 * of the Mozilla Public License, Version 2.0, or any later version. You may not use
 * this file except in compliance with the license. If you need a copy of the license,
 * please go to http://mozilla.org/MPL/2.0/. The Initial Developer is Webdetails.
 *
 * Software distributed under the Mozilla Public License is distributed on an "AS IS"
 * basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. Please refer to
 * the license for the specific language governing your rights and limitations.
 */

var TemplateComponent = UnmanagedComponent.extend({

    defaults: {
      templateType: 'mustache',
      template: '<div>{{items}}</div>',
      rootElement: 'items',
      formatters: {},
      events: [],
      postProcess: function() {}
    },

    messages: {
      error: {
        noData: "No data available.",
        invalidTemplate: "Invalid template.",
        invalidTemplateType: "Invalid template type.",
        generic: "Invalid options defined. Please check the template component properties."
      },
      success: {},
      warning: {},
      info: {},
      config: {
        style: {
          success: {icon: "comment", type: "success"},
          error: {icon: "remove-sign", type: "danger"},
          info: {icon: "info-sign", type: "info"},
          warning: {icon: "exclamation-sign", style: "warning"}
        },
        template: "<div class='alert alert-<%=type%>' role='alert'>" +
        "   <span class='glyphicon glyphicon-<%=icon%>' aria-hidden='true'></span> " +
        "   <span> <%=msg%> </span>" +
        "</div>"
      }
    },

    init: function() {
      $.extend(true, this, Dashboards.ev(this.extendableOptions));
      $.extend(true, this.defaults, Dashboards.ev(this.options));
    },

    update: function() {
      _.bindAll(this, 'redraw', 'init', 'processData', 'renderTemplate', 'attachEvents', 'processMessage',
          'template', 'applyFormatter', 'applyAddin', 'processAddins');

      this.init();
      this.triggerQuery(this.chartDefinition, this.redraw);
    },

    redraw: function(data) {
      this.model = this.processData(data);
      var htmlResult = this.renderTemplate(this.template, this.templateType, this.model);
      var $target = this.placeholder();
      $target.empty().append(htmlResult);
      this.processAddins($target, data);
      if(!_.isEmpty(this.events)) {
        this.attachEvents(this.eventSelector, this.eventType, this.eventHandler);
      }
    },

    getUID: function() {
      return 'xxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    },

    applyFormatter: function(model, formatter, id) {
      var formatHandler = Dashboards.propertiesArrayToObject(this.formatters)[formatter];
      if(_.isFunction(formatHandler)) {
        return formatHandler.call(this, model, id);
      } else {
        return model;
      }
    },

    applyAddin: function(model, addin, id) {
      var UID = this.name + "_" + addin + this.getUID();
      this.addins = this.addins || [];
      this.addins.push({uid: UID, model: model, addin: addin, id: id});
      return '<div id="' + UID + '" class="' + addin + '"/>';
    },

    processAddins: function($target, data) {
      var myself = this;
      _.each(this.addins, function(elem) {
        myself.handleAddin(_.first($target.find('#' + elem.uid)), elem.model, elem.addin, data, elem.id);
      });
    },

    handleAddin: function(target, model, addInName, data, id) {
      var addIn = this.getAddIn("templateType", addInName);
      var state = {value: model, data: data, id: id};
      addIn.call(target, state, this.getAddInOptions("templateType", addIn.getName()));
    },

    // Transform qyeryResult.dataset to JSON format to be used in Templates
    processData: function(queryResult) {
      if(!_.isFunction(this.modelHandler)) {
        var hasData = queryResult.queryInfo != null ?
        queryResult.queryInfo.totalRows > 0 :
        queryResult.resultset.length > 0;

        if(hasData) {
          var data = [];
          _.each(queryResult.resultset, function(row) {
            data.push(_.extend({}, row));
          });
          var model = {};
          model[this.rootElement] = data;
          return model;
        } else {
          return "";
        }
      } else {
        return this.modelHandler(queryResult);
      }
    },

    // Apply template based on the result of a query. Creates a template based (mustache or underscore) view data object and apply columns format
    renderTemplate: function(template, templateType, model) {
      var html = "";
      var myself = this;
      if((!_.isEmpty(model))) {
        var helpers = {
          formatter: function(data, formatter, id) {
            return myself.applyFormatter(data, formatter, id);
          },
          addin: function(data, addin, id) {
            return myself.applyAddin(data, addin, id);
          }
        };

        try {
          switch(templateType.toUpperCase()) {
            case 'UNDERSCORE':
              model = _.defaults({}, model, Dashboards.propertiesArrayToObject(helpers));
              html = _.template(Dashboards.ev(template))(model);
              break;
            case 'MUSTACHE':
              Mustache.Formatters = helpers;
              html = Mustache.render(Dashboards.ev(template), model);
              break;
            default:
              html = this.processMessage('invalidTemplateType', 'error');
              break;
          }
        } catch(e) {
          html = this.processMessage('invalidTemplate', 'error');
        }
      } else {
        html = this.processMessage('noData', 'error');
      }
      return html;
    },

    // bind click to created cards
    attachEvents: function() {
      var myself = this;
      _.each(this.events, function(elem) {
        var separator = ',',
            handler = _.first(elem).split(separator),
            eventHandler = _.last(elem),
            event = _.first(handler).trim(),
            selector = _.last(handler).trim();
        if(_.isFunction(eventHandler)) {
          myself.placeholder(selector).on(event, _.bind(eventHandler, myself));
        }
      });
    },

    processMessage: function(message, type) {
      var completeMsg = {
        msg: this.messages[type][message] || message || "",
        type: this.messages.config.style[type].type || "info",
        icon: this.messages.config.style[type].icon || "comment"
      };
      Dashboards.log(completeMsg.msg, type);
      return _.template(this.messages.config.template)(completeMsg);
    }

  });

 

 

2.

pentaho的cdf-bootstrap-script-includes.js文件，通过resources.properties配置

 

script=js-legacy/lib/shims.js,js-legacy/lib/pen-shim.js,js-legacy/lib/modernizr/modernizr-2.8.3.js,js-legacy/lib/jQuery/jquery.js,js-legacy/lib/underscore/underscore.js,js-legacy/lib/backbone/backbone.js,js-legacy/lib/mustache/mustache.js,js-legacy/lib/moment/moment.js,js-legacy/lib/CCC/def.js,js-legacy/lib/base64.js,js-legacy/lib/CCC/jquery.tipsy.js,js-legacy/lib/CCC/protovis.js,js-legacy/lib/CCC/protovis-msie.js,js-legacy/lib/CCC/tipsy.js,js-legacy/lib/CCC/cdo.js,js-legacy/lib/impromptu/jquery-impromptu.js,js-legacy/lib/jQuery/jquery.ui.js,js-legacy/lib/corner/jquery.corner.js,js-legacy/lib/bgiframe/jquery.bgiframe.js,js-legacy/lib/jdMenu/jquery.jdMenu.js,js-legacy/lib/positionBy/jquery.positionBy.js,js-legacy/lib/blockUI/jquery.blockUI.js,js-legacy/lib/eventstack/jquery.eventstack.js,js-legacy/lib/i18n/jquery.i18n.properties.js,js-legacy/lib/jquery-ui-datepicker-i18n.js,js-legacy/MetaLayer/MetaLayer.js,js-legacy/lib/fancybox/jquery.fancybox.js,js-legacy/lib/dataTables/js/jquery.dataTables.js,js-legacy/lib/uriQueryParser/jquery-queryParser.js,js-legacy/lib/base/Base.js,js-legacy/wd.js,js-legacy/Dashboards.Startup.js,js-legacy/cdf-base.js,js-legacy/cccHelper.js,js-legacy/cggHelper.js,js-legacy/inputHelper.js,js-legacy/Dashboards.Main.js,js-legacy/Dashboards.Notifications.js,js-legacy/Dashboards.RefreshEngine.js,js-legacy/Dashboards.Query.js,js-legacy/Dashboards.Utils.js,js-legacy/Dashboards.Legacy.js,js-legacy/Dashboards.AddIns.js,js-legacy/Dashboards.Bookmarks.js,js-legacy/AddIns.js,js-legacy/addIns/coltypes.js,js-legacy/queries/coreQueries.js,js-legacy/queries/xmlaQueries.js,js-legacy/OlapUtils.js,js-legacy/lib/json.js,js-legacy/MetaLayer/MetaLayer.js,js-legacy/lib/captify/captify.js,js-legacy/lib/CCC/pvc-d1.0.js,js-legacy/components/core.js,js-legacy/components/maps.js,js-legacy/components/simpleautocomplete.js,js-legacy/lib/chosen/chosen.jquery.js,js-legacy/lib/select2/select2.js,js-legacy/lib/hynds/jquery.multiselect.js,js-legacy/lib/backboneTreemodel/backbone.treemodel.js,js-legacy/lib/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js,js-legacy/lib/sanitizer/lib/html4.js,js-legacy/lib/sanitizer/lib/uri.js,js-legacy/lib/sanitizer/sanitizer.js,js-legacy/components/filter/lib/baseevents.js,js-legacy/components/filter/js/TreeFilter/TreeFilter.js,js-legacy/components/filter/js/TreeFilter/defaults.js,js-legacy/components/filter/js/TreeFilter/Logger.js,js-legacy/components/filter/js/TreeFilter/models/Tree.js,js-legacy/components/filter/js/TreeFilter/models/SelectionTree.js,js-legacy/components/filter/js/TreeFilter/templates.js,js-legacy/components/filter/js/TreeFilter/views/scrollbar/AbstractScrollBarHandler.js,js-legacy/components/filter/js/TreeFilter/views/scrollbar/OptiScrollBarEngine.js,js-legacy/components/filter/js/TreeFilter/views/scrollbar/MCustomScrollBarEngine.js,js-legacy/components/filter/js/TreeFilter/views/scrollbar/ScrollBarFactory.js,js-legacy/components/filter/js/TreeFilter/views/Abstract.js,js-legacy/components/filter/js/TreeFilter/views/Root.js,js-legacy/components/filter/js/TreeFilter/views/Group.js,js-legacy/components/filter/js/TreeFilter/views/Item.js,js-legacy/components/filter/js/TreeFilter/controllers/Manager.js,js-legacy/components/filter/js/TreeFilter/controllers/RootCtrl.js,js-legacy/components/filter/js/TreeFilter/strategies/AbstractSelect.js,js-legacy/components/filter/js/TreeFilter/strategies/MultiSelect.js,js-legacy/components/filter/js/TreeFilter/strategies/SingleSelect.js,js-legacy/components/filter/js/TreeFilter/extensions/renderers.js,js-legacy/components/filter/js/TreeFilter/extensions/sorters.js,js-legacy/components/filter/js/TreeFilter/data-handlers/InputDataHandler.js,js-legacy/components/filter/js/TreeFilter/data-handlers/OutputDataHandler.js,js-legacy/components/filter/js/TreeFilter/addIns/addIns.js,js-legacy/components/filter/js/filter.js,js-legacy/components/ccc.js,js-legacy/components/input.js,js-legacy/components/table.js,js-legacy/components/template.js,js-legacy/components/Pentaho.XAction.js,js-legacy/components/Pentaho.JPivot.js,js-legacy/components/Pentaho.Analyzer.js,js-legacy/components/VisualizationAPIComponent.js,js-legacy/lib/CCC/compatVersion.js,js-legacy/components/navigation.js,js-legacy/components/Pentaho.Reporting.js

link=js-legacy/lib/CCC/tipsy.css,js-legacy/lib/jdMenu/jquery.jdMenu.css,js-legacy/lib/jdMenu/jquery.jdMenu.slate.css,js-legacy/lib/impromptu/jquery-impromptu.css,js-legacy/lib/fancybox/jquery.fancybox.css,js-legacy/cdf.css,js-legacy/lib/dataTables/css/jquery.dataTables_themeroller.css,js-legacy/lib/dataTables/css/jquery.dataTables.css,js-legacy/lib/captify/captify.css,js-legacy/lib/chosen/chosen.css,js-legacy/lib/select2/select2.css,js-legacy/lib/select2/select2-bootstrap.css,js-legacy/lib/hynds/jquery.multiselect.css,js-legacy/lib/mCustomScrollbar/jquery.mCustomScrollbar.min.css,js-legacy/components/filter/styles/filter.css,js/components/theme/TemplateComponent.css

 

 

 

3. 重新启动服务器，TemplateComponent就可以不选择RequireJS Support 的情况下，有效果了。OK了...