Webcomponents need meta data to be able to function in a (form) designer

On the web are some specs arising like:

http://www.openajax.org/member/wiki/OpenAjax_Metadata_1.0_Specification_Widget_Overview (thanks to Paul for pointing us to this one)

But i think this overly complex when using angular directives... so we created a spec definition file (.spec) with the following properties

name: String simple name of the component
displayName: String more descriptive name that is shown in the designer
definition: A reference to the js file of this component
model: {
  propertyName: type description
},
handlers: {
  functionName: function type
},
api: {
  functionName: signature description
},
types: {
   typename: {
     model: {
        propertyName: type description
	 }
   }
}

Type description can be a simple type like:

• string: A plain string property 

• tagstring: A string that can have tags inside it (so it will be processed by servoy to have tags replaced before it gets to the client)

• color: A color property (#FFFFFF)

• point: A point representation \{x:10,y:20\}

• dimension: A dimension representation \{width:100,height:200\}

• insets:

• font:

• border:

• boolean: true/false

• scrollbars:

• byte: 

• double: A floating point number

• float: A floating point number

• int: A number

• long: A number

• short: A number

• values: Fixed values can have real/display values.

• dataprovider: Servoy maps this on a record or scope variable, This can be a complex object: \{ 'type':'dataprovider', 'ondatachange': \{ 'onchange':'onDataChangeMethodID', 'callback':'onDataChangeCallback'\}\} if support for ondatachange is needed.

• valuelist: Servoy maps this on a valuelist referene

• form: This property will hold a url point to a form (like a tab in a tabpanel)

• format: format property, this must be specified with a complex object like: \{'for':'dataProviderID' ,'type':'format'\} so that we know which dataprovider property must be used to map this format property on

• relation: Servoy maps this on a relation reference

• media:

• date: A date type property

For example if our field component can be expressed in html as:

<datafield dataProviderID="record.order_id" toolTipText="hello world" onAction="true"/>

which is expanded by angular to real html.

We only need to know the list of all parameters/properties and which types they are, so a beaninfo spec. (json) as below would suffice:

name: 'datafield',
displayName: 'Data Field',
definition: 'servoydefault/datafield/datafield.js',
properties: {
	dataProviderID: "dataprovider",
	toolTipText: "tagstring",
	bgColor: "color",
	onAction: "function",
    direction: {
		type: 'values',
		values [ { real: 1, display: 'left' }, { real: 2, display: 'right' }  ]
		default: 0
	}
 }

Basically the stuff our content spec describes for element types.

Event handlers are pushed via handlers, for exanmple databutton.html:

<input style="width:100%; height:100%; background-color:{{model.background}};" value="{{model.dataProviderID}}" type="button" title="{{model.toolTipText}}"  ng-click="handlers.onActionMethodID($event)" />

The handler will return a promise object which can be used to get the value returned by the method on the server:

      controller: function($scope, $element, $attrs) {
          $scope.callMyHandler = function(ev) {
              var promise = this.handlers.onMyEvent(ev)
              promise.then(function(ret) {
                  alert('Success: ' + ret);
                }, function(reason) {
                  alert('Failed: ' + reason);
                }, function(update) {
                  alert('Got notification: ' + update);
                });
          }
      }

For the prototype we could even generate these for all default "servoy" components, like datafield, databutton,etc.