Michael Washington (ADefWebserver)

Silverlight: Why I feel “Design Is The Most Important Thing”

webmaster@openlightgroup.net — Fri, 30 Jul 2010 02:53:21 GMT

My first experience with “Web Design” was around 1997. the DotCom thing was heating up and a client wanted to host a web site that was “Designed” by a “Internet Design Company” (that I swear was not in business even 10 days before).

The problem was that the “page was taking too long to load”. I looked at what they did, and saw that while it was a beautiful page (yes, the “site” was only one page!), it was one big .gif file (and this is in the age of 2800 baud modems).

What I did, was break up the parts of the image, into separate images laid out using tables (again this is before the .css gurus told us how evil that was). The “Site” loaded in a tenth of the time and I learned that “Designers are only good for making mock-ups, and only programmers know how to properly make web applications”.

I hate to admit that this has been my attitude until this year. The year I ran into Alan Beasley. Without intending to, he made a Programmer admit that Programmers are not in charge of the most important aspects of building truly great web applications, the Designers are.

The Silverlight Buttons

It all started with a simple article Alan wrote on CodeProject.com: Building Better Buttons in Expression Blend & Silverlight. The point is that these were “just buttons”, but they were fun to press. I started to use his buttons in my articles, and I noticed that people were more impressed with pressing the buttons than they were with my code examples.

I started to collaborate with Alan, and I watched people play with the PopUp in our Popup article over and over again.

I would ask them “why do you like this so much?”, and they would respond, “I like the way it smoothly slides between yes and No”.

It then hit me that Silverlight allows us to make applications that people find enjoyable to use. Perhaps it is the way a driver enjoys driving a finely crafted automobile. It doesn’t matter where you are going, it is just fun to drive.

I was particularly taken by a small detail that Alan put into a File Manager application that I Programmed and he Designed.

In that one, the slider in the middle “pulses” when you hover over it. It practically begs you to slide it smoothly left and right. It is a small detail, but it says to the user “we know you exist, and we care about your experience”.

Designers Are A Pain!

All this comes at a price. Alan is a great guy, but he is after the best user experience, period. On a Windows Phone 7 tutorial, we spent two weeks, after I had completed all the coding, emailing back and forth resolving issues such a how he can transition from the list box to the video the way he wants.

Actually, every single project runs into the same design related issues:

“I want to be able to use a slider here…”
“I need the ability to trigger an animation on this panel…”

It’s funny how I seem to be able to create applications that work just fine, and there are only “issues” after he gets a hold of it!

But, that the point, there IS a problem with the application. HE is the person who can SEE the problem. A single minded attention to the Design of an application, allows the application to be better Designed. After each “issue” is resolved, I have to admit that he is right.

Look at my version of the File Manager:

And look at his:

The code is exactly the same!

But, it’s not just about “look”, it’s about “Design”. Look at my version of the Windows Phone application:

Now look at his (again, the code is exactly the same):

His design not only looks better, it makes more sense. He addresses important issues, such as the spacing between the buttons, so people don’t accidently press the wrong button.

Don’t get me started on how much agony he gave me over the issue with hooking up his version of the volume control. The entire time I am asking myself “WHY ME??”, until I see the final product and realize once again why it’s always worth it.

View Model / MVVM Is The Answer

Everything that Alan Beasley and I have done would not be possible without View Model. View Model, is basically MVVM without any of the “you should not do that”. View Model is about Designer Developer interaction, period.

Silverlight allows Alan and I to have a separation of responsibilities. He is in charge of anything that ends with .xaml (the UI) and I am in charge of anything that ends with .cs (the code). He never messes up anything that I am doing, and don’t mess up his stuff. We can actually email files to each other that the other person can simply drop into their project and it just works.

I feel that, the fact that a Designer can have complete control over the UI, means that Designers will work in Silverlight rather than another medium such as Flash. What artist wants to see their work “cut up” by some Programmer?

It’s is not enough to teach Programmers how to do better Design. We need to give Designers “an equal place at the table”. Great applications will be created because we have “Diversity”. It’s not a “Team” if the Programmer is able to overrule everyone else, because every aspect of the application must go through the Programmer.

When my programmer friends and I discuss different techniques to build Silverlight applications, the conversation usually gets to the “what would Alan Beasly think?” question. If he is not able to completely Design the UI with no coding, you lose your Designer. So unless we think Alan would “sign off on the solution”, we find another one.

The Programmers And The Chairs

