Truth is, I’m not sure if this is the technically the world’s “first” Flex-based social networking application, but I can say that I haven’t see anything else like it in Flex – so there’s a good chance it is. Nevertheless, hopefully the title was enough to grab some attention

I came up with the idea for Xuland a year ago. At the time I simply wanted to come up with a project that would allow me to dive into the Flex 4 Beta and try out some new frameworks (other than Cairngorm). I chose Swiz for its “brutal simplicity” and I was immediately impressed.

I present this first to the greater Flex community as I’m really interested in feedback at this stage of its development. Does it make sense? Does it load fast?

My biggest concern: determining whether Flash was the right platform for a site like this. Honestly, I don’t see why not. Flex is a great framework. Flash is a great multimedia platform. Add a little social networking features and you could have the makings of something great.

I wasn’t able to attend MAX this year although I did enter Xuland into the 2010 MAX Awards. There were several other amazing sites that Adobe chose over Xuland and I don’t blame them. There truly is some fantastic talent out there and I feel blessed to even be remotely part of this group.

To put it simply, Xuland is a social network centered on location, rather than a friend’s list.

It started off as a way to get to know your neighbors…the people that are most likely *not* on your friend’s list. I’ve always thought Facebook was a great way to re-connect with old friends and family (not “old family”, sorry Mom) but you wouldn’t necessarily meet new people on Facebook. I remember back in the days of MySpace when random strangers would friend each other…some folks had thousands of “friends”. It was always so bizarre to me. I’m not sure if that same trend has crossed over into Facebook since its advent of fan-pages but still sites like these didn’t feel like the appropriate place to establish new friends.

A better opportunity arose through Yelp. Yelp centers itself on geography. You can see reviews of the restaurant down the street which is fantastic but it was difficult to carry on a conversation with past reviewers. Sure there’s message boards, but it would be nice to carry on a real-time conversation with someone in your same town that you did not already have a past relationship with (i.e. “on your friend’s list”).

Xuland eventually morphed into a FLASH-ier alternative to Craigslist, complete with a commenting & rating engine, Google map that pools postings into the comment stream based on location and selected radius, a built-in ad & local event submittal system and there’s even a simple image editor. No, this isn’t your father’s Craigslist.

I’m going to add a lot more, including extending the project to include mobile. What I’ve done so far took a lot of work (spare time with a family, mind you) but I’m happy to keep chugging forward as long as the site finds some real use out there.

What I really hope is to prove that Adobe Flash & Flex can be used for much more than dashboard and charting widgets or for unseen back-office intranet apps.

I had a lot of fun exploring Flex 4′s new skinning architecture, the Swiz inversion-of-control framework, the cloud technology that I’m using to host Xuland and many other bits and pieces of knowledge I had to find to assemble this all together.

I don’t think the site is ready for global public consumption quite yet. There’s a lot of little details I need to iron out but it works for the most part. I invite anyone reading to try it out and let me know what you think!

http://www.xuland.com The map should geolocate to your general area, but it won’t be exact. If it’s off, drag the map around and set your new default location (you’ll have to login). You can also (change) the map to anywhere else in the world which is nice. Talk to folks in Munich, or Paris. Change the map zoom, too. As the radius changes, so does the number of viewable comments. The red dot in the middle essentially shows the center of the map around which it pools comments.

Login with your Facebook or other social networking accounts, or create your own Xuland account via the registration form. Try posting a comment, attach an image, or real estate posting. There are many categories similar to what you’d find on any classified ads website. You can also post a local event (I got a little tired of getting invited on Facebook to events that were in other cities!).

I’ll post more on this blog and on Xuland’s own Tumblr blog. It’s getting a little difficult juggling all of this so bear with me if I seem a little slow, otherwise thanks so much for reading and trying out Xuland.

Thought this might help someone. I had a small task to add validation for a “terms and conditions” checkbox for a work project today and after researching a couple of ways to do that (easily), I found this clever trick.

Use the built-in Flex mx:StringValidator!

By pointing to the selected property of the checkbox component, then validating the length of its string value you can effectively validate a checkbox field without having to extend Validator and create your own customized component.

1
2
3
4
5
6
7
8

<mx:StringValidator 
	id="validatorTermsAndConditions"
	source="{chkTermsAndConditions}" 
	required="true" 
	property="selected" 
	maxLength="4" 
	requiredFieldError="You must agree to the Terms and Conditions." 
	tooLongError="You must agree to the Terms and Conditions."/>

Nifty!

With Flex, I learn something new every day.

Today I wanted to add a link to the htmlText property of an mx:Text component. However, I wanted the link to actually execute a function rather than navigate to some external content.

When I’ve needed this in the past, I’ve had to very carefully layout some Text components inline with a LinkButton to give the appearance of a homogeneous flow of text, but this was clunky and I figured there had to be a better way.

