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...
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.