Fork me on GitHub

Services

Services for the client application are located in a directory public/js/app/services/.

The client application has different types of services:

  1. Enter the date in a form field, Datepicker.class.js
  2. Validation of the data in the form, FormValidation.class.js
  3. Highlighting code, Highlight.class.js
  4. Input format, MaskInput.class.js

Adding services to the client

There are three variables to add client services:

  1. List of service classes window.BSA.ScriptResources = ['FormValidation', 'Datepicker', ...]
  2. Service parameters object window.BSA.ScriptParams = {FormValidation:[{params-1},{params-2}, ...], ...}
  3. List of objects service window.BSA.ScriptInstances = {FormValidation:[Obj1, Obj2, ...], ...}

These variables are defined in the file app/Views/Include/add.resources.html.twig.

<!-- Add script resources -->
<script type="text/javascript">
    if ( undefined === window.BSA) {
        window.BSA = {};
        // List script resources
        window.BSA.ScriptResources = [];
        // List script parameters
        window.BSA.ScriptParams = {};
        // List object instances 
        window.BSA.ScriptInstances = {};
        ...
    }
</script> 

The code to add classes of services and their parameters can be viewed below:

File app/Views/Controller/blog/new.html.twig.

<!-- Add Resources (required) -->
...
<script type="text/javascript">
    BSA.ScriptResources.push('FormValidation');
    addScriptParams('FormValidation',
            {
                form: 'form[name="post"]',
                rules: {
                    "post[created]": {
                        required: true
                    },
                    "post[title]": {
                        required: true,
                        minlength: 5
                    },
                    "post[body]": {
                        required: true
                    }
                }
            });
    ...        
</script>

Function addScriptParams defined in the file app/Views/Include/add.resources.html.twig.

To create an instance of service object and store it in the variable Window.BSA.ScriptInstances used class method RegRunOnLoad, which is defined in service classes. Perform these methods in function init of class App public/js/app/app.js.

Sample code is shown below:

...
// Add script resources 
if (undefined !== window.BSA) {
    _.each(BSA.ScriptResources, function (resource) {
        require([resource], function (res) {
            // Create resource object 
            if (res && res.RegRunOnLoad) {
                res.RegRunOnLoad();
            }
        });
    });
}
...

With the function require downloaded the service itself and all of its dependencies, defined in the file public/js/main.js.

Refer to the instance of the service object can be like so:

var oFormValidation1 = BSA.ScriptInstances['FormValidation'][0];
oFormValidation1.Validate();

Structure services

Service classes are created using Class.extend public/js/lib/Extend.class.js. More details can be found here

Common uses:

 Class.extend(props)
 Class.extend(props, staticProps)
 Class.extend([mixins], props)
 Class.extend([mixins], props, staticProps)

For example the service structure public/js/app/services/Highlight.class looks like that:

define(['jquery'], function ($) {
    var Highlight = Class.extend({
        init: function (params) {
            try {
            ...
            } catch (ex) {
                if (ex instanceof Error) {
                    app.sys.onFailure(ex.name + ": " + ex.message);
                }
            }
        }
    }, {
        RegRunOnLoad: function () {
        ...
        }
    });
    return Highlight;
});

Here init is a function of initializing the object being created, and RegRunOnLoad is the class (static) function to create an object instance, and placing it in a variable BSA.ScriptInstances

BSA.ScriptInstances['Highlight'] = [new Highlight(param)];