The mx:Text component has a built-in event listener property called “link”:

1

<mx:Text link="onLinkClick(event)"/>

You can dispatch link events from your anchor href tags embedded in your htmlText. The event type can be passed through the listener to the handler to accommodate multiple event types:

1
2
3
4
5
6
7

<mx:Text link="onLinkClick(event)">
	<mx:htmlText>
		<![CDATA[
			This is my HTML.  I can <a href="event:myEventType">link</a> this text to execute an actionscript method.
		]]>
	</mx:htmlText>
</mx:Text>

The handler can then use the text property of the TextEvent to use in a switch or other conditional if your htmlText contains multiple links, or you can skip passing the event to the handler altogether if you wish.

1
2
3
4
5
6
7

private function onLinkClick( event:TextEvent ) : void
{
	if ( event.text == "myEventType" )
	{
		//do something
	}
}

This is incredibly simple to implement and would have come in sooo handy in the past.

C’est la vie

Most Flex developers know that the default PopUpManager in Flex has a centerPopUp method that allows you to center the popup over the display object passed in through the method signature:

1
2
3

var _popup:MyPopup = new Popup();
PopUpManager.addPopUp( _popup, this );
PopUpManager.centerPopUp( this );

You may even switch out the “this” reference and replace with “parent” or “parent.parentApplication” to center the popup on the entire application.

This can be especially true if you’re opening a popup from a small component in your application and don’t necessary want the popup to get centered on that one single component.

Unfortunately, if the dimensions of your parent Application are larger than the dimensions of the viewable browser window, you will have to center the popup manually rather than use the built-in centerPopUp() function.

Here’s how I center popups manually in Flex:

First, in your HTML template, I create a JavaScript function to return the browser width and height. I found this handy function on the web somewhere and it seems to do the trick:

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

function getBrowserHeight()
{
	var winW = 630, winH = 460;
 
	if (parseInt(navigator.appVersion)>3) {
	 if (navigator.appName=="Netscape") {
	  winW = window.innerWidth;
	  winH = window.innerHeight;
	 }
	 if (navigator.appName.indexOf("Microsoft")!=-1) {
	  winW = document.body.offsetWidth;
	  winH = document.body.offsetHeight;
	 }
	}
 
	return winH;
}

In this case, it’s only returning height (which I’m mostly interested in), however you can modify it to return both attributes if you’d like.

In Flex, I make a call to JavaScript using ExternalInterface during application startup and store that value somewhere (say on the Model) where I can access it later:

1

model.browserHeight = ExternalInterface.call( "getBrowserHeight" );

Now, whenever I open a popup, I use the browserHeight I’ve stored on the Model and manually compute a centered position on the screen:

1
2
3
4
5
6
7
8
9
10

/**
 * Opens this popup
 */
public static function open( parent:UIComponent, model:MyModel) : void
{
	var _popup:MyPopup= new MyPopup();				
	PopUpManager.addPopUp( _popup, parent.parentApplication as DisplayObject, true );
	_popup.y = ( model.browserHeight / 2 ) - ( _popup.height / 2 );
	_popup.x = ( ((parent.parentApplication.width) / 2) - (_popup.width / 2) ); 
}

In this example, I place a static function within the popup class itself, which nicely encapsulates that logic. I also pass in some UIComponent. This is used mostly to get access to the parentApplication object, which I can use to figure out the application’s total width.

As you can see, by dividing the application width and height, then subtracting the popup’s width and height, you can manually center the popup in the visible area of the browser regardless of the application’s full height (which could be thousands of pixels high in some scrollable instances).

Opening the popup from a view is as simple as calling the static function:

1

SubmitAdPopup.open( this, model );

I’ve run into this situation quite often in various Flex applications so I hope this may help others who finds themselves in the same boat.

Opinions? I’m curious in seeing how others solved this riddle.

I ran into an issue today I didn’t immediately have an answer for.

I added an overlay to the map of my Xuland flex-based social networking tool which resembled a radar (concentric circles, tinted slightly green):

Before adding the radar overlay, I could drag the map as normal, however after adding the overlay atop the visible map area, the map no longer responded to mouse drag events.

Before writing a lot of code to catch and re-dispatch mouse events from the overlay to the map, I admit I felt a little silly after discovering a simple property that just needed to get added to my overlay:

1
2
3
4

<map:RadarOverlay
	id="radar"
	buttonMode="true" useHandCursor="true"
	mouseEnabled="false"/>

As the API mentions: “Specifies whether this object receives mouse messages. The default value is true, which means that by default any InteractiveObject instance that is on the display list receives mouse events. If mouseEnabled is set to false, the instance does not receive any mouse events. Any children of this instance on the display list are not affected. ”

And it worked perfectly!

