Karsten Januszewski

Øredev 2009

Karsten Januszewski — Mon, 22 Jun 2009 17:33:00 GMT

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!)

Øredev 2009
Øredev is the premier conference in Europe focused on the software development process - from programming to project management and more ...
Wednesday, November 4, 2009 (all day)

Malmö Exhibition & Convention Center Malmö Mässan

Malmö, 21119 Sweden

The Archivist: Notes on Development

Karsten Januszewski — Fri, 15 May 2009 17:50:00 GMT

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!

Glimmer Errata

Karsten Januszewski — Wed, 29 Apr 2009 17:56:00 GMT

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

Ship It! Glimmer: a jQuery Interactive Design Tool

Karsten Januszewski — Tue, 28 Apr 2009 19:13:00 GMT

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

Image Merge With Photoshop Slices: Another jQuery Experiment

Karsten Januszewski — Mon, 13 Apr 2009 07:30:00 GMT

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

Finding All Installed Browsers in Windows XP and Vista – beware 64bit!

Karsten Januszewski — Fri, 03 Apr 2009 20:39:00 GMT

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);
}

Solving ComboBox SelectionChanged and MouseWheel Problem in WPF

Karsten Januszewski — Mon, 30 Mar 2009 05:21:00 GMT

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.

Tetris Flotzam at MIX09

Karsten Januszewski — Thu, 19 Mar 2009 20:22:00 GMT

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

Consuming Twitter Search ATOM With Linq -- And Watch Out For Caching!

Karsten Januszewski — Thu, 19 Mar 2009 00:51:00 GMT

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!

Text Fly: A jQuery Experiment in With Easing, Callbacks and Text Animation

Karsten Januszewski — Thu, 19 Feb 2009 02:28:00 GMT

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();



});

Follow The Menu: A jQuery Experiment In Position Animation

Karsten Januszewski — Tue, 17 Feb 2009 00:27:00 GMT

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.

Workaround For When Textbox Border Remains After Expander is Closed When Using ValidatesOnDataErrors or DataErrorValidationRule

Karsten Januszewski — Wed, 04 Feb 2009 01:12:00 GMT

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.

Using RelativeSource To Remove Items From a Collection Bound To A ListBox or ItemsControl

Karsten Januszewski — Wed, 28 Jan 2009 00:10:00 GMT

Okay, I’m not sure this is the best way to do this, but I needed a way to remove an item from an ItemsControl within the UI context of the item itself. My problem was that the item itself, when in a datatemplate, doesn’t know its parent. The RelativeSource property came to the rescue (tip o’ the hat to Jaime Rodriguez), although my use of the Tag property seems a little funky. Here’s my solution:

<DataTemplate x:Key="DataTemplate1">
    <StackPanel Orientation="Vertical" >
        <TextBox Text="{Binding Path=DisplayName}"/>
        <TextBox Text="{Binding Path=NavigateURL}"/> 
        <Button Content="Remove" Click="Remove_Click" 
              Tag="{Binding RelativeSource={RelativeSource Mode=FindAncestor, 
              AncestorType={x:Type ListBox}}}"/>
    </StackPanel>
</DataTemplate>

Then, in the code behind, here’s what I do:

void Remove_Click(object sender, RoutedEventArgs e)
{
    Button button = (Button) sender;
    ListBox listBox = (ListBox)button.Tag;
    MenuItemCollection menuItemCollection = (MenuItemCollection)listBox.ItemsSource;
    menuItemCollection.Remove((MenuItem)button.DataContext);
}

Basically, I get the listbox out of the Tag element and then call into its ItemsSource property, remove the object which is bound to the data template itself. (Note that MenuItem and MenuItemCollection are objects I created.)

Maybe a little hacky, but it works!

Yet Another Wizard (YAW): A Super Simple WPF Wizard

Karsten Januszewski — Mon, 26 Jan 2009 06:28:00 GMT

