Lekce 5 - Wicket - Internacionalizace a lokalizace

V předchozím kvízu, Kvíz - Založení Wicket projektu, HTML dědičnost a stylování, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

Už máme nějaký základ, ale určitě by bylo vhodné, aby se stránka zobrazila zahraničním návštěvníkům lokalizovaně.

Internacionalizace a lokalizace

"Internaciona­lizace je takový zápis zdrojového kódu programu, že může bez jeho změny program pracovat v různých jazykových prostředích. Lokalizace je pak vytváření externích databází, které obsahují překlady jednotlivých hlášení programu a definic konkrétních jazkykových odlišností." Wikipedia

"Internaciona­lizace je operace, po které jsou možné následné další lokalizace. Je to operace (jednorázová!), po které program nebo množina programů začleněná do jednoho balíku je schopna podporovat více jazyků. Lokalizace je operace při které v již internacionali­zovaných programech jsou poskytnuty informace takové, že mohou provádět své vstupy a výstupy ve tvaru, který je správný pro přirozené jazyky a kulturní zvyky. V podstatě internacionalizace je oblastí spíše programátorskou a lokalizace spíše překladatelskou." Wikipedia

Internacionalizace ve Wicketu je postavena na podpoře internacionalizace zabudované v Javě. Wicket také používá ResourceBundle, což je .properties soubor obsahující klíč (název hodnoty) a lokalizovanou hodnotu. Pro každý jazyk je potřeba mít vlastní .properties soubor. Názvy souborů pak vypadají následovně: nazevSouboru_en­.properties (angličtina), nazevSouboru_cs­.properties (čeština), kdy nazevSouboru odpovídá názvu třídy. Soubory .properties je třeba mít umístěny v balíčku, kde se používají nebo v nadřazeném balíčku. Vzhledem k tomu, že my máme malou aplikaci, všechny .properties soubory budeme ukládat do balíčku cz.mujweb. Budou tedy přístupné pro všechny naše třídy.

Nejdříve si vytvoříme dva odkazy, které budou měnit aktuální lokalizaci (jazyk).

BasePage.java

add(new Link("en") {
    @Override
    public void onClick() {
        Session.get().setLocale(Locale.ENGLISH);
    }
});

add(new Link("cs") {
    @Override
    public void onClick() {
        Session.get().setLocale(new Locale("cs"));
    }
});

BasePage.html

<div id="footer">
    <a href="#" wicket:id="en">anglicky</a>
    <a href="#" wicket:id="cs">česky</a>
</div>

Drobné vysvětlení. Tento zápis

add(new Link("cs") {
    @Override
    public void onClick() {
        Session.get().setLocale(new Locale("cs"));
    }
});

je stejný jako tento, jen se ušetří řádek kódu a není nutné vymýšlet název proměnné.

Link en = new Link("en") {
    @Override
    public void onClick() {
        Session.get().setLocale(Locale.ENGLISH);
    }
};
add(en);

Záleží na vás, který způsob budete používat...

Pokud si nyní zobrazíte stránky, zjistíte, že sice přibyly dva odkazy, které ale po kliknutí nic nedělají. Přesněji řečeno, nedělají nic viditelného. Odkazy po kliknutí změní aktuální lokalizaci, ale vzhledem k tomu, že zatím aplikace není lokalizovaná, nic se nestane.

Nyní si vytvoříme .properties soubory s texty lokalizovanými pro daný jazyk. Properties soubory jsou v Javě používají kódování ISO 8859-1, což má tu nevýhodu, že znaky české abecedy s diakritikou nelze přímo zadat. Je třeba použít Unicode escape syntaxi (např. \u010D znamená č). Tento způsob zápisu je dosti nepraktický, a proto je vhodné použít properties editor, který Eclipse nabízí (měl by se spustit automaticky po dvojkliku na .properties soubor v Eclipse).

