Array and ArrayCollection – arrays allow you to store multiple values in one data structure. You can create simple indexed arrays or associative arrays, known in some programming languages as hashes.

Note: the sample code in this section presents creating Arrays and ArrayCollections in ActionScript, but you can create them in MXML as well. See the Flex Builder help system for examples of creating Arrays and ArrayCollections in MXML.

You can declare an indexed array and assign it values at the same time:

var clients:Array = ["Bob", "Jim", "Susan"];

Or you can declare the array in one statement and assign values later:

var clients:Array = new Array();

…

clients[0] = "Bob";

clients[1] = "Jim";

clients[2] = "Susan";

Associative arrays (which are actually of the Object class, not the Array class) use “keys” instead of indexes to reference individual elements in the array:

var foodPrices:Object = {meat:"5.00", fish:"7.00", juice:"1.00"};

trace(foodPrices ["meat"], foodPrices ["fish"], foodPrices["juice"]);

You can also do this:

var foodPrices:Object = new Object();

foodPrices["meat"] = "5.00";

foodPrices["fish"] = "7.00";

foodPrices["juice"] = "1.00";

You can also use object oriented “dot” notation to refer to associative array elements:

foodPrices.meat = "5.00";

foodPrices.fish = "7.00";

foodPrices.juice = "1.00";

trace(foodPrices.meat, foodPrices.fish, foodPrices.juice);

ArrayCollection is a Flex class that wraps the Array class in order to provide additional functionality, such as the following methods not found in the Array class:

addItem(item:Object):void

adds the item to the end of the ArrayCollection

addItemAt(item:Object, index:int):void

adds the item at the specified index

contains(item:Object):Boolean

returns true if the ArrayCollection contains the specified object

getItemAt(index:int, prefetch:int = 0):Object

gets the item at the specified index

getItemIndex(item:Object):int

returns the index of the item if it is in the ArrayCollection

refresh():Boolean

applies the sort and filter to the ArrayCollection

removeAll():void

remove all items from the ArrayCollection

Sometimes you need to check to see if two objects are the same object, often inside a function. You don’t need to iterate the ArrayCollection, just do this:

if(myObject = myAC.getItemAt(myAC.getItemIndex(myObject))){

       Trace(“Same object.”);

}else{

       Trace(“NOT same object.”);

}

You can create an instance of an ArrayCollection like this:

private var myAC:ArrayCollection = new ArrayCollection([

       "meat", "fish", "juice", "cheese"

]);

You can create an ArrayCollection of objects like this:

public var foodsAC:ArrayCollection;           

public function initData():void {

       foodsAC = new ArrayCollection(

              [{food:"meat", price:"5.00"},

              {food:"juice", price:"1.00"},

              {food:"cheese", price:"2.00"}

       ]);

}

Classes – ActionScript is an object oriented language making use of many object oriented constructs, such as classes, packages, inheritance, accessor methods, method overriding, etc. Classes are such a large topic that only a brief overview of the topic will be covered here.

The following is a class we will use in our discussion of ActionScript classes.

package com.chikaradev.classes {

       import mx.controls.Button; 

       public class MyButton extends Button{

              private var _myvar:int = 0; 

              public function MyButton(){

               super();

              }

              public function set myvar(val:int):void{

               this._myvar = val;

              }

              public function get myvar():int{

               return this._myvar;

              }

              override protected function updateDisplayList(unscaledWidth:Number,

               unscaledHeight:Number):void{

               super.updateDisplayList(unscaledWidth, unscaledHeight);

               this.graphics.lineStyle(3, 0xFF0000, 1);

               this.graphics.moveTo(5, this.height/2);

               this.graphics.lineTo(this.width-5, this.height/2);

               validateNow();

              }

       }

}

package com.chikaradev.classes – it is good to organize custom classes into packages that map to the directory structure where the classes are located, relative to the main application MXML file. In this case the file for custom class MyButton reside in the following directory structure:

       src

              com

                     chikaradev

                            classes

                                   MyButton.as

