Ashish's Blogging Space

Setting up MongoDB on OSX

2011-07-08T19:39:00.000-07:00

Recently I successfully downloaded and installed MongoDB on my mac. I am a Windows developer dwelling in the world of linux programming, so I wanted to blog about my experience as it may be helpful to other fellow devs who are new to linux as well.

Most of the steps below are refinement / explanation of http://www.mongodb.org/display/DOCS/Building+for+OS+X

Step 1 - Download MongoDB server - From mongodb.org website download MongoDB server and untar the files in some folder (MongoDB_Server).
Step 2 - Create a folder /data/db in your root. MongoDB server uses this path to store the database(s).
Step 3- Download MongoDB client - From mongodb.org download a compatible client (same version as the server) and untar the files in client folder (MongoDB_Client)
Step 4 - If you haven't done so far, you must download package manager on OSX called homebrew. A package manager on linux is an application that makes it dead simple to download other applications and install them on your system. To download homebrew open a shell window and type: curl -L http://github.com/mxcl/homebrew/tarball/master | tar xz --strip 1 -C /usr/local
Step 5 - Download boost C++ library - Execute: brew install boost
Step 6 - Download scons (Makefile executor) - Execute: brew install scons
Step 7 - Download pcre++ (Perl regular expression lib) - Execute: brew install pcre++
Step 8 - Build client - Navigate to the client folder and simply type: scons
Step 9 - Start server - Open a new shell window and navigate to server folder's bin subfolder and type: mangod. This should start the server !
Step 10 - Test client - Navigate to client folder and execute: ./clientTest (this should run a simple client test)
Step 11 - Write your own test: In the client folder's client/example subfolder, create a test program with code from: http://www.mongodb.org/pages/viewpage.action?pageId=133415 and name it test.cpp
Step 12 - Now navigate to root client folder and execute: g++ -o test client/examples/test.cpp -I mongo -L. -lmongoclient -lpthread -lboost_thread-mt -lboost_filesystem-mt -lboost_system-mt
Step 13: Last step should compile your code and output test binary. Simply execute this binary to verify client code ! Ensure that your server is running all this time...

My favorite WPF book of all times–WPF Control Development Unleashed

2011-05-01T20:15:00.001-07:00

Whenever I pick up a technical book to acquaint myself with a particular technology I personally look for the philosophy which makes that particular technology relevant in the field. After all if you just want an introduction or code samples, internet is a valuable resource why bother buying a book, right?

About an year and half ago I was put in-charge of UI design of our product using Windows Presentation Foundation (WPF) and started looking out for resources on the web, in the libraries and books. I finally stumbled upon this masterpiece by Pavan Podila and Kevin Hoffman called WPF Control Development Unleashed.

I really loved how the book introduces the philosophy of WPF UI design and the diverse visual class structure in the opening chapters. Most admirably how authors provide insight and emphasis into code reuse, UI templating, extending existing controls using attached properties before jumping on to custom controls. In fact many examples in the book illustrate how extending existing UI controls result in more maintainable code without much effort.

The book covers a very broad spectrum of UI development in WPF such as building custom panels, UI virtualization, advanced scrolling, 2D and 3D animations, pixel shader effects and even rare topics such as UI automation which are skipped in many other books I have read. The book is pure joy to read and I have personally read this book about three times if not more.

I have been successful in applying concepts from the book into our product – BlackBerry Desktop Software, and so have my team. I highly recommend this book for any serious WPF developer who can gain end to end insight into the technology from this fabulous resource.

MixModes Synergy Toolkit for Windows Phone 7

2011-01-30T13:41:00.001-08:00

Synergy is a platform toolkit that unleashes the power of WPF, Silverlight and Windows Phone 7 platforms. In this blog I will discuss the Windows 7 phone part of this library and how it helps to somehow converge development practices to that of WPF and leverage data binding capabilities.

Synergy toolkit can be accessed at its codeplex home where Santa (myself) keeps delivering new gifts and wishes everyday. I have released v1 of Windows Phone 7 library in the downloads section.

For a background on WPF synergy toolkit, you can refer to my previous blog here. I also wrote a docking windows framework in WPF edition of synergy that you can refer here and a window theming article here.

You can follow me on twitter @ashishkaila

Without further adieu let me walk you through the features of the v1 release.

Base Framework for Windows Phone 7 Development

Commanding Support

CommandBase class provides a flexible implementation for custom commands. This class works on an Action<object> instance for command invocation and an optional Predicate<object> for command execution evaluation. If the predicate is not specified, it is assumed that command can be executed anytime. Simply speaking, one can instantiate CommandBase class as follows:

CommandBase myCommand = new CommandBase(arg=>Foo(arg), arg=>CanFoo(arg));

Moreover since WP7 and Silverlight do not provide out of the box capability to bind

Dependency System Enhancements

Several enhancements in dependency system have been provided that helps developers tap easily into the framework for advanced operations related to binding and dependency properties. These enhancements are as follows:

Observable Binding

ObservableBinding class as the name suggests observes a binding for value changes and provides the most recent value for the binding. This class is very useful within custom behaviors and trigger actions where data context of associated object does not propagate to these entities. This is so because Behaviors and Triggers are attached properties within the static Interaction class (declared in System.Windows.Interactivity assembly) and are therefore detached from the dependency system.

By declaring a dependency property of type Binding and using ObservableBinding within a Behavior/TriggerAction you can both hook into the dependency property system of associated object as well as evaluate the most recent value of the binding.

For instance EventToCommand trigger action defines a dependency property Command of type Binding:

public static DependencyProperty CommandProperty = DependencyProperty.Register("Command",
                                                                                       typeof (Binding),
                                                                                       typeof (EventToCommand),
                                                                                       new PropertyMetadata(null, OnCommandChanged));

It also declares an ObservableBinding for the command:

private readonly ObservableBinding _observableCommandBinding = new ObservableBinding();

This _observableCommandBinding member will provide us with the latest value of Binding exposed by Command property.

There are certain rules to ensure that ObservableBinding works as expected for Binding properties. Basically anytime Binding property changes, we have to unhook from the old Binding and hook into the new binding. This is done in the OnCommandChanged method which is called when Binding property is changed (that is the actual Binding property and not the value of the Binding):

private static void OnCommandParameterChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
EventToCommand eventToCommand = d as EventToCommand;

    if (eventToCommand == null)
    {
        return;
    }

    eventToCommand._observableCommandParameterBinding.Detach();

    if ((e.NewValue != null) && (eventToCommand.AssociatedObject != null))
    {
           eventToCommand._observableCommandParameterBinding.Attach(eventToCommand.Command eventToCommand.AssociatedObject);
    }
}

Also when associated object is initially attached to the TriggerAction / Behavior, we need to attach to the ObservableBinding:

protected override void OnAttached()
{
base.OnAttached();

    if (Command != null)
    {
        _observableCommandBinding.Attach(Command, AssociatedObject);
    }
}

If you skip the above step, the initial value of Binding will not be tracked by ObservableBinding.

ObservableDependencyProperty

ObservableDependencyProperty on the other hand provides the ability to track changes in dependency property declared in another DependencyObject by way of event notifications. The constructor of ObservableDependencyProperty takes two parameters: the string representing the name of the dependency property to observe and a delegate of type DependencyPropertyChangedEventHandler that will be called when the dependency property changes:

ObservableDependencyProperty _verticalScrollChange = new ObservableDependencyProperty("VerticalOffset", OnVerticalScroll);

To track changes in dependency property of the actual DependencyObject, ObservableDependencyProperty instance must be attached to it via AddValueChanged method:

_verticalScrollChange.AddValueChanged(_scrollViewer);

Similarly to detach or stop property change tracking, RemoveValueChanged method may be called:

_verticalScrollChange.RemoveValueChanged();

Complete MVVM Framework

Custom view models can be implemented by simply inheriting from the base class ViewModelBase. To raise PropertyChanged event, a type safe RaisePropertyChanged method can be called with an expression containing your property reference, e.g.:

RaisePropertyChanged(x=>MyProperty);

ViewModelBase also contains a Navigate method that can navigate the phone to a bound view performing data binding behind the scenes (more on this in the next section), e.g.:

MyViewModel viewModel = new MyViewModel();
viewModel.Navigate(); // Note: For this to work, your application must inherit from PhoneApplication class (see below)

Easier Navigation via Declarative View-ViewModel Bindings

In WPF DataTemplates could bind a ViewModel to View on an application level. This binding enabled runtime view generation within ContentPresenter. I wanted to extend the same idea to Windows Phone 7 screen navigation since url based navigation within an application seems error prone and passing query parameters is tedious.

ViewSelector class provides this declarative binding capabilities in conjunction with ViewBinding class. Basically in your application resources you can define this mapping:

<Framework:ViewSelector x:Key="ApplicationViewSelector">
    <Framework:ViewBinding ViewModelType="INameU.ViewModels.NameListViewModel"
                                                           ViewUri="/Views/NameListView.xaml" />
    <Framework:ViewBinding ViewModelType="INameU.ViewModels.NameDetailViewModel"
                                                           ViewUri="/Views/NameDetailView.xaml" />
</Framework:ViewSelector>

where Framework is mapped as:

xmlns:Framework="clr-namespace:MixModes.Phone.Synergy.Framework;assembly=MixModes.Phone.Synergy"

Once you have done this, you can call the Navigate method from your ViewModel instance to navigate to the mapped view and data binding to it at the same time, without using any url(s) !

DockPanel and WrapPanel Controls

I have ported both DockPanel as well as WrapPanel from Silverlight Toolkit for Windows Phone 7 so you do not have to reference the toolkit if you are not using any additional functionality other than these panels.

EventToCommand TriggerAction

A common pain point is the absence of Command and CommandParameter properties on controls such as Button and ListBoxItem. To fill this gap EventToCommand trigger action can be used to map a RoutedEvent to an ICommand instance along with a CommandParameter instance. To bind the RoutedCommand to EventToCommand trigger you need to add the trigger to the associated framework element:

PassEventArgsToCommand property when set to true, passes the RoutedEventArgs as CommandParameter to the associated ICommand’s Execute method.

ScrollLoadBehavior

ScrollLoadBehavior allows asynchronous loading of data when user scrolls a scroll viewer vertically to the bottom. ScrollLoadBehavior has an associated ICommand and CommandParameter that are executed anytime scroll viewer reaches its bottommost point. Loading is detected via ICommand’s CanExecute method. For example:

Notice the explicit DataContext=”{Binding}” in the ListBox. This is necessary as without explicit parent data binding, ItemsSource sets the DataContext to its value thereby failing the binding for ScrollLoadBehavior.

Out Of The Box Converters

Many frequently used out of the box converters have been provided in the toolkit:

EnumMatchConverter – Matches a value of enum member with a constant value and returns boolean indicating the match. For example, if you want to enable a control when the state is StateEnum.IsError, you can do the following:
Enabled="{Binding Path=State, Converter={StaticResource EnumConverter}, ConverterParameter=IsError}"
NotConverter – Inverts the value of a boolean expression.
VisibilityConverter – Based on a boolean value, shows (if value is true) or collapses (if value is false) visibility of a control
PipeConverter – Pipes a value through multiple converters to compute the end value of the binding expression. For example if you want to match a value to enumeration member “Loading” and then determine the visibility of a control you could declare a pipe converter as follows:

<conv:PipeConverter x:Key="LoadingMessageVisibilityConverter">
<conv:EnumMatchConverter />
<conv:VisibilityConverter />
</conv:PipeConverter>

The values are piped from top to bottom, hence first EnumMatchConverter is invoked and then VisibilityConverter. To use it simply refer to the PipeConverter as follows:

Visibility="{Binding Path=State, Converter={StaticResource LoadingMessageVisibilityConverter}, ConverterParameter=Loading}"
ThemeBasedResourceConverter – This converter returns resources based on the theme of Windows 7 Phone (either dark or light). To use this converter one needs to point to both theme resources via LightThemeResource and DarkThemeResource properties. For example if your application has navigation button images for both themes as NavigationLight.png and NavigationDark.png, you could use ThemeBasedResourceConverter to set the appropriate image as the background of a button as follows:

<phone:PhoneApplicationPage.Resources>
    <Converters:ThemeBasedResourceConverter x:Key="ThemeBasedResourceConverter"
                                        LightThemeResource="../Resources/NavigationLight.png"
                                        DarkThemeResource="../Resources/NavigationDark.png" />
</phone:PhoneApplicationPage.Resources>

And then refer to the above ThemeBasedResourceConverter in the button:

<Button>
    <Image Stretch="None"
           Source="{Binding Path=., RelativeSource={RelativeSource Self}, Converter={StaticResource ThemeBasedResourceConverter}}">
    </Image>
</Button>

So that’s all in v1 folks. I will be happy to receive any feedback you may have and will continuously develop Synergy toolkit to make your development easier whether you code in WPF, WP7 or Silverlight !

Automate your UI using Microsoft automation framework

2011-01-01T21:31:00.001-08:00

UI automation is a programmatic interface to the user interface of your application to external applications that may be interested in programmatic communication with your UI. In fact UI automation is the prime facilitator for accessibility features in Windows where external applications such as screen readers that have no clue about your application, can still interact with your application easily.

I was acquainted with UI automation during my tenure at Microsoft in 2005 when I started working as software developer in test within Visual Studio Team Architects team on a project called Whitehorse. For those who need some background, Whitehorse consisted of SOA diagrams within Visual Studio (you can learn more about this project in the MSDN magazine here). Testing of visual designers in the product test team was done entirely using an internal UI test automation framework built on top of Microsoft Active Accessibility framework.

The UI automation framework is relatively new to Windows platform and successor to Windows Active Accessibility. The framework provides a unified way to discover UI controls in an application built using any of the following desktop technologies: Win32, Windows Forms or WPF.

UI automation has several benefits when used in applications:

Accessibility features – UI automation provides accessibility support in your application. Accessibility support becomes even more important when there are matter of legal compliance in the domain your application is used in (e.g. Government regulations).
Automated UI testing – UI automation can automate testing for application UI saving time and costs associated with manual and regression testing. Moreover given a set of use cases, UI automation can be used to verify application behavior via scenario tests.
Custom controls – If you are authoring custom controls, UI automation support enables end clients of your control to automate your control in their application UI.

