Lokalizacja rozszerzenia

« Poprzedni Następny »

Poniższy artykuł poszerza poprzedni przykład pisania wtyczek o dodanie wsparcia lokalizacyjnego do naszego rozszerzenia "stock watcher". Wykonanie kilka prostych kroków znacznie ułatwia zlokalizowanie wtyczki bez konieczności edytowania plików XUL-a lub JavaScriptu.

Jeśli jeszcze nie tworzyłeś rozszerzenia, lub chciałbyś sobie przypomnieć jak to się robi, to polecam zobaczyć poniższe artykuły:

Pobieranie przykładu

Możesz pobrać kod przykładu dla tegoż artykułu.

https://developer.mozilla.org/samples...ockwatcher.zip

Lokalizacja stringów w plikach XUL

Tworzenie plików locale

Każdy plik XUL zawierający interfejs użytkownika twojego rozszerzenia to powinien zawierać plik locale w swoim katalogu locale. Każdy plik locale file mapuje nazwy, do których się odwołują ciągi w plikach XUL. Okno dialogowe własności, dla plików XUL to options.xul ma odpowiadający mu plik options.dtd wyglądający jak poniżej:

 <!ENTITY options_window_title "StockWatcher 2 Preferences">
 <!ENTITY options_symbol.label "Stock to watch: ">

Encja "options_window_title" mapuje ciąg "StockWatcher 2 Preferences", który będzie użyty jako tytuł okna własności.

Plik stockwatcher2.dtd zawiera mapowanie dla pliku stockwatcher2.xul:

 <!ENTITY panel_loading "Loading...">
 <!ENTITY menu_refresh_now.label "Refresh Now">
 <!ENTITY menu_apple.label "Apple (AAPL)">
 <!ENTITY menu_google.label "Google (GOOG)">
 <!ENTITY menu_microsoft.label "Microsoft (MSFT)">
 <!ENTITY menu_yahoo.label "Yahoo (YHOO)">

Aktualizacja plików XUL

Każdy plik XUL musi posiadać odpowiadający mu plik locale. Musimy również zaktualizować kod, by używać encji zamiast strumieni, tak by podmiany bazowały na aktualnie aktywnej lokalizacji.

W celu dodania odnośnika do odpowiedniego pliku locale dla danego plika XUL-a należy dodać następującą linię do pliku XUL-a. Do pliku options.xul, dodajemy:

 <!DOCTYPE window SYSTEM "chrome://stockwatcher2/locale/options.dtd">

Następnie dodajemy podobną linię do pliku stockwatcher.xul:

 <!DOCTYPE overlay SYSTEM "chrome://stockwatcher2/locale/stockwatcher2.dtd">

Dla większych aplikacji może zachodzić potrzeba używania encji z większej liczby plików locale w pojedynczym pliku XUL. Artykuł Zastosowanie wielu plików DTD opisuje jak tego dokonać.

Zauważ, że adresy URL plików DTD nie zawierają nazwy lokalizacji jaką należy użyć. Rejestr chrome przetwarza URI bazując na aktualnych ustawieniach językowych użytkownika oraz danych w twoim manifeście Chrome.

Następnie zastępujemy po prostu strumień tekstu w plikach XUL na odpowiednie encje. Przykładowo w stockwatcher2.xul zmieniamy linię:

 <menuitem label="Refresh Now" oncommand="StockWatcher.refreshInformation()"/>

na:

 <menuitem label="&menu_refresh_now.label;" oncommand="StockWatcher.refreshInformation()"/>

Należy tego dokonać dla każdego strumienia we wszystkich plikach XUL.

Aktualizacja manifestu chrome

Aby dodać nowe lokalizacje, musimy uaktualnić plik chrome.manifest dodając po jednej linii dla każdej lokalizacji:

 locale stockwatcher2 en-US chrome/locale/en-US/

To informuje Firefoksa o tym, że lokalizacja en-US jest umieszczona w katalogu chrome/locale/en-US.

Lokalizacja stringów w kodzie JavaScript

