Blankenthoughts

Day #6: Silverlight and the Twitter "Hello, World"

noreply@blogger.com (Jeff Blankenburg) — Mon, 06 Jul 2009 05:00:00 +0000

This is the sixth post in my series of thirty-one, titled "31 Days of Silverlight". You can find the master list here. Today, we are talking about how to talk to the Twitter API from a Silverlight application.

Why Twitter?

Aside from the infinite value that Twitter offers to software developers, there's another reason we're doing this. Twitter apps are the new "Hello, World!" apps. No more is it enough to be able to write text to the screen. Now, you need to be able to talk to a web service, and write THAT text to the screen. This tutorial will show you how.

Setting up our Silverlight page

For simplicity, I am going to create a page that has four TextBlocks on it. You could do this many different ways, but I am patterning this off of the way that I created the header on my blog. We will populate those TextBlocks with the most recent posts from my Twitter account. Here's what the base XAML looks like:

<UserControl x:Class="SilverlightAndTwitterAPI.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="150" />
            <RowDefinition Height="150" />
        </Grid.RowDefinitions>
        <TextBlock x:Name="Tweet1" Width="200" Height="150" Padding="10" Text="Tweet1" />
        <TextBlock x:Name="Tweet2" Width="200" Height="150" Padding="10" Grid.Column="1" Text="Tweet2" />
        <TextBlock x:Name="Tweet3" Width="200" Height="150" Padding="10" Grid.Row="1" Text="Tweet3" />
        <TextBlock x:Name="Tweet4" Width="200" Height="150" Padding="10" Grid.Row="1" Grid.Column="1" Text="Tweet4"/>
    </Grid>
</UserControl>

You may also notice a new concept in there: Grid. I wrote a series of articles on the layout options you have available to you in Silverlight, and there you can read about the Canvas, the Grid, and the StackPanel.

Talking To Twitter

Before you think we're going to be calling the Twitter API directly, I have to take the wind out of your sails. In order to call a web service that lives in another domain, we need to be able to do one of two things:

Call the Twitter guys and ask them to add a cross-domain policy entry for me.
Create a proxy web service that can make the calls for me.

You can guess which one will be much easier to implement, so we're going to go with #2.

Creating some classes.

Right click on your web project, and create two new classes: TwitterUser and TwitterStatus. They're going to be pretty simple classes, but they'll be necessary, especially if we want to add to the functionality of this app later.

TwitterUser

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for TwitterUser
/// </summary>
[Serializable]
public class TwitterUser
{
    public string Name
    {
        get;
        set;
    }
}

TwitterStatus

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for TwitterStatus
/// </summary>
[Serializable]
public class TwitterStatus
{
    public string Text
    {
        get;
        set;
    }

    public TwitterUser User
    {
        get;
        set;
    }
}

Creating our web service

I might have to do 31 Days of Web Services at some point in the future, but for today, I'm going to just explain what I'm doing with this web service. We are using a standard ASMX web service, and we've got one WebMethod that calls to our Twitter data and returns it as a list. Here's the code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Services;
using System.Xml;
using System.Xml.Linq;
using System.Collections.ObjectModel;

namespace SilverlightAndTwitterAPI.Web
{
    /// <summary>
    /// Summary description for TwitterProxy
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class TwitterProxy : System.Web.Services.WebService
    {
        
        private const string YourUsername = "";
        private const string YourPassword = "";

        [WebMethod]
        public List<TwitterStatus> GetTwitterStatus(string twitterUser)
        {
            //Create the HTTP path to the Twitter data we want.
            string UserTimeline = "http://twitter.com/statuses/user_timeline/"  + twitterUser + ".xml";
            //Create the HTTP Web Request
            WebRequest request = HttpWebRequest.Create(string.Format(UserTimeline, twitterUser));
            //Add an empty set of credentials to this Request (we don't need to authenticate for the the request we are making)
            request.Credentials = new NetworkCredential(YourUsername, YourPassword);
            //Create our response object.
            HttpWebResponse response = request.GetResponse() as HttpWebResponse;

            XDocument xmlData = XDocument.Load(XmlReader.Create(response.GetResponseStream()));
            //Using LINQ, gather the resulting data from our Response object, and populate our list.
            List<TwitterStatus> twitterData = (from status in xmlData.Descendants("status")
                                               select new TwitterStatus
                                               {
                                                   Text = status.Element("text").Value.Trim(),
                                                   User = new TwitterUser()
                                                   {
                                                       Name = status.Element("user").Element("name").Value.Trim()
                                                   }
                                               }).ToList();
            //Return our list of data to the calling method.
            return twitterData;
        }
    }
}

That may seem like a few lines of code, but it's actually pretty simple. We're just calling to the Twitter API, getting an XML response, and parsing that XML response with LINQ to populate a List of TwitterStatus objects. Now we should probably set our Silverlight app up to call that service.

Calling the service from Silverlight

In our startup method, I make a call to GetTweets(), which is the method that makes our web service call for us. Inside that method, we have three lines of code. The first creates a SoapClient for us, the second creates an event handler on our SoapClient that fires when the asynchronous call has been made, and the third line makes the asynchronous call, passing the specified Twitter username with it.

The event handler method then receives the resulting List of TwitterStatuses, and assigns the Text property of each to each of our four TextBlocks that we created in the beginning. The result? Four populated text blocks with the 4 most recent tweets by the account you specify. Not too hard, right? Here's the code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightAndTwitterAPI
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            GetTweets("jblankenburg");
        }

        void GetTweets(string username)
        {
            TwitterProxyServiceReference.TwitterProxySoapClient twitterClient = new TwitterProxyServiceReference.TwitterProxySoapClient();
            twitterClient.GetTwitterStatusCompleted += new EventHandler<SilverlightAndTwitterAPI.TwitterProxyServiceReference.GetTwitterStatusCompletedEventArgs>(twitterClient_GetTwitterStatusCompleted);
            twitterClient.GetTwitterStatusAsync(username);
        }

        void twitterClient_GetTwitterStatusCompleted(object sender, SilverlightAndTwitterAPI.TwitterProxyServiceReference.GetTwitterStatusCompletedEventArgs e)
        {
            Tweet1.Text = e.Result[0].Text;
            Tweet2.Text = e.Result[1].Text;
            Tweet3.Text = e.Result[2].Text;
            Tweet4.Text = e.Result[3].Text;
        }

    }
}

Summary

This post was designed to show you how easy it is to call a web service asynchronously from Silverlight. This application is running just below this paragraph, however some RSS readers may exclude it. If you can't see it, click here to see this Silverlight app calling the Twitter API. You can also download the demo code for this Twitter to Silverlight application here.

Day #5: Silverlight Drag and Drop

noreply@blogger.com (Jeff Blankenburg) — Sun, 05 Jul 2009 05:00:00 +0000

This is the fifth day of 31 Days of Silverlight. Today's post is on enabling Drag & Drop in a Silverlight application.

Why Drag & Drop?

Drag & Drop is an important feature to think about, because it's one of those gestures that we use all the time on our computers, and never even think about it. Moving files to the Trash, moving text from one area in a document to another, there's plenty of applications for it. It's not generally a gesture we associate with the web, which is yet another reason to try and change that perception.

Create a few XAML objects

For simplicity, I am creating two Rectangles and an Ellipse. We will have a circle, square, and rectangle. Each one will be a different color. Here's the XAML:

<UserControl x:Class="SilverlightDragAndDrop.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="White">
        <Ellipse x:Name="CircleRed" Width="100" Height="100" Fill="Red" Stroke="Black" StrokeThickness="2" Canvas.Top="150" Canvas.Left="50" />
        <Rectangle x:Name="SquareBlue" Width="100" Height="100" Fill="Blue" Stroke="Black" StrokeThickness="2" />
        <Rectangle x:Name="RectangleGreen" Width="200" Height="100" Fill="Green" Stroke="Black" StrokeThickness="2" Canvas.Top="50" Canvas.Left="150" />
    </Canvas>
</UserControl>

Create some event handlers

The rest of this post will take place in the code-behind for our Page.xaml file. The first step is to add some event handlers to our shapes. We can do this in our startup method, but because we're going to have several lines of code here, I prefer to extract this into its own method. Here's what my startup and new InitializeEvents() methods look like:

        public Page()
        {
            InitializeComponent();
            InitializeEvents();
        }

        public void InitializeEvents()
        {
            CircleRed.MouseLeftButtonDown += new MouseButtonEventHandler(Shape_MouseLeftButtonDown);
            CircleRed.MouseMove += new MouseEventHandler(Shape_MouseMove);
            CircleRed.MouseLeftButtonUp += new MouseButtonEventHandler(Shape_MouseLeftButtonUp);

            SquareBlue.MouseLeftButtonDown += new MouseButtonEventHandler(Shape_MouseLeftButtonDown);
            SquareBlue.MouseMove += new MouseEventHandler(Shape_MouseMove);
            SquareBlue.MouseLeftButtonUp += new MouseButtonEventHandler(Shape_MouseLeftButtonUp);

            RectangleGreen.MouseLeftButtonDown += new MouseButtonEventHandler(Shape_MouseLeftButtonDown);
            RectangleGreen.MouseMove += new MouseEventHandler(Shape_MouseMove);
            RectangleGreen.MouseLeftButtonUp += new MouseButtonEventHandler(Shape_MouseLeftButtonUp);
        }

Shape_MouseLeftButtonDown

In our MouseLeftButtonDown event method, we need to determine a few things. First, we're going to need the current mouse position. This will be vital. We're also going to have to capture the mouse movements going forward. Here's what we need to do:

        public void Remote_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            
            mouseY = e.GetPosition(null).Y;
            mouseX = e.GetPosition(null).X;
            isMouseCaptured = true;
            Remote.CaptureMouse();
        }

You'll notice that I am also setting a boolean value called isMouseCaptured. This is because in our MouseMove method, we're going to want to be able to check and see if the mouse movement is being captured. All of our movement action will depend on this. Make sure to define this boolean value (as well as the mouseX and mouseY variables) as properties of our class.

Shape_MouseMove

This is our "meat and potatoes" method. This is where the bulk of our work will be done. We'll need to calculate the offset of the mouse from the position of the shape, and set the new top and left values of our shape in relation to the mouse's position. Here's the code:

        void Shape_MouseMove(object sender, MouseEventArgs e)
        {
            if (isMouseCaptured)
            {
                Shape s = sender as Shape;
                double deltaY = e.GetPosition(null).Y - mouseY;
                double deltaX = e.GetPosition(null).X - mouseX;
                double newTop = deltaY + (double)s.GetValue(Canvas.TopProperty);
                double newLeft = deltaX + (double)s.GetValue(Canvas.LeftProperty);

                s.SetValue(Canvas.TopProperty, newTop);
                s.SetValue(Canvas.LeftProperty, newLeft);

                mouseY = e.GetPosition(null).Y;
                mouseX = e.GetPosition(null).X;
            }
        }

The deltaX and deltaY values are calculating the difference between where the mouse WAS, and where the mouse IS. We use that data in conjunction with the current position of the shape to move it to its next position. The two s.SetValue statements are setting the new Top and Left properties of the current shape. Finally, we record where our mouse is, so we have something to compare to the next time we come through this method.

Shape_MouseLeftMouseButtonUp

