It’s been a while since I worked on my open source project, flexwires. If you’re unfamiliar with the project, it provides a way to connect wires within a Flex app through drag-and-drop interaction to pass data around. The first and only release was back in late 2008. Since I’ve been using flexwires again recently, I figured now was a good time to make some updates and address a couple of issues that people have mentioned to me.
First and foremost, flexwires should now be compatible with Flex 4. It still targets Flex 3 and uses the Halo theme, but that shouldn’t stop you from using it within a Flex 4 app now. Secondly, flexwires should be working properly in Adobe AIR now too. Flex’s drag-and-drop works differently depending on whether it’s running in the browser or if it’s in an AIR app, which I didn’t know before. That’s fixed now, and you should properly see placeholder wires while dragging now.
There’s a new flexwires 1.1.0 ZIP to download over at github. The SWC inside is built with the Flex 3.5 SDK, but you should be able to include it in a Flex 4 project without any issues.
how to use flexwire in as3, and dynamically create wireJack on a UIComponent?
gembin, there’s nothing special to creating a WireJack dynamically. Do it just like you would a Button. If you’re adding it to a UIComponent rather than a container, like Canvas or something, then you’re going to have to size it manually (in updateDisplayList() if you’re giving the UIComponent its own subclass):
That’s the same thing you’d have to do with any child component where a layout system doesn’t size it automatically.
the following code doesn’t add a WireJack on the Group
how to make it work, especially using FXG ?
gembin, the code you posted works for me, except for Circle, which doesn’t exist, according to the Flex 4 docs. I swapped it for Ellipse, but primitives don’t have an addElement() function, so it’s no surprise that c1.addElement() fails. The OutputWireJack appeared in the Group, as expected.
Just out of curiosity, are you using the flexwires SWC or the source code? The SWC has a defaults.css that gets added to any app automatically, and you’ll need to add it yourself if you’re using the source instead of the SWC.
thank you very much for your quick reply! the problem solved.
BTW: I’m using flexwire source code.
herewith FXG
Circle.fxg
Oops! the fxg code is not posted, anyway it’s an Ellipse with the same value of width & height. thank you again for your help!
hi, how to use different colors for different wires?
because i want to change the color at runtime.
for example,
WireJack A wire to WireJack B, the wire is in red.
WireJack C wire to WireJack D, the wire is in blue.
thank you in advance!
gembin, you probably need to implement IWireRenderer in a new class or extend the default wire renderer implementation to add color changes.
If you’re running the latest code from Github, you should be able to call getWireBetween() on the wire manager and then call setStyle(“fillColor”, newColor) on the wire to change the color.
That’s great! thank you very much for your quick reply!
hi,again.
i want to have a custom WireJack which is able to accept several dataFormats and connect to several WireJacks.
So how to do? extends WireJack class and … ?
BTW: i changed maxConnection of InputWireJack, but still cannot connect to several WireJacks. any other things should be updated?
WireJack only supports a single data format restriction. I guess you could extend it to add new properties that accept Vector.<String> with multiple data formats, then modify the code that uses dataFormat and acceptedDataFormat to loop through each item in the Vector.<String>.
As for being unable to connect multiple wires, I can’t be certain. Maybe you’re using the default wire manager, which is placed on the PopUpManager. This makes it hard to connect more than one wire because the first wire covers most or all of the WireJack. I always create a WireSurface somewhere under my WireJacks and pass that into each one as a replacement wireManager.
thank you for your suggestion for multi-data format solution.
As for being unable to connect multiple wires issue:
i also use WireSurface and passed into wirejacks. And my usecase is:
UI_A contains a WireJack_A, and UI_B contains a WireJack_B.
UI_A and UI_B are created dynamically.
if WireSurface placed before UI and WireJack, it works properly, BUT,
the part of the wire within the UI are covered by UI. so i put WireSurface after UI and WireJack, so maybe thats why it dosen’t work?
Do you have any idea to add animation to the wires when they are connected?
here is an example: (electronics is moving in the wires)
http://www.aswing.org/wp-content/uploads/2007/02/dcaclab-300×218.jpg
http://www.dcaclab.com/?option=com_content&view=article&id=49&Itemid=53&lang=en
gembin, you can create custom wires by implementing the interface IWireRenderer (or extending BaseWireRenderer). When the data property changes (or better yet, when the object passed to the data property dispatches an event), you could start or stop the animation.
Hi Josh!
First, kudos for an awesome lib.
However, I’m having some issues (FlashBuilder + flex 4):
when I use the swc form the ZIP, all works OK but there’s a problem with the wire cutting. I place a wire between two jacks and it works OK, but when I cut the wire, the jacks remain “taken” (a dot shows).
I tried using the up-to-date code from git, but it will break with the exception:
TypeError: Error #1007: Instantiation attempted on a non-constructor.
at com.flextoolbox.controls::WireJack/viewSkinForState()[C:...\flexwires\source\com\flextoolbox\controls\WireJack.as:719]
at com.flextoolbox.controls::WireJack/viewSkin()[C:...\flexwires\source\com\flextoolbox\controls\WireJack.as:708]
at com.flextoolbox.controls::WireJack/commitProperties()[C:...\flexwires\source\com\flextoolbox\controls\WireJack.as:603]
any ideas?
When you use the source code from Github, you should build the SWC from it. The reason for this is that Flex needs to include defaults.css, which sets the initial styles for the components. Alternatively, you might be able to include defaults.css manually without building the SWC, but I’ve never tried that.
You can use the Ant build.xml to create the SWC. Create files build.local.properties and/or sdk.local.properties to override locations of the Flex SDK that you want to use.