Lunch With Interact - MVVM Made Easy

We did a cool video pod cast on MVVM Made Easy. Had Erik Mork, Fabio Matsui and Jeremiah Morrill and we talked about MVVM and MVVM made easy and did a demo showing how to build an MVVM using this simple approach for an application in Silverlight.

http://www.vimeo.com/8915487

check it out for more info...

Dependency Injection Made Easy

Part of the whole fun with doing 'ard'd samples is just the fun of doing something not quit PC but the bottom line really is doing clear and concise samples that are easy to understand. Granted MVVM really was getting out of control so there was allot of passion about this but in general simple, clear and concise works much better in teaching ideas and concepts especially for less then geniuses such as my self. Today's post comes out of some editing of a video blog post on MVVM Made Simple and some one's mention of using dependency injection over standard binding to a ViewModel in MVVM. That said that is what I'll show today. The most simple implementation of Dependency Injection. Take a look at this sample Xaml code from a few from a Silverlight app using MVVM Made Simple:

<UserControl.DataContext>
<Simple:AViewModelClass />
</UserControl.DataContext>

You can see that we are setting the data context to the view in XAML to a particular ViewModel. In MVVM the idea is that the View is data bound to a ViewModel using DataContext and typically done in Xaml. From here Dependency Injection is one of those concepts that is over complicated by most poeple and mixed with MVVM that makes all of it harder to understand. So really if you are already reading this I'm making the assuming you have worked with MVVM Made Simple and understands it complete. That being the case Dependency Injection is a tweak to MVVM that allows from a programmatic standpoint more flexibility as to the ViewModel being bound to the View.

The Xaml we looked at above is removed or at least the contents of DataContext is removed but in our codebehind we can do this:

this.DataContext = new AViewModelClass();

and now you know Dependency Injection... for 'ards (like me) at least. :)

Silverlight TV Episode 3: Multi-Touch 101 with Silverlight

John interviews Silverlight MVP David Kelley (thats me) about developing multi-touch applications in Silverlight. I discuss the types of multi-touch hardware and my experiences in developing real world multi-touch applications. Then I jumps right into the code and shows how to create a multi-touch application with Silverlight 3 or 4! The application David demonstrates walks through the key multi-touch events, handling those events, touch IDs, tracking the location of the touch points, and much more. Being a sly devil, John even got David to commit to coming on the show again and demonstrating some advanced multi-touch samples and sharing his stories of how developers have broken their monitors using multi-touch!

David also calls out props to Tim Heuer and Davide Zordan!

http://channel9.msdn.com/shows/SilverlightTV/Silverlight-TV-Episode-3-Multi-Touch-101-with-Silverlight/#Page=1

here is a quick post to the SL3 code we used from Tim Heuer

Watch the video here:
http://timheuer.com/blog/archive/2009/07/30/silverlight-3-multi-touch-introduction-fundamentals-basics.aspx

this code converts easily to SL4 also here is a quick post more about the UX concepts used in multitouch

http://hackingsilverlight.blogspot.com/2010/01/silverlight-multi-touch-in-real-world.html

also the simon demo that includes multitouch (will have an SL4 version at MIX) that Davide Zordan and I worked on.

http://simon.codeplex.com/

also John's post is http://johnpapa.net/silverlight/multi-touch-101-silverlight-tv-episode-3/

watch for more on this topic in the next few months.

MIX10k Wirestones - the game...

first shameless self promotion... Please check it out and vote 5 starts... Here is the link:

http://mix10k.visitmix.com/entry/details/186

That aside this is an interesting contest where the goal is to build the coolest application in under 10k in Silverlight 4 (what other kind is there?) and the problem is that this is not the binary but the source files... and it turns out the wirestone log in Adobe Illustrator had a lot of path data or defined 'points'... that being the case it took me a while to get something that would fit.

If you interested in games like this there is a codeplex project we use for demos at http://Simon.codeplex.com/ and you can go to http://www.HackingSilverlight.net/Simon.html to play the game.

Silverlight Multi-Touch In the Real World (once you go touch you never go back)