This is more of a cleanup method than anything else. We set our boolean value to false, release the mouse capture, and devalue the mouseX and mouseY values. Here's what it looks like:

        void Shape_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Shape s = sender as Shape;
            isMouseCaptured = false;
            s.ReleaseMouseCapture();
            mouseY = -1;
            mouseX = -1;
        }

It works, but we still have a problem.

At this point, you should have a working drag & drop example in Silverlight. However, you might notice, for example, that while we can drag the circle around, it stays behind the other shapes. In a true drag & drop example, we'd want the object we are dragging to be on top of everything else. To do this, we need to modify the z-index of the shape as we grab it. That means we'll do it in the Shape_MouseLeftButtonDown method. I have created another global variable called zIndex, not surprisingly, and each time you click on Shape, we increment the zIndex value of that Shape, and add one more to the variable. Here's the two lines of code to get it done in our method:

            s.SetValue(Canvas.ZIndexProperty, zIndex);
            zIndex++;

Sample Code

You should now have a fully functional drag & drop example. If you'd like to see my entire code in a working state, you can download my Silverlight Drag & Drop example here. This example should also be running below this paragraph. If it isn't, you can click here to see a working example of Silverlight Drag & Drop.

Day #4: Communicating Between Two Silverlight Controls

noreply@blogger.com (Jeff Blankenburg) — Sat, 04 Jul 2009 05:00:00 +0000

Have you ever wondered how to get more than one Silverlight element on your page? Have you ever wondered how to get two Silverlight controls to communicate? This post will address both of those questions.

For those of you not pondering those questions, here's a common scenario: You want to have a common Silverlight navigation on your page, and you don't want to redirect the user to another page for each click. Instead, we want a second Silverlight element on the page that changes as we click the nav.

It's generally bad user experience to put everything in one, giant Silverlight container, because it will take FOREVER to load, forcing your users to sit and wait before they can do anything. By being more modular, we improve load times, and it's actually pretty simple to do. Let's get started:

1. Create your Silverlight project.

Make sure you create your accompanying Web project as well..

2. Make this XAML unique.

I'm just going to make the background of the Silverlight app orange. I've also added a "1" so that I'm sure which control it is. When we put 2 Silverlight controls on a page, we want to make sure we know which is which. There are also three buttons on this screen. When the user clicks those buttons, we're going to change the background color of the other Silverlight control. We'll get to the event handler code a little later. (You might also need to add the System.Windows.Browser namespace...it's for talking to the DOM). Here's the XAML I am using:

<UserControl x:Class="SilverlightWithTwoControls.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <StackPanel x:Name="LayoutRoot" Background="Orange" HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="300">
        <TextBlock Text="1" FontSize="100"></TextBlock>
        <Button x:Name="Green" Content="Green" Width="100" Height="25" Margin="10" Click="Button_Click" />
        <Button x:Name="Purple" Content="Purple" Width="100" Height="25" Margin="10" Click="Button_Click" />
        <Button x:Name="Blue" Content="Blue" Width="100" Height="25" Margin="10" Click="Button_Click" />
    </StackPanel>
</UserControl>

3. Create another Silverlight project.

Each Silverlight project will be independent of each other. Each Silverlight project creates ONE XAP file, and since we need two, this is the best solution.

4. Mark up our second XAML file.

This file is even simpler. We're only modifying the background color and adding a 2 for identification. Here's the code:

<UserControl x:Class="SecondControl.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="#666666" HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="300">
        <TextBlock Text="2" FontSize="100"></TextBlock>
    </Canvas>
</UserControl>

5. Let's add these to our .aspx page.

We're just going to have 2 <asp:Silverlight> tags on our page in this example, pointing to the two individual .xap files. Here's what the HTML looks like:

<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head runat="server">
    <title>Silverlight With Two Controls</title>
</head>
<body style="height:100%;margin:0;">
    <form id="form1" runat="server" style="height:100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div  style="position:absolute;top:10px;left:10px;">
            <asp:Silverlight ID="Xaml1" runat="server" Source="/ClientBin/SilverlightWithTwoControls.xap" MinimumVersion="2.0.31005.0" Width="400" Height="300" />
        </div>
        <div style="position:absolute;top:320px;left:10px;">
            <asp:Silverlight ID="Xaml2" runat="server" Source="/ClientBin/SecondControl.xap" MinimumVersion="2.0.31005.0" Width="400" Height="300" />
        </div>
    </form>
</body>
</html>

6. Writing the button event handler.

We need those buttons to actually do something. Let's write that event handler code. Here's what it looks like:

private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button clicky = sender as Button;
            HtmlPage.Window.Invoke("changeColor", clicky.Name);
        }

7. Say it ain't so...

I don't know how many times I can tell you that Javascript rules the world, but here's another example. We're going to leverage the power of Javascript to talk between our Silverlight objects. Because it has the ability to leverage the Silverlight DOM, it's actually a very useful and powerful tool. (And for all of you naysayers, if a user has Javascript turned off, it's HIGHLY likely they're not running rich UI plugins like Silverlight or Flash either.)

Anyways, there's a pretty simple Javascript function we can write to get this action taken care of. In our previous step, we specified the name of the Javascript function, changeColors. We also pass the Name value of the Button, which just happens to be the name of the color we're going to be changing the other control to. Forethought is cool. Here's what my Javascript function looks like:

function changeColor(color) {
            slObject = document.getElementById("Xaml2");
            slObject.Content.Page.ChangeBackgroundColor(color);
        }

What we've done here is call the method ChangeBackgroundColor inside the Xaml2 control. We're passing the color we want to change it to.

8. Writing the final method in the 2nd control.

Now we just need to write that method in the code-behind of our second XAML file, and we should be done. Here's my final code for the second control:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;

namespace SecondControl
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        [ScriptableMember]
        public void ChangeBackgroundColor(string colorName)
        {
            if (colorName == "Blue")
            {
                LayoutRoot.Background = new SolidColorBrush(Colors.Blue);
            }
            else if (colorName == "Purple")
            {
                LayoutRoot.Background = new SolidColorBrush(Colors.Purple);
            }
            else if (colorName == "Green")
            {
                LayoutRoot.Background = new SolidColorBrush(Colors.Green);
            }
        }
    }
}

You might have noticed that there's something a little different in there. We have a decorator [ScriptableMember] in there. We had to make some changes to our application to make it exposed to Javascript. By default, it can't just call inside our Silverlight app. We have to make that happen in code.

9. Editing our App.xaml file.

In the second Silverlight project, open your app.xaml file. In our Application_Startup method, you should have a line that looks like

this.RootVisual = new Page();

. We're going to add one more line after that, which registers our control as a Scriptable object. Here's the entire method, after my modifications:

private void Application_Startup(object sender, StartupEventArgs e)
        {
            this.RootVisual = new Page();
            HtmlPage.RegisterScriptableObject("Page", this.RootVisual);
        }

This line of code, in conjunction with the decorator we added in Step #8 will mean we're done, and that our controls can now affect each other.

Sample Code

You can download the sample code for this example here. You should also be able to see these controls below this paragraph, but RSS readers like to ignore it. If it's not showing up, you can also see Two Silverlight Controls together by clicking here.

Day #3: Custom Silverlight Loading Screen

noreply@blogger.com (Jeff Blankenburg) — Fri, 03 Jul 2009 05:00:00 +0000

This is the third post in my series of thirty-one, called, not surprisingly, "31 Days of Silverlight". You can find the master list here.

Also, before we get started here, don't forget that today is Contribupendence Day. Take a moment to read this post about what Contribupedence Day is, and how you can participate.

If you've ever seen a Silverlight application before, you've likely seen the default loading screen. Here's a example of what I'm talking about:

Now, there's nothing wrong with it, except that it's the thing you see EVERYWHERE. There's a way to customize this screen, and you should. It's an opportunity to re-inforce your branding, entertain your user, and differentiate yourself from everyone else. Let's get started.

Building Our Loading Screen

The first thing to know about this loading screen is that it functions completely outside of our .xap file. If you think about it though, it makes sense. We're trying to monitor the loading percentage of our XAP file, so we could hardly expect our loading code to be inside it, right?

So, instead of creating a new XAML file inside of our Silverlight project, we're going to create a XAML file inside our Web Project this time. When you choose "Add > New Item...", you're going to choose the "Silverlight JScript File." This will create a XAML file in our web project, but otherwise, it's your standard XAML. I've created one that has a TextBlock to display the percentage as a number, as well as a rectangle underneath. This rectangle will be my percentage progress bar. Here's the code (I named it LoadingScreen.xaml):

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">
    <Canvas x:Name="LayoutRoot"  Background="#FFB5EFFF">
        <Rectangle Height="4" Width="0" Fill="#FFE8B03A" Stroke="#FF999999" StrokeThickness="1" x:Name="ProgressBar" Canvas.Left="14" Canvas.Top="156"/>
        <TextBlock Width="100" FontFamily="ROCK.TTF#Rockwell" FontSize="48" Text="Blankenthoughts" Foreground="#FF6D6D6D" x:Name="Title" Canvas.Top="56" Canvas.Left="150" />
    </Canvas>
</Canvas>

Getting Our Loading Screen Loaded

So we've got a loading screen now, but we also need to make sure that our Silverlight <object> tag knows that we've got a custom loading screen. We do this with a param tag in the HTML. The splashscreensource tag specifies a XAML file that should be used instead of the default. Here's how my entire HTML file looks now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>SilverlightLoadingScreen</title>
</head>

<body>
    <div id="silverlightControlHost">
        <object id="xamlobject" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
            <param name="splashscreensource" value="LoadingScreen.xaml"/>
            <param name="source" value="ClientBin/SilverlightLoadingScreen.xap"/>
            <param name="background" value="white" />
        </object>
    </div>
</body>
</html>

What you may notice, if you're building along with me, is that the loading screen loads, but it doesn't change as the load progresses. This is because we need to pay attention to the "onSourceDownloadProgressChanged" event. Thankfully, we do with with another param tag in our <object> tag. The value that we provide is actually the name of the Javascript function we will write. That tag looks like this:

<param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

You didn't tell me there'd be Javascript

Ah, never doubt for a second that the Internet runs on Javascript. Of course it does! This function is simple, and is the glue that puts our XAML together with actual data. I'll give you my function first, and then we can discuss the different parts of it.

function onSourceDownloadProgressChanged(sender, eventArgs)
        {
            var slObject = document.getElementById("xamlobject");
            var progressBar = slObject.content.findName("ProgressBar");
            var progressTitle = slObject.content.findName("Title");
            if (eventArgs.progress)
            {
                progressBar.Width = eventArgs.progress * 370;
                progressTitle.Text = parseInt(eventArgs.progress * 100) + "%";
            }
            else
            {
                progressBar.Width = eventArgs.get_progress() * 370;
                progressTitle.Text = parseInt(eventArgs.get_progress() * 100) + "%";
            }
        }

slObject - this is a reference to my Silverlight <object> tag on the page. I need to get this in order to find the child elements, specifically my Rectangle and TextBlock elements.
progressBar - this is a reference to my ProgressBar Rectangle element within my XAML document. Don't you wish getting through XML was always that easy? It just searches through the document tree until it finds an element with the name I specified.
progressTitle - a TextBlock in the XAML that will hold the actual percentage of completion.
eventArgs.progress - this is the physical number that represents our completion percentage. We use this to modify the width of our rectangle, so that it grows as the percentage increases. I am also displaying this number in the TextBlock, appending a "%" to the end.
eventArgs.get_progress()

