AListForEverything

How Styles and ControlTemplates Work: The Control Contract

snyhol — Mon, 26 May 2008 22:25:33 -0700

TECHNOLOGY USED: SILVERLIGHT 2, BETA 1

I recently posted some simple examples that demonstrate the power of Styles and ControlTemplates to skin your Silverlight applications. Now let's talk about how it works. Controls can be built to separate their visual appearance (i.e., the rectangular shape) from their behavior (i.e., firing a Click event). This separation is facilitated with a "control contract" that implements the "parts control model." This approach separates the appearance of the control into TemplateParts that can be replaced via ControlTemplates. The contract specifies the following three items:

Public properties that can be set using Styles or inline property assignments
- Defined as public DependencyProperty
UIElement objects that define the appearance
- Defined with TemplatePart attributes
Storyboard objects that define how the control changes appearance in response to events
- Defined with TemplatePart attributes

The Styling and Templating Overview provides this simple example of a control contract:

        [TemplatePart(Name = "RootElement", Type = typeof(FrameworkElement))]
        [TemplatePart(Name = "FocusVisualElement", Type = typeof(FrameworkElement))]

        [TemplatePart(Name = "Normal State", Type = typeof(Storyboard))]
        [TemplatePart(Name = "MouseOver State", Type = typeof(Storyboard))]
        [TemplatePart(Name = "Pressed State", Type = typeof(Storyboard))]

        public class MyButton : Control {
            public static readonly DependencyProperty TextProperty;
            public static readonly DependencyProperty ForegroundProperty;
            public static readonly DependencyProperty FontSizeProperty;

            public string Text { get; set; }
            public Brush Foreground { get; set; }
            public double FontSize { get; set; }

        }

Learning about the control contract, or parts control model, will provide you with a deeper understanding of Styles and ControlTemplates. New controls should be written with a control contract to allow others to skin them.

How to Type Spanish Characters

snyhol — Mon, 26 May 2008 22:22:00 -0700

Sometimes you need to type characters that are not on an English-based keyboard. For example, if you need to type the word "Español" with a tilde accent over the "n" - or other Spanish words, like "¡Sí!" or "¿Como estas?" You can use special key sequences to add those characters. The sequence you use depends on the operating system and application you are using. Below is a reference for adding Spanish characters. I also included links to good references that explain how to add other characters and symbols, like ô, æ, «, £, ÷, ½, ©, and many more.

Method #1: Windows computer, Microsoft Word

Reference: http://tlt.psu.edu/suggestions/international/accents/codeword.html

Letters that use the “Tilde” accent, like ñ:

press and hold the following keys << CTRL >> + << SHIFT >> + << ~ >>
let go of those keys
press the << n >> key for lowercase, or press the << SHIFT >> + << N >> keys for uppercase

Letters that use the “Acute” accent, like á:

press and hold the following keys << CTRL >> + << ‘ >>
let go of those keys
press the << a >> key for lowercase, or press the << SHIFT >> + << A >> keys for uppercase

Letters that use the “Umlaut” accent, like ü:

press and hold the following keys << CTRL >> + << SHIFT >> + << : >>
let go of those keys
press the <> key for lowercase, or press the << SHIFT >> + <> keys for uppercase

Method #2: Windows computer, any program

Reference: http://tlt.psu.edu/suggestions/international/accents/codealt.html#accent

Follow these steps:

press and hold the << ALT >> key
while holding down the << ALT >> key, use the numeric keypad to type a special code
let go of the << ALT >> key

Here are the codes:

Letters that use the “Tilde” accent, like ñ:

Ñ 0209
ñ 0241

Letters that use the “Acute” accent, like á:

Á 0193
á 0225
É 0201
é 0233
Í 0205
í 0237
Ó 0211
ó 0243
Ú 0218
ú 0250
Ý 0221
ý 0253

Letters that use the “Umlaut” accent, like ü:

Ü 0220

ü 0252

Method #3: Macintosh computer, any program

Reference: http://tlt.psu.edu/suggestions/international/accents/codemac.html#accent

Letters that use the “Tilde” accent, like ñ:

press and hold the following keys << OPTION >> + << N >>
let go of those keys
press the << n >> key for lowercase, or press the << SHIFT >> + << N >> keys for uppercase

Letters that use the “Acute” accent, like á:

press and hold the following keys << OPTION >> + << E >>
let go of those keys
press the << a >> key for lowercase, or press the << SHIFT >> + << A >> keys for uppercase

Letters that use the “Umlaut” accent, like ü:

press and hold the following keys << OPTION >> + <>
let go of those keys
press the <> key for lowercase, or press the << SHIFT >> + <> keys for uppercase

Conclusion

Yay, now you have the tools to make non-English letters and special characters. It's a bother to have to look up and enter the secret key-press sequences... but it's a lot better than not being able to use them at all! For web developers, check out HTML Codes for Spanish.

Solar Shooter: A Gas Guzzler's Nightmare

snyhol — Fri, 23 May 2008 16:54:00 -0700

Frustrated by the high gas prices at the pump? Blow off some steam playing “Solar Shooter: A Gas Guzzler’s Nightmare.” In this shoot’em up arcade game, it’s you vs. the gas guzzlers. Use your solar powered, electricity shooting hover car to face off against the single occupant commuter, the angry guy in the SUV, and even the dreaded gas station pump. Gotta zap them before they soak you.

Solar Shooter is the first game posted to www.SL42.com. The first version of the game was submitted to the "RIA Run" competition hosted by Internet.com and Microsoft.com. It was selected as a finalist!!! Support my entry and play the RIA Run Contest version between May 16, 2008 and June 5, 2008.

Solar Shooter was built with Silverlight 2. I previously posted a complete listing of Silverlight features used in the game.

Download the source code using this link: SolarCarBeta1.zip

Please post comments about Solar Shooter here. The next version of Solar Shooter is scheduled to include:

Bosses
Special weapons
Brakes for the car
Sound effects for ammo and explosions
Level unlock codes
Global scoreboard

I look forward to posting the next version.

Silverlight Skinning with ControlTemplates

snyhol — Thu, 22 May 2008 13:52:53 -0700

TECHNOLOGY USED: SILVERLIGHT 2, BETA 1

In a recent post, I showed how Styles can be used to change one property of the existing appearance of a control, similar to CSS. For example, the Button has a Foreground property that can be used to change the color of the text it contains. You can use a Style object to set this foreground color for several Button controls. Styles have limits. You cannot use a Style to change the shape of a Button. A Style cannot make a rectangular-shaped button look round.

That's where the ControlTemplate is useful. It was designed specifically for changing the shape of a control. It can be used to change that rectangular-shaped button into a round one, as Jesse Liberty demonstrated in his Styles and Templates tutorial. Another excellent post that clearly explains ControlTemplates is Creating a Custom Skin by Matt Berseth.

Some things to notice about Skinning with a ControlTemplate are:

ControlTemplates are written inside a Style definition, using Property="Template".
You can mix "normal" Styles and ControlTemplates in the same Style definition. The "normal" Styles become the default Style for your skin.
The Setter's value must be set to a ControlTemplate.
The root visual element in the ControlTemplate must be named x:Name="RootElement"
You can use the property values assigned by the consumer of the template, using the {TemplateBinding PropertyName} syntax.
Storyboards are used to change the appearance of the control when the visual state changes, for example during the MouseOver event.
The normal state is the default and starting state of the control. I did not need to provide any animation for this state.
You can use DoubleAnimation, ColorAnimation, and ObjectAnimationUsingKeyFrames.
You can animate attached properties, using syntax like (Rectangle.Stroke).(SolidColorBrush.Color).
You cannot use TemplateBinding values in animations.
You cannot have two objects in the ControlTemplate with the same x:Name.
Objects with special names defined in the control contract will receive special functionality from the base control's behavior. For example, a HyperlinkButton's FocusVisualElement will be invisible unless the control has focus... at which time, the FocusVisualElement becomes visible.