How does UI automation work?

UI automation provides a common protocol for exchanging information between your application and an external entity such as screen reader or automated UI tests. UI automation provides an API using which an external application can discover controls, navigate the visual tree, access the state of the controls and perform control specific actions.

In WPF, automation object model is provided via System.Windows.Automation.AutomationElement instance associated with a UIElement (said to be “automation peer” of the control). If you are authoring a custom control, you may want to implement one or more interfaces defined in the UIAutomationProvider.dll under the System.Windows.Automation.Provider namespace to support UI automation.

To support UI automation, a control author needs to implement an abstract class AutomationPeer from UIElement class’ virtual method OnCreateAutomationPeer. AutomationPeer is then used at runtime to extract AutomationElement for the UIElement. It is important to note that the standard controls in WPF have standard implementation of AutomationPeer associated with the controls out of the box. In authoring a derivative of AutomationPeer you may want to subclass a standard implementation rather than deriving directly from AutomationPeer and authoring a class from scratch.

Following image shows out of the box derivatives of AutomationPeer:

Each AutomationPeer must implement one or more “standard control patterns” to expose capabilities that can be used by automation clients such as screen readers. A control may expose one or more control patterns defined by the members of PatternIntern enumeration:

A control can be queried for a specific PatternInferface via AutomationPeer’s GetPattern method that takes PatternInterface member as a parameter and returns the supported pattern – a derivative of BasePattern or null if the specified PatternInterface value does not correspond to a supported pattern.

BasePattern has several out of the box derivatives that target standard control patterns:

For example Button, Hyperlink and MenuItem controls support InvokePattern and can therefore indicate to the automation clients that control is capable of invoking a command. Similarly an expander control supports ExpandCollapsePattern to indicate that control is capable of expanding or collapsing content within it.

Control patterns are strictly limited and custom control patterns are not supported. The reason is that automation clients must work on a standardized protocol and cannot interpret custom patterns to figure out the functionality of the controls.

Since UI automation is optional in WPF, you may tag on automation properties on a control via attached properties specified in the AutomationProperties static class:

For example if we want to specify automation id on a text box we could specify it as following in XAML:

Navigating the automation tree in WPF

Similar to visual tree navigation, one can navigate UI automation tree in WPF using the AutomationElement instance. However there is an important distinction – unlike the visual tree, an automation tree is not constructed upfront and is only constructed during automation tree navigation. This is so because unlike visual tree, UI automation is optional in applications. There are more than one way to navigate the automation tree depending on the view of automation tree you would want:

Raw view – Raw view refers to non-filtered complete automation tree view. Using TreeWalker class’ RawViewWalker property raw view can be navigated.
Control view – A control view is a subset of raw view that only contains AutomationElements that correspond to controls (or in other words have their AutomationElement.IsControlElementProperty property set). Using TreeWalker class’ ControlViewWalker property control view can be navigated.
Content view – A content view is a subset of control view that only contains AutomationElements that correspond to elements that represent information in terms of content to the end user(or in other words have their AutomationElement.IsContentElementProperty property set). Using TreeWalker class’ ContentViewWalker property content view can be navigated.
Custom view – Using a AutomationElement and a condition (which can be one of PropertyCondition, AndCondition, OrCondition or NotCondition) one can navigate automation tree in a custom manner. To navigate a custom view a call to the FirstFind or FindAll methods of AutomationElement is made with a tree scope (TreeScope enumeration specifying the levels in terms of Element, Children, Descendants, Subtree, Parent and Ancestors or any combination of these flags) and a condition.

The root of the automation tree is represented by static property AutomationElement.RootElement refers to the user’s desktop. One can either navigate a automation tree via RootElement or quite often more efficiently from the AutomationElement corresponding to the application window which can be obtained via AutomationElement.FromHandle method by passing in the handle to the application window.

A real world example – automating Windows calculator

As a real world example, let’s author test cases that uses UI automation to test Windows calculator. The aim of the tests is to test the following aspects of calculator:

Data entry verification – Validates that a number being typed appears correctly in the calculator
Editing options – Validates that copy and paste works as expected in the calculator
Calculation validation – Validates given an expression tree, calculator calculates the expression correctly.

You may download the completed example from below:

Calculator class

We will start the example by modeling Calculator class which will be our interface to Windows calculator. The calculator class shall fire up an instance of Windows calculator upon construction and shall provide methods to manipulate the calculator. Also this class shall implement IDisposable interface and shall dispose the calculator process upon test conclusion. Clean calculator instance for every test ensures no d

Following is the constructor of Calculator class:

public Calculator()
{
_calculatorProcess = Process.Start("Calc.exe");

    int ct = 0;
    do
    {
        _calculatorAutomationElement = AutomationElement.RootElement.FindFirst(TreeScope.Children,
                                                                              new PropertyCondition(AutomationElement.NameProperty, "Calculator"));
        ++ct;
        Thread.Sleep(100);
    }
    while (_calculatorAutomationElement == null && ct < 50);

    if (_calculatorAutomationElement == null)
    {
        throw new InvalidOperationException("Calculator must be running");
    }

_resultTextBoxAutomationElement = _calculatorAutomationElement.FindFirst(TreeScope.Descendants, new PropertyCondition(AutomationElement.AutomationIdProperty, "150"));

    if (_resultTextBoxAutomationElement == null)
    {
        throw new InvalidOperationException("Could not find result box");
    }

GetInvokePattern(GetFunctionButton(Functions.Clear)).Invoke();
}

The code fires up calculator process and waits for automation element to become available. Then it proceeds to discovering and initializing automation elements that will be used to interact with the calculator. For example to obtain access to calculator result text box we do a lookup of automation id of 150 within the main calculator automation element. Automation Ids of elements were obtained using Spy++ utility that ships with Visual Studio by following the steps below:

Fire up a calculator instance and then fire up Spy++.
Type any number in calculator (I typed 1234) to identify it within Spy++.
Press Ctrl + F3 in Spy++ and from the search window drag the cross bow over to the calculator instance. This will highlight the calculator process in Spy ++.
Find the window instance corresponding to the pressed number and click to select it.
Right click on the selected window and select Properties menu item to fire up the properties window
Look up the control Id in the Property Inspector window. This is the automation id for the control in Hex. Convert it into decimal before using it in code. In my case a hex value of 96 corresponds to 150 in decimal. This is how I got 150 !

Dispose method simply terminate the process:

public void Dispose()
{
_calculatorProcess.CloseMainWindow();
_calculatorProcess.Dispose();
}

To obtain InvokePattern to invoke buttons we use a utility method GetInvokePattern for a specified AutomationElement:

public InvokePattern GetInvokePattern(AutomationElement element)
{
return element.GetCurrentPattern(InvokePattern.Pattern) as InvokePattern;
}

AutomationElement for a function button can be retrieved via GetFunctionButton method that takes in string for the function (e.g. “Clear”) as its input:

public AutomationElement GetFunctionButton(string functionName)
{
AutomationElement functionButton = _calculatorAutomationElement.FindFirst(TreeScope.Descendants,
newPropertyCondition(AutomationElement.NameProperty, functionName));

    if (functionButton == null)
    {
        throw new InvalidOperationException("No function button found with name: " + functionName);
    }

return functionButton;
}

All the function names are defined within the Functions static class:

public class Functions
{
    // Functions
    public const string MemoryClear = "Memory clear";
    public const string Backspace = "Backspace";
    public const string MemoryRecall = "Memory recall";
    public const string ClearEntry = "Clear entry";
    public const string MemoryStore = "Memory store";
    public const string Clear = "Clear";
    public const string DecimalSeparator = "Decimal separator";
    public const string MemoryAdd = "Memory add";
    public const string MemoryRemove = "Memory subtract";
    public const string Equals = "Equals";
}

Similarly we query for a digit button using GetDigitButton method that takes digit as an input and returns the associated AutomationElement:

public AutomationElement GetDigitButton(int number)
{
    if ((number < 0) || (number > 9))
    {
        throw new InvalidOperationException("mumber must be a digit 0-9");
    }

AutomationElement buttonElement = _calculatorAutomationElement.FindFirst(TreeScope.Descendants,
new PropertyCondition(AutomationElement.NameProperty, number.ToString()));

    if (buttonElement == null)
    {
        throw new InvalidOperationException("Could not find button corresponding to digit" + number);
    }

return buttonElement;
}

One thing to note is the use of AutomationElement.NameProperty in querying for the element. This property cannot be seen via Spy++ and I had to open the inspect the object in debugger to find it out (I used AutomationId to load an element and queried it in the debugger to find the name property).

The result of calculator can be retrieved using Result property. The setter of this property parses the character string from left to right, locates the AutomationElement for the button on the calculator corresponding to the character and then invokes it using InvokePattern’s Invoke method. This is really mimicking user typing numbers in the calculator.

public object Result
{
    get
    {
        return _resultTextBoxAutomationElement.GetCurrentPropertyValue(AutomationElement.NameProperty);
    }
    set
    {
        string stringRep = value.ToString();

        for (int index = 0; index < stringRep.Length; index++)
        {
            int leftDigit = int.Parse(stringRep[index].ToString());

            GetInvokePattern(GetDigitButton(leftDigit)).Invoke();
        }
    }
}

The Evaluate, Clear and InvokeFunction methods simply evaluates (mimicking pressing of = button), clears (mimicking pressing of C button) and invokes a function respectively:

public void Evaluate()
{
InvokeFunction(Functions.Equals);
}

public void Clear()
{
InvokeFunction(Functions.Clear);
}

public void InvokeFunction(string functionName)
{
GetInvokePattern(GetFunctionButton(functionName)).Invoke();
}

FindMenu method locates the specified calculator menu and returns its ExpandCollapsePattern:

private ExpandCollapsePattern FindMenu(CalculatorMenu menu)
{
    AutomationElement menuElement = _calculatorAutomationElement.FindFirst(TreeScope.Descendants,
                                                         new PropertyCondition(AutomationElement.NameProperty, menu.ToString()));

    ExpandCollapsePattern expPattern = menuElement.GetCurrentPattern(ExpandCollapsePattern.Pattern) as
                                                                                 ExpandCollapsePattern;
    return expPattern;
}

OpenMenu and CloseMenu uses FindMenu to obtain ExpandCollapsePattern for menus and then expand and collapse menus respectively. ExecuteByMenuName looks for a menu item within expanded menu and invokes the command using the InvokePattern of the menu.

public void OpenMenu(CalculatorMenu menu)
{
ExpandCollapsePattern expPattern = FindMenu(menu);
expPattern.Expand();
}

public void CloseMenu(CalculatorMenu menu)
{
ExpandCollapsePattern expPattern = FindMenu(menu);
expPattern.Collapse();
}

public void ExecuteMenuByName(string menuName)
{
    AutomationElement menuElement = _calculatorAutomationElement.FindFirst(TreeScope.Descendants,
                                                        new PropertyCondition(AutomationElement.NameProperty, menuName));
    if (menuElement == null)
    {
        return;
    }

    InvokePattern invokePattern = menuElement.GetCurrentPattern(InvokePattern.Pattern) as InvokePattern;
    if (invokePattern != null)
    {
        invokePattern.Invoke();
    }
}

Now that we have exposed functionality of calculator that we would interact with, we can proceed and model expression tree so we can evaluate expressions in the calculator. For the purpose of testing expression evaluation we need two modes of expression computation: expression evaluation through calculator UI (calculated expression) and evaluation through code (expected evaluation). If calculated expression equals expected expression we can assert that calculator computes expression in the correct manner. This evaluation option is captured via EvaluateOption enumeration:

internal enum EvaluateOption
{
UIEvaluate,
ActualEvaluate
}

At the end level, we need to model the operands that have sub-expressions to evaluate. Operands are modeled using IOperand interface:

internal interface IOperand
{
int Evaluate(EvaluateOption option, Calculator calculator);
}

At the fundamental level, an operator is an operand:

internal abstract class Operator : IOperand
{
    internal Operator(string automationName)
    {
        AutomationName = automationName;
    }

public string AutomationName { private set; get; }

public abstract int Evaluate(EvaluateOption option, Calculator calculator);

    protected virtual void InvokeOperator(Calculator calculator)
    {
        calculator.InvokeFunction(AutomationName);
    }
}

Automation name refers to constants within Operators class which correspond to function names in calculator (i.e. AutomationElement.NameProperty values):

internal class Operators
{
    public const string Negate = "Negate";
    public const string Divide = "Divide";
    public const string Multiply = "Multiply";
    public const string Subtract = "Subtract";
    public const string Add = "Add";
    public const string Sqrt = "Square root";
    public const string Percentage = "Percentage";
    public const string Reciprocal = "Reciprocal";
}

A binary operator is represented using BinaryOperator abstract class:

internal abstract class BinaryOperator : Operator
{
    public BinaryOperator(string automationName)
        : base(automationName)
    {
    }

    public IOperand Left { get; set; }

    public IOperand Right { get; set; }

    public override int Evaluate(EvaluateOption option, Calculator calculator)
    {
        VerifyEvaluationState();

        int result = 0;

        switch (option)
        {
            case EvaluateOption.UIEvaluate:

                calculator.Clear();
                int leftValue = Left.Evaluate(option, calculator);

calculator.Clear();
int rightValue = Right.Evaluate(option, calculator);

calculator.Clear();

calculator.Result = leftValue;

InvokeOperator(calculator);

calculator.Result = rightValue;

calculator.Evaluate();

result = int.Parse(calculator.Result.ToString());

break;

            case EvaluateOption.ActualEvaluate:
                result = Evaluate(Left.Evaluate(option, calculator), Right.Evaluate(option, calculator));
                break;
        }

return result;
}

    protected void VerifyEvaluationState()
    {
        if ((Left == null) || (Right == null))
        {
            throw new InvalidOperationException();
        }
    }

protected abstract int Evaluate(int left, int right);
}

As can be seen if EvaluateOption.UIEvaluate is used within Evaluate function then UI automation is used to mimic the user’s input in calculator; otherwise evaluation of expression is done in code. The other Evaluate overload is implemented in derivative classes such as AddOperator, SubtractOperator, MultiplyOperator and DivideOperator. AddOperator class is as follows (rest of the operators are very similar differing only in actual computation and automation name in constructor):