import mx.controls.Button; – we need to import the Button class because our custom class “extends” Button, meaning it is based upon the Flex standard Button class.

public class MyButton extends Button – here we declare the custom class MyButton, with the access modifier public, using the extends keyword to indicate we are basing our class on the Flex Button class.

private var _myvar:int = 0; – our custom class will have a private variable _myvar. Often, the names of private variables in Flex start with an underscore.

public function MyButton() – this is the constructor of the class, where initialization occurs. We simply call the super() method, which calls the constructor of the “super” class, meaning the class this class extends (Button);

public function set myvar(val:int):void – Flex uses a feature called set and get methods to implement accessor methods, a key object oriented design construct. Implementing a set and get method here allows us to assign a value to _myvar, or to assess its value, using the myvar=”100” syntax in the <MyButton> MXML tag. The method can be named anything, but in the body we assign the parameter to the private _myvar variable:     this._myvar = val;

override protected function updateDisplayList – here we “override” the standard Flex Button class method updateDisplayList, meaning we want to change the standard behavior of the method. We first call the super class version of the updateDisplayList method, and then implement custom code, where we draw a line through the label of the button.

validateNow(); – often you want to call either validateNow() or invalidateDisplayList() after custom code that affects the display list, because your code may be executed but not rendered onscreen yet, and these methods force a redraw of the UI.

The following code illustrates defining an instance of our custom class in MXML and in ActionScript. Notice when you execute this simple application that the MyButton instance defined in MXML is displayed above the instance defined in ActionScript, because the MXML is processed before the creationComplete event is dispatched.

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

       creationComplete="init();" xmlns:comp="com.chikaradev.classes.*">

       <mx:Script>

              <![CDATA[

                     import com.chikaradev.classes.MyButton;

                     private function init():void{

                            var mb:MyButton = new MyButton();

                            mb.label = "Greg";

                            mb.myvar = 35;

                            this.addChild(mb);

                     }

              ]]>

       </mx:Script>

       <comp:MyButton myvar="100" label="My New Button"/>

</mx:Application>

What is ActionScript? 

ActionScript is a scripting language based on the ECMAScript standard on which JavaScript is based. ActionScript is used to define the Model and Controller of your application. JavaScript is an interpreted language, meaning it is processed as it is executed, whereas ActionScript is a compiled language, meaning it is processed (compiled) as you are writing your application, which leads to faster execution.

Much of your ActionScript code will consist of variables, functions, and classes, in addition to a variety of other ActionScript constructs for program control, such as conditionals, looping, etc. This section on ActionScript will provide an overview of variables, functions, classes and some of the other major programming constructs.

Variables – A variable is a named entity used to store some data, such as a number (49.99), a string (”Welcome Greg”), a Boolean value (true or false), a date (04/14/2009), etc. Variables correspond to properties and style properties in MXML.

To use a variable, you need to declare it and assign it a value. You can declare the variable and assign an initial value later, or you can assign a value when the variable is declared. Here are some examples:

var validuser:Boolean;

var firstname:String = "Greg";

var myVbox:VBox = new VBox();

var currAdminPanel:AdminPanel = new AdminPanel();

Notice that a colon separates a variable from its “data type” (Boolean, String, AdminPanel).

Also notice how instances of classes (VBox and AdminPanel) are created above using the “new” keyword.

“Modifiers” can be added to variable declarations to affect aspects of the variables:

private var firstname:String = "Greg";

public static var num:int;

protected const MULTIPLIER:uint = 50;

Each of these examples includes keywords that result in subtle variations in the qualities of the variables:

private, public, protected, and internal specify what parts of your code can use the variable.

var indicates the variable can change, and const indicates it is a constant, and once set cannot change.

static specifies a variable that has one value for all instances of a class. Without the static keyword each class instance has its own instance of the variable that can have a different value.

