Posts in Category "Tutorials"

Sharing localized eLearning courses across social media via Adobe Captivate

Adobe Captivate is an electronic learning tool which can be used to author software demonstrations, software simulations, and randomized quizzes in swf and HTML format which can be converted and uploaded to video hosting websites. This content can be shared over Facebook and Twitter to make eLearning a very simple and interesting task. Adobe Captivate is shipped in 7 locales – English, French, German, Japanese, Spanish, Korean  and Portuguese but courses and demonstrations can be created in other languages as well and we can share these localized courses very easily. Getting an online content in native language sets learners free of their dependency on English locale.

Creating localized eLearning courses 

Below steps guide that how simple it is to share your high quality creations and demonstrations on YouTube and further over twitter/Facebook via Adobe Captivate 7 without even having much prior knowledge of the product. It will also highlight some of the trivial yet important issues which might prevent users to share content in English as well as non-English locales. This solution can be helpful to many native content creators.

1. Launch Captivate and select Video demo or Software Simulation from Start up page. Software simulation records events such as mouse click, keyboard entry, and system events and create slides accordingly. Video demo lets you create a single video which can be directly published to mp4 file.

111

2. Select the application or screen area which you want to demonstrate and select default presets for idevices(iphone, ipad), YouTube or customize it as per requirement. Select panning mode to focus screen areas manually/automatically with mouse movement.

2

 3. Select “settings” button and go to Global Preferences. And select the language in which you want to generate the captions. Captions are generated automatically in case of software simulations which help in guiding throughout the training. Captivate allows you to create captions in multiple locales present in the list. They can be edited manually if required.

3

11                   Captions can be generated in any of the languages selected by the user.

4. Add audio narration to your demo by selecting proper audio input device. System audio can be added as well to the projects along with narration.

4

5.  After all settings click record button. Add narration and keep demonstrating your project. After completion hit END or click system tray icon in task bar.

6. The video will play before you and there is option to edit it but if it is properly recorded just click “YouTube”. Click the Folder icon to publish it locally as mp4 file. (This can be shared as standalone file as well) . You can adjust the aspect ratio, quality, FPS in this workflow. Even after getting a copy store at your machine captivate asks about YouTube publish as well.

5

6

Edit Mode: If the video needs some correction click “Edit” and modify the video. Cutting of extra video, zooming on important areas, split of video into two parts, inserting objects, inserting another PIP (picture in picture) video is possible in edit mode.

Sharing courses on YouTube, Facebook & Twitter

1. Publish to YouTube:

If you already have a YouTube account, enter your credentials and accept the license agreement and Log in to YouTube.

For new users with no YouTube account, click over new user and you’ll be redirected to sign up page for Google. Create your account and after successful creation come right back to Adobe Video Publisher and enter your details. Many a times users face an issue that even if after successful creation of account they are not able to login and face an error that specified user name/password incorrect although on YouTube they can log in with same credentials.

7

  8

The issue is that every new account on YouTube needs verification. Without account being verified you cannot upload your video. To verify the account you can create your YouTube channel or verify via your phone.(This applies to Adobe Presenter Video creator as well)

Once you have logged in add description to your video and mark it under proper category public/private and UPLOAD! You can further view you video on YouTube or copy link to share with peers.

2. Publish to Facebook and Twitter

To share the course on Facebook/twitter check respective buttons and POST.

9

Sometimes user might face a blank dialog or a dialog saying internal error occurred when they post video on Twitter and issue is not easily isolated. Even restart/republish does not lead to any success. 

10

The reason behind this is oAuth issue. We have to ensure that system’s time stamp is in Sync with Twitter’s. Twitter returns the current time in the “Date” HTTP header with every request. If your request fails due to a time stamp mismatch, use this time to determine the delta between the system clock and its server clock and adjust your oAuth_time stamps for subsequent requests accordingly. So all you need to check is that system time is set same as per proper time zone and you have not modified it. For eg. If your time zone is (US and Canada) Eastern Time then your system time should be same as current time of that region only else twitter won’t return your request. And you’ll get internal error. This issue can occur with people following different locales who may set their zone to some other region and system time to their own region. Can refer https://dev.twitter.com/discussions/204  for more details.

(Also applicable to Adobe presenter video creator.)

By following the above simple steps, students can now use their own Facebook/Twitter accounts to learn more by enrolling in these courses. It will be a great experience to learn via social networking portals . So start recording and sharing your projects in ADOBE CAPTIVATE and share them worldwide to connect with more and more people and encourage eLearning – the most fast and efficient learning practice.

Adobe Flash – Content Creation & Localization Guidelines

Global publishing with Adobe Digital Publishing Suite

This article was originally written in English. Text in other languages is provided via machine translation.

Digital publishing is a global business

Digital publishing is catching on worldwide, as international catalog, magazine and book publishers are increasingly producing digital versions of their publications, in an growing number of languages.

