Developing modular applications with MEF

Introduction

When we create LOB (Line-of-business) applications, we use to develop them in a modular way, to satisfy many requisites:

  • The application is sold by modules – the customer can buy the sales module, but not the industrial one.
  • The application can be developed by separated teams – each team develops an independent module.
  • The modules are only loaded when the user needs it.
  • The application doesn’t need to be completely redeployed when a module changes
  • We can create new modules and add them to the application with no need to change the other modules.

To create a modular application we must create a custom infrastructure that needs lots of work and can introduce bugs to the system

.Net 4.0 brought a new resource that allows us to create modular and extensible applications: MEF (Managed Extensibility Framework). This is a framework to create extensible apps and it is thoroughly tested – Visual Studio uses MEF for its extension system: when you use a Visual Studio add-in, you are using MEF.

Introduction to MEF

Before developing out modular application, we will see how to use MEF. To use it, you must include a reference to System.ComponentModel.Composition. After adding the reference we must tell to the program which are the parts that must be combined: on one side, we have the exported classes, the modules that will be added to the main module, that will fit in the imported parts.

To do this association and the module discovery, combining the exported parts to the imported ones we use Containers. They will discover the modules and will combine the exported to the imported parts. Containers can use catalogs to find the application parts. Does this seem difficult? Let’s see how does it work in the real world.

Create a new console project and add a reference to System.ComponentModel.Composition. Create a new class and call it Menu:

public class Menu
{
    private Module _module;
    public void OptionList()
    {
       Console.WriteLine(_module.Title);
    }
}

We need to create the Module class:

public class Module
{
    public Module()
    {
        Title = "Customers";
    }
    public string Title { get; set; }
}

Now we need to declare what will be exported and where this exported class will fit, using the [Import] and [Export] attributes:


public class Menu
{
    [Import]
    private Module _module;

    public void OptionList()
    {
       Console.WriteLine(_module.Title);
    }
}

[Export]
public class Module
{
    public Module()
    {
        Title = "Customers";
    }
    public string Title { get; set; }
}

Note that the _module field in the Menu class is private - this doesn’t affect the composition. Now, we need to create our container and let it do its magic. In Program.cs put the following code:


static void Main(string[] args)
{
    var catalog = new AssemblyCatalog(Assembly.GetExecutingAssembly());
    var container = new CompositionContainer(catalog);
    var menu = new Menu();
    container.ComposeParts(menu);
    menu.OptionList();
    Console.ReadLine();
}

We have created an AssemblyCatalog (that searches the parts in the assembly – in our case, in the current assembly), then created the container that composes the parts after the menu is created. When the menu.OptionList() method is called, the module’s title is listed:

Getting more than one component

Now, you will say: but we have only one module listed. How do we do to have more than one? We must create a new interface IModule:


public interface IModule
{
    string Title { get; set; }
}

Our class will implement this interface and the export will tell that we are exporting the IModule interface:


[Export(typeof(IModule))]
public class Module : IModule
{
    public Module()
    {
        Title = "Customers";
    }

    public string Title { get; set; }
}

In order to match the parts, we must say that the imported part is also of IModule type:


public class Menu
{
    [Import]
    private IModule _module;
    public void OptionList()
    {
       Console.WriteLine(_module.Title);
    }
}

We execute the application and see that everything works like before. We can add the new modules:


[Export(typeof(IModule))]
public class Customer : IModule
{
    public Customer()
    {
        Title = "Customers";
    }
    public string Title { get; set; }
}

[Export(typeof(IModule))]
public class Product : IModule
{
    public Product()
    {
        Title = "Products";
    }
    public string Title { get; set; }
}

[Export(typeof(IModule))]
public class Supplier : IModule
{
    public Supplier()
    {
        Title = "Suppliers";
    }
    public string Title { get; set; }
}

We execute the application and… we get a ChangeRejectedException exception: “More than one export was found that matches the constraint: ContractName IntroMEF.IModule“. MEF is complaining that we have many classes that export IModule.

The [Import] attribute allows only one export for the same interface. If there is more than one, this exception is thrown. When we want that many classes export the same interface, we must use the [ImportMany] attribute. To allow importing all the classes, we need to change the import a little, changing the attribute to [ImportMany] and the property type of the _module field to IEnumerable<IModule>:


public class Menu
{
    [ImportMany]
    private IEnumerable<IModule> _modules;

    public void OptionList()
    {
        foreach (var module in _modules)
        {
           Console.WriteLine(module.Title);
        }
    }
}

We also changed OptionList to list all the modules. Now, when we execute the application, all the modules are found and listed:

Working with modules in different assemblies

You may be thinking: “this is easy to do – everything is in the same assembly. Doesn’t MEF allow modular and extensible apps?”. All the magic is in the container and in the catalog. We have created an AssemblyCatalog pointing to the current assembly, but we could do the same thing pointing to another assembly. You will answer: “this is still easy, I can add a reference to the other assembly where the modules are located. Where is the magic?”.

AssemblyCatalog is not the only catalog that we can use. We can use other catalog types, like the DirectoryCatalog, that finds parts in assemblies located in a specified folder.

Let’s change our project: in the solution, create a Portable Class Library and give it the name of IntroMEF.Interfaces. Choose the desired frameworks (use Framework 4.0 or higher) and delete the Class1.cs file. Add a new interface and put there the IModule interface, removing it from the main project. On the main project, add a reference to the interface project.

Create a new Class library project and give it the name of IntroMef.Modules. Add a reference to System.ComponentModel.Composition and remove the Class1.cs file. Add a reference to IntroMef.Interfaces and move the classes Customer, Product and Supplier to the new project.

Now we need to tell that our parts are not only in the current assembly, but they can also be found in the current folder. For that we must compose two catalogs: one for the current assembly (for the imported parts) and another for the folder (for the exported parts). We will use an AggregateCatalog to compose both catalogs:

static void Main(string[] args) { var catalog = new AggregateCatalog( new AssemblyCatalog(Assembly.GetExecutingAssembly()), new DirectoryCatalog(“.”)); var container = new CompositionContainer(catalog); var menu = new Menu(); container.ComposeParts(menu); menu.OptionList(); Console.ReadLine(); }

We execute our application and nothing happens – no module is listed. That is due to the fact that we haven’t copied the modules assembly to the folder where the executable is located. Copy the assembly IntroMef.Modules to the executable folder, open a command window and execute the application again. Now the modules are recognized.

We didn’t need to add any references to the main project in the module library nor add a reference to the library in the main project. All we had to do is to copy the file to the executable folder. MEF found the modules when the assembly file was in the correct folder.

Creating a WPF project with MEF

Now you may be thinking: “that’s great, but I don’t create any console projects – how do I do a modular project using WPF?”. The answer is, in the same way we create a console application. To show that I am not lying, we will create a WPF project.


<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="120" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <ListBox Grid.Column="0" ItemsSource="{Binding Modules}" 
             DisplayMemberPath="Title" x:Name="LbxMenu"/>
    <ContentControl Grid.Column="1" Content="{Binding ElementName=LbxMenu, 
        Path=SelectedItem.Content}" />
</Grid>

We are adding a grid with two columns. In the first one we will add the found modules and in the second one, the contents for the selected module.  To make it work, we must have two properties in every module, Title, with the module’s title and Content, a UserControl with the contents of that module.

We need to create an interface for the modules. We will do in the same way we did before, creating a new library. Create a class library and name it WPFMef.Interfaces. Add the references to PresentationCore and WindowsBase. Remove the Class1.cs file and add a new interface IModule:


public interface IModule
{
    string Title { get; }
    UIElement Content { get; } 
}

Then create a new class library for the modules. Add a new class library and name it WPFMef.Modules. Add the references to WPFMef.Interfaces, System.ComponentModel.Composition, System.Xaml, PresentationCore, PresentationFramework and WindowsBase. Create the exported classes:


[Export(typeof(IModule))]
public class Customer : IModule
{
    public string Title
    {
        get { return "Customers"; }
    }

    public UIElement Content
    {
        get { return new CustomerList(); }
    }
}

[Export(typeof(IModule))]
public class Product : IModule
{
    public string Title
    {
        get { return "Products"; }
    }

    public UIElement Content
    {
        get { return new ProductList(); }
    }
}

[Export(typeof(IModule))]
public class Supplier : IModule
{
    public string Title
    {
        get { return "Suppliers"; }
    }

    public UIElement Content
    {
        get { return new SupplierList(); }
    }
}

The next step is to create the views that will be shown when the option is selected. Create three UserControls with a content similar to this one:


<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock Text="Customer List" HorizontalAlignment="Center" 
               VerticalAlignment="Center" FontSize="18"/>
    <ListBox x:Name="List" Grid.Row="1"/>
</Grid>

On the constructor of the view, add this code to add items to the ListBox:


public CustomerList()
{
    InitializeComponent();
    List.ItemsSource = Enumerable.Range(1, 100)
        .Select(n => "Customer " + n);
}

We have added a simple window that shows “Customer 1″ to “Customer 100″, just to show what can be done. Our module library is finished.

Go back to the main project, add the references to the library WPFMef.Interfaces and to System.ComponentModel.Composition. Create a new class and give it the name of MainViewModel. We will add there the code to initialize the container and the Modules property:


public class MainViewModel
{
    [ImportMany]
    public IEnumerable<IModule> Modulos { get; set; }

    public MainViewModel()
    {
        var catalog = new AggregateCatalog(
            new AssemblyCatalog(Assembly.GetExecutingAssembly()),
            new DirectoryCatalog("."));
        var container = new CompositionContainer(catalog);
        container.ComposeParts(this);
    }
}

We only need to associate the ViewModel to the View. In MainWindow.xaml.cs, add the following code:


public MainWindow()
{
    InitializeComponent();
    DataContext = new MainViewModel();
}

The project is ready and can be executed. When we execute it, we don’t see anything in the window. We forgot to copy the assembly with the modules again. Just copy the assembly to the executable folder and run the program again. Yesssss!



The data is shown, when we select an option the content view at the right is changed.


If you don’t want to copy the project manually, you can change the project options, changing the output path for the modules, pointing to the executable path:


 


Conclusions


As you can see, MEF allows creating modular applications in an easy way that allows expanding our projects just by copying the dlls with the new modules. That works the same way in Windows Forms, WPF, Silverlight, Asp.Net and even Windows 8 (using NuGet). You have a standard way to create plug-ins that are not coupled, allow development done by many teams and adding or fixing modules with no need to recompile the whole project.


 


 

