Add the SWC to your Flex Builder project

In most cases, making the components available in your project is done in two easy steps:

1. Download the latest version of the library and extract the ZIP file somewhere on your hard drive.
2. Copy the file flexwires.swc to the libs folder in your project directory.

However, if you want to keep the the SWC file in another location so that it may be shared among your projects, please follow the instructions from the Flex Builder documentation.

Important Note

Wires requires version 3.2 of the Flex SDK. There is a bug in earlier versions of Flex that make it impossible to create wire connections. At this time, the Flex SDK 3.2 is not yet released as an official update. However you can grab the latest build from Adobe Open Source and follow Adobe's instructions to add a new SDK to Flex Builder. I will update this page to point to the official 3.2 update when it becomes available.

Create your first wire jacks in MXML

With a trivial amount of MXML, you can add a couple of wire jacks and start creating connections.

View Example

First, we need to add the proper namespace to our MXML file so that we can access the TreeMap class from the SWC. Josh Tynjala's open source Flex projects generally use the flextoolbox.com domain in the MXML namespace and ActionScript packages. For Halo-style components, the namespace is http://www.flextoolbox.com/2006/mxml as you can see below:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:toolbox="http://www.flextoolbox.com/2006/mxml"
	layout="absolute">

</mx:Application>

Next, let's take a look at the two components you will use most often, the InputWireJack and the OutputWireJack. These two UI controls are the plugs to which wires are connected. For a real-world equivalent, imagine the connectors for audio or video cables on a television or a DVD player.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:flextoolbox="http://www.flextoolbox.com/2006/mxml"
	layout="absolute">
	
	<mx:Label text="Getting Started" top="20" right="20"
		color="0xffffff" fontSize="14"/>
	
	<mx:Label top="18" left="40" text="Output: {output.data}"/> 
	<flextoolbox:OutputWireJack id="output" top="20" left="20"
		connectionAngle="270" data="Hello World!"/>
	
	<mx:Label bottom="16" right="40" text="Input: {input.data}"/>
	<flextoolbox:InputWireJack id="input" bottom="20" right="20"
		connectionAngle="90"/>
	
</mx:Application>

In the code above, we've added two wire jacks, one for output and one for input. The OutputWireJack has it's data property set to the string "Hello World" while the InputWireJack has null data by default.

Additionally, we've set the connectionAngle property on each wire jack, which lets us specify the direction from which the wire enters or exits the jack. If no connectionAngle value is specified, the wire renderer will automatically determine the most appropriate angle. In this case, we've set the connectionAngle property because we want to ensure that the Label controls that display the data are not covered by the wire.

Take a look at the compiled GettingStarted example. For more information about the classes, properties, methods, events, and styles available in this library, please read the API Documentation.