[tp no_translate="y"]Adobe Digital Publishing Suite[/tp] (DPS) offers digital publishers with the ability to create multilingual content for the enjoyment of their international readers. This article provides some basic information about the creation of multilingual publications with DPS.

Content localization: region-specific vs language-specific

Region-specific publications carry the main brand (of the magazine, retailer, etc), but are customized to an individual region or country. In the case of magazines, articles are written by local authors, often covering topics and people of local significance.

Language-specific publications translated versions of a single source of content. The articles and authors are the same, the only thing that changes is the language of the content.

Presenting the translated content

With language-specific publications, there are a few different ways to present the translated content, which can impact layout decisions.

The most common type of presentation is single-language, where each language version of the publication is downloadable as a separate application.

Multilingual applications can contain two or more sets of translations of the original content. The translations can be presented through toggling or side-by-side.
With the toggling approach, readers can navigate between content written in different languages by pressing a ‘language switch’.

The article toggling effect provides a smooth user experience, but it does require additional work (i.e. scripting) behind the scenes to make it happen.

The side-by-side approach puts the translations next to each other, typically with different font types, sizes and colors.

Authoring content in different languages

At the core of the DPS workflow is Adobe InDesign, which allows text authoring in many languages. The latest version of the product (CS6) is available in 3 flavors providing distinct levels of language support:

  • InDesign CS 6.0 - Provides core typographical support for a wide range of languages, including those written in certain non-western scripts. It’s localized into English and 16 other European languages.
  • InDesign CS 6.0 ‘CCJK’  – In addition to the core set of typographical features, provides typographical, layout grid and frame grid features for editing East Asian text. It’s localized into Chinese Simplified, Chinese Traditional, Japanese and Korean.
  • InDesign CS 6.0 ‘ME’ - In addition to the core set of typographical features, this version provides full support for bi-directional languages such as Arabic, Hebrew, Farsi, and Urdu. Find out more about the Middle Eastern features here. The ME version is available in English and French user interfaces.

The linguistic capabilities of InDesign are well documented in the product’s help pages, and in articles written by various InDesign experts. Below are some language-specific topics that can assist in the creation of multilingual content in InDesign:

Creating localizable content 

In multilingual digital publishing, a critical aspect of content authoring  – regardless of the language it’s originally written in – is to ensure that it’s localizable, i.e, that it can be easily adapted into (an)other language(s). Below are a few guidelines for creating localizable content in InDesign:

  • Allow for text expansion – Word length varies considerably from one language to another. For example, German and Finnish sentences are on average longer than English. Also, Asian fonts require more vertical space than Latin fonts in order to render certain complex symbols clearly. Thus, it’s important to keep some buffer space around text so that translations can fit it nicely.
  • Apply styles – It’s critical that all text formatting is based on styles, as it ensures consistent formatting across all languages, and it allows for easily changing fonts for languages whose characters are not supported by the font of the source document.
  • Link images - Linked images are much easier to manage during translation
  • Connect text frames – This will ensure text will continue to flow nicely after it’s translated.

More guidelines on content localizability with InDesign will be provided in a future post.

Localizing the content

Localization of InDesign files is typically performed by professional translation agencies, who handle exported IDML (InDesign Markup Language) files in commercial translation management systems (TMS). Ben Cornelius’ article provides a good overview of this process.

Also, some vendors are starting to offer new and innovative ways to localize InDesign content, such as 1i0’s one2edit WYSIWYG tool.

But regardless of the way the content is localized, it’s very important that the work comprehensive: everything, including not only the article text, but also titles, captions, headers, footers, footnotes, and art, should be translated or adapted.

For maximum coverage, even media features, such as audio or video clips, should be subtitled and translated, or dubbed.

Below are some examples of locale-sensitive conventions – dates and times – that need to be adapted for each region.

Publishing the content: DPS multilingual options

The bulk of the process for publishing localized or multilingual content with DPS is not any different than English or single-language content, which is described here.

But, there are a few multilingual options available.

For publications written in bi-directional languages such as Arabic, Farsi, Urdu and Hebrew, readers expect to be able to swipe pages by moving their finger from left to right (ie in the opposite direction than in an English publication), thus right edge binding is necessary. 

To do activate this feature, in the [tp no_translate="y"]Digital Publishing Suite[/tp], select Right Edge Binding in the [tp no_translate="y"]Folio Producer[/tp] page.

You can also set this in In InDesign, by selecting the Right Edge Binding  checkbox in the [tp no_translate="y"]Folio Properties[/tp] dialog.

3eesho is a fine example of a bi-directional publication created with DPS.

Language tagging

Tagging your publication with language information will allow it to be searched by language from e-stores. This can be done during the building of your viewer application, in the [tp no_translate="y"]Viewer Builder[/tp]:

Localized versions and availability

