While maybe not as important as listeners, dragging and dropping is an action we all know and love. Remember your bewilderment the first time you dragged a chunk of a spreadsheet into your word processor and watched as a neat little table was constructed before your eyes? Do you not sometimes open up a bunch of unrelated programs and try to drag objects from one to the other in hopes that the little icon with the + sign on it will replace your mouse cursor as if to say, “Yes, you are welcomed here my friend…”? Wouldn’t it be fantastic if we can experience this delightful sensation more often? I certainly think so.

Snapping back to reality, our next task is to come up with a second demo that allows users to connect boxes together via multiple input/output points. As well, users can insert different types of boxes into the main canvas by dragging and dropping from a toolbar. There’s a lot more to it, but I’ll save that discussion for when we have completed more of the demo.

Even though the first demo did everything we wanted it to, I was still feeling a bit uneasy about advanced uses of listeners. Moreover, I needed to learn how to implement drag and drop. After researching a bit about dragging and dropping, things are fuzzy when I try to visualize how all the handler functions work together. Smartly, I decided to write a simple application to help me see it all in action…

OK, now phasing back into dreamland.

We are all drag and drop fanatics. However, most of us don’t get the chance to do it often enough. So perhaps if we can integrate drag and drop with some of our more common computing tasks, we can rely on and appreciate dragging and dropping even more. This is the need I set out to satisfy with my newest software innovation:

Click here to experience the latest breakthrough in HCI and productivity. (but it may take a while to load because UT’s webspace isn’t exactly optimized for serving webpages or handle web requests in general)

I think I will start calling up Microsoft about buying me out with some of that yummy Yahoo money… I don’t think they will want to risk dealing with a potential threat to their multi-billion dollar cash cow. Now the question is, how many zeroes do I want on my cheque? … Wish me luck!

First Demo

May 21, 2008

So, here is the first demo that we showed to Greg yesterday: Demo

The demo is just a basic app that allows boxes to be created, connected to each other via lines, and dragged around the canvas. Developing this demo is the first step in moving towards the goal of our project which is to create a pipe and filter interface that allows users to select columns and rows from SQL databases and perform transformations on the data by piping it through different filters without having to write any code.

Since we were not very experienced with ActionScript 3 and Flex, the initial design we used to develop our demo was not ideal so we have since thrown away the code. We are now writing a new design document that will be used in developing the next step of our application.

Listening is a very important interpersonal skill. It allows you to understand other people’s needs and motivations. As well, it prevents you from talking for five minutes straight before finding out she doesn’t understand English. *sigh*

In UI programming terms, listening is just as important. Listeners and events allow an application to react promptly to user input without having to continuously poll each component for change. Without them, your flashy UI will be as useful and interactive as a jpeg. Hence, we can think of listeners as the hyphen in “Human-Computer Interaction”. Yes, listeners are just that important.

Now, what happens if your listeners develop hearing problems? And what if they start eavesdropping on things they are not supposed to hear? Those are the problems I experienced this week. Some of the listeners I registered for basic events were behaving oddly. Sometimes they would respond correctly, but sometimes they would not. The friendly debugger informed me that the reason why they did not respond was because they were listening to another unassigned event instead. While I am sure there’s a perfectly logical explanation for this buried within the Flash+Flex event model, I still dropped quite a few hours trying to figure it out. After stepping through nearly every line in my code (it wasn’t that long) and still couldn’t find the problem, I was beginning to think it could be the fault of the Flash+Flex framework. As I was about to dive into the event dispatching code of the framework, I recalled the wise words of one of my mentors: “If you find yourself placing breakpoints on the SDK’s code, you may end up finding the bug, but you will not find happiness.” Agreeing with what he said, I stopped debugging and started rewriting a good chunk of the code. To put it briefly, the code works now.

Coming from a Java/.NET background, having to cast doubt upon the correctness of the framework is a new sensation to me. Logically, I do not believe it was the fault of Flash+Flex because listeners are the backbone of all that is interactive. If there are any problems with their listener code, I probably wouldn’t be the lucky first person to discover them. Still, it irks me that I was not able to figure it out grrrr…. On the upside though, I did learn a lot more about the listener/event model which may come in handy later.

Gonna celebrate this happy ending by blowing up some fireworks tonight. Wee.

Starting this project armed with 5-year-old knowledge of Flash proved to be more of a challenge than starting fresh. Despite this, I am actually glad that Flash has changed so dramatically in the last few years because I was initially dreading developing with Actionscript on the IDE provided by Flash. Perhaps it was the concept of linking code to specific frames in animation and not having a coherent way of managing such code; or perhaps it was Actionscript being such a primitive and messy language that I couldn’t imagine how anyone could have built any serious applications with it. In either case, it seems I was not the only one who had these gripes because Actionscript 3.0 and Flex 3 were a quantum leap in allowing developers to build and maintain complex applications in Flash. Surely, this magnitude of change couldn’t have been possible without many angry emails and blog posts from disgruntled developers. As I was reading the books on the subject, I kept reminiscing about just how awkward some of the implementations were in the previous versions of Flash/Actionscript. Fortunately for me, this nostalgia only served as a minor distraction since I do agree with most of the changes and additions (unlike my generic journey from Java 1.4 to 1.5). Nevertheless, I would imagine someone with no prior Flash experience would have a slight advantage over me with learning this stuff. Wenbing probably may want to comment on this.

With my newly restored faith in Flash+Flex development, I am looking forward to the finished product in a few months. I am also excited about doing some nifty things with Flare, but too bad the first milestone of this project doesn’t require it. I am actually a tad bit concerned that Flare is still in alpha. Call it a superstition, but I haven’t had good experiences with early iterations of software with names beginning with “FL” (except maybe Flickr beta, but it wasn’t really a beta anyways). For the sake of this project, let’s hope this superstition has as much truth in it as my horoscopes.

About the Project

May 14, 2008

The aim of this project is to build a data connectivity layer for use with the Flare toolkit (http://flare.prefuse.org). This toolkit will allow users to select tables and columns from a SQL database to feed into a transformation and visualization pipeline without writing any explicit code. This involves building a drag-and-drop pipe-and-filter interface modeled on those of Houdini, Maya, and Yahoo! Pipes for use with the Flare toolkit. Work will be done using Flash and Flex.

pipe3f is not an official name for this project (at least we hope not), but it sounded cool at the time when registering for an account for wordpress =p