Web Components: model property type "function"?

[sergei.sheinin]

In integrating web component "TinyMCE" I came across a property type that is "function" according to that component API:

Code: Select all

tinymce.init({
  toolbar: 'mybutton',
  setup: function (editor) {
    editor.addButton('mybutton', {
      text: 'My button',
      icon: false,
      onclick: function () {
        editor.insertContent('&nbsp;<b>It\'s my button!</b>&nbsp;');
      }
    });
  },
...
}


Above there are two properties: toolbar and setup. It's all clear with "toolbar", I define it as a string parameter in .spec file:

Code: Select all

"model": {
    "toolbar": {
      "type": "string",
      "default": "undo redo | etc, etc..."
    },
...
}


What is the right way to configure a property of type "function"? I didn't find a mention of it in the manual. Moreover the aforementioned "setup" function can only be called at time of initialization. It doesn't appear possible to call "tinymce.init({})" after the component has been initialized.


Any suggestions?

[sergei.sheinin]

I was able to find a workaround for this. It's very specific to TinyMCE component and one of its features. If interested I may post my solution here.

[patrick]

We are always interested in solutions . Please post!

We also hope that you make the component you are working on available to the community when finished!

[tgs]

+1

[sergei.sheinin]

The workaround was quite simple. A function is executed in component controller upon a condition based on setting of a model property:

Code: Select all

controller: function($scope, $element, $attrs, $window) {

    $scope.tinymceOptions = {
            .....
           setup : function ( editor ) {
              
             if (!$scope.model.to_execute_function) return
              else
                 ... function logic..
            }
   }


So for example let's specify a model parameter "to_execute_function": {type:"boolean"}. Thus we don't need to provide the function body in a web component's .spec file. Instead it's written in plain JavaScript with a condition that decides whether to run it or not. I think future versions of Servoy will need to support model parameters like "setup" : {"function":"<reference to function body>"} to make it more straightforward while my workaround seems a bit of a hack.

I'm new to Servoy web components while there is little documentation on types of model parameters NG Client supports. Imo Servoy should support non-basic model parameters of type "function", "array[]" and "json". Unless I'm missing it those types are not yet supported while they are widely used in NG dev. Are there plans to include support for these? In particular support of "array[]", "json" and "array[json]" would be very welcome.

For example like so:

Code: Select all

"model":{
  "my_param": {
      "type" : "array[json]",
      "default": {
            "key": "_mykey",
            "value": "_myvalue",
             "etc": "_myetc"
         }
    }
  }


And properties window in Eclipse would then enable developers to add array elements of "my_param" one-by-one.

[patrick]

There is support for all of that. function is "function", array is "string[]", "int[]", ... or even "yourOwnType[]", json is "object". Have you read this https://wiki.servoy.com/display/DOCS/Property+Types and its sub pages?

[Gabi Boros]

Servoy's default 'Html Area' component is also based on TinyMCE, maybe it can be useful to have a look how it is used there https://github.com/Servoy/servoy-client ... t/htmlarea

[sergei.sheinin]

There is support for all of that. function is "function", array is "string[]", "int[]", ... or even "yourOwnType[]", json is "object". Have you read this https://wiki.servoy.com/display/DOCS/Property+Types and its sub pages?

It worked beautifully! My mistake was in typing "array[]" in model parameter type.

[patrick]

It worked beautifully!

It's Servoy