The [tp no_translate="y"]Digital Publishing Suite[/tp] user interface is currently localized into English (UK, US), French, German, Italian, Spanish, and Japanese.

DPS Single Edition is available in the U.S., Canada, and Mexico. Availability is expected this year in Australia, Austria, Belgium, Bulgaria, Cyprus, Czech Republic, Denmark, Estonia, Finland, France, Germany, Greece, Hungary, Ireland, Italy, Japan, Latvia, Lithuania, Luxembourg, Malta, New Zealand, Norway, Poland, Portugal, Romania, Slovakia, Slovenia, South Africa Netherlands, Spain, Sweden, Switzerland, and the United Kingdom.

Examples of multilingual publications created with [tp no_translate="y"]Adobe Digital Publishing Suite[/tp]

Check out many examples of multilingual digital publications created with [tp no_translate="y"]Adobe Digital Publishing Suite[/tp] by visiting the Digital Publishing gallery.

Globalization Myth Series – Myth 1: Software Globalization = Internationalization = Localization = Translation

This article was originally written in English. Text in other languages is provided via machine translation.


Probably the biggest misconception we encounter when talking with some colleagues from outside the Adobe Globalization team is that software “Globalization”, “Internationalization” and  “Localization” all mean the same thing, and that thing is somehow related to something almost anyone can understand: Translation.

We can’t blame our colleagues for holding such misguided beliefs, as these terms have been used and abused for generations.

It probably doesn’t help that there are also terms in use such as “Culturalization”, “World-Readiness”,  “Glocalization”, “Transliteration”, “Transcription”, “Localizability”,  and “Japanization”.

The fact that each of these have corresponding abbreviations (e.g. G11n, I18n, L10n, T9n, C13n,  L12y) and also different spellings (“Globalisation”, “Internationalisation”, “Localisation”, etc.) just helps make the whole thing more scary and confusing to civilians.

This article hopes to clarify these differences, and provide a better understanding of the various steps that make up  software globalization.

Clarifying the terminology

We’ll focus our explanations around a few key basic terms that generate the most confusion. One thing to be aware of is that although the meaning of some tasks such as ‘translation’ and ‘localization’ are standard across the industry, some other terms such as ‘globalization’ and ‘internationalization’ are not. The definitions provided here are the predominant ones (which we use at Adobe).

Internationalization (commonly abbreviated as I18n) is an engineering exercise focused on generalizing a product so that it can handle multiple languages, scripts and cultural conventions (currency, sorting rules, number and dates formats…) without the need for redesign. Internationalization, sometimes referred to as world-readiness, can be divided into two sets of activities: enablement and localizability.

Localization (L10N) is the process of adapting a product or service to a particular language, culture, and desired local “look-and-feel”. Translating the product’s user interface is just one step of the localization process. Resizing dialogs, buttons and palette tabs to accommodate longer translated strings is also part of localization.

Translation (T9N) is simply converting the meaning of text in one language into another. In a software product, the content that are translated are user interface, documentation, packaging and marketing collaterals. Most translation work is done by professionals, although in recent years, some companies started exploring the use of ‘community’-translation, and machine-translation.

Globalization (G11N) refers to a broad range of engineering and business development processes necessary to prepare and launch products and company activities globally. The globalization engineering activities are composed of internationalization and localization  while the business development activities focus on product management, financial, marketing and legal aspects.

World-Readiness is an equivalent term to Globalization, but it’s more often used in the context of internationalization.

How do they relate to each other

The simplified diagram below illustrates the relationship between the main globalization-related activities.

In summary, in the context of software:

  • Translation is one part of Localization
  • Internationalization is a pre-requisite of Localization
  • Internationalization and Localization are parts of Globalization
  • Globalization includes many business-related activities outside of the product itself.

A real-life analogy

Still having trouble understanding? Let’s make an analogy to a product everyone is familiar with: an automobile.

The Toyota Corolla is one of the most successful cars of all time. Over 30 million of them have been sold worldwide. But, had its makers not adopted the basic principles of globalization back in the 60s, the Corolla would hardly be known outside Japan today.

So, to achieve such success, Toyota had to:

  • Embrace early on the idea that they wanted to reach markets outside Japan. They set up a world-wide network of in-country marketing, sales and customer support organization. (Globalization)
  • Design and develop a car that could be easily adapted to other geographical markets with minimum cost and effort (Internationalization)
  • Adapt cars to specific geographical markets. For example, for the U.S., Canada and most of Europe, the steering wheel and pedals were easily moved to the left side of the car without structural changes. (Localization)
  • Provide instruction manuals in the language of the market. (Translation)


Example of localization of an automobile user interface

Where the problem lies

So what is the impact of this ‘generalization’ of terminology to the software globalization process?