An Example Template Skin for HyperlinkButton

The typical example is making a button round. To make my example a little more interesting, I'll do something different: adding a border to a HyperlinkButton, taking care to provide visual clues for all states defined in the HyperlinkButton's control contract: having focus, MouseOver, Pressed, and Disabled. This skin allows for resizing and uses the values assigned by the consumer of this ControlTemplate.

    <Application.Resources>
        <Style x:Key="HyperlinkWithBorder" TargetType="HyperlinkButton">
            <!-- SET DEFAULT STYLE -->
            <Setter Property="IsEnabled" Value="true" />
            <Setter Property="IsTabStop" Value="true" />
            <Setter Property="Foreground" Value="#FF417DA5" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="TextAlignment" Value="Left" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Top" />
            <Setter Property="TextWrapping" Value="NoWrap" />
            <Setter Property="FontSize" Value="11" />
            <!-- Cannot currently parse TextDecorationCollection type in XAML so it's being set in code -->
            <!-- <Setter Property="TextDecorations" Value="Underline" /> -->
            <!-- Cannot currently parse FontFamily type in XAML so it's being set in code -->
            <!-- <Setter Property="FontFamily" Value="Trebuchet MS" /> -->
            <!-- Cannot currently parse FontWeight type in XAML so it's being set in code -->
            <!-- <Setter Property="FontWeight" Value="Bold" /> -->
            
            <!-- DEFINE CONTROL TEMPLATE -->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="HyperlinkButton">
                        <Grid x:Name="RootElement" 
                       Cursor="{TemplateBinding Cursor}">
                            <Grid.Resources>
                                
                                <!-- Visual states of the template -->
                                <Storyboard x:Key="Normal State" />
                                
                                <Storyboard x:Key="MouseOver State" >
                                    <DoubleAnimation Duration="0:0:0" 
                                   Storyboard.TargetName="FaderRect"  
                                   Storyboard.TargetProperty="Opacity" 
                                   To=".1" />
                                    <DoubleAnimation Duration="0:0:0" 
                                   Storyboard.TargetName="VisualPopRect"  
                                   Storyboard.TargetProperty="Opacity" 
                                   To="1" />
                                </Storyboard>
                                
                                <Storyboard x:Key="Pressed State" >
                                    <DoubleAnimation Duration="0:0:0" 
                                   Storyboard.TargetName="FaderRect"
                                   Storyboard.TargetProperty="Opacity" 
                                   To=".3" />
                                    <DoubleAnimation Duration="0:0:0" 
                                   Storyboard.TargetName="VisualPopRect" 
                                   Storyboard.TargetProperty="Opacity" 
                                   To="1" />
                                </Storyboard>
                                
                                <Storyboard x:Key="Disabled State" >
                                    <DoubleAnimation Duration="0:0:0" 
                                   Storyboard.TargetName="FaderRect" 
                                   Storyboard.TargetProperty="Opacity" 
                                   To=".2" />
                                    <ColorAnimation Duration="0:0:0" 
                                   Storyboard.TargetName="FaderRectColor" 
                                   Storyboard.TargetProperty="Color" 
                                   To="Black" />
                                    <ColorAnimation Duration="0:0:0" 
                                   Storyboard.TargetName="BorderRect" 
                                   Storyboard.TargetProperty="(Rectangle.Stroke).(SolidColorBrush.Color)" 
                                   To="Black" />
                                </Storyboard>
                                
                            </Grid.Resources>
                            
                            <!-- creates the solid line "border" of the HyperlinkButton -->
                            <Rectangle x:Name="BorderRect" 
                           Width="{TemplateBinding Width}" 
                           Height="{TemplateBinding Height}" 
                           Stroke="{TemplateBinding Foreground}" 
                           Fill="{TemplateBinding Background}"/>
                            
                            <!-- Container for positioning HyperlinkButton content -->
                            <StackPanel Orientation="Horizontal">
                                
                                <!-- invisible rectangle used to leave space for the highlighter (VisualPopRect) -->
                                <Rectangle Width="{TemplateBinding Height}"
                               Height="{TemplateBinding Height}" />
                                
                                <!-- HyperlinkButton content -->
                                <ContentPresenter x:Name="Normal"
                               Background="{TemplateBinding Background}"
                               Content="{TemplateBinding Content}"
                               ContentTemplate="{TemplateBinding ContentTemplate}"
                               FontFamily="{TemplateBinding FontFamily}"
                               FontSize="{TemplateBinding FontSize}"
                               FontStretch="{TemplateBinding FontStretch}"
                               FontStyle="{TemplateBinding FontStyle}"
                               FontWeight="{TemplateBinding FontWeight}"
                               Foreground="{TemplateBinding Foreground}"
                               HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                               Padding="{TemplateBinding Padding}"
                               TextAlignment="{TemplateBinding TextAlignment}"
                               TextDecorations="{TemplateBinding TextDecorations}"
                               TextWrapping="{TemplateBinding TextWrapping}"
                               VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
                               Margin="2,2,2,2" />
                            </StackPanel>

                            <!-- Focus indicator, inside dashed line -->
                            <Rectangle x:Name="FocusVisualElement"
                           Margin="2" Stretch="Fill"
                           Stroke="{TemplateBinding Foreground}" 
                           StrokeThickness="1" StrokeDashArray="1 2"
                           />

                            <!-- Objects for highlighting changing visual states -->
                            
                            <!-- Rect to the left of the content -->
                            <Rectangle x:Name="VisualPopRect"
                           HorizontalAlignment="Left"
                           Height="{TemplateBinding Height}"
                           Width="{TemplateBinding Height}"
                           Fill="{TemplateBinding Foreground}"
                           Opacity="0"/>
                            
                            <!-- Make the control appear faded -->
                            <Rectangle x:Name="FaderRect"
                           Width="{TemplateBinding Width}"
                           Height="{TemplateBinding Height}"
                           Opacity="0">
                                <Rectangle.Fill>
                                    <SolidColorBrush x:Name="FaderRectColor" 
                                   Color="White" />
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

Applying the Template

Using a ControlTemplate is as simple as using a Style... because a ControlTemplate is basically part of a Style. Just use databinding to a StaticResource for linking the Style property to the ControlTemplate. The following code shows three sample HyperlinkButtons: one without the ControlTemplate, one using the default ControlTemplate Values, and one overriding the ControlTemplate's default values.

    <Grid x:Name="LayoutRoot" Background="White">
        
        <TextBox Width="100" Height="20" FontSize="10" Margin="0,0,200,150" Text="Click &amp; Tab" />

        <HyperlinkButton Content="Default Appearance" Margin="0,0,100,50" Height="20" Width="200"/>

        <HyperlinkButton Content="Using ControlTemplate" Margin="0,50,100,0" Height="20" Width="200" Style="{StaticResource HyperlinkWithBorder}" />

        <HyperlinkButton x:Name="LinkToDisable" Content="ControlTemplate with inline properties" Margin="0,150,50,0" Height="20" Width="250" Style="{StaticResource HyperlinkWithBorder}" Background="PapayaWhip" Foreground="Sienna"/>
        
        <ToggleButton Content="disable it" Margin="280,150,0,0" Width="60" Height="20" Click="Toggle_Click" x:Name="ButtonThatDisablesLink" ></ToggleButton>
    
    </Grid>

And, finally, here is the Silverlight example you can interact with, to see how it looks when finished.

To review the MouseOver state, move your mouse around the example.
To preview the Pressed state, click on the links.
To preview the Disabled state, click on the button.
To preview the "has focus" state, click in the textbox and tab to the links.

If you can't see the Silverlight example, below is a screenshot that illustrates the unstyled HyperlinkButton with focus, the ControlTemplate HyperlinkButton with MouseOver, and the second ControlTemplate HyperlinkButton as disabled.