John Papa asked me to help do a 10 minute segment for the Silverlight TV show for Channel 9. This got me thinking about multi touch from a demo standpoint and made me really think about what we have learned so far.

In the general since we (as an industry or society) are really just starting to see touch become a major part of our day to do human machine interaction. On the Microsoft stack using Surface, Windows 7 and WPF/Silverlight Multi touch support it is really becoming standard stuff. At Wirestone we have really been on the fore front of doing user experience testing and real world development over the past year primarily in the retail space. Now the specific projects I can't talk about yet but let me see if I can come up with some usability rules that might help in your development. If you first just trying to figure out how to do it in Silverlight (starting in at least Silverlight3 or better) there is one main API you need to care about.

take a look at this line of code:

Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);

this associates our one event handler that we care about. now lets take a look at using the event handler:

void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
foreach (TouchPoint tp in e.GetTouchPoints(Positions))
{
if (tp.Action == TouchAction.Down)
{
// DO SOMETHING
}
else if (tp.Action == TouchAction.Up)
{
// DO SOMETHING ELSE
}
else if (tp.Action == TouchAction.Move)
{
// OR DO SOMETHING MORE ELSE
}
}
}

you'll note that basically we are looping through the touch points, we get touch id's and based on the touch action we can do whatever it is we want. I encourage you to take a look at Tim's post on this and download his sample as he goes through this in detail and built a great multi touch app for testing how touch works using this method.

check it out here and download Tims app. (it also converts to SL4 seamlessly):

http://timheuer.com/blog/archive/2009/07/30/silverlight-3-multi-touch-introduction-fundamentals-basics.aspx

so now that we talked out how to do basic multi touch lets get back to my experience in user experience development with multi touch.

In our work we have been doing allot of users studies with Retail systems including kiosks, touch walls, surface and the like. But my favorite lesson learned has todo with the UX professionals... One day have a long day of debugging and unit testing I went home and wanted to check email on our home computer. I forget what it was exactly but I went to touch the screen and for several minutes I couldn't, I think I almost broke it before I realized that it wasn't touch. And the next week I realized that everyone on the team was having the same problem. Worse still once you realized that was a problem I found I can't stop... really once I went touch... I can't go back. don't get my wrong 'touch' will not replace the mouse in its current form/technology but it extends our experience and allows technology to be better integrated into our lives.

So lets talk about another story we saw in users studies. There are lots of different kinds of hardware, apps and technologies. One good thing to watch out for is the 'kinds' of things that register as a 'touch'. So in Silverlight on my multitouch laptop its not a big deal but I have seen hardware that the light conditions effect touches and even worse some of the hard where is so sensitive that the brush of a sleeve can cause problems. Granted this is more a surface thing then the typical Silverlight retail kiosk but still. When building experiences you need to get they system, hardware and any other bits in place so that you can see how users interact with the system so I can identify things like this 'before' they go live.

When considering design some good things to think about include How the user will tend to interact with the system. On thing you notice is that you loose those the mouse. no mouse overs etc. We have found that user's need and expect feedback. and many times when users 'touch' elements in the UI and nothing happens the user then tends to think that they did something wrong. Help the users by providing feed back even if its just a subtle 'bonk' noise that lets the users know the touch was received. When the user does touch something that does something make sure that 'something' shows that on the screen IE drop shadow forms and element moves slightly etc.

Also remember that we have trained our users to do and respond to computer UI a certain way. Consider that frequently we see users 'double' touch where the users expects there to be something like a double click. Users also tend to click the bottom of images or things below the image before things above. I can't express enough how much better a system is that has gone through extensive user testing and user centric design can be from a User Experience standpoint.

Another big topic in now days is gestures, in Silverlight this can mean 'more' code :) but focusing on the user we found that users tend to do only a few things 90% of the time or more... Touch, move and pinch... everything else that users use once they get past the fact they can touch everything is secondary at least currently. Although subtle things like letting users resize via pinch and the use of touch in the UI that has been carefully thought out regarding interaction really cranks up the end product.

