Page History
...
| 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"
}
}
} |
...
A component or service can have a serverside part, so logic is executed on the server, in the spec file this is configured like:
| Code Block | ||||
|---|---|---|---|---|
| ||||
"serverscript": "servoydefault/tabpanel/tabpanel_server.js", |
That file has that also the implementation of the api that is defined in the spec file, so you can handle complex things server side, this can be used as a performance enhancement so that the api call doesn't have to go to the client to execute at the moment the call comes from servoy code.
The api call that is executed serverside could for example just update some models of the component/service, these will be then send as one thing when the servoy code is done.
Serverside code is build up the same as the clientside so you have $scope object with model and api objects. On that api object you have to define then the api methods that you want to execute server side. An example is the default tabpanel
What can also be done (servoy 8.0.2+) is that clientside scripting can call the server part. These function has to be defined on the $scope object, as an example:
| Code Block | ||||
|---|---|---|---|---|
| ||||
$scope.mycallback = function(name,type) {
return "something";
} |
Since Servoy 8.2 you must also define these functions in a special Api category of the spec, internalApi. In prior versions define these in api section instead.
| Code Block | ||||
|---|---|---|---|---|
| ||||
"internalApi":
{
"mycallback" :{
"returns": "string",
"parameters":[
{
"name":"name",
"type":"string"
},
{
"name":"type",
"type":"string"
}
]
}
} |
then a component can use the servoyapi to call this
| Code Block | ||||
|---|---|---|---|---|
| ||||
// assign to the scope the svy-servoyapi
scope: {
model: '=svyModel',
servoyApi: '=svyServoyapi'
},
// in the controller or link functions you can use that then
$scope.servoyApi.callServerSideApi("mycallback",["test", "1"]).then(function(retValue) {
console.log(retValue);
}); |
the callServerSideApi wants to have the function name and an array of arguments, it returns a promise of angular where the then function will give you the return value of the callback.
For a service you can use the $services service to do the same thing. the only thing extra is that you have to also give the servicename itself:
| Code Block | ||||
|---|---|---|---|---|
| ||||
$services.callServerSideApi("myservicename","mycallback",["test", "1"]).then(function(retValue) {
console.log(retValue);
}); |
Internal API can also be used for API that is defined on client, but can only be called from server side scripting. This API shouldn't be called from Servoy Developer scripting and won't show in code completion.
Inside the server side scripting file of a component/service you can log messages using "console", not application,output. The output will appear in developer's console view as well as in the application server log file (depending on configured logging levels). For example:
...
| language | js |
|---|---|
| title | Logging in component/service server side scripting file |
...
See Server Side Scripting for more info about server side scripting.
Palette categories
Web Components are organized in component packages. The palette of the WYSIWYG editor shows components grouped by package name. To further group components from the same package, the property 'categoryName' can be used. 'categoryName' is a property that each component can specify in its spec file. The palette then displays components belonging to the same category grouped under the specified 'categoryName'.
...
Overview
Content Tools
Activity