The ControlTemplate is a powerful tool. It can be used to make drastic changes to the way your application looks. For example, in the Solar Shooter game, I made buttons that look like a car, a lightning bolt, and an explosion. ControlTemplates can be more difficult to build than Styles because they include more parts and also because they don't always throw errors - which makes debugging much harder. But the extra work is worth it... and once you learn the concepts, it does get easier. ControlTemplates are one of the Silverlight tools that have the potential to dramatically improve web applications. What will you use them for?

Low Cost Ink Replacements from Omnipro

snyhol — Thu, 22 May 2008 13:19:17 -0700

I've always been shocked that the price of printers is low and the price of ink is high. The replacement ink costs almost as much as the printer!!! Even at retail prices, purchasing replacement ink just two times will end up costing more than the printer. Can you believe that??!!

For example, I bought my color inkjet printer on sale for under $100. The replacement ink costs about $75. It's painful to buy expensive ink for a cheap printer! We also have a laser printer that can also be replaced for under $100. The ink for that printer also costs around $75.

I've stayed away from refurbished or refilled inks in the past because I heard they aren't as good or could even damage the printer. But when the retail ink costs almost as much as the printer, I'm almost tempted to just get a new printer each time instead of just an ink cartridge.

I finally broke down and started shopping online for the best deals on ink. I have found Omnipro to have consistently low prices across their products. I bought the cheapest replacement inks for both our inkjet and laser printers. The inkjet replacement was $15 and the laser cartridge replacement was $25, making a savings of $110 on this purchase! They were all remanufactured cartridges, but they were so cheap, it was worth it. I don't really need top-end, perfect colors when printing. Assuming that the cartridges work good enough, each time I buy ink from Omnipro, I save enough money to replace the whole printer.

Click here to shop at Omnipro.

I have been satisfied with the pages I've printed with their ink. It has been good enough. I will continue to buy ink from them. Chances are, you can save $$ too!

Silverlight Named Colors

snyhol — Tue, 20 May 2008 21:40:50 -0700

One MSDN resource I use regularly is the page about named colors. It is helpful when I want to quickly add a color to my application without going through the RGB color picker. This reference is good because it provides a screenshot example of each named color, along with its official predefined color name and corresponding RGB values.

This page is part of the Silverlight 1.0 documentation. I use this one because I haven't found a similar reference for Silverlight 2. Besides, the 1.0 color names still work in Silverlight 2.

It would be cool if Visual Studio provided color swatches in the IntelliSense. Here's the current IntelliSense:

Here's what it could look like:

Neither Blend nor Design support setting colors by their named values. Of course, you can do this in XAML in Blend.

Perhaps the lack of support for named colors is because most "real" designs will use colors defined by their RGB values. It would still be cool to have this resource integrated into the tools rather than having to look it up from documentation.

Carpodding

snyhol — Tue, 20 May 2008 21:36:51 -0700

What is carpodding? It is a term I made up to describe listening to podcasts while driving. It's a versatile word. You can get creative with it. In essence, carpodders are people who carpod.

Unfortunately, I can't claim to be the first person to invent this word. It is defined at techweb and a couple other places. It's not defined on wikipedia, dictionary.com, or even urban dictionary... yet.

Most people write about carpodding because they do it while they commute to work. There are even podcasts called Monday Morning Commute or My Daily Commute.

Some of you might be wondering, just how do you carpod? You need three things:

a portable music player (probably an iPod)
podcasts in your player (probably by downloading MP3 audio files and importing those files into your player)
the ability to listen to your podcasts while driving

And others of you are wondering, how do I carpod safely? After all, it's against the law to be driving around with headphones on both ears. I guess the simplest way would be just use one headphone. You could buy a speaker for your MP3 player. I chose to buy a fairly cheap car radio with a headphone plug and connect it to my iPod. There are much fancier solutions, like car radios that directly plug into and control an iPod.

What would you listen to while you carpod? Pretty much anything! Check out these blogs and articles about finding podcasts. Some even write about free audio book resources.

Sometime soon, I'll share my list of favorite podcasts. That's a problem with podcasts... they are slow to review because you can't skim them. As Scoble said, they're great for places where you can't read... like the car.

Happy carpodding!

p.s. It would be really cool if the podcasts were already automatically in your car stereo - and you could bypass the player, downloading and plugging into the stereo!

Silverlight Skinning with Style

snyhol — Mon, 19 May 2008 16:19:03 -0700

While I was developing the Solar Shooter game, I wanted to add "control template and skinning support." What is that? Silverlight uses the "WPF-based" UI framework, which means that the appearance is separate from the behavior. This is implemented through Styles and Control Templates. They both provide a central place where you can define the appearance of a control. Basically, Styles change one property of the existing appearance of the control, while ControlTemplates replace the entire appearance.

Styles are very similar to CSS. Styles can be used to customize the default appearance of a control. The Silverlight SDK provides a very clear explanation of styles and is available online. If you are completely new to Styles, read Jesse Liberty's Styles and Templates Tutorial. For example, you can use a Style to make a group of TextBoxes have a yellow background. Styles can be defined wherever you have <Resources> (i.e., control resources, grid resources, UserControl resources, App resources, etc.). Basically, a Style is used to set a collection of properties for a specified type of control.

As a simple example, let's use Styles to apply a green theme to a standard login form. Though this example is very simple, it demonstrates using Styles to change the appearance of multiple controls from one place. If we wanted to reduce the size of the labels to 13 points, we would only have to make that change in one place. We can also feel confident that all of our labels have a similar appearance because they all use the same Style resource.

Here is a screenshot of the form before applying Styles:

Here's the code I used to apply a green theme to change the appearance of controls on this login form. This example uses both named colors and RGB-defined colors to achieve a consistent visual design.

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
        <Style TargetType="TextBlock" x:Key="ColoredTextBlock">
            <Setter Property="Foreground" Value="SeaGreen" />
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="FontStyle" Value="Italic" />
            <Setter Property="FontSize" Value="14" />
        </Style>
        <Style TargetType="TextBox" x:Key="HighlightedTextBox">
            <Setter Property="Background" Value="MintCream" />
            <Setter Property="Foreground" Value="#164A2D" />
            <Setter Property="BorderBrush" Value="#164A2D" />
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="12" />
        </Style>
        <Style TargetType="Button" x:Key="HighlightedButton">
            <Setter Property="Background" Value="SeaGreen" />
            <Setter Property="Foreground" Value="#164A2D" />
            <Setter Property="FontSize" Value="14" />
        </Style>
    </Grid.Resources>
    <TextBlock Style="{StaticResource ColoredTextBlock}" Margin="10,30,0,0">Username:</TextBlock>
    <TextBlock Style="{StaticResource ColoredTextBlock}" Margin="10,65,0,0">Password:</TextBlock>
    <TextBox x:Name="UserName" Style="{StaticResource HighlightedTextBox}" Width="100" Height="25" Margin="10,0,0,20" Text="Demo" />
    <TextBox x:Name="Password" Style="{StaticResource HighlightedTextBox}" Width="100" Height="25" Margin="10,50,0,0" Text="****" />
    <Button x:Name="SubmitButton" Style="{StaticResource HighlightedButton}" Width="60" Height="30" Margin="210,50,0,0" Content="Submit" />
</Grid>

Here's the result of using Styles:

As you can see, Styles are an important Silverlight / WPF concept to know. It might seem confusing if you haven't used them before, but they are really simple once you understand them. Styles are a powerful way of organizing your code, making it easier to maintain, and also help to enforce a consistent appearance across your application(s). Have fun coding with Style!

$51,381 in Prize Money at 99designs

snyhol — Mon, 19 May 2008 12:19:00 -0700

I recently heard about 99 designs. It is kind of like a contractor website for graphic designers. Their goal is to help people "buy and sell designs." The way it works is that someone will launch a contest where they need a graphic design. When you create a contest, you offer a cash prize for the winning submission. You can also offer non-cash prizes to make it interesting. Designers create and submit graphics for you. You pick a winner and pass out the prize money.

