Search results matching tags 'Silverlight' and 'DevCenter'

Combined DevelopMentor instructors blog feed.

Maurice — Wed, 19 Aug 2009 05:00:00 GMT

Michael Kennedy, one of the co instructors from DevelopMentor, has created a combined feed from all the blogs of the various DevelopMentor. An awesome group of people with a lot of knowledge to share. Highly recommended in you RSS reader.

http://feeds.feedburner.com/DevelopmentorInstructors

If you want to check out a list of the individual blog feeds look here.

Enjoy!

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

Getting started with the .NET RIA Services

Maurice — Tue, 30 Jun 2009 05:00:00 GMT

A recent article I wrote for the MSDN website just went live.

Read is here.

Paging with the Silverlight RIA services DomainDataSource

Maurice — Mon, 27 Apr 2009 05:00:00 GMT

Using the declarative DomainDataSource that is part of the upcoming Silverlight 3 RIA services makes it quite easy to work with data. All you need to do is add a DomainDataSource control to the the XAML, point it to the generated DomainContext class (in this case NorthwindContext) and tell it which method to use to load the data from the web service(in this case LoadCustomers). Next add a DataGrid to display the data and you are good to go.

     <UserControl xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"  x:Class="LOBUsingRIAServices.CustomerListPage"

                 xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  

                 xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Ria.Controls"

                 xmlns:web="clr-namespace:LOBUsingRIAServices.Web"

                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

        <Grid x:Name="LayoutRoot" Background="White">

            <riaControls:DomainDataSource x:Name="CustomerDataSource"

                                          LoadMethodName="LoadCustomers">

                <riaControls:DomainDataSource.DomainContext>

                    <web:NorthwindContext />

                </riaControls:DomainDataSource.DomainContext>

            </riaControls:DomainDataSource>

            <data:DataGrid ItemsSource="{Binding Data, ElementName=CustomerDataSource}" />

        </Grid>

    </UserControl>

Pretty simple and that is the way I like it

Adding paging.

Sometimes the lost of data to load can get somewhat large and you might not want to load all data. In that case all you need to do is add a PageSize and the DomainDataSource will only load enough data to display on a single page. You can do this by just setting the PageSize on the DomainDataSource but as we also need a control to allow the user to page trough the data it is easier to also add the DataPager control. Now you have the option of setting the PageSize on the DomainDataSource or the DataPager. I found that setting it on either would work just was well except for the initial load where the DataPager shows page 0 when the PageSize is set on the DomainDataSource while it is set to 1, the correct value, when set on the DataPager. I assume this is just a small bug in the current preview.

Another thing you can specify is the LoadSize. This determines how many rows are loaded with each request and if not set equals the PageSize. Setting this to double the PageSize will improve the responsiveness of the the client application so might be a good idea if the data isn’t too large.

    <UserControl xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"  x:Class="LOBUsingRIAServices.CustomerListPage"

                 xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  

                 xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Ria.Controls"

                 xmlns:web="clr-namespace:LOBUsingRIAServices.Web"

                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

        <Grid x:Name="LayoutRoot" Background="White">

            <riaControls:DomainDataSource x:Name="CustomerDataSource"

                                          LoadMethodName="LoadCustomers"

                                          LoadSize="40">

                <riaControls:DomainDataSource.DomainContext>

                    <web:NorthwindContext />

                </riaControls:DomainDataSource.DomainContext>

            </riaControls:DomainDataSource>

            <data:DataGrid ItemsSource="{Binding Data, ElementName=CustomerDataSource}" />

            <dataControls:DataPager Source="{Binding Data, ElementName=CustomerDataSource}" 

                                    PageSize="20" />

        </Grid>

    </UserControl>

The DataPager control is quite easy to use as well. Just drop it below the DataGrid and point it to the DomainDataSource to use and it just works. One problem I ran into was adding the DataPager above the DataGrid though. When I did that the DataPager didn’t show up on the UI so the user could not page through the data even though it still limited the data to the first page.

Using progressive loading

