flexwires updated to 1.1.0

by Josh Tynjala

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.

About the Author

Josh Tynjala is an indie game developer, entrepreneur, Flash and Flex mercenary, and bowler hat enthusiast.

Discussion
  1. how to use flexwire in as3, and dynamically create wireJack on a UIComponent?

    posted by gembin on 07.21.2010
  2. 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):

    jack.setActualSize(jack.getExplicitOrMeasuredWidth(), jack.getExplicitOrMeasuredHeight());

    That’s the same thing you’d have to do with any child component where a layout system doesn’t size it automatically.

    posted by Josh Tynjala on 07.21.2010
  3. the following code doesn’t add a WireJack on the Group

    var c1=new Circle();//Circle is FXG
    
    var g:Group=new Group();
    g.addElement(c1);
    g.addElement(new OutputWireJack());
    //or c1.addElement(new OutputWireJack());
    this.addElement(g);

    how to make it work, especially using FXG ?

    posted by gembin on 07.21.2010
  4. 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.

    posted by Josh Tynjala on 07.21.2010
  5. thank you very much for your quick reply! the problem solved.
    BTW: I’m using flexwire source code.

    herewith FXG
    Circle.fxg

    posted by gembin on 07.22.2010
  6. 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!

    posted by gembin on 07.22.2010
  7. 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!

    posted by gembin on 09.02.2010
  8. 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.

    posted by Josh Tynjala on 09.02.2010
  9. That’s great! thank you very much for your quick reply!

    posted by gembin on 09.02.2010
Share Your Thoughts

To display code in comments: <pre>Code here. May be multiline. Format XML with &gt; and &lt; entities.</pre>

Some HTML allowed in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>