KEY POINT: you can declare and initialize variables outside functions, but you can only use and manipulate variables within functions (discussed next). So you can declare and initialize a variable num in a single statement outside a function, but you cannot assign it a value outside a function. If you are trying to use a variable outside a function and your statement does not include the “var” keyword, there is a good chance your statement will fail.

var num = 50;          

okay – declaring and assigning a variable on the same line

var num;                   

okay – declaring a variable

num = 50;                 

error – cannot assign value to variable outside a function unless declaring it

ActionScript Primitive Data Types

Here are the ActionScript “primitive” data types. All other Flex data types are objects.

String: a textual value, like a name or the text of a book chapter

Boolean: a true-or-false value, such as whether a switch is on or whether two values are equal

Numeric: ActionScript 3.0 includes three specific data types for numeric data:

       Number: any numeric value, including values with or without a fraction

       int: an integer (a whole number without a fraction)

       uint: an “unsigned” integer, meaning a whole number that can’t be negative

Functions – A function is used to do something, such as add two numbers, examine a string and report on its value, calculate the time span between two dates, respond to user interaction with you application, etc.

You define a function by specifying its “signature”. Here is a typical ActionScript function signature:

private function addNumbers(num1:uint, num2:uint):uint {

       var result:uint = num1 + num2;

       return result;

}

Notice functions can be defined using “access modifiers” (private, public, protected) like variables to control what areas of your code can access the function.

The important parts and keywords of the function signature are:

function – this is what indicates this is a function, and not a variable (var) or a constant (const)

addNumbers – this is the name of the function

num1:uint – this is the first data parameter passed into the function for its use. num1 is the name of the parameter and uint is its data type.

uint after the closing parenthesis and colon is the data type of the value returned to the code that called the function. If the function does not return a value, this will be void. If a return value is specified, the function must return a value, and if the return data type is void, the function cannot return a value.

Statements that carry out the function’s work are enclosed in opening and closing curly braces {  }. Functions do not need to accept parameters between the parenthesis, and if they accept them, the function does not need to make use of them in the function body enclosed in the { }.

The variable “result” declared within the addNumbers function above has a “scope” that is local to the function, and cannot be referenced outside the function curly braces {  }. Keywords such as access modifiers private, public, protected and internal, and also other keywords such as static, etc. cannot be used inside functions.

The …rest parameter, allows you to pass any number or parameters, so in a function defined as myFunction(… myParams), you refer to the parameters in the function body as array elements, myParams[0], myParams[1], myParams[3], and you can pass in any number of parameters.

private function myFancyFunction(... myArgs):void {

       for (var i:uint = 0; i < myArgs.length; i++) {

              trace(myArgs[i]); // trace() prints data to the Flex Builder Console view

       }

}

myFancyFunction (1, "Greg", true);

Output

       1

       Greg

       true

As you can see, the parameters included in the … rest parameter can be of any type, they don’t all have to be uints, Booleans, Strings, etc. The … rest parameter can be used with other parameters, but it must be the last parameter listed.

private function myFancyFunction(num:uint, ... myArgs):void {

       trace(num);

       for (var i:uint = 0; i < myArgs.length; i++) {

              trace(myArgs[i]);

       }

}

myFancyFunction (400, 1, "Greg", true);

Output

       400

       1

       Greg

       true

All parameters passed into functions are passed in by “reference”, except for primitive values Boolean, int, Number, String, and uint. Passing by reference means you can pass as parameters data defined outside the function, and the data outside the function will be modified if the function changes the data. Primitives are passed by “value”, and data outside is not affected by modifications inside the function.

What is MXML?

MXML is a tag based declarative language similar to XML and HTML. Using MXML tags, you can define Flex UI controls, such as <mx:Button>, <mx:ComboBox>, and <mx:DataGrid>. You can also use MXML to define non-UI Flex components, such as <mx:HTTPService> to retrieve and send data, <mx:NumberFormatter> to format data, and <mx:XML>, <mx:ArrayCollection>, and <mx:XMLListCollection> to create data elements.

