Everything Silverlight, and more!

I often receive questions about topics covered in one or another of my books, and I respond, most often, privately. Every once in a while, however, a question comes along that may be of more general interest. This question, though about C#, has a profound effect on Silverlight programming as well…

Question:

… I still can't figure out when I would need to create an interface when designing my application….

 

Short Answer

When you want to abstract out what is required from how that requirement is met.  

Full Answer

The short answer is correct as far as it goes, but it doesn’t help at all [footnote 1]

The somewhat longer answer is to start with some of the premises of writing Clean Code:

• Each method should be very short and do just one thing
• Each class should have one easily articulated area of responsibility
• Classes should know what other classes do but not how. 

Let’s look at how that might play out…

You might start off by refactoring into a Note class and a FileManager class like this:

using System.IO;
using System;

namespace Interfaces
{
   class Program
   {
      static void Main( string[] args )
      {
         var np = new NotePad();
         np.NotePadMainMethod();
      }
   }

   class NotePad
   {
      private string text = "Hello world";

      public void NotePadMainMethod()
      {
         Console.WriteLine( "Here I would interact with you and offer you a writing surface" );
         Console.WriteLine( "Then when you push the right button, I ask FileManager to " );
         Console.WriteLine("print the file..." );

         var fm = new FileManager();
         fm.Print(text);
      }
   }


   class FileManager
   {
      public void Print(string text)
      {
         Console.WriteLine( "I'm pretending to backup the old version of the file and then " );
         Console.WriteLine( " print the text you sent me " );
         Console.WriteLine( " printing {0}" , text );
         var writer = new StreamWriter( @"c:\temp\HelloWorld.txt", true );
         writer.WriteLine( text );
         writer.Close();
      }
   }
}
   
   
   

This console program is stripped of all error checking and all three classes are in one file to keep things simple. The idea is that the NotePad class interacts with the user, obtains a string to print, and then sends it to the FileManager whose job is to see if the file exists, if so make a backup, and then write the user’s text to the file (presumably we’d open a file save dialog rather than just assuming the user wants to write to c:\temp\HelloWorld.txt).

Adding A Second Writer

After creating the above, you realize that there will be times that you will want to write to, e.g., Twitter.  You could put in a branching statement:

using System.IO;
using System;

namespace Interfaces
{
   class Program
   {
      static void Main( string[] args )
      {
         new NotePad().NotePadMainMethod();
      }
   }

   class NotePad
   {
      private string text = "Hello world";
         
      public void NotePadMainMethod()
      {
         var dest = "Twitter";
         switch ( dest )
         {
            case "File":
               var fm = new FileManager();
               fm.Print( text );
               break;
            case "Twitter":
               var tm = new TwitterManager();
               tm.Tweet( text );
               break;
         }
      }
   }


   class FileManager
   {
      public void Print(string text)
      {
         // write to file
      }
   }

   class TwitterManager
   {
      public void Tweet( string text )
      {
         // write to twitter
      }
   }
}
   
   
   

Adding An Interface

This begins to get ugly, and more important, the NotePad class is now entirely dependent on both the FileManager class and the TwitterManager class.  It is cleaner, easier to maintain, and far easier to test, if we remove those dependencies.

The first step in doing so is to have the NotePad not know which class will take care of writing the message; all it needs to know is that some class that knows how to “Write” will do the work.  We accomplish this by creating an interface, Writer[footnote b] that has a Write method.

   interface Writer
   {
      void Write(string whatToWrite);
   }

We then have the FileManager and TwitterManager classes implement this interface:

   class FileManager : Writer
   {
      public void Write( string text )
      {
         // write to a file
      }
   }

   class TwitterManager : Writer
   {
      public void Write( string text )
      {
         // write to Twitter stream
      }
   }

At this point, we return to the NotePad and it can instantiate the class it wants as a Writer:

      public void NotePadMainMethod()
      {
         var w = new TwitterManager();
         w.Write( text );
      }

That is step 1 in decoupling the NotePad from the other classes; now all it knows is that it has a Writer, which can be one or the other of the streams (or any other class that implements that method) but we’re hard coding which implementing class to use (in this case TwitterManager) in the NotePad class… not great.

Dependency Injection

Dependency Injection is one of those terms you really want to work into your conversation at every conference you attend. It marks you as a cutting edge, in the know kind of geek. 