The main problem is that most product teams look at globalization as a single monolithic process that occurs sometime after design and implementation of the English product, and owned by a single team (the ‘Globalization’ team). This mindset encourages a “throw-over-the-wall” approach which often results in:

  • Additional core engineering and testing effort to resolve critical internationalization issues found late in the schedule
  • Additional localization engineering and testing effort to manually handle localizability issues
  • Higher number of product defects
  • Schedule delays
  • Poorer customer experience

Using the automobile analogy in the previous section, a “throw-over-the-wall” approach would mean that, to adapt a Toyota Corolla designed for Japanese customers to the American market, engineers would need to move the engine or the suspension system in order to move the steering wheel and pedals from the right side to the left side of the car – an expensive and time-consuming operation.


Internationalization helps prevent this

The short story (key takeaways)

  • Globalization, internationalization and localization are related but different activities, performed by different teams at different stages of product development
  • Incorporate Globalization into your thinking as early as possible. Start during design. Ask yourself: which worldwide markets am I targeting in the short term and long term? What do these customers need? If you just think about today’s markets you will ignore globalization.
  • Implement an internationalized product even if you don’t think you will sell outside the U.S. or to non-English-speaking customers, because this decision can easily change and then alterations will be very expensive. If your product is successul in one market, you will most likely have great business opportunities abroad. So, plan for it.
  • Internationalization should be primarily performed by the product’s core engineering team. Do it once, do it right, then hand it over to localization.
  • The localization process will be a lot easier and cheaper if the product is well-internationalized.

The most successful global corporations have instilled Globalization as part of all its employees’ “DNA”. In order for a company or product team to be successful internationally, there must first be a conscious decision from executives and the buy-in from everyone involved in the design and development of a software product to go international. This means that, unless the product and the entire infrastructure surrounding it are not ready to capitalize on the opportunities present in an international market, the global revenue potential of the product will never be fully achieved, or at a prohibitive cost only.

See also

Globalization Myth Series – Myth 2: This product is only for the U.S.

 

Invoking ICU from Adobe AIR Applications (Part 2): using Flash Builder 4.6

This article was originally written in English. Text in other languages was provided by machine translation.

In my previous blog article http://blogs.adobe.com/globalization/invoking-icu-from-adobe-air-applications-2, I demonstrated using the AIR3 ActionScript Native Extensions feature to invoke ICU from an AIR application. I used the AIR developer tools to compile and build various components. In this article, I demonstrate the same using the prerelease version of Adobe Flash Builder 4.6. It is much simpler to do this in Flash Builder avoiding the cumbersome command line.

The prerelease version of Adobe Flash Builder4.6 has a new Flex SDK version 4.5.2, which has AIR3 integrated. Please download the sample files as follows.

You will need the following software to build an ICU extension for AIR platform.

1         Building ICU extension for Adobe AIR

Adobe AIR t native extensions, also known as ‘ane’ or ‘ANE’ files are archived packages. These consist of

  • ActionScript wrapper classes calling into external DLLs
  • The external DLLs
  • XML file describing details of external DLLs

The archived ANE files are used just like SWC libraries in integrating into an AIR application. In other words, ANE file is a library and it has public ActionScript APIs.

Covering all details about the ActionScript extension is too much for this blog article, but I will explain the steps to build this sample and run. Below are the sequential steps and commands.

1.1       Building Windows AIR ICU Extension DLL

1)      The AirIcuExtensionWin folder has the Visual studio solution ‘AirIcuExtension.sln’. Open this in MS VS2010.

2)      The file AIRIcuExtension.cpp has the necessary code needed to interface with Adobe AIR 3. It also has the wrapper routines calling ICU C functions.

3)      This is a DLL project and the build output is AirIcuExtension.dll

1.2       Building ActionScript Library in FB 4.6

1.2.1       Building the ActionScript library

Create a new ActionScript Library project and name it AirIcuExtension. See the downloaded ActionScript FB4.6 library project.

1.2.2       Packaging ActionScript native extension

To package an ANE, you still need to do it in commandline. FB 4.6 does not have a feature yet to generate ANEs in the IDE.

Open the binAirIcuExtension.swc is a zipped archive. Open it using WinRAR or WinZip program and extract the library.swf file in the swc package into the AirIcuExtensionbin folder.

The folder srcresources contains file extension.xml, AirIcuExtension.dll and ICU dlls icudt48.dll, icuuc48.dll, icuio48.dll and icuin48.dll. The file external.xml defines the external library details to AIR runtime.

For simplicity, place the AirIcuExtension.dll, ICU dlls and extension.xml files in AirIcuExtensionbin folder. All these files are packaged into a zipped archive called AiricuExtension.ane using the following command.

C:FB4.6sdksbinadt -package -storetype pkcs12 -storepass <passwd> –keystore <AIR certificate> -tsa none -target ane AirIcuExtension.ane extension.xml -swc AirIcuExtension.swc -platform Windows-x86 library.swf AirIcuExtension.dll icudt48.dll icuin48.dll icuio48.dll icuuc48.dll