The business model used by 99 designs is based on the concept of crowdsourcing - outsourcing a unit of work to a large group of people. This service is a rebranded version of the original SitePoint contests. The person outsourcing the work pays a $39 fee to 99 designs and at least a $50 prize to the contest winner. You can only ask for one graphic per contest. For example, a business card and website logo would be two separate contests.

This money message at the footer caught my attention:

So far, it sounds like a good concept, right? You can tell my bias. I'm not a designer. I am a developer / business person who needs to purchase graphics. It sounds like a cheap way to choose from a bunch of custom designs, which were all custom drawn for me. Sure, most of them will suck and some of them will be good. Just pick from the good ones. Great concept.

That is, until I started hearing what other designers had to say about 99 designs. In an Open Designs forum, Sean Pollock said that most of the designers use the contests for practice. Some designers, like Chris at Positive Space, claim that sites like this devalue the graphic design industry. Kevin Potts at GraphicPush criticizes that designers are "doing spec work for third-world prices with no option for copyright retention."

I thought it might be fun to play around with graphic design and enter one of their contests. The contest I looked at already had more than 50 entries. My chances of winning the prize are not good. This is just like what Sean Pollock described. I would be using the contest as a training ground to practice my skills... or as a playground just to have fun... but not as a serious money making effort. At best, it would be a side gig.

I disagree with the criticism that it is underpriced. It's not dirt cheap... Free clip art is dirt cheap. Some people are paying $500+ for one graphic. The cheapest you can get one graphic at 99 designs is $89. For a hobbyist designer, the winning prize money could be a nice side gig.

For hobby endeavors, small businesses, or startups, using the "less than top quality" graphics from 99 designs will be good enough. It can keep costs down. Does this devalue the graphics community? I don't think so. I didn't see big companies like Nike, Microsoft, or Ford launching contests on this site. Companies that have the money to hire top designers are not replacing their designers with low cost services like this.

99 designs fits a specific niche, where people on a budget can connect with designers willing to work for cheap.

Silverlight 2 Features Used in My RIA Run Game

snyhol — Fri, 16 May 2008 19:37:00 -0700

TECHNOLOGIES USED: Silverlight 2 Beta 1, Expression Blend 2.5 Beta, Expression Design 2 Beta, Visual Studio 2008

I decided to enter the RIA Run contest, mostly to learn Silverlight 2 while building casual games. Since I was already learning how to make a "shoot'em up" type of game, I kept going with it - but added more interesting characters. Upon reading the contest description and rules, I realized that this competition was perhaps more about showcasing the new features in Silverlight 2 than about the gameplay. It makes sense - this is a Microsoft sponsored event and they always want to promote their new technologies. For this version of my game, I made a strategic decision to focus more on the technology than on the gameplay.

The game I made is called Solar Shooter: A Gas Guzzler's Nightmare. Part of my score in the competition will be based on how many people play the game on the devx.com website. As soon as I get my link, I will post it right here. In the meanwhile, you can play the game on my new SL42.com games website.

UPDATE: Solar Shooter was selected as a finalist! From May 16 to June 5, 2008, support my entry into the contest by playing Solar Shooter at devx.com.

Here's a brief description of the game:

Frustrated by the high gas prices at the pump? Blow off some steam playing “Solar Shooter: A Gas Guzzler’s Nightmare.” In this shoot’em up arcade game, it’s you vs. the gas guzzlers. Use your solar powered, electricity shooting hover car to face off against the single occupant commuter, the angry guy in the SUV, and even the dreaded gas station pump. Gotta zap them before they soak you.

The entry form asked me to briefly describe "How does this game use Silverlight 2.0 Beta features? What quirks, tips, or gotchas did you uncover?" They were looking for a short description... but I had way more to say about Silverlight 2 features than could fit into 60 words. Below is my complete list.

Silverlight 2 Beta 1 Features Used in Solar Shooter

Managed code. The application was built entirely within the Silverlight framework. No HTML or Javascript needed. BCL and CLR all the way!!! Three cheers for events, delegates, strongly typed objects, object inheritance and composition.

Layout Management. The game makes extensive use of the built-in layout management controls (i.e., Grid, StackPanel, Canvas) in addition to the built-in layout management capabilities.

RotateTransforms are used for rotating the game characters (also known as "sprites")
TranslateTransforms are used to add a shadow to text
A ScaleTransform is used to resize the game when it's parent browser window resizes
A Border was used to create rounded corners on for the in-game score
ZIndex, Opacity and Visibility are used to manage the dynamic display
Margin is typically used to position objects within a grid cell. To remember what the 4 numbers mean when setting margins in XAML (i.e. Margin="4,12,30,2") - think of the acronym "LTRB," which sounds like "Letter B," and is short for Left,Top,Right,Bottom.

Data Binding. The game uses databinding whenever possible to simplify connecting the UI to several data sources.

Two-Way data binding is used to manage the audio effects. The MediaElement playing the sounds is bound to a toggle button that can be used to mute them. Since there is no way to automatically databind the two properties directly, I made a bindable CLR class (implements INotifyPropertyChanged) that acts as a binding surrogate to connect them.
One-Way data binding is used for the score and level text in TextBlocks. In both cases, I wrote Converters to change the data content into text to show on screen. For example, one converter modifies the score to include the thousands separator.
One-Way data binding is also used to display the ObservableCollection of high scores in a DataGrid. A Factory Pattern is used to allow for multiple scoreboards (i.e., local, server, etc.)

Control template and skinning. This game uses both Styles and ControlTemplates.

Styles are used to format the text on the instructions page.
ControlTemplates are used to make the custom round buttons for Mute, closing the instructions / high score screens, on the pause screen and on the game over screen. They were also used to make irergular shaped buttons on the main screen. The button on that screen are shaped like a car, lightning bolt, and an explosion.
ControlTemplates are also used to provide animated effects for events like mouseover or pressed.
Making templates from Expression Design was harder than I would have liked... but much easier than trying to hand-code the vector graphics. Some of the gotchas I encountered while exporting the graphics follow. Inside a ContentTemplate, you cannot have two controls with the same x:Name... but Design likes to export XAML with the x:Name specified. I found it easiest to export the entire graphics for the different states of my controls... leave them in the <Canvas> objects as exported by Design... and toggle the opacity of those Canvas objects in the event storyboards. Probably not the best performance - fairly fast to build!

Core Form Controls. Several controls are used in making this game.

TextBlocks are used for the current score, level transitions, game over screen, and instructions screen.
Buttons are used for most user interaction: show screens, start a new game, etc.
A WatermarkedTextbox is used to get the user's name for display on the high scores list.
A ToggleButton is used to allow the user to mute the sound.

Build-In Layout Management Controls. The game makes extensive use of Canvas controls (included in Silverlight 1.0) as well as the newly introduced Grid and StackPanel controls.

The Canvas is the lightest weight control and I used it whenever I could. It's worth pointing out that it is also the only layout control with a ZIndex attached property.
The Grid makes some layout tasks extremely simple and is used as the main "LayoutRoot" container. The Rows and Columns are used for placing the items in the top bar (score + lives), side bar (volume control), and bottom bar (links).
The StackPanel is used whenever items could just flow down or across the screen... for example the "number of lives" indicator.

Common Functionality Controls. The game used other controls where it made sense.

MediaElement is used to play the background music and also could be used for character sounds.
Hyperlink buttons are used to provide the game player with access to information from another website.

Data Manipulation Controls. Games typically don't use as much data as business applications, so there isn't much need for controls that handle data. However, the "high scores" listing does provide one place to show off some data manipulation.

A DataGrid is used to display data from multiple objects (score and user objects). Through databinding, the underlying data source could be edited by adding a new score at the end of a game or deleting a score by pressing the DELETE key.

Collections. Collections are used for keeping track of game objects and databinding the saved scores.