Another nice option is delayed loading. When using progressive loading all you need to do is specify the LoadSize on the DomainDataSource. The DomainDataSource will now load the specified number of rows, wait a bit and load the next set of rows. It will keep on doing this until all data is loaded. The nice thing here is that all the data is loaded but the UI still stays responsive for the user. De the default interval between load requests is 0.75 seconds but this can be fine tuned using the LoadDelay time span on the DomainDataSource.

    <UserControl xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"  x:Class="LOBUsingRIAServices.CustomerListPage"

                 xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  

                 xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Ria.Controls"

                 xmlns:web="clr-namespace:LOBUsingRIAServices.Web"

                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

        <Grid x:Name="LayoutRoot" Background="White">

            <riaControls:DomainDataSource x:Name="CustomerDataSource"

                                          LoadMethodName="LoadCustomers"

                                          LoadSize="10"

                                          LoadDelay="0:0:0.25">

                <riaControls:DomainDataSource.DomainContext>

                    <web:NorthwindContext />

                </riaControls:DomainDataSource.DomainContext>

            </riaControls:DomainDataSource>

            <data:DataGrid ItemsSource="{Binding Data, ElementName=CustomerDataSource}" />

        </Grid>

    </UserControl>

And all of this was done without writing any code add everything was completely declarative. Of course it is just a matter of setting properties so doing so from code is easy enough.

Enjoy!

Using Model – View – ViewModel with Silverlight

Maurice — Tue, 07 Apr 2009 05:00:00 GMT

The View – Model – ViewModel design pattern, also known as MVVM, is getting more popular these days. I have found it extremely easy to use when developing very different applications and have used the design pattern recently in both ASP.NET, WPF and Silverlight applications. However easy as it might be is seems to confuse people as I have seen some terrible examples where people make a complete mess of things.

Josh Smith did an excellent screen cast for Pixel8 on using MVVM with WPF, you can find it here.

Even thought the UI technology used doesn't change the basic MVVM pattern there are some subtle differences, like not easily being able to use ICommand in Silverlight, so I decided to create a small Silverlight sample.

The basic structure goes like this:

The user interacts with a View, implemented as a Silverlight user control.
The View is data bound to a ViewModel. This is the most important step to remember. The ViewModel is just another class.
The ViewModel is a wrapper for a Model. Think of the Model as the data and the business rules.

The Model

The Model I am using is very simple and has two read-write properties, FirstName and LastName, and a single read-only property, FullName. The FullName property represents some business rule on how a name should be formatted. I know it is a bit of a lame business rule but it is just a sample . The Model also implements INotifyPropertyChanged so the UI can be updated whenever a value is updated. The complete model looks like this:

        1: using System.ComponentModel;

       2:  

       3: namespace SilverlightMVVMDemo.Model

       4: {

       5:     public class Customer : INotifyPropertyChanged

       6:     {

       7:         private string _firstName;

       8:         private string _lastName;

       9:  

        public string FirstName

        {

            get { return _firstName; }

            set

            {

                _firstName = value;

                OnPropertyChanged("FirstName");

                OnPropertyChanged("FullName");

            }

        }

        public string LastName

        {

            get { return _lastName; }

            set

            {

                _lastName = value;

                OnPropertyChanged("LastName");

                OnPropertyChanged("FullName");

            }

        }

  

  

        public string FullName

        {

            get { return FirstName + " " + LastName; }

        }

  

        public event PropertyChangedEventHandler PropertyChanged;

  

        protected void OnPropertyChanged(string propertyName)

        {

            if (PropertyChanged != null)

            {

                var args = new PropertyChangedEventArgs(propertyName);

                PropertyChanged(this, args);

            }

        }

    }

}

The View

The View is just a Silverlight user control that makes things visible for the user. All controls use data binding to get to their values. There is one interesting twist here. Just like I had a business rule about how to format a FullName I have a rule about the font weight to use to display the FullName. This is just UI so not a business rule and as a result it is not stored in the Model. We do not want to code this in the UI as that makes things hard to test. So that leaves one place, the ViewModel . And the View uses data binding to set the FontWeight property.