internal class AddOperator : BinaryOperator
{
    public AddOperator()
        : base(Operators.Add)
    {
    }

    protected override int Evaluate(int left, int right)
    {
        return left + right;
    }
}

NumberOperator is just a number constant in expression tree:

internal class NumberOperator : Operator
{
    public NumberOperator(int number)
        : base (null)
    {
        _number = number;
    }

    public override int Evaluate(EvaluateOption option, Calculator calculator)
    {
        return _number;
    }

private readonly int _number;
}

ExpressionTree class creates an expression tree from a XML stream via CreateTree method:

internal static class ExpressionTree
{
    internal static IOperand CreateTree(Stream stream)
    {
        XDocument doc = XDocument.Load(stream);
        return CreateOperend(doc.Root);
    }

    private static IOperand CreateOperend(XElement operandElement)
    {
        XAttribute type = operandElement.Attribute("Type");

IOperand operand = null;

        switch (type.Value)
        {
            case "NumberOperator":
                operand = new NumberOperator(int.Parse(operandElement.Attribute("Value").Value));
                break;

            default:
                string qualifyingName = "CalculatorTests." + type.Value;
                operand = Activator.CreateInstance(Type.GetType(qualifyingName)) as IOperand;

List<XNode> childNodes = new List<XNode>(operandElement.Nodes());

                if (operand is BinaryOperator)
                {
                    BinaryOperator binaryOperator = operand as BinaryOperator;
                    binaryOperator.Left = CreateOperend(childNodes[0] as XElement);
                    binaryOperator.Right = CreateOperend(childNodes[1] as XElement);
                }
                else if (operand is UnaryOperator)
                {
                    UnaryOperator unaryOperator = operand as UnaryOperator;
                    unaryOperator.Operand = CreateOperend(childNodes[0] as XElement);
                }
                break;
        }

return operand;
}
}

CreateTree calls CreateOperend method that parses the XElement’s Type attribute to determine type of operand and depending on whether type is NumberOperator (in which case it looks for Value attribute) or otherwise (unary or binary operand in which case it looks for child Operand xml elements), it creates and returns an IOperand recursively (if needed). Finally the root operand is returned. As an example the expression (6 - 1) + (7 * 9) is represented using the xml:

<?xml version="1.0" encoding="utf-8" ?>
<Operand Type="AddOperator">
<Operand Type="SubtractOperator">
    <Operand Type="NumberOperator" Value="6"/>
    <Operand Type="NumberOperator" Value="1"/>
</Operand>
<Operand Type="MultiplyOperator">
    <Operand Type="NumberOperator" Value="7"/>
    <Operand Type="NumberOperator" Value="9"/>
</Operand>
</Operand>

Now that we have successfully created the infrastructure for interacting with the calculator and evaluating the expression tree, we can start authoring test cases:

Verify data entry of a random number in calculator and verify result shows up correctly in the UI

[TestMethod]
public void TypeRandomNumber()
{
    using (Calculator calc = new Calculator())
    {
        int number = new Random().Next(100, 10000);
        string stringRep = number.ToString();
        calc.Result = stringRep;
        Assert.AreEqual(stringRep, calc.Result);
    }
}
Verify cut and paste functionality:

[TestMethod]
public void VerifyCopyPaste()
{
    using (Calculator calc = new Calculator())
    {
        string stringRep = new Random().Next(100, 10000).ToString();
        calc.Result = stringRep;
        calc.OpenMenu(Calculator.CalculatorMenu.Edit);
        calc.ExecuteMenuByName("Copy");

        calc.Clear();

        calc.OpenMenu(Calculator.CalculatorMenu.Edit);
        calc.ExecuteMenuByName("Paste");

        Assert.AreEqual(stringRep, calc.Result);
    }
}
Verification of expression tree computation from embedded xml resource files:

[TestMethod]
public void VerifyExpressionTrees()
{
    string[] files = new[]
    {
        "CalculatorTests.Resources.SimpleNumberOperator.xml",
        "CalculatorTests.Resources.SimpleAdditionOperator.xml",
        "CalculatorTests.Resources.MixedOperators.xml"
    };
    using (Calculator calc = new Calculator())
    {
        foreach (string file in files)
        {
            calc.Clear();
            IOperand expression = LoadExpressionTreeFromFile(file);
            Assert.AreEqual(expression.Evaluate(EvaluateOption.ActualEvaluate, calc), expression.Evaluate(EvaluateOption.UIEvaluate, calc));
        }
    }
}

private IOperand LoadExpressionTreeFromFile(string resourceFileName)
{
    return ExpressionTree.CreateTree(this.GetType().Assembly.GetManifestResourceStream(resourceFileName));
}

You may run the tests using Visual Studio test manager and will see calculator instances popping up and controls being manipulated as per the test cases followed by termination of calculator process (remember the IDisposable implementation in Calculator class that does the teardown).

So that’s it, you have just seen an automation client in action! Stay tuned for my next blog where I will demonstrate how to implement automation support during the development of custom controls.

You may also want to look at project White on codeplex which is based on UI automation framework and aims to simplify UI automation programming model.

Create custom windows in WPF with ease

2010-12-27T18:39:00.001-08:00

One of the features I wanted to add to Synergy toolkit was the ability to quickly create custom theme windows with all the features of a standard windows. In this article I am demonstrating how to create a custom window theme visually using declarative XAML and apply it to windows in your applications.

You can download Synergy SDK with full source code here.
You may also want to see my window docking solution in Synergy here.
I will be posting updates on Synergy SDK on my twitter account: MixModes

The sample application Synergy uses main window as the custom window whose theme is defined within Windows.xaml resource dictionary within MixModes.Synergy.Themes project.

Declarative is the key

As we all know XAML is declarative and simple and so there is no reason why traditional approach of writing code for windows and controls should apply. One must be able to simply create a visual and stick it in a control template to get things working. That was exactly my motivation when I started out developing look-less window functionality in Synergy.

Declare a template

The first thing you may want to do in creating a custom window is to actually create a visual template. The easiest way to create this template is to create a user control in Microsoft Blend and then define extension points in XAML that look-less control will liven up once the template is applied. Once the visual is ready all that needs to be done is a style creation for CustomWindow where the template can be pasted and then the temporary user control can be discarded.

Following extension points are supported for current implementation:

PART_TITLEBAR (UIElement) - For displaying window title, dragging and maximize / restore operations
PART_MINIMIZE (Button) – Window minimize button
PART_MAXIMIZE_RESTORE (Button) – Maximize restore button
PART_CLOSE (Button) – Close button
PART_LEFT_BORDER (UIElement) – Left resizable border
PART_RIGHT_BORDER (UIElement) – Right resizable border
PART_TOP_BORDER (UIElement) – Top resizable border
PART_BOTTOM_BORDER (UIElement) – Bottom resizable border

One more thing to note is that while defining the window template, you must declare the ContentPresenter (which ultimately contains window content) within AdornerDecorator tag (which is the adorner layer for the window) as this is WPF requirement.

Here is the template I have created within Windows.xaml resource dictionary within MixModes.Synergy.Themes project:

<Border Height="1"
                                        DockPanel.Dock="Top"
                                        Background="{DynamicResource MainWindowTitleBarSeparator}" />

<AdornerDecorator DockPanel.Dock="Bottom">
                                    <ContentPresenter />
                                </AdornerDecorator>
                            </DockPanel>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Maximized}"
                                     Value="False">
                            <Setter TargetName="MaximizeRestoreImage"
                                    Property="Source"
                                    Value="/MixModes.Synergy.Resources;component/Resources/Maximize.png" />
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

This is a pretty simple theme which creates a rounded rectangle window with 2 pixel wide resizers and custom window minimize, maximize and restore buttons. It also contains a template trigger that changes the image of maximize restore button if window is not maximized.

The window created using this theme looks like the following:

Inherit from CustomWindow class

The final step is to inherit from CustomWindow class (which in turn inherits from Window class) instead of directly inheriting from Window class and refer to the style created in the previous step. This is again very simple:

Import visual framework namespace:
xmlns:visualFx="http://mixmodes.com/visualFx"
Inherit from CustomWindow class:
use “visualFx:CustomWindow” as your window tag in XAML
Refer to the style created in previous step in your visualFx:CustomWindow tag:
Style="{DynamicResource MainWindow}"

That’s all you have to do to get your custom window working !

How does it work?

If you crack open the CustomWindow class you will see that bulk of the work happens in the AttachToVisualTree method which is called from OnApplyTemplate (which in turn is called anytime template is applied to our custom window).

AttachToVisualTree in turn calls AttachCloseButton, AttachMaximizeButton, AttachMaximizeRestoreButton, AttachTitleBar and AttachBorders methods, each of which queries for visual parts (the PART_… named parts we defined in the template) and attaches functionality via events.

So that’s it ! Creating custom windows using Synergy is really that simple !

Building a docking window management solution in WPF

2010-12-27T10:17:00.001-08:00

Window docking is a familiar functionality in multi-windows applications. As a user interface developer this behavior has always charmed me and so I thought of developing the same functionality in my own WPF toolkit. I know there are many implementations of similar solutions out there, some even open source, but my aim was to take this personal project as a challenge and learning opportunity.

I should also mention that the docking solution I have implemented is part of a bigger WPF toolkit that I am building on an ongoing basis under my company MixModes Inc, however I intend to keep it open source and royalty free project. To preview the full feature set of this library you can visit my blog here.

Many existing implementations of window docking solutions have floating windows as separate windows managed under MDI parent window. However I have kept floating windows contained strictly within parent window as I intend to port this code to Silverlight soon.

You may download the source code here.

Anatomy of Synergy Toolkit

MixModes Synergy toolkit consists of following top level projects:

MixModes.Synergy.Resources – Contains image and language resources
MixModes.Synergy.Themes – Defines default themes for user controls, custom windows, colors, brushes and text themes
MixModes.Synergy.Utilities – Common utilities
MixModes.Synergy.VisualFramework – Contains behaviors, adorners, commands, user controls, docking framework and other WPF specific functionality
Synergy – Sample project highlighting features of the toolkit

Anatomy of a Dockable window

To understand window docking solution, it is necessary to understand the very primitive control that drives it all – the dockable window. A dockable window is a special window that in addition to content and title can be in following several states:

1. Pinned state – Dockable window can be pinned to the side of parent window to have consistent visibility. Usually frequently used content is pinned for easier and constant access.

2. Auto hidden state – Less frequently used windows can be auto hidden so when mouse is not hovering over them they collapse into a condensed form (which I refer to as header). When mouse hovers over the headers, full window slides out from the docked side.

3. Document state – When used as a document, dockable windows can merge as tab items within a tab control.

4. Floating – Usual floating windows

Docking window support is provided by DockPane control that is derivative of HeaderedContentControl. In addition to Header and Content properties that it inherits from HeaderedContentControl, it also contains the following properties:

Icon – Icon for the docked window
CondencedDockPanelTemplate – Template for condensed DockPane
CondencedDockPanel – Condenced form of DockPane
DockPaneState – State of the dock pane

DockPane also contains the following events:

Close – Close event
TogglePin – Toggling of pin / auto-hide button
HeaderDrag – Notification that user has started to drag header (title) of the DockPane

Default theme for DockPane is defined in the DockPane.xaml resource dictionary within MixModes.Synergy.Themes project.

Document Containers

DockPane(s) are contained within document containers. Document container is modeled via DocumentContainer class which is derivative of ContentControl. DocumentContainer can be in one of the following (mutually exclusive) states:

Empty – DocumentContainer does not contain any DockPane
ContainsDocuments – DocumentContainer contains one or more DockPane(s) as documents
SplitHorizontally – DocumentContainer is split horizontally
SplitVertically - DocumentContainer is split vertically

DocumentContainer is complex in terms of its template since it is required to represent either a split view or a tabbed view. I have used a persistent TabControl within the template that is hidden if Content property is ever non-null. Content of-course is used exclusively to contain split views via Grid with two children DocumentContainer.

DocumentContainer contains the following properties:

State – State of the DocumentContainer
Documents – contains documents represented in TabControl
DocumentsTab – TabControl containing documents
DockIllustrationPanel – This is a panel which contains docking illustration points indicating to the user where a content should be docked. If user drags a DockPane to any one of these points it gets docked at the respective position. The image below shows content of the DockIllustrationPanel:

DocumentContainer contains the following methods:

AddDockPane(DockPane, ContentDockPoint) – Adds a DockPane as a docked window
AddDocumentContainers(IEnumerable<DocumentContainer>, bool) – Splits and add child DocumentContainers
AddDocument(DockPane) – Adds a DockPane as a tabbed document
RemoveDocument(DockPane) – Removes a DockPane as a tabbed document

The template of DocumentContainer contains the following visuals in layers (bottom visuals are in increasing Z-Order):

TabControl (PART_DOCUMENTS) – Bound to Documents property of DocumentContainer
ContentPresenter – This is where split children are added
Grid (PART_DOCK_POINTS) – Panel for hosting dock illustration points
Grid (PART_DOCK_ILLUSTRATION) – DockIllustrationPanel for illustrating future docking via cues

Windows Manager

Windows manager is the component that binds DockPanel(s) and DocumentContainer(s) together to provide window management functionality in applications. In addition, window manager contains auto-hide and pinned dock points on all four window sides so DockPane(s) can be pinned or auto hidden outside of the DocumentContainer(s). WindowsManager also contains the root DocumentContainer that can host documents in tab control or nested-split DocumentContainer instances hosting documents.

WindowsManager has the following properties:

DockPaneIllustrationStyle – Illustration for docking a window within WindowsManager or DocumentsContainer
DockIllustrationContentStyle – Illustration for merging documents while dragging a DockPane in TabControl
ActiveWindowsManager – Static property indicating a WindowsManager undergoing the drag operation
DraggedPane – DockPane that is being dragged
<Orientation>WindowHeaders – StackPanel containing condensed auto-hidden DockPane(s)
<Orientation>PinnedWindows – DockPanel containing pinned DockPane(s)
DocumentContainer – Root document container
DockingIllustrationPanel – Docking illustration panel for future pinned DockPanel(s)
PopupArea – DockPanel where auto-hidden DockPane(s) slide out when mouse hovers upon the condensed headers
FloatingPanel – Canvas that contains floating DockPane(s)
DockingPanel – DockPanel that contains dock points for pinned windows as shown in image below:

WindowsManager has the following methods:

AddPinnedWindow(DockPane, Dock) – Adds a pinned DockPane
AddAutoHideWindow(DockPane, Dock) – Adds an auto-hidden DockPane
AddFloatingWindow(DockPane) – Adds a floating DockPane
RemoveDockPane(DockPane) – Removes a DockPane from (pinned, auto-hidden or floating portion of ) WindowsManager
Clear – Clears the WindowManager of all DockPane(s)
StartDockPaneStateChangeDetection – Starts state monitoring for DraggedPane
StopDockPaneStateChangeDetection – Stops state monitoring for DraggedPane

How it all works together

The image below illustrates the relationship between various components of the docking solution:

Structurally WindowsManager is the encompassing component that contains pinned and auto-hidden DockPane(s). It also contains the root DocumentContainer. DocumentContainer on the other hand can either contain documents in the tab control by wrapping DockPane within DocumentContent instance or it can contain split windows where a grid holds child DocumentContainer(s) each of which recursively can either contain documents or further child DocumentContainer(s).

WindowsManager constantly monitors the state change of DockPane. When a DockPane drag is detected, it is placed on the FloatingPanel canvas of WindowsManager as a floating window that can be dragged around. During a drag of a DockPane hit testing is turned off on the DockPane so mouse events can flow down to controls below it such as WindowsManager and DocumentContainer.

For orchestrating drag and drop and docking functionality I have used a behavior driven approach. The idea is to expose functional end-points (such as methods and properties) on visual entities such as DockPane, DocumentContainer and WindowsManager and use behaviors to orchestrate and call these functional end-points. This approach also resulted in manageable-encapsulated components that were easier to trace and test.

DockPointBehavior monitors the dragged DockPane over WindowsManager and pops up dock points for pinning it. ContentPointBehavior on the other hand injects similar functionality within DocumentContainer for splitting and tab merging purpose.

Both WindowsManager and DocumentContainer have dock illustration grid containing the docking behavior. DockPointBehavior behavior illustrates pinned docking illustration on WindowsManager whereas ContentDockBehavior illustrates splitting and tab merging illustration on DocumentContainer.

Using the code

Using WindowsManager is extremely simple:

Import the namespace in the xaml
xmlns:visualFx="http://mixmodes.com/visualFx"
Drop the WindowsManager in the xaml
<visualFx:WindowsManager x:Name="WindowsManager"/>
Start creating DockPane and insert them within WindowsManager / DocumentContainer
DockPane pane = new DockPane();
pane.Header = …
pane.Content = ….
WindowsManager.AddPinnedWindow(pane, Dock.Top);
// OR
WindowsManager.AddAutoHideWindow(pane, Dock.Left);
// OR
// Assuming DocumentContainer is either in Empty or ContainsDocuments state
WindowsManager.DocumentContainer.AddDocument(pane);

Serializing Window State

Out of the box, Synergy provides XML serialization of window states through XmlWindowsManagerSerializer and XmlWindowsManagerDeserializer classes. Custom serialization is supported via specialization of base classes WindowsManagerSerializer and WindowsManagerDeserializer respectively.

XML serialization of WindowsManager using XmlWindowsManagerSerializer requires two pieces of information during construction:

DockPane writer – An Action<XmlElement, DockPane> instance that can write additional metadata about a DockPane to the XmlElement.
Document writer – A Func<DocumentContent, string> instance that takes in a DocumentContent and returns a string representation of the content. Note: DocumentContent.DockPane property returns the associated DockPane, however the Header and Content properties of DockPane are set to null. To access Header and Content property, use the Header and Content properties of DocumentContent instance directly.

Once XmlWindowsManagerSerializer instance is created, a call to Serialize(Stream, WindowsManager) method serializes WindowsManager to the stream.

Similar to serialization process, deserialization process requires an instance of Action<DockPane, string> within the constructor of XmlWindowsManagerDeserializer to de-serialize a DockPane from previously saved string representation. Deserialization does not require additional Action to realize DocumentContent since DocumentContent is inherently a serialization wrapper for DockPane.

Once XmlWindowsManagerDeserializer instance is created, a call to Deserialize(Stream, WindowsManager) deserializes the WindowsManager to previously saved state.

All the docking functionality can be exercised by using the sample app (Synergy project) with the source code. Any comments or suggestions or bug-reports are as usual always welcome. Happy coding !

Dynamically bind value converters to elements in XAML

2010-12-23T13:09:00.001-08:00

Recently I faced a scenario where I wanted to create a generic control template in WPF for a user control that refers to value converters dynamically in order to render parts of the control.

Depending on the enumeration passed as the parameter, converter is supposed to render different aspect of the object. The actual formatter is unknown at the base control level except for the enumeration.

Concrete implementation/usage of the control should specify the converter as its property. I tried doing this in XAML:

SomeProperty = {Binding Converter={Binding MyConverterProperty} }

The above will result in runtime exception as Converter property is not DependencyProperty within BindingMarkupExtension.

There are three ways of achieving above:

1. Create a virtual converter and have object implement IConvertable:

One can declare IConvertable interface that provides a converter:

public interface IConvertable
{
IValueConverter Converter {get;}
}

and a "virtual" converter

public class VirtualConverter : IValueConverter
{

    public void Convert(object value, ....)
    {
        IValueConverter converter;
        if ((value is IConvertible) && ((converter = (value as IConvertible) != null)))
        {
            converter.Convert(....);
        }
        throw new InvalidOperationException();
    }
    :
    :
}

And now you can create a static resource of type VirtualConverter and use Binding normally specifying VirtualConverter as the converter.

2. Implement IConvertible but instead of creating Virtual converter, declare a markup extension that takes in IConvertible and returns IValueConverter. Then your markup will look like:

SomeProperty = "{Binding Converter={ConverterExtension Source={Binding}}}"

3. Use attached property to define Converter on an object rather than implementing IConvertible and specify it as converter in binding.

Introducing MixModes Synergy 2010

2010-12-14T09:03:00.001-08:00

For the past few months I have been engaged in the development of Windows Presentation Foundation (WPF) based SDK called MixModes Synergy 2010, under my company MixModes Inc. Synergy is a WPF toolkit that unleashes the power of WPF via simpler programming constructs and provides out of the box custom controls that allows Rapid Application Development of line of business applications. MixModes Synergy 2010 can be downloaded here.

This SDK will be ongoing development that MixModes Inc. will pursue to provide best possible support for WPF and Silverlight development. Some of the features in version 1.0 include:

Base framework for WPF development
Easy and type-safe adoption of Model-View-ViewModel pattern
Custom visual adorners
Logical behaviors
Out of the box custom controls

MixModes Synergy 2010 is free for all uses and is MixModes Inc.’s initiative to contribute to the developer community. In this blog I will uncover the solutions Synergy provides in each of the above categories.

Base framework for WPF development

Commanding

CommandBase class provides a flexible implementation for custom commands. This class works on an Action<object> instance for command invocation and an optional Predicate<object> for command execution evaluation. If predicate is not specified, it is assumed that command can execute at any time. Also CommandBase exposes CanExecuteChanged event that is registered with CommandManager which then re-queries validity of command execution based on user interaction with the application.

Simply speaking one can instantiate a command base class as follows:

CommandBase myCommand = new CommandBase(arg=>DoFoo(arg), arg=> CanFoo(arg));

FrameworkElement extensions

FrameworkElementExtensions class contains a list of extension methods for FrameworkElement instances that help in finding logical and visual parents of specified type, clearing adorner layer for element, enforcing element size and displaying tooltips very easily.

Window enhancements

CustomWindow class provides a fast way to create a custom window by just declaring a template for custom window and specifying the named parts for window controls.

Dialog window enhancements

DialogWindow provides a true dialog box look and feel for modal dialogs by setting appropriate window style on the dialogs. This fixes WPF bugs around inability of dialog windows to hide control box.

DependencyProperty change detection

ObservableDependencyProperty class can monitor change in a dependency property of a dependency object without need for separate events. To monitor changes in a dependency property for a dependency object one needs to supply a callback delegate of type DependencyPropertyChangedEventHandler. Following code illustrates usage of ObservableDependencyProperty:

ObservableDependencyProperty descriptor = new ObservableDependencyProperty(
typeof(string),
TextBox.TextProperty,
OnTextChanged);

descriptor.AddValueChanged(myTextBox);

void OnTextChanged(object sender, DependencyPropertyChangedEventArgs e)
{
       TextBox changedBox = sender as TextBox;
       string oldValue = e.OldValue as string;
       string newValue = e.NewValue as string;
}

If monitoring of a specific dependency property on a list of elements is required, ObservableDependencyPropertyCollection provides the necessary plumbing for ease of tracking changes.

_dockPaneStateMonitorList = new ObservableDependencyPropertyCollection<DockPane>(DockPane.DockPaneStateProperty);
_dockPaneStateMonitorList.DependencyPropertyChanged += OnDockPaneStateChanged;

_dockPaneStateMonitorList.Add(myDockPane);

private void OnDockPaneStateChanged(object sender, DependencyPropertyChangedEventArgs e)
{
DockPane pane = sender as DockPane;
DockPaneState state = (DockPaneState)e.NewValue;
}

Easy and type-safe adoption of Model-View-ViewModel pattern

ViewModelBase class provides a type safe RaisePropertyChanged method for derived classes and hence provides compile time property name checks. Rather than passing in a string as the property name, derived classes raise PropertyChanged event as follows:

RaisePropertyChanged(x=>this.MyProperty);

Custom visual adorners

MixModes Synergy allows for visual creation of adorners. In fact any visual can be transformed into a adorner with practically few lines of code. All this magic is done through the use of ContentAdornerBase class that makes creating visual adorners no different than creating a user control. It just takes a few steps to create a visual adorner:

Create a visual resource in your resource dictionary – This can be done using Blend designer. Ensure that x:Shared is set to False on the resource. This means that anytime you host the resource on multiple elements, a copy of visual tree shall be created preventing duplicate parenting issues.
If the resource dictionary is different from default application resource dictionary, place a link in the merged dictionary section of default application dictionary to load it.
Derive a class from ContentAdornerBase; load and pass in the visual resource from resource dictionary and pass it onto the base constructor.
Add the derivative class to adorned element’s adorner layer.

As an example, let’s assume that you want to create a reusable adorner that helps resize adorned element. Following the steps above you could define a resource in the resource dictionary ResizableAdorner.xaml:

Link ResizableAdorner.xml to your application resource dictionary as one of the merged dictionary:

Create a class ResizingAdorner deriving from ContentAdornerBase as follows:

/// <summary>
/// Resizing adorner
/// </summary>
internal class ResizingAdorner : ContentAdornerBase
{
        /// <summary>
        /// Initializes a new instance of the <see cref="ResizingAdorner"/> class.
        /// </summary>
        /// <param name="adornedElement">The element to bind the adorner to</param>
        /// <exception cref="ArgumentNullException">adornedElement is null</exception>
        internal ResizingAdorner(UIElement adornedElement)
            : base(adornedElement, Application.Current.Resources[“ResizableAdorner”] as FrameworkElement)
        {
            AttachNamedParts();
        }

        /// <summary>
        /// Attaches the named parts
        /// </summary>
        private void AttachNamedParts()
        {
            // Use FindElement<T> to find named parts and attach behavior here
        }
}

Finally just place the adorner to adorned element’s adorner layer:

AdornerLayer layer = AdornerLayer.GetAdornerLayer(someFrameworkElement);
if (layer != null)
{
layer.Add(new ResizingAdorner(someFrameworkElement));
}

That’s all the steps you need to create a visual adorner !

Logical behaviors

Logical behavior is a new concept introduced by MixModes Synergy that decouples behavior from its visual parent. The idea is to define visual behavior in control templates that can then bind to an ancestor visual element or a template parent in attaching the behavior. To create a logical behavior, follow the following steps:

Derive a behavior from LogicalParentBehavior<T> class and supply the logical parent as the generic parameter during derived class definition.
In the overridden OnAttached method, call base.OnAttached and then access LogicalParent property of the base class to access the logical parent to attach behavior.
In the XAML just declare behavior in the usual fashion to any visual element.

Out of the box custom controls

MixModes Synergy provides out of the box custom controls that are easily consumable from your WPF based applications. All the controls released as part of MixModes Synergy 2010 SDK are completely look-less and can be custom themed on top of the standard themes that ships as part of the SDK. MixModes will release additional custom controls on a regular basis to enrich Synergy and provide out of the box support in the development for line of business applications.

One major control release in the current release is the window docking solution similar to docking windows in Microsoft Visual Studio. Using docking window control is very simple. In your XAML just add the WindowManager control:

<visualFx:WindowsManager x:Name="WindowsManager"/>

WindowsManager as the name suggests is the primary manager for windows in docking solution. Each dockable window is an instance of DockPane class which is a derivative of HeaderedContentControl. Hence DockPane instance can have a Header (which serves as the title of the DockPane) and a Content (which serves as the content of the DockPane).

DockPane can be added in many different ways to the WindowsManager:

As pinned window – via WindowsManager.AddPinnedWindow(DockPane, Dock) method
As auto hidden window – via WindowsManager.AddAutoHideWindow(DockPane, Dock) method
As floating window – via WindowsManager.AddFloatingWindow(DockPane) method
As a document in the main document area – via WindowsManager.DocumentContainer.AddDocument(DockPane) method

DocumentContainer is the component that organizes documents within WindowsManager (this excludes pinned, auto-hidden and floating windows since they are not considered documents).

MixModes Synergy 2010 also provides window state serialization and deserialization for your application environment to preserve and load the window environment of any complexity.

XML serialization of WindowsManager using XmlWindowsManagerSerializer requires two pieces of information during construction:

DockPane writer – An Action<XmlElement, DockPane> instance that can write additional metadata about a DockPane to the XmlElement.
Document writer – A Func<DocumentContent, string> instance that takes in a DocumentContent and returns a string representation of the content. Note: DocumentContent.DockPane property returns the associated DockPane, however the Header and Content properties of DockPane are set to null. To access Header and Content property, use the Header and Content properties of DocumentContent instance directly.

