In this Part 2 on Flex l10n solutions, I offer a video tutorial, a demo of a Registration application localized to support Spanish and English, and an architecture diagram of LocalizationMap usages.

Also included with the live Flex demo is source code for both the demo and the l10n LocaleMap library.

Below is a screencast video tutorial; in which I provide a narrated overview of the issue involved with enabling your Flex application to support multiple languages (and locales). I also present LocalizationMaps as a great solution to easily and rapidly provide l10n (localization) features within your custom Flex apps.

Figure 1: Video Tutorial (click to play)

Note that the video/podcast tutorial may take 5-10 seconds for streaming to start.

Shown below is a live demo of the localized Registration application. This application has l10n (localization) support for English and Spanish. In the live demo, select the Spanish or English flags to change the current locale. Watch what happens to all the strings and styles.

Be sure to complete the registration fields and click the Register button to see the view state changes to show a localized Thank you with fullname and email parameters (sounds confusing… just try it)!

Figure 2: RegistrationDemo w/ Locales (click to launch)

Simply right-click to access the source code for both the demo and the l10n LocaleMap library. Or click here to download the source code. Before you review the source code, however, I encourage you to review the architecture diagram shown Figure 3 and listen to the Screencast tutorial (Figure 1).

Here is a high-level diagram that illustrates how the LocalizationMap is used within your custom applications. I encourage you to conceptualize the LocalizationMap as a plug-in to your application… an extension that is completely transparent (hidden) from your presentation/GUI layer.

Figure 3: LocalizationMap Usage Diagram (click to zoom)

© Thomas Burleson for GridLinked to RUX, 2009.             Subscribe by Email | Contact Author             Permalink | 20 comments

With cloud-services, market globalization, and radical growths in both online and mobile applications, Flash i18n solutions will play critical roles in product differentiation and market acquisition. The importance and growth of the localization market is illustrated in the chart below.

As mentioned earlier, localization is the process of including assets to support multiple locales. A locale is the combination of a language and a country code. This is required for country differences in language syntatics and culture. For example, an application in the en_US (USA) locale might spell the word "color", whereas the word would be "colour" in the en_GB (Great Britain) locale. Localization goes beyond just translating Strings used in your application. It can also include any type of asset such as audio files, images, and videos. Because the meanings of colors and images may vary based on the culture, you should change the styles used by your application – in addition to the language used – based on the locale.

In order to localize (l10n) Flex 4 applications, you may use built-in support for accessing compiled resource bundles or create your own solution to access localized assets stored in remote database tables. To use the built-in Flex mx framework solutions, you first

• Create properties files (key/value pairs) that define the localized assets.
• Use ANT scripts to compile these properties files into resource modules from the properties files
• Use custom code to request specific localized bundles
• Use custom code to on-demand load the "compiled resource bundles" OR statically compile all bundles into the application (not recommended).
• Lastly, you must resolve i18n business processes and complexities when involving out-sourced translators; required to provide localized translations to each text string.

Flex allows the developer to localize strings, skinning code/classes, and embedding graphics. These allows Flex apps to localize for cultural differences also (stylesheets, colors, images, etc.) Note that many Flex applications load dynamic xml content; content that may also need to be localized. Using "best practices" approaches to localization will provide for easy maintenance and on-demand additions of localized resource bundles. As noted above, Java ANT scripts are usually employed to compile the localized files and assets into run-time loadable bundles.

• Flex 3: Runtime Localizations
• How to Localize your Flex Air applications (video)

Flash IDE tools do not support the Flex solution for resource bundles and compiled resource swfs. Instead a Locale class is provided that supports loading locale-based XML files and provides support for string look-ups by locale and ID codes. While localized content can by dynamically loaded at runtime, the GUI controls must be programmatically updated [after the localized text or XML data has loaded]. Note that the Locale class does not support loading of localized skins and images; only string-based content is supported.

Adobe and the developer community offer a plethora of articles and videos for developers to self-train and implement Flex l10n solutions. Recently, two Flex entrepreneurs created an open-source tool called ResourceManager and a Flex/AIR solution called Lupo Manager;both focused on providing tools to easily manage properties files and modify source code to accommodate l10n features.

Those tools are a step in the right direction and I give a big shout out to David Deraedt for his efforts. In fact, Adobe has provided significant documentation and recommended solutions to be used as an industry standard for localizing Flex apps. The Flex community has myriad blogs and snippets that discuss the issues. But…

Now before you get really offended, realize that I deliberately used crude expletives to (a) grab your attention, (b) highlight my dismay and (c) set the stage for a better solution. Let me show you what I mean. Consider a typical registration [shown below] that has validation, remembers last login, supports english error messages, and more. Note that this version of the application does not yet support l10n:

Figure 1: Registration Demo (click to launch)

To appreciate the impacts of l10n support, let’s first look at the code used in the demo. In particular let’s look at the MXML BEFORE it has l10n-enabling code modifications:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!--
       Component: Sign-in Form has "registration" and "already registered 
                           child components.
-->
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas id="registerArea"
		   x="20" top="20" bottom="20" 
		   cacheAsBitmap="true"
		   horizontalScrollPolicy="off" verticalScrollPolicy="off"
		   styleName="registrationForm" >
 
	<forms:RegistrationForm 	id="frmRegister" 	account="{visitor}" 		x="25" top="33"		width="386" height="290" mouseDown="frmSignin.clearErrors();"	/>
	<forms:AlreadyRegisteredForm 	id="frmSignin"		email="{visitor.email}" 	x="25" top="343"	width="386" height="111" mouseDown="frmRegister.clearErrors();"	/>
 
</mx:Canvas>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!-- 
       Component:  New Account Registration  
-->
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 	width="386" height="290"
			clipContent="false"
		 	xmlns:mx="http://www.adobe.com/2006/mxml" >
 
<mx:Script>
	<![CDATA[
		/** Removed while displaying in blog... */
	]]>
</mx:Script>
 
<mx:Array id="registrationValidators">
	<mx:StringValidator source="{txtFirstName}" 	property="text" 		 required="true" minLength="2" requiredFieldError="First name is required!"/>
	<mx:StringValidator source="{txtLastName}" 		property="text" 		 required="true" minLength="2" requiredFieldError="Last name is required!"/>
	<mx:EmailValidator  source="{txtEmail}" 		property="text"			 required="true" 			   requiredFieldError="A valid email is required!"/>
	<mx:StringValidator source="{txtCompany}" 		property="text" 		 required="true" minLength="2" requiredFieldError="A company name is required!"/>
	<mx:StringValidator source="{txtPostal}" 		property="text" 		 required="true" minLength="2" requiredFieldError="What is your Postal Code?"/>
	<mx:PhoneNumberValidator source="{txtPhone}"	property="text"			 required="true" minDigits="10" requiredFieldError="A valid phone # is required; e.g (515.221.3216)"/>
	<mx:NumberValidator source="{cmbCountry}"		property="selectedIndex" required="true" minValue="0"  lowerThanMinError="Please select your Country of residence" />
	<mx:NumberValidator source="{cmbState}"			property="selectedIndex" required="true" minValue="0"  lowerThanMinError="Please select a US State of residence" enabled="{cmbCountry.selectedItem == Countries.USA}"/>			
</mx:Array>
 
<mx:Label id="lblTitle" 	text="Register Now" styleName="siHeader"   y="0"/>
<mx:Label id="lblSubTitle" 	text="It only takes a few seconds" styleName="siText"  x="2" y="35"/>
<mx:Label id="lblMsg" 		text="(All fields are required)" styleName="siText" fontStyle="italic" textAlign="right" y="37" x="232" fontSize="10"/>
 
<mx:Label 	id="lblFirstName" 	text="First Name:" styleName="siFieldLabel"   y="65" x="-2"/>
<mx:TextInput 	id="txtFirstName" 	text="{_account.firstName}" 	minWidth="168" 								
									focusOut="onCheckValidation(event);"  x="0" y="81" tabIndex="1"/>
<mx:Label 	id="lblLastName"	text="Last Name:" x="181"  minWidth="70" y="65"			styleName="siFieldLabel"  />
<mx:TextInput 	id="txtLastName"  	text="{_account.lastName}"		width="168" x="183" 						
									focusOut="onCheckValidation(event);"  y="81" tabIndex="2"/>
 
<mx:Label 	id="lblEmail" 		text="eMail:" width="70"  x="-3" y="111" 	styleName="siFieldLabel"/>
<mx:TextInput 	id="txtEmail" 		text="{_account.email}"			width="168" y="127" 						
									focusOut="onCheckValidation(event);"  tabIndex="3"/>
<mx:Label 	id="lblCompany"		text="Company:" x="181"	 width="70" y="111"			styleName="siFieldLabel" 												  />
<mx:TextInput 	id="txtCompany" 	text="{_account.company}" 		width="168" y="127" x="183" 				
									focusOut="onCheckValidation(event);"   tabIndex="4"/>
 
<mx:Label 	id="lblZip" 		text="Postal"	 width="70" y="159"   x="240"  styleName="siFieldLabel"/>
<mx:TextInput 	id="txtPostal"		text="{_account.postal}" 		width="109" x="242" 						
									focusOut="onCheckValidation(event);"  y="175" tabIndex="6"/>
 