Can I See A Working Example?

Absolutely. Below is a working example of this custom loading screen in action. If you don't see it, you're probably reading this post from an RSS reader. Click here to see the Silverlight Loading Screen as a working example. You can also click here to download my entire set of working code.

Day #2: Silverlight Screen Transitions

noreply@blogger.com (Jeff Blankenburg) — Thu, 02 Jul 2009 05:00:00 +0000

This is second of thirty-one posts on Silverlight I will be doing in July. The first post was on the mouse events available to you in Silverlight. Today's post is on Screen Transitions, or more specifically, moving from one XAML file to another.

Moving From One XAML File To Another

This is the simple part. In your Silverlight project (mine is called SilverlightScreenTransitions), add a new XAML file. You can do this by right clicking on the project name, and choosing "Add > New Item." You won't see "XAML File" as one of the choices, because each XAML file in Silverlight is considered a User Control. So choose "Silverlight User Control," and give it a meaningful name, like page2.xaml. :)

Now jump back into your default XAML file, Page.xaml. We need a button, or a link, or something that will allow us to navigation to our new page. Here's the new XAML for our default page:

<UserControl x:Class="SilverlightScreenTransitions.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="White">
        <Rectangle x:Name="Clicky" Width="200" Height="50" Fill="Red" Canvas.Top="125" Canvas.Left="100" Stroke="Black" StrokeThickness="4" MouseLeftButtonUp="Clicky_MouseLeftButtonUp"/>
    </Canvas>
</UserControl>

All this does is put a red rectangle in the middle of our control. Next, we're going to need to edit our second page. We'll just put a "Congratulations!" textbox on the page, so we know we made it. Here's the XAML for Page2.xaml:

<UserControl x:Class="SilverlightScreenTransitions.Page2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="White">
        <TextBlock Width="200" Height="50" Canvas.Top="125" Canvas.Left="100" Text="Congratulations!" TextAlignment="Center" FontSize="25"/>
    </Canvas>
</UserControl>

The magic line of code

At this point, we have two XAML files, one with a rectangle (with an event handler), and the other with just a TextBlock. When we click on the Rectangle, we want to go to the other XAML file. Here's how you do it (in VB.NET, just ignore the semi-colon). Just add this line to your event handler code in Page.xaml.cs (or .vb):

this.Content = new Page2();

I thought this post was about transitions...

Oh, patience, my friends. Now that we know how to get from one screen to another, we can talk about transitions. Let me first start by defining transition:

The animated movement from one XAML file to another. Think transitions in Powerpoint. Fades, Dissolves, etc. We'll create an example of that in this post.

Fading In and Out

We're going to create a fading transition from the first slide to the second. What I'm going to do is create an animation in each XAML file. In Page.xaml, we'll create an animation that fades out. In Page2.xaml, we'll create an animation that fades it in. Between the two, we'll jump from one file to the next, using the code we wrote earlier.

Page.xaml animation

The only difference is the new Storyboard I created. It just takes the opacity of the LayoutRoot element from 100% to 0% in one second:

<UserControl x:Class="SilverlightScreenTransitions.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <UserControl.Resources>
        <Storyboard x:Name="FadeOut">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Canvas x:Name="LayoutRoot" Background="White" Opacity="1">
        <Rectangle x:Name="Clicky" Width="200" Height="50" Fill="Red" Canvas.Top="125" Canvas.Left="100" Stroke="Black" StrokeThickness="4" MouseLeftButtonUp="Clicky_MouseLeftButtonUp"/>
    </Canvas>
</UserControl>

Page2.xaml animation

We are doing the exact opposite animation for this file, but there's one other thing to consider in this case. Even though our animation takes the opacity from 0% to 100%, we need to make sure that the initial opacity of our LayoutRoot element is set to 0%. Without that, the XAML file will load with it at 100%, and then the animation will kick off, fading it from 0 to 100. Not exactly the desired effect. So you'll see the opacity specified in the LayoutRoot element as well.

<UserControl x:Class="SilverlightScreenTransitions.Page2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <UserControl.Resources>
        <Storyboard x:Name="FadeIn">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Canvas x:Name="LayoutRoot" Background="White" Opacity="0">
        <TextBlock Width="200" Height="50" Canvas.Top="125" Canvas.Left="100" Text="Congratulations!" TextAlignment="Center" FontSize="25"/>
    </Canvas>
</UserControl>

An Animation Event Handler?

So we obviously also need to change our code-behind, so that when we click, we call the animation. But how do we know when the animation is done? Well, we know it's going to take exactly ONE second, so technically, we could create a timer, wait 1 second, and then make the call to the second XAML file. But that's messy, and depending on ANY sort of lag, would be inaccurate. Thankfully, we have the ability to add event handlers to our animations as well. So, we can create a "Completed" event handler on our FadeOut animation, which will get called immediately after the animation completes. No guess work. Here's our new code-behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightScreenTransitions
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            FadeOut.Completed += new EventHandler(FadeOut_Completed);
        }

        void FadeOut_Completed(object sender, EventArgs e)
        {
            this.Content = new Page2();
        }
        
        private void Clicky_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            FadeOut.Begin();
        }
    }
}

Catching the animation on the other side

Transitioning into the next XAML file is simple, in the initial method, we call the FadeOut animation we created.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightScreenTransitions
{
    public partial class Page2 : UserControl
    {
        public Page2()
        {
            InitializeComponent();
            FadeIn.Begin();
        }
    }
}

The final working example

Below is the Silverlight application, up and running. If you're viewing this in an RSS reader, it may not show up, but you can click here to see the Silverlight Screen Transition working. You can also download all of the source code for this project here.

Day #1: Mouse Events in Silverlight

noreply@blogger.com (Jeff Blankenburg) — Wed, 01 Jul 2009 05:00:00 +0000

In my inaugural post of the "31 Days of Silverlight," we're going to focus on Mouse Event handlers. With an interactive application, you're often going to want to know when your users are clicking on stuff. So, this is a tutorial on the different mouse events, and how to use them. So, let's start with the beginning, and go forward from there. You can download ALL of the sample code from this post here.

MouseEnter

I am going to demonstrate this on two levels. The first will be a MouseEnter event on the Silverlight control as a whole. This event will fire when the user's mouse enters the space that the Silverlight control takes up. We will be putting a second event on a circle that is in the Silverlight application. Here's our starter XAML.

<UserControl x:Class="SilverlightMouseEvents.MouseEnterDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" />
    </Grid>
</UserControl>

I am going to add the event handlers to the XAML, but I will show you how to do it in code as well. Here's our modified XAML, with the event handlers inline.

<UserControl x:Class="SilverlightMouseEvents.MouseEnterDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300" MouseEnter="UserControl_MouseEnter">
    <Grid x:Name="LayoutRoot" Background="White">
        <Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" MouseEnter="myEllipse_MouseEnter" />
    </Grid>
</UserControl>

Now we need to jump into the code-behind to write the event handler actions. As soon as I created the event handlers in the XAML, it automatically stubbed out the methods for me in code. Here's how my initial C# code-behind looks.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightMouseEvents
{
    public partial class MouseEnterDemo : UserControl
    {
        public MouseEnterDemo()
        {
            InitializeComponent();
        }

        private void UserControl_MouseEnter(object sender, MouseEventArgs e)
        {

        }

        private void myEllipse_MouseEnter(object sender, MouseEventArgs e)
        {

        }
    }
}

In order to keep this post reasonable in length, I'm not going to do anything complicated in my event handling, but I will show you how to change the color of the Ellipse. I've added one line of code to each method, and each one changes the Ellipse to a different color. At this point, when we run our mouse into the Silverlight area of our web page, the circle will change to green, and when we mouse over the circle, it turns purple.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightMouseEvents
{
    public partial class MouseEnterDemo : UserControl
    {
        public MouseEnterDemo()
        {
            InitializeComponent();
        }

        private void UserControl_MouseEnter(object sender, MouseEventArgs e)
        {
            myEllipse.Fill = new SolidColorBrush(Colors.Green);
        }

        private void myEllipse_MouseEnter(object sender, MouseEventArgs e)
        {
            myEllipse.Fill = new SolidColorBrush(Colors.Purple);
        }
    }
}

MouseLeave

In this case, it's pretty much exactly the same as MouseEnter, but when the mouse LEAVES something. Novel idea, huh? This time, however, I will not have any modifications to my XAML at all. So here's the starter XAML again.

<UserControl x:Class="SilverlightMouseEvents.MouseLeaveDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" />
    </Grid>
</UserControl>

This time I am going to do this all in the code-behind. I will add the event handlers when the application initializes. Here's my final C# for this example:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightMouseEvents
{
    public partial class MouseLeaveDemo : UserControl
    {
        public MouseLeaveDemo()
        {
            InitializeComponent();
            this.MouseLeave += new MouseEventHandler(MouseLeaveDemo_MouseLeave);
            myEllipse.MouseLeave += new MouseEventHandler(myEllipse_MouseLeave);
        }

        void myEllipse_MouseLeave(object sender, MouseEventArgs e)
        {
            myEllipse.Fill = new SolidColorBrush(Colors.Purple);
        }

        void MouseLeaveDemo_MouseLeave(object sender, MouseEventArgs e)
        {
            myEllipse.Fill = new SolidColorBrush(Colors.Green);
        }
    }
}

MouseLeftButtonDown

For this event, I am going to continue to use the same XAML over and over. The only thing that changes is the reference to the class our XAML user control is using. I've shown how to rig up event handlers both in the XAML as well as in code. So, you've seen the XAML, I'm going to just show the code-behind for the next example here.

MouseLeftButtonDown is exactly like it looks. It fires when the user's left mouse button is pressed. Please note that I will be covering MouseLeftButtonUp next, and that there's a significant distinction between them. It's especially apparent when you start implementing Drag & Drop. Here's an example of adding MouseLeftButtonDown to our code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightMouseEvents
{
    public partial class MouseLeftButtonDownDemo : UserControl
    {
        public MouseLeftButtonDownDemo()
        {
            InitializeComponent();
            this.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftButtonDownDemo_MouseLeftButtonDown);
            myEllipse.MouseLeftButtonDown += new MouseButtonEventHandler(myEllipse_MouseLeftButtonDown);
        }

        void myEllipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            myEllipse.Fill = new SolidColorBrush(Colors.Green);
        }

        void MouseLeftButtonDownDemo_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            LayoutRoot.Background = new SolidColorBrush(Colors.Purple);
        }
    }
}

MouseLeftButtonUp

So far, we've created an event handler method for each individual event. There are many cases, however, where you want multiple items to be able to call the same method, so you're not writing the same code over and over. In this next example, I'm going to add a second circle, and have both of them change the background of the StackPanel they sit inside. Here's our new XAML file.

<UserControl x:Class="SilverlightMouseEvents.MouseLeftButtonUpDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <StackPanel x:Name="LayoutRoot" Background="White" Orientation="Horizontal" HorizontalAlignment="Center" >
        <Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" />
        <Ellipse x:Name="myEllipse" Fill="Red" Width="150" Height="150" />
    </StackPanel>