Managing game objects (sprites) was done by adding and deleting them from a List<SpriteBase> collection.
One trick to get around was dynamically re-sorting an ObservableCollection when adding a new item. I created a new subclass to handle this functionality.

I/O & Local Storage. Scores are saved to the computer in a persistent location. In other words, they are available across browser sessions.

Saving scores to the computer uses a Silverlight concept called Isolated Storage. This is functionality a programmer can use to access a sandboxed location on the user's hard drive. Data can be saved to the disk and retrieved from the disk using I/O operations. To imlpement this functionality, I use IsolatedStorageFile, IsolatedStorageFileStream, StreamReader, and StreamWriter objects.
Local storage is also used to save user settings between sessions. Specifically, the ApplicationSettings object is used to save the player's name. It was tricky to store a CLR object in both a bindable Resource (defined in XAML) and in the ApplicationSettings. Basically, I had to use the Decorator Pattern to consolidate the functionality. Also, only serializable objects can be put in the ApplicationSettings.

Generics. Generics are a useful tool in making comlpicated coding tasks simpler.

Generics are used to help in managing the collections of game characters (sprites). For example, the collection that kept track of the enemies on the screen is defined as a List<SpriteBase>... but contains several types of objects: EnemyOilBarrel, EnemyGasTanker, and EnemyGasCan.
Generics are used with databinding to a collection.

Threading. The new DispatcherTimer class was THE fundamental concept behind making this game work.

In Silverlight 1.0, developers would use a Storyboard object to manage the game loop (the core component of the game engine that makes sure game actions happen smoothly.
This game uses the Silverlight 2 DispatcherTimer class to run the game loop. DispatcherTimer is used to run a Timer object on the UI thread. The Interval is set to TimeSpan.FromMilliseconds(0) for automatically smooth animations. The Tick event is used to manage critical actions, like making random enemies, making hero and enemy ammo, moving heroes, enemies, and ammo, collision detection, handling user input (keystrokes) and also initiating game events like changing levels.
A wrapper class is used with the DispatcherTimer to convert game action to elapsed time, making the gameplay independent of CPU speed.

Globalization. This game incorporates globalization by creating a framework for globalization and showing culturally specific number formatting on the current score and in the high scores table.

The game integrates with ASP.NET for initial globalization support. ASP.NET is used to retrieve the culture settings from the browser and pass them to the Silverlight plug-in's Init property. The Silverlight project grabs the setting in App.xaml and stores the browser-based culture setting in an application Resource. It also sets the UserControl's Language DependencyProperty.
This framework can be expanded by incorporating RESX resource files to globalize the text displayed on screen. All text was displayed in bindable TextBlock controls to aid in this effort. No text was stored inside a graphic (in Expression Design, select Export Text as TextBlock).
This framework can also be extended to allow the user to override the initial culture setting by selecting another language from a Configuration or Main Menu screen.
Note that the DataGrid showing a date inside a TextBlock automatically formatted the date to comply with cultural sensitivity. I did not have to add code to explicitly format the dates. I just had to set the current culture in the UserControl's Language DependencyProperty.

LINQ to XML. The game uses XML to store the scores in the Isolated Storage.

To simplify the serialization and deserialization of data stored to the Isolated Storage, LINQ to XML is used. I found the XDocument object model easier to work with than XMLWriters for serialization. Pulling out the data was even easier with a XDocument.Parse() method to extract the XML tree and then a LINQ query to convert it to CLR objects.

OOP. This game makes use of some object oriented concepts.

Interfaces were used to support the creation of different scoreboards. For example, one scoreboard could use scores saved to "my computer" and a different scoreboard could use scores saved on a public server.
Inheritance is used on the UserControls to consolidate the common base functionality for sprites. Since they are visual elements, putting them in UserControl containers made sense. This approach was tricky to implement and worked, but meant losing designer support in Expression Blend for any subclassed UserControl.
A Decorator Pattern is used to consolidate an object defined in the UserControl.Resources markup with an object saved in the IsolatedStorage with ApplicationSettings.

Keyboard Input. The game action interacts with the user via keyboard input.

The System.Windows.Input.Key enum was added in Silverlight 2 and it is nice!
Since keyboard input is used, the application cannot be run in true "FullScreen" mode. Silverlight does not allow keyboard input while in FullScreen. A workaround for this is using 100% of the available browser window and letting the user maximize the browser.

Mouse Input. The game uses mouse input mostly for administrative tasks.

Mouse events are used to capture button clicks.
Mouse actions are automatically captured by the HyperlinkButtons.

Attached Properties, Dependency Properties, etc.

Attached Properties are commonly used in conjunction with layout management support. They are seen in properties like Canvas.Top.
Dependency Properties are used in data binding situations, using framework methods like GetValue and SetValue.

XAP Packaging. This game was deployed as a XAP compressed file.

The XAP package was analyzed for size in KB. This was an important task because a smaller download size makes the applications more accessible to users with slower Internet connections. Here are some tips for reducing the XAP size:
- Use Expression Design tricks to compress the XAML graphics.
- Remove unneeded project references, like Syndication or XMLSerialization.
- Leave media files outside the XAP by marking them with a Build Action of None and Always Copy to the output directory. Manually copy them to the deployment server. This will increase the load time for your application because media files are typically not needed when the application first loads.

Audio Support. The game uses audio files to play background and special effects music.

The audio files are converted to compressed WMA format using Expression Encoder 2 Beta.
The files are deployed to the server outside the XAP.
The media is played using a MediaElement file. It is bound to other controls/objects, looped for continuous playback, and played from code in response to an event.
The audio files must be compressed in a compatible format. Expression Encoder is a good tool for the job. I got media errors when trying to play MP3 files compressed in Audacity.

Number Formatting. The number formatting classes of the framework are used to display the current score in a culture-specific manner.

C# Automatic Properties. For simple properties, my custom classes use the { get; set; } syntax.

C# Implicitly Typed Variables. For the LINQ to XML code, the var keyword is used to create imlicitly typed variables.

Error Handling. To assist in development and error reporting, I use global error handlers.

A global error handler is used in the App.xaml class: Application_UnhandledException
The plugin also provides an interface to pass errors to a JavaScript function.

Backgrounds: No DrawingBrush. A simple method to add a fancy background is to put vector graphics in a resource that is added as a DrawingBrush. Since Silverlight does not include this object, a workaround was to put the graphics in a container (UserControl, Canvas, etc.) and place that container behind everything else using the ZIndex property.

2D Animations. Aaah, one of the cornerstones of a Silverlight application.

Storyboard objects are used to animate the level transitions, the blinking car crash, the explosions, and much more. The Storyboards in this came are defined with DoubleAnimationUsingKeyFrame and SplineDoubleKeyFrame objects.
Game characters (sprites) are manually animated by setting their Canvas.Top and Canvas.Left attached properties to move them around the screen (game surface).

2D Vector Graphics. To take advantage of application resizing, all graphics in this game are vector graphics created in Expression Design.

Rectangle, Ellipse, and Path objects are used to draw the graphics. Path mini language was frequently used
LinearGradientBrush, RadialGradientBrush, GradientStop, Fill, Stroke are used to modify the appearance of the shape objects.

Text. Text is rendered through a variety of controls.

TextBlocks show read-only text, TextBoxes interact with the user, DataGrid and Buttons display other text for user interaction. Common formatting properties are used, like font size, alignment, font family, and font weight.

Garbage Collection.

The C# Using statement is used when working with Isolated Storage. The Using statement improves garbage collection, automatically making calls to the Dispose method.

End To End Experience with Expression Studio

Visual Studio 2008 is a good tool for writing code and also for writing XAML markup. However, it is not a strong tool for creating the dynamic layout, animations, fancy graphics, and multimedia necessary in a good game. For those tasks, Expression Studio makes a good complimentary toolset. Below are brief descriptions of my experiences using these products while making Solar Shooter.

Expression Blend 2.5 Beta. This tool was used alongside Visual Studio to develop the application.

It was better than Visual Studio when performing layout or animation tasks. It provides a rich controls palette and the properties panel was a good place to discover what I could do to a control. For editing raw XAML and C# code, Visual Studio was better (it includes intellisense for XAML!!).
Be cautious when using both tools simultaneously! It is easy to overwrite edits in one program with the other.
Blend provides an interactive designer surface, which provides a much nicer design experience than the current read-only designer in Visual Studio.
The Blend designer tends to throw more errors about the underlying CLR classes than the Visual Studio designer or even the runtime. For example, Blend expects Resources to either subclass from DependencyObject OR use the x:Key declaration.
Blend has an awesome feature that translates layout controls. For example, you can convert a Canvas containing vector graphics absolutely positioned with Top and Left coordinates into a Grid with positioning done by Margin.

Expression Design 2 Beta. All graphics used in this game are vector graphics created in Expression Design.

Expression Design is a much better tool than Expression Blend for creating and editing graphics. It is much more powerful and provides a more efficient design experience.
Since Expression Design 2 Beta was built to comply with Silverlight 1, importing the graphics as Silverlight XAML was not a completely smooth process. The XAML exported by Design needed to be manually edited to comply with Silverlight 2.
To optimize the export size from Expression Design, do not name objects, do not place objects in XAML layout containers, and leave text as Editable TextBlocks. Also, when building the objects, try to use the simplest shapes possible, minimize the number of nodes on paths, and avoid fancy Strokes. Using bitmaps (in "live effects", Fill, Stroke, etc.) might lead to unpredictable behavior when exporting to XAML vector based graphics.
To facilitate globalization, all text must be editable by code. Ideally, no text would be embedded in bitmap graphics or converted to paths in vector graphics.
One gotcha I discovered was that your vector graphics may extend outside of the slice and Design tries to solve this by putting a clipping mask on the parent canvas.

Expression Encoder 2 Beta. The audio files were converted to WMA format and compressed with Expression Encoder.

I was impressed with Encoder's interface. I was able to easily compress the audio files using WMA settings 16kbps bitrate, 22kHz sample rate, 16 bits per sample, and Mono channels. The compression rivaled MP3 compression from other programs... and worked seamlessly with Silverlight.

More Silverlight 2 Features

As if I didn't already use enough features, here are more that I would have implemented if I had more time:

Use a Checkbox control to filter the scoreboard to only show my scores.
Making the DataGrid (scoreboard) be re-sortable.
Use two DatePicker controls to filter the scoreboard to only show scores within a certain date range.
Use a Slider control to adjust the difficulty of the game.
Use a ListBox control to allow the user to change their language. (A DropDown control would be better, but that control was not included in Silverlight 2 Beta 1.)
Use the FileOpen dialog to upload an avatar (picture) from the user. Show that avatar on the scoreboard.
Use Cross Domain Network Access (sockets) to allow people to create game groups with private scoreboards that update each other.
Use HTTP Networking and WCF Services to provide a global public scoreboard that is hosted on the server.
Use JSON for passing data across networks, since it is lighter weight than XML.
Use Asynchronous Programming with sockets, networking, and perhaps with downloading media.
Use Cryptography to cache and encrypt user information.
Extend the usage of Globalization to also globalize text (it currently just "localizes" number and date formatting).
Use HTML DOM / JavaScript Interop for... wait a minute! This is a managed-code application! Screw the interop!

Conclusion

Whew! I put a lot into this game. Looking back on this process, I can see that I did learn a lot about getting the most out of Silverlight 2. It is a very powerful framework that met most of my needs.

What's next? I'm going to learn and incorporate more features into this game. I also plan on enhancing the gameplay with boss characters, special weapons, more sound effects, and more storyline. The updated version will be posted to the SL42.com website.

Becoming a Devigner

snyhol — Wed, 30 Apr 2008 08:46:11 -0700

People who can create an attractive UI (like a designer) and write code (like a software developer) are getting called various names... a lot of new names, like dev-igner, des-eloper, design-loper, designer-developer, creative developer, or integrator. My favorite is "devigner."

A devigner is someone who can work on both sides of the designer-developer workflow. Devigners have been described by Adam Kinney as people who design and develop, by Ryan Stewart as people who move seamlessly between their development tools and their design tools, by Heather Solomon as people who can bang out CSS and pretty graphics and turn around and fix the UI in C# code, can do up a fine front end, but actually understand the backend, and by Kevin Tate as someone how is in-between a 'designer' and a 'developer,' a design/developer hybrid. Fernando Comet even declared the 5 Commandments of a Devigner.

Here is my list that defines the skills needed to call yourself a well rounded devigner:

Emphasizes the user experience (UX)
Can create UI code
- Uses "developer" or "designer" tools
- Makes CSS, HTML, XAML, Flash, etc.
Can create backend code
- Uses "developer" tools
- Makes UI logic, business rules, database and web service interaction, etc.
Can create artistic graphic designs and has a good "design sense"
- Uses "designer" tools
- Makes bitmap graphics, vector graphics, etc.

In other words, a devigner is someone who is is skilled in UX, UI, software engineering and graphic design.

How do you become a devigner? Get training & experience in those four areas.

What am I doing to become a well rounded devigner?

I've emphasized usability for years (i.e. Don't Make Me Think)... DONE
I've worked on UIs for years (both windows and web, now WPF and Silverlight)... DONE
My primary skillset is software development with Microsoft technologies (MCSD + MCDBA)... DONE
I've dabbled a little with Photoshop, GIMP, Paint.NET, Fireworks... FOCUS HERE!