Design is nice, but the most important thing? What about good architecture that is scalable and easily refactored ? These things are important, but the most important thing about any program, is the people who use it. A poorly designed application that has a great back end, is of little use if it does not perform the functions that the human being using it needs done.

Let me illustrate my point with a story I call “The Programmers and the Chairs”:

The requirements were clear. We only have trees to work with, and we have a lot of people, and they need something to sit on, because they get tired if they are standing up all the time.

The first time the problem was solved, it was solved only by Programmers. Programmers are really smart people, and they figured out how to cut down trees, and they created tools to create chairs. And that is it, they created one type of chair. It met the requirement.

The next time, a team of Programmers and Designers was used. The Designers realized that sometimes chairs were needed that needed to be moved a lot, so they designed them to be lightweight. Other times the person using the chair needed to sit in it for long hours, so they made it adjustable to support their back.

Please note that each time the Programmers were required to make these “Designs” actually work! “You want the chair the same size but lighter?” Whyyy meeee?? Hmm perhaps we can make the legs thinner…

And sometimes they wanted a chair so they can rock a nursing baby to sleep. This chair can also be easily rocked when they are older and want to watch their grandkids play in the yard. The Designers added contoured armrests and attractive patterns in the wood. Things that would appear to serve no purpose, other than the fact that this is a chair that a person will use as a cherished possession for decades.

This is the kind of application that I want to create.

Raising a Button Click in a DataGrid using MVVM

webmaster@openlightgroup.net — Sat, 24 Jul 2010 16:23:19 GMT

I wanted to put a button that would set the current comment to “****” when the button was clicked. I am using View Model (MVVM) and normally you would need to resort to using code behind.

Actually it is simple to do.

More...

Get a Free MSDN Ultimate subscription

webmaster@openlightgroup.net — Mon, 12 Jul 2010 21:53:00 GMT

More...

Basic Silverlight View Model Validation

webmaster@openlightgroup.net — Sun, 11 Jul 2010 04:54:11 GMT

Live Sample: http://silverlight.adefwebserver.com/RIATasks2ABValidation/RIATasksWeb/

There are many types of Silverlight Validation. This covers the most basic type, validating that the data entered matches the underlying type. In this example we will validate a Date Field.

More...

An ADO.NET Entity Framework / WCF 4.0 Version Of Silverlight CRUD

webmaster@openlightgroup.net — Mon, 28 Jun 2010 00:47:29 GMT

I decided to make a ADO.NET Entity Framework (EF) / Windows Communication Foundation (WCF) version of my tutorial: “RIATasks: A Simple Silverlight CRUD Example (using View Model and Rx Extensions)”. After doing so, I see that EF does not make much of a difference either way, but, while they have made great strides in easing deployment of WCF 4.0, major issues still remain.

ADO.NET Entity Framework

EF could have been used without too much problem. It only took three minutes to convert the application from using Linq to SQL to EF. After using the wizard to create a .edmx file, I only had to make trivial changes to the Linq syntax. For example I changed this:

    public string UpdateTask(Task objTask)
    {
        string strError = "";
        RIATasksDBDataContext DB = new RIATasksDBDataContext();
        try
        {
            var result = (from Tasks in DB.Tasks
                            where Tasks.TaskID == objTask.TaskID
                            where Tasks.UserID == GetCurrentUserID()
                            select Tasks).FirstOrDefault();
            if (result != null)
            {
                result.TaskDescription = objTask.TaskDescription;
                result.TaskName = objTask.TaskName;
                DB.SubmitChanges();
            }
        }
        catch (Exception ex)
        {
            strError = ex.Message;
        }
        return strError;
    }

To this:

    public string UpdateTask(Task objTask)
    {
        string strError = "";
        int intCurrentUser = GetCurrentUserID();
        RIATasksEntities DB = new RIATasksEntities();
        try
        {
            var result = (from Tasks in DB.Tasks
                            where Tasks.TaskID == objTask.TaskID
                            where Tasks.UserID == intCurrentUser
                            select Tasks).FirstOrDefault();
            if (result != null)
            {
                result.TaskDescription = objTask.TaskDescription;
                result.TaskName = objTask.TaskName;
                DB.SaveChanges();
            }
        }
        catch (Exception ex)
        {
            strError = ex.Message;
        }
        return strError;
    }

The main reason I continue to use Linq to SQL in most of my code examples is DotNetNuke works seamlessly with it and it does not with EF. Also, Linq to SQL is simple, it is very hard to mess it up. But, EF would not have been a big deal to use instead of Linq to SQL.

