• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Oğuz	Demirkapı - Hands On Training: Creating Our First i18N Flex Application (2 hours)
 

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

on

  • 4,762 views

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 ...

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.

Statistics

Views

Total Views
4,762
Views on SlideShare
4,731
Embed Views
31

Actions

Likes
1
Downloads
38
Comments
1

2 Embeds 31

http://www.slideshare.net 20
http://wiki.github.com 11

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 360|Flex Indianapolis, IN Oğuz Demirkapı CTO | NicheClick Media | http://NicheClick.com CREATING OUR FIRST I18N (ÎÑŢÉRÑÄŢÎÖÑÅĻÎŽÅŢÎÖÑ) FLEX APPLICATION
    • 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
    • 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
    • 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
    • Do we need multilingualism?  Yes! i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 5
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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 at run time by resource modules i18N (Internationalization) in Flex Applications | Oğuz Demirkapı | http://blog.demirkapi.net 22
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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 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
    • 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 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
    • 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
    • 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
    • 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 <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
    • 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
    • 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
    • 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