To round out my devigner portfolio of skills, I am enhancing my design skills, specifically with the Expression suite of "designer" tools. Expect to see some posts about them!

With the industry's current emphasis on designer-developer workflow, there will be demand for devigners who focus on building good UX and are competent with both developer tools, like Visual Studio, and designer tools, like Expression Studio.

Comparing the Differences Between Two Microsoft Word Documents

snyhol — Fri, 25 Apr 2008 10:54:53 -0700

The other day, I sent someone a Word document for them to read and provide edits and comments. Can you believe that they made the edits without using Track Changes or highlighting them at all. They didn't even do the typical trick of yellow background or red font. Their changes just blended into the text.

I didn't have time to read them both side by side, manually scanning for the changes. Even worse, if I did that, I might have missed a significant change. I needed a tool that would compare these two files and show me where the differences were.

Craig from codejacked described the available solutions for Word 2003 and earlier. CharlesJBarry, a commenter on Gina Trapani of lifehacker's post on this topic, explained that Word 2007 included a compare feature.

After looking around, I found these options for comparing the differences between Word documents:

Microsoft Word 2007's Compare feature (free if you own Word 2007)
Using a tool made for comparing the differences between text documents (free to $30)
Commercial Option #1: WorkShare Professional ($349)
Commercial Option #2: SoftInterface DiffDoc ($199 to $399)

Microsoft Word 2007

After comparing a few third party tools for comparing Word documents, I decided it was simpler to use the functionality that came with Microsoft Word 2007. Word has a new feature called Compare that does exactly what I wanted. It is on the Review tab, in the Compare section. This tool doesn't have the best usability; I had a hard time keeping the panels lined up evenly. This made it a little harder to locate the changes in each document. This tool is great because it does work and it is included in Word... meaning it is free if you already own Word 2007. The button to start doing a comparison looks like this:

Below is a screenshot of the Compare feature in action. It showed the two documents side by side, the "Compared Document" and the "Original Document". Notice how Word only highlights the change in the "Compared Document." For each difference, you can decide to keep the content from the Compared or the Original version. Underneath the "Original Document," it also showed a new "Revised Document." The Revised version shows what your document would look like after merging the differences between the documents. It gives a helpful summary/details panel on the left.

Next is a screenshot that better showed the summary & details panel. This panel lists all the differences (changes) between the two documents. The changes identified in the details section are clickable and will scroll the documents to the specific change.