With the Xuland Flex-based social networking application I’ve been working on for the past eight months, I decided to switch things up on the back-end, most notably in the services layer where I’ve been using ColdFusion 9 for my data-access objects.

ColdFusion has been a perfect fit for Flex since I had used the software quite extensively for much of my programming career. However, as I prepare Xuland for go-live (August 13th – which also coincides with the Adobe MAX Awards deadline for entry date), I realized that without a license for the software I would be restricted to shared hosting services – a solution that would not work in the long-run, especially if Xuland were to suddenly gain popularity.

As I considered dedicated or “cloud” hosting, I would have to either buy an $8,000 ColdFusion license (umm, no) or switch to an alternative. BlueDragon piqued my interest, but it unfortunately does not yet support AMF. Without the ability to remote, my application would launch already dead in the water.

Another alternative, completely unknown to me before today, is Railo (pronounced “Rhylo” after a fictitious alien dog in Star Trek).

“Railo is a free, open-source alternative for ColdFusion application development.” It currently supports the AMF3 format (whereas in the last version it only supported AMF0) and comes shipped with its own application server and servlet engine (Caucho Resin). In fact, the Express versions can be downloaded, configured for Flex and launched within minutes. The best part is it’s completely FREE.

I’ve since switched from ColdFusion to Railo and with hardly any tweaking, Xuland was running against Railo executing the same CFC’s I had already written for ColdFusion 9. After starting the Railo service locally the first time, it automatically created the necessary Flex remoting-config and services-config XML files needed in the WEB-INF directory. Remoting worked perfectly, and I dare say it seems a bit faster (I have not run any benchmarks quite yet, however).

If you’re looking for a solution similar to this, definitely consider Railo as it works as well as ColdFusion without the sheer cost.

Here’s a nice static method for creating random passwords…should the need ever arise

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

public static function generateRandomPassword( length:int = 7 ) : String
{
	//characters to use in password
	var _salt : String = "abchefghjkmnpqrstuvwxyz0123456789ABCHEFGHJKMNPQRSTUVWXYZ";
 
	//initialize vars
	var _password : String = '';			
	var _i:Number = 0;
 
	//loop 
	while ( _i <= length )
	{
		var _num : Number = Math.random() * _salt.length;
		_password += _salt.charAt( _num );
		_i++;
	}
 
	return _password;
}

Enjoy!

Today I ran into a situation where I wanted to display my password characters as a bullet versus the default asterisk (“*”).

I thought this would be pretty simple to do but realized after digging through the Flex 4 SDK that there was no public property I could set to change this. I tried hacking commitProperties and a couple of other methods but came up short in those areas as well until I found the exact spot in the Flex libraries where this character was defined:

RichEditableText.as (line 679)

1
2
3
4

    /**
     *  @private
     */
    mx_internal var passwordChar:String = "*";

A-ha! I see here that it’s prefixed with the “mx_internal” namespace and I remembered from other examples around the web that you can easily tap into that namespace and modify properties not normally meant to be modified.

Luckily, I had already extended the TextInput class for various other reasons and decided to add an event listener for the CREATION_COMPLETE lifecycle event of the component. This was added in the constructor:

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

import mx.core.mx_internal;
 
/**
 * Constructor
 */
public function myTextInput()
{
	super();
 
	this.addEventListener( FlexEvent.CREATION_COMPLETE, onCreationComplete );
}
 
private function onCreationComplete( event : FlexEvent ) : void
{
	//change internal passwordChar to a bullet versus an asterisk
	this.textDisplay.mx_internal::passwordChar = "●";
}

…and voila! By tapping into the mx_internal namespace, I found I could modify the normally private variable “passwordChar” and set it to something I preferred better (in this case, the bullet point used in some sites like Twitter).

Hope this helps someone!

Although you can easily just download the Swiz 1.0 Beta SWC (above), you can also check-out the project from github (the Swiz repository) into Flex Builder and build it yourself.

To do so (from scratch), try out these steps:

Install EGit

