Skip to main content

Using Flex built in icons for custom components

I am a big supporter of "simple first" meaning, get the functionality done and perfect before you start dressing things up and make them fancy.  Flex supports this style of development by having a relitively pretty set of components to begin with, and you can substitute in what you want to change.

What if you are making a custom component, such as a Button, and you want an icon on the button.  You can open your graphics program and make your PNGs, or SWF files and make custom skins, or wouldn't it be great if you could just snag one of the built in icons from Flex' SDK and use that?  Nice and simple to get you started.<more/>This is exactly what I wanted to do for a quick prototype application.  I was surprised that I couldn't find any blog entries out there on how to do this, so I took some time and figured it out, and now you reap the benefit.

In order to re-use Flex's built in icons for your own creation, we first need to find Flex's default css file that tells us where the icons are located.

In the Flex builder application directory on your computer, you will find the following folder (or similar): Flex Builder 3/sdks/3.x.0/frameworks/themes/HaloClassic"

In this directory is haloclassic.swc.  SWC files are just compressed collections of files, just like a jar file, so use your favorite app and decompress that bad boy.  Inside you will find default.css !

If you open this, you will see the default CSS values for all components.  This file is definitely worth a read, as it tells you where some of the "normal" settings come from.

What we want are some of the icons, so as you browse the "global" part of the CSS file, you will see entries like these:

<code>
defaultLeafIcon: Embed(source="Assets.swf",symbol="TreeNodeIcon");
disclosureClosedIcon: Embed(source="Assets.swf",symbol="TreeDisclosureClosed");
disclosureOpenIcon: Embed(source="Assets.swf",symbol="TreeDisclosureOpen");
</code>

These are the icons that the Tree component uses.  Note the source is "Assets.swf", which was also in the halo swc file.

Now that we know "where" these icons are, we can simply embed in our code, just like any other images.  For example:

<code>
[Embed(source="Assets.swf",symbol="TreeDisclosureClosed")]
        private var iconMinimised:Class;

[Embed(source="Assets.swf",symbol="TreeDisclosureOpen")]
[Bindable]
        private var iconMaximised:Class;
</code>

And now, anywhere you would use an embedded image, you can use these icons :)

Popular posts from this blog

Installing python 3.4.x on OSX El Capitan

I love "brew" package manager, but sometimes being too progressive breaks things.  I have several python apps that I maintain that get deployed to AWS using Elastic Beanstalk.  AWS eb can deploy with python 2.7 or 3.4.  Any recent 'brew install python3" will get 3.5.1. #annoying

Making Macbook Air with 128GB SSD usable with Bootcamp

I recently got a new Macbook Air 11" (the 2012 version) and loaded it with goodies like 8GB ram and 2GHz Core i7.  What I DIDN'T upgrade was the internal SSD.  My config came with 128GB SSD and I refused to pay $300+ to upgrade it to 256GB.  Yeah I know, some call me cheap, but SSds cost $75-$150 for 240GB, so adding another 128GB for $300 seemed way too steep for me.  I figured "ok, I'm going to make 128G work!"

Here is the story of how that went...

Election day plus 1: Social Media Nightmare

It is election day plus 1, and a very emotional day with no way to win for many.

Social media was a force to be reckoned with this election year.  No matter what position you take, the world is ready to pounce on you and tell you why YOU are evil, intolerant or a deplorable -- and the reason for all their woes.  This isn't a new problem, though...  All of the liberal vs conservative issues are causing rifts between otherwise civil people, and it seems to be the worst on Facebook and twitter.

If I say I am for Hillary:
i am part of the "corrupt system."

If I say I am against Hillary:
I am stupid and uneducated

If I say I am for Trump:
I am against women,
I am religiously intolerant,
I am a bigot

If I say I am against Trump:
I am against the 2nd amendment,
I don't have any idea how government works,
I am part of the problem with American society,
I am against the police

Stay with me now, this isn't meant to make people angry, but it is mean to shine some light on a social …