5. diel - Wicket - Internacionalizácia a lokalizácia

V predchádzajúcom kvíze, Kvíz - Založenie Wicket projektu, HTML dedičnosť a štylovanie, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

Už máme nejaký základ, ale určite by bolo vhodné, aby sa stránka zobrazila zahraničným návštevníkom Lokalizované.

Internacionalizácie a lokalizácia

"Internaciona­lizácia je takýto zápis zdrojového kódu programu, že môže bez jeho zmeny program pracovať v rôznych jazykových prostrediach. Lokalizácia je potom vytváranie externých databáz, ktoré obsahujú preklady jednotlivých hlásenia programu a definícií konkrétnych jazkykových odlišností." Wikipedia

"Internaciona­lizácia je operácia, po ktorej sú možné následné ďalšie lokalizácie. Je to operácia (jednorazová!), Po ktorej program alebo množina programov začlenená do jedného balíka je schopná podporovať viac jazykov. Lokalizácia je operácia pri ktorej v už internacionali­zovaných programoch sú poskytnuté informácie také , že môžu vykonávať svoje vstupy a výstupy v tvare, ktorý je správny pre prirodzené jazyky a kultúrne zvyky. v podstate internacionalizácie je oblasťou skôr programátorskú a lokalizácia skôr prekladateľskou. " Wikipedia

Internacionalizácia vo Wicket je postavená na podpore internacionalizácie zabudované v Jave. Wicket tiež používa ResourceBundle, čo je .properties súbor obsahujúci kľúč (názov hodnoty) a lokalizovanú hodnotu. Pre každý jazyk je potrebné mať vlastný .properties súbor. Názvy súborov potom vyzerajú nasledovne: nazevSouboru_en­.properties (angličtina), nazevSouboru_cs­.properties (Čeština), kedy nazovSouboru zodpovedá názvu triedy. Súbory .properties je potrebné mať umiestnené v balíčku, kde sa používajú alebo v nadradenom balíčku. Vzhľadom na to, že my máme malú aplikáciu, všetky .properties súbory budeme ukladať do balíčka cz.mujweb. Budú teda prístupné pre všetky naše triedy.

Najskôr si vytvoríme dva odkazy, ktoré budú meniť aktuálny lokalizácii (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é vysvetlenie. tento zápis

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

je rovnaký ako tento, len sa ušetrí riadok kódu a nie je nutné vymýšľať názov premennej.

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

Záleží na vás, ktorý spôsob budete používať ...

Ak si teraz zobrazíte stránky, zistíte, že síce pribudli dva odkazy, ktoré ale po kliknutí nič nerobia. Presnejšie povedané, nerobia nič viditeľného. Odkazy po kliknutí zmení aktuálny lokalizáciu, ale vzhľadom k tomu, že zatiaľ aplikácia nie je lokalizovaná, nič sa nestane.

Teraz si vytvoríme .properties súbory s textami lokalizovanými pre daný jazyk. Properties súbory sú v Jave používajú kódovanie ISO 8859-1, čo má tú nevýhodu, že znaky slovenskej abecedy s diakritikou nemožno priamo zadať. Je potrebné použiť Unicode escape syntax (napr. \ U010D znamená č). Tento spôsob zápisu je dosť nepraktický, a preto je vhodné použiť properties editor, ktorý Eclipse ponúka (mal by sa spustiť automaticky po dvojkliku na .properties súbor v Eclipse).

Vytvoríme si dva súbory: WicketApplica­tion_cs.proper­ties a WicketApplica­tion.properti­es a umiestnime ich do balíčka k triede WicketApplication. Tam budú prístupné všetkým našim triedam. Možno ste si všimli, že miesto WicketApplica­tion_en.proper­ties vytvárame súbor WicketApplica­tion.properti­es. Súbor s lokalizáciou sa vyhľadáva tak, že sa najprv vyhľadáva najšpecifickejšie .properties súbor. Ak nie je nájdený, hľadá sa menej špecifický súbor. Pokiaľ si náš web zobrazí niekto s českým locale, nájde sa súbor _cs.properties, ak by sa pripojil niekto s nemeckým locale, hľadal by _de.properties súbor. Ten by nenašiel a hľadal by súbor .properties a ten by tiež nenašiel, takže by zobrazenie skončilo s chybou. Takto sa klientovi s českým locale zobrazí český lokalizovaný text a klientovi s iným locale sa zobrazí text v angličtine.

WicketApplica­tion_cs.proper­ties

link.english=anglicky
link.czech=česky

WicketApplica­tion.properti­es

link.english=english
link.czech=czech

Teraz teda máme .properties a je treba povedať, kde a aké lokalizované texty sa majú zobrazovať. Na tento účel má Wicket tag <wicket: message key = "klíč_k_lokali­zovanému_textu" />. Wicket za tento tag dosadí text z .properties súbory podľa zadaného kľúča.

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>

Ďalej by bolo dobré lokalizovať odkazy na domovskú stránku, stránku s fotografiami a nadpis na stránke s fotografiami. A keď už v tom budeme, lokalizujeme aj titulok stránky. Do properties súborov pridáme ďalšie 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 (lokalizácia 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 (lokalizácia nadpisu)

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

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

Pre lokalizáciu titulku nemôžeme použiť wicket: message tag, pretože text sa odovzdáva v .java súbore. Pre prístup k lokalizovanému reťazcu v Jave použijeme metódu 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");
}

Tiež upravíme štýly.

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é upozornenie. Jazyková verzia titulku sa zmení až pri prechode na ďalšiu stránku. Samotné kliknutí na odkaz tu nestačí.

To by ako základ stačilo .. Nabudúce pridáme na našu stránku ďalšiu interaktivitu - pozrieme sa na formuláre.