Once XmlWindowsManagerSerializer instance is created, a call to Serialize(Stream, WindowsManager) method serializes WindowsManager to the stream.

Once XmlWindowsManagerDeserializer instance is created, a call to Deserialize(Stream, WindowsManager) deserializes the WindowsManager to previously saved state.

Summary

MixModes Synergy 2010 is an ongoing project and several additions will be made to the SDK based on customer requests. Everyone is encouraged to download and play with the SDK and please send me your questions and suggestions here. Thank you all very much.

Power of Templates In Control Development Within Windows Presentation Foundation

2010-08-02T10:26:00.001-07:00

Background

WPF is very powerful framework in terms of flexibility in defining visual characteristics of the UI. The visual designing aspect of WPF allows for developer – designer collaboration (and separation of concerns). In this tutorial I will take a practical example of a card game and illustrate how to model a playing card in WPF and define templates for defining visual aspect of the card as per the sign and the value of the card.

Source Code

Complete source code of the article and be found here

Evaluating development options

I wanted to model a playing card so it is highly reusable and theme-able so other developers and designers can consume it easily. At a basic level a card must contain its value and type and be selectable. There were several development options available in WPF I could opt for:

Take an existing WPF control and theme it to represent a card and use attached properties to set its value and card type
Define a custom control and code in all the above functionality and define its theme to represent a card
Combine the above two methods - derive from an existing WPF control and define templates and additional properties on it

First approach does not allow me to declare discoverable properties of a card on existing control. While attached properties are great, they are bit hard to discover. Card’s properties are very prominent and frequently used, so I opted for a more out of the box – self contained control.

Second approach requires me to develop a custom control from scratch. So this approach is ruled out as well.

I prefer the third approach where I can leverage some capabilities of an existing WPF control and define my own custom properties on top to provide an out of box experience. And since this will be a custom control, I can define out of the box – default theme for this control. Since a playing card can be selected – deselected I choose to derive from ToggleButton control that provides with selection capabilities.

Template support

Playing card supports multiple theme depending on the type and value of the card. This information is captured within CardTemplate class a collection of which is defined as CardTemplateCollection.

public sealed class CardTemplate
{
public ControlTemplate Template { get; set; }
public CardValue Value { get; set; }
}

public sealed class CardTemplateCollection : Collection<CardTemplate>
{
}

Deriving from Collection<T> allows for native XAML serialization and one can enclose objects easily within collection tag.

PlayingCard class contains CardTemplateCollection as its CardTemplates dependency property.

private static DependencyProperty CardTemplatesProperty = DependencyProperty.Register(
                                                                                             "CardTemplates",
                                                                                              typeof(CardTemplateCollection),
                                                                                              typeof(PlayingCard),
                                                                                              new PropertyMetadata(new CardTemplateCollection(), UpdateTemplate));

Notice how a new CardTemplateCollection is set as a default property value. This is so because whenever we derive from Collection<T> and leverage XAML serialization capability, we need a valid object before it is assigned in XAML.

PlayingCard also contains a method UpdateTemplate which picks the right template for the card depending upon card value.

private void UpdateTemplate()
{
    CardTemplateCollection templates = CardTemplates;
    ControlTemplate selectedTemplate = null;

     if (templates != null)
    {
        foreach (CardTemplate template in templates)
        {
            if (template.Value == CardValue)
            {
                selectedTemplate = template.Template;
                break;
            }
        }
    }

Template = selectedTemplate;
}

Following is the complete listing of PlayingCard class:

public class PlayingCard : ToggleButton
{
    private static DependencyProperty CardTypeProperty = DependencyProperty.Register("CardType",
                                                                                     typeof(CardType),
                                                                                     typeof(PlayingCard),
                                                                                     new PropertyMetadata(CardType.Club));

    private static DependencyProperty CardValueProperty = DependencyProperty.Register("CardValue",
                                                                                      typeof(CardValue),
                                                                                      typeof(PlayingCard),
                                                                                      new PropertyMetadata(CardValue.Two, UpdateTemplate));

    private static DependencyProperty CardTemplatesProperty = DependencyProperty.Register("CardTemplates",
                                                                                          typeof(CardTemplateCollection),
                                                                                          typeof(PlayingCard),
                                                                                          new PropertyMetadata(new CardTemplateCollection(), UpdateTemplate));

    static PlayingCard()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(PlayingCard), new FrameworkPropertyMetadata(typeof(PlayingCard)));
    }
    public CardType CardType
    {
        get { return (CardType)GetValue(CardTypeProperty); }
        set { SetValue(CardTypeProperty, value); }
    }

    public CardValue CardValue
    {
        get { return (CardValue)GetValue(CardValueProperty); }
        set { SetValue(CardValueProperty, value); }
    }

    public CardTemplateCollection CardTemplates
    {
        get { return (CardTemplateCollection)GetValue(CardTemplatesProperty); }
        set { SetValue(CardTemplatesProperty, value); }
    }

    private void UpdateTemplate()
    {
        CardTemplateCollection templates = CardTemplates;

ControlTemplate selectedTemplate = null;

        if (templates != null)
        {
            foreach (CardTemplate template in templates)
            {
                if (template.Value == CardValue)
                {
                    selectedTemplate = template.Template;
                    break;
                }
            }
        }

Template = selectedTemplate;
}

    private static void UpdateTemplate(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        PlayingCard card = d as PlayingCard;
        card.UpdateTemplate();
    }
}

Notice we call UpdateTemplate method whenever CardValue or CardTemplates properties are changed.

Next step is to define and populate all the templates within the default theme of the PlayingCard control. But before we embark on that there are two pieces of visual information we would need in order to theme the card right:

The sign of the card – Depending on the type of the card we need the right symbol to appear in the template. This is achieved by CardTypeToImageConverter. Basically we define this converter with a property of type CardImageTypeCollection which contains objects of type CardImageType. CardImageType just contains CardType enum (that denotes type of card: Club, Diamond, Heart, Spade) and string uri of related image

            public sealed class CardTypeImage
            {
                public CardType CardType { get; set; }
                public string ImageSource { get; set; }
            }

            public sealed class CardTypeImageCollection : Collection<CardTypeImage>
            {
            }

    public sealed class CardTypeToImageConverter : IValueConverter
    {
        public CardTypeToImageConverter()
        {
            ImageCollection = new CardTypeImageCollection();
        }

        public CardTypeImageCollection ImageCollection { get; set; }

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            PlayingCard card = value as PlayingCard;
            if ((card != null) && (ImageCollection != null))
            {
                foreach (CardTypeImage cardTypeImage in ImageCollection)
                {
                    if (card.CardType == cardTypeImage.CardType)
                    {
                        return cardTypeImage.ImageSource;
                    }
                }
            }
            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

As can be seen this converter takes in PlayingCard as input and returns the uri of the symbol image from searching its ImageCollection.

Image of the character if card represents a character – If PlayingCard is of value Ace, King, Queen and Jack we need access to the right character image in the template. This is delegated to CardTypeToCharacterImageConverter as follows:

    public sealed class CardCharacterImage
    {
        public CardType CardType { get; set; }
        public CardValue CardValue { get; set; }
        public string ImageSource { get; set; }
    }

    public sealed class CardCharacterImageCollection : Collection<CardCharacterImage>
    {
    }

    public sealed class CardTypeToCharacterImageConverter : IValueConverter
    {
        public CardTypeToCharacterImageConverter()
        {
            ImageCollection = new CardCharacterImageCollection();
        }

        public CardCharacterImageCollection ImageCollection { get; set; }

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            PlayingCard card = value as PlayingCard;
            if ((card != null) && (IsCharacterCard(card)))
            {
                foreach (CardCharacterImage cardCharacterImage in ImageCollection)
                {
                    if ((card.CardValue == cardCharacterImage.CardValue) &&
                        (card.CardType == cardCharacterImage.CardType))
                    {
                        return cardCharacterImage.ImageSource;
                    }
                }
            }
            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        private bool IsCharacterCard(PlayingCard card)
        {
            switch (card.CardValue)
            {
                case CardValue.Two:
                case CardValue.Three:
                case CardValue.Four:
                case CardValue.Five:
                case CardValue.Six:
                case CardValue.Seven:
                case CardValue.Eight:
                case CardValue.Nine:
                case CardValue.Ten:
                    return false;
                    break;
                default:
                    return true;
                    break;
            }
        }
    }

Hence depending on the type and value of the character card, this converter returns the right image uri for the card.

Now we have all we need to define our templates for the PlayingCard control.

First let’s define CardTypeToImageConverter shared converter in resource dictionary that themes will use:

<Converters:CardTypeToImageConverter x:Key="CardTypeToImageConverter">
    <Converters:CardTypeToImageConverter.ImageCollection>
      <Converters:CardTypeImageCollection>

        <Converters:CardTypeImage CardType="Club"
                                                                     ImageSource="/CardDeckSample;component/Resources/Club.png"/>

        <Converters:CardTypeImage CardType="Diamond"
                                                                     ImageSource="/CardDeckSample;component/Resources/Diamond.png"/>

        <Converters:CardTypeImage CardType="Heart"
                                                                     ImageSource="/CardDeckSample;component/Resources/Heart.png"/>

        <Converters:CardTypeImage CardType="Spade"
                                                                     ImageSource="/CardDeckSample;component/Resources/Spade.png"/>

      </Converters:CardTypeImageCollection>
    </Converters:CardTypeToImageConverter.ImageCollection>
</Converters:CardTypeToImageConverter>

Then let’s define CardTypeToCharacterImageConverter shared converter:

<Converters:CardTypeToCharacterImageConverter x:Key="CardTypeToCharacterImageConverter">
    <Converters:CardTypeToCharacterImageConverter.ImageCollection>

      <Converters:CardCharacterImage
               CardType="Club"
               CardValue="Ace"
               ImageSource="/CardDeckSample;component/Resources/AceClub.png"/>

      <Converters:CardCharacterImage
                CardType="Diamond"
                CardValue="Ace"
                ImageSource="/CardDeckSample;component/Resources/AceDiamond.png"/>

      <Converters:CardCharacterImage
                CardType="Heart"
                CardValue="Ace"
                ImageSource="/CardDeckSample;component/Resources/AceHeart.png"/>

      <Converters:CardCharacterImage
                CardType="Spade"
                CardValue="Ace"
                ImageSource="/CardDeckSample;component/Resources/AceSpade.png"/>

      <Converters:CardCharacterImage
                CardType="Club"
                CardValue="Jack"
                ImageSource="/CardDeckSample;component/Resources/JackClub.png"/>

      <Converters:CardCharacterImage
                CardType="Diamond"
                CardValue="Jack"
                ImageSource="/CardDeckSample;component/Resources/JackDiamond.png"/>

      <Converters:CardCharacterImage
                CardType="Heart"
                CardValue="Jack"
                ImageSource="/CardDeckSample;component/Resources/JackHeart.png"/>

      <Converters:CardCharacterImage
                CardType="Spade"
                CardValue="Jack"
                ImageSource="/CardDeckSample;component/Resources/JackSpade.png"/>

      <Converters:CardCharacterImage
                CardType="Club"
                CardValue="King"
                ImageSource="/CardDeckSample;component/Resources/KingClub.png"/>

      <Converters:CardCharacterImage
                CardType="Diamond"
                CardValue="King"
                ImageSource="/CardDeckSample;component/Resources/KingDiamond.png"/>

      <Converters:CardCharacterImage
                CardType="Heart"
                CardValue="King"
                ImageSource="/CardDeckSample;component/Resources/KingHeart.png"/>

      <Converters:CardCharacterImage
                 CardType="Spade"
                CardValue="King"
                ImageSource="/CardDeckSample;component/Resources/KingSpade.png"/>

      <Converters:CardCharacterImage
                CardType="Club"
                CardValue="Queen"
                ImageSource="/CardDeckSample;component/Resources/QueenClub.png"/>

      <Converters:CardCharacterImage
                CardType="Diamond"
                CardValue="Queen"
                ImageSource="/CardDeckSample;component/Resources/QueenDiamond.png"/>

      <Converters:CardCharacterImage
                CardType="Heart"
                CardValue="Queen"
                ImageSource="/CardDeckSample;component/Resources/QueenHeart.png"/>

      <Converters:CardCharacterImage
                CardType="Spade"
                CardValue="Queen"
                ImageSource="/CardDeckSample;component/Resources/QueenSpade.png"/>

    </Converters:CardTypeToCharacterImageConverter.ImageCollection>
</Converters:CardTypeToCharacterImageConverter>

We also need to flip card signs in the bottom half of cards vertically so we capture this in a common style called VerticalFlipStyle:

Great now we have all the tools that we can make use of in our card templates. So let’s define templates for each of the possible card values and character cards starting with character card template:

You can see in Source attribute of Image used in template we use CardTypeToCharacterImageConverter (declared as shared converter above) and pass in templated parent (PlayingCard) as relative source.

Now for each of the values we declare templates. I will not cover entire template list here (you can check them out in Generic.xaml in Themes folder of source code) but I will mention template for a card of value “2”

As you can see we have used both CardTypeToImageConverter to obtain sign image and used VerticalFlipStyle to flip bottom symbols vertically to get a card similar to Figure 1 below.

Figure 1 – Templated spade card of value 2

Finally we declare default style and template of PlayingCard as below:

Notice all the templates added as CardTemplates values. UpdateTemplate method will assign the right template based on the card value. We also define selected visual state of the PlayingCard using triggers and render a gradient background. We also use triggers to define foreground color of red if card is of type Diamond or Heart. That is all we need to get our PlayingCard working. For demonstration purpose I build a complete deck of cards as a card fan and render it in a circular panel (credit: I took this panel from color swatch sample that ships with Microsoft Expression Blend). Also I bring selected card to the front by setting its Z-Index.

Figure 2 – Complete card deck with 5 of diamond selected (notice selection background gradient)

Following is the code behind for MainWindow that renders the card deck.

    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            foreach (CardType type in Enum.GetValues(typeof(CardType)))
            {
                foreach (CardValue value in Enum.GetValues(typeof(CardValue)))
                {
                    PlayingCard card = new PlayingCard();
                    card.CardType = type;
                    card.CardValue = value;
                    Deck.Children.Add(card);
                }
            }

Deck.AddHandler(ToggleButton.CheckedEvent, new RoutedEventHandler(OnCardSelected));
}

        private void OnCardSelected(object sender, RoutedEventArgs args)
        {
            if (_selectedCard != null)
            {
                _selectedCard.IsChecked = false;
                Canvas.SetZIndex(_selectedCard, 0);
            }

_selectedCard = args.OriginalSource as PlayingCard;

            if (_selectedCard != null)
            {
                _selectedCard.IsChecked = true;
                Canvas.SetZIndex(_selectedCard, 1);
            }
        }

