Page History
...
It is the file declared in the .spec file under "definition".
The javascript file of the bean component is heavily linked to the specification and template of that component. Every web component is an angular module of its own, with at least 1 directive that describes the component itself and it's behavior. The module and the one directive should be named like the bean (camel case notation so a servoydefault-name will result in servoydefaultName). The web component's module should also have a dependency to the 'servoy' module so that the web component can use the various servoy provided directives (starting with svy) and utilities.
...
| Code Block |
|---|
angular.module('servoydefaultTextfield',['servoy']).directive('servoydefaultTextfield', function() {
return {
restrict: 'E',
transclude: true,
scope: {
model: "=svyModel",
api: "=svyApi",
handlers: "=svyHandlers",
svyServoyapi: "=" // only needed if you really need access to this servoy provided API for more control
},
controller: function($scope, $element, $attrs) {
// fill in the api defined in the spec file
$scope.api.onDataChangeCallback = function(event, returnval) {
if(!returnval) {
$element[0].focus();
}
},
/**
* Set the focus on the textfield.
*/
$scope.api.requestFocus = function() {
$element[0].focus()
},
/**
* Get the selected text.
* @return {string} the text selected in the field.
*/
$scope.api.getSelectedText = function() {
var elem = $element[0];
return elem.value.substr(elem.selectionStart, elem.selectionEnd - elem.selectionStart);
}
/**
* Set the selected text.
* @param {int} start the start index in the text
* @param {int} end the end index in the text
*/
$scope.api.setSelection = function(start, end) {
var elem = $element[0];
if (elem.createTextRange) {
var selRange = elem.createTextRange();
selRange.collapse(true);
selRange.moveStart('character', start);
selRange.moveEnd('character', end);
selRange.select();
elem.focus();
} else if (elem.setSelectionRange) {
elem.focus();
elem.setSelectionRange(start, end);
} else if (typeof elem.selectionStart != 'undefined') {
elem.selectionStart = start;
elem.selectionEnd = end;
elem.focus();
}
}
$scope.onClick = function(event){
if ($scope.model.editable == false && $scope.handlers.onActionMethod) {
$scope.handlers.onActionMethod(event);
}
}
},
templateUrl templateUrl: 'servoydefault/datatextfield/datatextfield.html',
replace: true
};
}) |
...
- svyModel: this is the object that contains all properties that the .spec file declares in it's "model" section.
- svyApi: this is the object that the web component .js file must populate with all the client-side API functions that the .spec file declares in it's "api" section. Some apis can also be implemented in serverside scripting, see "Serverside scripting" section of the Specification page.
- svyHandlers: this is the object that contains all handlers that the .spec file declares in it's "handlers" section. It is pre-populated by Servoy, so the handlers are already there, ready to be used.
- svyServoyapi: this is an API that Servoy provides to the component - if the component needs to do manual 'apply' or other operations. See the servoyApi section below.
...
| Code Block |
|---|
<input type="text" style="width:100%; height:100%; background-color:{{model.background}};"
ng-model="model.dataProviderIDdataProvider" title="{{model.toolTipText}}"
svy-autoapply svy-format="model.format" ng-click="onClick($event)"/> |
There the various properties are taken from the model for specific html attributes. You can also see some servoy-provided directives used (the ones starting with "svy-").
...
Method | Parameters | Description | ||||||||||||||||||
apply | propertyName –the name of the property of type dataprovider | Pushes a changed dataprovider value of the component to the server (sets it in the actual record). So this is the only way to acutally make the server's data aware of browser-side changes to 'dataprovider' typed properties. It is used internally by the svy-autoapply directive, but it can also be called directly by the web component itself. For example the radio button manually pushes the new value to the server when the radio is clicked (without using svy-autoapply):
| ||||||||||||||||||
callServerSideApi | methodName –the name of the serverside method to call args –the arguments of the serverside method | Used on the client side to call a function which is defined in the server side api of the component. It returns a promise of angular where the then function will give you the return value of the callback.
In the controller or link function of the component, "mycallback" can be invoked via callServerSideApi:
| ||||||||||||||||||
formWillShow | formname – the name of the form which will be shown relationname – the name of the relation (optional) formIndex – the formIndex in the tabpanel (optional) | Prepare the form for showing. Example switching tabs in the tabpanel component:
| ||||||||||||||||||
hideForm | formname – the name of the form to hide relationname –the name of the relation (optional) formIndex –the formIndex in the tabpanel (optional) | Hides the form. The outcome of the returned angular promise is a boolean, which is true if the form was hidden. Used by the tabpanel to hide the previously selected tab.
| ||||||||||||||||||
getFormUrl | formName | Return the URL of a form. It can be used together with ng-include to include a form in the component template:
| ||||||||||||||||||
startEdit | propertyName –the name of the property which is edited | Signal that the editing of a property has started, usually at focus gained. It is automatically used internally by the svy-autoapply directive. In case svy-autoapply is not used, startEdit can be called manually by the component itself to notify the server that the record should go into edit mode (by giving the name of the model 'dataprovider' typed property):
|
Overview
Content Tools
Activity