Restructuring your legacy code using MVVM and Dependency Injection with Unity

Introduction


In the previous article, “Testing the untestable with Fakes”, I have shown how to create unit tests for the legacy code that didn’t allow tests. With these tests in place we can give a step further to restructuring our code: using best practices on our project, creating code that can be easily maintainable in the future.

In this article we will restructure our code to use the MVVM pattern and Dependency injection. We will use here Unity, a framework created by Microsoft Patterns & Practices, for dependency injection.

Project architecture


Our project had all the code in code-behind and that makes creating tests a difficult task. Besides, that, it had a dependency on DateTime, that makes almost impossible to create reproducible tests.

The first step is to separate the model and the business rules from the view layer. This is done with the MVVM (Model-View-ViewModel) pattern. This pattern separates the presentation layer (View) from the data model (Model) using a binding layer, named ViewModel.

This design pattern makes extensive use of DataBinding in WPF/Silverlight/Windows Phone/Windows 8 and was created on 2005 by John Gossman, a Microsoft Architect on Blend team. If you want more information about this design pattern, you can check Josh Smith’s article on MSDN Magazine,  http://msdn.microsoft.com/en-us/magazine/dd419663.aspx.

The  ViewModel  is a class that implements the INotifyPropertyChanged interface:
public interface INotifyPropertyChanged
{
  event PropertyChangedEventHandler PropertyChanged;
}

It has just one event PropertyChanged that is activated when there is a change in a property. The Data binding mechanism present in WPF (and in other XAML platforms) subscribes this event and updates the view with no program intervention. So, all we need to do is to create a class that implements INotifyPropertyChanged and call this event when there is a change in a property to WPF update the view.

The greatest advantage is that the ViewModel is a normal class and doesn’t have any dependency on the view layer. That way, we don’t need to initialize a window when we test the ViewModel.

Creating the ViewModel


The first step for restructuring the program is to create the ViewModel. It is completely independent from the current project and doesn’t interfere with it.

