Client side logic (.js file)

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

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

It is a good practice to document your components, please note the jsdoc tags in the code above. Servoy developer will use that JSDoc information from either the component client-side scripting file or from the component server-side scripting file to show tooltips in Solution Explorer, code editor and so on - for the API functions declared in it's .spec file. Some useful tags that can be inserted in jsdoc: @example (used when moving sample code from solution explorer), @deprecated. For information about documenting model properties and handlers please have a look at Documenting what properties do / Documenting handlers and handler templates.

First you can see the directive declaring that it uses a few things Servoy provides:

• 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/html for the component above looks like this:

<input type="text" style="width:100%; height:100%; background-color:{{model.background}};"
   ng-model="model.dataProvider" 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-").

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

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.

angular.module('mypackageComponent',['servoy']).directive('mypackageComponent', function() {  
    return {
      restrict: 'E',
      scope: {
    	  model: "=svyModel",
          svyServoyapi: "="
      },

The servoyApi provides the following methods:

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

"internalApi":
 {
     "mycallback": {
        "returns": "string",
        "parameters": [
            { "name":"name", "type":"string" },
            { "name":"type", "type":"string" }
        ]
    }
}

$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;
		})    		  
   	}	  
}

$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], 
           null, null,tab.containedForm, tab.relationName);
		promise.then(function(ok) 
		{
			$scope.model.tabIndex = getTabIndex(tab)+1;
			//show the selected form
    	    tab.active = true;
		})    		  
   	}	  
}

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

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