Word also gave me options for choosing to see one document at a time or both at once, as seen in the Show Source Documents menu.

I also tried using this feature where one of the files had track changes turned on. Before opening the comparison, Word confirmed with me that I really wanted to continue. Word prompted me, "One or both of the compared documents contain tracked changes. For the purpose of the comparison, Word will consider these changes to have been accepted. Continue with the comparison?"

Using a program made for comparing plain text files

There are several good programs for comparing the differences between files. Some of the best I've reviewed are WinMerge (free), Beyond Compare ($30), and KDiff3 (free). One problem with using these tools is that they don't understand Microsoft Word's proprietary formatting codes. They show those formatting codes as garbage characters. For example, here is a screenshot from WinMerge that shows the "garbage characters". Though it did a great job of comparing the differences in the text of two Word documents, it was unnerving to see that it also identified differences in the proprietary formatting code. It made me wonder if there was something really important in those differences that I was missing.

There are two ways to get around this. The first is to save your Word .DOC files as plain text (.TXT). Then compare the plain text files.

The second is to use a plugin. I tried the xdocdiff plugin for WinMerge. This plugin advertises that it will convert the Word .DOC files to text while WinMerge is comparing them. When I used it, it did not make permanent changes to the original Word files were not changed. This tool was nice because it only showed my text content from Word 2003 and older documents (.DOC). Even though it advertised to work on Word 2007 files, I could not use it to compare ".DOCX" files. Also advertises to work with RTF, XLS, PDF, and many other file types. There are similar VBScript "rules" plugins for Beyond Compare.

Commercial Option #1: WorkShare Professional

From the reviews I've seen, it appears that WorkShare Professional is the best product on the marketplace today. It used to be called DeltaView. However, it costs $349. That's a lot more than free! I've heard that the commercial comparison programs are priced so high because many legal offices use them (and can afford those prices).

If you don't want to register on the WorkShare website just to view their demo, you can view screenshots of the application at softlinx and officeinfo.

Commercial Option #2: SoftInterface DiffDoc

SoftInterface is a company that specializes in making conversion software. Their DiffDoc product will allow you to compare the differences between two Word .DOC files. The Standard version costs $199 and the Professional version costs $399. The product worked well when comparing Word 2003 (.DOC) and Word 2007 (.DOCX) files. The interface was a little awkward, but it did support reviewing the differences between two formatted Word documents. It highlights the differences with black highlighter on both sides and the bottom pane combines the two documents, using "track changes" style to highlight the differences.

Another drawback was that DiffDoc did not catch formatting differences, as seen in this screenshot.

Conclusion

There are several options at several price ranges for tools that can be used to compare the differences between two Microsoft Word documents. Which option is right for you depends on your preferences and your budget. WorkShare Professional looks like it is probably the best tool, but is much more expensive than the alternatives. As for me, I'll be using Word 2007's new Compare feature or a plugin for a text-based tool. I'm interested in hearing from you about your experience with these tools and others like them, especially about WorkShare's tools.

Source Code Syntax Highlighting in Blog Posts with FormatToHtml

snyhol — Thu, 24 Apr 2008 18:31:53 -0700

Syntax highlighting makes a huge difference when reading blog posts! However, given the limitations of HTML, this effect doesn't come easy. A lot of really smart people have worked on solutions to this problem. I looked at a few of them and decided to go with the FormatToHtml tool from Jeff Atwood at Coding Horror.

When I looked at the tools, I was looking for something that would work with my specific situation:

Hosting my blog on my own domain
Blog server: BlogEngine.NET 1.3
Blog writing & publishing tool: Windows Live Writer
Ability to copy code from Visual Studio 2008

For source code syntax highlighting, I considered the following tools:

Jeff Atwood's FormatToHtml Visual Studio macro (from Coding Horror)
BlogEngine.NET's internal code formatting extension [code:c#] was added in v 1.2. This functionality was keyword based, used an external stylesheet, and did not include enough keywords or include CSS keywords.
CopySourceAsHtml Visual Studio add-in. You can download Colin Coller's original code or get a Visual Studio 2008 upgrade from Shawn Oster or Guy Burstein. I tried Guy's version, which installed fine. It was very customizable and produced nice HTML, but only worked for certain types of code. Specifically, it did not work for CSS files.

I chose FormatToHtml because Jeff's utility gave the best output and was easy to use. In the future, I may switch to something with fancy features like scrolling, line numbers, a copy to clipboard button, etc. For now, I wanted a tool that gave clean and consistently styled HTML.

Advantages of using FormatToHtml:

It was quick to use. I could press my shortcut key and nice HTML formatted code was in my clipboard.
It was not keyword dependent. I didn't need to edit the syntax highlighting if I used beta software or newer versions of the framework.
It was open source. I have modified it for my own needs.
I could copy code formatted by this utility directly into Visual Studio. Some tools add extra line breaks between the lines of code. Other tools will include the line numbers in the text you copy from the web. This tool doesn't.
It used inline styling, which allowed the code to be formatted in RSS readers.
It worked with Windows Live Writer.

Disadvantages of using FormatToHtml:

Since it used the same color scheme as your IDE, any color changes you've made will be on the web. This is great for you, but others might not like it as much. For consistency and ease for others to read your code, the best samples will use Visual Studio's default coloring. Since I use the default coloring, this limitation didn't impact me.
It did not retain the background highlighting. There is not much background highlighting in Visual Studio, so this is not typically noticeable. However, on ASP.NET pages, there is a lot of highlighting. I modified the original code to support ASP.NET background highlighting.

Setting Up FormatToHtml:

I found the setup for Visual Studio 2008 the be a little different than Jeff's original instructions.

The first trick was figuring out how to open the Macro Explorer in Visual Studio 2008. I didn't have a "Tools | Macros" menu option. The easiest way I found to open the Macro Explorer is with ALT+F8. It is a small window and looked something like this.

Once the editor was open, I noticed that a new macro in Visual Studio 2008 included two new "Imports" statements:

Imports EnvDTE80 
Imports EnvDTE80

Assigning the macro to a shortcut key was fairly easy - the MSDN provides detailed instructions. I chose "ALT+C" for my shortcut key. It was close enough to the "Copy" shortcut key and was still unassigned. I decided to leave the default "Copy" behavior alone and not override it with Jeff's macro.

Which Macro should you bind to? For Windows Live Writer, use Modern or ModernText. Here's my understanding of the FormatToHtml macros:

Modern and ModernText use DIV and SPAN
Legacy and LegacyText use P and FONT.
Modern and Legacy put the HMTL formatted output in both the clipboard object and the clipboard text.
ModernText and LegacyText only put the HTML formatted output in the clipboard object and put the plain text version in the clipboard text.

Customizing FormatToHtml:

There was a simple logic bug in “PerformRtfConversion”. Basically, the condition was running backwards. It should have read like this:

If asTextOnly Then 
    SetClipboardHtml(html, text) 
Else 
    SetClipboardHtml(html, html) 
End If 

To support ASP.NET background highlighting, I added a new method to scrub the HTML output for the special <% and %> character combinations. I added a configuration variable at the top of the code file to turn this functionality on and off easily. (I don't think I'll ever turn it off.) I used a screenshot of the code to figure out the precise background color. Neither HTML named color "Yellow" nor "Gold" looked correct.

Private Const _ApplyDefaultBackgrounds As Boolean = True 

... 

Private Sub PerformRtfConversion(ByVal asTextOnly As Boolean, ByVal useModernHtml As Boolean) 
    If Not SelectionToClipboard() Then Return 

    '-- retrieve text and rtf from clipboard 
    GetClipboard(DataFormats.Text) 
    Dim text As String = Convert.ToString(_ClipboardObj) 
    GetClipboard(DataFormats.Rtf) 
    Dim rtf As String = Convert.ToString(_ClipboardObj) 

    If _RemoveExcessIndentation Then text = RemoveTextIndents(text) 

    Dim html As String = RtfToHtml(rtf, useModernHtml) 
    '-- HACK: SN: 3-26-08: Apply default editor background colors to selected characters 
    If _ApplyDefaultBackgrounds Then 
        html = ApplyDefaultBackgrounds(html, useModernHtml) 
    End If 

    If Not useModernHtml Then 
        html = ConvertSpanToFont(html) 
    End If 

    If asTextOnly Then 
        SetClipboardHtml(html, text) 
    Else 
        SetClipboardHtml(html, html) 
    End If 