Using Adobe FlashBuilder4.6 or  C:FB4.6sdksbinadt program, one can generate an AIR certificate.

The output is an archive file AirIcuExtension.ane in the AirIcuExtensionbin folder.

1.3       Building the Test program AirIcuExtensionTest.mxml

Now that we built and packaged the native extension package AiricuExtension.ane, we are ready to use this and call ICU services in a test program.

The folder AirIcuExtensionTestsrc contains the test file AirIcuExtensionTest.mxml. The descriptor file AirIcuExtensionTest-app.xml has  the details of native extension.

Flash builder4.6 has a new feature to link Flash applications with ANE files. As you see from the FB4.6 project properties ‘Flex Build Path’ command, there is a new tab for Native Extensions. Using ‘Add ANE’ button, add the AirIcuExtension.ane file present in the AirIcuExtension/bin folder as shown below.

Also see the ‘Flex Building Package’ command in the project properties, there is a new tab for Native Extension. Please make sure that the check box for AiricuExtension is On.

The output swf file AirIcuExtensionTest.swf is placed in the bin-debug folder.

1.4       Building AIR package for executing AirIcuExtensionTest

The final step is to package the above AirIcuExtensionTest .swf and AirIcuExtension.ane files into an AIR executable folder.  We can do this in FB4.6 now instead of using tedious command line.

  • IN FB4.6, select AiricuExtensionProject and execute menu command Project->Export Release Build…
  • In the ensuing dialog, choose Signed native installer radio button. We can only create native installers as we are using OS specific ANE package.
  • In the Native Extensions tab, make sure that the AirIcuExtension.ane checkbox is On.
  • Finish creating the release build after entering the correct AIR certificate credentials.

The output of the above command is an installer AirIcuExtensionTest.exe. By executing it, you can install the test program.

2         Conclusion

The sample illustrated how to invoke ICU from ActionScript. The AIR ICU extension is easy to build using the upcoming AdobeFlash Builder 4.6 release. ANE is a great feature for AIR developers and AIR applications can make use of the platform or ICU provided globalization services.

Formatting with alternate calendars in Flex

This article was originally written in English. Text in other languages was provided by machine translation.

Dates can be formatted in various calendars in the Flex SDK. Let’s explore how it works.

Flex SDK lets you format a given date in “alternate calendars” besides the Gregorian calendar. The industry convention refers all non-Gregorian calendars as alternate calendars. To use an alternate calendar, it requires a little bit of care in your Flex application.

Types of calendars

Before we dive into the alternate calendar usages in the Flex SDK, let’s take a brief look at a couple of calen­dars of the world so that you get familiar with what this calendar talk is about. Please be aware, I can only describe the basic usages of some common alternate calendars. There are complexities behind each of the calendars and I may not be explicitly state them. Investigate fur­ther before you actually use them.

Gregorian calendar

This is the calendar most systems provide as the standard. You probably know this calendar already but here are some of the characteristics: There are always twelve months in a year and each month has 28 to 31 days. The numbers of days in each of the months are fixed (30 or 31 days) except for the second month (February), which includes 28 (non-leap years) or 29 days (leap years). The number of days in a year is fixed (365 or 366 days).

Islamic calendar (Hijri calendar)

Islamic calendar is one of the lunar calendars.  There are always twelve months in a year. Each month has ei­ther 29 or 30 days. Beginning of a month is determined by observing the moon phase (Islamic religious calendar). Because of this nature, it is not very possible to predict the dates with the Islamic religious calendar. For the sake of convenience, there is the variant of the calendar, Islamic civil calendar, which determines the dates through some pure mathematical calculation. Islamic civil calendar may not be accurate for religious events. Number of days in a year is 354 or 355 days. Hence, the Islamic calendar year and the Gregorian calendar year are not synchronized.

Japanese calendar

Japanese calendar is very similar with the Gregorian calendar. The difference is the era part and the year. The Gregorian calendar has been using the same era name for the past 2,000 years (AD; Anno Domini). There is also BC (Before Christ) era but BC years are not by supported by pretty much all calendar apps. On the other hand, Japanese calendar era name changes when there is new emperor. Therefore, every ten to a couple of ten years, there are new eras. *1

*1 Before the 1868, the era name changes were more frequent, an era lasted only as low as two years. But just like the BC in Gregorian, there is not much demand to be able to deal with the older eras in today’s calendar applica­tions.

There are much more types of calendars in the world but I hope you got some ideas how calendars can vary.

How to use the alternate calendars in Flex SDK

Now let’s look at the usage of alternate calendars. How do you use calendar other than the Gregorian in the Flex SDK? The an­swer is to use the locale ID.

The locale ID can optionally contain calendar tag. For example:

Locale ID Meaning
ar-SA Arabic used in Saudi Arabia
ar-SA@calendar=islamic Arabic used in Saudi Arabia. Islamic calendar
en-US@calendar=islamic English used in the U.S. Islamic calendar.

When you need to format a date in an alternate calendar, the calendar tag can be appended to the locale ID. Here is an example:

import spark.formatters.DateTimeFormatter;
private function calendarDemo():void
{
    var d:Date = new Date(2011, 9, 15);
    var dtf:DateTimeFormatter = new DateTimeFormatter();
    dtf.dateStyle = "long";
    dtf.timeStyle = "none";
 
    dtf.setStyle("locale", "en-US");
    trace("(1) " + dtf.format(d));
 
    dtf.setStyle("locale", "ar-SA");
    trace("(2) " + dtf.format(d));
 
    dtf.setStyle("locale", "ja-JP");
    trace("(3) " + dtf.format(d));
 
    dtf.setStyle("locale", "en-US@calendar=islamic");
    trace("(4) " + dtf.format(d));
 
    dtf.setStyle("locale", "ar-SA@calendar=islamic");
    trace("(5) " + dtf.format(d));
 
    dtf.setStyle("locale", "en-US@calendar=japanese");
    trace("(6) " + dtf.format(d));
 
    dtf.setStyle("locale", "ja-JP@calendar=japanese");
    trace("(7) " + dtf.format(d));
}

Here is the result you might get.

Please note that the result may vary depending on the run-time platforms.

Limitations you should be aware of

There are couples of limitations in the current Flash Player and Flex SDK for alternate calendar support.

  1. The Date class can handle only Gregorian dates.
  2. The Spark DateTimeFormatter class can format a Date object but parsing feature (translating a formatted Gregorian or non-Gregorian date string into a Date object) is not available. English Gregorian date string can be parsed through the Date class constructor in some degree.
  3. The availability of alternate calendar support and its behavior is platform dependent. Please check the plat­form if the alternate calendar support is important for your application.

If you would like to know more about alternate calendars, the calendar entries on Wikipedia is a good source.

Invoking ICU from Adobe AIR Applications

This article was originally written in English. Text in other languages was provided by machine translation.

Adobe Flash and AIR are ubiquitous platforms to develop rich internet applications. Flash is used for browser based applications and AIR is used for developing native platform applications. Both platforms have considerable support for globalization. Globalization enablement features like locale aware formatting/parsing, collation, case transforms, localization and multi-lingual text rendering are supported by both these platforms. But some more globalization features like text normalization, transliteration, Unicode character properties, encoding conversions, charset detections, Unicode string utilities etc are still missing in the Adobe AIR and Flash platforms. One of the primary reasons for not adding all these features inside the Adobe runtime platforms is the size of the software.

To overcome the size limitation issue, Adobe AIR and Flash can invoke the services of external dynamic libraries through ActionScript. There are some well known external libraries which have rich globalization support like ICU, GNU glib, Verisign IDN library to name a few. Fortunately the upcoming Adobe AIR 3.0 (now available as Adobe pre-release) has a wonderful feature called ActionScript native extensions, which is about ActionScript programming interface for a native code library like MS Windows DLL, Os X FrameWork, Android JAR or shared library or iOS static library. Please see Adobe AIR3 beta site http://labs.adobe.com/technologies/flashplatformruntimes/air3/ on how to download and take part in the Adobe AIR pre-release. Please make a note that this native extensions feature is available _only_ in Adobe AIR platform, not in the Flash platform.

In this blog, I demonstrate a sample (Download air_icu ) application to invoke ICU from an Adobe AIR application on Windows platform. Readers are reminded that this is only illustration sample software and by no means production quality software. Hence readers must exhibit discretion in using this software as it is. The sample illustrates ICU word breaking, sentence breaking, utf-conversion and Unicode character property verification.

You will need the following software to build an ICU extension for AIR platform.

1         Building ICU extension for Adobe AIR

Adobe AIR t native extensions, also known as ‘ane’ or ‘ANE’ files are archived packages. These consist of

  • ActionScript wrapper classes calling into external DLLs
  • The external DLLs
  • XML file describing details of external DLLs

The archived ANE files are used just like SWC libraries in integrating into an AIR application. In other words, ANE file is a library and it has public ActionScript APIs.

Covering all details about the ActionScript extension is too much for this blog article, but I will explain the steps to build this sample and run. Below are the sequential steps and commands.

1.1       Building Windows AIR ICU Extension DLL

1)      The AirIcuExtensionWin folder has the Visual studio solution ‘AirIcuExtension.sln’. Open this in MS VS2010.

2)      The file AIRIcuExtension.cpp has the necessary code needed to interface with Adobe AIR 3 beta 2. It also has the wrapper routines calling ICU C functions.

3)      This is a DLL project and the build output is AirIcuExtension.dll

1.2       Building ActionScript Library