PlayingCard _selectedCard;
}

Last Words

I hope I was able to provide some insight into power and simplicity of modeling UI from this example. WPF is very rich and flexible architecture that allows one to perform wonders with things like templates and styles. It could also be fun at the same time and so a very fatal addiction! If you have any comments or suggestions please do not hesitate to leave a note. Thanks !

Easy Perforce setup

2010-06-11T20:25:00.001-07:00

After trying out many source code control systems, I personally found perforce to be the easiest to set up and maintain. Before settling on perforce I tried Mercurial, Subversion, CVS and Microsoft Team Foundation Server (it was so darn complicated that I gave up on it). So here I am sharing these tips / experiences with you to make your Perforce set up experience easier. But before I begin I must mention that I am not a Unix person, but here are common problems I found with these SCC:

What to use ? – There are so many client and server editions that I don’t know which one to download! On top of that everyone seems to have their own distinct favorite making it hard to choose.
Hard to install and configure - If you are lucky to get one of these installed you need additional degree to learn how to configure them up. Mercurial was relatively easy to set up but it was not intuitive for me to add files to the depot.
Limited (or lack of free) integration with tools – I use visual studio for my development and it is a must for me to use a SCC that integrates with visual studio. No command line or shell support is not good enough.

I found perforce easy to set up and configure. It also is flexible to store depot files and version database at flexible locations. You can configure P4ROOT system variable to indicate to perforce where you want it to store version database (make sure you restart perforce service after setting P4ROOT). To specify where perforce should store files in depot, type p4 depot <depot_name> where depot_name is the name of your depot (default is “depot”). This will bring up notepad configuration for depot where you can specify depot location in the Map: section (you can also use absolute paths but any path relative or absolute must always end with \… so for example D:\Depot\…). I strongly suggest having P4Root same as depot root since it makes it convenient for performing backups. Also perforce client P4V is standard client which integrates with a lot of IDEs including visual studio ! I hope this makes your perforce setup experience smoother !

Localization Made Easy In WPF

2010-02-17T15:29:00.001-08:00

Background

In this blog I will talk about localization in WPF applications. XAML is a great tool for declaratively create application interfaces and we shall use this declarative power to leverage globalization / localization capabilities of .NET. While designing this feature following considerations were paramount:

Localizing applications must be declaratively done in XAML with no code behind
XAML code must be easy to read and maintain
Runtime culture change support must be in place so applications need not reboot for culture change to take place (note: this may or may not be a feature you would want)
Solution must be efficient both in terms of memory and CPU time since operations are performed on UI thread
Design time experience must not be altered, so developers can develop UI based on default language without worrying about how it is localized at runtime

References

I took inspiration / ideas from the following posts:

Force WPF re-binding -
http://beta.blogs.microsoft.co.il/blogs/alex_golesh/archive/2009/07/14/silverlight-quick-tip-how-to-force-re-binding.aspx
Using resource files for localization both in XAML and code -
http://windowsclient.net/learn/video.aspx?v=297139
Weak references in C# -
http://www.switchonthecode.com/tutorials/csharp-tutorial-weak-references

Code for the article

You can download the code for the article here

Step 1 – Create Localized Resource Files

First step is to create resource files that hold localized resources. I created a WPF application and under Property folder I open Resources.resx and enter a string with key “Hello” and value “Hello”. This is my English resource file. Also what is most important is to pick Access Modifier as Public for this resource file or else XAML will not be able to access it.

I also created another resource file called Resources.ru-RU.resx and added it to the Property folder. In this resource file I added a string with key “Hello” and value “Здравствуйте” which obviously means hello in Russian. So depending on the culture, application should pick the right string. Also notice that in this resource file, Access Modifier is set to No code generation.

Step 2 – Create a simple Window

Next we create a simple window with two radio buttons to give the user ability to switch cultures between English and Russian and a text block that would display hello string from the correct resource dictionary.

To localize a control we need to set an attached property on the control called Localization. This property is of type LocalizationInfo that has two properties to support localization:

Property – This is the actual DependencyProperty that should display localized value on the UI. In our example we use TextBlock.TextProperty for this purpose.
ResourceKey – This is the resource key within the resource file. In our case this is “Hello”.

Here is the XAML definition of the window:

Note in bold the LocalizationInfo property and also design time text support via static Resources.Hello field. Also the radio buttons are hooked via attached handler to OnLanguageChanged method:

private void OnLanguageChanged(object sender, RoutedEventArgs e)
{
Thread.CurrentThread.CurrentUICulture =
new CultureInfo((bool)EnglishButton.IsChecked ? "en-US" : "ru-RU");
LocalizationManager.UpdateResources();
}

How does it all work?

The magic of keeping track of localizable UI elements and updating their content is done within LocalizationManager class. UpdateResources is the interesting method:

/// <summary>
/// Updates the resources after a culture change has occurred
/// </summary>
public static void UpdateResources()
{
List<WeakReference> deadReferences = new List<WeakReference>();

foreach (WeakReference reference in Elements)
{
FrameworkElement element = reference.Target as FrameworkElement;

if (element != null)
{
LocalizationInfo localizationInfo = GetLocalization(element);
if (localizationInfo != null)
{
element.SetValue(localizationInfo.Property,
Resources.ResourceManager.GetString(
localizationInfo.ResourceKey,
Thread.CurrentThread.CurrentUICulture));
}
}
else
{
deadReferences.Add(reference);
}
}

foreach (WeakReference reference in deadReferences)
{
Elements.Remove(reference);
}
}

It basically iterates over HashSet of localizable FrameworkElements and updates the content for DependencyProperty from localized resources. Note that we maintain a HashSet of weak references so UI elements can still be garbage collected without us holding references. As a cleanup phase we detect the dead references and remove them from the HashSet. That’s it now you know how to localize your WPF applications with minimal code !

How to make a perfect Web 2.0 close button using Photoshop CS4

2009-08-07T20:26:00.001-07:00

Background

In this tutorial I will explain how to create a Web 2.0 style close button with a perfect cross on it. We shall be creating this button using Adobe Photoshop CS4. Before we get started, this is how the end product will look like:

Note, all the transient images of sample are displayed in 300% zoom mode.

Step 1

The first step in creating the button is to create the cross image. For this purpose we shall create a new 128 pixel by 128 pixel Photoshop document having a resolution of 72 pixels per inch. You would ask why did we create 128 pixel by 128 pixel document? The answer is twofold. First, 128 x 128 pixel image is a standard icon size in many application (so is 16 x 16, 24 x 24, 48 x 48, 80 x 80, 256 x 256) hence by choosing these dimensions you would get the icon in the standard size. Secondly, in Photoshop the grid size is 8 pixels side square. Hence if you are indulging in creating a high precision image using pens, it is easier to snap points to grid.

Step 2

A cross is really a plus sign rotated by an angle of 45 degrees. Hence we shall first create a plus sign. Rename the background layer as Vertical_Bar as this is the layer we shall be creating our vertical bar on. Select the pen tool and zoom the image to 300% for high precision path drawing. Now click the first pen path vertex one row down from top and at the end of sixth square from left. Click to create second vertex at the horizontal distance of 4 squares from the first vertex. Now click on third vertex vertically below the second one in the second last row. Lastly click on the first vertex to obtain a closed path in the shape of vertical bar.

As you can see the vertical path is symmetrically placed in the document. Now choose Layer->Vector Mask-> Current Path. This will create a vector path corresponding to the path we have drawn. Vector paths are important since in Photoshop all image manipulation by default are pixel based. If vector paths / masks are used then image can be enlarged, shrink, rotated without any loss of quality since in this case vector components of path are manipulated and no pixel interpolation / extrapolation is done. Now select a foreground color (I chose #e5dcdc) and selecting the layer choose Edit->Fill to fill the layer with foreground color. You will see since we have applied a vector mask, only the portion of image inside the closed path will be filled with the color leaving outside area transparent as before.

Create a new layer and name it Horizontal Path. Repeat the above creating a horizontal bar this time and proceed to create vector mask and fill the masked layer with the same color. Now you should obtain a plus sign.

Step 3

Click on Vertical_Bar layer and go to Paths tab. Click on the vertical path. This should draw a solid border around the vertical path. Go back and select Vertical_Bar layer mask. Now press Ctrl + T to enter the transformation mode. In the top transformation toolbar, enter 45 in the angle textbox to rotate the layer mask by 45 degrees. Now press enter key to exit the transformation mode. Repeat the same steps for Horizontal_Bar layer.

We are done with making a perfect cross icon and ready to proceed to create the button on which this icon will be overlaid. This cross can be reused in other UI elements as well so we will save this in cross.psd file for later reuse.

Step 4

To create a fancy Web 2.0 style background we shall reuse some Photoshop styles and gradients that can help us quickly set the effects we want. I recommend downloading these styles from http://myphotoshopbrushes.com/styles_and_gradients. I personally downloaded 42 Button Layer Styles and Ultimate Web 2.0 Styles from the parent link. Once you download the files, open the zip file and double click on .asl file. This will register the styles automatically with Photoshop.

Step 5

Now create a 144 pixel by 144 pixel image in Photoshop. Name the layer button. Click and hold mouse on rectangle tool in Photoshop toolbox. This will pop down all the shapes from the toolbox. Select rounded rectangle from the dropdown. Ensure that path option is selected on the top toolbox. This will ensure that any shape that is drawn is considered a closed path. Select the radius to be 10px.

Now draw a rounded rectangle having one row border outside the rectangle. Again choose Layer->Vector Mask-> Current Path to create a vector mask on the layer. Now select the selection tool and select any style from the styles palette with layer selected(I selected Photobucket Join style for background).

Step 6

Now goto cross.psd and press Ctrl + D to select the entire image. Next, choose Edit->Copy Merged to copy the merged layer. Go back to the button document now and press Ctrl + V to paste the cross on top of the button layer. Now select this new layer and name it cross. With cross layer selected, select any style from the style palette to fill the cross with desired gradient (I selected Flixster Search style). There you go, now you have a trendy and crispy Web 2.0 style cross button.

Simple & Practical introduction to Asynchronous JavaScript And XML (AJAX)

2009-07-20T20:27:00.001-07:00

Background

Asynchronous JavaScript and XML or AJAX has been the revolutionary technology that enabled rich user experience over the web, much like desktop rich user experience. In this series, I will describe my journey of learning AJAX and some simple steps that will get you started with this simple but powerful technology.

Introduction

AJAX enables web developers dynamically update a web page via background asynchronous posts to the server. Hence it removes the necessity of sending entire page back to the server and cause global refresh in the browser. This results in following major benefits:

Rich user experience – a web user doesn’t have to wait until the entire page is loaded. Nor is he / she is distracted by visual information loss during the page reloads. AJAX also can be used to display progress information while a sub-portion of the page is being updated / loaded from the server.
Server scalability – Since only minimal information is exchanged between the client and the server, hence server can serve more clients in turn with the same amount of resources (memory, CPU). This helps in increasing server scalability.
Client efficiency – The client browser only needs to update a sub-portion of already loaded web page as opposed to parsing and displaying the entire page all over again.

Figure 1 – Classic Web Application Model

Figure 2 – AJAX Web Application Model

The solid lines depict synchronous operations whereas the gray lines depict asynchronous operations.

Building Blocks of AJAX

AJAX is not a technology by itself. It is an outcome of several collaborating technologies that fit their respective roles in the overall end to end asynchronous HTTP request / response process. The major building blocks involved in AJAX web application model are as follows:

Standards based presentation using XHTML and CSS.
DHTML – Browser capabilities to manipulate XML Document Object Model (DOM) for the loaded web page.
JavaScript – Base language technology for performing all client side activities during AJAX operations. Client browser must have support for JavaScript in order to support AJAX operations. Many vendors have to support both AJAX style web pages (for desktop browsers) as well as traditional post-back web pages (for mobile device browsers) to capture the entire spectrum of users.
XMLHttpRequest object – A browser must support XMLHttpRequest JavaScript object for initiating asynchronous web requests. Different browsers have different ways to retrieve this object. There are many documented shims available that explain how to retrieve this object. Here is an example from wikipedia:
// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
// when XMLHttpRequest is predefined
if (typeof(XMLHttpRequest) == "undefined") {
XMLHttpRequest = function()   {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
      catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
      catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP"); }
      catch(e) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP"); }
      catch(e) {}
    throw new Error("This browser does not support XMLHttpRequest.");
};
}

This example shows how to add a shim type of the same name XMLHttpRequest if the browser doesn’t support it out of the box. For a complete reference on XMLHttpRequest JavaScript class, refer to Mozilla Developer Center page.

I highly recommend reading a book that explains the above technologies in depth to get your basics right. I personally read Beginning Ajax with ASP.NET and found it a very good start for beginners. However later chapters in the book are outdated as technologies that they mention especially Microsoft Atlas have considerably changed since the book was released.

First AJAX Experience

In the beginning of this blog I promised you to present AJAX in a very approachable style. For years I had ignored learning this technology as I considered it to be very non-standard and hacky then. Now I differ in my opinion owing to the fact that there are many technologies in the AJAX web model that have been recognized as industry standards and are now W3C compliant. Anyways let’s now see things in action ! Create an ASP.NET web application in Visual Studio where you will test your first AJAX code. Then create an XML file note.xml in the project and overwrite its content with the following:

<?xml version="1.0" encoding="iso-8859-1"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

Next create a html document in the project ajax.htm with the following content:

<html>
<head><title>First AJAX Example</title></head>
<script type="text/javascript">
var request;
var READYSTATE_COMPLETE = 4; // Indicates completion state of XMLHttpRequest object

           // Provide the XMLHttpRequest class for IE 5.x-6.x:
        // Other browsers (including IE 7.x-8.x) ignore this
       // when XMLHttpRequest is predefined
        if (typeof(XMLHttpRequest) == "undefined") {
          XMLHttpRequest = function()   {
          try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
          catch(e) {}
          try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
          catch(e) {}
          try { return new ActiveXObject("Msxml2.XMLHTTP"); }
          catch(e) {}
          try { return new ActiveXObject("Microsoft.XMLHTTP"); }
          catch(e) {}
          throw new Error("This browser does not support XMLHttpRequest.");
        };
    }

    function ReadXmlFile() {
        // Create XMLHttpRequest object
        request = new XMLHttpRequest();

// Open an XML file
request.open('GET', 'note.xml', true);

// Attach completion handler to the request
request.onreadystatechange = DisplayXmlFile;

        // Send async request to the server with null context
        request.send(null);
    }

    function DisplayXmlFile() {
        // If request is complete, show the content of response in the xmlSpan span
        if (request.readyState == READYSTATE_COMPLETE) {
            xmlSpan.innerText = request.responseText;
        }
    }
</script>
<body>
    <span id="xmlSpan"></span><input type="button" onclick="ReadXmlFile();" value="ReadXml" />
</body>
</html>

Finally fire the app in the browser and open ajax.htm. You will see if you hit the ReadXml button, the xmlSpan span gets populated with the content of note.xml without refreshing the page as shown in Figure 3 below.

Figure 3 – Running the first AJAX example

Security Note

In order to ensure online security and prevent cross scripting attacks, the browsers limit the XMLHttpRequest object to only request resources from the same domain as the domain of the web application. You can verify this in the above example. Instead of requesting note.xml, try requesting http://www.w3schools.com/XML/note.xml which has the same content. Running the application will not allow the xml file to be fetched. Replace it again with note.xml and it will work again.

AJAX Frameworks

In recent years, the use of AJAX in major web portals have revolutionized online user experience. Although Microsoft was the first company to make use of AJAX, it was Google which truly captured the power of this technology and set a new standard for online user experience. Several frameworks have been built to increase developer productivity while developing AJAX based web applications. These frameworks can be categorized into following major categories:

Client side frameworks – JavaScript libraries/frameworks that help developers reuse/leverage client side JavaScript code.
Server side frameworks – Server side code generators/injectors combined with capabilities to extend client side AJAX JavaScript code to achieve extensibility and reusability in AJAX web application development.

Each of the following categories have their own benefits and drawbacks. The decision to pick one over the other depends in the nature of application being developed and platforms being used to develop those applications. A lot of time developers also pick a combination of tools belonging to different categories and integrate them together to achieve the desired end product. I will walk you through an example of each of the following categories in the upcoming sections.

Client Side Frameworks

Many efforts have been made to enhance JavaScript to support AJAX via reusable libraries. Quite possibly the biggest effort is the conception of jQuery – a lightweight library that emphasizes interaction between JavaScript and HTML. Microsoft has already adopted this framework which is now shipping with ASP.NET MVC Framework and in the near future will be a part of upcoming Visual Studio 2010 release. Let us rewrite our previous example using jQuery. Again follow the previous example as is except this time your html page should have the following content:

<!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>AJAX with jQuery</title>
</head>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

        $("#ReadButton").click(function() {
            $.ajax({
                type: "GET",
                url: "note.xml",
                success: function(msg) {
                    $("#xmlSpan").attr("innerText", msg.xml);
                }
            });
        });
    });