• Install the “EGit” eclipse plug-in (Update site: http://download.eclipse.org/egit/updates) into Flex Builder

Create Flex Library Project and import from github

• In Flex Builder, right-click in the Navigator pane, and choose “New –> Flex Library Project”. Give it a name, something like “SwizFramework”
• Click Finish
• Right click on the newly created project, and select Import –> Git –> Git Repository
• On the Swiz github page (http://github.com/swiz/swiz-framework, you’ll see a read-only URI to the repository: git://github.com/swiz/swiz-framework.git
• Copy that link into “Source Git Repository” import window (URI field) that opened up in Flex Builder
• The rest of the fields should auto-magically populate
• Click Next to see the existing branches for this repo…just check the “master” and hit Next
• In the Directory field, click Browse, and navigate to the “src” folder of the library project you just created
• Uncheck the “Import projects after clone” checkbox and click Finish
• The Swiz framework will be checked-out from github into your src folder
• Right-click on the library project and choose properties
• Access Flex Library Build Path from the left menu, then under “Main source folder”, click Browse and find the src folder within the code you just checked out from github. The path will probably be “src\swiz-framework\src”.
• Now access “Flex Library Compiler” option from the left menu and add this to the “additional compiler arguments” field:

-keep-as3-metadata+=Inject,Autowire,Outject,Mediate,Dispatcher,PostConstruct

• Right above that in the Namespace URL field, type “http://swiz.swizframework.org”
• Underneath that, in the Manifest file field, Browse to the manifest.xml file that’s in your src folder and click OK

That’s it…now you can include this Library Project in any Flex project you may already have by adding it to the Library Path tab under the Flex Build Path property screen in your project’s Properties, or you can grab the newly compiled SWC from the framework project’s /bin folder if you need more portability.

Hopefully this process is relatively clear for those of you that need the latest up-to-the-minute version of Swiz

The latest and greatest release for the little-framework-that-could Swiz has finally been promoted to “BETA” status. Grab the SWC here: http://www.swizframework.org/files/swiz-v1.0.0-beta.swc. Read the full list of changes/additions here: http://swizframework.org/2010/03/swiz-1-0-0-beta-now-available/

I’ve been using the Swiz Framework for my Xuland project (still in development) for the last four months and have been quite happy with the tried-and-true 0.6.4 “pre-alpha” release. Even though the versioning of Swiz has been a hotly debated topic in the Swiz forums, I have felt through my own experiences with Swiz that 0.6.4 was as Production-ready as you could get.

Still I’m excited about the new things the Swiz team has introduced and decided today to catch up on all of the forum postings (http://groups.google.com/group/swiz-framework) and blog rolls.

If you’d like to learn how to check-out the project for yourself from github, see my article regarding Swiz here.

It’s been a couple of years since I worked with ColdFusion and Flex together, but I remember I always like the combination and chose it for my new little Xuland social networking project I’ve been working on (see previous posts).

I had to remember how the whole Flex-ColdFusion remoting setup would work again and I had to overcome a couple of hurdles. I thought I’d share the experience as it would have helped me get up to speed quickly.

Here’s a quick recap of setting up your Flex application to remote to ColdFusion:

1. Install ColdFusion (I installed mine to the default C:\ColdFusion9 directory)
2. In FlexBuilder, create a new Flex project
3. While creating the project, select an Application server type of “ColdFusion” and check the “Use remote object access service” with the “ColdFusion Flash Remoting” option selected.
   .
   
4. On the next screen, in my case I’m using a Standalone installation and had to uncheck the “Use default location for local ColdFusion server”. Of course, the root folder was C:\ColdFusion9. I clicked Validate Configuration which validated that the root folder existed.
   .
   
5. I happen to use ColdFusion primarily for access to a MySQL datasource, so I had to setup the datasource in the ColdFusion admin first (this information should be readily available anywhere)
6. Once the datasource was setup, I first created a value-object (VO) in ColdFusion to represent the object (in this case, a User) I wanted to pass back to the Flex application
   .
   UserVO.cfc:

   1 2 3 4 5

   <cfcomponent output="false" alias="com.xyz.coldfusion.vo.UserVO"> <cfproperty name="userID" type="numeric"/> <cfproperty name="username" type="string"/> <cfproperty name="password" type="string"/> </cfcomponent>

7. After the VO, I created a data-access object (DAO) to query the datasource for a user and return a UserVO to the calling Flex application
   .

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

   <cfcomponent output="yes"> <cffunction name="getUserByID" access="remote" returntype="com.xyz.coldfusion.vo.UserVO">   <cfargument name="userID" type="numeric" required="yes">   <cfquery name="getUser" datasource="xuland"> SELECT * FROM tblUsers WHERE userID = '#userID#' </cfquery>   <cfreturn getUser>   </cffunction> </cfcomponent>

8. Back in the Flex project, I setup my RemoteObject tag to point towards the ColdFusion DAO component I created in the last step:
   .

   1 2 3 4 5 6 7 8 9 10 11

   <!-- Remote Services --> <mx:RemoteObject id="userService" destination="ColdFusion" source="com.xyz.coldfusion.dao.UserDAO" showBusyCursor="true">   <mx:method name="getUserByID" result="resultHandler(event)" fault="faultHandler(event)"/>   </mx:RemoteObject>

9. Create your result and fault handlers (here we just display an Alert)
   .

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

   <fx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent;   private function resultHandler( event : ResultEvent ) : void { Alert.show( event.result.toString() ); }   private function faultHandler( event : FaultEvent ) : void { Alert.show( event.fault.faultString ); } ]]> </fx:Script>

10. Finally create a button or method to call the service:
    .

    1	<mx:Button click="userService.getUserByID( 1 )"/>

Much of this logic may be abstracted off into controllers, delegates, commands or other framework-specific components but this is a fairly simple example of installing, configuring and executing a remote object service call from Flex to ColdFusion.

At work, I wanted to review some information on the Adobe Flex 4 LiveDocs help documentation and had a lot of trouble finding it online.

Luckily at some point in the past, I managed to bookmark it at home and am reposting it here in case anyone else might be interested. Here is the link to the Flex 4 help documentation, which is a fantastic resource. I hope it comes in handy

Download the trial copy of Flash Builder 4, read the above documentation and experiment by building your own test applications.

There are quite a few changes from Flex 3 to Flex 4 and the earlier you get acclimated to the new features, the better prepared you’ll be when the final product ships Good luck!

Just to re-cap my previous post on the subject: I started a new Flex 4 project (an experimental social networking app now entitled “Xuland“) using the Swiz framework and I must say I’m quite impressed with it thus far.

What suprised me however was the release of the latest version of the swc, 1.0.0 alpha last week! I had begun this project using the latest 0.6.4 swc (for Flex 4) and voila, just in time for Christmas, Ben Clinkinbeard issued a notice on the Swiz Framework google group (http://groups.google.com/group/swiz-framework) stating that the alpha had been released.

The new alpha contains a host of new features I’m excited to get my hands on (do other folks really get this excited about frameworks?):

1. Autowire:
   New and improved. Works much like the mx:Binding tag in MXML and supports a new “destination” attribute
2. Dot-notation:
   Autowire now supports dot-notation (someClass.someProperty) rather than the former “property” attribute
3. Setter injection:
   Swiz now supports single argument setter injection
4. Custom metadata processors:
   Umm, wow. Create your own Swiz [Metadata] annotations using Swiz’s reflection API…fantastic!
5. VirtualBean:
   A new tag included with Swiz that allows you to “beanitize” (is that a word?) a property on another bean.

In upgrading Xuland to 1.0.0, I encountered an issue with the AbstractController class in Swiz, which is now missing. Granted this abstract class just allowed my service controller to call “executeServiceCall” directly, but since these are just wrappers around static methods in the main Swiz class, I figured I could just reference those methods directly from my controller but alas I cannot.

These methods are completely gone from this version of Swiz, as is SwizConfig!

I’m either stuck with staying with 0.6.4 or modifying the 1.0.0 version to add the functionality back in (so I can still continue development of Xuland) or wait until the Swiz team comes up with another release. $%@$!

I suppose I *could* update my Application to remove the reference to SwizConfig, then move the RemoteObject definitions from Beans.mxml to my controller classes, then remove the executeServiceCall’s.

I’ll re-post what I end up doing hopefully with some code samples for anyone out there that’s curious.

Kudos to the Swiz team and I hope they continue finding time for this semi-brutally simple micro-architecture.

Today I officially start coding a new Flex project. This isn’t associated with 24 Hour Fitness at all. It’s more or less a personal side project that, if I’m lucky, could actually turn into something at best. At worst, it would still be a great learning experience.

Our applications at 24 Hour Fitness are built on Flex 3 and Cairngorm (with a few tweaks). Although this has worked out just fine in the end, the roadmap to a finished product with Cairngorm was wrought with struggles.

We came up with a couple of different ways for a Cairngorm Command class to notify the View after execution. We originally had tried to decouple our components as much as possible by dispatching custom events to the parents, which in turn would dispatch a Cairngorm event to trigger some service call. This amounted to a lot of extra code and wiring that just made our applications more difficult to maintain.

We’ve moved off most of the logic contained in our Views to Commands, but there’s still more to go. Now we have hundreds of Commands, and many views that string together to support several different flows to our Application.

Needless to say, I’ve been looking for an easier alternative to Cairngorm and I’m willing to give a new framework a try.

“Swiz represents best practices learned from the top RIA developers at some of the best consulting firms in the industry, enabling Swiz to be simple, lightweight, and extremely productive.”

Sounds good to me! Thus, my new project – a Flex-based social networking site hopefully much different that anything else out there in Facebook-land, will be comprised of the following technologies and frameworks:

Flex 4 (currently in Beta 2)
Swiz Framework
ColdFusion 9
BlazeDS
MySQL 5 (or SQL Server 2008)

I went with ColdFusion primarily because I’ve worked with it quite a bit before and as a bonus, ColdFusion 9 comes bundled with BlazeDS! This combination, for me, provides the fastest route possible in achieving a finished product.

I’ll keep a running log here of my hurdles in creating this project and I’m excited to begin the adventure!

A few months ago, I embarked on a project for 24 Hour Fitness that involved something I had only heard about at the 2008 Adobe MAX conference in San Francisco – “flex sub-applications”. There, I attended a lecture by Alex Harui on Flex Framework Features to Support Large Applications (listen to the lecture here on Adobe TV). I must admit the lecture had probably put many to sleep, but I was fascinated by the concept and to this day (granted, MAX was just a few months ago) I believe this will become a very important topic to many as the complexity and possibilities available in large-scale Adobe Flex applications becomes ever apparent.

For this reason, I appended a “Part 1″ to the title of this article as I don’t know if I can squeeze my experience with sub-applications into just one writing and I certainly plan in the coming months to venture even farther into these murky waters.

I think Alex’s main point behind his lecture was to unveil the new Marshall Plan bundled with Flex 3.2 (released during MAX). But before I can describe what the Marshall Plan is, it’s important to know why it came about.

Most applications you’ll ever build in Flex are probably on the smaller scale, ranging from anywhere between a few hundred kilobytes (final SWF size) to several megabytes of compiled Flex code (including the Flex framework). This doesn’t include embedded images or other assets which could dramatically increase that size (I typically try very hard NOT to embed assets to keep the final SWF as lean as possible). Some applications could be significantly larger, spanning hundreds or thousands of commands (if you use Cairngorm or other such MVC architecture), classes and MXML.

It’s always very important to understand that the entire application frame of your final SWF will be downloaded to the client in one shot. This could be a lengthy wait for some and the solution has always been to break up that large application into pieces, or “modules” that could be loaded and unloaded during runtime.

The possibility of caching some code in the client’s Flash Player for re-use by other applications was also created by using Runtime Shared Libraries (RSL’s). But because of “full class integration” (the ability to reference classes in the RSL by classname), the RSL must be compiled with the same version of Flex as the main application. RSL’s also have the disadvantage of not being unloadable. Once an RSL has been loaded at the onset of application startup, it’s there to stay.

Modules are another example of re-using functionality. Modules are collections of classes compiled into a SWF and are loaded by ModuleLoader. Classes in modules are not directly referenced by the main application. Instead both refer to a shared interface (IDataGrid, for example). This is called “partial class integration”. Modules can also be unloaded and removed from memory. Unfortunately because the main application and module share at least some assets, modules, too must be compiled by the same version of Flex as the main application.

Which brings us to a new concept called “sub-applications”, released as a part of Flex 3.2 in November, 2008 at Adobe’s MAX conference in San Francisco. Sub-applications have NO class integration, which is needed to support multi-versioning .

Sub-applications are completely individual, separate applications (identified by the root tag), compiled into a SWF that is loaded by a parent application through the SWFLoader component (you can also use Loader and added the loader object as a child to SWFLoader).

Previously, Flex 2 also supported the concept of sub-applications in that you could use SWFLoader to load another SWF application. You could even access properties in the sub-application from the main application using the SystemManager class. Unfortunately, Flex 2 was only able to load the sub-application into the same “SecurityDomain” (or sandbox) as the parent application. By playing in the same sandbox, the sub-application could have unrestricted access to variables in the main application…an unwanted side-effect especially if the sub-app is untrusted (say, written by a third-party).

With Flex 3.2, you have a little more control over how the sub-application SWF is loaded, primarily through two properties of SWFLoader. One is trustContent (which existed in Flex 2) and the other is loadForCompatibility (new as of Flex 3.2). And the changes in the Flex source code revolving around the new loadForCompatibility feature really serve as the basis for the new Marshall Plan.

The trustContent property specifies whether the sub-application is loaded into the same SecurityDomain as the host. This property is defaulted to false, which means SWF content loaded from separate domains (xyz.com instead of abc.com) will load without error if the separate domain does not have a crossdomain.xml policy file declaring that your domain has rights to access its content. This is preferred behavior, however your parent application would not be able to access the SWF content (via SWFLoader.content). This property is directly tied to the SWFLoader.loaderContext.securityDomain property and can also be set manually via ActionScript.

Setting trustContent to true is equivalent to copying the loaded SWF to your own server and loading it from there. This is one way to get around any security sandbox restrictions you might experience, however I also noticed that it also can cause other complications, most notably with singleton’s like Cairngorm’s ServiceLocator (which I’ll discuss in a later post).

The loadForCompatibility property specifies whether the sub-application is loaded into a peer ApplicationDomain as the parent (when set to true), or into a child ApplicationDomain (when set to false). This flag only pertains to applications loaded within the same SecurityDomain (if trustContent == true).

Child ApplicationDomains inherit classes from the parent (like UIComponent, Container, etc). This can cause obvious problems if both applications were compiled with different versions of Flex. A child sub-application written in Flex 3.2 may not wish to inherit the UIComponent definition of its parent application that was written in Flex 4. The loadForCompatibility flag forces SWFLoader to load the sub-application into a separate ApplicationDomain (when true) which keeps the definitions for these classes separate. This is most needed for multi-versioned applications. This flag should only be set to true if you know both applications will always be compiled with the same version of Flex.

In my next article, I’ll discuss some of the pitfalls I ran into with sub-applications and specifically, Cairngorm-based sub-applications. Stay tuned!

I just started building a small administrative application and in addition to having the 24 Hour Fitness logo appear in the upper left-hand corner of the main Panel, I wanted to spice it up with a cutesy bounce effect.

At first, I created my own bounce effect by using the Sequence effect, shipped in the Flex SDK’s effects package (mx.effects.Sequence). The Sequence effect “plays multiple child effects one after the other, in the order in which they are added”. The sequence effect would combine a series of AnimateProperty effects (mx.effects.AnimateProperty) that would move the “y” value of an image from a starting y-position value to an end y-position value and then back and forth to simulate an object bouncing:

1
2
3
4
5
6
7
8
9
10
11

<!-- Define factory sequence class -->
<mx:Sequence id="bounceSeq">
	<mx:AnimateProperty property="y" fromValue="-70" toValue="45" duration="500"/>
	<mx:AnimateProperty property="y" fromValue="45" toValue="-35" duration="450"/>
	<mx:AnimateProperty property="y" fromValue="-35" toValue="35" duration="350"/>
	<mx:AnimateProperty property="y" fromValue="35" toValue="-15" duration="250"/>
	<mx:AnimateProperty property="y" fromValue="-15" toValue="30" duration="150"/>
	<mx:AnimateProperty property="y" fromValue="30" toValue="5" duration="150"/>
	<mx:AnimateProperty property="y" fromValue="5" toValue="25" duration="150"/>
	<mx:AnimateProperty property="y" fromValue="25" toValue="23" duration="150"/>
</mx:Sequence>

I gave the first fromValue a starting position of “-70″, which for this application meant the logo would first appear off-screen. But in the end, I had trouble configuring the values to make the bounce look right. I also had trouble moving the sequence component inside it’s own mxml class definition since flex effects aren’t listed as the typical UI Components used as mxml components.

So I decided to write an ActionScript version of a Sequence effect. It was then I discovered that Flex already had incorporated several easing behaviors into the effects package. Great news!

I set off to write a sequence effect class in ActionScript that incorporated the Move easing effect. The class was incredibly easy to write since the Sequence class itself contains only one method (initInstance). By overriding that method, creating a new Move easing effect and adding that object to as a child to the sequence, the bounce effect I was looking for was easily achieved:

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

package 
{
	import mx.effects.IEffectInstance;
	import mx.effects.Move;
	import mx.effects.Sequence;
	import mx.effects.easing.*;
 
	/**
	 * Custom sequence to depict bounce effect
	 */
	public class Bounce extends Sequence
	{
		public function Bounce()
		{
			super();
		}
 
		override protected function initInstance( instance : IEffectInstance ) : void
		{
			//create new Move effect
			var _move : Move = new Move();
				_move.yBy = 92;  //specific to this particular example
				_move.duration = 2000; //in milliseconds
				_move.easingFunction = mx.effects.easing.Bounce.easeOut;
 
			//add Move effect as a child to this sequence
			this.addChild( _move );
 
			//call super to ensure parent's original logic is still executed
			super.initInstance( instance );
		}
	}
}

Now as you might have noticed, this sequence contains only one effect (Move), but multiple effects could be added easily to the method above by creating a new Effect and adding it as a child to the Sequence object.

The end result looks like this (click to restart animation):

Rarely have I ever had a need to edit HTML in Flex Builder. Other editors (Dreamweaver, for instance) were always available or I managed to get by with Flex Builder’s built-in plain text editor. Lately, however I’ve been working with HTML and Flex together more often and I decided to hunker down and get an HTML-editor plug-in installed in Flex Builder.

A quick solution was installing the PHP Development Toolkit plug-in (PDT) which could handle not only PHP code hinting and editing (if you needed that sort of thing), but also handled HTML as well.

Here were the steps I had to run through to get the PDT plug-in working in Flex Builder 3. First, we’ll need to install some pre-requisite frameworks and tools (like GEF, EMF and WST):

• First, from within Flex Builder, click

        Help –> Software Updates –> Find and Install –>
        Search for new features to install

• Check Europa Discovery Site and click Finish

• Expand Europa Discovery Site results

• Uncheck “Show the latest version of a feature only”

• Find these groups and check the version listed:

        Graphical Editors and Frameworks
          • Graphical Editing Framework 3.3.2

        Java Development
          • Eclipse Java Development Tools 3.3.2

        Models and Model Development
          • Eclipse Modeling Framework (EMF) Runtime + End-User Tools 2.3.2
          • XML Schema Infoset Model (XSD) Extender SDK 2.3.2

        Web and JEE Development
          • Web Standard Tools (WST) Project 2.0.2

• Click Next

• Click the I accept the terms in the license agreement radio button

• Click Finish

Now that that’s done, we’ll get on to the PDT installation:

• From within Flex Builder again, click

        Help –> Software Updates –> Find and Install–>
        Search for new features to install

• Click New Remote Site, and type in “PDT” for the name and http://download.eclipse.org/tools/pdt/updates/ for the URL

• Click Finish

• Uncheck “Show the latest version of a feature only”

• Expand PDT

• Check PDT SDK 1.0.3 and click Finish

• Restart the Flex Builder workbench

• Once Flex Builder has restarted, click Window in the upper toolbar, then click

        Preferences –> General –> Editors –> File Associations

• Select “.html” and “.htm” and for each extension highlight “HTML Editor” and click Default. .
• Once you’re all done click OK.

That’s it!

Normal Flex TextInput controls automatically give you that “halo” border whenever the user highlights or sets focus to a text field. Although when Flex first came out, I thought the halo border was a very slick way to show focus, but now I want it to be even more obvious to the user as they tab through a form a select a field for text entry.

First thing I did was create a new ActionScript component that extended TextInput. My new control would work every bit the same as the standard TextInput and only wanted to alter what happens when the fields focus event was fired. Luckily, all I had to do was override the focusIn and focusOut handler’s, call super() to execute any standard logic in the parent method, and set my styles.

The resulting component ended up like this:

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

package components
{
	import flash.events.FocusEvent;
 
	import mx.controls.TextInput;
 
	/**
	 * Extends normal TextInput control but overrides focusIn and focusOut handlers
	 * to colorize the background color of the TextInput control differently when
	 * highlighted/focused
	 */
	public class MyTextInput extends TextInput
	{
		/**
		 * Constructor
		 */
		public function MyTextInput()
		{
			super();
		}
 
		/**
		 * Overrides focusInHandler to colorize background on focusIn events
		 */
		override protected function focusInHandler(event:FocusEvent):void
		{
			super.focusInHandler( event );
 
			//backgroundFocusInColor derived from master style-sheet
			this.setStyle('backgroundColor', getStyle('backgroundFocusInColor'));
		}
 
		/**
		 * Overrides focusOutHandler to reset background on focusOut events
		 */
		override protected function focusOutHandler(event:FocusEvent):void
		{
			super.focusOutHandler( event );
 
			//backgroundFocusOutColor derived from master style-sheet
			this.setStyle('backgroundColor', getStyle('backgroundFocusOutColor'));
		}
	}
}

Note the getStyle function calls. Typically, I keep all style-related colors and property values stored in a master style-sheet for my applications. This keeps the style-related values out of the views so I can easily manage them in one place.

For this new control, I defined a component-level type (or “class”) selector in my master CSS. Since this component extends TextInput, the normal styles for TextInput also apply, whereas the styles specified in the MyTextInput selector apply only to this control. Keep in mind, the “backgroundFocusInColor” and “backgroundFocusOutColor” properties are entirely made up and are not real component style properties, but it is totally legal to come up with your own style properties!

1
2
3
4
5

MyTextInput
{
	backgroundFocusInColor	: #DFF8FF;
	backgroundFocusOutColor : #FEFFAF;
}

Lastly, anywhere in my views I wish to use this component, I simply specify the newly built control:

1

<components:MyTextInput id="myTextInput" />

That’s it!

Andrew Shorten, one of the Platform Evangelists at Adobe, has mentioned recently that Adobe has announced that if you’re a developer or aspiring developer and have recently been laid off, you can qualify for a free version of Flex Builder – an idea that is targeted to increase your skill set in Flex while looking for your next gig.

Although the announcement was made via a British website, the free tool is available to anyone in the world, as long as they contact any Adobe evangelist (like Shorten). You can also KEEP your copy of Flex Builder once you do find that new job. But if you’re like me and are reading this, you probably already have several copies of FB laying around and some that haven’t even been released

http://www.digitalartsonline.co.uk/news/index.cfm?NewsID=12218

Ever wanted to create your own textual component that sits outside of a Flex Form (and FormItem tag) that still uses the same required field indicator?

After trying to duplicate the little red asterisk using styles or even creating my own graphically, I opted to use the same one that comes part of the Flex SDK inside Assets.swf:

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

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
    horizontalGap="0" verticalAlign="middle" horizontalAlign="right" 
    height="18" width="100%"
    paddingBottom="0" paddingTop="0"
    styleName="requiredFieldLabel">
 
	<mx:Image 
	    source="@Embed(source='Assets.swf',symbol='mx.containers.FormItem.Required')" 
	    height="7"/>
 
	<mx:Label text="indicates required field" 
	    styleName="requiredFieldLabel"/>
 
</mx:HBox>

Here’s what you’d see: