I have a working app using aurelia-i18n. I would like to split translation.json file into multiple files like nav.json, message.json, etc but I am not sure how to do it.
This is how it looks right now.
locale
|-en
|- translation.json
But I want to change it to this way.
locale
|-en
|- nav.json
|- message.json
Is it possible to do it? If so, how do I configure it and access values in each file?
You can have multiple resource files and these are called namespaces in the i18next library (by default you only have one namespace which is called: translation) which is used by aurelia i18N.
You just need to list your namespaces when configuring the plugin with the namespaces and defaultNs properties inside the ns option:
.plugin('aurelia-i18n', (instance) => {
// adapt options to your needs (see http://i18next.com/pages/doc_init.html)
instance.setup({
resGetPath : 'locale/__lng__/__ns__.json',
lng : 'de',
attributes : ['t','i18n'],
ns: {
namespaces: ['nav', 'message'],
defaultNs: 'message'
},
getAsync : true,
sendMissing : false,
fallbackLng : 'en',
debug : false
});
});
See also the documentation of i18next and this related github issue: Using namespaces
Related
I'm looking for a solution/idea to dynamically change the translation value of each key in Sparatcus translations files outside the code. I don't want only to create a file and override the I18nModule config, I'm looking for some kind of service/API like Lokalize API to be able to change the translation values outside the code.
Thanks in advance!
The internationalisation features are prepared for this. Although we do not have a service at hand for the localised labels, Spartacus is prepared for this. You can read more about this at https://sap.github.io/spartacus-docs/i18n/#lazy-loading. You can configure loadPath to an API endpoint, including the variable language (lng) and namespace (ns).
imports: [
B2cStorefrontModule.withConfig({
i18n: {
backend: {
loadPath: 'assets/i18n-assets/{{lng}}/{{ns}}.json'
// crossOrigin: true (use this option when i18n assets come from a different domain)
},
chunks: translationChunksConfig
}
})
];
I'm using SeedStack to create a web application. In order to do that, I use W20 to develop my frontend. I need specific JavaScript libraries into that project. How can I inject an external javascript library into it ? I want to use Chart.js http://www.chartjs.org/ to visualize data into charts. To do that, I suppose that I have to inject ChartJS as a dependency module in Angular.
Thank you for your help.
Before getting to the specific answer, please note that SeedStack already has an add-on for charts. As for integrating a library with W20, you have two main things to do:
Configure RequireJS to load the JS file and be able to inject it as a dependency.
Integrate the library with the AngularJS framework, which is often done by writing some directive.
Fortunately for you, Angular directives are already available for Chart.js, thanks to the angular-chart.js library. You just need to configure RequireJS to load it. Add a requireConfig section to the manifest of one of your fragments:
{
"id": "my-fragment",
...
"requireConfig": {
"paths": {
"{angular-chart.js}": "${components-path:bower_components}/angular-chart.js/dist",
"{chart.js}": "${components-path:bower_components}/chart.js/dist"
},
"map": {
"{angular-chart.js}/angular-chart": {
"angular": "{angular}/angular",
"chart": "{chart.js}/Chart"
}
}
}
}
The paths section declares locations of the two Chart.js libraries. Note that we use a variable named components-path with a default value of bower_components here. This is useful when using the W20 bridge add-on.
The map section declares a mapping between the expected and the real paths for dependencies of angular-chart.js.
You can then use the angular-chart.js library according to its documentation:
define([
'{angular}/angular',
'{angular-chart.js}/angular-chart',
], function(angular) {
var module = angular.module('myModule', ['ngResource', 'chart.js']);
module.controller('ContentController', [ '$scope', function($scope) {
// your JS code here
// (with your markup in a corresponding angular template)
}]);
});
Laravel 5.1 has only one built-in hardcoded Mess Detection, it searches to see if #package tag is the same with /namespace, like so:
preg_match('/namespace\ ' . self::REQUIRED_NAMESPACE . '\\\(.*);/isU', $content, $namespace);
preg_match('/\/*( )+#package\ (.*)[\r?\n]/isU', $content, $package);
if (!isset($namespace[1]) || empty($namespace[1])) {
continue;
}
I want to extend this to add multiple detection classes.
My folder structure currently looks like this:
Helpers >
Commands >
MessDetector >
Detector >
DetectorInterface.php
DetectorAbstract.php
PackageTagDetector.php
MessDetector.php
The file MessDetector is made as an Artisan Command, that means it extends \Illuminate\Console\Command
I have a config file called mess_detection.php which has the detection rules like so:
return [
'rules' => [
'\Helpers\Commands\MessDetector\PackageTagDetector' =>
[
'rule' => '/\/*( )+#package\ (.*)[\r?\n]/isU',
'path' => app_path(),
'info' => 'Checking for #package tag',
'error'=> 'Malformed or missing package tag'
]
]
];
But got stuck with figuring out how exactly to instantiate PackageTagDetector class in MessDetector class.
Any ideas design pattern wise?
Laravel has no built in mess detector.
Also checking if package tags matches the namespace is a custom convention, Laravel doesn't use package tags at all.
It seems like you are using a third party library?
I have made an abstract class and interfaces for every rule I needed.
Each rule had it's own class.
The rules extended the abstract and in the abstract most of the logic was used.
The rules themselves where stored in a config file, in the config file I also mentioned the class and class specific actions.
I just started looking about Phalcon this week, I'm trying to create a multiple module application with the dev tools.
The result of running phalcon project <name> multiple only creates one module ('frontend') and it works fine. However, when I add a second module (by copying the frontend one and changing the namespace to \Backend , I couldn't get to the Backend\IndexController class.
After reading the doc page about mutiple module applications and looking at the samples (https://github.com/phalcon/mvc/tree/master/multiple and https://github.com/phalcon/mvc/tree/master/multiple-volt) and an old question on the Google group (sorry, can't post more than 2 links since I'm new on StackOverflow), I've ended commenting this this line on the services.php file:
$router->setDefaultNamespace("MyL\Frontend\Controllers"); //project name is MyL
and adding the following on the setServices of my backend/Module.php file:
$di->set('dispatcher', function() {
$dispatcher = new Dispatcher();
$dispatcher->setDefaultNamespace("MyL\Backend\Controllers");
return $dispatcher;
});
and the something similar on the frontend/Module.php
It works with these modifications, but my question is: is this the best way to do it, or is there a better way?
Thanks in advance!
You need to register your modules in your app like so:
$app = new \Phalcon\Mvc\Application();
$app->registerModules(
[
'frontend' => [
'className' => 'MyL\Frontend\Controllers',
'path' => '../apps/frontend/Module.php'
],
'backend' => [
'className' => 'MyL\Backend\Controllers',
'path' => '../apps/backend/Module.php'
],
]
);
Make sure that you have the Module.php ready also for each module
Here is a simple way to split frontend and backend in Phalcon project without modules:
https://github.com/borzov/phalcon-templates
I have created the class in Ext JS 4, and now I want to extend that in another class. I use extend properties, to extend the class. But I am not able to extend the class. Do I want to use require to include the class file. But I keep both the files in the same directory.
Define source paths for ExtJS to locate your source files.
Ext.Loader.setConfig({
enabled: true,
paths: {
'[your namespace prefix here]': '[physical path]'
}
});
Then define Ext.require or requires section in subclass to enable automatic path resolution.
Read this link for more info.
Example
Base class: file located at folder root/view/common/Picker.js
Ext.define('RL.view.common.Picker', {
extend: "Ext.form.field.Picker",
...
}
Sub class: file located at folder root/view/selection/DriverTreeCombo.js
Ext.define('RL.view.selection.DriverTreeCombo', {
extend: "RL.view.common.Picker",
requires: ['Ext.tree.Panel', 'RL.view.common.TreeBase'],
...
}
I have namespace as RL.xxx.xxx and RL is supposed to be the root folder. Now I can define Loader configuration as below
Ext.Loader.setConfig({
enabled: true,
paths: {
'RL': '/root'
}
})
Loader configuration should be set before 'Ext.onReady(...)' function call. Going through examples folder in ExtJS package would help you to see how this is done.
Further reading:
The Class System
Dynamic Loading and new class system