Internationalization

Strings can be selected in two ways: by manually choosing individual UI elements; or by clicking the Find all static strings button in the Internationalization panel. This second way automatically selects all elements containing static strings in the currently visible UI.

With both methods, the elements are listed in the Internationalization panel. Each element is identified by the string inside it — and its HTML tag. These items can be expanded to reveal each string found in them. Those can be further expanded to reveal a proposed, automatically generated translation key, as well as the string that is to be associated with it in the translation file. Checkboxes can be used to select or deselect entire elements or individual strings. The checkbox labeled "All static strings", located above the list can be used to select or deselect all items.

By default, the list also shows elements and strings that are already internationalized, distinguished by a green checkmark symbol. Those internationalized elements can be hidden by toggling the "Show internationalized strings" switch at the top.

Copilot generates a translation key for each static string. You can modify the key by expanding the item’s details, where you can edit the Key field or you can pick another existing key from the drop-down list.

The string that’ll be associated with the key, can also be edited. When an existing key is selected, the field for the associated string is locked by default to prevent accidentally modifying the string that might be used in other elements. You can unlock it, though, by clicking the button in the field.

The selected items are internationalized by clicking the Apply button at the bottom of the list. Once the conversion is completed, a summary is displayed in the Internationalization panel.

Copilot takes screenshots of the elements that it internationalizes. These can be used in the Localization module in Control Center to provide translators with the context in which the strings are used.

The screenshots are stored in the local storage of the browser that was used to run internationalization in Copilot. To download the screenshots, as well as the translation files in the project, expand the Localization Data panel below the Find all static strings button, and then click the Download Zip button. This file can be uploaded into the Localization module in Control Center, where localizations to different languages can be edited conveniently.

The panel also provides a button for clearing the currently stored screenshots.

The internationalization feature expects translation property files to be stored in the standard Vaadin translation file folder, src/main/resources/vaadin-i18n.

The default translation property file is expected to be called translations.properties. Files for other locales are expected to be named according to the translations\_\[langcode\].properties format, such as translations\_en\_US.properties for U.S. English.

Other folders and filename structures are currently not supported.