i18n

Examples

Basic

This is the basic example for i18n:

Basically, we use LangSetDefaultString to set language assets(your translations), and then use LangSetCurrent to set current language.

i18n-switch

export interface ILang extends ILangBase {    // ave built-in language key    AppTitle: string;
    // user defined key    SwitchLang: string;}
export function onInitI18n(app: App) {    const i18n: Ii18n<ILang> = {        t(key, toReplace: object = {}) {            let result = app.LangGetString(key);            Object.keys(toReplace).forEach((each) => {                result = result.replace(`{{${each}}}`, toReplace[each]);            });            return result;        },        switch(this: Ii18n, id) {            app.LangSetDefaultString(id, this.lang[id]);            app.LangSetCurrent(id);        },        lang: {            [CultureId.en_us]: {                // ave built-in language key                __FontStd: "Segoe UI",                AppTitle: 'My App',
                // user defined key                SwitchLang: 'Switch Lang',            },            [CultureId.zh_cn]: {                __FontStd: "Microsoft YaHei UI",                AppTitle: '我的应用',
                SwitchLang: '切换语言'            },        },    };
    const context = getAppContext();    context.setI18n(i18n);}

We have built-in support for i18n, as long as you create UI component with language key, language change happens automatically.

import { onInitI18n } from "./i18n-switch";
function onInit(app: App) {    onInitI18n(app);    const context = getAppContext();    const i18n = context.getI18n();    i18n.switch(CultureId.en_us);}
export function App() {    const [currentLang, setCurrentLang] = useState<CultureId>(CultureId.en_us);
    const onSwitchLang: IButtonComponentProps["onClick"] = () => {        const context = getAppContext();        const i18n = context.getI18n();        if (currentLang === CultureId.en_us) {            setCurrentLang(CultureId.zh_cn);            i18n.switch(CultureId.zh_cn);        } else if (currentLang === CultureId.zh_cn) {            setCurrentLang(CultureId.en_us);            i18n.switch(CultureId.en_us);        }    };
    return (        <Window onInit={onInit}>            <DemoLayout>                <Button langKey="SwitchLang" onClick={onSwitchLang}></Button>            </DemoLayout>        </Window>    );}

API

export interface IApp {    LangSetDefaultString(cid: CultureId, v: any): App;    LangSetCurrent(n: CultureId): App;}
export enum CultureId {    Default /**/ = -1,    en_us /**/ = 0,    ...    zh_cn /**/ = 562,    ...}