</script>
<body>
    <span id="xmlSpan"></span><input type="button" id="ReadButton" value="ReadXml" />
</body>
</html>

The script to fetch note.xml this time is so much more concise! Also note that we didn’t need to do anything funky on the server side to make it work. We didn’t had to create XMLHttpRequest object and check for browser type while doing so. Also we didn’t had to declare constants to check states for XMLHttpRequest object. Just a precise subscription to success event got our callback going!

Ok you must be wondering well, the above works well but what if HTTP POST is required instead of a GET and how does one go about executing business logic on the backend while making asynchronous HTTP POST requests. Well the answer is simple. We can use POST version of jQuery AJAX call to achieve the same. We shall see this approach in the scenario below.

Consider that you want to call a method GetPerson on your backend ASP.NET page that gives you a custom Person object. Let’s assume that this Person object is to be processed on the client and displayed to the user. Let’s see how we can go about doing it.

In order to achieve the above scenario we must understand how serialization works between a backend .NET managed object and JavaScript objects. Any object in JavaScript can be serialized to JSON (JavaScript Object Notation) format. As well as any JSON object can be deserialized into a JavaScript object. JSON is really a format for structured data interchange between systems. The BNF for object denotation in JSON is as follows:

JSON Notation := { } | {KeyValuePair}
KeyValuePair   := Key : Value | KeyValuePair, Key : Value
Key                       := String
Value                   := String | Number | JSON Notation | Array | true | false | null
Array                  := [ ] | [Value] | [Value, Value]

Hence if you have a person object storing FirstName and LastName then following can be a JSON representation of a Person instance:
{PersonInstance: {FirstName:John, LastName:Rambo}}
and an array of Person objects can be represented as :
{PersonList: [{FirstName:John, LastName:Rambo}, {FirstName:Austin, LastName:Powers}]}

The format of JSON closely matches how JavaScript interprets its objects, i.e. in the form of nested key value pairs. Yes, everything in JavaScript, properties, methods, events are just key value pairs of some sort and hence JavaScript objects are nothing but nested dictionaries! If you follow the persistence format of many other vendors this is usually a strikingly common way of representing objects (Apple also uses a similar plist format to store property lists in MacOS and also in iTunes ! For more information about plist, check out its wikipedia page).

Anyhow now back to our GetPerson example. We will create a simple ASP.NET page with the following code behind:

using System;
using System.Web.Services;

[Serializable]
public class Person
{
public string FirstName {get;set;}
public string LastName {get;set;}
}

public partial class Person_Page : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    [WebMethod]
    public static Person GetPerson(Person person)
    {
        return new Person { FirstName = person.FirstName, LastName = person.LastName };
    }
}

There is one static web method called GetPerson that accepts a parameter of type Person. Person really contains the first name and the last name of a person. GetPerson then simply returns a new Person object with the same first and last name. One important thing to note is that Person object is marked with a Serializable attribute. In CLR if an object is marked with a Serializable attribute then it can be serialized into any given format / and or built from any format back as an object. Also note the public static visibility type and WebMethod attribute on GetPerson method. This is essential to expose a method to be called by client web requests. We shall see how we can call this method from the client code below.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Person_Page.aspx.cs" Inherits="Person_Page" %>

<!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 runat="server">
<title>jQuery POST Example</title>
</head>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {
$("#GetPerson").click(function() {

            var firstname = $("#txtFirstName").val();
            var lastname = $("#txtLastName").val();
            content = "{'person':{'FirstName':'" + firstname + "', 'LastName':'" + lastname + "'}}";

            $.ajax({
                type: "POST",
                url: "Person_Page.aspx/GetPerson",
                data: content,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    var fullName = msg.d.LastName + ", " + msg.d.FirstName;
                    $("#lblFullName").text(fullName);
                }
            });
        });
    });
</script>
<body>
    <form id="form1" runat="server">
    <div>
    First Name: <input type="text" id="txtFirstName" />
    Last Name: <input type="text" id="txtLastName" />
    <br />
    <input type="button" id="GetPerson" value="GetPerson"></input>
    <span id = "lblFullName"></span>
    </div>
    </form>
</body>
</html>

We have two text fields here txtFirstName and txtLastName that capture first and the last name of the person respectively. Then we have a GetPerson button that makes the AJAX call to the code behind of the page and tries to call a web method GetPerson and passes in the constructed JSON from txtFirstName and txtLastName fields via content string variable. Once the response is received back from the server, the text of the span lblFullName is updated to show the full name in the format LastName, FirstName. Following is the screenshot while running the above code:

Figure 4 – jQuery POST Example in action

As can be seen when the CLR receives the POST requests, it queries the HTTP ContentType field value. Since it is specified as application / json, hence it deserializes the person object from JSON to actual Person instance and also serializes the resulting Person object from GetPerson back to JSON. Also notice the JSON string construction from client script in content string object. We specify the key of the object to be ‘person’ which is the same name as the formal parameter name of Person object in GetPerson web method. This allows for binding of parameters during the call so value can be passed correctly to the web method.

Server Side Frameworks

Server side frameworks dynamically generate and inject AJAX JavaScript snippets into server processed forms, so developers are not bothered writing JavaScript every time they desire AJAX style functionality in their web applications. We already have seen above that JSON and JavaScript correspond quite well to each other and one can be projected to another and vice versa. Armed with this fact, server side frameworks generate proxy JavaScript objects on the fly that correspond with backend data structures. They also inject code that call backend methods asynchronously and pass proxies to and from client browser.

There are many popular sever side AJAX frameworks such as Microsoft ASP.NET AJAX, AjaxPro, ComfortASP.NET and MagicAjax.NET. In addition, Microsoft has started a community effort to build more server side controls to bring web experience closer to desktop experience via a community project called ASP.NET AJAX Control Toolkit (although last time I checked there were quite a few bugs in this toolkit and some controls such as AutoComplete were completely broken). I must also mention that Microsoft ASP.NET AJAX server framework also contain a client side JavaScript library called Microsoft AJAX library (talk about confusing names) that closely mimics much of OO features present in managed languages such as inheritance, interfaces etc. Microsoft AJAX library can be downloaded from http://www.asp.net/ajax/downloads/.

However one must realize serious implications of using various server side frameworks in code. Most of the time these limitations are not very well documented. One common limitation is the use of conflicting HTTP handlers and HTTP modules in ASP.NET projects. HTTP modules and handlers are HTTP request handlers that get executed way before ASP.NET gets to the requests in the application pipeline. Server side frameworks usually utilize these components to inject code into HTML response via JavaScript tags. However if there are more than one server frameworks used (maybe for different purposes than AJAX) than they might conflict and suppress functionality offered by other frameworks by ‘stealing’ the HTTP requests first.

Another major limitation of server side frameworks is the way they perform asynchronous HTTP requests. ASP.NET AJAX framework for example relies heavily on ASP.NET ViewState object. Hence it is impossible to issue requests from web user controls (commonly known as partial views or *.ascx) using this framework. It is also not compatible with ASP.NET MVC framework. Hence it is important to perform background study of a framework and ensure that it is compatible with existing frameworks being used in your web applications.

Let us see an example of using server side framework. For the purpose of this example I will use AjaxPro framework. You can download AjaxPro framework for free from its website. To use this framework, create an ASP.NET web application and simply reference the downloaded assembly (AjaxPro.dll or AjaxPro2.dll depending on the version you download from the website) from your project.

Next add the following lines in web.config (note: if you already have a httpHandlers section just add the ‘add’ tag from below)

The code above implies that whatever request POST/GET is received for a resource with extension ashx within the ajaxpro folder must be forwarded to AjaxPro.AjaxHandlerFactory http handler defined in AjaxPro.2.dll assembly.

Next, we will add a new ASP.NET page named AjaxPro_Page to the project. The first thing we need to do in order to hook up this page to AjaxPro http handler is to register it with AjaxPro. We do this via AjaxPro.Utility.RegisterTypeForAjax call from within page’s Page_Load method as follows:

protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxPro_Page));
}

The next step is to define method(s) on this page that will be called from within this page by the client code. For the purpose of this example we shall define a GetTime method that will return server time to the client. It is important to mark this method with AjaxMethod attribute so a “proxy” code for this method can be generated by the AjaxPro framework. Following is the definition of GetTime method:

[AjaxMethod]
public DateTime GetTime()
{
return DateTime.Now;
}

At this time the server part of the code is complete. The complete class should look like as follows:

using System;
using AjaxPro;

public partial class AjaxPro_Page : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxPro_Page));
    }
    [AjaxMethod]
    public DateTime GetTime()
    {
        return DateTime.Now;
    }
}

Let us run this page in browser and see what gets generated on the client side. Run this page in browser and view the source for this page. You will find following three script tags that were injected by AjaxPro.AjaxHandlerFactory http handler that we registered in web.config before:

The first script is basically the code that enables OO concepts such as inheritance and virtual functions used within the code generated by AjaxPro in later stages. Hence it defines the base prototype from which all the AjaxPro client code inherits from. The second script generates core related to IFrame, request queues and general request / response logic. Third script is basically the JSON serializer / deserializer for complex .NET types such as System.Collections.Specialized.NameValueCollection, System.Data.DataSet, System.Data.DataTableDataTable, ProfileBaseConverter and IDictionaryConverter. This enables you to use this complex data types as return types for your .NET methods and use them seamlessly from AjaxPro generated proxy code.

The last script corresponds to the proxy generated for your code behind. Note that the exact ending of the App_Web_*.ashx handler is random and may not end with hghu6cj1 as in my case. If you navigate to that url and view the source for the code, you will find something similar to the code below:

AjaxPro_Page_class = function() {};
Object.extend(AjaxPro_Page_class.prototype, Object.extend(new AjaxPro.AjaxClass(), {
    GetTime: function() {
        return this.invoke("GetTime", {}, this.GetTime.getArguments().slice(0));
    },
    url: '/blogtest/ajaxpro/AjaxPro_Page,App_Web_hghu6cj1.ashx'
}));
AjaxPro_Page = new AjaxPro_Page_class();

Here we can clearly see that AjaxPro generates a JavaScript class named AjaxPro_Page_class and defines invoke code for GetTime method. What it does exactly is define a class AjaxPro_Page_class as an empty class and then add GetTime method to its prototype. This way any instance of this class or its subclass will have access to the GetTime method via prototype chaining. Finally it declares an instance of AjaxPro_Page_class named AjaxPro_Page (same name as our server code behind class) so it can be used from our scripts to invoke methods on the code behind.

Now we need to hook up the client code to call this GetTime method from AjaxPro_Page. Well its simple. Just replace the code in your AjaxPro_Page.aspx with the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPro_Page.aspx.cs" Inherits="AjaxPro_Page" %>

<!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 runat="server">
    <title>AjaxPro Example</title>
</head>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#cmdServerTime").click(function() {
            AjaxPro_Page.GetTime(function(result) {
                $("#lblServerTime").text(result.value.toString());
            });
        });
    });