Windows Communication Foundation 4.0

Converting the .asmx web services to WCF was not hard. it also took only three minutes. Mostly just changing the attribute on each web method from [WebMethod] to [OperationContract].

The main problem is that it automatically put a ton of stuff in the Web.config:

  <system.serviceModel>
    <behaviors>
      <serviceBehaviors>
        <behavior name="">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="false" />
        behavior>
      serviceBehaviors>
    behaviors>
    <bindings>
      <customBinding>
        <binding name="RIATasks.Web.WebService.customBinding0">
          <binaryMessageEncoding />
          <httpTransport />
        binding>
      customBinding>
    bindings>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
      multipleSiteBindingsEnabled="true" />
    <services>
      <service name="RIATasks.Web.WebService">
        <endpoint address="" binding="customBinding" bindingConfiguration="RIATasks.Web.WebService.customBinding0"
          contract="RIATasks.Web.WebService" />
        <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
      service>
    services>
  system.serviceModel>

That is a lot of stuff that can go wrong as you move an application from environment to environment. Also this is just for one service, what if there are multiple services?

According to the documentation at this link,

…when you consider the net complexity of using WCF 3.x, one might reasonably conclude that it’s harder to use than its predecessor ASP.NET Web services (ASMX). With ASMX, you were able to define a [WebMethod] operation and the runtime automatically provided a default configuration for the underlying communications. When moving to WCF 3.x, on the other hand, developers have to know enough about the various WCF configuration options to define at least one endpoint. And the daunting number of configuration options often scares some developers away.

In an effort to make the overall WCF experience just as easy as ASMX, WCF 4 comes with a new “default configuration” model that completely removes the need for any WCF configuration. If you don’t provide any WCF configuration for a particular service, the WCF 4 runtime automatically configures your service with some standard endpoints and default binding/behavior configurations. This makes it much easier to get a WCF service up and running, especially for those who aren’t familiar with the various WCF configuration options and are happy to accept the defaults, at least to get started.

This goes a long way toward making things easier, however yank all the configuration stuff out of the web.config (none of which is needed when using .asmx web services) and you get helpful screen indicating that there is SOME configuration that is needed.

Also, while WCF will now automatically configures a binding to a HTTP address, it only configures one. If I have a service at adefwebserver.com and www.adefwebserver.com, only one will work, the other will silently fail.

One more thing, if you are deploying WCF on a Windows 2003 IIS web server, you have to ensure that your IIS settings specify only one authentication scheme.

All of these settings are implemented by millions of people each day, but I hope you can understand why I omitted all this from a beginner’s tutorial.

I am making the download available here:

http://silverlight.adefwebserver.com/files/RIATasksEF_WCFVersion.zip

However, I do not recommend using it because if you try to insert or update a large amount of text it will throw an error. I suspect it is a WCF configuration problem, but again the .asmx web services work fine under the same conditions.

A Simple Silverlight CRUD Example

webmaster@openlightgroup.net — Tue, 22 Jun 2010 04:16:43 GMT

Silverlight is different because it communicates with the website that launches it using asynchronous communication. Learning how to design applications this way can be a bit challenging.

More...

My MEF Rant

webmaster@openlightgroup.net — Sat, 12 Jun 2010 17:05:24 GMT

This is my MEF rant. Let me say up front that I do not think that Microsoft is doing anything incorrectly. But I have had a chance to spend at least 10 hours working with MEF so I now feel that I am educated enough about it to post a good old fashion rant.

What Is MEF?

The documentation for The Managed Extensibility Framework (MEF) describes its purpose as a tool that "...simplifies the creation of extensible applications". That is a very general statement. It's like describing nuclear physics as "the field of physics that studies the building blocks and interactions of atomic nuclei". In some ways MEF is as powerful to programming as nuclear physics is to science.

I wrote an article that describes how you can use it to dynamically load a .xap file: http://www.codeproject.com/KB/silverlight/MEFDynamicLoading.aspx

Mef = Good? or Why Should You Want To Use It?

I have a article that I am working on that allows you to use MEF to dynamically load different versions of a Video Player. The main project is in a file called SkinableVideoPlayer.xap and it is the first project to load.

It uses MEF to load the custom video players that are contained in .xaps.

When you normally build the project the .xap size for the custom video player is about 466 kb.

We can change the name of the .xap file to .zip, and open it up, we see that the only file we really need, is the customized player that is is only 6 kb.

All the other files are assemblies that are referenced by the custom video player.

