Page History
...
Code Block | ||||
---|---|---|---|---|
| ||||
name: String simple name of the component
displayName: String more descriptive name that is shown in the designer
libraries: Array of js/css references that needs to be included for this component,
palette_icon: A reference to the icon shown in designer
definition: A reference to the js file of this component
model: {
propertyName: type description
},
handlers: {
functionName: function type
},
api: {
functionName: signature description
},
types: {
typename: {
model: {
propertyName: type description
}
}
} |
...
As an example we could have a datatextfield textfield that has a definition like this
Code Block | ||
---|---|---|
| ||
name: 'datatextfieldsvy-textfield', displayName: 'Text input', definition: 'servoydefault/datatextfield/datatextfield/textfield/textfield.js', libraries: ['servoydefault/textfield/formatting.js','//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'], model: { toolTipText: 'string', background: 'color', dataProviderID: { 'type':'dataprovider', 'ondatachange': { 'onchange':'onDataChangeMethodID', 'callback':'onDataChangeCallback'}}, format: {'for':'dataProviderID' ,'type':'format'}, // value will be just the format string as a whole }, handlers: { onDataChangeMethodID: 'function', }, api: { requestFocus: { }, getSelectedText: { returns: 'string' }, setSelection: { parameters: [{start: 'int'}, {end: 'int'}] } } |
...
That field component will be expressed in the form html like this
Code Block |
---|
<datatextfield<svy-textfield name="dataFieldFormatNumber" svy-model="model.dataFieldFormatNumber" svy-api="api.dataFieldFormatNumber" svy-handlers="handlers.dataFieldFormatNumber" svy-apply="handlers.dataFieldFormatNumber.svy_apply" svy-servoyApi="handlers.dataFieldFormatNumber.svy_servoyApi"/> |
...
So the javascript file of the bean component can put those into its scope:, every webcomponent is a angular module of its own, with at least 1 directive that is describing the component itself. So the module and the one directive should be named like the bean (camel case notation so an svy- prefix will result in svyName). The bean module should also include the servoy module so that the bean can use the various servoy directives (starting with svy)
Code Block |
---|
servoyModuleangular.module('svyTextfield',['servoy']).directive('datatextfieldsvyTextfield', function($servoy) { return { restrict: 'E', transclude: true, scope: { model: "=svyModel", api: "=svyApi" }, 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(); } }, $scope.api.requestFocus = function() { $element[0].focus() }, $scope.api.getSelectedText = function() { var elem = $element[0]; return elem.value.substr(elem.selectionStart, elem.selectionEnd - elem.selectionStart); } $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(); } } }, templateUrl: 'servoydefault/datatextfield/datatextfield.html', replace: true }; }) |
...
Overview
Content Tools
Activity