Child pages
  • Specification (.spec file)

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The specification defines:

  • identifier infoinfo 
    -important code convention for "name": the provided string is of the form packagename, followed by a dash sign, followed by the componentname. The packagename is the name of the package the component is part of, and component name is simply the name of the component. Both packagename and componentname should be written in lowercase.
  • dependencies
  • definition of component logic, to support:
    • model properties
    • event handler
    • callable API
  • additional/child type info

Code Block
languagejs
titlespec file definition
{
	"name": "String simple name of the componentpackagename-componentname",
	"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"
		 }
 	  }
	}
}

...

Code Block
titledatafield.spec
{
	"name": "svyservoydefault-tabpanel",
	"displayName": "Tab Panel",
	"icon": "servoydefault/tabpanel/tabs.gif",
	"definition": "servoydefault/tabpanel/tabpanel.js",
	"serverscript": "servoydefault/tabpanel/tabpanel_server.js",
	"libraries": [{"name":"accordionpanel.css", "version":"1", "url":"servoydefault/tabpanel/accordionpanel.css", "mimetype":"text/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"
	  	}
	  }
	}
	 
}

...