The complete View looks like this:

       1: <UserControl

       2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

       3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

       4:     xmlns:SilverlightMVVMDemo_ViewModel="clr-namespace:SilverlightMVVMDemo.ViewModel" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="SilverlightMVVMDemo.View.CustomerView" 

       5:     Width="400" Height="300" mc:Ignorable="d">

       6:     <Grid x:Name="LayoutRoot" 

       7:           Background="White">

       8:         <Grid.RowDefinitions>

       9:             <RowDefinition Height="0.133*"/>

            <RowDefinition Height="0.133*"/>

            <RowDefinition Height="0.133*"/>

            <RowDefinition Height="0.18*"/>

            <RowDefinition Height="0.42*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="0.3*"/>

            <ColumnDefinition Width="0.7*"/>

        </Grid.ColumnDefinitions>

        <TextBlock Text="Firstname:" 

                   Margin="8"/>

        <TextBox Text="{Binding Path=FirstName, Mode=TwoWay}" 

                 Grid.Column="1" 

                 Margin="8,8,8,8"/>

        <TextBlock Text="Lastname:" 

                   Grid.Row="1" 

                   Margin="8"/>

        <TextBox Text="{Binding Path=LastName, Mode=TwoWay}" 

                 Grid.Row="1" 

                 Grid.Column="1" 

                 Margin="8,8,8,8"/>

        <TextBlock Text="Fullname:" 

                   Grid.Row="2" 

                   Margin="8"/>

        <TextBox Text="{Binding Path=FullName}" 

                 Grid.Row="2" 

                 Grid.Column="1" 

                 Margin="8,8,8,8"

                 FontWeight="{Binding Path=FullNameFontWeight}"

                 IsReadOnly="True"/>

        <Button Content="Save"

                Click="Button_Click"

                Grid.Row="3" 

                Grid.Column="1" />

    </Grid>

</UserControl>

The code behind is very simple and looks like this:

       1: using System.Windows.Controls;

       2: using SilverlightMVVMDemo.ViewModel;

       3:  

       4: namespace SilverlightMVVMDemo.View

       5: {

       6:     public partial class CustomerView : UserControl

       7:     {

       8:         public CustomerView()

       9:         {

      10:             InitializeComponent();

      11:             DataContext = new CustomerViewModel();

      12:         }

      13:  

      14:         private void Button_Click(object sender, System.Windows.RoutedEventArgs e)

      15:         {

      16:             var viewModel = (CustomerViewModel)DataContext;

      17:             viewModel.Save();

      18:         }

      19:     }

      20: }

In an ideal world there would be no code at all, or only that setting the DataContext but as Silverlight makes it a little harder to use commands there is a single line, okay two counting the cast, to pass the save command on to the ViewModel.

The ViewModel

The ViewModel class is the one that glues the View and the Model together, hence its name . basically the ViewModel wraps each Model object, so if you want to use a collection of customer models you create a collection of CustomerViewModel objects and databind against them. The ViewModel catches all PropertyChanged events from the Model and passes them on to the user interface. Whenever the FullName property changes the FullNameFontWeight might also change so in that case an extra PropertyChanged event is raised. Note that calculation of the FontWeight to use is part of the ViewModel as the UI depends on this but it is not a business rule per se.

Another example of a property like this would be the CSS class to use in an ASP.NET application. basically if a UI property changes, create a property get to do so and databind it.