Jeśli twój kod JavaScriptu zawiera stringi, które należałoby zlokalizować jak jest to pokazane w naszym przykładzie "stock watcher", musimy uczynić je lokalizowanymi. Można to zrobić poprzez przeniesienie do paczki stringów. Są one tworzone poprzez określenie pliku własności mapującego klucze na wartości stringów. Szczegółowych wyjaśnień należy szukać w artykule Kurs XUL:Plik własności.

Tworzenie pliku własności

Najpierw musimy stworzyć plik własności dla strumieni literałów używanych w kodzie JavaScriptu w stockwatcher2.js:

changeString=Chg:
openString=Open:
lowString=Low:
highString=High:
volumeString=Vol:

Plik <tt>stockwatcher2.properties</tt> przedstawiony powyżej pokazuje mapowanie 5 kluczy (changeString, openString, lowString, highString i volumeString) na odpowiedni tekst angielski.

Tworzenie paczki strumieni

Kolejnym krokiem jest zmodyfikowanie pliku <tt>stockwatcher2.xul</tt> w celu stworzenia odnośnika do tego pliku własności. Tworzymy paczkę strumieni za pomocą następującego kodu:

 <stringbundleset id="stringbundleset">
   <stringbundle id="string-bundle" src="chrome://stockwatcher2/locale/stockw...er2.properties"/>
 </stringbundleset>

Nowa paczka została stworzona i do niej odnosi się teraz ID "string-bundle", którego klucze oraz wartości należy załadować z pliku stockwatcher2.properties stworzonego uprzednio.

Aktualizacja kodu JavaScriptu

Jesteśmy teraz gotowi do przejrzenia kodu JavaScriptu, by załadować strumienie z paczki strumienia zamiast używać strumieni literałów. Dotyczy to przepisania funkcji refreshInformation() dla wczytania strumieni oraz funkcji infoReceived(), by używać wczytanych, zlokalizowanych strumieni zamiast strumieni literałów. Dodajemy do refreshInformation() następujący kod:

 var stringsBundle = document.getElementById("string-bundle");
 var changeString = stringsBundle.getString('changeString') + " ";
 var openString = stringsBundle.getString('openString') + " ";
 var lowString = stringsBundle.getString('lowString') + " ";
 var highString = stringsBundle.getString('highString') + " ";
 var volumeString = stringsBundle.getString('volumeString') + " ";

Kod odnosi się do elementu paczki strumieni dodanych w pliku <tt>stockwatcher2.xul</tt> poprzez wywołanie document.getElementById(), gdzie ID to string-bundle. Następnie pobiera pojedynczo wszystkie potrzebne strumienie z paczki wywołując metodę getString() i przekazując odpowiedni klucz dla każdego strumienia.

W tym przypadku dodajemy również spacje do końca każdego strumienia. Jest to po prostu sposób działania tegoż programu, a nie coś co należy robić.

Następnie zastępujemy każdy strumień literałów odpowiednią zmienną:

 samplePanel.tooltipText = changeString + fieldArray[4] + " | " +
     openString + fieldArray[5] + " | " +
     lowString + fieldArray[6] + " | " +
     highString + fieldArray[7] + " | " +
     volumeString + fieldArray[8];

Lokalizacja opisu w install.rdf

Zobacz Lokalizacja opisu rozszerzenia.

Dodawanie innych lokalizacji

W celu dodania nowej lokalizacji należy dodać linię do manifestu chrome odwołującą się do tegoż języka. Przykładowo, jeśli chcesz dodać język hiszpański linia ta wyglądać będzie następująco:

 locale stockwatcher2 es-ES chrome/locale/es-ES/

Następnie stwórz podkatalog chrome/locale/es-ES i dodaj wszystkie potrzebne pliki DTD; w tym przypadku to options.dtd oraz stockwatcher2.dtd. Powyższe pliki powinny mapować te same znaczniki do hiszpańskiego tłumaczenia strumieni używanych przez rozszerzenie.

Podobnie jest, gdy posiadamy jakieś pliki własności zawierające lokalizowane strumienie w kodzie JavaScriptu. Musimy stworzyć zlokalizowaną wersję tychże plików własności w katalogu chrome/locale/es-ES. Tylko strumienie powinny być lokalizowane; klucze powinny być takie same dla każdej lokalizacji.

« Poprzedni