</UserControl>

Now, we want each of the Ellipses, when the MouseLeftButtonUp event fires on them, to change the background of the ellipse that fired. Here's what the code looks like to do that.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightMouseEvents
{
    public partial class MouseLeftButtonUpDemo : UserControl
    {
        public MouseLeftButtonUpDemo()
        {
            InitializeComponent();
            myEllipse.MouseLeftButtonUp += new MouseButtonEventHandler(Ellipse_MouseLeftButtonUp);
            myEllipse2.MouseLeftButtonUp += new MouseButtonEventHandler(Ellipse_MouseLeftButtonUp);
        }

        void Ellipse_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Ellipse myCircle = sender as Ellipse;
            myCircle.Fill = new SolidColorBrush(Colors.Orange);
        }
    }
}

You'll notice with this example that there's a second line of code in our event handler method. We have to grab a reference to the Ellipse that actually called the method. The "sender" parameter contains this information, so we have to grab that reference before assigning our new color.

MouseMove

In this final example, we are going to use the MouseMove event. Each time the mouse moves from its previous location, this event will fire. You can assign this to the entire control, or just a specific element of the application. In either case, you can do quite a few things with this, including drag and drop. We will cover that in a future post.

My XAML this time has two TextBoxes on the page. One named (cleverly) Xbox, and the other Ybox. We're going to insert the mouse's X and Y coordinates in these boxes as the user moves their mouse.

<UserControl x:Class="SilverlightMouseEvents.MouseMoveDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300" VerticalAlignment="Center">
    <StackPanel x:Name="LayoutRoot" Background="White">
        <TextBox x:Name="Xbox" Width="200" Height="35" Text="X" />
        <TextBox x:Name="Ybox" Width="200" Height="35" Text="Y"/>
    </StackPanel>
</UserControl>

The code behind this probably doesn't look too complicated now, if you've followed this entire post, but we're using the MouseEventArgs this time, to determine where the mouse's current position is. We then simply assign those values to the text boxes.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightMouseEvents
{
    public partial class MouseMoveDemo : UserControl
    {
        public MouseMoveDemo()
        {
            InitializeComponent();
            this.MouseMove += new MouseEventHandler(MouseMoveDemo_MouseMove);
        }

        void MouseMoveDemo_MouseMove(object sender, MouseEventArgs e)
        {
            Xbox.Text = e.GetPosition(null).X.ToString();
            Ybox.Text = e.GetPosition(null).Y.ToString();
        }
    }
}

Summary

This was a quick overview of the Mouse events that are available to you in Silverlight. Used together, you can create a pretty interactive environment for your user to use. In tomorrow's post, we are going to be covering screen transitions. Not only the ability to jump from one XAML file to the next, but also how to incorporate some Powerpoint-like transitions from one screen to the next.

Looking For A Mental Challenge? Here It Is.

noreply@blogger.com (Jeff Blankenburg) — Wed, 01 Jul 2009 03:31:00 +0000

It's offical. The Toughest Developer Puzzle Ever is alive and kickin'. Prepare to have your mind bent, your skills tested, and, if you're fast enough, your home mailbox filled. That's right. This contest will provide the first 15 people to complete the puzzle with a prize. We're not talking about happy meal toys here, either. This is a substantial prize, valued at over $25, and another challenge in and of itself.

You'll also get your name recorded on the site as proof that you were wise enough to make it past all 30 levels. Feel free to call it TDPE. We are. There's also a Twitter account for it. @tdpe

So what are you waiting for? Head over to http://toughestdeveloperpuzzleever.com and get started. You will be tested.

Thirty-One Days of Silverlight

noreply@blogger.com (Jeff Blankenburg) — Tue, 30 Jun 2009 05:00:00 +0000

Each day in the month of July, I am going to publish an article on a Silverlight topic. The topics will range from 100-level to 300-level in difficulty, but all of them will be written so that a beginner could start from scratch to create them.

I will covering Drag & Drop, Event Handling, and even Collision Detection. This is an extensive list of tutorials, and I hope that it will help you see how useful and powerful these technologies can be.

If there are topics you are specifically interested in seeing covered, please leave a comment, and I will do my best to accomodate your request. Below is a list of the articles that have been published.

Day #1: Mouse Events in Silverlight

Day #2: Silverlight Screen Transitions

Day #3: Custom Silverlight Loading Screen

Day #4: Communicating Between Two Silverlight Controls

Day #5: Silverlight Drag and Drop

Day #6: Silverlight and the Twitter "Hello, World!"

Columbus GiveCamp - July 17, 18, 19

noreply@blogger.com (Jeff Blankenburg) — Tue, 23 Jun 2009 13:19:00 +0000

If you haven't already heard (and honestly, all the cool kids are going to be there), there is going to be a GiveCamp in Columbus, OH the weekend of July 17-19. Don't live near Columbus? There's a GiveCamp in Ann Arbor, MI the same weekend. So just stop it. You have run out of excuses to participate!

What is a GiveCamp?

GiveCamp is a weekend-long event where software developers, designers, and database administrators donate their time to create custom software for non-profit organizations. This custom software could be a new website for the nonprofit organization, a small data-collection application to keep track of members, or a application for the Red Cross that automatically emails a blood donor three months after they’ve donated blood to remind them that they are now eligible to donate again. The only limitation is that the project should be scoped to be able to be completed in a weekend.

During GiveCamp, developers are welcome to go home in the evenings or camp out all weekend long. There are usually food and drink provided at the event. There are sometimes even game systems set up for when you and your need a little break! Overall, it’s a great opportunity for people to work together, developing new friendships, and doing something important for their community.

At GiveCamp, there is an expectation of "What Happens at GiveCamp, Stays at GiveCamp". Therefore, all source code must be turned over to the charities at the end of the weekend (developers cannot ask for payment) and the charities are responsible for maintaining the code moving forward (charities cannot expect the developers to maintain the codebase).

How can I get involved? This sounds fun.

There's a form at the Columbus GiveCamp site that you can use to register. Click here to sign up for the Columbus GiveCamp. If you'd like more information first, they have a Frequently Asked Questions page you can refer to as well.

How can my charity get help from the GiveCamp?

There's a deadline of July 8th, and you can register on their site. Here's the link to register as a charity. There's also an extensive FAQ for charities that can be found on the Columbus GiveCamp site.

Get involved. It's an incredibly rewarding experience.

An Idea For The Airlines

noreply@blogger.com (Jeff Blankenburg) — Tue, 16 Jun 2009 19:32:00 +0000

Today, I was looking at Southwest's fares for flying to Seattle. It's a gorgeous part of this great country, and I'm always looking for a fun place to take my wife on a trip. Fares to Seattle were $118 each way.

I'm not planning a vacation.

That's the problem. I'm not currently planning a vacation. I don't know when I'd be able to get out there. But I like that price. If I could buy a ticket, but not a specific seat on a specific plane on a specific day, I'd probably buy one. Why can't that be done?

Flight prices fluctuate.

I can accept that flight prices fluctuate. I'd imagine a flight to Cancun is more expensive during Spring Break, and flights to Orlando during the summer months go up a bit as well (Disney World traffic). But if I find a flight at a price I like, without a real timeframe to use it, why shouldn't I be able to buy one?

My idea.

I'd like to propose to the airlines that they start offering flight credits for purchase. If I can buy a flight today, and use it 8 months from now, I'd think everyone would win. The airline gets my money (that they may not have gotten otherwise), and I get a fare that I like.

There would certainly have to be some restrictions, like I can't take one of the last few seats on a full plane (they will probably be able to sell those), or perhaps I have to book the flight NO MORE than 14 days in advance. This would require me to fill in some of those empty seats on a plane.

The bonus for the airlines is that they can generate a bit more capital up-front. The bonus for the consumer is that I get the price I purchased the fare at. If I get it for $49 each way, but it's currently $180 each way, I wouldn't have to care. I'm just using my flight credit.

Where's the downside?

TUTORIAL: How To Create A SetTimeout Function In Silverlight

noreply@blogger.com (Jeff Blankenburg) — Tue, 16 Jun 2009 00:50:00 +0000

I am in the process of creating my first game in Silverlight, and one of the first things that I noticed I was missing from my Javascript-era toolkit was the setTimeout() function.

In short, this little function is the be-all, end-all of Javascript animation. It is the device you use to insert little "pauses" into your code so that objects appear to be moving. Without it, your pieces would simply start at one position, and appear at the final destination. I use it primarily to make sure that the browser takes the time to draw each step of the animation. Here's an example of me using the setTimeout() function in Javascript, circa 1999 (it's also less than 5K in total size!):

1. Create a new UIToolkit Class.

It was tempting when starting this tutorial to just create a class that does one thing. But as I move forward in my Silverlight adventures, it occurs to me that we're probably going to encounter more of these types of needs in the future. So, I'm creating a UIToolkit class in my project. This will contain all of the little helper functions I create going forwards.

public static class UIHelper
    {
       
    }

2. Inherit from System.Windows.Threading.DispatcherTimer

We are primarily going to be using the DispatcherTimer as is, but we also need it to accept an Action to execute when the timer expires. So we will be creating a new class that inherits from the standard DispatcherTimer, adding an Action to its definition.

public class ActionTimer: System.Windows.Threading.DispatcherTimer
    {
        public Action Action { get; set; }
    }

3. Create a setTimeout method in UIToolkit

To keep it familiar for the Javascript folks out there, I'm keeping the name of the method setTimeout. It's not even my usual casing, but for this example, I'm going to stick with the Javascript syntax.

Inside this method, we're going to need an instance of our new ActionTimer, including the interval we want, and the method to call, as well as the calls to kick off the timer, and an event handler to manage each tick of the timer. Here's the code:

public static void setTimeout(int milliseconds, Action action)
        {
            var timer = new ActionTimer
            {
                Interval = new TimeSpan(0, 0, 0, 0, milliseconds),
                Action = action
            };
            timer.Tick += new EventHandler(timer_Tick);
            timer.Start();
        }

        static void timer_Tick(object sender, EventArgs e)
        {
            var t = sender as ActionTimer;
            t.Stop();
            t.Action();
            t.Tick -= timer_Tick;
        }

Or, just copy this into a new class file

public static class UIToolkit
    {
        public static void setTimeout(int milliseconds, Action action)
        {
            var timer = new ActionTimer
            {
                Interval = new TimeSpan(0, 0, 0, 0, milliseconds),
                Action = action
            };
            timer.Tick += new EventHandler(timer_Tick);
            timer.Start();
        }

        static void timer_Tick(object sender, EventArgs e)
        {
            var t = sender as ActionTimer;
            t.Stop();
            t.Action();
            t.Tick -= timer_Tick;
        }
    }

    public class ActionTimer : System.Windows.Threading.DispatcherTimer
    {
        public Action Action { get; set; }
    }

4. How to call our new method

Now that we've got a setTimeout method that takes a number of milliseconds and an action, we need to call it for testing purposes. Below is the syntax we'll be using. The major difference you'll notice between this and the Javascript implementation is that our new method will take an entire block of code as our Action. In Javascript, we're forced to concatenate a string of commands together, and it can get pretty messy fast. We are setting this up to call our method every 1000 milliseconds, or every ONE second.

