The good folks at Øredev 2009 have invited me to speak in November 2009. Here's the sessions I'll be giving: Developer/Designer Workflow with WPF/Silverlight and Glimmer: A jQuery Interactive Design Tool. I’m stoked!  Here’s more about the conference (microformated no less!)

Just came out with a new experiment from the Mix Online lab called The Archivist.

I put it together with Tim Aidlin, written in WPF, using this basic LINQ query for talking to Twitter search.

I used the Dan Crevier data model for doing everything asynchronously.

I used Jaime’s WPF port of the Silverlight chart controls for the chart. Probably should update the chart to use the latest port.

The application is deployed with ClickOnce, which is real handy because I can push updates to the application easily.

That’s it! 

--There’s a 17 minute video posted up on Channel9 that Tim Aidlin did which gets into exactly what Glimmer does.  He goes into the motivations of why we built Glimmer from the design perspective. He also does some cool demos of how to use the tool.

--There’s a post from Tim Heuer, who used Glimmer to create a jQuery script on his site. Looking forward to seeing other examples of Glimmer used in the wild. If you deploy a Glimmer-generated script, please let us know on the wiki.

--In both Tim’s video and in the intro video, Glimmer is talked about being on Codeplex. However, we ended up putting both the setup.exe and a .zip with all the source code on http://code.msdn.microsoft.com/glimmer.

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...

Here's another jQuery experiment, done with Photoshop slices and then doing jQuery animations on absolute X and Y positions specified by the CSS which was generated by Photoshop.  The result can be seen below or you can browse the page here.

(Photo of Crossfox drummer by Adam Forslund.)

In the application I’ve been working on, I needed to find all browsers that are installed on a user’s machine. The best way to go about this is to look in the registry under HKEY_LOCAL_MACHINE\SOFTWARE\Clients\StartMenuInternet. This is where browser manufacturers are told to put their information, per this MSDN article.  But here’s a gotcha I hit: on 64bit, the keys get written to HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Clients\StartMenuInternet.

No big deal: just need to check that key first.

So, here’s the code I ended up writing to get the name, file path and icon for the browsers installed on a user’s machine.  (Note that the Browser object is my own class.)

RegistryKey browserKeys;
//on 64bit the browsers are in a different location
browserKeys = Registry.LocalMachine.OpenSubKey(@"SOFTWARE\WOW6432Node\Clients\StartMenuInternet");
if (browserKeys == null)
    browserKeys = Registry.LocalMachine.OpenSubKey(@"SOFTWARE\Clients\StartMenuInternet");

string[] browserNames = browserKeys.GetSubKeyNames();

for (int i = 0;i<browserNames.Length;i++)
{
    Browser browser = new Browser();
    RegistryKey browserKey = browserKeys.OpenSubKey(browserNames[i]);
    browser.Name = (string) browserKey.GetValue(null);
    RegistryKey browserKeyPath = browserKey.OpenSubKey(@"shell\open\command");
    browser.Path = (string)browserKeyPath.GetValue(null);
    RegistryKey browserIconPath = browserKey.OpenSubKey(@"DefaultIcon");
    browser.IconPath = (string)browserIconPath.GetValue(null);
    this.Add(browser);
}

I hit a WPF issue where I had a ComboBox and was wired up to the SelectionChanged event and the mouse wheel was causing SelectionChanged to get fired over and over again. Solution?  Wire up the PreviewMouseWheel event on the ComboBox and set e.Handled to true.

Check out some shots of Flotzam at MIX09 up on Flickr. Here's a couple that came out pretty well:

So you want to know what is happening right now. Twitter Search is the way. Constructing a query and parsing the ATOM is pretty easy.

Recently hit a gotcha where the network my app was running was caching the results.  The way to override was to create a WebClient and set the cache policy explicitly.  You can see how that works by setting the RequestCacheLevel to NoCacheNoStore. Then, call OpenRead() on the WebClient.

After that, I use Linq to parse the results. One gotcha is the need to explicitly add the namespace when querying the results.  (If there is a better way, let me know!)

Here's the code.

