0
360|Flex
Indianapolis, IN
Oğuz Demirkapı
CTO | NicheClick Media | http://NicheClick.com


CREATING OUR FIRST I18N
(ÎÑŢÉRÑÄ...
About Me
 • CTO at NicheClick Media
 • Coding since ‘85, CGI Programming since ’94
 • ColdFusion Developer since ’97 (Flex...
Agenda

  What you may expect?
  i18N Theory & Basics
  Flex & i18N
  Resources
  Questions & Answers




i18N (Inter...
What You May Expect?

 Open Your Eyes, if;                                                              May be not for you...
Do we need multilingualism?

  Yes!




i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.d...
Why i18N (Internationalization)?

  English is just another language!
  The World Wide Web should be truly world-wide!
 ...
What is …?

  What is i18N (Internationalization)?
       Application functions in at least two locales
  What is L10N ...
Globalization & Localization

 Internationalization                                                             Localizati...
Character encoding

        Character encoding specifies mappings from a
        character set to the integer numbers that...
What is Locale?

  The combination of a language and a country code

        en_US: US English (color, $)
        en_GB: ...
Selecting Locale

  Manual
        • Default locale can be loaded and other options would
              be available by s...
Problems

  Charset Conversions                                                                    Collation
  Formatti...
What is Unicode?

  Unicode (unicode.org) is an character set for all the
   characters and symbols of the world.
  Unic...
Unicode (cont.)

  Why do we need to use Unicode?
        • Avoids data corruption
        • Single encoding for text in ...
Unicode (cont.)

  Non-Globalized Component
        • Does not use Unicode
        • Hard-coded date/time formatting & pa...
Unicode & Files

  UTF-8 is the recommended encoding for files.
  Use a Unicode capable editor (IDE)

  Flex Builder
  ...
Unicode & Database

  Use a robust database with right settings
        •     MS SQL Server
        •     MySQL Server
  ...
Flex & i18N

  Flex 3 has embedded i18N features

  It is possible to create i18N applications in Flex 2
        • Using...
Localization in Flex

  Resource Bundles
        • Idea is based on Java resource bundles technique
        • Every local...
Localization in Flex

  Beware that properties files in Flex encoded in
   UTF8.
  You can edit directly with a Unicode ...
DEMO


i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net   21
Localization in Flex - 2

  Properties files can be compiled as resource
   bundles
 OR
  Properties files can be loaded...
Localization in Flex - 3

  Flex lets you change locales on the fly
        • If you compile more than one resource bundl...
Accessing The Values in Resource Bundles

  Bind values from the resource to an expression
        •     @Resource direct...
Accessing The Values in Resource Bundles

  Compiling as Runtime Shared Libraries
        • Saves re-compiling your bundl...
Using the @Resource Directive

  Sample
        <mx:FormItem label=quot;@Resource(key=‘username',
          bundle=‘myRB'...
Using the ResourceManager

  Using the ResourceManager
        <mx:Metadata>
          [ResourceBundle(quot;myRBquot;)]
 ...
Using the Resource Classes

  On an ActionScript
        <mx:Script><![CDATA[
        import mx.resources.ResourceBundle;...
DEMO


i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net   29
Using a Class

  Can be used for programmatic skin
  The following example embeds the
   MyCheckBoxIcon_en_US class in t...
DEMO


i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net   31
Changing Locale in Runtime

  To be able to change the locale at run time without using
        resource modules, you com...
Formatting Date & Times

  DateFormatter and CurrencyFormatter can use
   resources
        THEMECOLOR=0x0000FF
        D...
Styles in Localized Resources

  Binding can be used
        themeColor=quot;{resourceManager.getUint('MyStyles', 'color'...
DEMO


i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net   35
Fonts in Localized Resources

  Resource Files
        TEXTSTYLE=myENFont
        TEXTSTYLE=myJAFont
  Application
     ...
AIR & i18N

  Generating via Flex
        • Flex i18N can be used
  Generating via HTML/JavaScript (Ajax)
        • Gene...
Resources

  Unicode
        http://unicode.org

  Flex 3 Documentations
        http://www.adobe.com/support/documentat...
Questions & Answers




                                                       Oğuz Demirkapı
                            ...
Upcoming SlideShare
Loading in...5
×

Oğuz Demirkapı - Hands On Training: Creating Our First i18N Flex Application (2 hours)

2,774

Published on

This session is designed to create a basic application which has i18N capability with static, dynamic content and database and other platform integration. Every possible integration points such as database, XML or web services etc. will be included in the application with samples. ColdFusion will be used as application server for integration samples.

Designed for 2 hours session and needs to have a laptop with Flex Builder installation. For integration samples, ColdFusion installation and one of the database engines of MySQL or MSSQL would be ideal.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
2,774
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Oğuz Demirkapı - Hands On Training: Creating Our First i18N Flex Application (2 hours)"

  1. 1. 360|Flex Indianapolis, IN Oğuz Demirkapı CTO | NicheClick Media | http://NicheClick.com CREATING OUR FIRST I18N (ÎÑŢÉRÑÄŢÎÖÑÅĻÎŽÅŢÎÖÑ) FLEX APPLICATION
  2. 2. About Me • CTO at NicheClick Media • Coding since ‘85, CGI Programming since ’94 • ColdFusion Developer since ’97 (Flex since ‘07) • Adobe Certified Expert • Founder and Manager (prev) of CFUG for Turkey • Manager of Orange County Adobe Developers User Group • Interested in ColdFusion, Flex, AIR, Ajax, Frameworks, i18N, L10N, G11N • Have big interest in Epistemology • Living in Dana Point, CA • Personal blog: http://blog.demirkapi.net i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 2
  3. 3. Agenda  What you may expect?  i18N Theory & Basics  Flex & i18N  Resources  Questions & Answers i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 3
  4. 4. What You May Expect? Open Your Eyes, if; May be not for you, if;  You are a i18N newbie  You are already using i18N  You heard that you should in Flex in production create i18N applications  You think I know everything  You need to get idea about about i18N implementation i18N usage on Flex   You want to get some tips i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 4
  5. 5. Do we need multilingualism?  Yes! i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 5
  6. 6. Why i18N (Internationalization)?  English is just another language!  The World Wide Web should be truly world-wide!  Internationalization is important to ensure that users worldwide can equally benefit from Web technology  Wide diversity world-wide: • Scripts (Latin, Cyrillic, Hebrew, Tamil, Katakana,...) • Languages (English, German, Turkish, Korean, Japanese,...) • Typographic conventions • Cultural conventions • Political circumstances  Avoid fragmentation of specifications due to localization  Make sure internationalization is done at the right place i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 6
  7. 7. What is …?  What is i18N (Internationalization)?  Application functions in at least two locales  What is L10N (Localization)?  Process of applying a locale or language quot;skinquot; to an i18N application  What is G11N (Globalization)?  i18N & L10N i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 7
  8. 8. Globalization & Localization Internationalization Localization  Single character set  Based on globalized  Single executable software  Single install  Adds specific translations and adaptations for  Single server serves all particular languages and clients in all languages markets Globalized software can be localized without any code changes i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 8
  9. 9. Character encoding Character encoding specifies mappings from a character set to the integer numbers that represent the characters on a computer.  EUC-JP (Japanese)  EUC-KR (Korean)  ISO-8859-1 (Western European and English)  SHIFT_JIS (Japanese)  UTF-8 (All Languages) i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 9
  10. 10. What is Locale?  The combination of a language and a country code en_US: US English (color, $) en_GB: British English (colour, £) de_CH: German in Switzerland tr_TR: Turkish in Turkey i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 10
  11. 11. Selecting Locale  Manual • Default locale can be loaded and other options would be available by selection via buttons/selects etc.  Locale Detection • Capabilities.language property in Flash Player and AIR • Parsing ‘Accept-Language’ header on HTTP request  Not usable with URLLoader • Parsing browser and OS language settings via JavaScript • Location detection depending on IP i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 11
  12. 12. Problems  Charset Conversions  Collation  Formatting & Parsing ◦ Searching, Sorting, Matching  Date & time  Segmentation  Messages ◦ word, line, …  Numbers & currencies  Transforms ◦ Normalization  Translated Names ◦ Casing  Languages, Regions (Countries), Scripts, Time zones, Currencies ◦ Transliterations  Unicode Regular Expressions  Calendar, Time Zone, Date/Time conversions  Complex-Text Display / Input  … i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 12
  13. 13. What is Unicode?  Unicode (unicode.org) is an character set for all the characters and symbols of the world.  Unicode provides a unique number for every character.  Except Klingon!  ‫ما هي الشفرة الموحدة quot;يونِكودquot; ؟‬ Unicode nedir? Τι είναι το Unicode Cos'è Unicode? 유니코드에 대해? Что такое Unicode? i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 13
  14. 14. Unicode (cont.)  Why do we need to use Unicode? • Avoids data corruption • Single encoding for text in all languages • Makes software globalization possible  Vastly reduces development cost  Vastly reduces maintenance, update and support cost  Switching to Unicode has no disadvantages for single language users, to the contrary it usually offers advantages even for single language users. And it offers great advantages for multilingual users.  Encoding: Use Unicode wherever possible for content, databases, etc. Always declare the encoding of content. i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 14
  15. 15. Unicode (cont.)  Non-Globalized Component • Does not use Unicode • Hard-coded date/time formatting & parsing • Hard-coded number & currency formatting & parsing • Hard-coded collation (sorting/searching/matching) • Other hard-coded operations • Hard-coded literals i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 15
  16. 16. Unicode & Files  UTF-8 is the recommended encoding for files.  Use a Unicode capable editor (IDE)  Flex Builder • Default encoding is UTF-8  Eclipse • Default encoding is Cp1252 • Change it into UTF-8  Window-> Preferences -> General -> Workspace  Text file encoding i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 16
  17. 17. Unicode & Database  Use a robust database with right settings • MS SQL Server • MySQL Server • PostgreSQL Server • Oracle  Beware of Unicode Support • MySQL 4.1 and up default-character-set=utf8 • MS SQL Server  SQL Server nvarchar, ntext etc. i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 17
  18. 18. Flex & i18N  Flex 3 has embedded i18N features  It is possible to create i18N applications in Flex 2 • Using ResourceBundle class • Different approaches such as XML usage etc. i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 18
  19. 19. Localization in Flex  Resource Bundles • Idea is based on Java resource bundles technique • Every locale has a localized version of properties files • Creating localized files may need resource bundle managers  Attesoro (attesoro.org)  Eclipse Plug-in (sourceforge.net/projects/eclipse-rbe/)  RBMan (Flex Application) (rbman.riaforge.org) • Binary assets such as audio files, video files, SWF files, and images can be referenced  flag=Embed(quot;images/flag_us.pngquot;)  Every locale needs to create localized properties files i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 19
  20. 20. Localization in Flex  Beware that properties files in Flex encoded in UTF8.  You can edit directly with a Unicode capable editor.  Most of the resource bundle editors will have issues with Unicode encoded properties files.  RBMan is the tool to manage all these and embed to your current applications. i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 20
  21. 21. DEMO i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 21
  22. 22. Localization in Flex - 2  Properties files can be compiled as resource bundles OR  Properties files can be loaded at run time by resource modules i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 22
  23. 23. Localization in Flex - 3  Flex lets you change locales on the fly • If you compile more than one resource bundle into an application, you can toggle the resource bundle based on the locale  If you compile resource modules • You can load and unload the SWF files at run time based on the locale • You can create new resource bundles programmatically  If your application supports many locales, you will likely want to load the appropriate resources at run time rather than compile all supported resources into the application at compile time. i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 23
  24. 24. Accessing The Values in Resource Bundles  Bind values from the resource to an expression • @Resource directive • Available only in MXML • Cannot change locales at run time • Only returns Strings  Methods of the ResourceManager class • Can be used also in ActionScript • Can return data types other than Strings, such as ints, Booleans, and Numbers (getNumber(), getBoolean()) • Can be used to switch locales at run time • Not supported in Flex Builder or ANT FlexTasks and needs to use command line i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 24
  25. 25. Accessing The Values in Resource Bundles  Compiling as Runtime Shared Libraries • Saves re-compiling your bundles every time while compiling the main application  Compiling into Component Modules • Separation of dependencies with the main application  Manually loading into the resourceManager at runtime • Remoting can be used to load the required resources from the server • Have to have a connection to the server retrieve the bundles • Modifiying the resource bundles on the server without having to re-compile / re-deploy the application is possible i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 25
  26. 26. Using the @Resource Directive  Sample <mx:FormItem label=quot;@Resource(key=‘username', bundle=‘myRB')quot;> <mx:TextInput/> </mx:FormItem>  Compile Parameters -locale=en_US -allow-source-path-overlap=true -source-path=locale/{locale} i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 26
  27. 27. Using the ResourceManager  Using the ResourceManager <mx:Metadata> [ResourceBundle(quot;myRBquot;)] [ResourceBundle(quot;myOtherRBquot;)] </mx:Metadata> i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 27
  28. 28. Using the Resource Classes  On an ActionScript <mx:Script><![CDATA[ import mx.resources.ResourceBundle; import mx.controls.Alert; private function registrationComplete():void { Alert.show(resourceManager.getString(‘myRB', 'thanks')); } ]]> </mx:Script> i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 28
  29. 29. DEMO i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 29
  30. 30. Using a Class  Can be used for programmatic skin  The following example embeds the MyCheckBoxIcon_en_US class in the properties file • CHECKBOXSKIN=ClassReference(quot;MyCheckBoxIcon_en_US quot;)  Binding the value of the getClass() method for programmatic skins <mx:CheckBox selected=quot;truequot; selectedUpIcon=quot;{resourceManager.getClass(‘myBundle','CHECKBOXSKIN')}quot; selectedDownIcon=quot;{resourceManager.getClass(‘myBundle','CHECKBOXSKIN') }quot; selectedOverIcon=quot;{resourceManager.getClass(‘myBundle','CHECKBOXSKIN')} quot; /> i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 30
  31. 31. DEMO i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 31
  32. 32. Changing Locale in Runtime  To be able to change the locale at run time without using resource modules, you compile all the available locales into the application at compile time by including them as part of the locale option • -locale=en_US,es_ES  The Flex application uses the list of locales in the localeChain property to determine precedence when getting values from resource bundles. If a value does not exist in the first locale in the list, the Flex application looks for that value in the next locale in the list, and so on. • localeComboBox.selectedIndex = locales.indexOf(resourceManager.localeChain[0]); i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 32
  33. 33. Formatting Date & Times  DateFormatter and CurrencyFormatter can use resources THEMECOLOR=0x0000FF DATE_FORMAT=MM/DD/YY TIME_FORMAT=L:NN A CURRENCY_PRECISION=2 CURRENCY_SYMBOL=$ THOUSANDS_SEPARATOR=, DECIMAL_SEPARATOR=. <mx:DateFormatter id=quot;dateFormatterquot; formatString=quot;{resourceManager.getString('FormattingValues', 'DATE_FORMAT')}quot; /> i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 33
  34. 34. Styles in Localized Resources  Binding can be used themeColor=quot;{resourceManager.getUint('MyStyles', 'color')}“  If the value is a color like 0xFF0000, use the ResourceManager's getUint() method  If the value is a class, like a programmatic skin, then use the getClass() method i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 34
  35. 35. DEMO i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 35
  36. 36. Fonts in Localized Resources  Resource Files TEXTSTYLE=myENFont TEXTSTYLE=myJAFont  Application <mx:Style> @font-face { src: url(quot;ENFont.ttfquot;); fontFamily: EmbeddedENFont; } @font-face { src: url(quot;JAFont.ttfquot;); fontFamily: EmbeddedJAFont; } .myENFont{ fontFamily: EmbeddedENFont; } .myJAFont{ fontFamily: EmbeddedJAFont; } </mx:Style>  In MXML <mx:Text styleName=quot;{resourceManager.getString(‘myFontsRB, 'TEXTSTYLE')}quot;/> i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 36
  37. 37. AIR & i18N  Generating via Flex • Flex i18N can be used  Generating via HTML/JavaScript (Ajax) • General techniques which are available in required platform can be used • Be careful on data transaction such as on JSON etc.  SQLLite • SQLLite database can be used to customize assets and literals i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 37
  38. 38. Resources  Unicode http://unicode.org  Flex 3 Documentations http://www.adobe.com/support/documentation/en/flex/ http://livedocs.adobe.com/flex/3/html/l10n_1.html  Flex.org  RBMan http://rbman.riaforge.org  My blog http://blog.demirkapi.net i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 38
  39. 39. Questions & Answers Oğuz Demirkapı ? http://blog.demirkapi.net 360Flex@demirkapi.net i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 39
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×