UIToolkit.setTimeout(1000, () =>
{
OurRecurringMethodCallShouldGoHere();
});

Let's see it in action!

Click here if the Silverlight below doesn't load. Click here to download this sample code.

Twitter For The Common Man (or Woman)

noreply@blogger.com (Jeff Blankenburg) — Tue, 09 Jun 2009 18:00:00 +0000

I was recently asked by a friend of mine who they should follow on Twitter. As he's not really in the software development world, my standard answers did not really apply. So I started thinking about the people I follow because they entertain or interest me, not because I have an opportunity to learn from and network with them. With that, here it is, in no particular order:

My List of 20 Non-Technical Twitterers To Follow

Historical Tweet - dedicated to pretending that Twitter has always been around, this profile offers tidbits like Abraham Lincoln's tweet: "anyone got a more creative way of saying 87 years?"

Track This - you only get what you give from this Twitter profile. Each time you have a tracking number for something in the mail (UPS, USPS, FedEx, DHL), sent this a direct message with that number. It will send you a DM each time that package has an update, relieving you from having to constantly checking a website. Absolutely great service.

Joe Rogan - Joe has a clever way of looking at things, even if most of those perspectives come while he's baked. There are several great comedians on Twitter, and I find they often use it as a medium to try out new material.

Shaquille O'Neal - perhaps one of the taller Twitter users, Shaq is as transparent as they come. I especially like his "Random Acts of Shaqness," where he would tweet his location, and the first person to find him would get great tickets to the Phoenix Suns game that night. Generous, and creative.

Todd Barry - another comedian, VERY dry wit. His comedy is excellent, and his posts on Twitter often resemble his performances.

Stephen Colbert - talking to his "nation," Colbert has an appealing tongue-in-cheek approach to Twitter, with a political spin.