string xml;
string term = "mix09"; 
using (WebClient webclient = new WebClient())
{
    RequestCachePolicy policy = new RequestCachePolicy(RequestCacheLevel.NoCacheNoStore);
    webclient.CachePolicy = policy;
    Stream stream = webclient.OpenRead
         (string.Format("http://search.twitter.com/search.atom?q={0}", term));
    StreamReader sr = new StreamReader(stream);
    xml = sr.ReadToEnd();
    sr.Close();
}
XDocument doc = XDocument.Parse(xml);
XNamespace xmlns = "http://www.w3.org/2005/Atom";
var tweet = from entry in doc.Descendants(xmlns + "entry")
            select new
            {
                Content = entry.Element(xmlns + "title").Value,
                Date = entry.Element(xmlns + "published").Value,
                Author = entry.Element(xmlns + "author").Element(xmlns + "uri").Value.Replace("http://twitter.com/", ""),
                Image = entry.Elements(xmlns + "link").ElementAt(1).Attribute("href").Value

            };
foreach (var c in tweet)
{

//do something here...
}

Note this code is used in Flotzam!

Here’s another jQuery animation experiment, this time with animating text using an easing equation. You can see it here or check it out below:

There’s a few interesting things going on here.  First off, I’m using the jQuery easing plug-in, which you can read about here. It uses Robert Penners easing equations for the math.  In this case, I use the easeOutElastic effect to give the text that bounce feel when it completes its animation. I set the initial position of the text in jQuery to be off the screen.

I’m using the callback feature of jQuery to kick off the 2nd and 3rd text animations, passing the function name (flyin2 and flyin3) to get the next animation to kick off.  It is interesting how, through the use of callbacks, you can almost start creating keyframes with jQuery animations.

The final thing to call out is the css, where I specify that all <p> tags have position:relative. I also had to make sure that the containing <div> element had overflow:hidden to prevent the scrollbar from showing up when the elements were positioned off the frame.

Here’s the jQuery code.:

jQuery(function($) {
function flyin(event)
{
     $("#p2").css("left","-700px");
     $("#p3").css("left","700px");
     $("#p1").css("left","700px");
     $("#p1").animate({ "left": 0 },300, "easeOutElastic", flyin2);
}

function flyin2(event)
{
    $("#p2").animate({"left":0},300, "easeOutElastic", flyin3);
}

function flyin3(event)
{
    $("#p3").animate({"left":0},300, "easeOutElastic", null);
}

flyin();



});

I was working with jQuery today and built a simple menu tracker in which a dot animates to whatever menu item is currently being hovered over, which you can see here: 

All I did was make a container div and then two child div elements, one for the menu items and one for the ball. You can see that if you view source on the HTML.I did the menu items as a ul with a collection of li tags with list-style set to none. Not being super CSS savvy, it took some futzing with getting my positioning right until I realized that all I needed was to have position:absolute specified for my little ball.

Then, all I had to do was animate the left property of the of the ball using jQuery. It is super handy in jQuery that you can get the position of any element so that you can dynamically pass that to your animation. So, what I do is get the position of the li and then subtract its width divided by two so that the ball is cetnered underneath each menu item. I also set the ball’s initial position to the first item.  Here’s the jQuery code:

jQuery(function($) {

function ActionName1(event)
{
    $("#ball").animate({ "left": ($("#li1").position().left + ($("#li1").width() / 2 )) }, 200, "linear", null);
}
function ActionName2(event) {
    $("#ball").animate({ "left": ($("#li2").position().left  + ($("#li2").width() / 2)) }, 200, "linear", null);
}

function ActionName3(event) {
    $("#ball").animate({ "left": ($("#li3").position().left  + ($("#li3").width() / 2)) }, 200, "linear", null);
}
function ActionName4(event) {
    $("#ball").animate({ "left": ($("#li4").position().left + ($("#li4").width() / 2)) }, 200, "linear", null);
}
$('#li1').bind('mouseover', ActionName1);
$('#li2').bind('mouseover', ActionName2);
$('#li3').bind('mouseover', ActionName3);
$('#li4').bind('mouseover', ActionName4);

$("#ball").css("left", $("#li1").position().left + ($("#li1").width() / 2));
});

The final thing I need to do is to make it more dynamic so that if you actually click something the ball stays with that item.

Recently hit a WPF issue with IDataErrorInfo where using ValidatesOnDataErrors with a TextBox creates a border around the textbox that doesn’t go away when used with an Expander. Screen shot below before closing expander: 

Screenshot after closing expander:

The workaround?  Create a style for Textbox (or TextboxBase, depending) which blows away the validation error template like this:

<Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/>

And then manually sets the border, like this:

<Setter Property="ToolTip"
Value="{Binding RelativeSource={x:Static RelativeSource.Self},
Path=(Validation.Errors)[0].ErrorContent}"/>
<Setter TargetName="Border" Property="Background" Value="Red"/>
</Trigger>

That did the trick. Download a complete sample of the fix.