Page History
A (WYSIWYG) form designer needs component meta data to be able to handle components. This meta data is expressed in a specification.
Definition
A simple metadata specification is expressed in json format. (called the .spec definition file)
...
"blockEventProcessing" is optional and not needed in almost all cases. It defaults to true. When it is set to false, Servoy will expect that this API call will be long-running (so it will not time out) and at the same time it will allow other events to be handled by the event dispatcher while waiting for the return value. This is helpful for example if a component would have an API call like "askForSomeValue(customForm)" which shows a modal dialog containing a form and returns a value. That API call has to wait for the return value an indefinite amount of time without blocking other events from being dispatched.
Data synchronization
| Anchor | ||||
|---|---|---|---|---|
|
Data modifications are automatically propagated from server to client.
...
Note that in Servoy, data-provider properties are synchronized using svy-apply svy-autoapply, for these properties pushToServer should be set to allow.
Tags
Properties can be configured with special tags that may be interpreted by the deployment environment.
...
In the Outline View, Custom Type objects have the name of the type as lables. The showInOutlineView:true tag can be added to any property definition in order to append the design time value of that property to the label of the custom type object in the Outline View.
Security
Components can be protected using two special security types: visible and protected.
...
Similarly, when a form or component is marked invisible, its data should not be sent to the client since it may contain sensitive data.
Protecting properties
Protecting properties (of type protected)are used to protect an entire component or specific properties or handlers.
...
Protecting properties themselves can never be modified from the client.
Visibility properties
Visibility properties (of type visible) are similar to protecting properties. They are protecting the component and also hide the data from the client if the component is not visible.
...
Visibility properties themselves can never be modified from the client.
Enable properties
Similarly to properties of type visible , the properties of type enabled are also protecting properties, so they can never be modified from the client.
...
It is important to use type enabled if we want the value from the parent container (i.e. form, portal) to be pushed to the component. For instance if a portal is disabled, then all the components from the portal which have a property of type enabled will also be disabled.
Container security
Protecting and visibility properties on containers will protect the container and also components inside the comtainer.
Readonly/Findmode
Servoy has 2 special controller/foundset based properties where a component also can be notified for.
...
When the find mode changes the boolean value of your property will also change. This way you can react to a form/foundset going into find mode. Like resetting a specific format, allowing any kind of input.
Example
| Anchor | ||||
|---|---|---|---|---|
|
As an example we could have a Tab Panel that has a definition like: (note: this example does not contain the entire Tab Panel spec)
| Code Block | ||||
|---|---|---|---|---|
| ||||
{
"name": "servoydefault-tabpanel",
"displayName": "Tab Panel",
"version": 1,
"icon": "servoydefault/tabpanel/tabs.gif",
"definition": "servoydefault/tabpanel/tabpanel.js",
"serverscript": "servoydefault/tabpanel/tabpanel_server.js",
"libraries": [{"name":"accordionpanel", "version":"1", "url":"servoydefault/tabpanel/accordionpanel.css", "mimetype":"text/css"}],
"model":
{
"background" : "color",
"borderType" : {"type":"border","stringformat":true},
"enabled" : { "type": "enabled", "blockingOn": false, "default": true },
"fontType" : {"type":"font","stringformat":true},
"foreground" : "color",
"horizontalAlignment" : {"type" :"int", "tags": { "scope" :"design" }, "values" :[{"LEFT":2}, {"CENTER":0},{"RIGHT":4}],"default" : -1},
"location" : "point",
"readOnly" : "protected",
"selectedTabColor" : "color",
"size" : {"type" :"dimension", "default" : {"width":300, "height":300}},
"styleClass" : { "type" :"styleclass", "tags": { "scope" :"design" }, "values" :[]},
"tabIndex" : { "type": "object", "pushToserver": "shallow" },
"tabOrientation" : {"type" :"int", "tags": { "scope" :"design" }, "values" :[{"default" :0}, {"TOP":1}, {"HIDE":-1}]},
"tabSeq" : {"type" :"tabseq", "tags": { "scope" :"design" }},
"tabs" : {"type":"tab[]", "droppable":true},
"transparent" : "boolean",
"visible" : "visible"
},
"handlers":
{
"onChangeMethodID" : "function",
"onTabChangeMethodID" : "function"
},
"api":
{
"addTab": {
"returns": "boolean",
"parameters":[
{
"name":"form/formname",
"type":"object []"
},
{
"name":"name",
"type":"object",
"optional":true
},
{
"name":"tabText",
"type":"object",
"optional":true
},
{
"name":"tooltip",
"type":"object",
"optional":true
},
{
"name":"iconURL",
"type":"object",
"optional":true
},
{
"name":"fg",
"type":"object",
"optional":true
},
{
"name":"bg",
"type":"object",
"optional":true
},
{
"name":"relatedfoundset/relationname",
"type":"object",
"optional":true
},
{
"name":"index",
"type":"object",
"optional":true
}
]
},
"getMaxTabIndex": {
"returns": "int"
},
"getMnemonicAt": {
"returns": "string",
"parameters":[
{
"name":"i",
"type":"int"
}
]
},
"getSelectedTabFormName": {
"returns": "string"
},
"getTabBGColorAt": {
"returns": "string",
"parameters":[
{
"name":"unnamed_0",
"type":"int"
}
]
},
"getTabFGColorAt": {
"returns": "string",
"parameters":[
{
"name":"i",
"type":"int"
}
]
},
"getTabFormNameAt": {
"returns": "string",
"parameters":[
{
"name":"i",
"type":"int"
}
]
},
"getTabNameAt": {
"returns": "string",
"parameters":[
{
"name":"i",
"type":"int"
}
]
},
"getTabRelationNameAt": {
"returns": "string",
"parameters":[
{
"name":"i",
"type":"int"
}
]
},
"getTabTextAt": {
"returns": "string",
"parameters":[
{
"name":"i",
"type":"int"
}
]
},
"isTabEnabled": {
"returns": "boolean",
"parameters":[
{
"name":"unnamed_0",
"type":"int"
}
]
},
"isTabEnabledAt": {
"returns": "boolean",
"parameters":[
{
"name":"i",
"type":"int"
}
]
},
"removeAllTabs": {
"returns": "boolean"
},
"removeTabAt": {
"returns": "boolean",
"parameters":[
{
"name":"index",
"type":"int"
}
]
},
"setMnemonicAt": {
"parameters":[
{
"name":"index",
"type":"int"
},
{
"name":"text",
"type":"string"
}
]
},
"setTabBGColorAt": {
"parameters":[
{
"name":"unnamed_0",
"type":"int"
},
{
"name":"unnamed_1",
"type":"string"
}
]
},
"setTabEnabled": {
"parameters":[
{
"name":"unnamed_0",
"type":"int"
},
{
"name":"unnamed_1",
"type":"boolean"
}
]
},
"setTabEnabledAt": {
"parameters":[
{
"name":"i",
"type":"int"
},
{
"name":"b",
"type":"boolean"
}
]
},
"setTabFGColorAt": {
"parameters":[
{
"name":"i",
"type":"int"
},
{
"name":"s",
"type":"string"
}
]
},
"setTabTextAt": {
"parameters":[
{
"name":"index",
"type":"int"
},
{
"name":"text",
"type":"string"
}
]
}
},
"types": {
"tab": {
"name": "string",
"containsFormId": "form",
"text": "tagstring",
"relationName": "relation",
"active": "boolean",
"foreground": "color",
"disabled": "boolean",
"imageMediaID": "media",
"mnemonic": "string"
}
}
} |
Serverside scripting
| Anchor | ||||
|---|---|---|---|---|
|
A component or service can have a serverside part, so logic is executed on the server, in the spec file this is configured like:
...
Overview
Content Tools
Activity