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",
	"icon": "A reference to the icon shown in designer" ,
	"definition": "A reference to the js file of this component",
	"libraries": Array of js/css definitions (map with 'name'-the lib name, 'version'-the lib version, 'url'-the lib url, 'mimetype'-the lib mimetype, one of 'text/javascript' or 'text/css') that needs to be included for this component,
	"model": {
	  "propertyName": type description, optional default value
	},
	"handlers": {
	  "functionName": "function type"
	},
	"api": {
	  "functionName": signature description json
	},
	"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:

• styleclass: a list of css classes separated by space, it can define possible values that will be used in developer editor as suggestion - { type:'styleclass', values:['btn','btn-default','btn-lg','btn-sm','btn-xs']}

• 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

"functionName": {
        "returns": "string",
        "parameters":[
                                {
                                  "name":"start",
                                  "type":"int"
                                } 

                               { 

                                  "name":"end",
                                  "type":"int"
                                } 
                              ]
}

The  signature description should also be like the complex function type, describing the arguments and return type 

"functionName": {
        "returns": "string",
        "parameters":[
                                { 
                                  "name":"start",
                                  "type":"int"
                                } 

                               { 

                                  "name":"end",
                                  "type":"int"
                                } 
                              ]
}

Example

As an example we could have a Tab Panel that has a definition (this example does not contain the entire Tab Panel spec) like this

{
	"name": "svy-tabpanel",
	"displayName": "Tab Panel",
	"icon": "servoydefault/tabpanel/tabs.gif",
	"definition": "servoydefault/tabpanel/tabpanel.js",
	"serverscript": "servoydefault/tabpanel/tabpanel_server.js",
	"libraries": ["servoydefault/tabpanel/accordionpanel.css"],
	"model":
	{
	        "background" : "color", 
	        "borderType" : "border", 
	        "enabled" : {"type":"boolean", "default":true}, 
	        "fontType" : "font", 
	        "foreground" : "color", 
	        "horizontalAlignment" : {"type" :"int", "scope" :"design", "values" :[{"LEFT":2}, {"CENTER":0},{"RIGHT":4}],"default" : -1}, 
	        "location" : "point", 
	        "readOnly" : "boolean", 
	        "selectedTabColor" : "color", 
	        "size" : {"type" :"dimension",  "default" : {"width":300, "height":300}}, 
	        "styleClass" : { "type" :"styleclass", "scope" :"design", "values" :[]}, 
	        "tabIndex" : "int", 
	        "tabOrientation" : {"type" :"int", "scope" :"design", "values" :[{"default" :0}, {"TOP":1}, {"HIDE":-1}]}, 
	        "tabSeq" : {"type" :"tabseq", "scope" :"design"}, 
	        "tabs" : "tab[]", 
	        "transparent" : "boolean", 
	        "visible" : {"type":"boolean", "default":true} 
	},
	"handlers":
	{
	        "onChangeMethodID" : "function", 
	        "onTabChangeMethodID" : "function" 
	},
	"api":
	{
	        "addTab": {
	            "returns": "boolean",
				"parameters":[
								{                                                                 
 								"name":"form/formname",
								"type":"object []"
			                	},
             					{                                                                 
 								"name":"name",
								"type":"object",
			            		"optional":"true"
			            		}        
							 ]
	        },
	        "getMaxTabIndex": {
	            "returns": "int"
	        }
	},
	"types": {
	  "tab": {
	  	"model": {
	  		"name": "string",
	  		"containsFormId": "form",
	  		"text": "tagstring",
	  		"relationName": "relation",
	  		"active": "boolean",
	  		"foreground": "color",
	  		"disabled": "boolean",
	  		"imageMediaID": "string",
	  		"mnemonic": "string"
	  	}
	  }
	}
	 
}