<mx:Label 	id="lblCountry"		text="Country" x="-2" width="70" y="159"			styleName="siFieldLabel" 	  />
<mx:ComboBox 	id="cmbCountry" 	dataProvider="{_countries}"		width="230" x="0" y="176"					
									change="onCountryChanged();"			
									prompt="Please select your Country..."  tabIndex="5"/>
 
<mx:Label	id="lblState"		text="State:"	 width="70" x="-1" y="205"	styleName="siFieldLabel" 					 
									alpha="{(cmbCountry.selectedItem == Countries.USA) ? 1 : .3}"/>
<mx:ComboBox 	id="cmbState"		dataProvider="{_states}"		width="230" x="0" y="222" 					
									change="onStateChanged();"	 			selectedIndex="-1"									
									prompt="Please select a State..." 	tabIndex="7"		/>
 
<mx:Label 	id="lblPhone" 		text="Phone:" width="70" x="240" y="205"     styleName="siFieldLabel"/>
<mx:TextInput 	id="txtPhone"		text="{_account.phone}" 		width="109" x="242" y="222"  				
									restrict="0-9,.-" focusOut="onCheckValidation(event);"   tabIndex="8"/>
 
<mx:Image id="btnRegister" click="onSaveProfile()" x="2" y="258"  tabIndex="9" source="@Embed('/assets/images/btn_register.png')" useHandCursor="true" buttonMode="true" focusEnabled="true"/>
 
</mx:Canvas>

A design-mode view from FlashBuilder shows nothing surprising… just your standard WYSIWYG renderering shown in Figure 2. Now let’s apply Adobe-recommended code changes to support localization (l10n) for English and Spanish. Figure 3 shows the design-view impacts as a result of source code modifications; necessary to databind to the resourceManager.

Are here is the MXML code associated with the Figure 3 design-view snapshot:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas width="386" height="290"
			  clipContent="false"
			  xmlns:frm="com.thunderbay.i18nDemo.views.forms.*"
			  xmlns:comp="com.thunderbay.i18nDemo.control.*"
			  xmlns:mx="http://www.adobe.com/2006/mxml" >
 
<mx:Metadata>
	[ResourceBundle("registration")]</mx:Metadata>	
 
<mx:Script>
	<![CDATA[
		/** Removed while displaying in blog... */  
	]]>
</mx:Script>
 
<mx:Array id="registrationValidators">
	<mx:StringValidator source="{txtFirstName}" 	property="text" 		 required="true" minLength="2" requiredFieldError="{resourceManager.getString('registration','register.validationError.firstName')}"/>
	<mx:StringValidator source="{txtLastName}" 		property="text" 		 required="true" minLength="2" requiredFieldError="{resourceManager.getString('registration','register.validationError.lastName')}"/>
	<mx:EmailValidator  source="{txtEmail}" 		property="text"			 required="true" 			   requiredFieldError="{resourceManager.getString('registration','register.validationError.email')}"/>
	<mx:StringValidator source="{txtCompany}" 		property="text" 		 required="true" minLength="2" requiredFieldError="{resourceManager.getString('registration','register.validationError.company')}"/>
	<mx:StringValidator source="{txtPostal}" 		property="text" 		 required="true" minLength="2" requiredFieldError="{resourceManager.getString('registration','register.validationError.postal')}"/>
	<mx:PhoneNumberValidator source="{txtPhone}"	property="text"			 required="true" minDigits="10" requiredFieldError="{resourceManager.getString('registration','register.validationError.phone')}"/>
	<mx:NumberValidator source="{cmbCountry}"		property="selectedIndex" required="true" minValue="0"  lowerThanMinError="{resourceManager.getString('registration','register.validationError.country')}" />
 
	<mx:NumberValidator source="{cmbState}"			property="selectedIndex" required="true" minValue="0"  lowerThanMinError="{resourceManager.getString('registration','register.validationError.state')}" 
</mx:Array>
 
<mx:Label id="lblTitle" 	text="{resourceManager.getString('registration','register.title')}" styleName="siHeader"   y="0" width="351"/>
 
<mx:Label id="lblSubTitle" 	text="{resourceManager.getString('registration','register.subtitle')}" styleName="siText"  x="2" y="35" width="199"/>
<mx:Label id="lblMsg" 		text="{resourceManager.getString('registration','register.allRequired')}" styleName="siText" fontStyle="italic" textAlign="right" y="37" x="232" fontSize="10"/>
 
<!-- Each text input is horizontally aligned on column markers each at 184 pixels wide -->
<mx:Label 	id="lblFirstName" 	text="{resourceManager.getString('registration','register.firstName')}"				
									styleName="siFieldLabel"   y="65" x="-2" width="170"/>
<mx:TextInput 	id="txtFirstName" 	text="{_account.firstName}" 	width="168" 								
									focusOut="onCheckValidation(event);"  x="0" y="81" tabIndex="1"/>
<mx:Label 	id="lblLastName"	text="{resourceManager.getString('registration','register.lastName')}" x="181" 		
									width="170" y="65"			styleName="siFieldLabel"  />
<mx:TextInput 	id="txtLastName"  	text="{_account.lastName}"		width="168" x="183" 						
									focusOut="onCheckValidation(event);"  y="81" tabIndex="2"/>
 
<mx:Label 	id="lblEmail" 		text="{resourceManager.getString('registration','register.email')}"				
									width="171"  x="-3" y="111" 	styleName="siFieldLabel"/>
<mx:TextInput 	id="txtEmail" 		text="{_account.email}"			width="168" y="127" 						
									focusOut="onCheckValidation(event);"  tabIndex="3"/>
<mx:Label 	id="lblCompany"		text="{resourceManager.getString('registration','register.company')}" x="181"		
									width="170" y="111"			styleName="siFieldLabel" 												  />
<mx:TextInput 	id="txtCompany" 	text="{_account.company}" 		width="168" y="127" x="183" 				
									focusOut="onCheckValidation(event);"   tabIndex="4"/>
 
<mx:Label 	id="lblZip" 		text="{resourceManager.getString('registration','register.postal')}"				
									width="111" y="159"   x="240"  styleName="siFieldLabel"/>
<mx:TextInput 	id="txtPostal"		text="{_account.postal}" 		width="109" x="242" 						
									focusOut="onCheckValidation(event);"  y="175" tabIndex="6"/>
 
<mx:Label 	id="lblCountry"		text="{resourceManager.getString('registration','register.country')}" x="-2" 		
									width="234" y="159"			styleName="siFieldLabel" 	  />
<mx:ComboBox 	id="cmbCountry" 	dataProvider="{_countries}"		width="230" x="0" y="176"					
									change="onCountryChanged();"			
									prompt="{resourceManager.getString('registration','register.prompt.country')}"  tabIndex="5"/>
 
<mx:Label	id="lblState"		text="{resourceManager.getString('registration','register.state')}"				
									width="233" x="-1" y="205"	styleName="siFieldLabel" 					 
									alpha="{(cmbCountry.selectedItem == Countries.USA) ? 1 : .3}"/>
<mx:ComboBox 	id="cmbState"		dataProvider="{_states}"		width="230" x="0" y="222" 					
									change="onStateChanged();"	 			selectedIndex="-1"									
									prompt="{resourceManager.getString('registration','register.prompt.state')}" 	tabIndex="7"		/>
 
<mx:Label 	id="lblPhone" 		text="{resourceManager.getString('registration','register.phone')}"				
									width="111" x="240" y="205"     styleName="siFieldLabel"/>
<mx:TextInput 	id="txtPhone"		text="{_account.phone}" 		width="109" x="242" y="222"  				
									restrict="0-9,.-" focusOut="onCheckValidation(event);"   tabIndex="8"/>
 
<mx:Image 	id="btnSubmit" 		click="onSaveProfile()" x="2" y="258"  tabIndex="9" 
									source="{resourceManager.getClass('registration','register.btnRegister'}" 
									useHandCursor="true" buttonMode="true" />
 
</mx:Canvas>

The changes for l10n results in a maintenance nightmare and is – IMHO – completely unusable! And what are the biggest issues with these industry l10n code techniques/solutions?

1. The Design-view is no longer usable.
2. No compile-time checks are performed to determine whether or not the bundle name are correct. No checks to validate spellings of the key or existence of the key.
3. Each and every .mxml and .as file needs similar changes in order to support l10n.
4. No facility for centralized management of bundles, keys, and locales.
5. No accommodations for localized effects to text compression or text expansion

Now realize that I would not condemn an industry standard without presenting a viable – and superior – solution.

For those familiar with my previous presentations, talks, and blogs on Flex Behavior Injection, let’s consider a new approach to i18n. So instead of modifying your source code with resourceManager invocations, “inject” the results of the locale changes from “outside” your components. Now your views and components no longer know anything about locale changes and requirements. Now your design views render properly.

This feature is very similar to that used in the SWIZ, Mate, and other IOC frameworks. So now you, as the developer, never need to embed resourceManager calls in any of your view components. That is really COOL!

