Nice outline to follow when working on application design

What are the things you do to get the final design prototype of a software project?
Well according to Robby Ingebretsen these are :

• Creative Brief :
  You ask the customer to fill it out. Should contain questions like : project summary , statement of intent, competitive positioning, research summaries, notes about tone / personality etc. 
• Pitch:
  This can happen anywhere in the design timeline. This is the first response to a creative brief to show one or more possible directions for the design. It can include other documents mentioned below in the design process. "This is what we are thinking, tell us what's right and what's wrong"
• Wireframe:
  Express the information organization in the application a.k.a Information design (e.g. navigation / information panes structure ). Wireframe, interaction spec, motion guide might be in the same document (e.g. a sketchflow project) but it is useful to be aware of the distinction. 
• Interaction Spec:
  Not that different from a functional specification. Basically what in the user interface does what. But limited to smaller elements e.g. user should be able to drag and drop clothes on a dummy etc. 
• Motion Guide:
  A guide to the personality of tome of the animation. 
• Visual comp
  This is the pixel perfect outcome. This should be with gradients / images ... everything. Typically this is what the client wants to see first. This is not always the best idea. 
• Prototype
  A complete or semi-complete sample of the final design. 

Identify Fonts in images

Ever wondered what that font in some print media is?

Well now there is an online service that can help you figure it out. Its called WhatTheFont : http://new.myfonts.com/WhatTheFont/

A really cool service for designers.

Enjoy!

Fluid transition between Visible and Collapsed

The silverlight toolkit Accordion uses a ExpandableContentControl for a smooth expansion. However I find that it messes with the control layout in a dataform so prefer replacing it with a standard content control.

But I like the way ExpandableContentControl looks so that is where the states FluiUI option comes in : http://www.microsoft.com/design/toolbox/tutorials/fluidui/

Then ofcourse you could always attach the FluidMoveBehaviour to the object with target set to self.
Note: If you want this fluid transition for the children of a Panel you have to set the target to children.
A nice clean smooth animation to kick off the day.

Enjoy!

Silverlight Tip : Cubic InOut or Circle InOut easing function

Both behave very much the same. But in my test cubic is snappier and more fluid. Circle feels choppy on low spec machine.

Just so you know :)
Enjoy!

The order in which you set properties in XAML should never matter

But it might! This is most definitely unexpected (wrong) behaviour.
Heres what works:
A combobox SelectedItem bound to a string AND ItemsSource bound to a List Of String property
Heres what doesn't work: 
A combobox SelectedItem bound to a string AND ItemsSource bound to a List Of String exposed as a Key's Value in a dictionary property.
Heres what works:

A combobox ItemsSource bound to a List Of String exposed as a Key's Value in a dictionary property AND SelectedItem bound to a string. 

Wierd but as long as it gets the job done. 

Enjoy!

Blend Tip : Name your states in UserControls to not conflict with controls

A wierd thing happened. I made a usercontrol with two states "Normal" and "Enabled". However when I would toggle between them with the visual state manager using :
VisualStateManager(this,"Normal",true)  / VisualStateManager(this,"Enabled",true)
It would not go through the transition.

Renaming the states to be "NotEnabled" / "Enabled" fixed it.
So if your state transitions are not playing OR not toggling you need to Name your states to not conflict with common Silverlight control states.

Also it is good to rename your state group to be more relevant to you.

WCF + Silverlight + Rx (reactive extensions)

Saw a really nice article on using Reactive extensions with silverlight + wcf : http://abovetheblue.blogspot.com/2010/03/reactive-extensions-silverlight-and-wcf.html

Basically you need to use

• Observable.FromEvent
• Take(1) ... to automatically unsubscribe from the call. 
• Now just make the standard WCF call. 

i.e.: 

public Page()
{
    InitializeComponent();

    CustomersServiceClient client = 
        new CustomersServiceClient();
    IObservable<IEvent<GetCustomersCompletedEventArgs>> observable =
        Observable.FromEvent<GetCustomersCompletedEventArgs>(
            client, "GetCustomersCompleted"
        ).Take(1);

    observable.Subscribe(
        e =>
        {
            if (e.EventArgs.Error == null)
            {
                var customers = e.EventArgs.Result;
                dg.ItemsSource = customers;
            }
        });
    client.GetCustomersAsync();
}

I can think up a nice clean code generator that will make WCF calls with neat error handling. Till then.

Enjoy!

Silverlight Tip : Using Isolated storage to generically store and retrieve objects

The Code 
A small generic class:

public static class IsolatedStorageHelper
    {
        private static string GetNameFromExpression<T>(Expression<Func<T>> propertyExpression)
        {
            var body = propertyExpression.Body as MemberExpression;            
            string propertyName = body.Member.Name;
            return propertyName;
        }

        public static void SaveData<T>(T data, Expression<Func<T>> fileNameExpression)
        {
            string fileName = GetNameFromExpression(fileNameExpression);
            using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(fileName, FileMode.Create, isf))
                {
                    DataContractSerializer serializer = new DataContractSerializer(typeof(T));
                    serializer.WriteObject(isfs, data);                       
                }
            }
        }
        public static void DeleteData<T>(Expression<Func<T>> fileNameExpression)
        {
            string fileName = GetNameFromExpression(fileNameExpression);
            using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
            {
                try
                {
                    if (isf.FileExists(fileName))
                        isf.DeleteFile(fileName);
                }
                catch
                {
                }
            }
        }

        public static T LoadData<T>(Expression<Func<T>> fileNameExpression,T defaultValue)
        {
            string fileName = GetNameFromExpression(fileNameExpression);
            T data;
            using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
            {                
                try
                {
                    using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(fileName, FileMode.Open, isf))
                    {
                        DataContractSerializer serializer = new DataContractSerializer(typeof(T));
                        data = (T)serializer.ReadObject(isfs);
                    }
                }
                catch
                {
                    return defaultValue;
                }
                
            }
            return data;
        }

    }

The Usage
A with this you can simply load objects without magic strings / typecasting with default values :

RememberMe = IsolatedStorageHelper.LoadData<bool>(() => RememberMe,false);
UserName = IsolatedStorageHelper.LoadData<string>(() => UserName,"");
Password= IsolatedStorageHelper.LoadData<string>(() => Password,"");

And just as easily save them:

IsolatedStorageHelper.SaveData(UserName, () => UserName);
IsolatedStorageHelper.SaveData(Password, () => Password);

A user registry for silverlight :)

Enjoy!

Displaying png, gif, bmp, jpegs in silverlight

Well ... there is a library for that. Called .NET Image Tools : http://imagetools.codeplex.com/

In fact the avatar creator uses it : http://www.microsoft.com/design/toolbox/school/modules.aspx?lid=3&mid=8

Not only can you use it for displaying these images you can also use it for creating them. 

Expression blend : control styling tip, Using element binding rather than parts

There is a small trick used extensively in the movies scenario in .toolbox :
http://www.microsoft.com/design/toolbox/school/modules.aspx?lid=2&mid=6

When you are styling a control and there are parts defined in the control that are of types that cannot be made to look the way you want there is a way around it :

• Hide the original parts by using setting the visibility to collapsed
• Make a usercontrol / customcontrol of the type you want and add it to the template
• Bind properties of your usercontrol/customcontrol to properties of the original part (which is collapsed but still present) by element binding. Make sure the binding is twoway and the trigger is default.

This means you can make really crazy looking sliders and other stuff :) 

ObservableDictionary for Silverlight

I just migrated Dr. WPF's ObservableDictionary for WPF to silverlight. You can find the code here :
https://bitbucket.org/basarat/dictionarybasedvm/overview . Also at the same location is a sample.

The basic objective of making this is that you can Make a View Model properties to be exposed via a Dictionary rather than a Model. I would have preferred to work with dynamic but couldn't as described here :  http://stackoverflow.com/q/5949826/390330 For change notification on bound string based indexer properties the dictionary needs to implement INotifyCollectionChanged. There is not dictionary on the framework that comes with this.

I will also be updating the project to try and implement IDataErrorInfo.

Application Screenshot :

Where the xaml is :

A nice video introduction to BigTable as used by google

A really nice fun video to watch (although video quality is deplorable) : http://video.google.com/videoplay?docid=7278544055668715642#

The really nice section (bigtable table structure + client apis) starts at round about 15:00. 

The best tutorial on Expression Blend I have seen to date

Expression blend behaviors are by far the best feature of blend. And that makes this video :
Creating Rich Interactions Using Blend 4: Transition Effects, Fluid Layout, and Layout States
The best video on the subject I have seen to date :)

The list box template is soo cool and I guess that is how you can make really lively Windows phone 7 kind of apps for silverlight web. 

Using the Dataform control video tutorial

Just came across this video tutorial by mike taulty about Dataform which has been available in silverlight since V3 : http://www.silverlight.net/learn/videos/silverlight-videos/dataform-control/

There are a couple of things in this video that I really loved about the dataform.

• Then there is the awesomeness of IEditableObject (I wish I knew about this interface sooner. Would have made dirty data handling so much easier : http://msdn.microsoft.com/en-us/library/system.componentmodel.ieditableobject(v=VS.95).aspx ). 
• If you do not set the ItemsSource (and instead set CurrentItem) you can use it as a simply dirty object data handling form :) 
• Setting AutoGenerateFields to false, and then setting the DataForm.Fields property to a collection of fields (e.g. DataFormCheckBoxField, DataFormComboBoxField, DataFormDateField etc) with a Binding for each field. Also cool are fields like DataFormHeader (+content property) , DataFormSeperator, DataFormFieldGroup. 
• If you don't like these instead of Fields you can use the DisplayTemplate / EditTemplate which are standard DataTemplates 

Other points of note : 

• The Bindable attribute (http://msdn.microsoft.com/en-us/library/system.componentmodel.bindableattribute(v=VS.95).aspx). 
• The Display attribute (http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.displayattribute(v=VS.95).aspx which just made it into .NET full with v4) 
• The CustomValidation attribute ( http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.customvalidationattribute(v=VS.95).aspx also in .Net v4 and above )

Ease your Silverlight / WCF interaction with lambda expressions

Say you have a service like so :

And a user control in silverlight to display the last result of DoWork:

The common approach I see taken in the client application is this (which I don't like):

I have seen this pattern quite a number of times and I find the call to WCF service being at one place and the call back for it being at another quite annoying.

I very much appreciate the lambda syntax awesomeness of C# as shown:

PS: I can barely wait for the WCF vNext that will come with Async CTP support : http://blogs.msdn.com/b/endpoint/archive/2010/11/13/simplified-asynchronous-programming-model-in-wcf-with-async-await.aspx

RavenDB Love : Generalization / Inheritance

Raven DB has a lot of sweet spots for me. If I start from the beginning it will take too long for me to get to the objective of this post so I will fast forward to now and explain how RavenDB just makes databases Awesome!
In case you do not know about Generalization it is a DB term for Object Oriented term : Inheritance.

Safely ignore this paragraph
In the relational (SQL) mindset it isn't pretty : http://social.msdn.microsoft.com/Forums/en/sqlexpress/thread/da229fdd-318a-4392-bd1a-b8e22cb6f6b5 ( for lack of a more detailed sample online ... PS: this book does a good job : Programming Microsoft® LINQ in Microsoft .NET Framework 4 )

So on to Raven ..
Say you have a school system or any other system where you require users to login. You want to have raven behind a firewall with only the WCF service on the same server having access to raven. You can implement your own authentication and authorization. With each WCF call getting passed an ISchoolUser whose existance you can verify (username / password) and get the rights for from the database (the wcf call can set it to null) to check if the user is authorized. Now users can be Teachers / Students  ... so many other people with their own little properties / methods. But that the core they are users. You can use an interface right. Here goes :

Your classes :

And when you store them:

They each go into their own collection.

You keep your class hierarchy. Raven keeps your data. Isn't life simpler?
Note: If you were to use a base class rather than an interface make sure it does not contain "Id" otherwise it will get set to null and stored in the database as such. Id needs to be a member of the final class you are saving.  
Enjoy!

WCF / Silverlight : Reuse types in referenced assemblies

In my previous post I showed the smooth as silk streamlined process of reusing business logic contained in Domain Model objects over WCF in .NET 4. (linked here)

The process is silverlight is just as smooth. All you need is a silverlight library that contains the same files as in the DataModels as a linked file.

This is because you can obviously not add a .NET 4 library as a reference to a silverlight project as shown:

So create a new silverlight class library project:

In the class library project add your domain model classes as linked files :

And next add a reference to the silverlight class library in your Silverlight Application.
Now when you add a service reference and click on advanced options you should see the class library you added mentioned as shown:

If you do not see the silverlight class library you just created mentioned. You need to build your project first. 
That is all. If you did it right you will now see a DataSources folder under your Silverlight application properties as shown:

You can see that the right domain class is returned by the silverlight proxy generated by visual studio now (and I do get an exception as dictated by the business logic as I showed in part one)

Enjoy!

Reusing Domain object contained business logic over WCF service boundries

Its really simple to do in WPF / console  .NET4. All you need is a common type library containing the business logic + data contract definition shared by both the service and the client.

Say you have the Business domain model as follows :

with a single string property that cannot be null or empty (a business rule)
Add references to this project to your client + service applications as shown:

And if you have a service which simply returns a new business domain object :

You would think that the business logic in SomeDataModel would be lost while crossing the service boundry. Not so if when adding the service reference at the client :

You click Advanced and make sure "Reuse types in referenced assemblies is checked":

So now when the client clearly disobeys a business rule defined in the domain data class as shown (by setting the property to null on an object returned from the server) :

We justly get an exception:

Enjoy!

Things to look for when buying spectacles

Being a spectacle wearer for a significant portion of my life now here are the things about various glasses that I bough that annoyed me in the past: 

• Glass should NOT curve with the face : otherwise everything looks weird ... sort of like tunnel vision. 
• A nice vertical view angle is just as necessary as a nice horizontal view angle. I came to notice this when I played snooker. Also it helps to have the eye + eye bags inside the rim. 
• Size : some glasses are too wide for my face. 135 suits my face fine. 
• Balance : It is nice to have glasses that sit comfortably level to the ground on your face. This can be adjusted with nose-pads preferrably. 
• Center : Both your eyes should be at the center of the glasses if possible :) 

Enjoy!

Portable IIS : IIS Express 7.5

I have wanted a portable IIS since the first time I had to configure IIS to use asp.net :)
And that dream has come true with IIS 7.5 Express : http://www.microsoft.com/downloads/en/details.aspx?FamilyID=abc59783-89de-4adc-b770-0a720bb21deb

Unlike other express softwares IIS 7.5 is a complete version. Just more portable :)

I didn't know that I could get the server without webmatrix and that is the reason I am blogging about it (Download link for offline installation of IIS Express here same as mentioned above).

After you download it just install it. It is 32 bit version only. But that means that you can xcopy deploy your server + websites. Great for silverlight portable deployment scenario :)

Where does it get its websites?
By default IIS Express will load websites as folders from the current users "My documents folder", You can get this information by giving an invalid URL (Note the Physical Path):

Where does it gets its configuration to look for websites? 
This one was harder to answer. I needed to open process monitor to figure it out as shown:

And therein:

The command line options:
You can get a complete list of IIS Express from the command line as follows :
iisexpress.exe /h
Most important command line switches are options: 
/config
/systray:true|false
/port

Finally: Getting IIS Express to run portably: 
Two things need to be done here :


1.) Setting IISExpress to use config from the same folder as IISExpress and not user folder: 
I copied everything from "C:\Users\Basiee\Documents\IISExpress" to "%IIS_BIN%\User"

2.) Configuring the log files + websites to run from IIS_BIN
Just open applicationhost.config and configure your website as so:

Note I changed the website name. And modified the path for PhysicalPath / logfile and trace files

Now you can run IIS Express using the following command line: 

iisexpress /config:./USER/config/applicationhost.config

More?
To learn everything in more detail visit : http://learn.iis.net/page.aspx/860/iis-express/

Enjoy! 

Expression Blend : Starting a storyboard from ViewModel in silverlight

It is super easy to do. But first a little bit about the setup.
I have a INPC property on my viewmodel like so :

#region IsLoggedIn Property
        private bool _IsLoggedIn = false;
        public bool IsLoggedIn
        {
            get
            {
                return _IsLoggedIn;
            }
            set
            {
                if (_IsLoggedIn == value)
                {
                    return;
                }
                _IsLoggedIn = value;
                RaisePropertyChanged();
            }
        }
        #endregion

The view has a DataContext set to this.
Now based on a change in this boolean value I want to trigger the "LoginStoryboard" that I created in blend.
Easy peasy. Just look for "ControlStoryboard" in the assets panel as shown:

And drag and drop it onto any object in the "Objects and Timeline" panel as shown:

Now select this action in the objects and timeline panel and view its properties in the properties panel. Click New as shown:

Select "DataTrigger" as shown:

Click Ok.
Next databind the Binding property to your property in the ViewModel as shown:

Complete the remaining properties (comparison / Value / Play / LoginStoryboard ) as shown :

All done :)
Enjoy!

Expression Blend Tip : What elements are assigned to parts

When you edit a control template in blend you can view which elements are attached to parts from a small icon next to the element in Objects and Timeline panel as shown (for the default silverlight slider control template): 

Additionally you can view all the parts available to you in the Parts panel as shown: 

To assign parts you can right click on an object in the objects and timeline panel and select options as shown: 

You can also right click and clear part assignment: 

Enjoy!

Simple styles to help you get started with WPF control styling

I did not know that blend came with simple styles in which the ControlTemplates are simplistic so you can easily master control styling in WPF without being bogged down into details.

Heres how you can use them.

• In blend 4 create a new WPF application. 
• In the assets panel type in Simple. You will now see a large list of controls as shown: 

• Drag and drop any one of these onto the artboard. Edit the Template (Select a copy!) 

That is it. 

Check out how Simple the template for SimpleButton is! : 

If you have ever been overwhelmed by the default templates for various controls the simple styles are the way to go! 

Enjoy!