Mark Ledford's Blog

I recently subclassed Flex’s Canvas to utilize my own custom scrollbars (what a pain!) and soon found I needed to do the same with the Box container (VBox, HBox). Due to the clean OOP nature of these components my overrides and implementation turned out exactly the same for my CustomScrollBarCanvas and CustomScrollBarBox. After a few refactoring sessions copying and pasting my changes to both subclasses I ended up moving all my code to a separate include file and its worked out beautifully with Flex still checking the code during incremental compile:

public class CustomScrollBarCanvas extends Canvas {
public function CustomScrollBarCanvas(){
super();
}
include “CustomScrollBarImplementation.as”
}

public class CustomScrollBarCanvas extends Box {
public function CustomScrollBarCanvas(){
super();
}
include “CustomScrollBarImplementation.as”
}

The Actionscript “include” directive is useful when you have a variable or several lines of code that are mirrored in several classes and you want to maintain that code in a central file. Flex and other frameworks use it commonly to write out framework version numbers on all their classes explicitly during compile time. Flex also uses it to write out groups of meta style tags by type (TextStyles.as, BorderStyles.as, etc) into the components that use them. Its really quite ingenious for upkeep but really simple to implement. (FYI in AS3 you no longer prepend the include statement with a “#”)

Heres a interesting, albeit questionable hack when extending flex classes that cockblock you with a private property or require you to extend several classes when you just want to tweak 1 line of insignificant code in the component.

You can grab the class you want to tweak and copy it to your project folder, mirroring its package with the appropriate folders. When classes get resolved your project folder gets checked before default system paths so your edited version will get compiled in.

I don’t recommend doing this, probably ever, but its been my best friend when I just wanted to tweak that dark 1 pixel line that the Panel component’s title bar receives via TitleBackground without making it a long and convoluted proccess. I don’t know how well this will work with Flex 3′s framework caching but its nice to know this quick and dirty method is there.