Flex makes use of “properties” and “style properties” to set attributes of components. In some cases the distinction between properties and style properties is somewhat unclear, but in general properties relate to non-visual component attributes, and style properties are used to control the visual appearance of Flex UI components.

In MXML properties and style properties are set the same way within the opening MXML tag in the format PROPERTY_NAME=”PROPERTY_VALUE”. As we will see in the section on ActionScript, properties are set in ActionScript using “dot” notation common to many object oriented programming languages (myObj.propName = propVal;), but style properties are controlled using the StyleManager setStyle(”propName”, propVal) and getStyle(”propName”) methods.

Many times MXML tags are defined with only an opening tag:

<mx:Label text="Enter your name:" fontSize="10"/>

In other instances opening and closing MXML tags are used to contain other tags within them.

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

       <mx:VBox width="400" height="300">

              <mx:Button id="myBtn" label="Click Me"/>

       </mx:VBox>

</mx:Application>

Starting with the top-level <mx:Application>, all the nested MXML tags in a Flex application make up what is known as the “display list“, a hierarchical set of “objects” making up the visual display of your application. When you define an MXML tag, the component it represents is automatically added to your application’s display list. Later we will see how adding components using ActionScript requires specifically adding the component to the display list using addChild().

Two types of properties deserve special mention, event properties and effect properties.

Events – some properties are used to specify a function that is called when something “significant” happens to a Flex visual or non-visual, system component. Here are some event properties that can be set for the <mx:Button> control:

click – the button was clicked

hide – the “visible” property of the button was set to false

mouseOver – user moved the mouse over the button

<mx:Button label="Click Me" click="myClickListener(event);"

       hide="hideFunc(event);"/>

As we will see later, in ActionScript event listeners are specified with the addEventHandler().

Effects – effect properties specify an effect object that should be used when some significant event occurs. Here are some examples:

<mx:VBox hideEffect="{myFadeObj}" resizeEffect="{myResizeObj}"

       showEffect="{myFadeObj}"/>

The id property is very important in Flex. If you wish to refer to a Flex component property when setting a property in another Flex component, the referenced component should have an id property set.

<mx:CheckBox id="chbx" label="Ready to Go" selected="true"/>

<mx:Button label="Click to Go" enabled="{chbx.selected}"

    click="goNow(event)"/>

Note: even if you wish to refer to a Flex component within that component’s tag, you still need an id. The following code will not give the desired result, setting the height of a VBox equal to the width:

<mx:VBox width="100" height="{width}" backgroundColor="0xFFFFFF"/>

Using the “this” keyword (used in many object oriented languages to refer to the “current object”) will not work, because “this” refers to either the root application tag or to the custom component root tag:

<mx:VBox width="100" height="{this.width}" backgroundColor="0xFFFFFF"/>

The above tag and the one before it without the “this” keyword will set the VBox height to the width of the application, not to the width of the VBox.

Here is how to achieve the desired result:

<mx:VBox id="myVB" width="100" height="{myVB.width}"

       backgroundColor="0xFFFFFF"/>

It is possible to code ActionScript within property values in MXML, though it is best to only do this if the ActionScript will be short. Here is an example of how to perhaps not use ActionScript in an MXML tag:

<mx:Label fontSize="20"

       text="Your average percentage based score, graded on a curve:"/>

<mx:Label fontSize="20" text="{(score1+score2+score3/3)/300 * .4376}"/>

In this case it might be better to bind the Label text to a variable defined in ActionScript.

What is Adobe Flex?

Adobe Flex is a technology providing an environment and infrastructure for creating rich internet applications. Adobe Flex Builder 3 is an IDE (integrated development environment) with integrated design, coding, and debugging tools that work together to help you work more efficiently.

When you create applications in Flex, you use primarily a combination of MXML, ActionScript, and CSS (cascading style sheets), though you could also incorporate HTML, JavaScript, and other technologies.

One of the greatest advantages of Adobe Flex over competing technologies, such as AJAX, Microsoft Silver light, and Java FX, is that Flex applications execute in the Adobe Flash Player browser plug-in. This eliminates most of the browser inconsistencies that you need to code for in some other technologies.

What is a RIA (rich internet application)?

Rich internet applications combine the richness more typically seen in desktop application user interfaces, with the low-cost development of web applications, together with engaging interactivity of multimedia communication.

In a nutshell, RIA are applications delivered over the internet that look better than your typical web pages, are more engaging for the user, and keep the user on your web site longer per session.

One key aspect of RIA is that unlike standard web pages where most user interaction results in a server request and complete page refresh, RIA execute more functionality on the client (end-user) browser, and only update that portion of the interface that changes due to user interaction.

Flex Applications == MXML, CSS, and ActionScript == MVC

You create Flex applications with three scripting “languages”, MXML, ActionScript, and CSS (cascading style sheets). They are used to promote using the MVC (Model, View, Controller) design pattern.

Model components (ActionScript) – Encapsulates data and behaviors related to the data processed by the application. The model might represent the name, address, phone number and email address of a customer, or perhaps the contents of a shopping cart, or product descriptions and specifications.

View components (MXML and CSS) – Defines your application user interface, and the user’s view of application data. The view might contain the Form container used to enter a customer’s name, address, etc., a DataGrid control for displaying the contents of a shopping cart, or image of products in a catalog.

Controller components (ActionScript) – Handles data processing in your application. The controller provides application management and the business logic of the application. The controller does not necessarily have any knowledge of the view or the model.

The Data 

First, here is the data I used. It is in file ProductSales.xml, located in directory “data”, which is a sub-directory of the directory with the main application MXML file:

<?xml version=”1.0″ encoding=”utf-8″ ?>
<Category Category=”Poultry”>
    <Category Category=”Chicken”>
        <Product Product=”skinless breasts”
            InStock=”565 lbs” OnOrder=”1000 lbs”/>
        <Product Product=”thighs”
            InStock=”385 lbs” OnOrder=”700 lbs”/>
        <Product Product=”nuggets”
            InStock=”230 lbs” OnOrder=”400 lbs”/>
    </Category>
    <Category Category=”Turkey”>
        <Product Product=”whole turkeys”
            InStock=”1565 lbs” OnOrder=”2000 lbs”/>
        <Product Product=”turkey burger”
            InStock=”1365 lbs” OnOrder=”1200 lbs”/>
        <Product Product=”turkey ham”
            InStock=”640 lbs” OnOrder=”700 lbs”/>
    </Category>
</Category>

The Application

Now here is the main application MXML file:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
  creationComplete=”salesRequest.send();”>
  <mx:Script>
    <![CDATA[
      import mx.collections.XMLListCollection;
      import mx.rpc.events.ResultEvent;

      [Bindable] public var salesDP:XMLListCollection;
           
      private function salesResultHandler(event:ResultEvent):void{
        salesDP = new XMLListCollection(event.result.Category);
      }
    ]]>
  </mx:Script>
  <mx:HTTPService id=”salesRequest” useProxy=”false” resultFormat=”e4x”
    result=”salesResultHandler(event)” url=”data/ProductSales.xml”/>
  <mx:AdvancedDataGrid width=”100%” height=”100%”>
    <mx:dataProvider>
      <mx:HierarchicalData source=”{salesDP}”/>
    </mx:dataProvider>
    <mx:columns>
      <mx:AdvancedDataGridColumn dataField=”@Category”
        headerText=”Category”/>
      <mx:AdvancedDataGridColumn dataField=”@Product”
        headerText=”Product”/>
      <mx:AdvancedDataGridColumn dataField=”@InStock”
        headerText=”In Stock”/>
      <mx:AdvancedDataGridColumn dataField=”@OnOrder”
        headerText=”On Order”/>
    </mx:columns>
  </mx:AdvancedDataGrid>   
</mx:Application>

What’s Going On 

Let’s go through the application to see what’s going on.

