extjs localization

Upload: dumitrita-margineanu

Post on 18-Oct-2015

597 views

Category:

Documents


0 download

DESCRIPTION

Describes steps and techniques to implement localization in ExtJs. Source code, examples.

TRANSCRIPT

ExtJs Localization

Implementation techniques31-Mar-14ExtJs Localization 1

ExtJs Localization

1Agenda31-Mar-14ExtJs Localization 2DefinitionExtJs localization - StaticExtJs localization - DynamicExisting ApproachesDemo ApplicationL10N Requirements 2Definition31-Mar-14ExtJs Localization 3

La o privire mai atenta asupra conceptelor am inteles ca nu aveam notiunea exacta a termenului LocalizationTranslation -> adreseaza doar componentele text ale aplicatiei si vizeaza spelling si grammar

Localization -> un proces care cuprinde pe langa traducere si adaptarea componentelor grafice, adoptarea monedei locale, folosirea unor editoare adecvate pentru data, adrese, numere de telefon probabil chiar culori adecvate unei anumite zone

Rezumand eu voi urmari doar modalitati de implementare a traducerii si schimbarea in timp real a optiunii de limba3ExtJs localization31-Mar-14ExtJs Localization 440 language files

extjs/locale/ext-lang-_.js

Pachetul de ExtJs contine fisiere de localizare pentru 40 de limbi . Acestea au denumirea sub forma : ext-lang-indicator de limba_indicator de tara (unde este cazul vezi portugheza -> Brazilia si PortugaliaFisierele contin traducerea pentru texte, labeluri si mesaje continute de componentele default si formatarea localizata pentru data, moneda, valori numerice

4ExtJs localization31-Mar-14ExtJs Localization 5StaticCreate gui component

Add script tag with locale file Translate custom texts

Show me the code

O sa urmarim acum un exemplu de localizare in mod static :Un dezavantaj la acest exemplu : user-ul nu are posibilitatea sa schimbe limba; comunicarea din punctul acesta de vedere este unidirectionala server->client5ExtJs localization 31-Mar-14ExtJs Localization 6DynamicSelect language -> combo, country flag, etc.Encode to the url -> Ext.urlEncodeCreate locale file path -> Ext.util.Format.format ("../../locale/ext-lang-{0}.js", lang);Insert script -> Ext.Loader.injectScriptElementRecreate the gui Show me the exampleCand am citit in documentatia de la Sencha prima data titlul Dynamic localization la exemple m-am bucurat ca etapa de analiza si cercetare pentru aplicatie a fost foarte scurta yet I had to dig deeper6Existing approaches31-Mar-14ExtJs Localization 7LocaleManager by Sencha team developerJson locale files Change language -> Ajax request Keep changesOverride the required component from ExtJs LocaleLoader by Jordy TheillerClass with properties locale filesLocale folder Unable to change the languageDefault language texts are mixed with code

7Existing approaches cont31-Mar-14ExtJs Localization 8Calendar by FeyaSoftClass with properties locale filesChange language->Ajax requestPersist changes

8Demo Application31-Mar-14ExtJs Localization 9Pros:Object definition for locale filesCreate user-lang property in localStorageNo overridesLoading only the specified locale fileCons:No data persistingShow me the example9L10N Requirements31-Mar-14ExtJs Localization 10change language dynamicallyseparate translation filesload one locale file at a timesynchronized locale filesnaming convention for the locale keys intuitive locale file structurepersistence of changes1.Utilizatorul are posibilitatea sa aleaga limba

2. Localizarea e un proces dinamic se impune o separare a codului de fisierele cu textele traduse. Oricand sa se poate face modificari sau sa se adauge noi traduceri in alte limbi fara impact mare asupra codului existent. Plug and play if possible

3.Unele implementari implica generarea unui fisier static cu toate locale-urile fi il folosesc -> extra overhead la build, maintenance in synch

4. Ar fi util un mecanism de verificare a sincronicitatii fisierelor ; keep track of the translated fields5. 10References31-Mar-14ExtJs Localization11http://docs.sencha.com/extjs/4.2.1/#!/apihttp://en.wikipedia.org/wiki/Language_localisationMastering Ext JS - Loiane Groner stackoverflow.comhttps://github.comhttp://en.wikipedia.org/wiki/Language_localisation1112To Be Continued31-Mar-14ExtJs Localization12