So how does this new l10n injection work? What changes are needed to your source code? Below is the application MXML code for the demo. This code (and demo shown above) does NOT support l10n.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?xml version="1.0" encoding="utf-8"?>
<mx:Application pageTitle="i18n Demo without l10n"
				preloader="com.thunderbay.i18nDemo.views.preloader.Preloader"
				creationComplete="signIn.visible = true;"
				backgroundColor="#777777"  backgroundGradientColors="[#777777,#BABABA]"
				layout="absolute" horizontalScrollPolicy="off" verticalScrollPolicy="off"
				xmlns:mx="http://www.adobe.com/2006/mxml">
 
	<mx:Style source="locale/en_US/assets/css/styles.css" />
 
	<!-- Classic Cairngorm MVC structures -->
	<model:Model id="_model" 							xmlns:model="com.thunderbay.i18nDemo.model.*"/>
	<mvc:i18nController									xmlns:mvc="com.thunderbay.i18nDemo.control.*"/>
 
	<views:SignInPage  id="signIn"						xmlns:views="com.thunderbay.i18nDemo.views.*"
					   visitor="{_model.account}"
					   visible="false" 
					   width="854" height="526" 
					   horizontalCenter="0" 
					   verticalCenter="0" />
</mx:Application>

And below is the same MXML application code with 1 line change to support l10n for the entire application:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?xml version="1.0" encoding="utf-8"?>
<mx:Application pageTitle="i18n Demo with LocalizationMaps"
				preloader="com.thunderbay.i18nDemo.views.preloader.Preloader"
				creationComplete="signIn.visible = true;"
				backgroundColor="#777777"  backgroundGradientColors="[#777777,#BABABA]"
				layout="absolute" horizontalScrollPolicy="off" verticalScrollPolicy="off"
				xmlns:mx="http://www.adobe.com/2006/mxml">
 
	<mx:Style source="locale/en_US/assets/css/styles.css" />
 
	<!-- Classic Cairngorm MVC structures -->
	<model:Model id="_model" 							xmlns:model="com.thunderbay.i18nDemo.model.*"/>
	<mvc:i18nController									xmlns:mvc="com.thunderbay.i18nDemo.control.*"/>
 
	<views:SignInPage  id="signIn"						xmlns:views="com.thunderbay.i18nDemo.views.*"
					   visitor="{_model.account}"
					   visible="false" 
					   width="854" height="526" 
					   horizontalCenter="0" 
					   verticalCenter="0" />
	<!-- Single tag used to provide l10n features for the entire application and all sub views 	-->
	<local:LocalizationMap  account="{_model.account}"	xmlns:local="*" /> 
</mx:Application>

Now, whenever the locale changes (at app startup detection, or based on user profile, or user interaction) ALL your views and application l10n features are auto-magically updated. How is this achieved? In the code above, we used a LocalizationMap to configure or “map” injectors to “inject” localized values into your runtime components and models.

Here is the LocalizationMap source for the demo presented in this blog:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

<?xml version="1.0" encoding="utf-8"?>
<map:SmartLocaleMap targets="{[i18nDemo]}" 
					targetReady="onUpdateTarget(event);"
					xmlns="com.asfusion.mate.injectors.*"
					xmlns:map="com.asfusion.mate.maps.*" 
					xmlns:mx="http://www.adobe.com/2006/mxml">
 
<mx:Script>
	<![CDATA[
		import com.asfusion.mate.maps.LocaleMapEvent;
 
		import com.thunderbay.i18nDemo.views.SignInPage;
		import com.thunderbay.i18nDemo.views.forms.RequestNotification;
		import com.thunderbay.i18nDemo.vo.AccountVO;
 
		[Bindable] public var account 	: AccountVO = null;	
 
		/**
		 *  EventHandler when the target class has been instantiated.
		 *  We then use the new instance to update ResourceProxies and fire locale updates
		 */
		private function onUpdateTarget(event:LocaleMapEvent):void {
			var who : Object = event.targetInst as Object;
 
			if (who is i18nDemo) {
				signInPage 	= (who as i18nDemo).signIn;	
			}
		}
 
		[Bindable] private  var signInPage	 : SignInPage 			= null;
	]]>
</mx:Script>
 
<!-- ****************************************************************************************************** 
	This solution leverages compile-time type checking but suffers from:
       1) Have to use the onUpdateTarget() to get a reference [after 'creationComplete']
       2) Only supports a single unique instance of the target class
    But it does support property chain references (e.g. signInPage.frmSignin.validator)
 
     ****************************************************************************************************** -->
 
<ResourceInjector bundleName="registration">
	<ResourceProxy target="{signInPage.frmSignin}" 									property="alertTitle" 			key="signing.invalid" />
	<ResourceProxy target="{signInPage.frmSignin.validator}" 						property="requiredFieldError" 	key="signin.validationError.email" />
	<ResourceProxy target="{signInPage.frmSignin.lblTitle}"   						property="text" 				key="signin.title" />
	<ResourceProxy target="{signInPage.frmSignin.lblEmail}"   						property="text" 				key="signin.email" />
 
	<ResourceProxy target="{signInPage.frmRegister}" 								property="alertTitle" 			key="register.invalidProfile" />
	<ResourceProxy target="{signInPage.frmRegister.registrationValidators[0]}" 		property="requiredFieldError" 	key="register.validationError.firstName" />
	<ResourceProxy target="{signInPage.frmRegister.registrationValidators[1]}" 		property="requiredFieldError" 	key="register.validationError.lastName" />
	<ResourceProxy target="{signInPage.frmRegister.registrationValidators[2]}" 		property="requiredFieldError" 	key="register.validationError.email" />
	<ResourceProxy target="{signInPage.frmRegister.registrationValidators[3]}" 		property="requiredFieldError" 	key="register.validationError.company" />
	<ResourceProxy target="{signInPage.frmRegister.registrationValidators[4]}" 		property="requiredFieldError" 	key="register.validationError.postal" />
	<ResourceProxy target="{signInPage.frmRegister.registrationValidators[5]}" 		property="requiredFieldError" 	key="register.validationError.phone" />
	<ResourceProxy target="{signInPage.frmRegister.registrationValidators[6]}" 		property="lowerThanMinError" 	key="register.validationError.country" />
	<ResourceProxy target="{signInPage.frmRegister.registrationValidators[7]}" 		property="lowerThanMinError" 	key="register.validationError.state" />
 
	<ResourceProxy target="{signInPage.frmRegister.lblTitle}"     					property="text" 				key="register.title" />
	<ResourceProxy target="{signInPage.frmRegister.lblSubTitle}"   					property="text" 				key="register.subtitle" />
	<ResourceProxy target="{signInPage.frmRegister.lblMsg}"   						property="text" 				key="register.allRequired" />
 
	<ResourceProxy target="{signInPage.frmRegister.lblFirstName}"   				property="text" 				key="register.firstName" />
	<ResourceProxy target="{signInPage.frmRegister.lblLastName}"   					property="text" 				key="register.lastName" />
	<ResourceProxy target="{signInPage.frmRegister.lblEmail}"   					property="text" 				key="register.email" />
	<ResourceProxy target="{signInPage.frmRegister.lblPhone}"   					property="text" 				key="register.phone" />
	<ResourceProxy target="{signInPage.frmRegister.lblCompany}"   					property="text" 				key="register.company" />
	<ResourceProxy target="{signInPage.frmRegister.lblZip}"   						property="text" 				key="register.postal" />
	<ResourceProxy target="{signInPage.frmRegister.lblState}"   					property="text" 				key="register.state" />
	<ResourceProxy target="{signInPage.frmRegister.cmbState}"   					property="prompt" 				key="register.prompt.state" />
	<ResourceProxy target="{signInPage.frmRegister.lblCountry}"   					property="text" 				key="register.country" />
	<ResourceProxy target="{signInPage.frmRegister.cmbCountry}"   					property="prompt" 				key="register.prompt.country" />
</ResourceInjector>
 
 
<!-- ****************************************************************************************************** -->
<!-- SmartInjectors for targeted class instantiations; where the class will have multiple instances created -->
<!-- ****************************************************************************************************** -->
 
<SmartResourceInjector target="{RequestNotification}"	bundleName="registration">
	<ResourceProxy property="alertTitle" 									key="register.invalidProfile" />
	<ResourceProxy property="registrationValidators[0].requiredFieldError" 	key="register.validationError.firstName" />
	<ResourceProxy property="registrationValidators[1].requiredFieldError" 	key="register.validationError.lastName" />
	<ResourceProxy property="registrationValidators[2].requiredFieldError" 	key="register.validationError.email" />
	<ResourceProxy property="registrationValidators[3].requiredFieldError" 	key="register.validationError.company" />
 
	<ResourceProxy property="lblTitle.text" 								key="request.title" />
	<ResourceProxy property="lblSubTitle.text" 								key="request.subtitle" />
	<ResourceProxy property="lblMsg.text" 									key="register.allRequired" />
 
	<ResourceProxy property="lblFirstName.text" 							key="register.firstName" />
	<ResourceProxy property="lblLastName.text" 								key="register.lastName" />
	<ResourceProxy property="lblEmail.text" 								key="register.email" />
	<ResourceProxy property="lblCompany.text" 								key="register.company" />
 
	<!-- 
		Inject localized text with parameterized, current values of account details
	    e.g.  "Thanks for registering {0}!"  ==> "Thanks for registering Thomas Burleson!" 
	 -->
 
	<ResourceProxy property="lblThanks.htmlText" 							key="request.thanks.title" parameters="{[account.fullName]}" />
	<ResourceProxy property="lblThanksMessage.htmlText"						key="request.thanks.text"  parameters="{[account.email]}"/>