</script>
<body>
    <form id="form1" runat="server">
    <div>
        Server Time: <span id="lblServerTime"></span>
        <input type="button" id="cmdServerTime" value="GetServerTime" />
    </div>
    </form>
</body>
</html>

This code basically declares a span with id lblServerTime and a button with id cmdServerTime. In the page load jQuery, it hooks up the click event of cmdServerTime to call AjaxPro_Page.GetTime method, which in turn is hooked up to the anonymous method that replaces the text for the span with the server returned time value from GetTime method. Run it and you shall see the results similar to below screenshot:

Figure 5 – AjaxPro example in action

Handling conflicting http handlers

As I mentioned before sometimes multiple http handlers on server may conflict and your application may not work as desired. Hence proper resolution may be required to enable all the handlers perform in harmony. As an example, if you try to use AjaxPro framework with ASP.NET MVC application your application will not work out of the box since MVC framework has a powerful url routing engine that captures all the incoming requests (note that in MVC framework, views are also non-existing resources) including all the resource requests for the non-existing resources the ajaxpro/ non existing folder (refer to web.config above). Hence we need an exclusion for this rule in the ASP.NET MVC url routing engine. The following code in the Global.asax.cs will achieve this:

public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("ajaxpro/{resource}.ashx");
:
}

Debugging support

As with any application development, debugging support is a must to trace execution points within the code. I test and debug my web applications both in Internet Explorer as well as in Mozilla Firefox. To enable debugging support in IE, you can follow the instructions in Jonathan Boutelle’s blog. Good thing about IE debugging (I personally use Firefox for all other purposes) is that one can leverage Visual Studio debugger rather than downloading and learning another debugger to debug JavaScript. For Mozilla Firefox, I use Venkman JavaScript Debugger and strongly recommend it as well.

Conclusion

I hope that I was able to provide a good insight into AJAX web development from a beginner’s point of view. There are many tools available which are not covered here but the most important thing is to play around with them and find the best combination that works for your needs. And of course if you learn some, share some ! Happy coding !

WPF Tips And Facts

2009-05-31T20:40:00.000-07:00

Do you know that there is no way (at least from my research and experiments) to hide the control box of a dialog. I tried several ways including using Native GetWindowLong and SetWindowLong to set the border style as fixed dialog but in vein.
One of the hardest things in WPF is to prevent re-size of a column in ListView. One way is to completely templatize ColumnHeader and comment out the thumb gripper. This approach is listed here: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/fa97b3a3-c5ca-4643-8e95-c2c23032de2c. I like the other approach listed in the article where one can attach a handler like:

MyListView.AddHandler(Thumb.DragDeltaEvent,
new DragDeltaEventHandler(this.OnHeaderResize),
true);

And handle it:

private void OnHeaderResize(object sender, DragDeltaEventArgs e)
{
Thumb SenderAsThumb = e.OriginalSource as Thumb;
GridViewColumnHeader header = SenderAsThumb.TemplatedParent as GridViewColumnHeader;

if (header == null)
{
return;
}

GridView view = (MyListView.View as GridView);

// If user tries to resize checkbox column, reset the width to fixed
if (view.Columns[0] == header.Column)
{
header.Column.Width = FixedWidth;
e.Handled = true;
}
}
ListView and CheckBox - Following is a method to add a checkbox both to the header and to the column rows in the ListView:

<ListView Height="200" x:Name="MyListView">
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<CheckBox Checked="AllSelectionChanged" Unchecked="AllSelectionChanged"/>
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding Selected}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn Header="Version" DisplayMemberBinding="{Binding Version}"/>
<GridViewColumn Header="Path" DisplayMemberBinding="{Binding Path}"/>
</GridView>
</ListView.View>
</ListView>

You can then handle global check / uncheck like:

private void AllSelectionChanged(object sender, RoutedEventArgs e)
{
CheckBox chkBox = sender as CheckBox;
if (chkBox != null)
{
bool check = chkBox.IsChecked.Value;

foreach ([YourBoundType] selection in MyListView.Items)
{
selection.Selected = check;
}
}
}

Expression Blend cannot open your custom control in designer ?

2009-04-19T20:44:00.000-07:00

Sometimes especially working with off-designer you may end up in situations where Expression Blend can no longer open your user controls. You may get some error like:

Cannot create an instance of [User Control class]

A lot of times even attaching a debugger to Blend/VS and putting breakpoints in your constructor / breaking on error would not yield any benefits. Why?

The reason is Expression Blend and Visual Studio designer(s) have stringent conditions that a user control has to follow in order for its type to be even declared compatible for loading. So if any of these conditions are violated, type will be declared unfit and designer won't even bother locating / invoking the constructor of your user control. I have identified two such conditions (there may be more):

1. In no path of your inheritance hiararchy can there be an abstract class - So if you have a control that is derived from an abstract control class you are out of luck. Even though your end control is concrete it won't work !

2. You need a public default constructor at each level of inheritance hierarchy - That means even if you have a default constructor in your most derived user control class, it is not sufficient. All base classes must also have public default constructors (even if none of the base classes call it) ! Good news is you can assert if these constructors are called in designer only mode by the following code:
if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
{
throw new InvalidOperationException("Constructor is only meant to be used by designer");
}

Dependency Injection Frameworks

2008-06-11T20:03:00.001-07:00

Background

In recent days the concept of dependency injection or inversion of control is much talked about in object oriented world of programming. I decided to give an introduction of this concept to people who want to understand this concept with little effort and use it effectively.

Introduction

So what is dependency injection anyway? Simply put it is capability of a consumer to consume a component without knowing in advance specifics/origination of the consumed component.

Now you would ask, what’s new about this? Isn’t this why we have interfaces? I will explain this more clearly by taking an example of a design pattern that is much closer to dependency injection design pattern; that is object creation or factory framework. Consider a typical factory pattern as shown in the figure below.

However, there is a subtle difference between the factory pattern shown above and truly desired object oriented abstraction. The fact that the class factory actually knows about the consumed class (which implements the desired interface that was originally requested by the consumer) breaks this abstraction and plug and play feature. This is exactly where dependency injection framework comes in.

Motivation

The motivation for dependency injection framework comes from the concepts of "Inversion of Control" and extensibility. Applications now a days are providing more and more extension points to enrich functionality of solutions. Extended plugins in such cases really take on the control from the container that hosts them in the first place (hence the term "Inversion of Control"). Hence dependency injection enables abstraction of dependencies at design time from dynamic binding at runtime. This way extension points can be instantiated, injected as properties or in constructor of the dependent object with dynamic configuration. A great example of such an application is Eclipse (www.eclipse.org).

Dependency Injection Frameworks

In the dependency injection framework, the consumer specifies a set of dependencies that it requires to be fulfilled in order to perform an operation. During runtime a configuration / declarative effort is required to specify consumable objects that can fulfill a set of dependencies. An assembler / runtime component can then perform the necessary binding prior to code execution or notify failure via exceptions. Following figure depicts this behavior.

Dependency injection frameworks really was made possible by new generation object oriented languages that supported metadata access capabilities such as reflection and dynamic code generation / loading. The idea however is much older and can be seen in dynamic linked libraries and even COM.

There are many frameworks that aid in dependency injection. I will discuss one of the major framework known as Spring.NET (http://www.springframework.net/). Spring.NET implements many proven design patterns that makes building enterprise applications easier. But I will just focus on dependency injection part of Spring.NET.

A simple example of dependency injection using Spring.NET

Trust me even sample examples that ship with Spring.NET aren’t simple. So I decided to make a small startup example to demonstrate how we can use Spring.NET to solve factory creation scenario discussed above.

For building this code I used Visual Studio.NET 2008 along with Spring.NET binaries that I obtained from http://www.springframework.net.

I then created a sample console project called SpringDotNETExample and added reference to Spring.Core assembly to the project (this assembly can be found in the bin folder of your Spring.NET installation directory. For me it was c:\Program Files\Spring.NET 1.1.2\bin\net\2.0\debug\Spring.Core.dll).

The scenario is very simple. We have a generic interface ISayHello that has a string property SayHello as follows:

namespace SpringDotNETExample
{
    public interface ISayHello
    {
        String SayHello { get; }
    }
}

I then created a class WorldSayHello that implements ISayHello as following:

namespace SpringDotNETExample
{
    public class WorldSayHello : ISayHello
    {
        public string SayHello
        {
            get { return "Hello Friend!"; }
        }
    }
}

At runtime I want to bind my configuration to create WorldSayHello as concrete implementation for ISayHello. But this mapping will be transparent to my main program which will use Spring.NET assembler to request instance of mapped object. For this example I would assume that main program requests this object via key “ISayHelloInterface” that must correspond to the mapping.

To create the mapping I created a mapping in my application configuration file app.config. Following are the contents of this file. I have bolded the interesting parts of this file, rest are just Spring.NET essentials that are less interesting.

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
   <configSections>
      <sectionGroup name="spring">
        <section name="context" type="Spring.Context.Support.ContextHandler, Spring.Core" />
       <section name="objects" type="Spring.Context.Support.DefaultSectionHandler, Spring.Core" />
     </sectionGroup>
   </configSections>
   <spring>
      <context>
         <resource uri="config://spring/objects"/>
      </context>
   <objects xmlns="http://www.springframework.net">
      <description>An example that demonstrates simple IoC features.
      </description>
      <object name="ISayHelloInterface" type="SpringDotNETExample.WorldSayHello, SpringDotNETExample"/>
   </objects>
   </spring>
</configuration>

Now my program simply requests the object mapped to key ISayHelloInterface to obtain an implementation of ISayHello interface. Notice that the mapping can be changed without compiling the code. This can provide immense versioning capabilities. Following is my main program:

using System;
using Spring.Context;
using Spring.Context.Support;

namespace SpringDotNETExample
{
class Program
{
    static void Main(string[] args)
    {
       IApplicationContext ctx = ContextRegistry.GetContext();
       ISayHello hello = (ISayHello)ctx.GetObject("ISayHelloInterface");
       Console.WriteLine(hello.SayHello);
    }
}
}

Running the program yields the following output :)

Hello Friend!
Press any key to continue . . .

In my next articles I will discuss some more advance concepts in dependency injection such as constructor injection. So stay tuned !

Microsoft Sync Framework

2008-03-30T02:17:00.000-07:00

I work for Microsoft in the Windows Live division as a Software Design Engineer. One of the most interesting problems in the distributed world is managing and synchronizing changes in data elements on various endpoints. Microsoft released a CTP of its sync framework that is out for pre RTM preview (http://msdn2.microsoft.com/en-us/sync/default.aspx).

The API consists of three major components:

Sync runtime - This is the actual sync runtime that performs transfer of knowledge and metadata and performs actual synchronization. This is the actual underlying sync engine.
Metadata store - Keeps track of metadata of elements at a given endpoint. The API includes a SQL CE implementation of metadata store that can be used out of the box. This component can be customized to address a specific solution.
Providers - The actual storage provider for elements. The API includes the filesystem and rss providers out of the box. This again can be customized and custom providers can be plugged into the sync framework.

Customization of metadata store and providers is interesting as it can be utilitzed in providing sync solutions that operate on differential data sync algorithms.

Following is an example of file syncing between two file system providers. The example utilizes CTP2 of Microsoft Sync Framework (http://www.microsoft.com/downloads/details.aspx?FamilyId=C88BA2D1-CEF3-4149-B301-9B056E7FB1E6).

using System;
using System.IO;
using Microsoft.Synchronization;
using Microsoft.Synchronization.Files;
namespace MySamples.FileSystemSync
{
class Program
{
// Folders to be synced
static string folderA = Environment.CurrentDirectory + "\\A";
static string folderB = Environment.CurrentDirectory + "\\B";

static void Main(string[] args)
{
// Prepare directories for syncing
PrepareDirectory(folderA);
PrepareDirectory(folderB);

// Create file system provider
FileSyncProvider providerA = new FileSyncProvider(Guid.NewGuid(), folderA);
FileSyncProvider providerB = new FileSyncProvider(Guid.NewGuid(), folderB);

// Create a file in folders
File.WriteAllText(Path.Combine(folderA, "A.txt"), "This file is created by A");
File.WriteAllText(Path.Combine(folderB, "B.txt"), "This file is created by B");

// Ask providers to detect changes
providerA.DetectChanges();
providerB.DetectChanges();

// Sync changes
SyncOrchestrator agent = new SyncOrchestrator();
agent.LocalProvider = providerA;
agent.RemoteProvider = providerB;
agent.Direction = SyncDirectionOrder.UploadAndDownload;
agent.Synchronize();
}

static void PrepareDirectory(string directoryName)
{
if (Directory.Exists(directoryName))
{
Directory.Delete(directoryName, true);
}
Directory.CreateDirectory(directoryName);
}
}
}

At the end of running the sample notice how both folders A and B both have A.txt and B.txt.

Embed resources in .NET assemblies

2007-11-07T18:40:00.000-08:00

Motivation: To embed binary resources within .NET assembly and avoid file dependencies

Problem: I was performing unit testing for my project and realized that I needed a file to be present in the same directory as the assembly. Now Visual Studio test project creates an out folder where it copies the binaries for execution. Initially I tried to include my binary file in the project and from the properties window set "Copy to Output Directory" to "Copy Always" hoping that after compilation file will be copied to the output folder and Visual Studio test framework will deploy it to the out folder. While the file was generated in the output folder (\bin\Output) it wasn't copied to the out folder at runtime (surprise surprise). So I thought of a broader solution to this fundamental problem. Answer: embed binaries in the assembly and extract them at runtime :).

Steps:

Assume that embedded file is called myfile.bin. First step is to create a resource file in the project. This can be done from project properties -> Resources tab.
From resources window choose to add an existing file to the resources and select myfile.bin
Use code below to extract the file at runtime at Assembly's execution path.

Code:

private void ExtractFile()
{
Assembly currentAssembly = Assembly.GetExecutingAssembly();
string outputPath = Path.Combine(Path.GetDirectoryName(currentAssembly.Location), "myfile.bin");
using (FileStream fStream = new FileStream(outputPath, FileMode.Create))
{
fStream.Write(Resources.myfile, 0, Resources.myfile.Length);
}
}