The complete ViewModel class looks like this:

       1: using System.ComponentModel;

       2: using System.Windows;

       3: using SilverlightMVVMDemo.Model;

       4:  

       5: namespace SilverlightMVVMDemo.ViewModel

       6: {

       7:     public class CustomerViewModel : INotifyPropertyChanged

       8:     {

       9:         private Customer _model;

  

        public CustomerViewModel()

        {

            Model = new Customer() { FirstName = "Maurice", LastName = "de Beijer" };

        }

  

        public CustomerViewModel(Customer model)

        {

            Model = model;

        }

  

  

        public Customer Model

        {

            get { return _model; }

            private set

            {

                if (_model != null)

                    _model.PropertyChanged -= ModelPropertyChanged;

  

                _model = value;

  

                if (_model != null)

                    _model.PropertyChanged += ModelPropertyChanged;

            }

        }

  

        void ModelPropertyChanged(object sender, PropertyChangedEventArgs e)

        {

            OnPropertyChanged(e.PropertyName);

  

            if (e.PropertyName == "FullName")

                OnPropertyChanged("FullNameFontWeight");

        }

  

  

        public string FirstName

        {

            get { return Model.FirstName; }

            set { Model.FirstName = value; }

        }

        public string LastName

        {

            get { return Model.LastName; }

            set { Model.LastName = value; }

        }

  

        public string FullName

        {

            get { return Model.FullName; }

        }

  

        public FontWeight FullNameFontWeight

        {

            get

            {

                if (FullName.Length > 20)

                    return FontWeights.ExtraBold;

                else if (FullName.Length > 15)

                    return FontWeights.Bold;

                else if (FullName.Length > 10)

                    return FontWeights.Normal;

                else

                    return FontWeights.Light;

            }

        }

  

        public event PropertyChangedEventHandler PropertyChanged;

  

        protected void OnPropertyChanged(string propertyName)

        {

            if (PropertyChanged != null)

            {

                var args = new PropertyChangedEventArgs(propertyName);

                PropertyChanged(this, args);

            }

        }

  

        internal void Save()

        {

            // Implement the logic to save the customer.

        }

    }

}

In this case I duplicated all properties from the Model in the ViewModel. This is not a must, some people prefer to expose and bind to the Model directly. It saves a few lines of code but I prefer not to do so. Of course there is no need to duplicate properties the UI is never going to bind to directly.

Model-View-ViewModel guidelines

Not very difficult at all as long as you keep to a few guidelines:

Never set any UI properties from your CS code with the exception of the DataContext.
If you need an event handler in your code behind, like the button click, make it a single line and pass the request onto the ViewModel.
All UI control properties that need to change at runtime do so by data binding to a ViewModel property.
Organize your ViewModel types per View and not per Model. It is perfectly fine to create a ViewModel that wraps two different Models. A View has only a single DataContext so you cannot bind it to multiple ViewModel objects.

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

And now on Twitter at http://twitter.com/mauricedb.

Want to download all MIX sessions?

Maurice — Tue, 31 Mar 2009 05:00:00 GMT

Then you should check Mike Swanson’s blog post here. He has two batch files, the first downloads all MIX session recordings with in the format you like, the second renames them so it is easier to make sense of all the media file names.

If you just want a list of all sessions with download links this page might be the thing for you.

So much better than downloading them by hand. Not as good as going to the MIX itself but if you, like me, couldn’t go it is still a nice way to see all the content.

Enjoy!

Visual Basic QuickStarts and How-to Topics for the Composite Application Guidance for WPF and Silverlight

Maurice — Wed, 25 Mar 2009 05:00:00 GMT

The P&P team have just release a VB version of the Prism quick starts.

You can download the goods here.

Enjoy!

Looking back at the MVP Summit

Maurice — Sat, 07 Mar 2009 06:00:00 GMT

Last week lots of MVP, myself included, where in Redmond visiting Microsoft on our yearly MVP pilgrimage. The MVP Summit is always a great event. Not only do we get to talk to the MS team members who actually design and build all the software we love and use but we also get to meet each other. And with MVP’s being located around the world that is kind of rare as well.

Despite this being a great event I still have very mixed feelings about this last MVP summit. The problem isn’t the events itself or the people I met, that was al great . No the problem was in some of the technological decisions made in product groups. Unfortunately I can’t divulge details yet because I have signed an NDA but as soon .NET 4.0 as beta 1 is made public I will be able to blog about some of these decisions. And rest assured I will!

The reason we really need to is the way these important changes are communicated. Or should I say not communicated. Some very important changes where not communicated at all and could only be derived by bullet points missing from PowerPoint slides. Only when directly asked about the missing bullet point would someone say “Yes that is right, we decided to …. NDA … because … NDA …”. Sorry about the NDA part .

I can only say that these decisions are a big problem and I know several MVP’s who decided to skip other sessions on the same product as a result. I didn’t, as far as I am concerned ignoring a problem is not going to make it go away, but I really think this product team needs to reevaluate this decision and the general future trend.

Despite this hiccup I am very exited about lots of the things I got to see and am really looking forward to .NET 4 and Visual Studio 2010. Now if we only could have a beta today . When we will have a first beta is still a big question though. If a date was announced I missed it, the best I heard was a quarter and is quite a time span.