Here’s how it works.  You don’t want to hard-code the dependency into NotePad because that makes for code that is hard to maintain and hard to test (the technical term is “bad.”)

What you can do, instead, is “inject” the dependency at run time. You can inject in a number of ways, the most common of which are:

• Constructor injection
• Property injection
• Parameter injection
• Using a Factory
• Using an Inversion of Control (IoC) container

(Yes, IoC container may be even cooler than dependency injection. More on IoC below, but not much more)

Constructor injection just says that we’ll let the Notepad know which type of writer it is going to use when we create the class:

   class NotePad
   {
      private string text = "Hello world";
      private Writer w;
      public NotePad( Writer w )
      {
         this.w = w;
      }
         
      public void NotePadMainMethod()
      {
         w.Write( text );
      }
   }

Notice that we pass in an instance of Writer, stash it away in a member variable and then NotePadMainMethod just uses it.  The actual instance is not created in NotePad, it is created in whomever instantiates the NotePad and “injected” into NotePad through the constructor.

Property Injection works the same way, but instead of passing in the writer through the constructor, you set a property,

      public Writer MyWriter { get; set; }
         
      public void NotePadMainMethod()
      {
         MyWriter.Write( text );
      }

Now whoever instantiates MyWriter just sets the property and NotePad can take it from there. 

Parameter Injection, as you can, by now imagine, eschews having a member variable, and just passes the type of writer into the method as a parameter

      public void NotePadMainMethod(Writer w)
      {
         w.Write( text );
      }

Factory Pattern and IoC Containers

Each of these three approaches has its advantages, but none of them scale very well. To solve this problem, developers often turn to the Factory Pattern which allows for another level of indirection: an object that creates other objects (the factory).  We won’t go into that as it isn’t essential to understanding interfaces, but I will also mention that beyond the Factory, when you want the ability to “compose” your application at run time, with totally decoupled objects (that is, at run time you’ll decide what writer the NotePad will use, and neither the writer nor the NotePad need depend on the other) you can then turn to Inversion Of Control (IoC) containers; a big topic covered in some detail here, and here.

The Curve, and Being Behind It

Reading Scott’s great review of Alt.NET and Open Spaces and many topics related to the above; I am reminded of a cartoon in which you see a man and woman in a tree, while others are running by holding torches, and the woman says to the man, “How come it seems like everyone else is evolving but us?”

More from me on Open Spaces, Dependency Injection, Alt.Net and much else coming soon. You can join me in working through all this while creating a truly amazingly fun open source project here, the documentation for which is here.

----

footnote 1: Old joke: two guys are in a helicopter over Washington state, and the fog comes in too fast; they are totally lost and running low on fuel.  The chopper pilot pulls up next to an office building, knocks on the window and when a man comes to the window, hollers “Where am I?”

The guy looks at him and says “You’re in a helicopter” and shuts the window.

The pilot flies directly to the airport and lands safely. His passenger, stunned, asks him, “how did that help?”  “Oh,” says the pilot, “I was in a life and death situation, and asked a perfectly reasonable question. He gave me an answer that was both true and totally unhelpful; so I knew right where I was: Microsoft Tech Support.”

(With apologies to the terrific and truly helpful people at tech support, who will please have a sense of kajf;320 <abend>)

footnote b: Notice that my interface is named Writer, not IWriter.  I’d like to say that I had the courage of my convictions to stop putting the Silly I in front of every interface (IWrite, IClaudius, IThinkThereforeIAm…) but it took reading Bob Martin’s wonderful book Clean Code to get me to step up.

In this Issue: Fons Sonnemans, Mark Monster, Karl Shifflett, Einar Ingebrigtsen(2), Jeremy Likness, Emil Stoychev, Andrew Veresov, Sergey Barskiy(2), and Tim Heuer.

Shoutout:

Karl Shifflett announced Karl Now Using Vimeo for Videos... check it out, thank Karl, and create an acount.

From SilverlightCream.com:

Keyboard selection on Silverlight ListBox and ComboBox

Fons Sonnemans explains and provides a behavior that allows keyboard selection on a ListBox or ComboBox.

MeXperience – Step 3 – Architecture, implementing pipes and filters

Mark Monster has part 3 of his MeXperience application up... discussing the implementation of the pipes and filters pattern that he's filtering experience objects with.

BBQ Shack - Ocean v2 for Visual Studio 2008

