Page History
A (WYSIWYG) form ) designer and runtime environment need needs component meta data to be able to handle a component.
| Info |
|---|
On the web are some specifications arising like: http://www.openajax.org/member/wiki/OpenAjax_Metadata_1.0_Specification_Widget_Overview (thanks to Paul for pointing us to this one) At time of writing these seem overly complex when using angular directives... |
components. This meta data is expressed in a specification.
Definition
A simple metadata specification is expressed in json format. (called the .spec definition file)
The specification defines:
identifier info (component name)
Info Name convention: 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
In a json format:
| Code Block | ||||
|---|---|---|---|---|
| ||||
{
"name": "String packagename-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"
}
}
}
} |
...
The function description in the handlers section can be just "function" or a more complex type describing the arguments and return type
| Code Block |
|---|
"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
| Code Block |
|---|
"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
...
Overview
Content Tools
Activity