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.
spa.getLocale()
spa.setLocale()
spa.isLocale(locale)
For more details about Spacer configurations please read Configuration
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
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.
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>',
});