Igor Costa

One of the things I love is hacking, this is a another very handy hack to explore in your flex builder software. And almost forgot, sorry for the big title.

To start with it, you should have the last version of Flex Builder 3.1.x, or probably maybe works in 3.0 but in my case I don’t have this version, anyway, let’s start.

This procedure isn’t documented yet, probally will be included in Flex Builder 4.0 after this post (hope so).

How it works?

Flex Builder has a great way to organize its components in tree mode, which is very a good way to organize things and make things clear to any user who are coming to Flex world.

By default, every component you create that is not part of default Flex components you will have placed in the custom directory of Flex Components view in your Flex Builder, which is already know by you.
The responsible for this is a internal xml file that automaticly generate a tree to use in run-time inside the Flex builder, but you can create manually and place in your .swc to procedure like that.

First you have to define a file called design.xml that has this structure:

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

 <?xml version=”1.0″ ?>
 
<design>
 
<namespaces>
 
<namespace prefix=”YOUR NAMESPACE” uri=”YOUR URL FOR NAME SPACE” />
 
</namespaces>
 
<categories>
 
<category id=”YOUR CATEGORY” label=”THE LABEL” defaultExpand=”true” />
 
</categories>
 
<components>
 
<component name=”The NAME” namespace=”YOUR NAME SPACE” category=”YOUR CATEGORY” displayName=”THE NICK NAME”>
 
<mxmlProperties>
 
</mxmlProperties>
 
</component>
 
</components>
 
</design>

This guy above is magic, what is create? It’s create the hole directory of your components design to place in Flex Builder components view. Every time you add a .swc in the libs folder of Flex Builder, the Flex Builder internal functions look up for this file, and if it’s missed the Flex Builder generate a new one and get the manifest.xml file for that .swc loaded.
If we set by our own, Flex Builder will not ignore and render that.

Let’s get a case to work:

1 – Create a new Flex Library Project
2 – Place any Class you have in the src directory for the project.
3 – Note : Don’t generate now the .swc file
4 – Let’s define the design.xml and manifest.xml, mine is follow below:

File: design.xml

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

<?xml version="1.0" ?>
 
<design>
 
	<namespaces>
 
		<namespace prefix="FlexHacking" uri="http://www.igorcosta.org" />
 
	</namespaces>
 
	<categories>
 
		<category id="Hacking" label="Hacking" defaultExpand="true" />
 
	</categories>
 
	<components>
 
		<component name="Window" namespace="FlexHacking" category="Hacking"
			displayName="Window">
 
			<mxmlProperties>
				<combo id="footerEnabled" name="Enable Footer:" />
			</mxmlProperties>
			<defaultAttribute name="footerEnabled" value="false" />
		</component>
 
		<component name="HellowWorld" namespace="FlexHacking"
			category="Hacking" displayName="HelloWorld">
 
			<mxmlProperties>
				<textfield id="phrase" name="Say something:" />
			</mxmlProperties>
		</component>
 
	</components>
 
</design>

File manifest.xml:

1
2
3
4
5

<?xml version="1.0"?>
<componentPackage>
    <component id="Window" class="org.igorcosta.hacking.Window"/>
    <component id="HelloWorld" class="org.igorcosta.hacking.HelloWorld"/>
</componentPackage>

As you see above I’ve created two simple classes to execute the hack, and see the picture bellow to see the structure of my project.

You know, remember that I said in the beging of hack to not compile your Flex library project? It’s because we have to include the design.xml into the .swc file. To do that, follow the steps:

5 – Right Click at your project and select Properties
6 – In the left choose Flex Library Build Path
7 – Select the Assets tab and mark to include manifest.xml and design.xml
8 – Now select the Flex Library Compiler and include your namespace URL
9 – Include the manifest file .xml that you have.
10 – Make fire and click Ok.

That’s it. The file is done and ready to place in any other project like Flex Project and you will see the properties and your own category in Flex Builder.

Here’s the final result :

Didn’t follow too much? Missed something? Grab here the Full source code of my solution. Import an existing Project into your workspace.

[Update 12/19/2008] If you have problems using this technique in Flex Builder 3.0.1 and 3.0.2 . And yours components doesn’t shows up in your Flex Builder, Try to avoid define the namespace in design.xml file and put in the Flex Library Build Path for your Flex Library project by hand typing in the field for it. Also add manually your manifest.xml file to your library. This will works for your Flex Builder 3.0.1 and 3.0.2.