# # I18n

## # Custom resources

Please refer to this page.

## # Usage

### # `<text>` component

`<text>` is a component used to display text. It supports i18n entries. On the DOM tree, it does not create a new HTML Element, but a text node and inserts it into the DOM tree. The font style needs to be enclosed outside Other tags are set through CSS.

    <html>
        <template id="layout-template">
            <webpdf>
                <div>
                    <span class="span-with-text-component">
                        <!-- The text "inline text" will be displayed -->
                        <text>inline text</text>
                    </span>
                    <span class="span-with-text-component">
                        <!-- The text "Home" will be displayed -->
                        <text>toolbar.tabs.home.title</text>
                    </span>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
        .span-with-text-component {
            color: red;
            font-size: 18px;
            font-style: bold;
        }
    </style>
    <script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function() {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function(){}
    });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: []
        });
    </script>

### # `data-i18n` attribute

`data-i18n` attribute is another way to show texts in a HTML element, difference from `<text>` component, `data-i18n` will cover all children and replace to the text.

    <html>
        <template id="layout-template">
            <webpdf>
                <div>
                    <!-- The text "inline text" will be displayed -->
                    <span class="span-with-text-component" data-i18n="inline text"> </span>
                    <!-- The text "Home" will be displayed -->
                    <span class="span-with-text-component" data-i18n="toolbar.tabs.home.title"> </span>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
        .span-with-text-component {
            color: red;
            font-size: 18px;
            font-style: bold;
            padding: 0 1em;
        }
    </style>
    <script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function() {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function(){}
    });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: []
        });
    </script>

### # components supporting

    <html>
        <template id="layout-template">
            <webpdf>
                <div>
                    <div>
                        <!-- tab component example -->
                        <gtab group="example-tab" body="tab-body-1">toolbar.tabs.home.title</gtab>
                        <gtab group="example-tab" body="tab-body-2">toolbar.tabs.edit.title</gtab>
                        <gtab group="example-tab" body="tab-body-3">toolbar.tabs.comment.title</gtab>
                    </div>
                    <div>
                        <div name="tab-body-1" class="button-group">
                            <!-- The text "OK" will be displayed -->
                            <xbutton>dialog.ok</xbutton>
                            <xbutton text="dialog.ok"></xbutton>
                            <file-selector>dialog.ok</file-selector>
                            <file-selector text="dialog.ok"></file-selector>
                            <dropdown text="dialog.ok"> </dropdown>
                        </div>
                        <div name="tab-body-2"></div>
                        <div name="tab-body-3"></div>
                    </div>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
        .span-with-text-component {
            color: red;
            font-size: 18px;
            font-style: bold;
            padding: 0 1em;
        }
        .button-group {
            display: flex;
        }
        .button-group .fv__ui-button-text {
            width: 3em;
            text-align: center;
        }
    </style>
    <script>
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function() {
                //
            }
        });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: []
        });
    </script>

## # Switch current language via API

    <html></html>
    <style>
        .span-with-text-component {
            color: red;
            font-size: 18px;
            font-style: bold;
            padding: 0 1em;
        }
    </style>
    <script>
        UIExtension.PDFUI.module('custom', [])
            .controller('SwitchLanguageController', {
                mounted: function() {
                    this.updateButtonText();
                },
                updateButtonText: function() {
                    const pdfui = this.getPDFUI();
                    switch(pdfui.currentLanguage || navigator.language) {
                        case 'en':
                        case 'en-US':
                            this.component.setText('Swith to Chinese');
                            break;
                        case 'zh':
                        case 'zh-CN':
                            this.component.setText('切换为英文');
                            break;
                    }
                },
                handle: function() {
                    const pdfui = this.getPDFUI();
                    switch(pdfui.currentLanguage) {
                        case 'en':
                        case 'en-US':
                            pdfui.changeLanguage('zh-CN').then(() => {
                                this.updateButtonText();
                            });
                            break;
                        case 'zh':
                        case 'zh-CN':
                            pdfui.changeLanguage('en-US').then(() => {
                                this.updateButtonText();
                            });
                            break;
                    }
                }
            });
        var CustomAppearance = UIExtension.appearances.AdaptiveAppearance.extend({
            getDefaultFragments: function() {
                return [{
                    target: 'home-tab-group-hand',
                    action: 'append',
                    template: '<xbutton class="fv__ui-toolbar-show-text-button" @controller="custom:SwitchLanguageController"></xbutton>'
                }];
            }
        });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: []
        });
    </script>