Vytvoříme si dva soubory: WicketApplica­tion_cs.proper­ties a WicketApplica­tion.properti­es a umístíme je do balíčku k třídě WicketApplication. Tam budou přístupné všem našim třídám. Možná jste si všimli, že místo WicketApplica­tion_en.proper­ties vytváříme soubor WicketApplica­tion.properti­es. Soubor s lokalizací se vyhledává tak, že se nejdříve vyhledává nejspecifičtější .properties soubor. Pokud není nalezen, hledá se méně specifický soubor. Pokud si náš web zobrazí někdo s českým locale, nalezne se soubor _cs.properties, pokud by se připojil někdo s německým locale, hledal by _de.properties soubor. Ten by nenašel a hledal by soubor .properties a ten by také nenašel, takže by zobrazení skončilo s chybou. Takhle se klientovi s českým locale zobrazí český lokalizovaný text a klientovi s jiným locale se zobrazí text v angličtině.

WicketApplica­tion_cs.proper­ties

link.english=anglicky
link.czech=česky

WicketApplica­tion.properti­es

link.english=english
link.czech=czech

Nyní tedy máme .properties a je třeba říci, kde a jaké lokalizované texty se mají zobrazovat. K tomuto účelu má Wicket tag <wicket:message key="klíč_k_lo­kalizovanému_tex­tu"/>. Wicket za tento tag dosadí text z .properties soubory dle zadaného klíče.

BasePage.html

<div id="footer">
    <a href="#" wicket:id="en"><wicket:message key="link.english"/></a>
    <a href="#" wicket:id="cs"><wicket:message key="link.czech"/></a>
</div>

Dále by bylo dobré lokalizovat odkazy na domovskou stránku, stránku s fotografiemi a nadpis na stránce s fotografiemi. A když už v tom budeme, lokalizujeme i titulek stránky. Do properties souborů přidáme další lokalizované texty.

WicketApplica­tion_cs.proper­ties

menu.homePage=Domů
menu.photos=Fotky
text.photos=Fotky
title.homePage=Domovská stránka
title.photosPage=Fotografie

WicketApplica­tion.properti­es

menu.homePage=Home
menu.photos=Photos
text.photos=Photos
title.homePage=Home page
title.photosPage=Photos page

BasePage.html (lokalizace menu)

<div id="content">
    <div id="menu">
        <ul>
            <li><a href="#" wicket:id="homePage"><wicket:message key="menu.homePage"/></a></li>
            <li><a href="#" wicket:id="photosPage"><wicket:message key="menu.photos"/></a></li>
        </ul>
    </div>

    <wicket:child/>
</div>

<div id="footer">
    <a href="#" wicket:id="en"><wicket:message key="link.english"/></a>
    <a href="#" wicket:id="cs"><wicket:message key="link.czech"/></a>
</div>

PhotosPage.html (lokalizace nadpisu)

<wicket:extend>
    <h2><wicket:message key="text.photos"/></h2>

    <img wicket:id="img01"/>
    <img wicket:id="img02"/>
</wicket:extend>

Pro lokalizaci titulku nemůžeme použít wicket:message tag, protože text se předává v .java souboru. Pro přístup k lokalizovanému řetězci v Javě použijeme metodu getString("klíč_lokalizovaného_řetězce");.

PhotosPage.java

@Override
public String getTitle() {
    return getString("title.photosPage");
}

HomePage.java

@Override
public String getTitle() {
    return getString("title.homePage");
}

Také upravíme styly.

style.css

#footer {
    border-top: 2px solid black;
    text-align: right;
}

#footer a {
    text-decoration: none;;
    color: black;
    font-size: smaller;
    font-style: italic;
    padding: 5px;
}

#footer a:hover {
    text-decoration: underline;
}

Drobné upozornění. Jazyková verze titulku se změní až při přechodu na další stránku. Pouhé kliknutí na odkaz zde nestačí.

To by jako základ stačilo.

Příště, Wicket - Formulář a model, přidáme na naši stránku další interaktivitu - podíváme se na formuláře.