1)      Build the actionscript library using the below command.

C:Flex4.5.1bincompc.exe -source-path src -include-classes com.adobe.extensions.AirIcuExtension  -external-library-path C:air3_beta2frameworkslibsairairglobal.swc -output binAirIcuExtension.swc

The file AirIcuExtension.as in the folder srccomadobeextensions has the public class AirIcuExtension which calls the ICU routines. In this sample, calling ICU sentence breaker, word breaker, normalizer, utf-conversion and Unicode character property have been illustrated.

1.3       Packaging ActionScript native extension

Open the binAirIcuExtension.swc is a zipped archive. Open it using WinRAR or WinZip program and extract the library.swf file in the swc package into the AirIcuExtension/bin folder.

The folder srcresources contains file extension.xml, AirIcuExtension.dll and ICU dlls icudt48.dll, icuuc48.dll, icuio48.dll and icuin48.dll. The file external.xml defines the external library details to AIR runtime.

For simplicity, place the AirIcuExtension.dll, ICU dlls and extension.xml files in AirIcuExtensionbin folder. All these files are packaged into a zipped archive called AiricuExtension.ane using the following command.

C:air3_beta2binadt -package -storetype pkcs12 -storepass <passwd> –keystore <AIR certificate> -tsa none -target ane AirIcuExtension.ane extension.xml -swc AirIcuExtension.swc -platform Windows-x86 library.swf AirIcuExtension.dll icudt48.dll icuin48.dll icuio48.dll icuuc48.dll

Using Adobe FlashBuilder4.x or  C:air3_beta2binadt program, one can make an AIR certificate.

The output is an archive file AirIcuExtension.ane in the AirIcuExtension/bin folder.

1.4       Building the Test program AirIcuExtensionTest.mxml

Now that we built and packaged the native extension package AiricuExtension.ane, we are readu to use this and call ICU services in a test program.

The folder AirIcuExtensionTestsrc contains the test file AirIcuExtensionTest.mxml. The descriptor file AirIcuExtensionTest-app.xml has  the details of native extension. Using the mxml compiler, AirIcuExtensionTest.swf is built as follows in AirIcuExtensionTest folder.

C:Flex4.5.1bincompc.exemxmlc +configname=air -external-library-path ..AirIcuExtensionbinAirIcuExtension.ane -output bin-debugAirIcuExtensionTest.swf — srcAirIcuExtensionTest.mxml

The output swf file AirIcuExtensionTest.swf is placed in the bin-debug folder.

1.5       Building AIR package for executing AirIcuExtensionTest

The final step is to package the above AirIcuExtensionTest .swf and AirIcuExtension.ane files into an AIR executable folder.  Execute the following command

C:air3_beta2binadt -package -XnoAneValidate -storetype pkcs12 -storepass <passwd> –keystore <AIR certificate> -tsa none -target bundle AirIcuExtensionTest.air AirIcuExtensionTest-app.xml AirIcuExtensionTest.swf -extdir ….AirIcuExtensionbin

The output of the above command is a folder AirIcuExtensionTest.air. Inside the folder, there is AirIcuExtensionTest.exe. You can execute and see the output.

2         Conclusion

The sample illustrated how to invoke ICU from ActionScript. The AIR ICU extension is easy to build using the publicly available Adobe Flex SDK and AIR3 Beta 2 SDKs. It will be much easier to do all this in the future Adobe Flash Builder IDE using GUI. The advantages of this feature are

  • AIR developers looking to develop international applications for desktop or mobile have the full power of ICU at hand. Many Unicode features, encoding conversions, IDN conversion utilities, string processing, transforms and many more international features can be easily coded.
  • The native ICU extension once built can be used any any developer as it is a library.
  • The Actionscript APIs calling ICU can be coded using the same signatures as ICU C++ API. This eliminates the learning curve.
  • Since ICU is in native code, performance is not compromised.
  • Since it is ICU, developers can expect cross-platform behavior in AIR programs.
  • Since the extension is a AIR library, ICU updates can be easily re-packaged in to the ane file.

In the future once AIR3 is released, a full fledged ICU native extension with proper API definitions will be a great globalization project.

A lightweight auto-complete ActionScript example with a trie

This article was originally written in English. Text in other languages was provided by machine translation.


Auto-complete functionality is used widely over the internet and mobile apps. A lot of websites and apps try to complete your input as soon as you start typing.  In this post, I would like to introduce a simple ActionScript auto-complete solution by using trie data structure.

A trie is an ordered tree data structure that is used to store an associative array. All the descendants of a node have a common prefix of the string associated with that node, and the root is associated with the empty string. Starting from the root node, you can check if a word exists in the trie easily by following pointers corresponding to the letters in the target word. Trie is a well-known data structure in computer science; you can find the detailed information about trie through Wikipedia.

Here is a simple trie implementation in ActionScript:

/**
* An simple data structure to store and look up words.
* @see http://en.wikipedia.org/wiki/Trie for additional details.
*/

public class Trie {
private var _rootKeys:Array;
public function Trie():void {
_rootKeys=[];
}

/**
* Return a list of words which have the given prefix.
*/

public function get(prefix:String):Array {
var results:Array=[];
var letter:String=prefix.substr(0,1);
var root:TrieNode=_rootKeys[letter];
if (root) {
getWordList(prefix, 1, root, results);
}
return results;
}

/**
* Add a word to the object which can be matched as a prefix.
*/

public function add(word:String):void {
var letter:String=word.substr(0,1);
var root:TrieNode=_rootKeys[letter];


if (!root) {
root=createNode(letter);
_rootKeys[letter]=root;
}
insertWord(word, 1, root);
}


private function traverse(root:TrieNode, results:Array, prefix:String):void {
if(root.children) {
for each( var c:TrieNode in root.children ) {
var node:TrieNode = c as TrieNode;
if( node.word ) {
results.push( prefix + node.value);
}
traverse(node, results, prefix+node.value );
}
}
}


private function getWordList(prefix:String,
position:uint,
root:TrieNode,
results:Array):void {
var letter:String=prefix.substr(position,1);
var child:TrieNode=root.children[letter];
if (!letter || !child) {
return;
}


if ( position<(prefix.length-1) ) {
getWordList(prefix, ++position, child, results);
}else {
if (!child.word) {
traverse( child, results, prefix);
}
}

}


private function insertWord(word:String,
position:uint,
root:TrieNode):void {
var letter:String=word.substr(position,1);
if (position==word.length || !letter) {
return;
}


var child:TrieNode=root.children[letter];
if (! child) {
child=createNode(letter);
root.children[letter]=child;
}


if (position==word.length-1) {
child.word=true;
} else {
insertWord(word, ++position, child);
}
}


private function createNode(letter:String):TrieNode {
return new TrieNode(letter,false);
}
}

How to create a localized DateChooser in your Flex app

This article was originally written in English. Text in other languages was provided by machine translation.

 

Xie Fang

By default the DateChooser in Flex shows the English UI. You need to set the dayNames and monthNames properties to localized strings so that it shows the language you want. But do you know that all these localized names are available in the flash.globalization package? Here’s how to get the localized names.

First, create a DateTimeFormatter object with the locale you are interested in the <fx:Script> section

Alternatively, if you feel more comfortable with MXML than ActionScript, you can use a MXML DateTimeFormatter in the <fx:Declarations> section.

Second, create a vectorToArray function for type conversion in the <fx:Script> section, we will explain a little more in the next step.

Third, in your <mx:DateChooser> component, set the dayNames and monthNames properties.


And since you are using the DateTimeNameStyle enums, you want to import them in <fx:Script>

Here, the getWeekdayNames and getMonthNames methods give the localized names as a vector of string. And vectorToArray function is used to convert them to array before assigning them to the DateChooser. The getFirstWeekday method gives the first day of the week for the locale. For example, many european locales use Monday as the first day instead of Sunday.

That’s it. Now run your app and you will see the DateChooser UI is showing in Chinese.

Change the locale to British English (en-GB) and Arabic, Saudi Arabia (ar-SA) to see how the locale changes the first day of week.

Think that this doesn’t save time than hardcoding? Such as:

It is true if you just need to localized to your language. But imagine you need to localize in multiple languages, or languages you don’t know, or you want language switchable by users at run time. Using flash.globalization is more scalable.

To learn more features provided by flash.globalization package, check out the ActionScript API documentation.

Sorting strings in a locale-sensitive way

This article was originally written in English. Text in other languages was provided by machine translation.

In this section, you will learn how to sort strings in a locale-sensitive way.

Before Flash Player 10.1 was released, the sorting API in AS3 was using a locale-independent way which means the APIs are not locale aware. This is not user-friendly for international users who don’t use English as their first/only language. Let’s look at the following example code for some Chinese data:

If we use the APIs in Flash Player 10.0 and earlier to sort the strings:

Actually, the output result is in simple Unicode code point order for the conventional sorting, which is not correct for Chinese users.

With Flash Player 10.1, we can easily sort strings in a locale-sensitive way with the new flash.globalization.collator class. For handling strings sorting and searching, flash.globalization.* package provides Collator class. This class performs locale-sensitive string sorting and searching, or you can say, it allows performing string sorting and searching for different languages.

In the following example, we have instantiate a Collator object with a specific locale. Then we have called the compare method of the Collator class to perform a locale-sensitive string sorting. The sort method returns a negative value if the first string argument is less than the second, a positive value if the first string argument is greater than the second and 0 if the first string argument is equal to the second one.

Now, the output result looks great for Chinese users.

If you want to learn more about Flash Player 10.1 globalization API, please check the following package:

flash.globalization