First we make sure that the main project, SkinableVideoPlayer, has a reference to all the assemblies that we will need, then we go to references in the custom video player, and set all of them to Copy Local = False.

Now, when we build the size of the .xap is only 6 kb!

Wow!

Ok sign me up and give me a T-Shirt, and a membership card, to the I LOVE MEF! fan club. I’m sold.

With a Silverlight application, reducing the file size and dynamically loading components only when needed is a very BIG DEAL.

Note: Please understand that MEF can only work this “magic” if the required assemblies are loaded (Copy Local is set to True) by another .xap before it is needed. In my case this .xap is the SkinableVideoPlayer.xap, and as you can see in the screen shots above, it is still a hefty 488kb because it DOES contain the assemblies.

My point is that without MEF I was forced to load the SkinableVideoPlayer.xap at 488 kb AND the Hiro.xap for an additional 466 kb. In my article I plan to have about 4 players and it would be a 488 kb hit each time. Using MEF I only need to load 24 kb for all 4 players rather than 2330 kb. Unless my math is wrong that is a 97% reduction.

What Is Missing?

Once you understand MEF it’s not that hard, but it STAYS complicated. It is very powerful and anything powerful is inherently complex. However, anything complex can be simplified.

It should not take hundreds of words and dozens of screen shots to explain how to dynamically load a .xap file. This reminds me of the time when web services were first introduced. you had to create your web proxys manually. That has now been replaced by a simple “Add Web Reference” in Visual Studio.

What I Want To See

It is standard procedure for Microsoft to release something in it’s most basic form, then progressively enhance it according to customer feedback. MEF is in the middle of that process. Things are progressing according to plan.

Well here is some “Customer Feedback” :)

So what I want Microsoft to add, is something like this:

1) The ability to right-click in Visual Studio to set a "MEF Reference" that will automatically note the assemblies in the project that I am adding and set them to copy Local=False if the parent project already has them
2) Then it shows me the referenced projects in a window and I can drag and drop them directly onto the Design surface and it will automatically write all the code.
3) I can also interact with it in code behind.

Basically give me the same experience I have with web services :)

Expression Blend Number Guesser using DataStore

webmaster@openlightgroup.net — Mon, 31 May 2010 18:58:00 GMT

Expression Blend DataStore - A Powerful Tool For Designers

Live example:

Link: Expression Blend Number Guesser

Microsoft Expression Blend 4+ provides a tool called DataStore. It is a very powerful tool for Designers to create functionality in Expression Blend without writing any code. To demonstrate some of it's abilities, I created a number guessing program with no code.

More...

Simple Example To Secure WCF Data Service OData Methods

webmaster@openlightgroup.net — Sat, 22 May 2010 19:50:21 GMT

Live Example: http://silverlight.adefwebserver.com/ODataAuthenticationSample/

So you want to use OData but you need to secure the data? There are a ton of ways to do this, but this covers a simple way using ASP.NET Forms Authentication.

More...

Simple Silverlight 4 Example Using oData and RX Extensions

webmaster@openlightgroup.net — Thu, 20 May 2010 04:15:40 GMT