But given considerations like that... touch is where its at and once you go touch, you never go back. :)

Getting Developers and Designers to play nice... and MIX

For those of you that don't know MIX is the most important Microsoft related conference of the year. Also MIX has decided to have an open call this year for speakers... and the Public gets to vote... in an effort to get my sessions to the top of the list I'm emailing everyone in my contact list to ask your help in voting for my sessions... :)

Here are the steps:


1. Click http://visitmix.com/opencallvote/Entry?entryId=BREAKI077

2. Click ‘add to ballot’

3. Click ‘Submit Your Ballot’

If you have more time start here:

1. http://tinyurl.com/ye9uzwz

and then add all 3 sessions and vote them

Please and Thank you. and feel free to get all your friends to vote too…

For those of you that want more information here are the abstracts... normally you just send them to the people organizing a show but this year they are making everyone vote... :( or maybe this is a good thing... I guess it depends on if I get selected... ;)

Here are the 3 topics:

Title: Breaking Down Walls – The Story of Getting designers and developers working together in an Agency Environment

Abstract: Breaking Down Walls is about the wall between designers and developers in the typical design shop. Getting everyone to cross over, communicate and build better UX is where we are going and where many of the best Interactive Design firms are already. When designers and developers learn to communicate, and work together they really start to be able to make the best use of the tools they have from Adobe to Expression to Visual Studio, all these tools can be used in an open collaborative environment like never before. Learn to make magic here or at least learn how it has been done at Wirestone and other agencies that have done it successfully.

Title: Multi Dos and Don’t touches –Multi Touch Development from the trenches

Abstract: David talks about his experience in the retail space with real world multi-touch applications from touch kiosks to Surface and Silverlight. David will talk about the customer experience and how user centered design and multi-touch work in the retail world with ‘live’ customers as well as the perspective of designers, developers, IA and others regarding multi-touch. From stories about developers touching too much and about good ideas gone amuck David gets it all out on the table.

Title: Hacking Silverlight 4

Abstract: From MVVM for Tard’s to hosting Silverlight in WPF and getting around silly security sandbox’s, this session is about pushing the limits of Silverlight and making things easier to do. With a ‘It shouldn’t be that hard’ attitude to development some of the best work in Silverlight can sometimes be a bit of a hack and this session will talk about some of the most useful hacks. From using external hosts, the DOM bridge and even flash; Silverlight can do just about anything given half a chance or a few hacks.

again that link is http://tinyurl.com/ye9uzwz please vote for me :)

Asynchronous Image Loading in Silverlight

So one task that was bugging me today was doing image loading asynchronously so as to not drag the app down. Now there are some 'xaml' ways of doing this in wpf and supposedly in SL but alas I have not seem it work well. I'm working on a larger class that does this better but here is the basics of how I got it to work in C# code... to start with lets take a look at the following code:


WebClient client = new WebClient();
client.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);

if (ImagePath.IndexOf("http") < 0)
{
string URL = System.Windows.Browser.HtmlPage.Document.DocumentUri.AbsoluteUri;
ImagePath = URL.Substring(0, URL.LastIndexOf('/')) + "/" + ImagePath;
}

client.OpenReadAsync(new Uri(ImagePath, UriKind.RelativeOrAbsolute), ImagePath);

this code lived in the constructor of the class I made. Basically its a user control that replaces the image tag so I can use it in Xaml or programatically etc. in this case I needed to use it programmatically to generate this image 'effect' that I was working on so I passed it into the constructor. the key to the code above is it creates a web client, then checks the url and finally calls the async method that loads the image.

the next bit of code is the event handler:

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
try
{
BitmapImage ImageToLoad = new BitmapImage();
ImageToLoad.SetSource(e.Result as Stream);
TargetImage.Source = ImageToLoad;
}
catch (Exception)
{ }
}

this code is simple enough. Basically the BitmapImage is created and we load the result as a stream into it and then use that to set the source on an image. At least for me this seemed to work well. I'll probably add a few other features namely some reference counting so when I load 1000 of these it doesn't try to grab them all at once...