Building applications for a global audience requires more than just translating text. It's about creating a user experience that feels native for users in different regions, regardless of their language or cultural background. This is where internationalization (i18n) and localization (l10n) come into play. In this blog post, we'll show how Vaadin helps you to build internationalized applications.
Understanding the difference: i18n vs. l10n
While often used interchangeably, internationalization and localization are distinct processes. Internationalization (i18n) is the process of designing and developing your application in a way that makes it adaptable to various languages and regions without requiring significant code changes. This builds the foundation for localization. Localization (l10n) is the process of adapting your internationalized application to a specific target market. It involves translating text, formatting dates and numbers, and addressing other cultural nuances.
How Vaadin supports internationalization
Vaadin provides built-in features and tools to simplify internationalization. One of those is property files (.properties), which Vaadin uses to store translations in different languages. These files are placed in the vaadin-i18n directory and follow a specific naming convention (translations.properties for the default language, translations_[langcode].properties for specific locales).
Vaadin automatically detects the user's preferred locale based on browser settings and selects the appropriate translation file. You can access translated strings in your Java code using the getTranslation() method as well as implement the LocaleChangeObserver interface to update UI components when the locale changes.
Best practices for Vaadin localization
A few tips to keep in mind include;
- Consider internationalization from the initial design phase of your application. This will save you time and effort in the long run.
- Choose descriptive keys that clearly convey the meaning of the text being translated.
- Avoid hardcoding text in your UI components. Instead, use translation keys to reference externalized strings.
- Be mindful of date, time, number, and currency formats, which can vary significantly across regions. Use Vaadin's formatting utilities to ensure proper localization.
- Test your application with different locales to ensure all text is translated correctly and the UI adapts as expected.
To format a date according to the user’s locale, your code will look like this:
LocalDate date = LocalDate.now();
DateTimeFormatter formatter =
DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
.withLocale(UI.getCurrent().getLocale());
String formattedDate = date.format(formatter);
Automating translation setup with Vaadin Copilot
Vaadin Copilot streamlines the initial steps of internationalization by automatically identifying static text in your UI components that need translation. It generates unique translation keys for each extracted string and then creates or updates translation files with the extracted text and keys.
Copilot captures screenshots of the UI to provide context for translators, helping them understand how the text is used within the application.
To activate these features, first activate Copilot by clicking the following button, as seen in the browser when running your application in development mode:
As seen below, there are options to find all static strings for translation file generation as well as a convenient link directly to documentation.
Getting started
Internationalization is no longer an optional feature but a necessity for modern web applications. Vaadin provides the tools and features to make localization efficient and effective. By following best practices and leveraging tools like Vaadin Copilot, you can create Vaadin applications that are accessible and enjoyable for users worldwide.