End Sub 

... 

Private Function ApplyDefaultBackgrounds(ByVal html As String, ByVal useModernHtml As Boolean) As String 
    If useModernHtml Then 
        html = Regex.Replace(html, "%&gt;", "<span style='background-color:#FFEE62;'>%&gt;</span>") 
        html = Regex.Replace(html, "&lt;%", "<span style='background-color:#FFEE62;'>&lt;%</span>") 
    Else 
        html = Regex.Replace(html, "%&gt;", "<font style='background-color:#FFEE62;'>%&gt;</font>") 
        html = Regex.Replace(html, "&lt;%", "<font style='background-color:#FFEE62;'>&lt;%</font>") 
    End If 
    Return html 
End Function 

To better support CSS styling, I added a class to the DIV tag that wraps the formatted output. This was in Function RtfToHtml.

'-- add block wrapper 
If useModernHtml Then 
    rtf = "<div class='VSCode' style='" & _ 
        "font-family:" & _CodeFontName & "; " & _ 
        "font-size: " & _CodeFontSize & "; " & _ 
        "background-color: " & _CodeBackgroundColor & ";'>" & _n & _ 
        rtf & _n & _ 
        "</div>" & _n 
Else 
    rtf = "<p class='VSCode'><font face='" & _CodeFontName & "' size='" & _CodeFontLegacySize & "'>" & _n & _ 
        rtf & _n & _ 
        "</font></p>" & _n 
End If 

Using FormatToHtml with Windows Live Writer:

After I got used to using this tool to insert code into my blog posts, I memorized the keystrokes. It's pretty fast!

Highlight the code you want to copy in Visual Studio
1. Press your shortcut key (mine is ALT+C)
Go to Windows Live Writer
1. Press CTRL+SHIFT+V (or select the paste special menu item)
2. Press the down arrow key (or select "Keep Formatting")
3. Press ENTER (or click the OK button)

Here's the Windows Live Writer's "Paste Special" dialog:

Conclusion

Syntax highlighting makes a blog about source code more readable. FormatToHtml is a powerful and useful code syntax highlighting tool for Visual Studio. It provides nicely formatted output with clean HTML that retains the styling in RSS readers.

Since I chose to use FormatToHtml, I didn't really evaluate the following tools. If you are considering one of them, read Brix Lamoreaux's review.

Alexander Schuc's BlogEngine.NET Syntax Highlighting Extension
Troy Goode's CopyCodeToClipboard BlogEngine.NET Extension
Manoli's online c# code formatter
squishySyntaxHighlighter
Windows Live Writer plugin, Code Snippet by Leo Vildosola, now on CodePlex.
Windows Live Writer plugin, Insert Code
Windows Live Writer plugin, Paste from Visual Studio

I look forward to hearing about the tools you use for syntax highlighting.

Comparing the Differences Between Two Folders

snyhol — Thu, 17 Apr 2008 00:23:49 -0700

When writing a blog about the customizations I made to BlogEngine.NET 1.3, I wanted to see if I documented all of the code that I changed. I needed to compare the code files I deployed to the server with the files I originally downloaded from the project website. I wanted to see which files were missing, added, or different from the original files.

I didn't have a diff tool that would allow me to easily compare the contents of two folders, traverse through all of the subfolders, let me know if files were missing in either of the folder trees, and also let me know if the contents of the files were different in either of the trees.

I looked around and the best tools I found to do this comparison are:

KDiff3
Beyond Compare

Below, I provide detailed reviews of how a few products were able to perform the task of comparing the contents of two folders.

KDiff3

The best tool I found for comparing folders was KDiff3, recommended by Craig Andera. It is a SourceForge project that was last updated in April of 2007. For comparing folders, this tool rocks! The usability is unreal. Within minutes, you can compare the contents of all the files within two folders. What made this the best tool for this job was that I could view the folder structure and the contents of any selected file in the same window at the same time! For this job, very handy!

Beyond Compare

Beyond Compare was recommended by Jeff Atwood and Joe Gallant. It only costs $30. It was last updated in November 2007. This tool did allow me to easily traverse the hierarchy of folders and keep several folders open at once. To view the differences within the selected file, it opened a popup window. Not as simple to use as the KDiff3 option, but it was more powerful because it did allow me to easily keep several comparison windows open at once. It was not as fast to use as KDiff3 because I had to manage the details windows - move them around, resize them, and close them.

WinMerge

WinMerge was recommended by Jon Galloway, Rob Brooks-Bilson, and Scott Hanselman. It is an extremely popular SourceForge project and was last updated in April of 2008. WinMerge uses tabs to keep multiple comparisons open at the same time. This was annoying because I had to click on the tabs to switch between comparisons. When comparing folders, it does not present the entire hierarchy; you can only compare the contents of one folder at a time. It also does not let you view a folder's contents and the contents of the selected file at the same time - they are on separate tabs. I suppose you could Tile the windows, as seen below, but that was not as nice as KDiff3.

SourceGear's DiffMerge

DiffMerge is a newer product and was recommended by Keith Craig. It was last updated in October 2007. DiffMerge uses an approach similar to Beyond Compare in that it opens a new window for each file that you want to view the detailed comparison. It does not allow you to traverse the hierarchy of folders. It simply gives you an option to "Show Folders" or not. the screenshot below is showing folders.

SmartSynchronize

SmartSynchronize was recommended by Michael Flanakin. It only costs $39 and requires the JRE. It was last updated in February 2008. I did not review this product because the features advertised on their website just didn't seem any better than the other four I already reviewed.

Araxis Merge

Araxis Merge has been described as an excellent program, but in my opinion the cost is prohibitive ($129 standard; $269 professional). I didn't review this product because their software was considerably more expensive than the competition.

Conclusion

I have yet to evaluate these diff products for other features. When you choose your diff tool, be sure to check out the Comparison of file comparison tools page on Wikipedia. If you are a Team Foundation shop, also read James Manning's post about integrating diff tools with Team Foundation. What features are the most important to you?

Math Terms and Formulas

snyhol — Wed, 16 Apr 2008 23:54:37 -0700

Yep, my high school math teacher was right when he said that I would eventually use the skills he taught me. At the time, I didn't know that it would be with a technology called Silverlight, while remaking a math based game, Asteroids. I just dusted off my old Casio fx-7000G graphing calculator and started cranking out some calculations. Can you believe it?

When writing line of business (LOB) application, I never really needed to use "advanced" math, like algebra, geometry, trigonometry, or calculus. Really, the trick to writing business applications is capturing the correct data with the correct logic and enough usability.

Then I discovered that developing video game applications is quite different because required the use of math functions to do things like drawing shapes, moving those shapes around the screen, and figuring out if those shapes bump into other shapes. While I was re-learning high school math to help calculate the game's logic, I found some good links to web pages that clearly describe math terms and formulas. Here are those links.

System.Math documentation class in the MSDN Library
The Math League has several web pages dedicated to defining geometry terms.
Dr. Kim K. McLeod from Wellsley shares Basic Geometry formulas.
Dr. John R. Wicks from Northpark explains Geometry and Trigonometric Functions as part of his Finite Mathematics website.
Wikipedia has a nice page of Trigonometric functions.
Teacher's Choice Software Mathematics How-to Library
Computer Support Group's very handy Right Angle Angle and Side Calculator

So, there you have it. Lots of math support to make those interesting and compelling video games work. Let's go shoot some asteroids! Who knew math could be so fun!! What math resources do you use?