If you've heard Karl Shifflett speak in the last year, you've been waiting for this post... Ocean V2 is out, and his BBQShack tutorial is up... wow!

Silverlight Tutorials: Silverlight Basic – SpinningCube

Einar Ingebrigtsen has a Spinning Cube post up on the Insider's site that involves some very basic 3D manipulation using the 3D projection in Silverlight.

Balder 0.8.8.6 is out

Einar Ingebrigtsen has the latest version of Balder up ... don't read anything, just take this link and be amazed ... then go start playing with it... and show us all what you've done!

A Fluent RSS Reader for Silverlight Part 1: Proof of Concept

Jeremy Likness has a great detailed post up on the beginning of a Silverlight RSS reader... and he's reading from Twitter.

Silverlight Tutorials: Data Binding

Emil Stoychev has a post up on the Insider's site about DataBinding that's a "Beginner's" post, but is a good post, so check it out... might be something there you missed!

Can’t attach Silverlight debugger when System.Windows.Browser.HtmlPage.Window.Navigate is used to open new window

Andrew Veresov provides relief if you're having trouble debugging your Silverlight app

WCF RIA Services Validation

Sergey Barskiy discusses some custom validation in a WCF RIA Services application... with lots of code :)

Silverlight, MVVM and Animations

Sergey Barskiy also has a post up on Animations and MVVM, and offers up a couple possibilities... no comments yet... see if you agree.

Silverlight DataGrid quick styling tip: keep selected row focus state

Tim Heuer has some DataGrid manipulation in Blend on his blog to retain focus on a selected row. You can grab the style, or you can follow along and learn how to do it too!

Stay in the 'Light!

Technorati Tags: Silverlight    Silverlight 3    Silverlight 4    MIX10

NOTE: This was cross posted from here.

If you have a need to consume REST Services from .NET Framework based code, then you should really have look at the WCF Rest Starter Kit.  There is a handy class called HttpClient that is, in my opinion, provides the best / cleanest way to consume REST services at the http level.  Essentially, it gives you the ability to make http calls as easy as:

There is so much more to HttpClient than the little snippet above, including ways to easily hydrate / deserialize the response of the REST service into a .NET types.  You have quite a bit of power / control over the common REST service consumption scenarios.  There’s a nice little blog post over at The .NET Endpoint blog which covers HttpClient.  The BEST starting point, again my opinion, for learning about HttpClient is these two Ch. 9 screencasts by Aaron Skonnard:

http://channel9.msdn.com/shows/Endpoint/endpointtv-Screencast-Consuming-REST-services-with-HttpClient/

http://channel9.msdn.com/shows/Endpoint/endpointtv-Screencast-Processing-Message-Content-using-HttpClient-class/

Once you’ve watched the screencasts and read the blog post, then you will probably want to learn a bit more about the WCF REST Starter Kit.  Here’s a great overview of the kit (also by Aaron Skonnard):

http://msdn.microsoft.com/en-us/library/ee391967.aspx

-Marc

Our team (officially Community Program Managers, but from time to time our conceit is to call ourselves STO Ninjas) has quietly expanded over the past few months, including the additions of two amazing and terrific new voices: Pete Brown and Jon Galloway.

Their names are links to their blogs, which I highly recommend subscribing to

Guy from Alabama is walking in Cambridge MA, and stops a neatly dressed young man. “Excuse me, can you tell me where MIT is at?” The fellow replies “Sir, this is Hahvad, and we do not end a sentence with a preposition here.”  “Oh, “ says the tourist, “I’m sorry. Can you tell me where MIT is at, bozo?” 

Syntax Highlighting (Finally) Done Right

This posting, however, is occasioned by Jon writing a post on how to make Syntax Highlighter work with Community Server… no small trick, but Syntax Highlighter now supports hosting (!).    Jon provides all the links you need (including a link to our fearless leader’s extensive post on the topic) , and great instructions,

The key benefit is that the code has syntax highlighting but still support clean copy and paste; something I’ve wanted (and readers have demanded) for a long time.

Here’s an example:

using System;
using System.Collections.Generic;
using System.ComponentModel;


namespace SilverlightHVP.ViewModel
{
   public class ItemsViewModel : INotifyPropertyChanged
   {
      private State state;
      public List<Item> Items
      {
         get { return state.CurrentItems; }
         
      }


