I am working under Aurelia Framework.I want to apply i18N on console messages .
I am using two languages "English" and "French"
Console.log("Hello World");
How i can print this message in french if user change language mode.
The docs for the plugin do contain exactly that example:
import {I18N} from 'aurelia-i18n';
export class MyDemoVM {
static inject = [I18N];
constructor(i18n) {
this.i18n = i18n;
console.log(this.i18n.tr('mykey'));
}
...
}
Related
Could someone please help with how to enable / develop custom action with latest preview / 2.0 version of Bot Framweork. The microsoft documentation only seems to work for v1.4.1
Thanks
So, BotComponents are the new route for custom actions. Please follow the directions here. The two things you will likely have to change are:
Update/add a newer package for Microsoft.Azure.KeyVault.Core. I went with 3.0.5 for both projects.
Use "components":[{"name":"MultiplyDialog"}] instead of "components":[{"name":"CustomAction.MultiplyDialog"}].
On point #2, I was getting a build error (FileNotFoundException: Could not load file or assembly 'CustomAction.MultiplyDialog) and thefore did the above to resolve. Odd thing here is that once I was able to build in VS, then run and test in Composer, it's once again back to CustomAction.MultiplyDialog, but it works.
This documenation should make it's way to the Composer documentation once 2.0 is released.
Please find the documentation here.
Add a new project named MultiplyDialog to your solution. In Visual
Studio right-click on the solution in the Solution Explorer and
select Add > New Project. Use the Class Library project template.
Add a reference to the Microsoft.Bot.Builder.Adaptive.Runtime
package. Use the same version as the bot depends on.
Add a project reference from the bot project to the component
project. Right-click on the project and select Add > Project
Reference. Choose the MultiplyDialog project and click OK.
Build the entire solution to restore all packages and validate the
dependency tree.
Create the custom action
Actions in Composer are special implementations of the Dialog base class. This allows each action in the trigger to be pushed onto the dialog stack, and executed in turn.
In the new project, rename the Class1.cs file to MultiplyDialog.cs, and update it's contents to look like the below:
using System;
using System.Runtime.CompilerServices;
using System.Threading;
using System.Threading.Tasks;
using AdaptiveExpressions.Properties;
using Microsoft.Bot.Builder.Dialogs;
using Newtonsoft.Json;
public class MultiplyDialog : Dialog
{
[JsonConstructor]
public MultiplyDialog([CallerFilePath] string sourceFilePath = "", [CallerLineNumber] int sourceLineNumber = 0)
: base()
{
// enable instances of this command as debug break point
RegisterSourceLocation(sourceFilePath, sourceLineNumber);
}
[JsonProperty("$kind")]
public const string Kind = "MultiplyDialog";
[JsonProperty("arg1")]
public NumberExpression Arg1 { get; set; }
[JsonProperty("arg2")]
public NumberExpression Arg2 { get; set; }
[JsonProperty("resultProperty")]
public StringExpression ResultProperty { get; set; }
public override Task<DialogTurnResult> BeginDialogAsync(DialogContext dc, object options = null, CancellationToken cancellationToken = default(CancellationToken))
{
var arg1 = Arg1.GetValue(dc.State);
var arg2 = Arg2.GetValue(dc.State);
var result = Convert.ToInt32(arg1) * Convert.ToInt32(arg2);
if (this.ResultProperty != null)
{
dc.State.SetValue(this.ResultProperty.GetValue(dc.State), result);
}
return dc.EndDialogAsync(result: result, cancellationToken: cancellationToken);
}
}
Create the schema file
The .schema file for the component is a partial schema that will be merged into the main .schema file for the bot. Although it is possible to edit the main sdk.schema file for the bot directly, doing so is not recommended. Merging partial schema files will isolate changes, allow for easier recovery from errors, and enable easier packaging of your component for reuse.
Create a new file in the project named MultiplyDialog.schema and update the contents to the below:
{
"$schema": "https://schemas.botframework.com/schemas/component/v1.0/component.schema",
"$role": "implements(Microsoft.IDialog)",
"title": "Multiply",
"description": "This will return the result of arg1*arg2",
"type": "object",
"additionalProperties": false,
"properties": {
"arg1": {
"$ref": "schema:#/definitions/integerExpression",
"title": "Arg1",
"description": "Value from callers memory to use as arg 1"
},
"arg2": {
"$ref": "schema:#/definitions/integerExpression",
"title": "Arg2",
"description": "Value from callers memory to use as arg 2"
},
"resultProperty": {
"$ref": "schema:#/definitions/stringExpression",
"title": "Result",
"description": "Value from callers memory to store the result"
}
}
}
Create the BotComponent class
The adaptive runtime will dynamically discover and inject components at startup time.
Create a new MultiplyDialogBotComponent.cs file in the project and update the contents to
using Microsoft.Bot.Builder;
using Microsoft.Bot.Builder.Dialogs.Declarative;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
public class MultiplyDialogBotComponent : BotComponent
{
public override void ConfigureServices(IServiceCollection services, IConfiguration configuration)
{
// Anything that could be done in Startup.ConfigureServices can be done here.
// In this case, the MultiplyDialog needs to be added as a new DeclarativeType.
services.AddSingleton<DeclarativeType>(sp => new DeclarativeType<MultiplyDialog>(MultiplyDialog.Kind));
}
}
In the appsettings.json file of the bot project (located at \settings)to include the MultiplyDialogBotComponent in the runtimeSettings/components array.
"runtimeSettings": {
"components": [
{
"name": "MultiplyDialog"
}
]
}
Merge schema files
The final step is to merge the partial schema file from the MultiplyDialog project into the main sdk.schema file for the bot. This makes the custom action available for use in Composer.
Navigate to the schemas folder in the myBot project. This folder contains a PowerShell script and a bash script. Use an elevated PowerShell terminal to execute the PowerShell script. You will need to either copy/paste the contents of the script, or ensure your execution-policy allows for running unsigned scripts.
To validate the script executed successfully, search for MultiplyDialog inside the MyBot\schemas\sdk.schema file and validate that the partial schema from the MultiplyDialog.schema file is included in sdk.schema.
Am using #ngx translator but I'm getting error. I need to use translator dropdown at footer and the translator should reflect in all pages
like this the services .. it works
loadTranslations(...args: Locale[]): void {
const locales = [...args];
locales.forEach(locale => {
this.translate.setTranslation(locale.lang, locale.data, true);
this.langIds.push(locale.lang);
});
// add new languages to the list
this.translate.addLangs(this.langIds);
}
setLanguage(lang) {
if (lang) {
this.translate.use(this.translate.getDefaultLang());
this.translate.use(lang);
localStorage.setItem('language', lang);
}
}
getSelectedLanguage(): any {
return localStorage.getItem('language') || this.translate.getDefaultLang();
}
and the constructor
import { locale as arLang } from './i18n/ar';
import { locale as frLang } from './i18n/fr';
constructor(private translationService: TranslationService,
) {
// register translations
this.translationService.loadTranslations(arLang, frLang);
}
For localization/internationalization of your app, angular has i18n. It handles all static text of your app and translates with any of your locale. For that you need to include equavalent translated text in $Yourlocale.xlf file.
For some reference:
Translate addition i18n
Addition in template
Add i18n tag :<div i18n>Some text</div>
Add i18n-x tag to component attribute :
<some-component i18n-titleProp="title" titleProp="some text""></some-component>
<input i18n-placeholder="placeholder"" placeholder="some text""></input>
Addition in ts file i18n-polyfill
Add i18n to class constructor :constructor(private i18n: I18n) {}
Add i18n tag to variable value :
any = [this.i18n('first value'), this.i18n('second value')]
some = this.i18n('some value')
Creation XLIFF translations files
run npm run i18n
See translation file /locales/messages.xlf
here you need to manually enter the equivalent translated text for transaltion.
We have a static site using Gatsby and contentful. Now we want to support multi-languages, with localized content from contentful. I am able to populate a graghql query:
query frontpageTeaser($lang: String) {
contentfulFrontpage(node_locale: { eq: "zh-CN" }) {
myArticalContent
...
}
}
This query is able to load the Chinese content from contentful, and English if changed to node_locale: { eq: "en-US" }.
Now the issue is: we want to support a language switch, so that when switching language, the graphql loads corresponding localized content.
We are using gatsby-plugin-react-i18next, which has this great feature:
Support multi-language url routes in a single page component. You don’t have to create separate pages such as pages/en/index.js or pages/es/index.js.
Pages like http://localhost:8000/zh-CN/ does load Chinese from local /locales/zh-CN/translation.json, but how to load localized content when switching language?
Graphql seems providing page query, so i added gatsby-node.js:
exports.createPages = async function ({ actions, graphql }) {
actions.createPage({
path: '/zh-CN/',
component: require.resolve(`./src/pages/index.js`),
context: { lang: 'zh-CN' },
})
}
And use this on page:
export const query = graphql`
query frontpageTeaser($lang: String) {
contentfulFrontpage(node_locale: { eq: $lang }) {
myArticalContent
}
}
`
But it always returns en. Please kindly help :). Thanks.
This can be a complex switch. There is an example project that has smoothly done it with another CMS + Gatsby, here.
Specific places to point out in the codebase:
Configuration of which locales you use, here
A dynamic link depending on the active locale, here
The context for your whole app to know what the active locale is, here
Actually implementing the locale context provider in the higher order component Layout, here
There is also some magic inside of the gatsby-node.js which updates what you've already been working on! You can find that, here.
Hope that helps :)
Before getting a better solution, this one works:
// #todo gatsby plugin https://www.gatsbyjs.org/packages/gatsby-plugin-react-i18next/
// this plugin provides current language `context.i18n.language`, which not know how to pass it to graphql page query.
// This snippet moves it one-level up to `context.locale`.
// #todo need to explore a better solution.
exports.onCreatePage = ({ page, actions }) => {
const { createPage, deletePage } = actions
if (!page.context.locale) {
const language = page.context.i18n.language
const locale = language === 'en' ? 'en-US' : language
deletePage(page)
createPage({
...page,
context: {
...page.context,
locale,
}
})
}
}
I am trying to use preferences in tornadofx . but documentation has very few about it.
"unresolved references" to "preferences".
From where to import preferences ?
Please give and clear example.
The Preferences API in JavaFX allows you store store arbitrary configuration options in an OS dependent way. It's a direct alternative to the config functionality in TornadoFX. This example retrieves and stores a value from the default Perferences node:
class UserEditor : View("User Editor") {
val name = SimpleStringProperty()
init {
preferences {
name.value = get("name", "Default Name")
}
}
override val root = form {
fieldset {
field("Name") {
textfield(name)
}
}
button("Save").action {
preferences {
put("name", name.value)
}
}
}
}
TornadoFX merely facilitates easier access to the Preferences store available to JavaFX applications. You can also pass a specific node name as parameter to the preferences function.
Try the official guide to TornadoFX config here.
It shows an example of configuration settings applied to the user login form, communication with ViewModel, and other useful stuff.
I would like to update my localization messages in vue-i18n dynamically.
I am building a webshop, where every item has descriptions in more languages. So what I’d like to achieve is when I get the webshop items from the REST API I want to put their names, descriptions etc. to the messages object in vue-i18n so it can work with them. Does the vue-i18n API have something to handle that? Also I am getting the data from the server (I get a Promise), so how can I make sure it gets updated in the browser view, when I finally get the response, and add the data to the localization?
What I did was write a mixin, and use it everywhere I need dynamic localization:
export default {
methods: {
$t: function (translate) {
if (typeof translate === 'string') {
return this.$i18n.t(translate)
} else if (translate === void 0) {
return this.$i18n.t('loading')
}
return translate[this.$i18n.locale]
}
}
}
This way when my texts look like the following, I can call $t(text) (NOT $t('text') of course):
data: function () {
return {text: {en:'Book', de:'Buch', hu:'Könyv'}}
}
So in your components you have to import this and add it as a mixin:
import dynamicLocalization from '#/components/mixins/dynamic-localization'
export default {
...
mixins:[dynamicLocalization]
...
}