flexwires updated to 1.1.0

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 Josh Tynjala

Josh Tynjala is a frontend developer, open source contributor, bowler hat enthusiast, and karaoke addict. You might be familiar with his project, Feathers UI, an open source user interface library for Starling Framework that is included in the Adobe Gaming SDK.

Discussion

  2. Josh Tynjala

    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.

  3. gembin

    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 ?

  4. Josh Tynjala

    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.

  5. gembin

    thank you very much for your quick reply! the problem solved.
    BTW: I’m using flexwire source code.

    herewith FXG
    Circle.fxg

  6. gembin

    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!

  7. gembin

    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!

  8. Josh Tynjala

    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.

  10. gembin

    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?

  11. Josh Tynjala

    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.

  12. gembin

    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?

  15. Dan

    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?

  16. Josh Tynjala

    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.