Refactoring to Patterns: WPF Edition Part Zero

I guess I should give you some background before I go much further. The application we’re discussing here is called “Flow”. The name is metaphoric in several ways. The first metaphor is Flow as in a flow of thoughts or stream of consciousness. The second reference is to the work of Mihály Csíkszentmihályi, who has written a lot of books about the concept of “Flow” – a state of total immersion in one’s activities.

Stream of Consciousness

My first impetus in designing “Flow” was dissatisfaction with my browsing experience. I wanted an application that would capture my stream of consciousness as I browsed the web – creating a mind map if you will. For an example of what I mean, read one of Jeff Atwood’s posts and open a new tab for every link in the post (to keep it fair only use the self-referencing links you can also skip any links that you know are dupes). Then do the same for each tab you’ve opened. Once you’ve done that you’ve got a pretty good approximation of how my browser looks at the end of a given day.

image

Totally lost in my tabs is a good way to trace my path through coding horror. Imagine that my tabs represent a lengthy night of researching for a term paper, or digging into news on a company for deciding whether to invest my life savings in an IPO, or case research that could make sure that a defendant doesn’t get off on a technicality.

This idea really hit home with me and I started typing about it. 4 hours and one thousand words later, I had a vision for what for lack of a better term I called a Streamcatcher. Shortly after doing this, I received a newsletter from Infoq.com pointing to an article about stream-oriented User Interfaces (was it really back in July when I first started doing this). My jaw dropped. It was as if someone had read my vision and written an article about it. Further research revealed that the idea of a Stream-oriented UI has been around for quite a while now.

I started making a basic object model for an application that could visualize your browsing history as a graph of nodes and stumbled across a WPF panel for displaying a graph of objects. The next weekend I had a prototype browser that built the graph as you browsed.

Anyway enough blabbing from me. Here is the original prototype I made so that you can get a picture of where we’re going. Ignore the ribbon. It doesn’t do anything. I was just experimenting with it and never bothered to take it out. Also the network graph component that I’m using will expire in 30 days after you first use the app, making the application useless. There is no way to save your graph. Right now it’s just a prototype. I’ll be uploading the code to the Codeplex project and starting the new codebase there as well.

http://cid-2221dc39e0c749a4.skydrive.live.com/embedrowdetail.aspx/WPFSamples/FlowSetup.zip

To get started, place your mouse over the green dot and click on the button that appears. That will take you to google.com to start searching. An interesting search term is “flow psychology” (no quotes). I posted a video showing how flow works in an earlier post.

Now if you’ll excuse me, I have 40 tabs of Coding Horror to read.

0 Comments

Leave a Reply

Your email address will not be published.