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.