Services
Services for the client application are located in a directory public/js/app/services/
.
The client application has different types of services:
- Enter the date in a form field,
Datepicker.class.js
- Validation of the data in the form,
FormValidation.class.js
- Highlighting code,
Highlight.class.js
- Input format,
MaskInput.class.js
Adding services to the client
There are three variables to add client services:
- List of service classes
window.BSA.ScriptResources
= ['FormValidation', 'Datepicker', ...] - Service parameters object
window.BSA.ScriptParams
= {FormValidation:[{params-1},{params-2}, ...], ...} - 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)];