We just shipped Glimmer: a jQuery Interactive Design Tool. Now maybe it makes sense why half my posts have been about WPF and half have been about jQuery. Over the last few months, I've been building a WPF design tool for jQuery.
Once again, it was a collaboration with Tim Aidlin, who did all the design work, both for WPF and jQuery. He used Blend to build the UI of the application itself and then he used Glimmer to build all of the jQuery samples along with Expression Web. Go Tim! He's got a great post on his blog that shows the evolution of Glimmer and gets into why we built it in the first place.
There's a few things I'm particularly fired up about as far as features in the application:
- Extensibility. From the start, I wrote Glimmer to be extensible. I think the model is pretty clean. If you want to create a wizard for Glimmer, you simply create a WPF User Control. You can pretty much do anything from there. If you want to create a new effect, you just need to subclass from the Effect class in GlimmerLib and then create a datatemplate. If anyone out there ends up wanting to write a Glimmer wizard or effect and is looking for help, let me know.
- Interactive Design Surface. Joshua Allen and I collaborated to make the HTML design surface in Glimmer. It is pretty simple but powerful. Once you load an HTML file into Glimmer and you click "Select" either for the Action or Target, the HTML design surface becomes active, similar to if you use the IE8 Developer Tools and click the arrow. We then auto-populate Glimmer with any CSS IDs when they are hovered over.
- Live Preview of Wizards. When you use one of the wizards, you get a live preview of the HTML/CSS/jQuery that's being built for you. I do this by using property change notifications in WPF to fire off an attached event that refreshes the web browser control that's hosted by Glimmer. So, for example, if you are building an image sequence wizard and you change the duration between flipping images, you'll immediately see it reflected in the preview pane even before you complete the wizard.
- Preview in Browser. Okay, so it isn't Expression Web's SuperPreview, but it is quite handy when doing web development to be able to preview in different browsers right from the tool you are working in.
Overall, the application is probably the most ambitious WPF I've written. I ended up using a MVC pattern (mostly -- it isn't absolutely pure). Thanks to Jaime Rodriguez for some assistance on that front as well as a couple other WPF issues I hit. The entire thing is done using databinding and has datatemplates nested in datatemplates nested in datatemplates. I use commands and not event handlers (mostly -- it isn't absolutely pure) and do some funky things with attached events. The source code is posted for anyone who dares to dive in. :)
Looking forward to feedback as people give it a whirl...