This is part II to the previous Blog (http://openlightgroup.nethttp://www.openlightgroup.nethttp://www.openlightgroup.net/Blog/tabid/58/EntryId/98/OData-Simplified.aspx) where we looked a simple OData example. This time we will make a simple Silverlight application that talks to an oData service.

Note, for this tutorial, you will also need to download and install RX Extensions from: http://msdn.microsoft.com/en-us/devlabs/ee794896.aspx, and the Silverlight Toolkit from: http://silverlight.codeplex.com.

As with the last tutorial, we will not use a database, just a simple collection that we are creating programmatically. This will allow you to see just the oData parts.

First, open up the project, in Visual Studio 2010 (or higher), from the zip file at the bottom of this link.

Select Add then New Project...

Create a new Silverlight Application.

Add a Service Reference.

Click Discover.

Create a reference called wsSampleCustomerData.

Next, add assembly references in your Silverlight project to:

System.CoreEx
System.Observable
System.Reactive

In the Silverlight project, delete the MainPage.xaml

Open the project in Expression Blend 4 (or higher).

In Expression Blend, Select File then New Item...

Select the UserControl with ViewModel template, and create a file called MainPage.xaml.

It will create the ViewModel pages (MainPage.xaml and MainPage.xaml.cs with a MainPageModel.cs View Model page that is already wired-up).

Create a folder called Model and a class called Model.cs.

Replace all the code with the following code:

using System;
using System.Linq;
using System.Collections.Generic;
using SilverlightODataSample.wsSampleCustomerData;
using System.Data.Services.Client;
namespace SilverlightODataSample
{
    public class Model
    {
        #region GetCustomers
        public static IObservable> 
            GetCustomers(int intPage)
        {
            // Create a URI that points to the OData Service
            Uri objUri = new Uri(GetBaseAddress(), UriKind.RelativeOrAbsolute);
            // Set up oData service call
            SampleDataSource SDS = new SampleDataSource(objUri);
            // Construct a Query
            var query = (from SampleCustomerData in SDS.SampleCustomerData
                         where SampleCustomerData.CustomerNotes.Contains("3")
                         select SampleCustomerData).Skip(intPage).Take(10);
            // Set up a DataServiceCollection to hold the results
            DataServiceCollection CustomerRecords = 
                new DataServiceCollection();
            // Set up a Rx Observable (in a variable called observable) 
            // that will contain the results of
            // the "LoadCompleted" event that CustomerRecords will fire
            // When LoadAsync(query) is fired in the following stetement
            IObservable> observable =
                Observable.FromEvent(CustomerRecords,
                "LoadCompleted");
            // Execute the LoadAsync on CustomerRecords passing
            // the query that was constructed earlier
            CustomerRecords.LoadAsync(query);
            // Return observable
            return observable;
        }
        #endregion
        #region GetBaseAddress
        private static string GetBaseAddress()
        {
            // This gets the address of the webservice by 
            // getting the AbsoluteUri and then stripping out the 
            // name of the .xap file
            string strXapFile = @"/ClientBin/SilverlightODataSample.xap";
            string strBaseWebAddress =
                App.Current.Host.Source.AbsoluteUri.Replace(strXapFile, "");
            return string.Format(@"{0}/{1}", strBaseWebAddress, @"Service.svc");
        }
        #endregion
    }
}

Open MainPageModel.cs and replace all the code with the following code:

using System;
using System.ComponentModel;
using System.Collections.ObjectModel;
using SilverlightODataSample.wsSampleCustomerData;
using System.Data.Services.Client;
namespace SilverlightODataSample
{
    public class MainPageModel : INotifyPropertyChanged
    {
        public MainPageModel()
        {
            // When the Control loads
            // Get the Customers
            GetCustomers();
        }
        #region GetCustomers
        private void GetCustomers()
        {
            // Call the Model to get the Customers
            // Passing in 0 to get the first page
            // Paging could easily be done here
            // You could also pass in other criteria
            Model.GetCustomers(0).Subscribe(p =>
            {
                // Check for an error in the Service
                if (p.EventArgs.Error == null)
                {
                    // loop thru each item in the
                    // DataServiceCollection
                    // Collection
                    foreach (CustomerRecord Customer in
                        (DataServiceCollection)p.Sender)
                    {
                        // Add to the Customer to the colCustomerRecord 
                        // Collection so the View can bind to it
                        colCustomerRecord.Add(Customer);
                    }
                }
            });
        }
        #endregion
        #region CustomerRecord
        // The View will bind to this collection and automatically be notified if 
        // The collection changes. The Designer can bind any UI element that 
        // can hold a collection
        private ObservableCollection _colCustomerRecord
            = new ObservableCollection();
        public ObservableCollection colCustomerRecord
        {
            get { return _colCustomerRecord; }
            private set
            {
                if (colCustomerRecord == value)
                {
                    return;
                }
                _colCustomerRecord = value;
                this.NotifyPropertyChanged("colCustomerRecord");
            }
        }
        #endregion
        #region INotifyPropertyChanged
        // This is a supporting method to raise a notification for any
        // Element that is subscribed to a Property that implements
        // NotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
        #endregion
    }
}

Grab a DataGrid and drop it on the design surface.

Widen it so it fills the page.

Click on the Data tab so that you see the Data Context.

Drag and drop colCustomerRecord collection onto the DataGrid.

Build and run the project.

OData and RX extensions are pretty impressive:

RX extensions were used because it decouples the oData Service calls from the View Model. This allows the methods in the model to be easily called by multiple View Models.
We are only grabbing the first page of the results but we could easily implement paging by passing the page number to the method
We are also only creating a simple query. We could easily create a more complex query of the oData Service

Download the Code

Download the Code here: ODataSample.zip

Further Reading

http://www.leastprivilege.com/ThinktectureIdentityModelWIFSupportForWCFRESTServicesAndOData.aspx