Webcomponents need meta data to be able to function in a (form) designer and runtime environment.

...

...

...

Definition

An simple meta data specification can be expressed in json format. (spec definition file ( .spec) with the following properties 

The specification defines:

• identifier info
• dependencies
• definition of component logic
  • model properties
  • event handler
  • callable API
• additional/child type info
  
  

name: String simple name of the component
displayName: String more descriptive name that is shown in the designer
libraries: Array of js/css references that needs to be included for this component,
palette_icon: A reference to the icon shown in designer 
definition: A reference to the js file of this component
model: {
  propertyName: type description, optional default value
},
handlers: {
  functionName: function type
},
api: {
  functionName: signature description
},
types: {
   typename: {
     model: {
        propertyName: type description
	 }
   }
}

...

Besides that the type description can be a simple type (property) types 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

...

The  signature description should also be like the complex function type, describing the arguments and return type {parameters: [{start: 'int'}, {end: 'int'}], returns: 'string'} 

Example

As an example we could have a textfield that has a definition like this

name: 'svy-textfield',
displayName: 'Text input',
definition: 'servoydefault/textfield/textfield.js',
libraries: ['servoydefault/textfield/formatting.js','//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'],
model:
{
	toolTipText: 'string',
	background: 'color',
    dataProviderID: { 'type':'dataprovider', 'ondatachange': { 'onchange':'onDataChangeMethodID', 'callback':'onDataChangeCallback'}},
    format: {'for':'dataProviderID' ,'type':'format'}, // value will be just the format string as a whole
},
handlers:
{
    onDataChangeMethodID: 'function',
},
api:
{
    requestFocus: { },
	getSelectedText: {
	    returns: 'string'
	},
	setSelection: {
	    parameters: [{start: 'int'}, {end: 'int'}]
	}
}

So In this example it has a simple properties like toolTipText (a string) and background (a color) and a dataproviderID property that is of type 'dataprovider' which has an ondatachange that points to the handler onDataChangeMethodID function and the textfield wants to have a callback function called that is called 'onDataChangeCallback'

That The field component template html will be expressed in the form html like this:

<svy-textfield name="dataFieldFormatNumber" svy-model="model.dataFieldFormatNumber" svy-api="api.dataFieldFormatNumber" svy-handlers="handlers.dataFieldFormatNumber" svy-apply="handlers.dataFieldFormatNumber.svy_apply" svy-servoyApi="handlers.dataFieldFormatNumber.svy_servoyApi"/>

...