Rainn Wilson - "Dwight" from the office, Rainn uses Twitter like an everyman. He talks about music he likes, humorous things he finds, and is highly likely to respond to you. Great to engage with someone like that (when he certainly doesn't have to.)

Not Tina Fey - I'm not actually sure that this is Tina Fey's profile, but the humor is spot on for her. There's also @tina_fey, and it's good, but not like the one in my list.

John Mayer - musician, but active twitterer. It's even been rumored that he got dumped by Jennifer Aniston because of his Twitter addiction. In addition to life's observations, he's often talking music.

MC Hammer - I don't really know why I follow MC Hammer. Listening to him is like peering into the mind of a crazy person. Entertaining, but also sometimes sad.

CNN Breaking News - because you need to know what's going on the world. Just headlines, it's an easy way to keep up with current events.

Woot! - if you're not familiar with http://woot.com, you should be. Each day, they sell ONE product at a super-cheap price. When they're gone, they're gone. Shipping is always $5. This Twitter feed keeps you up to date with the product each day.

Rachel Maddow - if you like your political discussions with a snarky, sarcastic edge, Rachel's for you. Crazy intelligent, but with a wit that makes it enjoyable to listen to.

Darth Vader - imagine Darth Vader is living in today's times. Imagine he's bothered by the same annoyances you and I are. For example: "Can't tell if I have the swine flu or just need a fresh air filter cartridge." or "In Palpatine's defense, it's hard not to be over-confident when intelligence reports you'll be fighting teddy bears & salamanders."

Kevin Smith - the writer/director of movies like Clerks, Mallrats, and Zach and Miri Make a Porno. Super funny guy, with a ton of self-deprecating humor added in.

Jimmy Fallon - SNL alum, the new host of the Late Show, and a self-proclaimed technology geek, Jimmy's always got something funny to say. He often uses Twitter for contests and "live" surveys too.

Adam Savage - one of the geniuses on Mythbusters, Adam's constantly talking about science, technology, and life.

Joel McHale - the host of E!'s show "The Soup," Joel has a sarcastic, clever personality, and most of that comes through in his Twittering.

Olivia Munn - one of the hosts of G4's "Attack of the Show," she's as witty and clever as she is attractive. She's got a serious affinity for technology, which makes her even more interesting to listen to.

Jim Gaffigan - one of my favorite comedians, he talks about what he's seen that is funny, in addition to some one-liners like this prize: Coffee is one of the only drinks that is great hot, great ice cold, but absolutely sucks in between. "Do you have any lukewarm coffee?"

Celebrate Contribupendence Day - July 3rd, 2009

noreply@blogger.com (Jeff Blankenburg) — Mon, 08 Jun 2009 13:11:00 +0000

Last year, I created a call-to-action for Contribupendence Day. The basic idea is simple:

You work with many people every year. A handful of them are absolutely outstanding, in your opinion. Have you ever shared that opinion with them? Have you shared that opinion with anyone else?

Contribupendence Day is an annual reminder to give your rockstar business contacts some much deserved feedback. Leave them a recommendation on LinkedIn. Write a blog post about them. Create some content on the Internet that can be found by others.

Ultimately, they are going to be looking for a job in the next few years, and employers LOVE recommendations from others.

So, this is a call to action for each one of you. On July 3rd, go to a social networking site (LinkedIn, SpeakerRate, Plaxo, Facebook, Friendfeed, Live Spaces, etc.), and write 5 reviews of your favorite colleagues. They don't have to work with you today, but you should have some professional experience with them in some fashion.

So let's tell the world about the people we work with. Or the people we WISH we worked with. No strings attached. Let's make sure that when someone looks up your friend online, that they find a glowing (and true) review from a peer. No embellishments, no lies. Just the truth. And do it with no expectation that they will return the favor. That's just selfish.

The term "contribupendence" was coined because this effort is meant to contribute to a person's independence from online mediocrity. Help someone get the credit and reputation they deserve!

TUTORIAL: Creating an IE8 Accelator

noreply@blogger.com (Jeff Blankenburg) — Thu, 04 Jun 2009 12:32:00 +0000

For those of you that have been using Internet Explorer 8 for a little while now, I'm hoping you've had a chance to customize your Accelerators. These are proving to be pretty valuable tools in my day-today surfing. Here's what my customized list looks like:

But one thing that has bothered me about these tools is that I didn't know how to make them. It probably wasn't hard, but it also wasn't obvious. That's the point of this post. I did some research, and it's actually a simple XML file on your web server, and some javascript in a button to reference it.

Of course, you need a service of some kind to actually provide value, but that's another thing. In my example, I'm going to create an Accelerator to post some text to Twitter.

1. Start with the default XML file.

If we visit the developer page for Accelerators, we are provided with the templates we can start with. I have bolded (and colored black) the values that we're going to need to change. You can read the entire spec on this document on MSDN.

<?xml version="1.0" encoding="UTF-8"?>
  <openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
  <homepageUrl>http://maps.live.com</homepageUrl>
  <display>
    <name>Map with Windows Live</name>
    <icon>http://www.live.com/favicon.ico</icon>
  </display>
  <activity category="map">
    <activityAction context="selection">
      <preview action= "http://maps.live.com/geotager.aspx">
        <parameter name="b" value="{selection}"/>
        <parameter name="clean" value="true"/>
        <parameter name="w" value="320"/>
        <parameter name="h" value="240"/>
        </preview>
      <execute action="http://maps.live.com/default.aspx">
        <parameter name="where1" value="{selection}" type="text" />
      </execute>
    </activityAction>
  </activity>
</openServiceDescription>

2. Change the <homepageUrl> value.

At first, I thought this was a throwaway value, but it has to match the other values in the XML file or it won't work. I assume this is to prevent spoofing, though I think it would still be pretty easy to spoof a site. It has nothing to do with the Accelerator model, though. It's all about just creating a site that looks like the target site. I can discuss that in a later post though. So, since I'm working on an Accelerator for Twitter, my value for this will be http://twitter.com.

3. Change the <name>value.

This is the name that your users will see when they bring up the Accelerator Menu. In my case, I am going to make mine say "Tweet with Twitter."

4. Change the <icon> value.

If you want an icon to be displayed next to your text in the Accelerator menu, this is where you specify it. The Twitter icon seems appropriate for this, so my value is going to be the favicon from the Twitter site: http://twitter.com/favicon.ico.

5. Change the <category> value.

This is where your Accelerator will be categorized in the Accelerator menu. If it doesn't match an existing value EXACTLY, it will create another grouping. This includes capitalization, it seems. I'd like my entry to show up in a unique grouping, though, so I am using the value "Tweet."

6. Delete the <preview> section.

This is certainly not something you want to do every time, but unless you need to preview the results for the user (mapping and translation are good uses of this), we just want to take the user someplace. There's not much point in previewing it for them. So just delete that node.

7. Change the <action> value.

Inside the <execute> tag, we have an action value. This is the place that we will be directing the user when they click on our Accelerator in their menu. For Twitter, that place will be http://twitter.com/home. This gets the user to their Twitter home page, but we still need the ability to populate the "Tweet Box" on the page. Thankfully, Twitter and the Accelerator model can work together to accomplish this.

8. Change the <parameter> value.

You can have multiple parameter tags, and each one is ultimately treated like a query string variable to the URL that we specified in the previous step. Twitter accepts a parameter of "status" that, when used, will populate that text in the Twitter box. So, our name for our parameter will be status, and we will leave the value = {selection} because this will use the text the user highlighted to enter the Accelerator menu in the first place. So the entire use case for this process is this:

User highlights text.

User opens Accelerator menu.

User chooses our accelerator.

User is taken to Twitter, and the box is populated with the original highlighted text.

So here's what our final XML file looks like:

<?xml version="1.0" encoding="UTF-8"?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
    <homepageUrl>http://twitter.com</homepageUrl>
    <display>
        <name>Tweet with Twitter</name>
        <icon>http://www.twitter.com/favicon.ico</icon>
    </display>
    <activity category="Tweet">
        <activityAction context="selection">
            <execute action="http://twitter.com/home/">
                <parameter name="status" value="{selection}" type="text" />
            </execute>
        </activityAction>
    </activity>
</openServiceDescription>

9. Get that XML file on a web server.

I have placed my XML file here. It just needs to be publicly available.

10. Create a way for a user to install your Accelerator.

We just need to add a button or link on a web page for our users to click on. Here's some sample HTML you can use:

<button id="myButton" onclick="window.external.AddService('http://www.jeffblankenburg.com/twitteraccelerator/TwitterAccelerator.xml')">Tweet As Twitter</button>

And here's a sample button you can use to try it out!

Random Acts of Reading

noreply@blogger.com (Jeff Blankenburg) — Tue, 26 May 2009 20:06:00 +0000

I was recently reading The Twitter Book by Tim O'Reilly and Sarah Milstein, and while I didn't learn much about Twitter that I didn't already know, I did learn something about Shaquille O'Neal.

Did you know that before each of his basketball games, Shaq would tweet his location, and give the first follower that showed up a pair of tickets to the game that night? He calls it "Random Acts of Shaqness," and it's an absolutely brilliant idea.

Not one to come up with my own original ideas, I'm starting my own random acts of giving now as well. I am working with several book publishers to give away their technical books in a more unique way. Going forward, about once a week, I will be posting a message on Twitter with the phrase "Random Acts of Reading." It will also include my specific location, and a "password." The first person to say the password to me (in person, you cheaters) wins a book. It's that simple. To kick it off, I will be giving away two copies of The Twitter Book this week.

So keep your eye on Twitter...I might just be right behind you.

My Thoughts from Kalamazoo X

noreply@blogger.com (Jeff Blankenburg) — Mon, 27 Apr 2009 13:41:00 +0000

This weekend, I had the honor to speak at the Kalamazoo X Conference, in Kalamazoo, Michigan. I had modest expectations for this event, as there had been some massive shake-ups in the format and execution of the conference in the weeks leading up to it.

What I discovered, however, was that the organizers of this conference, and Michael Eaton in particular, were merely refactoring this event to near perfection. Instead of a hum-drum 2 or 3 track event with 60 minute sessions, they changed it to something VERY different. Something I've never seen before. It was a one-track conference. 16 sessions. Each speaker had 25 minutes to present.

I'm always intrigued when you take something that everyone is used to, and apply new rules to it. By changing the paradigm of the "session" from 60 or 75 minutes to 25, it forced us, as speakers, to rethink how and what we present. As a result:

IT WAS AMAZING.

Here's a recap of some of my favorite sessions (in the order they were presented):

Social Networking For Geeks

This session was presented by Sarah Dutkiewicz, and really covered the what and why of social networks. She talked about Plaxo and LinkedIn, and the purpose those serve as contact information repositories. She then moved to talk about Facebook, Friendfeed, and the all-too-often-mentioned-this-day Twitter. It's not about telling people about the breakfast you had today...it's about learning and interacting with other like-minded individuals. Once you can leap that hurdle, you'll see the value in services like Twitter.

Branding 101

Clovis Bordeaux was one of the presenters I had never seen before. Due to technical difficulties, he wasn't able to use his slides, but he has an excellent stage presence that more than made up for the lack of slides. He talked about branding, both from a business perspective, as well as the personal side. It really tied well into some of the things that my presentation on self-promotion would cover later in the day. I look forward to seeing future presentations from Clovis.

Classic Design Patterns In Everyday Code

One of the two sessions to actually show code in the presentation, Mike Wood talked about Design Patterns, and how important, time-saving, and relevant they are in today's applications. Mike has a great presentation style, and I enjoy hearing him speak. This was no exception.

3 Tips For Improving Your Dev Process

Jim Holmes' talk on improving your dev process was excellent. The recurring theme of the day was the communication is important, and this session drove that point home. Since 2 of his 3 points had been covered in some respects before his talk, Jim focused a good portion of his presentation on Estimation, and the inexact science that it is. His resonating quote: "It's estimation, not EXACTimation."

Change

Leon Gersing's talk, given during a rolling thunderstorm, had perhaps the greatest impact on the audience at Kalamazoo X. First starting in code, he talked about accomodating change in our lives. Change in our workplace, or perhaps even the place we work. Ultimately, he reminded us that we should be open and prepared for change. Resistance is futile. He ended with this excellent quote: "It is not necessary to change. Survival is not mandatory." --W. Edward Demming

Community - Get Involved!

The perfect ending to the day, Mike Wood has an opportunity to talk with the audience about the importance of finding your community. Whether that is a user group, a Twitter crowd, or just some participation in some online forums, you have much to gain from the people around you. Embrace that opportunity, and get involved! It was the perfect message for the day.

Windows Client Road Show Featuring Windows 7 and Internet Explorer 8

noreply@blogger.com (Jeff Blankenburg) — Thu, 09 Apr 2009 15:54:00 +0000

Spring brings not only rain and flowers (you know, April shows and May flowers), it also brings our spring technical events. And this time our technical events are taking on a slightly different form.

Okay, to be completely honest, we are still calling the sessions ArcReady (our event for architects and those who want to become architects), MSDN Events Unleashed (for the developer), and the new TechNet Events Unleashed (for the IT Professional). But we are also doing something different for the spring event series: there's a single, connected theme running throughout all events.

And what is that theme, you ask? It's all things next generation Windows client, featuring Windows 7 and Internet Explorer 8!

ArcReady - Brain Food for the Architect
The client (or presentation) tier of our applications is taking on an increasingly important role. Users are expecting more compelling user interfaces, but they also want more functionality from their applications. In this ArcReady we examine how to design and deliver well architected client applications that will be easy to maintain and extend.

Topic 1: Trends and Patterns on the Client Tier
In our first topic we will take a vendor and platform neutral look at some of the trends and emerging technologies that can be used on the client tier. We will look at techniques like Mashups, technologies like Natural User Interfaces (NUI) and the increasing importance of the mobile platform. We will also look at some common patterns that can be used in the architecture of the client tier.

Topic 2: Applying Microsoft Technology on the Client Tier
In our second topic we will take some look at how we can use Microsoft technologies to create well architected and compelling client applications. We will look at technologies like Silverlight and WPF that can be used to create compelling clients. We will also look at technologies that can be used to make your applications more extensible for future development. We will also examine some architectural guidance developed by the Microsoft Patterns and Practices group.

MSDN Events Unleashed - Get Your Dev On
Internet Explorer 8 recently released to the web, and with that release comes a wide range of new capabilities that developers can exploit. Of even more impact to developers everywhere is the upcoming release of Windows 7, also bringing with it several new capabilities for consumers and developers.

Topic 1: Internet Explorer 8 for Developers
The Windows Internet Explorer 8 browser makes it easier to explore and interact with the web. Did you know that there will be a new standards mode by default? While it can easily be turned off, knowing the potential to impact this may have on many sites that have been crafted around various features in past versions is a good idea. Attend this session to learn which current practices you need to change and how the new standards mode affects your development techniques and your existing sites. We review tools that are built into Internet Explorer 8 to help developers debug and create Web pages. We also discuss Web Slices, Accelerators, and Search Suggestion - all of which are key new features in this latest release.

Topic 2: Developing on Microsoft Windows 7
Building applications that are easy to use, visually appealing, and offer high performance is a challenge that developers face every day. Innovative applications can greatly improve the user experience, empowering companies to differentiate their services and solutions. However, developers are increasingly asked to do more in less time, while also optimizing the power and performance requirements of their applications. The Windows 7 platform makes it easy for developers to create engaging, user-friendly applications by providing familiar tools and rich development features that allow them to take advantage of the latest PC capabilities. In this session we will explore the new Taskbar and Jump Lists, the Scenic Ribbon, file management with Libraries, and Windows Web Services among many other enhancements to the new operating system.

TechNet Events Unleashed - Supporting the Backbone of the Industry
Windows Server 2008 R2, Windows 7, and Internet Explorer 8 represent both a wave of change and disruption to IT operations as well as an opportunity for IT professionals to have a big impact on their organizations.

Topic 1: Windows Server 2008 R2 - Optimize Your Time
Get a jump start on your peers with Windows Server 2008 R2 by joining us for this no nonsense technical session, where we will discuss the critical improvements in the next version of Windows Server. Some have argued that, given the impressive scope of new functionality in Windows Server 2008 R2, it should not be an “R2” release, but rather should be given a completely new name. They point to features such as Direct Access, Branch Caching, Live Migration, Powershell 2.0, and VDI that will help you cut down on the amount of time you spend doing mundane tasks, reduce end user frustration and support headaches, and give your mobile workforce a competitive edge through ubiquitous access to company data. There’s a good chance that by attending this session you’ll find a way to save time and money with Windows Server 2008 R2, and so you’ll get the time you spend with us back many times over.

Topic 2: Windows 7 - Maximize Your Potential
In designing Windows 7, the engineering team had a clear focus on what we call ‘the fundamentals': performance, application compatibility, device compatibility, reliability, security and battery life. Early reviews of Windows 7 seem to indicate that the choice to focus on the fundamentals is resonating well with many users and professionals. And, IT professionals will further benefit from the enhancements to manageability and security. You’ll also learn how your investments in testing and evaluating Windows Vista will pay off in the transition to Windows 7. Come see firsthand what all the buzz is about in this demo-intensive session where we explore the UI improvements, performance gains, and manageability enhancements in the next client operating system from Microsoft.

Topic 3: Internet Explorer 8 - Get Excited About the Browser Again
Internet Explorer is currently the most widely used browser in business, and while we’ve seen nice incremental improvements to IE in recent history, we haven’t seen as many truly earth shattering changes. Well, many agree that the next release of IE, Internet Explorer 8, provides the most compelling upgrade to IE in many years. In a typical day, users spend 2 hours or more per day in the browser, so significant improvements here can have tremendous impact on productivity and the way we work. The browser needs to be thought of in the same terms as an operating system—it has to be rich, robust, interoperable, easy to use and secure. Internet Explorer 8 is a browser that meets these needs and more for users, enterprises, IT professionals and developers alike. Come learn how the new improvements, too numerous to mention here, are driving many to get excited about the browser again.

Event Schedule
Here is a quick summary of the events scheduled this spring, starting in late April and concluding in mid-June.

ArcReady	MSDN Events Unleashed	TechNet Events Unleashed
Waukesha, WI - April 28, 2009 at 9:00am	Waukesha, WI - April 28, 2009 at 1:00pm	Waukesha, WI - April 28, 2009 at 3:10pm
Austin, TX - April 28, 2009 at 9:00am	Austin, TX - April 28, 2009 at 1:00pm	Austin, TX - April 28, 2009 at 3:10pm
Bloomington, MN - April 30, 2009 at 9:00am	Bloomington, MN - April 30, 2009 at 1:00pm	Bloomington, MN - April 30, 2009 at 3:10pm
Cleveland, OH - April 30, 2009 at 9:00am	Cleveland, OH - April 30, 2009 at 1:00pm	Cleveland, OH - April 30, 2009 at 3:10pm
Indianapolis, IN - May 4, 2009 at 9:00am	Indianapolis, IN - May 4, 2009 at 1:00pm	Indianapolis, IN - May 4, 2009 at 3:10pm
Chicago, IL - May 5, 2009 at 9:00am	Chicago, IL - May 5, 2009 at 1:00pm	Chicago, IL - May 5, 2009 at 3:10pm
Columbus, OH - May 12, 2009 at 9:00am	Columbus, OH - May 12, 2009 at 1:00pm	Columbus, OH - May 12, 2009 at 3:10pm
Houston, TX - May 12, 2009 at 9:00am	Houston, TX - May 12, 2009 at 1:00pm	Houston, TX - May 12, 2009 at 3:10pm
Mason, OH - May 14, 2009 at 9:00am	Mason, OH - May 14, 2009 at 1:00pm	Mason, OH - May 14, 2009 at 3:10pm
Overland Park, KS - May 14, 2009 at 9:00am	Overland Park, KS - May 14, 2009 at 1:00pm	Overland Park, KS - May 14, 2009 at 3:10pm
Dallas, TX - May 19, 2009 at 9:00am	Dallas, TX - May 19, 2009 at 1:00pm	Dallas, TX - May 19, 2009 at 3:10pm
Southfield, MI - May 20, 2009 at 9:00am	Southfield, MI - May 20, 2009 at 1:00pm	Southfield, MI - May 20, 2009 at 3:10pm
Downers Grove, IL - May 20, 2009 at 9:00am	Downers Grove, IL - May 20, 2009 at 1:00pm	Downers Grove, IL - May 20, 2009 at 3:10pm
St. Louis, MO - May 21, 2009 at 9:00am	St. Louis, MO - May 21, 2009 at 1:00pm	St. Louis, MO - May 21, 2009 at 3:10pm
Nashville, TN - June 11, 2009 at 9:00am	Nashville, TN - June 11, 2009 at 1:00pm	Nashville, TN - June 11, 2009 at 3:10pm
Knoxville, TN - June 12, 2009 at 9:00am	Knoxville, TN - June 12, 2009 at 1:00pm	Knoxville, TN - June 12, 2009 at 3:10pm

Technorati Tags: ArcReady,MSDN Events Unleashed,TechNet Events Unleashed,Windows 7,Internet Explorer 8

Hiding Your Pages From Search Engines

noreply@blogger.com (Jeff Blankenburg) — Mon, 06 Apr 2009 12:52:00 +0000

This morning, on Twitter, a question was posed about how to prevent your web pages from being indexed by the search engines' spiders. In one of the few ways that standards have truly been adopted, we have several options for doing this.

Why would I want to exclude my pages from search?

There are many reasons, really. I have created an online puzzle, as an example, and I do not want people to find the levels through a search engine. Another example would be a private Wiki. If you haven't considered the power of a Wiki to manage your life's data, I'll be writing an article on that shortly. Finally, there are times where certain pages of your site just shouldn't be found. I recently made a transition to .aspx pages from .html pages on my blog, and I wanted to exclude the HTML pages from the search engines.

The point is that there are plenty of reasons to hide a single page or an entire site from search engines. What's great about this is that it's SUPER easy.

So how do we do it?

There's actually 3 different ways, depending on what you're trying to accomplish. This list includes a .txt file on your server, meta tags on your pages, and additional properties on your <a href=""> tags.

Meta tags

I'm starting with the approach I feel is the best, and if you don't like it, there are certainly alternatives below. Meta tags are universally supported by the search engines, and allow you page-by-page control. There are actually four different states this meta tag can take. Here they are:

<meta name="robots" content="noindex,nofollow" />

By adding this tag to your page, it will not only be ignored by the search engines, but any links on the page will also not be followed. This is the tag I wold recommend using on any page you want to be ignored.

<meta name="robots" content="noindex,follow" />

In this case, we've changed "nofollow" to "follow." This means that while THIS page will be ignored, any pages this one links to will be checked out. However, if those other pages also have this meta tag on them, they will still be ignored.

<meta name="robots" content="index,nofollow" />

Now we've flipped the bit on the "noindex" value. This value will allow the search engines to index the page, but because we have "nofollow" specified, any pages it links to will not be found. (If other pages without this tag link to those pages, however, they WILL be found. You need to cover ALL of the possible paths to each page.)

<meta name="robots" content="index,follow" />

Finally, we have the complete opposite of what this article is about. These values will not only allow your page to be indexed, but it will also follow all of the links on the page, and try to index them as well. (Again, each page will be evaluated for meta tags as the spider finds it.)

Nofollow links

Nofollow links are a bit of an extension from the meta tag. Instead of telling the spider not to index the whole page, you're able to tell it not to index any of the pages it links to.

<a href="http://jeffblankenburg.com/secret.aspx" rel="nofollow">Jeff's Secret Page</a>

This option is technically the most flexible, because it allows you to manage what is found on a link-by-link basis. The downside is that you need to manage it on a link-by-link basis.

Robots.txt

This is the most all-encompassing option, it allows you to exclude your entire site with one simple file. Here's an example robots.txt file.

User-agent: *
Disallow: /secrets/
Disallow: /tdpe/
Disallow: secret.aspx

The "user-agent" section of this file allows you to even specify WHICH search engines you want to exclude. In our example file, we're letting everyone in, but not allowing them in two specific directories, and one specific page.

The upside to this approach is that we can manage our search engine inclusions and exclusions in one centralized file. The downside is that if a search engine ignores your robots.txt file, your whole site will be indexed.

It is my opinion that you should use a combination of these methods if you really want to keep some of your pages from being found.

The guaranteed solution

It may seem simple, but many developers still use the idea of "security by obscurity." Just because nobody knows your page is there does NOT mean that it can't be found. If you need your content protected, the only guaranteed way to do that is by password protecting it. Create a wall, and make sure you don't leave any holes. This will most certainly deter the spiders from finding your pages of content.

Removing pages that have already been indexed

This is a trickier conundrum. Your pages are already showing up in search engines, and you need to get them "unlisted." The good news? It's relatively easy, and will happen automatically if you used one of the methods listed above. The bad news? If you need your pages taken down ASAP, you have to go to each individual search engine. Here's the places to start:

Live Search - http://blogs.msdn.com/webmaster/archive/2009/01/28/removing-content-from-the-live-search-index.aspx

Google - http://www.google.com/support/webmasters/bin/answer.py?answer=61062

Yahoo - http://help.yahoo.com/l/us/yahoo/search/siteexplorer/delete/siteexplorer-46.html

The Toughest Developer Puzzle Ever

noreply@blogger.com (Jeff Blankenburg) — Mon, 30 Mar 2009 12:59:00 +0000

There was a bit of a leak on the interwebs this weekend, and many people are now aware of a little project I'm putting together that I'm calling the Toughest Developer Puzzle Ever. Each level exists as a web page, and the challenge is to figure out how to get to the next level. To do this, users will have to use ALL of the information available to them. It's not all coding tasks, but it plays on the knowledge of someone who works in the software world.

Some of the puzzles might have you debugging Javascript, others might require you to recognize a font and translate it. The idea is that it's going to require a broad range of knowledge and problem solving skills.

How Do I Get Started?

The initial levels of the puzzle can be found at http://toughestdeveloperpuzzleever.com. We have put together about 35 levels so far, and are working with others to get this puzzle over 100 levels. If you have questions, we also have a Twitter account set up for this: TDPE

How Can I Contribute?

Contact me, Jeff Blankenburg, directly at tdpe@jeffblankenburg.com. I'm looking for challenging puzzles in the vein of the ones currently up on the site, but I'm always open to innovation and new challenges.

Your puzzles will be hosted on your website, and we're expecting the traffic from this puzzle to also help drive traffic to your website.

Stir Trek (no, that's not a typo)

noreply@blogger.com (Jeff Blankenburg) — Fri, 27 Mar 2009 01:30:00 +0000

Did you go to Mix '09? Neither did a lot of people. Don't get me wrong...it was well-attended, but in these tough times, it's getting harder and harder to justify the flights, hotels, meals, and conference fees for the major conferences anymore. So I'm doing my best to help you out.

On May 8th, we will be holding an event called Stir Trek. In short, it is meant to bring the highlights of the Mix conference to a location you can afford to visit. It will be held in Columbus, Ohio at the Marcus Crosswoods movie theater. But there's a twist.

There will be 10 sessions in two tracks, and they will run from 9am - 3pm. At 3pm, we're going to turn off the laptops and cell phones, and lean back to enjoy a private screening of the new Star Trek movie that is opening that day. It should be an amazing day.

We will be covering Silverlight 3, Internet Explorer 8, Expression Blend 3, User Experience Design, WPF, Rapid Prototyping with SketchFlow, and ASP.NET MVC, among other topics from the Mix 09 conference. In addition, Tim Heuer has agreed to join us for the day, and will be presenting the Silverlight 3 session. This will be a great opportunity for you to have direct access to a Silverlight expert from Microsoft for the day. Bring your questions, and be sure to ask them. Tim is a great developer and speaker, and I think he'll definitely add to what is already going to be a spectacular event.

We have put together a website for this event, and you can find it here: http://www.stirtrek.com. On the site, you'll find the most updated information available about the conference, including sessions, speakers, location, sponsors, etc.

I hope you'll join us for a full day of technology. I promise there will be NO jokes about developing for "The Enterprise."

Upcoming MSDN Unleashed Events

noreply@blogger.com (Jeff Blankenburg) — Mon, 23 Mar 2009 12:33:00 +0000

As much as I like writing posts about technology, best practices, and my random interpretations of my life experiences, sometimes I just need to tell you about stuff. This post falls in that category.

If you're not aware, we offer a series of events called MSDN Unleashed each quarter of the year. This quarter, we are going to be covering Internet Explorer 8 and Windows 7. These technologies are going to be the focal point for developers in the coming months and years, and are something you, as a software developer, should at least have a passing knowledge of, if not an in-depth understanding. Here's what the sessions will cover:

Session 1: Internet Explorer 8 for Developers

The Windows Internet Explorer 8 browser makes it easier to explore and interact with the web. Did you know that there will be a new standards mode by default? While it can easily be turned off, knowing the potential to impact this may have on many sites that have been crafted around various features in past versions is a good idea. Attend this session to learn which current practices you need to change and how the new standards mode affects your development techniques and your existing sites. We review tools that are built into Internet Explorer 8 to help developers debug and create Web pages. We also discuss Web Slices, Accelerators, and Search Suggestion – all of which are key new features in this latest release.

In this session we’ll show you:

Developer Tools
Selectors API
Use and create accelerators
Use and create web slices
Use and create search suggestions
AJAX Navigation enhancements with Virtual Earth demo on history, AJAX Cross Domain Calls
CSS improvements (printing, counters, new pseudo classes)

Session 2: Developing on Microsoft Windows 7

Building applications that are easy to use, visually appealing, and offer high performance is a challenge that developers face every day. Innovative applications can greatly improve the user experience, empowering companies to differentiate their services and solutions. However, developers are increasingly asked to do more in less time, while also optimizing the power and performance requirements of their applications. The Windows 7 platform makes it easy for developers to create engaging, user-friendly applications by providing familiar tools and rich development features that allow them to take advantage of the latest PC capabilities. In this session we will explore the new Taskbar and Jump Lists, the Scenic Ribbon, file management with Libraries, and Windows Web Services among many other enhancements to the new operating system.

In this session we’ll show you:

New Features in Windows 7
Use and create jump lists
Scenic Ribbon API
Use and create Libraries
Windows Web Services API
Additional enhancements that support development

When and where will these events be?

Location/Registration	Date	Time
Waukesha, WI	4/28/2009	1:00pm - 2:50pm
Austin, TX	4/28/2009	1:00pm - 2:50pm
Bloomington, MN	4/30/2009	1:00pm - 2:50pm
Cleveland, OH	4/30/2009	1:00pm - 2:50pm
Indianapolis, IN	5/4/2009	1:00pm - 2:50pm
Chicago, IL	5/5/2009	1:00pm - 2:50pm
Columbus, OH	5/12/2009	1:00pm - 2:50pm
Houston, TX	5/12/2009	1:00pm - 2:50pm
Mason, OH	5/14/2009	1:00pm - 2:50pm
Overland Park, KS	5/14/2009	1:00pm - 2:50pm
Dallas, TX	5/19/2009	1:00pm - 2:50pm
Southfield, MI	5/20/2009	1:00pm - 2:50pm
Downers Grove, IL	5/20/2009	1:00pm - 2:50pm
St. Louis, MO	5/21/2009	1:00pm - 2:50pm
Nashville, TN	6/11/2009	1:00pm - 2:50pm
Knoxville, TN	6/12/2009	1:00pm - 2:50pm

Adding An 800 Pound Gorilla To Your Site

noreply@blogger.com (Jeff Blankenburg) — Thu, 05 Mar 2009 18:21:00 +0000

In order to restore my integrity (see comments), I have decided, against my completely subjective opinion, to show you how to add Google's search box to your site.

Keep in mind that my previous post on this subject, Adding Search To Your Site (In 5 Minutes), was written using the Live Search box for one simple reason:

It's easier than using Google.

Even Dave Taylor, a well-known and respected blogger, feels that Google's "HTML samples could be cleaned up a bit, usually, so I've also recast it as proper XHTML rather than somewhat sloppy HTML."

Why is it sloppy? Why is not that intuitive? Because Google also offers this service for a fee, and most every way you search for a "Google Search Box" leads you to the paid service. Check this out:

Having Said All That...

Here's how we implement the Google AJAX search box on your site. Start by heading over to the sign up page.

1. Create an AJAX Search API Key

You need to generate an API key that will authenticate you each time that the search service is called. If you have more than one site, you will need more than one API key. Check the box and enter the URL to get your key.

2. Copy the HTML they provide you

We are immediately provided with some HTML for a "sample" page to get us started. It basically contains two javascript <script> blocks, and a <div> that needs to be placed in your page's <body>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Google AJAX Search API Application</title>

    <script src="http://www.google.com/jsapi?key=[redacted]" type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">
        //<![CDATA[
        google.load("search", "1");    
        function OnLoad() {
            // Create a search control
            var searchControl = new google.search.SearchControl();
            // Add in a full set of searchers
            var localSearch = new google.search.LocalSearch();
            searchControl.addSearcher(localSearch);
            searchControl.addSearcher(new google.search.WebSearch());
            searchControl.addSearcher(new google.search.VideoSearch());
            searchControl.addSearcher(new google.search.BlogSearch());
            // Set the Local Search center point
            localSearch.setCenterPoint("New York, NY");
            // Tell the searcher to draw itself and tell it where to attach
            searchControl.draw(document.getElementById("searchcontrol"));
            // Execute an inital search
            searchControl.execute("Google")'
        }
        
        google.setOnLoadCallback(OnLoad);
        //]]>
    </script>
</head>
<body>
    <div id="searchcontrol">Loading...</div>
</body>
</html>

This was the differentiator for me. I now need to take this sample code apart, moving the javascript to one part of my code, and adding a div to another part. Not everyone can look at a chunk of HTML and figure out where all of the pieces are supposed to go. There's a link to the API Documentation, but to a non-developer, that page might be even scarier.

3. Customizing the control.

At this point, we have a search box that searches for the term "Google," and uses "New York, NY" as our "local" location. We need to change those values, at a minimum. But if that's all we change, we'll still be returning results from the entire Internet, not just our website.

In order to get this control to search ONLY our website, we're going to have to start reading the API Documentation. Which means understanding the Google API Class Library, which means having a respectable background in understanding software.

All of this adds up to a control that could be very useful, but just falls short in comparison to the Live alternative. Here's how you do it though...

            var siteSearch = new google.search.WebSearch();
            siteSearch.setUserDefinedLabel("Blankenthoughts");
            siteSearch.setUserDefinedClassSuffix("siteSearch");
            siteSearch.setSiteRestriction("jeffblankenburg.com");
            searchControl.addSearcher(siteSearch);

Why the search engine is actually irrelevant

Several of the commenters on my previous post felt that I was "snubbing" Google by not discussing their search box option, and that Google was the only "true" search provider out there. I contend that in this scenario, where I am only searching through the pages of my site, the search engine doesn't matter.

Live Search, Google, and Yahoo! are all going to have my pages indexed. All three of them are capable of bringing back the most relevant results for my search terms. So why does it really matter what search engine you're using?

For that matter, what criteria are you using to determine which search engine is the "best?" Live Search and Yahoo both bring me very relevant results when I use them as a search engine. What is Google providing you as a search engine that Live and Yahoo aren't? I'm truly interested to start a discussion here. Sell me on why I should use Google over one of the other guys. I'm always open to a convincing argument.

Twitter Is Not A Measuring Stick. At All.

noreply@blogger.com (Jeff Blankenburg) — Thu, 05 Mar 2009 13:04:00 +0000

There are many of us out there who are driven by statistics. Bloggers especially. We compare the number of subscribers to our feed, the traffic we see, sometimes even the money we make. This post is about how Twitter SHOULD NOT be something we use as a measuring stick.

The Experiment

I have a website that I run every March for the NCAA March Madness tournament. This will be the 8th year I've run it, and until now, it has grown completely organically. Friends and colleagues told their friends and colleagues, and before I knew it, I had over 500 people filling out brackets on my website.

With the rise of Twitter, Facebook, and other social networks, I thought I'd see what I could do with a little promotion.

So I created a new Twitter handle: cutdownthenets. I started by following about 25 some of my close friends on Twitter. But that seemed silly, because they were already going to know about my site. I am trying to reach people that I've never met before.

How do I find a huge number of people that are interested in sports, brackets, or the NCAA tournament? Well, ESPN has a Twitter presence, what if I just follow everyone that is following ESPN? They've got over 40,000 followers. Surely some of them will be interested in my site. Heck, if I got 1% of them, that would be 400 new participants in my little office pool.

So I opened ESPN's "followers" page, and started following every single person I could. Fatigue started setting in around 1,000 though. So I left it at that. Based on my expectations, if I only got 1% of those people, I'd have 10 new followers the next day.

When I woke up this morning, cutdownthenets had over 200 followers.

Are you kidding me? Surely this can't be right. As it turns out, it is. About 20% of a random sample of Twitter users followed me back, without knowing anything about me, and certainly without reading any of my posts. (I'd only made 5 posts TOTAL at that point).

In fact, my 1% number did come into play in all of this. About 1% of the users that I followed had an automatic follow and DM action set up somewhere. I got lots of messages like these:

What This All Means

What this little experiment has made me realize is that the number of followers someone has is almost completely artificial. There's TONS of services that try to compare people based on the number of Twitter followers they have, and that's just wrong. If I wanted more followers, all I need to do is start following a ton of people. Heck, I could even "unfollow" those people the next day to really inflate my Twitter Ratio.

The quality of a Twitter user should be determined by how relevant their content is to their followers. There are plenty of popular users that have a signal/noise ration approaching ZERO. They don't participate in the conversation, it's just a constant stream of noise in the form of links, messages, and more links. (I'm looking at you, Guy Kawasaki.)

So the next time you get followed by someone, take the time to look at their posts. Read their bio. Truly determine whether listening to that person is valuable to you. I'm re-evaluating the people I follow because of this. There's a bunch of noise out there, and I'm in search of value.

How This Can Be Harnessed For Good

Twitter could be a very valuable tool for companies. Some, like Dell, really seem to get that. They can provide valuable information and resources directly to their customers. But this can be taken a step further.

What if every time someone mentioned your product on Twitter, you knew about it? What if every time someone had a negative experience with your company, you heard about it, and could help to remedy the situation? Using the Search features at http://search.twitter.com, or a desktop application like TweetDeck, I am able to pay attention to the specific terms that I am interested in, and interact with people that use those terms. The terms I am currently following are "Zune", "March Madness", and "Microsoft Tag." If ANY Twitter user mentions one of those things, I immediately get a notification in TweetDeck, and can reply to them, follow them, etc.

It allows me to meet and interact with other people that have similar interests to me. THIS is where the value of Twitter is. Finding common interests, and having conversations about them. Just getting a HUGE number of followers is not.

I no longer care about how many followers you have. It doesn't matter.

Adding Search To Your Site (In 5 Minutes)

noreply@blogger.com (Jeff Blankenburg) — Wed, 04 Mar 2009 14:17:00 +0000

Many of us today have a website. Some of them function as blogs, some are link repositories, and some are just shrines to our interests, but all of them have content of some kind. And when people come to our site, they want to be able to find the content they're looking for:

"Where is that great article he wrote comparing the Zune to the iPod?"

"I want to find that article he wrote on tips for new Twitter users. Where do I start?"

This article is about adding that functionality to your site, for FREE, in about 5 minutes. There's only THREE steps, in fact. And believe it or not, this simple, free solution is from Microsoft. There is a Google solution as well, but requires API keys, and a more intimate knowledge of Javascript and writing code.

So where do I start?

You can start here: http://search.live.com/siteowner. The rest of my example will walk you through the "Advanced Search Box" option, but there is also a "Basic Search Box" as well.

Step 1: Pick a search type

In this first step, you need to choose a "Display Name" for your search box, as well as the site you want to search. In my case, I am going to use jeffblankenburg.com. I also have another website at juxtaposeblog.com that is a little outdated, but has some good content as well. I clicked the "Add Another Site" button, and now my box will search both sites.

Once you've got your site entered, you can already test your search box. There's a button the bottom right side of the screen. Once you're done, you can click Next. (If you're interested in the Search Macros that are available, you can read about them here.)

Step 2: Customize it

This step just allows you to choose a size and color for your search box. I went with Blue, but there's a few other colors for you to choose as well. Make your choices, and proceed to the next page. That's where you'll get your HTML for your web site.

Step 3: Copy the HTML snippet

This step is as straighforward as the title. Copy the HTML they provide you, and paste it into your pages. In my case, I just added it to the right navigation of my Master Page, and it was magically on every page of my blog. Hopefully it's that simple for you as well. You can see my new search box on the top right side of my blog.

Speaking Opportunities Abound in the Heartland!

noreply@blogger.com (Jeff Blankenburg) — Thu, 26 Feb 2009 18:03:00 +0000

Do you have an idea for a talk? Maybe you just made some major strides with jQuery on your current project. Maybe you just found a great way to dynamically create XAML objects. Maybe you built a WPF framework. Whatever your current accomplishments, you've got a story to tell. So why not tell it?

There are several great conferences coming up in the next few months, and most of them are still looking for speakers. What's holding you back? You're an expert on something, so share that expertise with your community! It will be well received and greatly appreciated.

Here's a quick list of the events that are coming up, and how to get on the speaker lists that are still open.

Cincinnati Silverlight Firestarter

March 28, 2009, Mason, OH - This event will be held at the Microsoft office in Mason, OH. It will cover the basics of getting started with Silverlight, including XAML, Expression Tools, and server communication basics.

Click here to register, and for more information on the event.

Central Ohio Day of .NET

April 18, 2009, Wilmington, OH - This event is taking place at the Roberts Centre, right off of I-71, between Cincinnati and Columbus.

Click here to submit a topic to speak on.
Click here to read more about the event.

Kalamazoo X Conference

April 25, 2009, Kalamazoo, MI - The Kalamazoo X Conference intends to uniquely complement standard technical conferences by enabling attendees to boost their process, design, and communication skills. I'm looking forward to this one.

Click here to read more about the conference.

CodeStock

June 26-27, 2009, Knoxville, TN - This is the second year of CodeStock, and they've even added an extra day this year. It will be held at Pellissippi State University, and will certainly be another great event.

Click here to get involved as a speaker.
Click here to get more information about the event.

DevLink

August 13-15, 2009, Nashville, TN - This huge event is being held at Lipscomb University, and is anticipating as many as 800 attendees. Last year, there was a bus chartered to bring people to Nashville from as far as Grand Rapids, MI. Expect a "who's who" of software developers to be in attendance at this event.

Click here to become a speaker and to learn more about DevLink.