Introduction


When developing multi language apps, we often need different resources for each language. Here the Resource Management comes into play. Spacer provide a powerful easy to use resource manager. You can add resources to the resource manager. When you get a resource, Spacer return the resource according to the locale selected in locale configuration option.

Resource Management is not limited to multi language apps. It is a general management tool. You can store images url, ajax url, buttons labels...

Spacer uses resource managet to mange resources for validation error messages, dialogs buttons, icons ...etc. Spacer comes with English resources only. Any other translations can be added as extension. Please go to installation page for available translation extensions.


Locale Functions


For more details about Spacer configurations please read Configuration


Resource Manager Functions


spa.resource.set(resource)


Set a resource. set receive one parameter which expected to be an object like this:

{
    key: 'logout.confirm',
    en: 'Do you really want to logout?',
    ar: 'هل تريد تسجيل الخروج بالفعل؟',
    tr: 'Gerçekten çıkış yapmak istiyor musun?',
    es: '¿Realmente quieres desconectarte?',
    //any other translations...

    //default fallback key
    def: '',

}

spa.resource.setArray(resourceArray)


Set array of resources. This function is similar to spa.resource.set(resource) except that spa.resource.setArray(resourceArray) receive array of resource objects.


spa.resource.get(key)


Get a resource according to the locale selected in locale configuration option. This function receive a resource key.

spa.resource.get('logout.confirm');

So if locale configuration option is set to en the function will return Do you really want to logout?. If locale is set to ar the function will return هل تريد تسجيل الخروج بالفعل؟ and so on...
If the resource key is not found, then undefined is returned.
If the resource key is found but the translation for the selected locale is not found, Spacer looks for translation under fallback key def. If neither translation for the selected locale nor fallback callback are found, undefined is returned. The fallback key is useful in several scenarios like adding resources that are the same for all languages such as icons


Resource Parameters


Sometime, a resource may have a variable string. For example, welcome messages often has the logged user name. The username is a variable and its value vary from user to another. Spacer can handle these types of resources using resource parameters.
To set a resource with a parameter, use this syntax:

{
    key: 'login.welcome',
    en: 'Welcome, :name',
    ar: 'أهلا بك، :name',
    tr: 'Hoşgeldiniz, :name',
    es: 'Bienvenido, :name',
    //any other translations...
}

Now we have a resource with a parameter: name. Note that we prefixing parameter name with a colon :.
Now let's imagine that we have a user named Sam. To get the welcome message for him, we pass additional parameter to spa.resource.get:

spa.resource.get('login.welcome', {name: 'Sam'});

If locale configuration option is set to en the function will return Welcome, Sam.

Remember that you can add multiple parameters:

spa.resource.set({
    key: 'validation.integer.min',
    en: 'The field :name should larger than or equal to :min.',
    //any other translations...
});

spa.resource.get('validation.integer.max', {name: 'Age', min:50});
//returns: The field Age should larger than or equal to 50.

Icons


By default, resource manager has 6 icons: loading, success, danger, warning, info and question. Spacer uses Font Awesome Icons.
Here is a list of available icons with their resource keys:

Resource Key Icon
icon.loading
icon.success
icon.danger
icon.warning
icon.info
icon.question

You are free to override them using spa.resource.set(resource) function.

Note: By default, Spacer uses the same icons for all languages. For this reason, icon resources are defined under fallback key def. So to override success icon for example:

spa.resource.set({
    key: 'icon.success',
    def: '<span class="fa-stack fa-lg"><i class="fa fa-thumbs-up fa-stack-2x"></i><i class="fa fa-check fa-stack-1x"></i></span>',
});