      public Item CurrentItem
      {
         get { return state.CurrentItem; }
         set 
         {
            if ( value != null )
            {
               state.CurrentItem = value;
               NotifyPropertyChanged( "CurrentItem" );
            }
         }
      }

      public ItemsViewModel( State state )
      {
         this.state = state;
         this.state.CurrentSetChanged += 
            new State.CurrentSetChangedHandler(state_CurrentSetChanged);
         UpdateItems();
      }

      void state_CurrentSetChanged( object sender, EventArgs e )
      {
         UpdateItems();
      }

      private void UpdateItems()
      {
         NotifyPropertyChanged( "Items" );
      }


      public event PropertyChangedEventHandler PropertyChanged;
      private void NotifyPropertyChanged(string propName)
      {
         if (PropertyChanged != null )
         {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
         }
      }
   }
}

If you are looking at this on line, you should see a very nicely formatted layout with syntax highlighting (see image).  In a stream, however, it is straight html.  Even more valuable, notice the four symbols (circled in red); when you click on the code these appear and offer “show source” (the image has an inlay of the source as it is shown when clicking this). The other three are copy to clipboard, print and help.  Very very nice.

Thanks Jon!

(Click on image for full size)

I've given up on my old Windows Mobile phone and been looking around for a replacement. Now let me be clear, I can't have an iPhone because AT&T is clearly evil. So I decided to take the plunge on an Android phone. I've looked at a couple of the phones, but since I am on Verizon I grabbed the Motorola Droid. Its not bad for $199.

I don't intend to simply put some magic number rating of the phone, but I have some overall observations:

The Good

• The overall initial experience is excellent. I was wow'd from the minute I got the phone.
• I didn't read the manual (though I am not sure it would have helped), but the act of discovery worked really well.  I had to get used to how the context menu and the back button worked (and no 'ok' buttons).
• The browser (though not tabbed) is excellent.
• Making phone calls is just great. No more worry about touching my ear to the phone and dialing just works the way I expected it to.
• Taking photos and videos are great.  The phone has a better resolution than my point-n-shoot (though I am not sure it takes better pictures).
• I have been impressed by many of the Marketplace's apps. Though I am told not as slick as iPhone apps, I am very happy with most of the apps.
• The Marketplace's reviews and screenshots help a lot to find apps worth getting and their 24 hour return policy is nice. (Ahem...you listening Steam?)
• The GPS and Tower Location work great. It even worked inside my house.
• Google maps and turn by turn directions work well.
• Lots of apps I liked like TripIt, Seismic for Android, Evernote, Fish2Go, gStrings, Guitar Hero, Qik, Pandora, Shazam, YouTube and Steamy Window.

The Bad

• No integration with ActiveSync/Outlook at all.  I found a great Sync2 app that would sync my contacts, but I still haven't had any luck syncing my calendar.  And there is no sync of tasks whatsoever.  I am told that the sync with Exchange is a lot better (I use Outlook but not Exchange).  You kinda have to buy into the Google-verse to use the phone IMHO.
• The marketplace has issues.  I initially could not download anything for about 1/2 day. I spent most of that time assuming it was my fault. Buying apps was even more painful as my google accounts are Google for Domains accounts.  Through trial and error I found out that buying apps didn't work because I didn't have a gmail account.  Once that was added, it just worked.
• The phone is very google-fied. You have to have a google account (e.g. gmail) for many of the features. 
• No Flash, no Silverlight.

Mixed Bag

• Apps must be installed into internal memory (I think 256MB free), but has a 16GB SD card (upgradable) for other storage like pics. 
• Like Windows Mobile, there are apps that run well on some phones and badly on others.  You have to read the fine-print to see if the Droid is ok with an app (though Droid is one of the good ones most of the time).

Conclusion?

Since I just got the phone its hard to settle on a real conclusion. After a month with the phone I will have a better idea. Many of the location-aware functionality will either do well or badly in the coming weeks. I am hoping to really put the phone through its paces at the MVP Summit and at MIX.  I'll let you know what I think after that.

© 2010 Shawn Wildermuth. All Rights Reserved.
Add Comment | digg this

I’m about 10 days out until I get my hands on my multi-touch monitor from Dell. As a result of this long wait, I’m just exploring the web tonight to see what’s out there in multi-touch land. I came across this video via vimeo (which can I just say is where all the creative people youtube their work).

The concept is by James Cui (VJ Fader) and what it appears to do is allow him and other VJ’s to synchronize with visuals (both for his input and the audience watching him).

I’ve been to a couple of raves in my time (17/18 yrs old) and I can see how this could definitely up the fame pool for a lot of DJ’s as my friends & I often use to joke at how stupid people were just staring at some guy move records in and out? (ie…what was the point? music was great but stare?)

This however changes everything.

faderTouch 3.0 & Audio Visual Instruments from VJFader on Vimeo.

Related Posts:

• No Related Posts

Introduction

Every single time I’ve been given a brief to design something, I often will browse the internet for inspiration, in that I just need something to help nudge me into the direction of an idea. I also constantly keep mug shot’s of user interfaces that I often enjoy interacting with or spot parts of that simply are well designed.

In the past probably 3 years, Industrial Design has also gotten a hold of me, as the more and more I see how devices are emerging onto the world technology landscape the more and more I get excited about the software that drives them – hence my love for Flash/Silverlight over the years. These devices are starting to take into consideration the end to end experience, not just from the physical touch but also through to the emotive touch provided by the device once it’s given life.

At times however, these fake devices are simply a fantasy concept, illusion and/or to be continued. The would be inventors throw their idea out into the wild and soon it becomes a feeding frenzy in that it’s almost a glimpse to all as to what the future holds.

I myself, get excited by the idea of being the designer for such devices. In that, what if I got a job tomorrow and it was to design the next graphical interface for x new invention. That’s where the true fun is in software design in my opinion, its the ability to shape a culture through hardware and software at the same time. iPhone, Zune, XBOX etc are all doing this now, and its a no brainer at the success they are having.

In light of this core passion of mine, I had an idea today, what if I dared all to do just that, design the UI for the next generation invention. What would you all come up with? and how would you explain what it is you did?

Getting Started

I constantly am being asked every time I meet with developers etc in the Microsoft community – “How do I get started with UX”, I’ve attempted to answer this but I’m still not happy with that answer. Today, it hit me, and my answer is “design something you think is going to be the vNext”. I say this as I think it will first throw you into the deep end fast, secondly it will make you think about something that has not yet been invented and thirdly it exposes your level of passion in a raw format.

Today, there is a car called the Carbon Motors E7 it’s basically a futurist police car that has been designed and developed to help law enforcement world wide do their jobs more effectively. You can read more about the car at their website or below, but the thing that struck me about this car when I first read about in a magazine, was the level of detail the designers went to in terms of designing it. It’s a car begging for some CSI fake UI to help sell it’s idea to the world, in that take the car’s physical designs into place, what else could it use to help officers do their job?

This is where FUI comes into place, what if I dared you all to make the software for the car, you have unlimited budget and unlimited use of any technology, what would you implement into the car and what should it look like?

Let’s start with the middle console of the car. This is the nerve center of a cop, its his/her office and super computer in one. This area’s job is to provide officers an understanding of events and information not only within his/her patrol zone but also live situations outside the car itself (speeding cars, number plates etc).

What should this UI look like?

Let’s Design.

The assumption for the car is this:

• There is NextG broadband built into the car’s computer console.
• The car is fitted with internal and external cameras (HD display) on the car (Fact: the car is actually fitted with an internal camera so police can monitor criminals in the back and it can also record 1500 number plates per minute of cars all around it).
• The car can detect biological and nuclear readings.
• The car can detect stolen cars both around it live as well as has the ability to recall a days worth of number plates that the car has seen during its patrol (Fact: It can do this, its not b.s)
• The car’s cameras can also conduct facial recognition of suspects both in front, back and side views.
• The car can provide live tracking of its self and other police cars within the area (GPS etc)
• The cars screens are all fitted with touch panel capabilities.
• The cars have voice and webcam capabilities (vide conferencing etc)
• etc… use your imagination

The car today is actually pretty much fitted out with some of the above, but the possibilities of this concept are endless. The thing that gets my design propeller’s going is what would the HUD of the car look like, what would the console in the middle show when the officer first gets in.

I’m going to play around with this fantasy, and come up with some design mockups of how I would approach the GUI if i were given the task of being the interactive director for it. I’m going to ask various people I know around me for ideas on what they would put into and why etc. As this for me is a great case study for how user experience can empower a concept car like this further than its physical brilliance that’s out there today.

Related Posts:

• My Slides: Microsoft UX: What Just Happened
• Interview with Mark Coleran.
• Revolutionary Incremental UX Going unnoticed.