Import Classes and Create an XMLListCollection Variable

 import mx.collections.XMLListCollection;
 import mx.rpc.events.ResultEvent;

 [Bindable] public var salesDP:XMLListCollection;

Add an HTTPService Component to Load the Data

<mx:HTTPService id=”salesRequest” useProxy=”false” resultFormat=”e4x”
  result=”salesResultHandler(event)” url=”data/ProductSales.xml”/>

Add the AdvancedDataGrid

<mx:AdvancedDataGrid width=”100%” height=”100%”>
  <mx:dataProvider>
    <mx:HierarchicalData source=”{salesDP}”/>
  </mx:dataProvider>
  <mx:columns>
    <mx:AdvancedDataGridColumn dataField=”@Category” 
      headerText=”Category”/>
    <mx:AdvancedDataGridColumn dataField=”@Product”
      headerText=”Product”/>
    <mx:AdvancedDataGridColumn dataField=”@InStock” 
      headerText=”In Stock”/>
    <mx:AdvancedDataGridColumn dataField=”@OnOrder” 
      headerText=”On Order”/>
  </mx:columns>
</mx:AdvancedDataGrid>   

Don’t Forget to Call the HTTPService send() Method

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
  creationComplete=”salesRequest.send();”>

You can see the running app here (right-click to view source):

ADG_XML_HTTPService  

Hope this helps. Thanks for stopping by, and see you in the Adobe Flex Forums!

Greg

Setup a New Flex Project

To show how this is done, I’ll first create a new Flex project named LocalizationFrameworkResources. I’ll assume you know how to do that. If not, see this topic in the FlexBuilder help system or LiveDocs:

Creating a Flex project with no server

Adding a DateChooser Control

Now that the project has been created, add a DateChooser control.  You can do this in design mode or source mode. This is how your project should appear in source mode.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
    <mx:DateChooser/>
</mx:Application>

This is how the Flex application should appear if you launch it.

Flex Application with DateChooser Control

Framework Resource Bundle Files

As seen in the screen shot above, the DateChooser control is currently displaying month names and abbreviations for the days of the week in English. While the custom strings that make up most of the UI of your Flex application are localized by putting the custom strings in .properties files, accessed through resource bundles, strings found in controls like the DateChooser are located in Flex framework .properties files, accessed internally via framework resource bundles. This blog post is all about localizing the framework resource bundle files.

We’re going to localize for French, so we need to change the locale of the project to fr_FR. This will cause the compiler to look for French framework resource bundle SWC files.

Open the main app file LocalizationFrameworkResources.mxml, and then select Project – Properties in the FlexBuilder menu. In the dialog box that launches, click on the Flex Compiler property category on the left, and then in the Additional compiler arguments text input change the default locale from en_US to fr_FR. The text input should now read -locale fr_FR, as seen in the following screen shot.

Changing the Project Properties - Locale Compiler Argument

Now We Have a Compile Error

When you close the project properties dialog box, if you have the “Build Automatically” setting checked in the Project menu, the project should immediately attempt to compile, and you should get an error similar to the following:

unable to open ‘C:\Program Files\Adobe\Flex Builder 3\sdks\3.1.0\frameworks\locale\fr_FR’

This error occurs because we have changed the project locale but the French framework resources do not yet exist. Don’t get me started on the topic of why Adobe does not ship FlexBuilder and the Flex SDK with localized framework resources for some of the locales developers are most likely to create applications for, such as Japanese, French, German, Spanish, etc.

Copy the English Framework Resource Files

First we need to make a copy of the English resource .properties files, which we will localize and then build into a SWC file. The English resources are located here:

INSTALL_DIR\Flex Builder 3\sdks\3.1.0\frameworks\projects\framework\bundles\en_US\src

Just create a copy of the entire en_US directory and rename it to fr_FR, so you now have this directory:

INSTALL_DIR\Flex Builder 3\sdks\3.1.0\frameworks\projects\framework\bundles\fr_FR\src

Localize the .properties Files