So, I needed a WPF Wizard. Poked around and found a few things, including a sample in the SDK as well as a few others floating around on the web. However, none of them were as simple or as generic as fit my requirements. So I rolled my own.

Here's how it works. If you want to create a new wizard, you need to create a user control to host the wizard. In the sample, it is called MyWizard and is hosted by Window2. In MyWizard codebehind, I set the content of the entire control to the WizardContainer user control, which is generic and can be reused. Also in MyWizard, I tell the WizardContainer which UserControls are the pages by adding them to the userControlCollection. In the sample, I also set a DataContext, which then gets picked up by all the pages no problem. Pretty simple, which I like. And, completely able to be styled in Blend. And, completely generic!

Download the sample.

Getting WPF Expander and Listbox Alignment Happy

Karsten Januszewski — Tue, 20 Jan 2009 21:37:00 GMT

Burnt a little time on this one: I had a WPF Expander inside a ListBox and couldn’t get the Expander to align to the top when one expander was collapsed and another expander was uncollapsed. Consider the following XAML:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Grid>
      <ListBox VerticalAlignment="Top">
         <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
               <StackPanel IsItemsHost="True" Orientation="Horizontal"/>
            </ItemsPanelTemplate>
         </ListBox.ItemsPanel>
         <ListBoxItem>
            <Expander ExpandDirection="Right">
               <Grid>
                  <ListBox>
                     <ListBox.Items>
                        <ListBoxItem Name="Item0">Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem Name="Item1">Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem Name="Item2">Option 2
                        
                        </ListBoxItem>
                     </ListBox.Items>
                  </ListBox>
               </Grid>
            </Expander>
         </ListBoxItem>
         <ListBoxItem>
            <Expander ExpandDirection="Right">
               <Grid>
                  <ListBox>
                     <ListBox.Items>
                        <ListBoxItem>Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 2
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 2
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 2
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 2
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 2
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 2
                        
                        </ListBoxItem>
                     </ListBox.Items>
                  </ListBox>
               </Grid>
            </Expander>
         </ListBoxItem>
      </ListBox>
   </Grid>
</Page>

It would look fine if both were collapsed:

But if one was collapsed and one wasn’t:

Or even if both were uncollapsed:

It wouldn’t align. It was driving me crazy. I snooped around and tried all kinds of shenanigans in various control templates and styles to make it behave. But it turned out the fix was easy: I needed to set the VerticalAlignment on the ListboxItem itself as follows. (See bold.)

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Grid>
      <ListBox VerticalAlignment="Top">
         <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
               <StackPanel IsItemsHost="True" Orientation="Horizontal"/>
            </ItemsPanelTemplate>
         </ListBox.ItemsPanel>
         <ListBoxItem VerticalAlignment="Top">
            <Expander ExpandDirection="Right">
               <Grid>
                  <ListBox>
                     <ListBox.Items>
                        <ListBoxItem Name="Item0">Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem Name="Item1">Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem Name="Item2">Option 2
                        
                        </ListBoxItem>
                     </ListBox.Items>
                  </ListBox>
               </Grid>
            </Expander>
         </ListBoxItem>
         <ListBoxItem  VerticalAlignment="Top">
            <Expander ExpandDirection="Right">
               <Grid>
                  <ListBox>
                     <ListBox.Items>
                        <ListBoxItem>Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 2
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 2
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 2
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 2
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 2
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 0
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 1
                        
                        </ListBoxItem>
                        <ListBoxItem>Option 2
                        
                        </ListBoxItem>
                     </ListBox.Items>
                  </ListBox>
               </Grid>
            </Expander>
         </ListBoxItem>
      </ListBox>
   </Grid>
</Page>

And then I got:

Yeah! I could of course put this in a style, etc. And if this were a datatemplate instead of a listboxitem, I would style the listboxitem.

(Shout out to KAXAML as tool of choice when breaking down problems like this…)