</SmartResourceInjector>
 
</map:SmartLocaleMap>

Here are some key points regarding the amazing benefits of using a LocalizationMap:

1. All localized changes are in one file
2. Compile-time type-checking is easily supported
3. Runtime instantiation injection is supported (for deferred creation)
4. Parameterized values are injected (see account.email)
5. Property chains are supported
6. Model changes can trigger updates with current localized values
7. Skins and Embedded assets (images, sounds) are supported
8. Easily extended to allow scan cross-referencing for errors is key names or orphaned keys
9. Easily extended to allow transparent access to remote databases instead of compiled bundles
10. Easily extended to allow runtime support for stylesheets

Notice that LocalizationMap extends SmartLocaleMap; which is a parent class available in a soon-to-be-released extension of the open-source Mate framework. Let’s pause while I give a major shout-out to Nahuel Foronda and Laura Arguello!


Best of all, is the fact that the SmartLocaleMap can be used outside of Mate with a MVC framework of your choice… notice that the demo here uses the Cairngorm MVC framework. You can use this easily with Cairngorm, Swiz, Mate, PureMVC, etc.

Within the next week, I will publish two important additions within this blog:

1. A video walkthru demonstrating to you the construction of the LocalizationMap and the logic that works behind the scenes.
2. A localized version of this demo; with runtime support for switching between English and Spanish

Consider the implications of this blog on your product, projects, and processes. Perhaps you can optimize your ROI and engage ThunderBay Software to help with your product deliveries and development improvements?

• Want a presentation to your management?
• Want to see a whitepaper on localization issues and best practices?
• Want to easily embed localization into your flex app? Then you will…
  1. need ANT scripts, bundle loaders,
  2. need compiled LocalizationMap swc,
  3. need support runtime fonts and stylesheets
  4. need mentoring and training for your staff
  5. need to optimize and plan the translation processes
  6. need better tools to support remote translators while protecting your source code
  7. need to minimize your application footprint size
  8. need to optimize your application download speeds

Thanks for reading my blogs. Don’t forget to rate this blog please!
And contact me to discuss IT resources and assistance we can provide to help you with internet solutions, architecture, mentoring, training, or product delivery.

Be sure to read Part 2: LocalizationMaps – A Video Tutorial and Source Code

© Thomas Burleson for GridLinked to RUX, 2009.             Subscribe by Email | Contact Author             Permalink | 29 comments

Do you know how ridiculously easy it is to reverse-engineer/decompile a Flex 3 application and its AVM byte code?

Try it: simply use SWFDecompiler to open any SWF. Even if that .swf file has been optimized for production release, you can still see the classes, methods, and logic. If you are developing an online Flex solution, then you had better worry about protecting your source code. Why lose your invest of time and effort and let competitors steal your ideas and solutions? Patents and trademarks are not the issue here. Those are ex post facto protection mechanisms. At the very least, using source-code IPP will present an immediate “barrier-to-entry” to your competitors.

Now, do not misunderstand the intent of this blog. I am a huge proponent of mentoring, open-source, and the community-driven evolution of software. Google and blog entries have been radical saviors to many technical roadblocks and bugs that I have encountered. In return, I reciprocate by blogging solutions and contributing to open-source (Cairngorm Extensions/CGX, Mate Localizations, Flex Behaviour Injection, etc.) I do not, however, open source ALL my software or solutions.

As a consultant or developer working on a disruptive solution you would be have to be an idiot to not protect your core IP and your core source.

Figure 1: Consequences... if you do not protect!!

So how do you protect your source code? Really only two (2) viable solutions exist for Flash/Flex solutions: code obfuscation or encryption. Source or byte code obfuscation works well for some purposes; but may present real problems with non-trivial Flex architectures. Encryption, however, is more secure and also provides opportunities for you to track customer usage and authorize access.

You can "grow-your-own" encryption mechanism and embed the decryption key in your code. Or you can use a client-cloud model to request your decryption key from a cloud-based service. Nitro-LM is a hosted, commercial technology platform that provides user management, product licenses, and software protection (encryption) for Java, .NET, Adobe Flex/AIR, C/C++ software. Nitro-LM administration, user authorization, and key creation/access is all managed online as a hosted software-as-a-service (SaaS). And while the license services are offered as an annual subscription, the yearly cost to provide RSA encryption for my software product IPP is trivial. Granted, if you have a free product, then a subscription-based licensing model may not work for you. If you have a free product, I would contend that you probably do not have a viable revenue model in the first place… so why protect it?

Anyone who has ever tried to write user management or user license modules recalls that those features and the associated issues of maintenance & availability quickly become a "full-time job". The broad suite of features and functionality offered by Nitro-LM is amazing and the support is excellent (shout out to Andrew Westberg). So sign-up for a webinar and check it out for yourself; and no I do NOT get any compensation for my promotion.

For the purpose of this blog, I will be presenting a solution for IP source-code protection using Nitro-LM and "encryption of Flex RSLs". Nitro-LM already publishes solutions for encrypting your Flex application or a Flex "module". But nothing was available for encrypting a Flex RSL (aka shared library). So I created that solution, released it as open-source to SimplifiedLogic, and now present it to you. Shown below is a live demo of a Flex app using a custom preloader [display] and dynamic RSL decryption:

Figure 2: Custom Preloader with Dynamic RSL Decryption (click to launch)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute" 
				minWidth="1024" minHeight="768" 
				backgroundColor="#777777"  backgroundGradientColors="[#777777,#BABABA]"
				preloader="tb.preloader.ThunderPreloader"				creationComplete="onAppReady();"
				xmlns:mx="http://www.adobe.com/2006/mxml" 
				xmlns:adobe="http://www.adobe.com/2006/cairngorm">
 
 <!--
	Note the ThunderBay loading indicator is shown because
    of the preloader reference to ThunderPreloader; which is NOT
    a preloader but a subclass of DownloadProgressBar
 -->
 
 <mx:Script>
	<![CDATA[
		import mx.controls.Alert;
 
		import tb.utils.DelayedCall;
 
		private function onAppReady():void {
			DelayedCall.schedule( showStatus,[],600);
 
			function showStatus():void {
				var msg : String = 'Finished: CGX encrypted RSL was decrypted & loaded using Nitro-LM!';
				mx.controls.Alert.show(msg,'Encrypted RSLs Loaded');	
			}
		}
	]]>
 </mx:Script>
 
 <!-- A class from the encrypted RSL CairngormExtensions.swf -->
 <adobe:FrontController id="myController" />
 
</mx:Application>

This demo loads an encrytped CaignormExtension RSL. Download this encrypted RSL directly and try to decompile it! Now download and decompile the standard version that is NOT encrypted. The latter version you can get access to class code and logic. The former is completely locked and unreadable. I love this feature; encryption is awesome!

Flex RSLs act as shared libraries (similar to DLLs on Windows), require only a single download [to the browser/flashplayer] and can be shared among multiple Flex applications. These RSLs can be optimized for small footprint sizes to achieve faster download times. And best of all, you can update an RSL with patches, upgrades, etc… without requiring new downloads of any other RSLs. This power comes with a small price to start-up time and complexities to builds and source-code organization. For a SaaS solutions, especially, I think RSLs are critical requirements. For deeper learning, check out

1. Adobe LiveDocs "Introduction to RSLs"
2. Adobe Labs "Flex 3 RSLs"

To understand the process of RSL encryption/decryption, you must first be familiar with how RSLs are loaded. First, do you need to know an interesting secret about a Flex application! A Flex application is constructed as a 2-frame movie. The first frame of a Flex application movie contains on the very critical classes including the SystemManager, the Preloader, the DownloadProgressBar and some glue helper classes. The second frame of a Flex SWF contains the rest of the Flex framework code, your application code and all of your application assets like embedded fonts, images, etc. This means it takes a lot longer to get all of the frame 2 downloaded than the small stuff in frame 1.

Which means that the Flash player can access content on downloaded frames without having to wait for subsequent frames/the entire file to download. By creating a 2-frame movie, Flex applications can take advantage of the streaming support built into the Flash Player and a preloader can appear before all of the Flex framework code and your application code are downloaded. The visible benefit of this whole idea is the loading bar. Even on a large app, Flex quickly shows that it is loading (Frame1 downloaded) and gives continual feedback to the user while the rest of the app downloads (Frame 2).

So here are the steps involved in the startup of a Flex application:

1. First, enough bytes for frame 1 are streamed down to the Flash Player.
2. The Flash Player executes those bytes by creating a SystemManager instance.
3. SystemManager instruct the Flash Player to stop at the end of frame 1.
4. SystemManager then goes on to create the Preloader which creates the DownloadProgressBar control and pops that up on the client screen.
5. The Preloader then starts tracking the rest of the bytes streaming in from the Flex SWF (or from external SWFs).
   Once all the bytes for the Flex framework and application code are in, the System Manager goes on to frame 2 and instantiates the Application instance.
   • All RSLs and their associated classes are now loaded [into the ApplicationDomain]; note that the load order is in the order defined during app compile time.
   • All class definitions used by the application (views, logic, etc) must be loaded prior to Frame 2. It is here, in Frame1, that your preloader code can even install patches to the Flex framework BEFORE the framework classes themselves are loaded.
   • This technique is called "monkey-patching" and will be used later
     when we are discussing the decryption process.
6. Once the Application instance has been created, the SystemManager sets Application.systemManager to itself. This is how you, the application developer, can access the SystemManager at a later time.
7. The Application dispatches the preinitialize event at the beginning of the initialization process.
8. Application goes on to create its children. The method createChildren() is called on the application. At this point each of the application’s components is being constructed, and each component’s createChildren() will be also called. For detail, look at component lifecycle section.
9. The Application dispatches the initialize event, which indicates that all application’s components have been initialized. However, at this state, all the components are not yet laid out.
10. Eventually, once all the Application child controls and containers have been created, sized and positioned, the Application dispatches the creationComplete event.
11. Once the creationComplete event has been dispatched, the Preloader removes the DownloadProgressBar control and the SystemManager adds the Application instance to the Flash Player display list. (The Flash Player display list is basically the tree of visible or potentially visible objects that make up your application. When you add and remove child components to your application, your basically just adding and removing them from the display list).
12. Once the Application is added to the Flash Player display list, the Application dispatches its applicationComplete event
13. The Application has been created and is up on the screen ready to be interacted with.

A well-known technique for displaying your own startup splash screen is to subclass the DownloadProgressBar control [or implement the IPreloaderDisplay interface]. Your custom display class can be used during the startup and that class can listen for 6 types of events:

• ProgressEvent.PROGRESS
• Event.COMPLETE
• FlexEvent.INIT_PROGRESS
• FlexEvent.INIT_COMPLETE
• RSLEvent.RSL_PROGRESS
• RSLEvent.RSL_ERROR

The last two are the interesting part… with those you can listen to events for RSL loading and errors. And, it is during the preloader event dispatching phase that you will manage/decrypt 1 or more encrypted RSLs. Here are the steps involved:

1. The FlashPlayer loads an encrypted RSL/swf and dispatches an RSLError event; normally this kills the preload process and your application "hangs".
2. Intercept that event and kill all event propogation to any other listeners; which effectively pauses all subsequent loading of other RSL still in the pending queue.
3. Using Nitro-LM, asynchronously request a RSA decryption key
4. Reload the encrypted RSL (in order to get clear access to the swf bytecode array)
5. Decrypt the byte array
6. Load the decrypted bytecode into the AVM
7. Notify the Preloader to resume loading all remaining pending RSLs

So let’s look at the AS3 code for the custom display class that also supports RSL decryption:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

package tb.preloader
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
 
import mx.core.RSLItem;
import mx.core.RSLListLoader;
import mx.core.mx_internal;
import mx.events.RSLEvent;
import mx.preloaders.Preloader;
 
import tb.preloader.nitrolm.NitroDecryptor;
 
use namespace mx_internal;
 
public class ThunderPreloader extends SplashDisplay
{
/**
 * Constructor for a Preloader subclass that supports on-demand RSL decryption
 * 
 */
public function ThunderPreloader() {
	super();
}
 
 
/**
 * The code in the preloader setter below uses listeners to intercept RSLErrors and 
 * handles the loading and decryptiong of encrypted RSLs. 
 * 
 * 		Note: The parent class is responsibile for the 
 * 			  PROGRESS, COMPLETE, INIT_PROGRESS, INIT_COMPLETE events and handlers
 * 
 * @param value IPreloaderDisplay subclasses used as interface to startup processes; that have been initiated by SystemManager. 
 */
override public function set preloader(value:Sprite):void {
	super.preloader = value;
 
	_preloader = (value as Preloader);
	_preloader.addEventListener(RSLEvent.RSL_PROGRESS, 	onRSLDownloadProgress );
	_preloader.addEventListener(RSLEvent.RSL_ERROR, 	onRSLEncryptionDetected, false, 999);
 
}
 
// **************************************************************
//  RSL Event Handlers
// **************************************************************
 
/**
 * Called during initial RSLEvent.RSL_ERROR; in our case
 * this is expected because the RSL is encrypted and cannot be properly loaded.
 * Kill the event propogation and invoke the NitroLM decryptor to reload a decrypted version 
 * of the RSL.
 * 
 * @param event  Initial RSLEvent.RSL_ERROR
 * 
 */
private function onRSLEncryptionDetected(event:RSLEvent):void {
	// Could be encrypted so reload it and check.
	event.stopImmediatePropagation();
	_decryptor.loadAndDecrypt(event.url, onRSLDecryptedAndLoaded);}
 
/**
 * Method invoked when the encrypted RSL has been decrypted and loaded into the AVM.
 * This causes the next RSL to start loading (if any available). 
 * @param event
 * 
 */
private function onRSLDecryptedAndLoaded(event:Event):void {
	// We must manually force the Preloader to continue load all subsequent RSLs
	// that are in the queue (after the current RSL has processed/loaded).
	Preloader(_preloader).mx_internal::resume();	
}
 
/**
 * Show the progress of the current RSL download relative to the total percentage 
 * Not relevant to 
 * @param event RSLEvent to update progress of load each RSL
 * 
 */
private function onRSLDownloadProgress(event:RSLEvent):void {
	// Now that are tracking on RSL loads, remove generic listener...
	_preloader.removeEventListener(ProgressEvent.PROGRESS, 	onDownload_Progress);
 
	centerOnScreen();
	progressBar.progress = calculatePercentDone(event);
	if (progressBar.visible && !isReady) progressBar.visible = false;
}
 
// **************************************************************
//  Private Attributes
// **************************************************************
 
private function calculatePercentDone(event:RSLEvent):Number {
	var amountPerRSL   : Number = DOWNLOAD_PERCENTAGE / event.rslTotal;
	var alreadyLoaded  : Number = amountPerRSL * event.rslIndex; 
	var currentLoading : Number = amountPerRSL * (event.bytesLoaded / event.bytesTotal);
 
	return  alreadyLoaded + currentLoading;
}
 
 
/**
 * Decryptor facade class that hides complexities of asynchronous decryption 
 * of encrtyped RSL.
 * 
 * @private 
 */
private var _decryptor      : NitroDecryptor = new NitroDecryptor();
 
// **************************************************************
//  Monkey-Patch Attributes (to force linker to load the patched classes)
// **************************************************************
 
private var _preloader     : Preloader;
private var _unused4       : RSLListLoader;	
}
}

Because the Flex 3 & 4 mx framework never planned for the use of encrypted RSLs, any RSLError event immediately stops the current and all other RSL load processes. In our situation, however, we do not consider an "encryption error" to be a real error… so we have to "fix" or monkey-patch the Flex codebase to support new "resume()" functionality.

Don’t worry, I have provided all that "patch" code in source code for this blog! In order to employ RSL encryption within your own Flex application(s), you will need:

• A Nitro-LM account and product encryption keyset
• An application configured to load 1 or more RSLs during startup
• A custom DownloadProgressBar display with support for RSL decryption
• An Ant script to encrypt your RSL/swf (shown below)

