Open Source Flex Project: Wires UI library
After a few weeks of hard work, I’m happy to present Wires, an open source library featuring “wiring” components for Flex. If you’ve ever played with Yahoo! Pipes, you’ll understand the UI paradigm I’m talking about. Basically, data is passed around the application by connecting jacks together with wires, similar to how one might connect cables between a TV and DVD player or from a computer to a network.
Be sure to take a look at the fun YouTube video player example:
Wires is available for download from Google Code under the terms of the MIT license, so it may easily be used freely in both open source and commercial products. Be sure to take a look at the API documentation, and the source code for the examples are available in the main ZIP file. A simple tutorial on the wiki walks you through adding the library SWC to your project and explains the Getting Started example.
Update: In addition to releasing the library, I’ve made minor updates to Logicly, the logic gate simulator I posted about last week. The logic gates now support circular references, which allows some particularly interesting circuits to be created.
Update: I forgot to mention something very important. Due to a bug in earlier versions of the Flex SDK, Wires requires Flex 3.2 at the minimum, so be sure to update, if you haven’t already.
19 Comments
[...] Update: Wires, the UI library used in this application, is now available for download. Read my introductory blog post about Wires. [...]
Man, you’ve gone to a lot of trouble just to rickroll us all…
hi josh,
thanx for this really cool app. cant’ wait to test the api!
btw - i found a litle bug in your gate simulator: put a xnor gate instance on stage an connect the output somewhere. while dragging the cable i get some gfx errors. i’m using f10 player.
best regards
jan viehweger
halle, germany
Rob: Haha. Are you saying I didn’t have to write all that code to do a rickroll? Man, three weeks wasted!
jan viehweger: I wasn’t able to recreate that bug.
Wow, this looks awesome, Josh. Can’t wait for an excuse to play with this.
This is really cool.
Trying out the examples but I can’t get the lines to connect, not even when trying your examples and not change anything. Only thing that works is your online demo =/
Bäcker, thanks for reminding me. The library requires that you use the 3.2 version of the Flex SDK. I will update the post to include that information.
Works as designed here.
Are you the guru behind Yahoo! Pipes sleek wiring?
Love the effect, wiring and all, especially the clever use of bitmapdata noise function, your tube frame, and the tune you picked.
Planning to check out Wires soon and maybe even use it for some social web mashup.
I think this nifty component can do more than Yahoo! Pipes and provide a very cool and enticing interface to connect people online.
Taras, I had nothing to do with Yahoo! Pipes (other than coincidentally working at Yahoo! when it went live). Glad you like the library, and I hope it works well for you if you decide to use it. Let me know if you run into problems or have any suggestions.
This is very cool! Im going to play with it tomorrow. I will definetly use this on an application in the near future. Thanks for all the hard work and thanks for sharing!
Thanks JOSH TYNJALA, we have some project about controller system, the Input and Output in Our Circuit Board will control by Flex through XMLSocket, and trigger by logic gate created by flex. Thanks for your ideal. Sorry my bad English.
cool app. how bout a video of girls kissing or cell division? i watched that entire thing, couldn’t look away. . . need a shower . . . feel so dirty
Still loving it, so easy to work with. When using Flex SDK 3.2 it works like a charm.
Tried to use it for an AIR Application (also with 3.2 sdk) but complains on DragProxy when the drag image is created. Any idéa?
Bäcker, I haven’t tried the library in AIR yet. I’ll take a look when I get a chance.
This is really amazing stuff thanks 10x.
However does it work with just Raw AS3? Also I’m going to make this work with multi-touch
nuiman, Wires requires the Flex framework. The components are certainly available in ActionScript (in addition to MXML, of course), but it has to be a Flex app.
I’ve found a workaround to get it running in AIR.
First you need to download the source from SVN. Create a Flex Library project and make sure to include the AIR libraries.
Next open up WireJackArrowDragImage.as
Line 164 - updateDisplayList method
replace this:
var proxy:DragProxy = DragProxy(this.parent);
with this:
var proxy:DragProxy;
if ( Capabilities.playerType == ‘Desktop’ )
{
proxy = DragProxy(this.parent as NativeDragManager);
} else {
proxy = DragProxy(this.parent);
}
add a private var tempStage:Stage to the class, and within the addedStageHandler set tempStage = this.stage
finally, within addedToStageHandler and stageMouseUpHandler change the reference this.stage to tempStage
compile and use the resulting SWC within your AIR app. It should work without any errors. I realize it’s kind of a hack, but it gets the job done relatively simply.
The problem has to do with the fact that if you are using WindowedApplication as your application root tag, the application by default will only use the NativeDragManager. Your two options for getting Wires to work in an AIR application are 1) build your AIR app with Application as the application root tag, or 2) use something like my little hack.
Thanks, Nick. That’s a great start for me to start debugging the problem in AIR.
I tried Nick’s AIR hack but with no luck. Has any progress been made on an AIR patch?