Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Rolf Smeds <[email protected]>
  • Loading branch information
sissbruecker and rolfsmeds authored Oct 1, 2024
1 parent 38d2774 commit ae1c322
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions articles/control-center/localization/index.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ order: 60

= Localization

The Localization feature in Control Center provides support for translating Vaadin applications. First, it allows uploading of translation files from a Vaadin application. Translators can then add new translations or update existing ones. While translators are working on them, they can preview updated translations directly in the application. Finally, translations can be downloaded again in order to sync them back into the application.
The Localization feature in Control Center provides support for translating Vaadin applications. After uploading translation files for the application, translators can add new translations and modify existing ones. Translations can be previewed in real-time in a deployed application. Once translation work has been completed, the updated translation files can be downloaded for synching back into the application's codebase.


== Enabling Localization
Expand All @@ -31,13 +31,13 @@ First, select the file type that you want to upload. Control Center supports two

The multiple [filename]`.properties` file type allows selection of all files from the `translations` resource bundle in the application's source code. In a typical Vaadin application, the translations resource bundle is located in [filename]`src/main/resources/vaadin-i18n`. From there, select all [filename]`.properties` files that start with `translations`.

The zipped data package can be generated from the [guilabel]*Internationalization* panel in Vaadin Copilot. This package contains the same [filename]`.properties` files that you would select with the previous option. It can also contain screenshots that Copilot took when localizing static strings in the application. These provide visual context for translators.
The zipped data package can be generated from the [guilabel]*Internationalization* panel in Vaadin Copilot. This package contains the same [filename]`.properties` files that you would select with the previous option. It can also contain screenshots that Copilot took when internationalizing static strings in the application. These provide visual context for translators.

When ready, select the files you want to upload. Depending on what you chose for the upload type, either select all [filename]`.properties` files from the `translations` resource bundle, or select a single [filename]`.zip` file that you generated with Vaadin Copilot.

Next, a default language needs to be selected from the pull-down in the same dialog. The default language is usually the base language from which translations to other languages are made. Control Center assumes that the [filename]`translations.properties` file contains the translation in that default language. Since this file doesn't have any indicator of that language, it must be selected in this step. For other files, Control Center detects the language from the file name. For example, for a file named [filename]`translations_en_US.properties`, Control Center assumes it's in U.S. English.
Next, a default language needs to be selected from the drop-down in the same dialog. The default language is usually the base language from which translations to other languages are made. Control Center assumes that the [filename]`translations.properties` file contains the translation in that default language. Since this file doesn't have any indicator of that language, it must be selected in this step. For other files, Control Center detects the language from the file name. For example, for a file named [filename]`translations_en_US.properties`, Control Center assumes it's in U.S. English.

Finally, check the checkbox to confirm that you understand and want to replace existing data in Control Center with the new uploaded data. Then click [guibutton]*Replace data* to start the upload. Once the upload is complete, you should receive a notification that it was successful.
Finally, check the checkbox to confirm that you understand and want to replace any existing translation data in Control Center with the new uploaded data. Then click [guibutton]*Replace data* to start the upload. Once the upload is complete, you should receive a notification that it was successful.

.Existing Data is Replaced
[WARNING]
Expand Down Expand Up @@ -74,21 +74,21 @@ The language select allows to configure which languages are shown in the grid. T

The grid contains rows for all messages that have been detected in any of the files of the `translations` resource bundle. It always shows a column for the message key and additional columns for translations into different languages.

To edit translations for a message or row, click on one of the cells in a language column. Using the keyboard, you can also focus one of the cells and press kbd:[Enter]. This starts the inline editing mode in that row. You can now change the translation text for one or more languages in the edited row. To save changes, you must explicitly commit them by pressing kbd:[Enter] or clicking the `Confirm` icon button in the last column.
To edit translations for a message, click on one of the cells in a language column. Using the keyboard, you can also focus one of the cells and press kbd:[Enter]. You can now change the translation text for one or more languages in the edited row. To save changes, you must explicitly commit them by pressing kbd:[Enter] or clicking the `Confirm` icon button in the last column. When the last translation on a row has been commited with kbd:[Enter], focus moves automatically down to the first translation on the next row.

Check failure on line 77 in articles/control-center/localization/index.adoc

View workflow job for this annotation

GitHub Actions / lint

[vale] reported by reviewdog 🐶 [Vale.Spelling] Did you really mean 'commited'? Raw Output: {"message": "[Vale.Spelling] Did you really mean 'commited'?", "location": {"path": "articles/control-center/localization/index.adoc", "range": {"start": {"line": 77, "column": 424}}}, "severity": "ERROR"}

You can cancel editing without saving changes by pressing kbd:[Escape] or by clicking the `Cancel` icon button in the last column.


=== Details Panel

The details panel shows additional information for the currently selected message in the grid. It shows the message key, the default language translation, and translations for all other languages. If the message has been localized using Vaadin Copilot, it also shows a screenshot of where that message is used in the application UI.
The details panel shows additional information for the currently selected message in the grid. It shows the message key, the default language translation, and translations for all other languages. If the message has been localized using Vaadin Copilot, it also shows a screenshot of where that message is used in the application UI. Clicking the screenshot opens it in full size in an overlay.


== Previewing Translations

Translators can preview changes they made in an actual deployment of the application. They might do this to verify that text fits into the space of its container, or if a translation makes sense in the context that it's used.
Translations edited in Control Center can be previewed in a special instance of the deployed application. This can be useful for verifying that text fits into the space of its container, or to confirm that a translation makes sense in the context where it's used.

To preview translations, click on [guibutton]*Start preview* in the sidebar of the [guilabel]*Translations* view. This creates a copy of the currently selected application that's configured to load translations from Control Center -- instead of the application's own `translations` resource bundle. Once the preview is ready, click on [guibutton]*Open preview* to open the preview in a new browser tab.
To preview translations, click on [guibutton]*Start preview* in the sidebar of the [guilabel]*Translations* view. This starts a new instance of the application configured to load translations from Control Center instead of the application's own `translations` resource bundle. Once the preview is ready, click on [guibutton]*Open preview* to open the preview in a new browser tab.

The preview always uses the latest translations stored in Control Center. Translators can switch back and forth between the preview and the [guilabel]*Translations* view to make changes and see them reflected in the preview. When the preview is no longer needed, it should be closed by clicking on [guibutton]*Stop preview* in the [guilabel]*Localization* view.

Expand Down

0 comments on commit ae1c322

Please sign in to comment.