Enjoy.

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

SilverUnit - Unit testing framework for Silverlight

Maurice — Wed, 25 Feb 2009 06:00:00 GMT

Roy Osherove has just released SilverUnit, a unit testing framework for Silverlight code. I haven't tried this yet but it certainly looks really interesting as you can start running your Silverlight unit tests inside of MS Test or NUnit.

And kind cool to hear this is written in VB

You can find more information and download SilverUnit from CodePlex here.

Enjoy!

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

Patterns & Practices release Prism version 2

Maurice — Wed, 18 Feb 2009 06:00:00 GMT

The Patterns & Practices group at Microsoft have just released Prism version 2. I am pretty exited about this because Prism version 2 supports both WPF and Silverlight. And as it makes extensive use of the Model - View - ViewModel amongst other design patterns it is a great place to learn, even if you don't use it as is.

Check out the main "Composite Application Guidance for WPF and Silverlight" page here. Or read Blaine Wastell about it here.

Enjoy!

Lazy loading using Ninject

Maurice — Tue, 10 Feb 2009 06:00:00 GMT

In my previous blog post I demonstrated how you can use Ninject in your Silverlight application to automatically inject dependencies and make live easier. In the sample I injected the dependency, the PingService, inside my PageModel constructor. That worked just fine because the PingService is lightweight and stateless. However suppose creation is much more involved and you don’t need it all the time so you really want to divert creation until you really need the PingService. Well we can by just a few simple changes.

Changing the PageModel to defer loading of the PingService

This is actually a very easy change. All we need to do is change to constructor from expecting a PingService to expecting a IKernel. The IKernel is the Ninject main object and Ninject will take care of injecting itself. Kind of cool as the Page, which creates and uses the PageModel , doesn’t even need to be aware of the change, Ninject will do all the work here .

Now we can change the ExecutePing() function to use the kernel to create the PingService when needed and we are done. The new PageModel looks like this:

using System;
using System.ComponentModel;
using System.Threading;
using Ninject.Core;
 
namespace NinjectSample
{
    public class PageModel : INotifyPropertyChanged
    {
        public PageModel(IKernel kernel)
        {
            _kernel = kernel;
            _context = SynchronizationContext.Current;
        }
 
        private IKernel _kernel;
        private SynchronizationContext _context;
        public DateTime TheResult { get; set; }
 
        public void ExecutePing()
        {
            PingService.PingService proxy = _kernel.Get<PingService.PingService>();
            proxy.BeginPing(proxy_PingCompleted, proxy);
        }
 
        void proxy_PingCompleted(IAsyncResult result)
        {
            PingService.PingService proxy = (PingService.PingService)result.AsyncState;
            _context.Post(state =>
                {
                    TheResult = proxy.EndPing(result);
 
                    if (PropertyChanged != null)
                        PropertyChanged(this, new PropertyChangedEventArgs("TheResult"));
                }, null);
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
    }
}

The normal generated WCF PingService will work just fine as will the Page, no changes there. The only other change we need to make is to the TestPingService as this was a very simple implementation before. Not that it is very complicated now but it needs to work with a dummy IAsyncResult. The complete fake code looks like this:

using System;
 
namespace NinjectSample
{
    public class TestPingService : PingService.PingService
    {
        public IAsyncResult BeginPing(AsyncCallback callback, object asyncState)
        {
            TestAsyncResult result = new TestAsyncResult() { AsyncState = asyncState };
            callback(result);
            return result;
        }
 
        public DateTime EndPing(IAsyncResult result)
        {
            // Birthdate Charles Babbage
            return new DateTime(1791, 12, 26);
        }
    }
 
    class TestAsyncResult : IAsyncResult
    {
        public object AsyncState { get; set; }
        public System.Threading.WaitHandle AsyncWaitHandle { get; set; }
        public bool CompletedSynchronously { get; set; }
        public bool IsCompleted { get; set; }
    }
}

Easy right

Conclusion

Even though we are now using lazy loading instead of eager loading Ninject still makes live easy for us.

Enjoy!

Download source code