We will use the same project that we’ve used in the previous article. Create a folder and name it ViewModel. In it, add a new class and name it MainViewModel:
class MainViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] 
        string propertyName = null)
    {
        if (PropertyChanged != null) 
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

Note that we’ve used the CallerMemberName attribute, from C# 5.0. It allows that the parameter propertyName from method OnPropertyChanged be filled with the name of the property that has called it, if we leave it blank. That means that if we have a property named TextData and do something like this:
public string TextData
{
    get { return _textData; }
    set
    {
        _textData = value;
        OnPropertyChanged();
    }
}

The compiler will fill the parameter with “TextData”, with no need that we explicitly fill it. This is excellent when we change the name of a property: if we had to pass the name for the OnPropertyChanged method and we forgot to change the parameter name, we would not have the change of the UI. Using the CallerMemberName atribute, this doesn’t happen.

Create a new property TextData, like we did above. Now, let’s create tests for this class. Go back to the test project and create a new class, calling it MainViewModelTests.cs. There, create a new test:
[TestClass]
public class MainViewModelTests
{
    [TestMethod]
    public void CreateMainViewModel_TextDataShouldHaveText()
    {
        var viewModel = new MainViewModel();
        Assert.AreEqual(
          "The current date is 01/01/2013 (Tuesday)", viewModel.TextData);
    }
}

When we execute this test, it doesn’t pass, because we didn’t create any code for assigning TextData.

We must create the code for the test to pass. Create the constructor of the MainViewModel class:
public MainViewModel()
{
    _textData = string.Format("The current date is {0:d} ({0:dddd})", 
       new DateTime(2013,1,1));
}

The test passes. We now refactor the code, creating a GetTextDate method:
public MainViewModel()
{
    _textData = GetTextDate();
}

private static string GetTextDate()
{
    return string.Format("The current date is {0:d} ({0:dddd})", 
      new DateTime(2013,1,1));
}

Our method is only valid for 1/1/2013. We must create another test for the other dates:
[TestMethod]
public void CreateMainViewModel_Date01022013_TextDataShouldHaveText()
{
    var viewModel = new MainViewModel();
    Assert.AreEqual("The current date is 01/02/2013 (Wednesday)", 
      viewModel.TextData);
}

This new test doesn’t pass. We need to go deeper – we need to change our program to retrieve the current date, but our test won’t work anymore (and won’t be reliable, as the date changes every day J), unless we use Fakes again. As we said before, this is not recommended. We need to remove the dependency of DateTime.

According to the book “Beautiful code”,  “all problems in computer science can be solved by another level of indirection”. That’s what we will do, create a level of indirection, an interface IDateTimeProvider, which will provide our dates. Create a folder and name it Interfaces and create a new interface IDateTimeProvider in it:
public interface IDateTimeProvider
{
    DateTime Now { get; } 
}

Implement this interface in the class SystemDateTimeProvider:
public class SystemDateTimeProvider : IDateTimeProvider
{
    public DateTime Now
    {
        get { return DateTime.Now; }
    }
}

We will pass this interface to the ViewModel using the Constructor Injection technique: we pass the interface to the constructor of the class and the interface is responsible for providing the current date. When we want the real data, we use the SystemDateTimeProvider class and when we want to test the code, we use a fake class created only for that.

The constructor of MainViewModel is changed to receive the new interface:
private readonly IDateTimeProvider _dateTimeProvider;

public MainViewModel(IDateTimeProvider dateTimeProvider)
{
    _dateTimeProvider = dateTimeProvider;
    _textData = GetTextDate();
}

With this change, we can alter the code of GetTextDate to use the provider:
private string GetTextDate()
{
    return string.Format("The current date is {0:d} ({0:dddd})", 
      _dateTimeProvider.Now);
}

Our tests need to be changed to pass the provider to the constructor of MainViewModel. We need to create a class that implements the interface and does what we want regarding to the date. In MainViewModelTests create the class FakeDateTimeProvider:
public class FakeDateTimeProvider : IDateTimeProvider
{
    private readonly DateTime _currentDateTime;

    public FakeDateTimeProvider(DateTime currentDateTime)
    {
        _currentDateTime = currentDateTime;
    }

    public DateTime Now
    {
        get { return _currentDateTime; }
    }
}

This class receives in the constructor the date we want as the current date. Now we can change our tests, passing an instance of this class:
[TestMethod]
public void CreateMainViewModel_TextDataShouldHaveText()
{
    IDateTimeProvider provider = new FakeDateTimeProvider(
       new DateTime(2013,1,1));
    var viewModel = new MainViewModel(provider);
    Assert.AreEqual("The current date is 01/01/2013 (Tuesday)", 
       viewModel.TextData);
}

[TestMethod]
public void CreateMainViewModel_Date01022013_TextDataShouldHaveText()
{
    IDateTimeProvider provider = new FakeDateTimeProvider(
       new DateTime(2013, 1, 2));
    var viewModel = new MainViewModel(provider);
    Assert.AreEqual("The current date is 01/02/2013 (Wednesday)",
       viewModel.TextData);
}

Our tests pass with no problems and we have removed the dependency to DateTime. The next step is to bind the ViewModel to the View. This is done setting the DataContext property of the view to an instance of the viewmodel. One way to do that is to put the following code on the constructor of the view:
public MainWindow()
{
    InitializeComponent();
    IDateTimeProvider provider = new SystemDateTimeProvider();
    DataContext = new MainViewModel(provider);
}

This works fine, but it has two problems:
  • We have to create an instance of SystemDateTimeProvider to pass it to the constructor of the viewmodel.
  • The viewmodel doesn’t work at design time, thus making it difficult to design the UI.

To overcome these two problems, we will use the ViewModelLocator technique, a class that will use Dependency Injection to locate and instantiate our viewmodels. We will use a Dependency injection framework to do it. There are many good ones in the market, most of them free: Castle Windsor, Autofac, StructureMap and Ninject are very good, but we will use Unity, a framework created by Microsoft Patterns and Practices.

We can install it using Nuget. On the solution Explorer, right-click the References node and choose “Manage Nuget Packages”. Search for Unity and install it:



Unity works in the following way: we register the interfaces with the associated concrete classes in the container and then we call the Resolve method to return the classes instances – all dependencies are resolved and the class instance is returned. There is no need to register the concrete classes if Unity can create them (by having a default parameterless constructor or with dependencies that can be resolved).

For example, the register phase in our classes would be:
_container = new UnityContainer();
_container.RegisterType<IDateTimeProvider, SystemDateTimeProvider>();

To get an instance of MainViewModel, we use something like:
_container.Resolve<MainViewModel>();

We do not need to register the MainViewModel class, because Unity can resolve all dependencies with the registered interfaces. Now, we can create a new class on the folder ViewModel, named ViewModelLocator:
private readonly UnityContainer _container;

public ViewModelLocator()
{
    _container = new UnityContainer();
    _container.RegisterType<IDateTimeProvider, SystemDateTimeProvider>();
}

public MainViewModel Main
{
    get { return _container.Resolve<MainViewModel>(); }
}

We register the IDateTimeProvider interface, associating it to the SystemDateTimeProvider class and create a property named Main that returns an instance of MainViewModel. To use this class, we add an instance to the Resources section of App.xaml. In App.xaml, add this code:
<Application.Resources>
     <viewModel:ViewModelLocator x:Key="Locator"/>
</Application.Resources>

Add the namespace for the ViewModelLocator in the Application class declaration:
<Application 
    x:Class="FakesTest.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:viewModel="clr-namespace:FakesTest.ViewModel"
    StartupUri="MainWindow.xaml">

Finally, in MainWindow, set the property DataContext to the property Main of the ViewModelLocator and bind the property Text of the TextBlock to the property TextData of the ViewModel:
<Window x:Class="FakesTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        DataContext="{Binding Source={StaticResource Locator}, Path=Main}">
    <Grid>
        <TextBlock x:Name="TxtDate" Text="{Binding TextData}"/>
    </Grid>
</Window>

When we do that, the current date data appears at design time:



We can then remove the code behind and our code in MainWindow.xaml.cs stays like that:
public partial class MainWindow
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

Execute the program and observe that it behaves exactly in the same way as it did before. When we execute our tests, we see that they pass, but the first test (the one we’ve created in the prior article) doesn’t pass:
Test method FakesTest.Tests.MainWindowTests.CreateWindow_TextBlockHasCurrentDate threw exception: 
System.Windows.Markup.XamlParseException: 'Provide value on 'System.Windows.StaticResourceExtension' threw an exception.' Line number '5' and line position '9'. ---> System.Exception: Cannot find resource named 'Locator'. Resource names are case sensitive.

This is due to the fact that we have the dependency between the View and the ViewModelLocator. As we wanted to remove the dependency of Fakes, we can ignore this test, adding the Ignore attribute (we could remove this test, as it doesn’t make sense anymore, but I decided to leave it, as a reminder of the old times that should never come back J):
[Ignore]
[TestMethod]
public void CreateWindow_TextBlockHasCurrentDate()
{
    using (ShimsContext.Create())
    {
        ShimDateTime.NowGet = () => new DateTime(2013,1,1);
        var window = new MainWindow();
        var mainGrid = (Grid)window.Content;
        var textBlock = (TextBlock) mainGrid.Children[0];
        Assert.AreEqual("The current date is 01/01/2013 (Tuesday)",
           textBlock.Text);
    }
}

Conclusions


We finished our restructuring. Our code, once dependent of the Window and to DateTime, making it almost impossible to test, is now detached and 100% testable.

For that, we restructured the code using a ViewModel and Dependency Injection that resolves our dependencies in an automatic way, giving us a bonus of having the data at design time. We don’t need to use Fakes anymore and the program is ready for new updates.

 

Testing the untestable with Microsoft Fakes

Introduction


Sometimes you must do some changes on legacy programs that were not built using good development practices. At that time, our first reaction is to run away from that: the probability of having problems is too high and touching the source code is almost impossible – we are working on a castle of cards, where even the slightest move can bring everything down.


The idea of refactoring (or even rewrite) the code comes from a long time, but where is the time to do that? All projects are late and that’s not a priority, its working, no? Why touch on that?


We can make the situation a little better by creating unit tests for the changes we must do, but how to do that? The program is full of dependencies, the business rules are mixed with the views, and the methods are long and complicated.


The best we could do are integration tests, that are difficult to implement and slow to execute, they will be abandoned very soon. What to do now? The solution is at hand, Microsoft implemented a Microsoft Research’s project, named Moles, and put it in Visual Studio 2012 with the name of Fakes, so we can create test for anything, including .Net Framework classes.


With Fakes we can create unit tests that run fast and don’t depend of anything, nor operating system, machine or database. Here I must do a note: although Fakes can test almost anything, that’s not an excuse to relax our coding style – you must use good programming practices on the new code and do not rely on Fakes to simulate dependencies that should not exist. When you are creating new code, try to do it in a way that you don’t need Fakes, use it only where that is really needed.


The problem


To show how to use Fakes, we will create a small WPF project that has a window with a TextBlock:


 <Window x:Class="FakesTest.MainWindow"  
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
     Title="MainWindow" Height="350" Width="525">  
   <Grid>  
     <TextBlock x:Name="TxtDate"/>  
   </Grid>  
 </Window>  

When the window is initialized, the TextBlock is fed with the current date:


 public partial class MainWindow  
 {  
   public MainWindow()  
   {  
     InitializeComponent();  
     TxtDate.Text = string.Format(  
      "The current date is {0:d}", DateTime.Now);  
   }  
 }  

We should change this code to put the weekday in the TextBlock, like in “The current date is 8/2/2013 (Friday)”. We want to use best practices and will create unit tests for the project. But how to do it? The code is mixed with the View and has a dependency on DateTime, a .Net Framework class.


Creating the test project


The first step is to create the test project. On the Solution Explorer, select the solution and right click it, selecting Add/New Project. Select Test/Unit Test Project and call it FakesTest.Tests. Add to it a reference to our project. Rename the UnitTest1.cs class to MainWindowTests.cs.


Here starts our problem: we want to test what is being shown in the TextBlock. For that, we must create a window, initialize it and look at its content. Not an easy task to do with unit tests.


 Here comes Fakes to rescue. On the test project, on the references, select the reference to the main project and select Add Fakes Assembly. A new reference to FakesTest.Fakes is added – this reference will create all fakes for the window and its componentes. To use it on our tests, we must add the references to System.Xaml, PresentationCore, PresentationFramework and WindowsBase.


 The next step is to create a fake for the DateTime class. Select the System assembly in the references and right click it, selecting Add Fakes Assembly. Now that we have all our environment “virtualized”, we can start creating tests.


To use the components created by Fakes we must surround the calls in a context, with the keyword Using, using a ShimsContext:


 using (ShimsContext.Create())  
 {  
   ….  
 }  

Inside the context, we must tell the behavior of the fake DateTime class, when the method Now will be called:


 ShimDateTime.NowGet = () => new DateTime(2013,1,1);  

To access the DateTime class created by Fakes, we must use the ShimDateTime class. The line above tells us that when the getter of the Now property is called (NowGet), it must return 1/1/2013. From now on, the test becomes exactly the same as any other unit test:


 [TestMethod]  
 public void CreateWindow_TextBlockHasCurrentDate()  
 {  
   using (ShimsContext.Create())  
   {  
     ShimDateTime.NowGet = () => new DateTime(2013,1,1);  
     var window = new MainWindow();  
     var mainGrid = (Grid)window.Content;  
     var textBlock = (TextBlock) mainGrid.Children[0];  
     Assert.AreEqual("The current date is 01/01/2013",textBlock.Text);  
   }  
 }  

We have created the window and verified if the TextBlock has the date we have passed on the fake. When we execute the tests with Ctrl+R+T, we see that the test passes. We are covered here, and we can make the changes we need on our code.


Changing the program


As we already have the test, we can change it for the new feature we want:


 [TestMethod]  
 public void CreateWindow_TextBlockHasCurrentDate()  
 {  
   using (ShimsContext.Create())  
   {  
     ShimDateTime.NowGet = () => new DateTime(2013,1,1);  
     var window = new MainWindow();  
     var mainGrid = (Grid)window.Content;  
     var textBlock = (TextBlock) mainGrid.Children[0];  
     Assert.AreEqual(  
      "The current date is 01/01/2013 (Tuesday)",textBlock.Text);  
   }  
 }  

We have made the change on the test but not on the code. If we run our test now, it will fail:


 Assert.AreEqual failed. Expected:<The current date is 01/01/2013 (Tuesday)>. Actual:< The current date is 01/01/2013>.  

We must change the code:


 public MainWindow()  
 {  
   InitializeComponent();  
   TxtDate.Text = string.Format(  
    "The current date is {0:d} ({0:dddd})", DateTime.Now);  
 }  

When we execute the test, it passes – our change is complete and working. To complete the Red-Green-Refactor cycle from TDD, we can refactor the code, extracting the function from where we set the TextBlock:


 public MainWindow()  
 {  
   InitializeComponent();  
   TxtDate.Text = GetTextDate();  
 }  
 private static string GetTextDate()  
 {  
   return string.Format(  
    "The current date is {0:d} ({0:dddd})", DateTime.Now);  
 }  

We run the tests and they still pass. The change is finished.


Conclusions


As we can see, Fakes helps a lot when we have legacy code that, for its dependencies, don’t allow creating unit tests in an easy way. What we have done here is to simulate the creation of a window and assign a value to a TextBlock, passing the current date with no special arrangement.


We are not advocating using this resource always – you should use Fakes only as the last resource, when the code is already there and there is not an easy way to break it. It can be used as a starting point for the real refactoring of the program: in this case, we must remove the window dependencies using the MVVM pattern and also from the System.DateTime, using some kind of wrapper interface (that we could call as IDateTimeProvider), but this is a subject for another article!


 


 


 


 

Analyzing disk space with Excel

Introduction


Nowadays you have a lot of disk space available, it is common to find disks with 4 terabytes and we don’t have to worry with what we store on them. That is not entirely true, because:


  • No matter the size of the disk, we will always be able to fill it.
  • Although normal disks are very large, it is being more common to use SSD disks for boot and these ones have a very limited size, due to their cost.
  • With little disk space, the disk access speed slows down, due to fragmentation.
  • Our computers are an extension of our home and we should not leave it a complete mess, we should keep our disks clean.

One way to manage the disk space is to use specialized tools like my utility DiskPiePro (http://www.pcmag.com/article2/0,2817,2354473,00.asp). Although a utility may be a very good alternative, you have another way, very good and flexible to do it: use PowerShell and Excel to do it.


PowerShell is, according to Wikipedia, “Microsoft’s task automation framework, consisting of a command-line shell and associated scripting language built on .NET Framework. PowerShell provides full access to COM and WMI, enabling administrators to perform administrative tasks on both local and remote Windows systems”. With it, you can easily access your system’s data and many tools expose their information to PowerShell. With it, you can get your disk information and export it to a comma separated value file that Excel can read and analyze. This is a very powerful solution, as we will see now.


Creating a PowerShell script


To work with PowerShell, we must open a PowerShell window. You can open the start menu in Windows and type PowerShell. You can open a PowerShell prompt window (similar to a command prompt) or open the PowerShell ISE, an IDE for PowerShell development. I prefer to use the ISE, as it has many resources, including Intellisense that completes commands and shows the options available for every command.


If you are using Windows 8, PowerShell ISE is hidden. You will not see it on the start menu. You must open an Explorer Window, go to c:\windows\system32\WindowsPowerShell\V1.0 and open the file PowerShell_ise.exe.


Using the Get-ChildItem (by convention, PowerShell commands are composed by a verb and a noun) we can get the list of the files of the current folder (just as a side note, the Get-ChildItem command has two aliases, dir and ls – you can get what it does, no?). To get the list of files in all the subfolders, we use the parameter recurse. To avoid the cancellation of the command when you have no access to a folder we use the parameter ErrorAction. That way, the full command to get the list of files in the current folder and subfolders is:


Get-ChildItem -recurse -ErrorAction SilentlyContinue


Until now, we did not do anything that you could do with a simple dir command, but one of the things that make PowerShell powerful is the ability to compose commands. We want to filter our files, eliminating those that are small, so they do not interfere with our analysis. We can do that using piping: we get the output of a command and use it as the input for the next one, using the “|” character. The command to filter data is Where-Object. To show just the files with more than 1MB, we use the command:


Where-Object Length -gt 1MB


This syntax is only valid for PowerShell 3 (if you do not have PowerShell 3 installed, you can filter using this command: Where-Object {$_.Length -gt 1MB}).


The command Get-ChildItem returns a set of objects that correspond to the files, with many properties. We do not want all of them (if you want to see what the available properties are, you can use the command Get-ChildItem | Get-Member), so we will filter the shown properties with Select-Object:


Select-Object -Property Name, Length, DirectoryName, FullName, Extension


At last, we will export the resulting data to a csv file, with Export-Csv:


Export-Csv LargestFiles.csv –NoTypeInformation -UseCulture


By composing all commands, we can create a small script that gets all files with more than 1MB and writes a csv file with the list. The script below does just that. I have modified the script a bit to parameterize the folder to start the search the minimum size and the name of the csv file:


[CmdletBinding()]
param (
[string]$initialpath = ‘.’,
[int]$minimumsize = 1MB,
[string]$outputfile = ‘LargeFilesReport.csv’
)
Get-ChildItem $initialpath -Recurse -ErrorAction “SilentlyContinue” |
Where-Object {$_.Length -gt $minimumsize} |
Select-Object -Property Name, Length, DirectoryName, FullName, Extension |
Export-Csv $outputfile -NoTypeInformation -UseCulture


If you save the script as Get-LargestFiles.ps1 (remember, by convention, PowerShell scripts have a verb and a noun), we can call it to get all files larger than 10MB in the current folder and create a file named LargeFiles.csv with the commands:


.\Get-LargestFiles –initialpath . –minimumsize 10MB –outputfile LargeFiles.csv


Or


.\Get-LargestFiles . 10MB LargeFiles.csv


You can enter the parameters in any order if you add the parameter name before them or you must enter them in order, then you can remove the parameter names. You can also omit some of the parameters and the script will use the default values. If you get an access denied error when executing this script, probably is because PowerShell restricts script execution by default. You must open a PowerShell window with admin rights and execute the command Set-ExecutionPolicy RemoteSigned that allows the execution of any local files, but only signed remote files. You must do this procedure only once.


As you can see, PowerShell is very powerful, much more than a simple scripting language (anyone remember of DOS batch files?) and allows obtaining many information about the machine, it is worth knowing it better.


Now we already have the csv file, let us analyze it with Excel. If you have the csv extension associated with Excel, you can open it directly in PowerShell, with


Invoke-Item .\LargeFilesReport.csv


This command opens Excel with the list of largest files open in it.


Analyzing the report file with Excel


Arranging the file


When you open the file, Excel reads, interprets the data and adds each property to one column. We can change the size of each column to view the data better. You can do it selecting the entire worksheet, by clicking on the top border, to the left of the A column and selecting Format/AutoFit Column Width, or with a double click on the top border that divides two columns to fit just one column. Another way to resize a column is to drag and drop the column border for the column we want to resize.


The next step is to sort the worksheet, so that the largest files are in the top. With the worksheet selected, click on Sort & Filter and select Custom Sort. Sort by the Length column, on the Largest to Smallest order.


Next, we will format the lengths of the files. Click on the cell just below the Length title and press [Shift] + [End] + [Down-arrow]. That will select all file sizes. We will also name this range to make it easier to work with it: on the top bar, to the left of the data entry box, where there is the current cell name indicator, type Sizes and press [Enter]. Naming the range in that way allows us to access the range with this name: one you select Size in the cell indicator box, you are selecting the whole range.


We want to show the file sizes the same way Explorer does, using GB for files larger than 1GBm=, MB for files larger than 1MB and KB for files larger than 1KB. The first idea that came to my mind was to create a hidden column and divide the values by 1,000, 1,000,000 or 1,000,000,000,000, depending on the file size. There is a simpler way to do it: using custom formatting. With the file sizes range selected, right click and select Format Cells. Select the Custom format and type this format:


[<1000000]0.00,” KB”;[<1000000000]0.00,,” MB”;0.00,,,” GB”


We are using here the US regional settings. If you are in another region with different settings, like Europe or South America, you should change the “.” With the “,” and vice-versa.


This format is very different from what we are used to, but it is very powerful. Let us explain it step-by-step: the format has three parts, separated by “;”. On the first, [<1000000]0.00,” KB”, Excel verifies if the number is smaller than 1,000,000. If it is, then it applies the 0.00,” KB” format. The “,” at the end of the format makes that the number is divided by 1000. The result is shown with two decimals and the string “KB” at the end. The second part is similar to the first, but we use two commas at the end to divide the number by 1,000,000 and add the “MB” suffix. The third part, with three commas, divides the number by 1,000,000,000 and adds “GB” to the end. It is easy when you know it, no?


The first question that comes to mind when we are managing our disks is how much space the largest files are consuming and how many files have more than 1MB. Add two lines above the title line and, on cell A1 put the label “Total”. On cell B1, add the formula =SUM(Sizes). On cell C1 add the formula =COUNT(Sizes). To format the number of files, right-click cell B1 and select Format Cells and the Custom format. On the formatting, type #,##0 “Files”.


Next, we will make the top rows fixed. Select the cell below the title (A4) and, on the View tab, click in Freeze Panes/Freeze Panes. That way, the first three rows are frozen and are shown even when we scroll the table down.


 



Figure 1 – Worksheet formatted with total space and number of files


Our formatting will be finished with an indication of file size, so we can locate easily the files that interest to us. We will use to do that the conditional formatting. This kind of formatting allows highlighting our data in many ways, with colors, graphs or icons.


We will use the conditional formatting with icons, using a red icon for files with more than 100MB, yellow for files larger than 10MB and green for the smaller ones. Position the cursor in the cell indicator combobox and select the Sizes range. Next, go to the Home tab and select Conditional Formatting/Icon Sets, and then select the three circles icon set. By default, this formatting add green icons to the first 33%, yellow on the next 33% and red on the last 33%. Although we want something similar to that, it is not what we want. We click again in Conditional Formatting and select Manage Rules, with a double click in the rule to change it. We change the first icon to red and the last one to green. Then, we change the Type of the first two icons to Number and, finally, change the value for the first icon to 100000000 and for the second icon to 10000000. That way, files with more than 100MB will be marked with a red icon, the ones with sizes between 10MB and 100MB will be marked with a yellow icon and the smaller ones with a green icon. When we click OK, we can see something like Figure 2.


Figure 2 – Worksheet with conditional formatting


Total by Extension


Another way to analyze our disk is to know which extensions are filling it. We must create a new worksheet, called “Extensions”. There we will add all extensions found and the space occupied by them. In the cells A1 to C1 add the titles: “Extension”, “Size” and “Quantity”.


Then, copy the extension from column E in the first worksheet to the cell A2 on the new one. With the extensions selected, go to the Data tab and select Remove Duplicates. The dialog box asks which columns you want to use for the duplicates. Select column A and click OK. Excel then shows how many duplicates it has removed.


To get the total space occupied by each extension, we must use the SUMIF function. This function uses a criterion to sum the data. If it is true, the data is added to the total. If not, nothing is added. This function has three parameters:


  • The value range – in our case, these are the extensions in the first worksheet.
  • The criterion, that is, the extension that we want to match. For the first row, that is cell A2
  • The sum interval, in our case the Sizes range

The formula that goes in cell B2 is =SUMIF(LargeFilesReport!$E$4:$E$1451;A2;Sizes). Copy this formula for all extensions, so you can see the size occupied by all extensions. To know the number of files in each extension we use the COUNTIF function. It is similar to the SUMIF function, but only has two parameters, the interval and the criterion. The formula to be used is =COUNTIF(LargeFilesReport!E4:E1449;A2). Copying this formula, we can know the number of files for each extension.


We will sort the data by size, so we can know which extensions use more space. Select the three columns and, on then Home tab, select Sort and Filter/Custom Sort. Select the size sort, from the largest to the smallest.


To illustrate the data, we will add a pie chart that shows the used disk space by extension. Select the data of the first two columns (by clicking on cell A1 and pressing [Shift+End] [Down-Arrow] [Right-Arrow] and, on the Insert tab, select a Pie 2D chart, Pie of Pie. Excel inserts a chart similar to Figure 3, allowing you to see which extensions use most of your disk. On my case, we can see that the extensions bak, dll, lib, plg e exe use more than ¾ of the total space!




 


Figure 3- Table of sizes by extension with chart


ABC Curve


We already have our list sorted, but we do not know the files that we must delete – to clean all 11GB, we should delete all 1400 files, and that is a lot of work. Let us optimize the work and focus on the files that really matter. Using the 80-20 rule (http://en.wikipedia.org/wiki/Pareto_principle), 20% of the files should use about 80% of the disk space. Let us see if this really happens here, by creating an ABC curve. Create a new worksheet and rename it to “ABC Curve”. Select the title of the column FullName on the first worksheet and press [Shift] +[End] + [Down-Arrow] to select the file names and press [Ctrl] + [C] to copy. Return to the new worksheet and paste the data clicking on the A1 cell and pressing [Ctrl] + [V]. On the B1 cell, put the title “Accumulated %”.


The formula we will create shows the accumulated space percentage for every file. For example, the first file uses 3.77GB/11.34GB, or 33.25% of the used space. The second one uses 266.67MB/11.34GB, or 2.35% of the used space, that added to the previous one, sum to 35.60% of the used space. We keep summing all accumulated percentages in this column and see the percentage until it reaches 80%. When it reaches 80%, we have the last file we need to focus and leave the rest of the files untouched.


To create this formula, we go to cell B2 of the new worksheet and use the function =SUM(). Go to the first worksheet and select cell B3 and press “:” and select B4 again. We want to fix the first value, adding always from cell B4 to the current cell when we copy, so we go to the first B4 in the formula and press [F4] to make it fixed. Excel puts a “$” in the line and in the column, to indicate that this value is fixed and will not change when it is copied. We type the closing parenthesis in the formula and type “/”. Then, we go to the total value in the first worksheet, select it and press [F4] to make it a fixed value. The resulting formula is:


=SUM(LargeFilesReport!$B$4:LargeFilesReport!B4)/LargeFilesReport!$B$1


Pressing [Enter], the value for the percentage of the first file is shown. We can format if as a percentage right clicking the mouse and selecting Format Cells, then Percentage. When we select a cell, a small square is shown in the right bottom border of the selection. Click on the square and drag it to the front of the last file name. When we release the mouse button, the formula is copied for all selected cells. We can now verify where our limit is. On my file, that is shown on line 278, in the 277th file, from the total of 1446 files. That is 19.16% of the files, very close from 20%, no?


We can finish this worksheet with a chart. Select cell B1 and press [Shift] + [End] + [Down-Arrow] to select the percentages. Excel 2013 shows chart suggestions. Select the Chart suggestion and insert a Line chart. A chart similar to Figure 4 is shown.



Figure 4 – Worksheet with ABC Curve


I did a small change in this chart. When you add it, the percentage axis goes to 120%. As I do not want percentages over 100%, I clicked on the axis to select it, selected Format Axis and put the maximum value to 1.


We can finish the worksheet, making it more flexible, by using the Auto-Filter resource. Select the data from the first worksheet and, in the Data tab, click in Filter. Excel shows a button in every column title, where we can filter or sort the data by any column.


When we use the Auto-Filter, the sum we have put in the first line does not match the filtered values, it always matches the total values. To get the values for the filtered data, we use the SUBTOTAL function. On cell A2, put the title “Filtered Total” and, on cell B2, put the function =SUBTOTAL(9;Sizes). That makes that the cell shows the sum of the filtered records. On cell C2, put the formula =SUBTOTAL(3;Sizes), to show the quantity of filtered records. On Figure 5, I’ve used the Auto-Filter to filter all the files with names starting with “D:\Projetos” (D:\Projects). That way, I can know that in my projects folder I have 558 files (about 1/3 of the total), using 6.18GB (a bit more than half of the used space).



Figure 5 – Worksheet with filtered data with Auto-Filter


Conclusions


We could see in this article a little bit of the power and flexibility of Excel. By combining it with other tools, like PowerShell, we multiply that power. Many tools export their data to the csv format, and can be read and analyzed by Excel.


We saw here that, with the PowerShell command output to csv, we could read the data in Excel and analyze them in many ways. This is very good, allows that the user customize the way she wants to see the data, easily getting reports or charts with no need of any kind of programming (did you notice that we did not use any kind of macro language, just Excel commands?).


 


 

ReSharper–Productivity tool for Visual Studio

One of the indirect benefits of being a Microsoft MVP is that many tool or component producers give copies for MVPs for their personal use, so they can use, evaluate and, if they like it, recommend it.

I use many of these tools on a daily basis and like them very much. So nothing more fair than write a post about them and how they help my work.

There is no doubt that the tool I use the most is ReSharper (http://www.jetbrains.com/resharper/), an add-in for Visual Studio to enhance your productivity. When I use Visual Studio, it’s always there, helping me to write code.

Code analysis

When you open a project, ReSharper will analise your code and start to give you suggestions to enhance it. When you open a console project, you will see something like this on the editor:

image_thumb50

On the right side, a new bar is added with help indicators for your code. The yellow square at the top shows that there are warnings to improve your code. If it’s red, there are compile errors and, if your code is ok, the square turns green. Below the square, there are some bars indicating the points where problems are found. If you hover the mouse over the bars, a tooltip will show the problem.

image_thumb3

Fixing the error is very simple. You just have to click on the bar and the editor will be positioned on the place of the error. A red bulb will indicate the error and we can click on it to show the available actions. This list can be selected with Alt-Enter. If I could only remember one ReSharper shortcut, this would be the one. It will do many fixes for you, with Alt-Enter your code will improve a lot!

 

image_thumb5

We select the desired action and ReSharper corrects the code (by eliminating the using clauses not needed). To fix next error, we can see that the args parameter in the Main function is in gray. That means that it’s not being used there. When we put the mouse over the args parameter, ReSharper shows a pyramid, indicating that there is a refactoring to be made.

 

image_thumb7

It will remove the unused parameter. Besides this change, it will verify all places where the function is called and change its call. That’s great when we add a parameter and later we verify it is not needed and we want to remove it. If we do that, all places where the function is called will not compile. With this refactoring, our code won’t break anymore.

 

image_thumb54

ReSharper is constantly analyzing our code and checking consistency on variables and methods names. You can tell how do you like to name the fields, properties and methods and it will check the consistency for you.

 

image_thumb13

For example, I like to name my private fields using CamelCase, starting with a lowercase character (with no leading underscore). If I put a field using a different naming, ReSharper will tell me and ask to change it. Just press Alt-Enter and it will change the name and all references to this variable.

image_thumb56

Code improvement

ReSharper also verifies the quality of your code. Yes, I know that your code (like mine) is wonderful, but can it be improved? Take a look on the figure below, where I have a WPF application where I’ve added the event handler of the Click event for a button in code, using button1.Click += <tab><tab>.

image_thumb59

ReSharper shows two warnings and a reminder. The first warning is about MainWindow. It shows that the parent type (Window) has been already declared and is not necessary. We should remember that when we create a WPF window we are creating a partial class, declared in two places: on the XAML and on the code behind. The XAML already tells that MainWindow inherits from Window and we can remove this redundant declaration on the code behind. The second warning is due to the fact that we can eliminate the delegate creation when adding the handler. The reminder is to tell us that we have a “Not Implemented” exception, a clear indication that we must add code there. Pressing Alt-Enter twice, and our code will be changed to:

image_thumb61

ReSharper analyses your code, checking for improvements and possible errors. When you enter this code

image_thumb63

you can see on the bar on the right a warning and a possible improvement. The warning tells us that ToString is redundant and that we must specify a culture for the conversion. The fact that it’s redundant makes it a candidate for elimination. Alt-Enter and there it goes. The next improvement is in the for, that can be converted to a LINQ expression. Pressing Alt-Enter again we end up with this code:

image_thumb66

Other common code improvements are if and return optimizations: when we put something like this

 

if (x == 3) y = 2; else y = 5;


ReSharper optimizes to:

y = x == 3 ? 2 : 5;


Or this code:

if (x == 3) return 2; else return 5;


Here, we have two optimizations: eliminate the else

if (x == 3) return 2; return 5;


or use the ternary operator:

return x == 3 ? 2 : 5;


Refactoring

That’s not all that ReSharper can do for you. Its refactoring tools and code creation are fantastic. If we want to extract the code from the event handler to a new method, we can press Ctrl-Shift-R (Refactor this) and ReSharper will show all available refactorings.

image_thumb72

We select the extract method refactoring and this screen is shown:

image_thumb31

We can indicate the parameters, the function name and its return type. By clicking on Next, we get something like

image_thumb68

Code creation

We can also insert code using templates. ReSharper allows to create templates with code for new files or code snippets.

image_thumb39

 

We have three kinds of templates:

  • Live templates – code snippets templates, inserted like Visual Studio snippets. To insert them, we must add the snippet name and press <tab> to insert. One other way to insert these snippets is by using Ctrl-E-L. On the figure above, I’ve created the propnp snippet, that creates a property with a backing field and calls the PropertyChanged handler.
  • Surround templates, that surround the code with a template, like to surround the code with a try…catch. They can be invoked with Ctrl-E-U.
  • File templates – they create new files on our project, like new classes or interfaces. They are invoked with Ctrl-Alt-Ins.
  • We will create a new class in our project. We press Ctrl-Alt-Ins and create a new class, calling it NewClass. We then press Alt-Ins and insert the constructor for the class. On the constructor parameters, we insert a dependency:

    image_thumb41

    Note that IDependency is in red, because we have not defined this interface. We press Alt-Enter and these options are shown:

    image_thumb43

    ReSharper has noted that we’ve set the type name starting with ’I’ and suggests to create a new interface. We can create our interface from here. After creating the interface, we press Alt-Enter again in IDependency in the constructor and we can declare a field to store the dependency:

    image_thumb45

    Our interface was created on the same file as the class file. We can go to its declaration and press Alt-Enter. ReSharper offers to move it to a different file. A new IDependency.cs file is created with the interface. Easy, no? It also eases the variables declaration. For example, when we enter code like

    total = -1;


    on the constructor, we see that total is in red. Pressing Alt-Enter we have these options:

    image_thumb47

    We can create a total field on our code. As we can see, we have many ways to change and improve our code.

    XAML help

    But that is not alll that we get. We can use ReSharper also while editing XAML code. For example, if we create a Converter in code:

    public class DebugConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return value; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return value; } }



    When we want to use it in XAML, we must follow some steps: namespace, resource declaration, etc. ReSharper can help us for that.



    image_thumb74



    We press Alt-Enter in DebugConverter and select Create resource in type element <Window>. ReSharepr creates the Resources section and creates the resource. We add the name DebugConverter with no namespace. A tooltip is shown indicating the needed namespace



    image_thumb76



    We then press Alt-Enter and the namespace is added to the window declaration and the prefix added to the element. If we don’t like its name, we can rename it with Ctrl-R-R. Everything needed is ready, now. If we have a DataContext associated to the element and it doesn’t have a property named Valor, we can use ReSharper to create this property on the DataContext class, like a ViewModel.



    image_thumb80



    Code navigation



    ReSharper has many shortcuts for code navigation. For example, Ctrl-T navigates to a defined type. A screen like this open is opened



    image_thumb70



    We enter part of the name and it shows all types that match with the search. On the same way, we can use Shift-Alt-T to go to a symbol or Ctrl-Shift-T to go to a file. The search is done in all solution’s files. The navigation between members of a class can be done with Alt-`. You can go to the previous or next member with Alt-Up or Alt-Down. If you want, you can even go to a decompiled .net code. ReSharper has a decompiler that decompiles the code and allows navigating to it.



    image_thumb85



    Misc utilities



    You have many othere goodies in ReSharper. You have a unit test runner, where you can run your unit tests. You may be thinking that Visual Studio already has a test runner, but the one VS has runs only MSTest tests. ReSharper runner works with MSTests, NUnit, QUnit or xUnit. One other interesting functionality is the Explore Stack Trace. You have an exception stack trace that comes from any source. You can copy the stack trace to the clipboard and, in Visual Studio, use Ctrl-E-T. The stack trace is shown with links to your code, so you can go to the place where the exception occurred.



    image_thumb83



    Conclusion



    This is just part of the functionality offered by ReSharper, there is much more to explore, but I leave that for you. This is a paid tool, but you can download a 30 days trial version in http://www.jetbrains.com/resharper/download/index.html.



    I really think this is an indispensable tool for everyone who develops with Visual Studio, I just have a point against it: it is really addictive and once you get used to using ReSharper, it’s very difficult to develop without it. Alegre

    Recursos para aprendizado de Windows Phone 7

    Ontem (9/2/2012) apresentei uma palestra na Campus Party 2012 e, ao final da palestra, mostrei uma série de recursos para aprendizado desta plataforma. Estou repetindo aqui, para que vocês possam verificar a quantidade disponível e aprender a desenvolver para Winddows Phone.


    • Windows SDK and Tools – http://create.msdn.com – Ponto de partida do AppHub, onde você pode baixar gratuitamente todas as ferramentas para desenvolver para Windows Phone
    • Windows Phone 7 Developer Portal – http://bit.ly/tIPZK3 – Portal de desenvolvimento do Windows Phone, com inúmeros recursos. Vale a pena começar com o Getting Started, onde há links para artigos, blogs e vídeos
    • Windows Phone 7 Training Kit – http://bit.ly/uKo8Fg – Link para download do training kit, contendo programas, exercícios para iniciar o aprendizado na prática
    • Livro Windows Phone 7 Development – Charles Petzold – http://charlespetzold.com/phone/index.html – Livro de 1000 páginas para download gratuito sobre desenvolvimento de Windows Phone
    • Videos Windows Phone 7 JumpStart – http://bit.ly/wp7jumpstart – Curso em vídeo com quase 20 horas sobre desenvolvimento para Windows Phone
    • Portal de Windows Phone da Microsoft em português – http://bit.ly/yxE8Po

    Todos estes recursos são gratuitos, vocês não tem desculpas para não começar a aprender já!

    Animating transitions in WPF/Silverlight–Part IV–Behaviors

    On the last post, I’ve shown how we can animate transitions using Blend and Visual States. An important part in that mechanism is the use of behaviors. With behaviors, we can execute very complex actions, just by dragging a behavior into a window component. That’s very powerful and brings other benefits:

    • It’s reutilizable. We can include the same behavior in many different situations.
    • Allow that designers can include functionality in the design with no code.

    We have two kinds of behaviors:

    • Actions – they execute an action associated to an event. For example, you can create an Action that, associated to a Textbox, “clicks” for every keystroke, or another action that makes the element below the mouse pointer grow.
    • Full behaviors – in this case, there is a more complex behavior, not necessarily associated to a trigger. One example is the MouseDragElementBehavior, that allows a dragging an element using the mouse.

    Blend has predefined behaviors of the two kinds, with the end of the name telling its type (like in CallMethodAction or FluidMoveBehavior).

    image_thumb

    You can add new behaviors by searching the Blend gallery, at http://gallery.expression.microsoft.com (last time I’ve checked, there were 114 behaviors available there).

    Behaviors are associated to an object and can have additional properties, beyond the trigger that activates them. For example, the GoToStateAction has the target component, the state to be activated and the boolean property UseTransitions as additional properties.

    image

    You can set the action’s properties and can also specify conditions for activate it. For example, when on the project from the previous post, we can use a checkbox to allow the transition activation. For that, we must click on the “+” button in front of Condition List, click on the advanced properties button from the condition and create a data binding with the checkbox’s property IsChecked. This way, the animation will only be triggered if the checkbox is checked.

    image

    If the predefined actions don’t do what we want, we can create custom actions to it. On the previous post, we use standard actions, but we had to create the Visual States. And we have another inconvenience: if we want to do animations that go up or down, we must create new Visual States. That way, we will create our action to do what we want, with no need of any special configuration.

    On Visual Studio, create a new WPF project. We will add our Action to the project. Visual Studio, by default, doesn’t have the template to create actions. We could do that using Blend: after opening the project in Blend and selecting the Project panel, you can click it with the right button and select Add New Item and add an Action to the project.

    image_thumb4 

    Another way to do it is to use the Visual Studio online templates. On Visual Studio’s Solution Explorer, click with the right mouse button in the project and select Add New Item. Then go to Online Templates and fill the search box with action. Select the C# Action Template for WPF template and give it the TransitionControlAction name.

    image_thumb7

    The template adds a reference to System.Windows.Interactivity and creates a class similar to this code:

    using System; using System.Collections.Generic; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Shapes; using System.Windows.Interactivity; namespace WpfApplication4 { // // If you want your Action to target elements other than its parent, extend your class // from TargetedTriggerAction instead of from TriggerAction // public class TransitionControlAction : TriggerAction<DependencyObject> { public TransitionControlAction() { // Insert code required on object creation below this point. } protected override void Invoke(object o) { // Insert code that defines what the Action will do when triggered/invoked. } } }


    We have two action types: TriggerAction and TargetedTriggerAction. TriggerAction is an action that doesn’t act on another control. For example, if we want to create an action that starts Notepad when something happens, we would use a TriggerAction. TargetedTriggerAction makes reference to another element, called Target. This element is a property of the action and can be accessed in Blend.

    We will create a TargetedTriggerAction. For that, we must change the class declaration to inherit from TargetedTriggerAction, like it’s shown in the comment in the beginning of the file. This action will execute the same code we’ve created on the first post to do the animation. We must also change the kind of object where it will be acting. We will use the FrameworkElement, because it has the properties ActualWidth and ActualHeight, which we will need.

    public class TransitionControlAction : TargetedTriggerAction<FrameworkElement>


    We will begin creating the enumeration for the animation kind and two DependencyProperties, the kind of animation we want and its duration. That way, these properties will be available in Blend.

    public enum AnimationKind
    {
    Right,
    Left,
    Up,
    Down
    }

    [Category("Common Properties")]
    public AnimationKind AnimationKind
    {
    get { return (AnimationKind)GetValue(AnimationKindProperty); }
    set { SetValue(AnimationKindProperty, value); }
    }

    public static readonly DependencyProperty AnimationKindProperty =
    DependencyProperty.Register("AnimationKind", typeof(AnimationKind), typeof(TransitionControlAction));


    [Category("Common Properties")]
    public TimeSpan Duration
    {
    get { return (TimeSpan)GetValue(DurationProperty); }
    set { SetValue(DurationProperty, value); }
    }

    public static readonly DependencyProperty DurationProperty =
    DependencyProperty.Register("Duration", typeof(TimeSpan), typeof(TransitionControlAction),
    new UIPropertyMetadata(TimeSpan.FromMilliseconds(500)));



    We have added the Category attribute to the properties AnimationKind and Duration, so they can appear in the Common Properties group. When we compile the project and open it in Blend, we can see that our Action appears in the Assets panel.

    image_thumb8

    When we drag a TransitionControlAction to a button, its properties appear in the property editor:

    image

    Our action still doesn’t do anything. To do something, we must override the action’s Invoke method, adding the code that should be executed. We will use the code that we’ve created on the first post, modifying it to use the Target control:

    private void AnimateControl(FrameworkElement control, TimeSpan duration, AnimationKind kind)
    {
    double xFinal = 0;
    double yFinal = 0;
    if (kind == AnimationKind.Left)
    xFinal = -control.ActualWidth;
    else if (kind == AnimationKind.Right)
    xFinal = control.ActualWidth;
    else if (kind == AnimationKind.Up)
    yFinal = -control.ActualHeight;
    else if (kind == AnimationKind.Down)
    yFinal = control.ActualHeight;
    var translate = new TranslateTransform(0, 0);
    control.RenderTransform = translate;
    if (kind == AnimationKind.Left || kind == AnimationKind.Right)
    {
    var da = new DoubleAnimation(0, xFinal, new Duration(duration));
    translate.BeginAnimation(TranslateTransform.XProperty, da);
    }
    else
    {
    var da = new DoubleAnimation(0, yFinal, new Duration(duration));
    translate.BeginAnimation(TranslateTransform.YProperty, da);
    }
    }

    Finally, we must only call the method AnimateControl from the Invoke method:

    protected override void Invoke(object o)
    {
    AnimateControl(Target, Duration, AnimationKind);
    }


    With that, our behavior is finished. We can add the project in Blend, drag the action to the button, set the Target object to the grid and execute the project. When we click the button, the grid makes an animated transition on the selected direction. We don’t need to do anything else, the action is ready to be executed.



     



    image



    Conclusion



    It’s been a long journey till here. We saw four different ways to animate the transition, we started from code and ended using the same code. On the middle of the way, we saw many new concepts: move from fixed code to a more flexible, refactored code, use components for transitions, eliminate code behind using the MVVM pattern, use NuGet, implicit templates, using Visual States to create animations with no code and, finally, behaviors to create actions that can be used by designers, in a flexible way, with no code. I hope you have enjoyed it!

    Animating transitions in WPF/Silverlight–Part III–Visual States

    On the two last posts, I’ve showed how to animate a transition using code. The first post showed how to animate the transition using code behind, creating the animation using code. The second post showed how to use components to ease these transitions. Although the use of components is a good alternative to create the animations using code, it still has some disadvantages:

    • You must add a reference to the component assembly or include its code in the project
    • It can have bugs – there may be many users of the components, but they still may have bugs. If they are open source with code available, you can still debug it, but is not always easy to debug such a component.
    • It can be outdated. With new versions of WPF and Silverlight, an old component may not work in the new versions.

    So, we will see a new option to animate the transitions, with no code. You may be asking : “How is that, no code?”. Yes, WPF 4 (or 3.5, using the WPF Toolkit) and Silverlight have a resource that don’t need C# or VB code to animate transitions: Visual States. With Visual States, you define the state of your control in many situations and change between them with no need of code. Everything is done in XAML.

    For this project, we won’t use Visual Studio. The creation of Visual States is easier in Blend. Open Blend and create a new WPF project.

    In this project, add a row in the main grid, at the bottom of the window with 40 pixels of height. On this row, add a button with the property Content set to Hide. On the top row of the grid, add another grid, with red background. On the project panel choose the States tab. It should be empty.

    image_thumb

    Click on the first button on the top toolbar in the tab to add a new group state. Change its name to GridStates. Click on the second button of the GridStates toolbar to add a new state and change its name to Visible. Add another state and change its name to Hidden.

    You should note that the default transition time (shown in front of the Default Transition text) is 0s.

    image

    Change this time to 1. Also change the Easing Function to CubicInOut, clicking the second button.

    image

    Looking at the image above, you can see we are in recording mode, recording the Hidden state. When we select a state in the states panel, all changes that we make in the layout are recorded for this state. So, we can change the appearance of our controls just by switching states. The state Visible is our default state. On the Hidden state we will hide our grid. The transition is done when we change from one state to another.

    Select the grid and change the property RenderTransform X to –625, the property Opacity to 0 and the property Visibility to Collapsed. That way, the grid will move to the left, while it’s made transparent. Our states are ready. We could change between states using code behind, with this code on the button click event:

    private void button_Click(object sender, System.Windows.RoutedEventArgs e)
    {
    VisualStateManager.GoToElementState(LayoutRoot, "Hidden", true);
    }


    But that way, we would be on the same situation of the previous post, with code behind. Besides that, I have said that we would not use code!

    Blend has a very interesting resource to execute actions with no code: Behaviors. Behaviors are custom actions that act on the components, with no need of code to execute them (in fact, someone needs to write code to create a behavior, but once it’s created, you just need to drag it to a component to use it). Blend comes with many predefined behaviors. To use them you should go to the Assets panel and select the Behaviors option.

    image_thumb1[1]

    We will use the GoToStateAction behavior. We drag this behavior to a component, then set the event that will trigger it and what is the new state that must be set when the event is triggered. Select the GoToStateAction and drag it to the button. A GoToStateAction is added to the button on the object inspector.

     

    image_thumb2[1]

    On the property editor we will configure the action.

    image_thumb3

    The trigger is already set: we want to activate the action when the button Click event is triggered. We must only set the state we want to select when the button is clicked. For that, we must set the StateName property to Hidden.

    image

    Our application is ready. When we execute it and click on the button, the transition occurs and moves the grid to outside. And all that with no lines of code!

    We will make a small change to give more functionality to our application. Change the editor visualization to Split by clicking on the third button of view change.

    image

    With that, we can change the XAML code directly and change our button. We want it to be a ToggleButton. For that you must change the XAML component, changing its type from Button to ToggleButton:

    <ToggleButton x:Name="button" Content="Hide" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="65" Height="25"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <ei:GoToStateAction StateName="Hidden"/> </i:EventTrigger> </i:Interaction.Triggers> </ToggleButton>


    The ToggleButton may be checked or not. We will show the Hidden state when it’s checked and the Visible state when it’s unchecked.



    We must change the event that activates the Hidden state. On the object inspector, select the GoToStateAction and change the property  EventName to Checked. On the Assets tab, select another GoToStateAction and drag it to the button. Set the property EventName to  Unchecked and the property StateName to Visible. Run the program.



    Now we have an animation to hide the grid when the button is checked and another to show the grid when the button is unchecked. Easy, no?



    Here we could see the amount of resources we have available to create states and make them active. Everything is done visually, with no need of code. We still haven’t finished our journey, we still have other ways to animate transitions, but that is a subject for another post. See you there!

    Animating transitions in WPF/Silverlight–Part II–Using Components

    In the last post we saw how to animate a transition using code. As I said, I don’t think that is the best solution, because we must use code behind, something not easy to maintain. We could refactor code, creating a new class for the animation and use it. That would bring a little more separation, but we would have to still use code behind.

    In this second part, we will use a different approach: third party components. We can use several components, like Kevin Bag-O-Tricks (https://github.com/thinkpixellab/bot), FluidKit (http://fluidkit.com), Silverlight Toolkit (http://silverlight.codeplex.com – only for Silverlight), or Transitionals (http://transitionals.codeplex.com).

    We will use here Transitionals, for WPF. If we want to do animations for Silverlight, we should choose another component. Its use is very simple: after downloading the component and adding a reference in the project to the Transitionals.dll assembly, we must add a TransitionElement component in the place where we want the animation, configure the animation and add a content to the component. When the content is changed, the transition is activated.

    Let’s create our transition project. Create a new WPF project and add a reference to Transitionals.dll. Then, add a TransitionElement to the main grid:

    <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="40" /> </Grid.RowDefinitions> <transc:TransitionElement x:Name="TransitionBox"> <transc:TransitionElement.Transition> <transt:TranslateTransition StartPoint="1,0" EndPoint="0,0" Duration="0:0:1"/> </transc:TransitionElement.Transition> </transc:TransitionElement> <Button Width="65" Grid.Row="1" Content="Hide" Margin="5" Click="Button_Click" /> </Grid>


    We must declare the namespaces for the TransitionElement and for the TranslateTransition in the main window:

    <Window x:Class="WpfApplication2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:transc="clr-namespace:Transitionals.Controls;assembly=Transitionals" xmlns:transt="clr-namespace:Transitionals.Transitions;assembly=Transitionals" Title="MainWindow" Height="350" Width="525">


    The next step is to add content to the TransitionElement:

    <transc:TransitionElement x:Name="TransitionBox"> <transc:TransitionElement.Transition> <transt:TranslateTransition StartPoint="1,0" EndPoint="0,0" Duration="0:0:1"/> </transc:TransitionElement.Transition> <Grid Background="Red" /> </transc:TransitionElement>


    The button click event handler changes the content of the TransitionElement and activates the transition:

    private void Button_Click(object sender, RoutedEventArgs e) { TransitionBox.Content = new Grid() {Background = Brushes.Blue}; }


    That way, the code is simpler, we just need to change the content of the element. Besides that, the Transitionals component has a lot of transition types, and we can set them in many ways. For example, the TranslateTransition has the properties StartPoint and EndPoint, saying where the transition starts and ends. To do it from left to right, StartPoint should be –1,0 and EndPoint, 0,0. From top to bottom, StartPoint should be 0,-1 and EndPoint, 0, 0. We can even do a diagonal transition using 1,1 and 0,0.

    Eliminating Code Behind

    One thing that can be improved here is the elimination of code behind, using the MVVM pattern. We will use the MVVM Light framework, that you can get at http://galasoft.ch or by installing it directly using NuGet, an add-in to Visual Studio to ease download and installation of libraries and tools in Visual Studio. If you still don’t have NuGet, go to http://nuget.org and download it.

    Once you have installled NuGet, you can click with the right button in References in the Solution Explorer and select “Manage Nuget Packages”. Fill the search box with “mvvm” and install the MVVM Light package:

    image_thumb2

    This installs MVVM Light, adds the required references and creates a folder named ViewModel, with two files, MainViewModel.cs and ViewModelLocator.cs. MainViewModel.cs is the ViewModel related to the main window and ViewModelLocator is a ViewModel locator.

    In MainViewModel.cs you should add a property of type ViewModelBase, which will contain the ViewModel related to the View of the component content:

    private ViewModelBase content; public ViewModelBase Content { get { return content; } set { conteudo = value; RaisePropertyChanged("Content"); } }


    Next, we will create two ViewModels, related to our views. The two ViewModels are very similar and have only one property:

    public class ViewModelA : ViewModelBase { private string text; public string Text { get { return text; } set { text = value; RaisePropertyChanged("Text"); } } } public class ViewModelB : ViewModelBase { private string text; public string Text { get { return text; } set { text = value; RaisePropertyChanged("Text"); } } }


    Then create in the Solution Explorer a folder named View and put there two UserControls, each one with a Grid and a TextBlock:

    <UserControl x:Class="WpfApplication2.View.ViewA" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> <Grid Background="Red"> <TextBlock Text="{Binding Text}" FontSize="36" /> </Grid> </UserControl>


    To eliminate code behind, we must bind the property Content of the TransitionElement with the property Content of the ViewModel:

    <transc:TransitionElement x:Name="TransitionBox" Content="{Binding Content}"> <transc:TransitionElement.Transition> <transt:TranslateTransition StartPoint="1,0" EndPoint="0,0" Duration="0:0:1"/> </transc:TransitionElement.Transition> </transc:TransitionElement>


    and eliminate the button click, replacing it with a Command:

    <Button Width="65" Grid.Row="1" Content="Esconde" Margin="5" Command="{Binding HideCommand}" />


    The HideCommand property is defined in MainViewModel:

    private ICommand hideCommand; public ICommand HideCommand { get { return hideCommand ?? (hideCommand = new RelayCommand(ChangeContent)); } } private void ChangeContent() { Content = content is ViewModelA ? (ViewModelBase)new ViewModelB() {Text = "ViewModel B"} : (ViewModelBase)new ViewModelA() {Text = " ViewModel A"}; }


    Finally we must set the DataContext for the main View:

    <Window x:Class="WpfApplication2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:transc="clr-namespace:Transitionals.Controls;assembly=Transitionals" xmlns:transt="clr-namespace:Transitionals.Transitions;assembly=Transitionals" Title="MainWindow" Height="350" Width="525" DataContext="{Binding Source={StaticResource Locator}, Path=Main}">


    When we execute the program we have something similar to this:

    image_thumb4

    The view isn’t shown, just the content’s class name. That is expected, as the property Content is of type ViewModelBase and its presentation is made by the method ToString(). We could have put the view as content, but this goes against the MVVM pattern: the ViewModel must not know about the View. A solution to show the View using the ViewModel as content is to use a resource available in WPF or in Silverlight 5: implicit Data Templates. In an implicit DataTemplate, we don’t set the Key property when declaring the Template, we only set its DataType. With that, WPF and Silverlight use this DataTemplate every time they must render some content of that type.

    We declare the DataTemplates in the Windows’s resources section:

    <Window.Resources> <DataTemplate DataType="{x:Type ViewModel:ViewModelA}" > <View:ViewA /> </DataTemplate> <DataTemplate DataType="{x:Type ViewModel:ViewModelB}" > <View:ViewB /> </DataTemplate> </Window.Resources>


    Now, when we execute the program, we have the transition between the two views, with no code behind.



     



    image_thumb6



    Conclusion



    When we use components to animate transitions, we have the possiblity to create very complex transitions in an easy way, we only have to change the content of the control.



    We also saw how to remove code from the code behind, adding it to a ViewModel, making it easier to maintain and allowing better testability. As a bonus, we saw how to use implicit DataTemplates and how to relate a View to a ViewModel with no need of code. This resource is only available on WPF and Silverlight 5.



    Although you can think it doesn’t worth the effort (we eliminated just one line of code, trading it with two ViewModels, two Views and a new MVVM component), my intent here was to show you other resources, like using MVVM instead of code behind and how to use new features, like the implicit DataTemplate. In a larger application, that requires more work, these changes are justified.



    These are not the only ways to do control transitions. On the next articles, we will see other ways. See you then!

    ReSharper–Ferramenta de produtividade para o Visual Studio

    Um dos benefícios indiretos de ser um MVP é que muitos produtores de ferramentas ou componentes cedem cópias de seus produtos para os MVPs para uso pessoal, para que possam usar, avaliar e, eventualmente, recomendar.

    Eu uso muitas dessas ferramentas no meu dia a dia, e gosto muito delas. Assim, nada mais justo que fazer um post sobre elas e como elas ajudam meu dia-a-dia.

    Sem dúvida, a ferramenta que eu mais uso é o ReSharper (http://www.jetbrains.com/resharper/), um add-in para o Visual Studio para aumentar sua produtividade. Ao usar o Visual Studio, ela está sempre lá, ativa, me ajudando a escrever o código.

    Análise de código

    Ao abrir um projeto, o ReSharper analisa seu código e começa a dar sugestões para melhorá-lo. Abrindo um projeto console, já vemos o seguinte no editor:

    image

    Do lado direito, é adicionada uma barra com as indicações de ajuda para seu código. O quadrado amarelo mostra que há avisos para melhoria de código. Se houver erros de compilação, o quadrado fica vermelho e, se seu código estiver ok, o quadrado fica verde. Abaixo do quadrado, estão linhas com os pontos onde há problemas. Se você passar o mouse sobre estas barras, uma tooltip irá mostrar o problema.

    image

    Para corrigir o erro, é muito fácil. É só clicar na barra e o editor é posicionado no local do erro. Uma lâmpada vermelha indica o erro e podemos clicar nela para ver as ações disponíveis. Esta lista pode ser selecionada com Alt-Enter. Aliás, se eu tivesse a possibilidade de escolher um único atalho de teclado para lembrar, seria este. Com o ReSharper e o Alt-Enter o seu código irá melhorar bastante!

     

    image

    Selecionamos a ação desejada e o ReSharper corrige o código (no caso, eliminando as cláusulas using desnecessárias). Para o erro seguinte, podemos ver que o parâmetro args de Main está ém cinza. Isto quer dizer que ele não está sendo usado na função. Quando colocamos o mouse em args aparece uma pirâmide, mostrando que há um refactoring a ser feito.

    image

    Aqui ele irá remover o parâmetro não usado. Além desta mudança, ele irá verificar todos os lugares onde a função é chamada e mudar a chamada a ela. Isto é ótimo quando colocamos um parâmetro e verificamos que ele não é mais necessário e queremos retirá-lo. Se fizermos isso, o código irá quebrar em todos os lugares onde a funçao é chamada. Com este refactoring, as chamadas são alteradas automaticamente. Fazendo esta mudança, nosso código fica ok, como mostra a figura abaixo.

    image

    O ReSharper está constantemente analisando nosso código e verifica a consistência na nomenclatura de variáveis e métodos. Você pode dizer como gosta de nomear os campos, propriedades e métodos e ele irá verificar a consistência para você.

    image

    Por exemplo, eu gosto de nomear meus campos privados usando CamelCase, iniciados com minúscula (sem um sublinhado antes). Assim, se eu colocar um campo com nomenclatura diferente, o ReSharper irá me avisar e se prontificar para alterar. Nada que um Alt-Enter não resolva. E ele irá mudar todas as referências para essa variável.

    image

    Melhoria do código

    Além da consistência de nomes, ele ainda verifica a qualidade do seu código. Sim, eu sei que seu código (como o meu) é impecável, mas será que dá para melhorar? Veja na figura abaixo, uma aplicação WPF onde implementei o manipulador do evento Click do botão em codigo, com button1.Click += <tab><tab>.

    image

    O ReSharper mostra dois avisos e um lembrete. O primeiro aviso é sobre MainWindow. Ele indica que o tipo pai (Window) já foi declarado em outro lugar desta classe parcial e é desnecessário. Devemos lembrar que quando criamos uma janela WPF estamos criando uma classe parcial, declarada em dois lugares: no XAML e no arquivo de code behind. O XAML já declara que MainWindow é derivado de Window e podemos tirar esta declaração redundante do code behind. O segundo aviso é devido ao fato que podemos eliminar a criação do delegate ao adicionar o manipulador. O lembrete é para indicar que temos uma exceção de “não implementado”, indicação clara que devemos colocar código ali. Dois Alt-Enter e nosso código fica assim:

    image

    O ReSharper analisa seu código, verificando possíveis erros e melhorias. Ao digitar este código

    image

    Vemos na barra lateral um aviso e uma possível melhoria. O aviso indica que ToString é redundante e que devemos especificar uma cultura para a conversão. O fato de ser redundante faz com que ele possa ser eliminado. Alt-Enter e lá se vai ele. A melhoria está no for, indicando que pode ser convertido para uma expressão LINQ. Ao teclar Alt-Enter mais uma vez ficamos com o código assim:

    image

    Outras melhorias de código muito comuns são otimização de if e de return: quando colocamos um código como

     

    if (x == 3) y = 2; else y = 5;

    o ReSharper otimiza para:

    y = x == 3 ? 2 : 5;


    Ou então este código:

    if (x == 3) return 2; else return 5;


     

    Aqui teríamos duas otimizações: eliminar o else

    if (x == 3) return 2; return 5;


    ou então usar o operador ternário:

    return x == 3 ? 2 : 5;


    Refactoring

    Mas isto não é tudo o que o ReSharper pode fazer por você. Seus recursos de refactoring e criação de código são fantásticos. Queremos extrair o código do manipulador de eventos para um novo método. Podemos teclar Ctrl-Shift-R (Refactor this) e o ReSharper irá mostrar os refactorings disponíveis.

    image

    Selecionamos o refactoring de extração de métodos e a seguinte tela é mostrada:

    image

    Podemos indicar os parâmetros, o nome da função e seu tipo de retorno. Ao clicar em Next, obtemos algo como

    image

    Criação de código

    Podemos ainda inserir código a partir de templates. O ReSharper permite criar templates com código para novos arquivos ou snippets de texto.

    image

     

    Temos três tipos de templates:

    • Live templates – templates de snippets de código, inseridos como snippets normais do Visual Studio. Para acionar, teclamos o snippet e <tab> para inserir. Outra maneira de acionar estes templates é usando Ctrl-E-L. Na figura, criei o snippet propnp, que cria uma propriedade com backing field e chama o manipulador de PropertyChanged
    • Surround templates, que permitem envolver o código selecionado com um template, por exemplo, para envolver o código com try…catch. Eles são acionados com Ctrl-E-U.
    • File templates – que criam novos arquivos no nosso projeto, como classes, interfaces. Eles são acionados com Ctrl-Alt-Ins.

    Vamos criar uma nova classe em nosso projeto. Teclamos Ctrl-Alt-Ins e criamos uma nova classe. Chamamos de NewClass. Teclamos Alt-Ins e inserimos o construtor para a classe. Nos parâmetros do construtor colocamos uma dependência:

    image

    Note que IDependency está em vermelho, pois não está definida. Teclamos Alt-Enter e as opções mostradas são as seguintes

    image

    Note que ele verificou que colocamos o nome do tipo iniciado com I, indicando uma interface e sugere a criação desta. Podemos então criar a interface a partir daqui. Após criar a interface, teclamos Alt-Enter novamente em IDependency e podemos declarar o campo para guardar a dependência:

    image

    A nossa interface foi criada no mesmo arquivo da classe. Podemos ir para sua declaração e teclar Alt-Enter. O ReSharper oferece para movê-la para um arquivo separado. É criado um arquivo IDependency.cs com a interface. Como vocês podem ver, é muito fácil criar e refatorar o código com o ReSharper. Ele facilita também a declaração de variáveis. Por exemplo, ao incluirmos o código

    total = -1;


    no construtor, vemos que total está em vermelho. Teclando Alt-Enter, temos as seguintes opções:

    image

    Podemos então criar um campo total no nosso código. Como vimos, temos diversas maneiras de mudar e melhorar nosso código.

    Auxílio no XAML

    Mas isso não é tudo. Podemos usar o ReSharper também no XAML, o que facilita bastante. Por exemplo, se criamos um Converter no código:

    public class DebugConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return value; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return value; } }


    Quando queremos usá-lo no XAML devemos seguir uma série de passos: namespace, declaração nos recursos, etc. Para isso, temos algumas facilidades.



    image



    Teclamos Alt-Enter em DebugConverter e selecionamos Create resource in type element <Window>. Ele cria a seção Resources e cria o recurso. Colocamos o nome DebugConverter. Não colocamos o namespace. Aparece uma tooltip indicando o namespace



    image



    Teclamos Alt-Enter e o namespace é declarado e colocado no elemento. Se não gostarmos do nome do namespace, podemos renomeá-lo com Ctrl-R-R. Pronto, a declaração do converter, o namespace, tudo está pronto, como necessário. Se tivermos um DataContext associado ao componente e ele não tiver uma propriedade chamada Valor, podemos usar o ReSharper para criar esta propriedade na classe do DataContext.



    image



    Navegação no código



    O ReSharper possui atalhos para navegação no código, que facilitam muito. Por exemplo, Ctrl-T navega para um tipo. Abre-se uma tela como a seguinte



    image



    Digitamos parte do nome e ele mostra os símbolos definidos que casam com a pesquisa. Da mesma maneira, podemos usar Shift-Alt-T para ir para um símbolo ou Ctrl-Shift-T para ir a um arquivo. A pesquisa é feita em todos os arquivos da solução. A navegação entre os membros de uma classe pode ser feita com Alt-`. Você pode ir ao membro anterior ou posterior com Alt-Up ou Alt-Down. Se você quiser, pode até navegar em código .NET descompilado. O ReSharper tem um descompilador que descompila o código e permite navegar até ele.



    image



    Utilidades diversas



    Mas isto não é tudo o que o ReSharper oferece. Você tem um unit test runner, onde pode rodar os seus testes unitários. Você pode estar pensando quo o Visual Studio já tem um test runner, mas o que o VS oferece é exclusivo para testes com MSTest. O runner do ReSharper funciona com outros frameworks de teste, como o NUnit, QUnit ou xUnit. Uma outra funcionalidade interessante é o Explore Stack Trace. Você tem o stack trace de uma exceção, obtido através de uma ferramenta de log qualquer. Basta copiar o stack trace para a área de transferência e, no Visual Studio, usar Ctrl-E-T. O stack trace é mostrado com links para o seu código, e você pode assim verificar onde ocorreu a exceção.





    image



    Conclusão



    Esta é só parte da funcionalidade oferecida pelo ReSharper, há muito mais para explorar, mas isto eu deixo para vocês. A ferramenta é paga, mas você pode baixar uma versão de avaliação por 30 dias, em http://www.jetbrains.com/resharper/download/index.html.



    Em conclusão, eu acho que esta é uma ferramenta indispensável para quem desenvolve com o Visual Studio, e só tenho um ponto contrário: ela é realmente viciante, e uma vez que você se acostuma a usar o Resharper, é muito difícil voltar a desenvolver sem ele Alegre