Below is a sample ANT script that you can use to encrypt a target Flex library using a Nitro-LM RSA private key:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<?xml version="1.0" encoding="utf-8"?>
<project name="Deploy EncryptedRSL Demo" basedir="." default="encrypt.compiled.swc" >
 
	<property name="library.name" 	value="CairngormExtensions" />
 
	<property name="flexsdk.dir" 	value="/Users/thomasburleson/Documents/dev/flexSDK" />
	<property name="bin.dir" 		value="/Users/thomasburleson/Documents/dev/frameworks/CGX/build" />
	<property name="deploy.dir" 	value="/Users/thomasburleson/Documents/dev/samples/nitroLM/Flex4_encryptedRSL/bin-debug" />
	<property name="build.dev" 		value="/Users/thomasburleson/Documents/dev/samples/nitroLM/Flex4_encryptedRSL/build" />
	<property name="tools.dir" 		value="${build.dev}/tools/build" />
 
	<target name="encrypt.compiled.swc" depends="">
		<encryptSWC rsl-dir="${bin.dir}/rsl" swc-dir="${bin.dir}" swc-name="${library.name}" deploy-dir="${deploy.dir}" />		<delete dir="${bin.dir}/rsl" quiet="true"/>
 
		<echo message="Finished build and encryption of: ${deploy.dir}/${library.name}.swf "/>
	</target>
 
 
		<!--
			Ant Definitions and Macros
		-->	
 
		<taskdef name="nitrolm-encrypt" classname="com.simplifiedlogic.nitrolm.LMEncryptAsset" classpath="${tools.dir}/jars/AssetEncrypterX.jar"/>
 
		<macrodef name="encryptSWC">
			<attribute name="rsl-dir"/>
			<attribute name="swc-dir"/>
			<attribute name="swc-name"/>
			<attribute name="version-stamp" default="" />
 
			<attribute name="deploy-dir"       default="${deploy.dir}" />
			<attribute name="encrypt-keys-dir" default="${tools.dir}/nitro_lm/keys" />
 
			<sequential>
				<!--   Process
 
					1) Extract the SWF from the SWC (RSL that should be encrypted)
				    2) Optimize the RSL (remove debug info and compress)
				    3) Encrypt the SWF/RSL with Nitro-LM tools and keys
				    4) Deploy the encrypted RSL
				    5) Update the target SWC digest with the encrypted RSL checksum 
				       - The "parent" app that loads the RSL uses the SWC/updated digest value to
				       - insure that the RSL is the "expected" RSL and not a pirated one!
				-->
 
				<unzip src="@{swc-dir}/@{swc-name}.swc"
					dest="@{rsl-dir}">
					<patternset>
	                   <include name="library.swf" />
					</patternset> 
				</unzip>
 
				<java jar="${flexsdk.dir}/lib/optimizer.jar" fork="true" failonerror="true">
					<jvmarg line="-ea -DAS3 -DAVMPLUS -Dflexlib=${flexsdk.dir}/frameworks -Xms32m -Xmx384m -Dsun.io.useCanonCaches=false"/>
					<arg line="'@{rsl-dir}/library.swf' --output '@{rsl-dir}/library.swf' --keep-as3-metadata='Bindable,Managed,ChangeEvent,NonCommittingChangeEvent,Transient' "/>
				</java>
 
				<!-- encrypt the swf to protect 
					 Here, I am using my private key downloaded from my Nitro-LM account
					 @ https://license.nitromation.com/NitroAdminLite/index.html
				-->
				<nitrolm-encrypt
					filename="@{rsl-dir}/library.swf"
					product="6LMLulqf9VN9AmbFzKky"
					library="6LMLulqf9VN9AmbFzKky"
					keydir="@{encrypt-keys-dir}" />
 
 
				<delete file="@{deploy-dir}/@{swc-name}.swf" />
				<copy file="@{rsl-dir}/library.swf" tofile="@{deploy-dir}/@{swc-name}@{version-stamp}.swf" />
 
				<!-- Update the digest value in the .swc so linking applications will use the updated digest value 
				     Do not worry about the library.swf inside the SWC being the original version...
				-->
				<java jar="${flexsdk.dir}/lib/digest.jar" fork="true" failonerror="true">
					<jvmarg line="-ea -DAS3 -DAVMPLUS -Dflexlib=${flexsdk.dir}/frameworks -Xms32m -Xmx384m -Dsun.io.useCanonCaches=false"/>
					<arg line="--digest.rsl-file  @{rsl-dir}/library.swf --digest.swc-path  @{swc-dir}/@{swc-name}.swc"/>
				</java>
 
 
			</sequential>
		</macrodef>
 
 
</project>

Click here to download the FlashBuilder 4 Demo project (and ant build script) used for the demo above. You can even use the Custom Preloader display solutions to rapidly create your own.

So what is next? Well, if you have non-trivial flex applications you may want to deliver some of the following support:

• want to partition your code into multiple RSLs ?
• need to provide on-demand compiles and encryption of multiple RSLs ?
• want to version stamp those RSLs based on tags in SVN, CVS, or GIT ?
• want to optimize filesizes for all deployed, production components ?
• want to auto-deploy components with version-stamps ?
• want to configure CruiseControl for automated builds and deploys ?

If you need help with these, contact me. My professional life is as an RIA Flex/Flash consultant, entrepreneur, developer, architect, and mentor. So give me a shout out at Thomas dot Burleson at ThunderbaySoft dot com.

© Thomas Burleson for GridLinked to RUX, 2009.             Subscribe by Email | Contact Author             Permalink | 7 comments

One of issues that frequently confuses, blocks, or complicates Cairngorm implementations is the issue of “view notifications”. Every Cairngorm developer ask the following question at some point: How should the Cairngorm business layer best communicate with the Presentation layer?

Review Figure 1 which illustrates the recommended relationships between the view and control layers:

• Model is a repository for data
• Views support user interactions and announce user gestures as dispatched events to Controllers
• Controllers employ commands to process dispatched events
• Commands are responsible for using Delegates to talk to the server, and updating model data (client side)
• Views use data binding to “watch” Model data changes and self-update to dipslay formatted data.

Commands are supposed to use the Model layer as the mediator between business and presentation layers. In Flex, data bindings and change watchers allow views to watch data models. When data is modified, hidden propertyChange events are dispatched from Models to Views and the View uses event listeners to self-update. This is the basic premise of the Flex Cairngorm MVC framework.

In real-world applications, data binding solutions espoused by Cairngorm MVC are not always sufficient; since such solutions require views to watch for data changes. Some times, however, watching for data changes is complicated… perhaps the data is not globally available. Sometimes the view [that dispatches the business event] is requesting data that should be available only to that specific instance of the calling view; and should not be stored in global repositories. Sometimes, we do not care so much about the data… but instead we want to execute custom code when the event succeeds and finishes.

PureMVC and traditional Cairngorm solutions require complex code and design patterns to solve these situations.

• ViewLocators could be used to try to lookup an instance of a view. (Requires coupling to specific view classes from the business layer…. BAD!)
• Views could employ/register private view controllers with the front controller,
• Command could dispatch new “notify view” events thru the front Controller to the view controller

The above approaches create a proliferation of view controllers and is useful ONLY when multiple views want to listen to the same event and be notified simultaneously. Please note that in such rare situtations, a custom event-bridge or a traditional data binding approach would be more practical [but that is another article]. In fact, in most scenarios, the view simply wants the notification directly and exclusively (only to its instance). For these situations, there is a simpler – and better – solution to the ViewController complexity.

• What if we cannot easily use global data models and view data binding?
• What if we do not want to create an hierarchy of bindable properties simply to deliver data to deeply nested child views?
• How can we deliver data directly to a view instance without storing that data in the ModelLocator hierarchy?
• And… if the View invokes a Command [via event dispatching] and Command/Delegate pairs process server data, how can the Command deliver the processed results back to the View only?

