A (form) designer and runtime environment need component meta data to be able to handle a component.

Definition

A simple metadata specification is expressed in json format. (called the .spec definition file)

The specification defines:

• identifier info
• dependencies
• definition of component logic, to support:
  • 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
	 }
   }
}

A WebComponent specifies all its properties under the model, all the events under handlers and api has the javascript api the webcomponent has that the server can call.

Types are defining internal types that are used by this webcomponent for one or more of its properties.  (for example a tabpanel component has a tab type that describes one tab inside the tabpanel). They have the same support as under model:{}, there is no support for api or handlers on those types again because they are just container objects that push data to the webcomponent from the server.

Besides that the type description can be a simple (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 function description in the handlers section can be just "function" or a more complex type describing the arguments and return type {parameters: [{start: 'int'}, {end: 'int'}], returns: 'string'}

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'}]
	}
}

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'