Page History

This is the client-side .js file for the component. (running in browser)

It is the file declared in the .spec file under "definition".

The javascript file of the bean component can put those into its scope, every webcomponent is a 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 is describing describes the component itself . So the and it's behavior. The module and the one directive should be named like the bean (camel case notation so a servoydefault- prefix name will result in servoydefaultName). The bean web component's module should also include have a dependency to the 'servoy' module so that the bean web component can use the various servoy provided directives (starting with svy) and utilities.

Here is an example of such a .js file:

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
      },
      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();
    		 } 
    	 }
      },
      templateUrl: 'servoydefault/datatextfield/datatextfield.html',
      replace: true
    };
  })

It is a good practice to document your components, please note the jsdoc tags in the code above.The model and api objects are stored in its own scope and then inside the controller function the various api calls are implemented besides the onDataChangeCallback function

First you can see that the directive declares that it uses a few things that Servoy makes available to it:

• 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.

The onDataChangeCallback function in the example above is used as a callback of the ondatachange spec configuration for a dataprovider.

The template then /html for the component above looks like this:

<input type="text" style="width:100%; height:100%; background-color:{{model.background}};"
   ng-model="model.dataProviderID" title="{{model.toolTipText}}"
    svy-autoapply  svy-format="model.format"/>

Where There the various properties are then taken from the model for specific html tagsattributes. You can also see some servoy-provided directives used (the ones starting with "svy-").

A handler call (handlers.x()) to the server does get returns a promise back (http://docs.angularjs.org/api/ng.$q) where to which the webcomponent could can register a callback on - so that an event/handler that executes on the server can return a value to the webcomponents web component's call.

ServoyApi

Anchor
servoyApi servoyApi

The servoyApi is a Servoy specific api which can be used by web components to interact with the server. It must be declared in the private scope of the component.

...

$scope.radioClicked = function()
{
	$scope.model.dataProviderID = $scope.model.valuelistID[0].realValue;
	$scope.svyServoyapi.apply('dataProviderID')
}

$scope.mycallback = function(name,type) 
{
    return "something";
}

 $scope.servoyApi.callServerSideApi("mycallback",["string",1])
.then(function(retValue) {
   console.log(retValue);   
 });

function setFormVisible(tab,event) 
{
	if (tab.containsFormId) $scope.svyServoyapi.formWillShow(tab.containsFormId,
       tab.relationName);

$scope.select = function(tab) 
{
    if (tab && tab.containedForm && !tab.active)
    {
		//first hide the previous form
		var promise =  $scope.svyServoyapi.hideForm( 
			$scope.model.tabs[$scope.model.tabIndex -1]);
		promise.then(function(ok) 
		{
			$scope.model.tabIndex = getTabIndex(tab)+1;
			//show the selected form
			$scope.svyServoyapi.formWillShow(			   
            tab.containedForm, tab.relationName);
    	    tab.active = true;
		})    		  
   	}	  
}

<div ng-include="svyServoyapi.getFormUrl(myFormName)" ></div>

 <input ng-focus="svyServoyApi.startEdit('dataproviderID')"/>