In order to localize the date related strings in the DateChooser control, we need to localize some strings in two of the framework resource .properties files, controls.properties and SharedResources.properties.

Open these two files in your favorite text editor and change the following strings as indicated (we’re only changing strings absolutely necessary for our example app):

controls.properties

Before:

dayNamesShortest=S,M,T,W,T,F,S

firstDayOfWeek=0
———————-

After:

dayNamesShortest=D,L,M,M,J,V,S

firstDayOfWeek=1 (first day of the week is Monday, well, actually Lundi)

————————————————–

SharedResources.properties

Before:

monthNames=January, February, March, April, May, June, July, August, September, October, November, December

———————-

After:

monthNames=janvier, février, mars, avril, mai, juin, juillet, août, septembre, octobre, novembre, décembre

After making these changes save the files, and ensure the files are saved in UTF-8 encoding, otherwise the high-ascii characters will not display properly (they display as rectangles). If you were localizing into Japanese, Russian, etc. those characters would also not display correctly. The files can be saved with or without the UTF-8 BOM (byte order mark). It is always better to have the BOM, just in case you need to check for it, though in this program you will not need to check for the BOM.

Build SWC Files from the Localized Framework Resource .properties Files

Now the .properties files must be compiled into SWC files. Open a CMD window and change the directory to this path (or the equivalent on your machine):

INSTALL_DIR\Flex Builder 3\sdks\3.1.0

Now execute this on the command line:

bin\compc -locale=fr_FR -source-path+=frameworks/projects/framework/bundles/fr_FR/src -include-resource-bundles=collections,containers,controls,core,effects,formatters,logging,SharedResources,skins,states,styles,utils,validators -output=frameworks/locale/fr_FR/framework_rb.swc

as seen in the value of the compile argument -output, the output file is here:

INSTALL_DIR\Flex Builder 3\sdks\3.1.0\frameworks\locale\fr_FR\framework_rb.swc

Note: this directory must already exist of the compile will fail, so just create an empty directory:

INSTALL_DIR\Flex Builder 3\sdks\3.1.0\frameworks\locale\fr_FR

Recompile and Relaunch

Force a recompile of the application by typing a space in the mxml file and then deleting the space and saving (if Project – Build Automatically is checked in the menu), then relaunch and you should see the month of December (décembre in French) display as follows:

French App

Also notice that the abbreviations for the days of the week are localized.

In Conclusion

That’s it, you have now localized some strings in the Flex framework resource files. You might want to save the .properties files as ANSI format instead of UTF-8, recompile and relaunch the application, to see what happens. You’ll be better prepared to know what to do to correct the situation if you see it first-hand. Here is an example:

French App - Corrupt Characters

Here is the completed application on ChikaraDev, right-click to view the source code:

LocalizationFrameworkResources

Thanks for stopping by the ChikaraDev blog. Come again soon!

Take care, and see you in the Adobe Flex Forums,

Greg

The Adobe Flex certification site is not updated as of this date, but the study guide is here: Adobe Flex 3 with AIR Study Guide.

One difference in the Adobe Flex 3 with AIR exam is that, as its name implies, it covers not just Flex 3, but also AIR. One impact is that those of us who are Adobe Flex 2 ACE certified will have to take the full exam again. With most Adobe product certifications, you take a scaled down “re-certification” exam on the new features in the latest release. Because this new exam covers AIR, we all need to take the full exam.

This is slightly unfortunate, but in the end we will gain greater expertise in AIR, which is a good thing.

I thought I would share some notes on how I prepared for the Flex 2 Adobe Certified Expert (ACE) exam, which I passed in April with a score of 77% (minimum passing score was 73%).

I studied pretty hard for this exam, though I was weak on Flex Data Services. My strength in other areas saved me.

Section Name – Percent Correct

Flex Application User Interface (UI) Creation – 93% correct

Flex System Architecture and Design – 92% correct

Flex Application Programming Fundamentals – 75% correct

Interacting with Remote Data and Flex Applications – 46% correct

