PhotonUI logo

PhotonUI

A javascript framework to create user interfaces

Translation

photonui.Translation adds internationalization functionalities to your application.

NOTE: When you instantiate the translation widget, you can pass the noGlobal option to avoid the creation of the global window._ function. If you do so, you will have to use the lazyGettext() method of photonui.Translation instead of the _() global function.

Class Reference

Extracting strings and generating catalogs

photonui.Translation is based on stone.js. You can find its documentation on GitHub:

More examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// Translation
var tr = new photonui.Translation();
tr.addCatalogs({
    "fr": {
        "plural-forms": "nplurals=2; plural=(n > 1);",
        "messages": {
            "Hello World": ["Bonjour le monde"],
            'Browser language is "{lang}".': ["La langue du navigateur est « {lang} »."],
            "Close": ["Fermer"]
        }
    },
    "it": {
        "plural-forms": "nplurals=2; plural=(n != 1);",
        "messages": {
            "Hello World": ["Buongiorno il mondo"],
            'Browser language is "{lang}".': ['La lingua del browser è "{lang}".'],
            "Close": ["Chiudere"]
        }
    }
});
tr.locale = tr.guessUserLanguage();  // Browser language

// Language selector
var layout = new photonui.BoxLayout({
    orientation: "vertical",
    children: [
        new photonui.Label({
            text: _('Browser language is "{lang}".', {
                lang: tr.guessUserLanguage()
            })
        }),
        new photonui.Select({
            name: "lang",
            placeholder: "Choose a language...",
            value: tr.locale,
            children: [
                new photonui.MenuItem({value: "en", text: "English"}),
                new photonui.MenuItem({value: "fr", text: "Français"}),
                new photonui.MenuItem({value: "it", text: "Italiano"}),
            ],
            callbacks: {
                "value-changed": function(widget, value) {
                    tr.locale = value;
                }
            }
        })
    ]
});
photonui.domInsert(layout, "demo");

// A window
var pos = photonui.Helpers.getAbsolutePosition("demo");
var win = new photonui.Window({
    visible: true,
    title: _("Hello World"),
    x: pos.x, y: pos.y + 100,
    width: 250,
    padding: 20,
    child: new photonui.Button({
        text: _("Close"),
        callbacks: {
            "click": function() { win.hide(); }
        }
    }),
    callbacks: {
        "close-button-clicked": function(widget) { widget.hide(); }
    }
});