BetaDesigns( Blog ) Flex and Component Development

Custom FlashBuilder Component Views

I recently discovered that you can create custom components that can appear under your own company/personal folder inside Flash/Flexbuilder design view. Normally any custom component you create will appear under the Custom folder in the Components View and well thats not very good for branding now is it. In addition you also get an actual size representation of your component in Design view rather than just an empty box outline. For example the first image is the default and the second the custom.
Project FIles
Image 1

Image 2

To begin you need to move your custom component into a FlexLibrary.

Adding an Icon to your custom component

Once inside the library if you want to include a custom Icon with your component to accompany it in the Component Explorer simply place an icon in the same folder as the Component. For example my component is in the following package structure.

Next add the following metaData to your component file.

ActionScript

 
[IconFile("Icon.png")]
public class ExampleComponent
{
   ...
}
 

or if it is an MXML component

 
<fx:Metadata>
 
[IconFile("Icon.png")]
 
</fx:Metadata>
 

The next step is to create a design.xml file.
Design.xml

 
<?xml version="1.0" ?>
<design>
 
</design>
 

First we add the namespace we would like to appear for our custom component when it is imported into mxml views.

 
	<namespaces>
 
		<namespace 
			prefix="betadesigns" 
			uri="http://www.betadesigns.co.uk/Blog" 
			/>
 
	</namespaces>
 
 

The prefix value is what will appear before your component name so for example a spark button has

<s:button>

so our custom component would be

<betadesigns:button>

Next we need to add the folder category we would like to create in the Component view.

 
 
	<categories>
		<category 
			id="beta" 
			label="BetaDesigns Components" 
			defaultExpand="true" />
	</categories>
 

I have chosen to give my folder the name BetaDesigns Components, the id value will be used as a reference so that we can tell each component which Category folder we want to place it into.

Finally for the design.xml file we need to add one more node the components node.

<components>
		<component 
			name="loginComponent" 
			namespace="betadesigns" 
			category="beta" 
			displayName="Login Component" />
	</components>

Inside the components node we add our custom component giving it an identifying name ( this doesn't have to be the same as the mxml file name ) tell it which namespace to use here i am using my betadesigns namespace provided above. we then set which category we wish to include it in and give it a display name.
That is all that is needed for our design.xml file.

We then need one more file the *-manifest.xml this file can be called anything you like but it tends to be appended with the suffix -manifest so that it can be easily identified.

 
<?xml version="1.0"?>
<componentpackage>
    <component 
    	id="loginComponent" 
    	class="co.uk.betadesigns.components.example.ExampleComponent"
    	/>
</componentpackage>
 

This manifest file contains the id to the item in the design.xml file as well as the absolute path to the file to map to that component id. As you can see from the above i have a component in my library called ExampleComponent however i want this component to appear in the Components viewer as my login component so i give it the id=loginComponent in the manifest file which points to the name=loginComponent in the design.xml file.
The final piece of the puzzle is to open up the library preferences>Flex Library Compiler

 

under the namespace url place the same namespace your defined in your design.xml file.
under manifrest file choose your *-manifest.xml file.

Next choose>Flex Library Build Path>Assets

Make sure your design.xml file and icon file if you are including one are selected.
There is no need to include the -manifest.xml file as it is automatically compiled into the swc by adding it to our Compiler prefs.

Now if you reference your swc in a new project you should see your components appear under your custom folder with your custom icons.

[Icons not appearing issue]
If this happens then try restarting Eclipse/FlashBuilder as it doesn't seem to pick up the changes everytime.

Project FIles

Be Sociable, Share!

•