The remarkably easy solution is to use Responders as notification mechanisms to allow Commands to notify Views… just like the way Delegates notify Commands [See Cairngorm Secret Tip #2: Data Transformations within Delegates]. To understand the proposed solution, consider the Cairngorm approach where a Command instance employs a Delegate class as “API facade” to remote data services.

The command instance submits itself [or a proxy to itself] as a responder to the delegate. The delegate, in turn, simply uses the specified responder to direct dataservice responses directly to back to the command. This allows the Command to receive callbacks from the Delegate or the Server. In fact, advance this same approach is used at the Delegate level to allow Delegate instances to intercept server responses, transform data, and then notify/pass the modified data back to the Command.

Using Responders, a Command can submit itself as a callback to specific Delegate calls. Views can effectively do the same with Commands. Figure 2 below illustrates this process or queueing of responses. The queue builds with (1) View waits for a response from the Command, (2) the Commands waits on the Delegate, and (3) the Delegate waits on the Server. The queue unwinds after (4) the server responds, (5) Delegate notifies the command, (6) the Command notifies the view. Using a Responder proxy, the view is notified after the actual dataservice request/response and after Command processing; see Step (6) in Figure 2.

Well, when we dispatch business events to commands, we create custom events. So we simply need to transport a Responder instance along with the normal event information that is dispatched to the Cairngorm control layer. If all custom events have constructors with optional responder arguments then we have a built-in mechanism to support callbacks from Commands.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

package mx.rpc
{
/**
 *  This interface provides the contract for any service
 *  that needs to respond to remote or asynchronous calls.
 */
public interface IResponder
{
	/**
	 *  This method is called by a service when the return value
	 *  has been received. 
	 *  While <code>data</code> is typed as Object, it is often
	 *  (but not always) an mx.rpc.events.ResultEvent.
	 */
	function result(data:Object):void; 
	/**
	 *  This method is called by a service when an error has been received.
	 *  While <code>info</code> is typed as Object it is often
	 *  (but not always) an mx.rpc.events.FaultEvent.
	 */
	function fault(info:Object):void;
}
 
}

package com.grdlinked.samples.control.events {
 
    import flash.events.Event;
    import mx.rpc.IResponder;
    import com.universalmind.cairngorm.events.UMEvent;
 
    public class LoadUserDetails extends UMEvent {
 
        public static var EVENT_ID : String = "loadUserDetailsBySSN";
 
        public var ssn      : String = "";
        public var password : String = ""; 
 
        // Constructor 
        public function LoadUserDetails( ssn:String,                                    password:String,
                                    callbacks:IResponder=null) {
            super(EVENT_ID, callbacks, true, false);
 
            this.ssn      = ssn;
            this.password = password;
 
        }
    }
}

For the examples in the post, we use a custom event LoadUserDetailsEvent class that accepts an optional “responder” parameter. Using a SSN and password the view requests user details from the control layer. The control/business layer may elect to lookup the user in a client-side cache or call the server. The business layer is responsible for all these details and the presentation/UI layer need not worry. And the view does NOT know anything about who handles the event or how the event is processed. This “separation of concerns” is what MVC is all about.

When the event is processed by the command, the command can temporarily cache the view responder or callback. Sometime later – after the asynchronous data service call responds – the following can happen:

1. the command can use the dataservice response to update the ModelLocator directly, trigger databindings to update, and
2. the command can forward the dataservice response or any OTHER data to the cached responder. Command::notifyCaller() is the method used to provide view notifications.

If your views want to implement the IResponder interface, each one of your views would need to include public result() and fault() functions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 	width="400" height="300" 
		implements="mx.rpc.IResponder"
		xmlns:mx="http://www.adobe.com/2006/mxml" >
 
	<mx:Script>
	<![CDATA[
		import mx.rpc.IResponder;
		import mx.controls.Alert;
 
     // Methods required by the IResponder interface		
      public function result(data:Object):void {
            btnLoad.enabled = true;
      }
      public function fault(data:Object):void {
            Alert.show(event.message);
            btnLoad.enabled = true;
      }
 
 
	// Private methods invoked by child controls		
      private function loadUserDetails(ssn:String):void {
            btnLoad.enabled = false;	// disable button while waiting for a response.
 
            // Load the user details for the specified user
            //NOTE how this view will be the responder...
            var callbacks : IResponder = this as IResponder;            var event : LoadUserDetailsEvent = new LoadUserDetailsEvent("435-34-1283", "anonymous", callbacks);
		  event.dispatchEvent(  );   // Cairngorm events self-dispatch directly to the business layer; 
      }
 
	]]>
	</mx:Script>
 
	<mx:Button id="btnLoad" label="Load User" textAlign="center" x="145" y="149" click="loadUserDetails()" width="147"/>
 
</mx:Canvas>

In our example the view needs to know when the results are available; since the load button is disabled until the business layer [and server] responds .

The above code sample shows, unfortunately, how each of your custom views would need to be modified to work as view responders. When the command finishes, it would call something like caller.result(). Unfortunately, the signature of the result() function is ambiguous and does not document which event triggered the result. In contrast a method like onResult_loadUserDetails() explicit documents its purpose.

After a thorough slapping, ask that developer this question:
“What if I had two buttons that each dispatched separate business events and each needed separate response handlers? How could the result() function be the common event handler for both events? Would I have to somehow detect – inside the result() method – which event is responding?”

As you can see, this solution rapidly creates nasty code and rapidly produces nasty, convoluted, unmanageable code.

So instead of requiring an abomination of view interfaces or view inheritance (which is even worse), the view will instead create an instance of a Responder class that will serve as a proxy responder class. The Responder class will redirect result() and fault() calls to methods that we specify. Let us look at some code for clarity. Below we see an example of custom view component created to load and display user details.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 	width="400" height="300" 
		xmlns:mx="http://www.adobe.com/2006/mxml" >
 
    <mx:Script>
    <![CDATA[
		import mx.rpc.IResponder;
		import mx.controls.Alert;
		import mx.rpc.events.FaultEvent;
		import mx.rpc.Responder;
 
 
     private function loadUserDetails(ssn:String):void {
          // Load the user details for the specified user
          var callbacks : IResponder           = new Responder(onResults_loadUserDetails, onFault_loadUserDetails);          var event     : LoadUserDetailsEvent = new LoadUserDetailsEvent(user.ssn, user.password, callbacks);
 
          btnLoad.enabled = false;	// disable button while waiting for a response.
          event.dispatchEvent(  );	// Cairngorm events can self-dispatch to the business layer.	  
     }
 
     // ***************************************************
     // Private EventHandlers for the loadUserDetails()
     // ***************************************************
 
     private function onResuls_loadUserDetails(user:UserVO):void {
          // The SSN and password were authenticated; here are user details
          _user = !user ? new UserVO() : user;
          btnLoad.enabled = true;
     }	
 
     private function onFault_loadUserDetails(event:FaultEvent):void {
          Alert.show(event.message);
          btnLoad.enabled = true;
     }
 
     private var _user : UserVO = new UserVO();			
 
    ]]>
    </mx:Script>
 
	<mx:Text text="Please enter your credentials to edit your account:" x="16" y="30"/>
 
	<mx:FormItem label="FullName:" x="23" y="208">  
		<mx:Label text="{_user.fullName}"/> 
	</mx:FormItem>
	<mx:FormItem label="SSN:" x="54" y="104">  
		<mx:TextInput id="txtSSN"  text="{_user.ssn}" width="129"/> 
	</mx:FormItem>
 
	<mx:FormItem label="Password:" x="23" y="70"> 
		<mx:TextInput id="txtPassword" /> 
	</mx:FormItem>
 
	<mx:Button id="btnLoad" label="Load User" textAlign="center" x="145" y="149" click="loadUserDetails()" width="147"/>
 
</mx:Canvas>

Commands – after the processing is finished – will trigger any cached IResponders::result() methods to notify the sender [View] of the event.

In the code example above, look at line 15 where we use a Responder instance to act as a proxy for the functions that we want to call. The Responder class does NOT know any details about the view itself. It simply has functions that may be called upon an event response. For a successful response, the view wants onResults_loadUserDetails() to be called. Likewise for failures, the view wants onFault_loadUserDetails() to be called. With responders, the view essentially provides event handlers for Command post-processing.

To summarize the above code snippet as psuedo-code, you (a) use a responder proxy wrapper class, (b) package the responder instance inside the event, and (c) extend the command base class to support the caching of the callback/view responder. And voila’ you are done!

This is VERY clean:

1. your views are still standard mxml or as classes with aggregates and composite controls,
2. event dispatching is the same [with an optional callback] and
3. you do NOT have to create crude view controllers to handle view notifications
4. each view instance can have its OWN, separate callback
5. views can then support modal operations, undos, reverts, commits, etc… completely independent of each other.
6. you can dispatch as many business events as desired; each with their own event/response handler methods.

Better yet, this functionality is built into the Cairngorm Extensions (CGX) using both the Callback and the mx.rpc.Responder classes. CGX is an open-source extension to cairngorm. If you are interested in this and other Cairngorm extensions provide comments to this blog or or visit Google Cairngorm Extensions.

© Thomas Burleson for GridLinked to RUX, 2009.             Subscribe by Email | Contact Author             Permalink | 41 comments

One aspect of those designs was to create a sense of depth [and engage the user] by judiciously highlighting key components with lighting and reflections. Many of the resulting storyboard pages contained 2 or more components with reflections.

Manually creating a reflection requires 20 or more steps and about 60 seconds to complete… for each component. I will not bother listing each step… it is non-trivial and tedious [and the code at the bottom of this blog shows you the details]. There had to be a way to automate the process. I realized that a Fireworks Command was the solution!

With a Fireworks command and associated hot-key, I could automate 20+ steps and many mouse movements to a single command. And I could easily invoke that command using a hotkey. Wow! But how would I create the command if I did not know the Fireworks API? Before we solve the automation issue, let’s first see what the Reflection command actually does. Then we will learn how to create such a command.

Click on any of the thumbnails below to see the examples of using a ‘Create Reflection’ command.

Below is an outline of the process you can use to create your own reflection command. Let Fireworks record all your steps and save those steps as javascript code. Then you can fine-tune that code as desired:

1. Open the History panel and make sure the history is clear,
2. Manually create a reflection with the 20 or more steps (painful details not included),
3. In the History palette, select the steps that match the process to create the reflection,
4. Using the History Menu, select the ‘Save as Command…’ menu option,
5. Specify the name ‘Create Reflection’ and click OK
6. Edit the javascript command code to perform as desired:
   1. Use a text or code editor to open the ‘Create Reflection.jsf’ file (directory location below),
   2. Modify the code to programmatically support clip height, opacity, offsets, etc.
   3. Save modified command file,
   4. Return to Fireworks, select a object, and invoke the ‘Create Reflection’ command
7. Did your changes work? If not go to Step (6) make more coding changes and iterate…

Fireworks Commands Directory (Mac OS X)

But where [which directory] should you open/edit/save the ‘Create Reflection.jsf’ command file? Click the thumbnail on the right to zoom for details.

After the challenging [and fun] time invested to create my own working command, my ‘Create Reflection’ works great. The Ustrive2 developers loved using it for their own design efforts.

With the code [shown below] and a copy of the ‘Create Reflection.jsf’ command file, it is my hope that you will also enjoy using this command.

Below is the javascript code contained in the link for your own Create Reflection.jsf command (click to download):

/*
 * CreateReflection is a Fireworks Command that creates a vertical reflection [of the currently selected items].
 *
 * This is an incredible timesaver and allows the designer to quickly create reflections for anything.
 * When 1 or more items are selected in the current canvas area, those items are:
 *   1) Duplicated, flipped vertically, and flatten (original items are unchanged and deselected)
 *   2) The flattened copy is cropped to the top 40 pixels
 *   3) A gradient alpha mask is applied to the cropped image
 *   4) Both the mask and image are flattened and opacity set to 20%
 *
 * TODOs:
 *    1) Add support to skew/distort the selected images and reflection (for 3D perspective effect)
 *    2) Create runtime UI dialog to request clip height, offset, opacity, and skew parameters
 *    3) Check for no items currently selected and posting feedback to designer
 *
 * Author:  Thomas Burleson, Flex/Groovy Consultant
 *
 *          Blog    @ http://www.gridlinked.info
 *          Profile @ http://www.LinkedIn.com/in/ThomasBurleson
 *          eMail   @ ThomasBurleson@gmail.com
 *
 *
 * Date:  Feb 24, 2009
 */ 
 
var OFFSET         = 4;
var REFLECT_HEIGHT = 40;
 
var dom            = fw.getDocumentDOM();
var reflections    = new Array();
 
// Copy and flip selection, move to OFFSET below the original, and flatten to bitmap 
dom.clipCopy();
dom.clipPaste();
 
dom.group();
dom.reflectSelection(false, true, "autoTrimImages transformAttributes");
dom.flattenSelection();
 
var bounds = dom.getSelectionBounds();
dom.moveSelectionBy({x:0, y:bounds.bottom-bounds.top+OFFSET}, false, false);
 
// Clip image to REFLECT_HEIGHT,
bounds = dom.getSelectionBounds();
bounds.bottom = bounds.top + REFLECT_HEIGHT;
dom.setSelectionMask( {  maskBounds:bounds, 
                                       maskKind:"rectangle", 
                                       maskEdgeMode:"hard edge", 
                                       featherAmount:0, 
                                       maskData:null }, 
                                    "replace");
dom.exitPaintMode();
dom.cropSelection(bounds);
 
// Cache the reflection...
reflections.push(fw.selection[0]);
 
// Build an alpha clip mask and set transparency to 20%
dom.addNewRectanglePrimitive(bounds, 0);
dom.setBrushNColor(null, "#ffffff00");
dom.setFillVectorStart({x:bounds.left, y:bounds.top});
dom.setFill( { category     :"fc_Linear", 
			   ditherColors :[ "#000000", "#000000" ],
			   edgeType     :"antialiased", 
			   feather      :0, 
			   gradient     :{ name:"cn_Custom", nodes:[ { color:"#ffffff",  isOpacityNode:false, position:0 }, { color:"#ffffff",  isOpacityNode:false, position:1 }], opacityNodes:[ { color:"#000000",  isOpacityNode:true,  position:0 }, { color:"#00000000",isOpacityNode:true,  position:1 }] }, 
			   name         :"fn_Linear", 
			   pattern      :null, 
			   shape        :"linear", 
			   stampingMode :"blend opaque", 
			   textureBlend :0, 
			   webDitherTransparent:false });
 
// Cache the alpha mask
reflections.push(fw.selection[0]);
 
// Select the reflection and alpha mask, then group and set opacity...
fw.selection = reflections; 
dom.group("mask to image");
dom.flattenSelection();
dom.setOpacity(20);
 
// DONE!

After this tutorial, you should explore more solutions and start creating your own cool Fireworks commands. I will let you figure out how to assign a hotkey sequence to a command. With commands and hotkeys, your design life becomes FUN!

If you extend or enhance ‘Create Reflection’, please send me a copy And don’t forget, please comment and rate this article (rate by select the star levels) below.

© Thomas Burleson for GridLinked to RUX, 2009.             Subscribe by Email | Contact Author             Permalink | 3 comments

I must admit that this software concept is not new. Consider the very popular JQuery UI Interactions. The JQuery UI Resizable code provides functionality to allow 1 or more HTML components to be dynamically resized. Other functionality exists for dragging, dropping, selecting, etc.

During Jan ‘09 – at FlexCamp OC in Irvine, CA – I presented a new topic called Flex Behavior Injection. Below is an improved version of the slide deck that I presented at that conference. These slides are interactive; simply click to go to the next or previous slide. You can also zoom the slides using the slide control bar…

Of course, what good is a slide deck without a live application and code samples? Below is a live version of a well-known Adobe application that demonstrates a charting dashboard solution with multi-chart interactions. Selecting a data point on a chart triggers filters and auto-updates dependent charts. With two (2) lines of code, I have enhanced that application to use injected behaviors for swapping and zooming. Click the picture below to play with the live Flex application.

Here are some helpful tips: To zoom, use the toolbar to select which chart you want to zoom, then click the Zoom button.

To swap a chart:

1. Select the ‘Enable Swap’ checkbox,
2. Then move your mouse over the bottom area of any of the chart panels,
3. The cursor will change to a hand-cursor,
4. Click and drag a chart to see how dynamic swapping works

As you drag a chart around, watch how the other charts will swap positions dynamically, on-the-fly as you drag. Even better, with view states, your chart could be coded to change reconfig its states after resizing… so swapping could also change the layouts of each chart. For example, if placed in an narrow vertical area, the panel could change state to display a datagrid instead of a chart… you can imagine the sensation and rich user experience that you could offer to users.

Figure 1: Chart Dashboard with Behaviors (click to launch)

Below is the main code for the sample application. Notice the Zoomer component tag that is highlighted on line 14. When activated (click event on line 26), the Zoomer handles all nesting and constraint issues for the target component when it zooms. And – best of all – the Zoomer handles details of un-zooming the component back to its original settings/location. You can easily imagine the enormous pain of trying to manually cache and restore settings and anchors…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
 
	<mx:Script>
        <![CDATA[
		[Bindable] private var _target : UIComponent = null;
        ]]>
    </mx:Script>
 
   <!-- RPC Dataservice component for the chart XML data --> 
   <mx:HTTPService id="srv" url="/data/dashboard4.xml" useProxy="false" result="resultHandler(event)"/>
 
   <!-- Behavior components -->
    <behaviour:Zoomer	id="zoomer" target="{_target}" />   <swap:Swapper 	id="swapper" 
			allowedDrops="{[allRegions,regionBreakdown,regionDetail]}" 
			active="{_canSwap}" 	/>
 
    <mx:ApplicationControlBar left="10" right="10" top="5">
	<mx:Label text="Chart to Zoom:"/>
 
		<mx:RadioButton label="All Regions" click="_target = allRegions;" />
		<mx:RadioButton label="Breakdown"   click="_target = regionBreakdown;" />
		<mx:RadioButton label="Details"     click="_target = regionDetail;" />
 
	<mx:Button label="{zoomer.isZoomed ? 'UnZoom' : 'Zoom'}" click="zoomer.play();" />            
		<mx:Spacer width="100%" height="10" />		
	<mx:CheckBox label="Swap Enabled" selected="false" click="_canSwap = (event.target as CheckBox).selected;" />
    </mx:ApplicationControlBar>
 
    <mx:Canvas id="content" top="50" bottom="10" label="10" right="10" left="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
        <views:AllRegions   id="allRegions"	
	    		 width="{content.width/2 - 10}" height="100%"  left="0"
	    		 revenueData="{slicedMonthData.source}" 
			 monthChange="monthChange()"   	/>
 
        <views:RegionBreakdown id="regionBreakdown" 
			width="{content.width/2}" right="0" height="{content.height/2 - 10}" top="0" 
			regionChange="regionChange()"   />
 
        <views:RegionDetail id="regionDetail" 	 
			width="{content.width/2}" right="0"   height="{content.height/2 - 10}" bottom="0" 
			revenueData="{slicedRegionData.source}" />
    </mx:Canvas>
 
</mx:Application>

This concept is very powerful. Your view components are not required to know about zooming or swapping (etc.) nor are you – the developer – required to configure special view hierarchies or plan for other considerations. Your coding style remains unchanged and your framework(s) [e.g. Cairngorm, CGX, Mate, etc.] remains unchanged.

Many people have asked for the source code to these components. This code will be open-sourced soon and the release is planned within the near future. Please consider rating this blog post and submitting some comments. You may subscribe to my blog RSS for auto-notifications when the Flex Behavior library is released.

© Thomas Burleson for GridLinked to RUX, 2009.             Subscribe by Email | Contact Author             Permalink | 5 comments

All too often I find great visual applications with great experiences… are more often created in Flash not Flex. And unfortunately, their code (if published) is usually procedural and timeline-based instead of the component-based approaches that come so easily in Flex.

Porting such RIA applications from Flash 8 to Flex 2 – where the concepts of timelines are deprecated – presents challenges. When you consider that most Flex projects are business-oriented applications that do not require dynamic stage-drawing interactions (like the Elastic Cords), then this project was the perfect impetus for me to explore and understand some major conceptual differences between Flash and Flex; differences such UI interactions, tweenings, component coupling, etc..

Figure 1: Elastic Cords Demo (click to launch)

I knew the effort would prove to be quite fun and challenging. In fact, I first became obsessed with the development efforts and solutions. Then I became obsessed the playing with the demo and dragging those ridiculous cords around.[So be forewarned ]

Click on the sockets on the left to create new cords. Watch the new cords elastically bounced out and fall to the ground in a simulation of elasticity and gravity. You can click and drag the loose end(s) of the cords around. Watch the cords bounce and sway as you move the endpoint. Then you can release the end-point near the “drop” sockets and watch them snap into the dock sockets.

The source code is available! Simply right-click on the running application and View Source.

Enjoy.

© Thomas Burleson for GridLinked to RUX, 2006.             Subscribe by Email | Contact Author             Permalink | 2 comments