I thought the exam was tough! I had doubts I would pass, but I said a prayer at the end, maybe that helped. I went through most of the Flex 2 developers guide twice, and created 450 4 x 6 flashcards, with about 1200 total questions. I created the flash cards going through the developers guide a third time, but that time not compiling the sample questions, just looking for data that might not be firmly stuck in my brain.

Time to study up for the Flex 3 / AIR exam!

Adobe Flex Certification Page

Pearson VUE (certification testing site)

Take care, and see you in the Adobe Flex Forums,

Greg

A quick Google for “Insuricorp” revealed that Adobe seems to maintain this mockup in which the effect is more clearly seen:  Insuricorp

You can login with user JohnJacobs, password password and click on the “Report a Claim” tab to see the movement more clearly.

The demo seems a little buggy, typing in the password doesn’t always take, so I had to delete the password and retype, but its a good way to get a more clear idea of the motion. And if you navigate away from the “Report a Claim” tab you may have to logout and log back in.

An Initial Stab at a Solution

I initially achieved this effect to some degree. At the end of this blog post I will offer acknowledgements as to shortcomings in how I did this, ideas for improvement (the subject of a future blog post), and TODO work to attempt to come closer to the actual desired effect.

Here is my implementation of the “Sliding Form Bar” app:

Right-click and select View Source from the context menu to see the source code, images, etc.

Three Images, One Mask, One clickHandler, and Six States (including base state)

My solution was to create three images of identical size in Adobe Illustrator that serve as the 5 “buttons” allowing the user to navigate the form. One image has black text and a white gradient background, one has white text and a burgundy gradient background, and one is just blue. The blue image will serve as the mask and is not seen, so the color does not matter.

The 3 Image controls are in a Canvas, with the “white” image first, then the mask image, and last the “burgundy” image. The mask image will effective cover the “white” image, and moving it to the left or right will reveal part of the ”burgundy” image underneath.

The white” and ”burgundy” images share a common clickHandler method used to determine where the user clicked (over which of the 5 “buttons”). The event object localX and localY properties tell us this. Depending on where the user clicked on the image, the current state is set to one of five states. The only thing the states do is change the x coordinate of the mask image.

Admissions of Laziness, Fatigue, and TODO

My implementation did not fully achieve the effect the person I performed this investigation for was after, but it is a start. I plan to pursue this further (future blog post), but feel free to save me some time and give me the best solution!

I have a slight cold now, it’s after mid-night, so I should get to sleep. Also, I just turned 48 years old and so I just started a “200 in 24″ attempt to achieve a life-long dream of being able to bench press 200 pounds ten times by the time I am fifty, and tomorrow is a workout day.

I have a Flex app “WorkoutMaster” in the works so you’ll be able to monitor my progress over the next 24 months.

But I digress (again)…

You could probably just use 5 images, one for each “button”, and forgo all the localX and localY stuff, just have a separate click handler for each button image selecting the right state. Who knows, you might be able to use an image map. I’ve never done that in Flex and I don’t know if it is possible.

It probably is best to use “Move” effects to get the “easing” motion. I’ll try that next time I look at this. I think I could have eliminated one of the states by referring to the base state instead. I’ll try that.

The hardest part I can think of is achieving the “barber shop” moving diagonal stripe in the Insuricorp example. Any suggestions?

That’s it for now. Thanks, and good night, er… morning.

Take care, and see you in the Adobe Flex Forums,

Greg

I got Flex 2 certified (ACE) in April of this year, and as soon as I get Flex 3 certified in the next couple of months I was going to check out Silverlight.

The only reason I was going to check it out is because I feel that having become somewhat competent in Flex I may be in a good position to comment on Silverlight now.

Looks like I may have a tough time. Great post, and its great to see that Flex stands a chance against Silverlight. I’m certainly banking on Flex / AIR becoming hugely popular in the future. My gut tells me it is the technology to study right now. Hope I’m right.

Take care, and see you on the Adobe Flex Forums.

Greg