Why Use the MVVM Pattern with Silverlight Applications?

The probability of hearing or reading about the title question of this article if you are either a Silverlight or WPF developer is substantial. However, there are significant problems when searching for a proper answer to this question.

To begin with, there are numerous and varied ways in implementing methodologies like MVVM, most of which are used based on personal preference. To a novice trying to educate themselves, this leads to disparity in information. Complicating this factor is that many of the articles or videos that attempt to describe the MVVM pattern also include components of other architectural patterns. This adds unnecessary complexity to understanding the MVVM pattern because of the inconsistencies in the pattern being described. In this article, I will elucidate only the MVVM pattern - nothing more, nothing less.

First of all, let me answer the title question succinctly. Silverlight (XAML) and the Model-View-ViewModel (MVVM) architecture evolved together, thereby affecting each other. In effect, this means that inherent in Silverlight's framework elements and CLR objects are the mechanisms to implement MVVM's loose coupling and separation of concerns. I will go into greater detail on the specific classes and objects in .NET that are primarily involved in hooking everything up further on in this article.

The loose coupling and separation of concerns translates to the ability of large developer teams to work independently on different parts, bringing the pieces together at runtime utilizing classes or object interfaces (as opposed to user interfaces). Another enormous benefit of this is that not only can multiple developers work on different parts of the application simultaneously, designers - for the first time in the history of .NET development - and developers can work on the same code at the same time. Having designers "speaking the same language" as developers solves the longstanding dilemma of a developer taking what the designer gives them and having to rewrite everything to work with the applications. Furthermore, designers - for the first time also - can see what they are doing with data driven controls in the design view in Expression Blend. It's evident that the workflow between professional graphic designers and application developers has been monumentally improved.

Let me back up a bit and give an overview of what MVVM is and does for those of you who aren't familiar with it. MVVM, as architecture, is the mature, successful version of what n-tier attempted to accomplish: quarantine the user interface from the program logic and data. Where Model-View-Controller (MVC) may sufficiently accomplish this goal for ASP.NET applications, MVVM is a refined evolution custom-fit for Silverlight.

There have been intermediate patterns between n-tier and MVVM, all with the same goal, but none of them truly accomplishing the objective until the advent of MVVM and XAML. XAML, being an extension of XML, is inherently tool-able, resulting in the ease of building visual and other editors for those who use it.

If a new Silverlight developer were to dive into a new project without knowing better, they might attempt to put all logic into the codebehind of the MainPage.xaml.cs, as typically has been done in ASP.NET pages. Not only would this lead to difficult testing scenarios, but this methodology doesn't lend itself to long-term maintainability or extensibility. Testing code built like this needs a user interface (UI) to run and a human to debug, which adds to the complexity of finding errors. On the other hand, by using the MVVM architecture, only the "ViewModel" (which will be explained in the next couple of paragraphs) need be tested and verified before ever being bound to the UI.

Properly using MVVM, there is much less codebehind in MainPage.xaml. This is simply pure UI. Each entity in MVVM has its unique tasks, and they do them extremely well with complete separation. MVVM is an acronym for Model-View-ViewModel; let's elaborate on the functionalities of each entity.

At the uppermost level we have the "View". Ideally, the view consists only of the XAML UI and related UI logic. These are the Silverlight screens that are presented to the user. The View's responsibilities are to present data to end users and collect data from end users, period.
At the lowest level we have the "Model". This represents the entities that live on the server as well as the objects that are responsible for interacting with the data stores the application uses along with data persistence. Data interaction in Silverlight can be anything from RIA Services to web services or raw XML. Any CLR-object can be the binding source.

In between these two entities is the "ViewModel". This entity's responsibilities are numerous, but can be summarized as aggregating data that will be bound to the View, retrieved from the Model. This includes methods and states. Since Silverlight doesn't databind to methods, just properties and dependency properties, most of our data logic needs to be in property setters and getters in this ViewModel.

As previously promised, now I'll explain the specific objects in the .NET Framework that are involved in making MVVM and Silverlight work together. The binding mechanism in Silverlight links the View and ViewModel through primarily dependency properties and data context. Each framework element in the View (controls, UI elements, etc.) has a dependency property. These properties can be bound to instances of exposed public properties in the ViewModel. The ViewModel can update the View via the INotifyPropertyChanged interface in the ViewModel base, which is used to discover if the value of the properties have changed by raising the OnPropertyChanged event. This is a two-way conversation that extracts all of the data and logic from the View, but doesn't alter the UI's normal functionalities.

Lastly, I'd like to describe one last tremendous benefit of utilizing this pattern. Because all the logic is in the ViewModel, this entity can be copied from a Silverlight application and inserted into a WPF or Surface application, for instance. This cross-platform extensibility greatly increases return on investment (ROI) for companies that target multiple platforms.

- By Kim Schmidt, Guest Author from the Silverlight Group

LayoutTransform RenderTransform Size Resize Sizing Xaml Hack and black magic...

ok, so this is just really making me tired all over. about every size months or so I run into this problem but really after solving it I nicely forget until it hits me in the face again. So amoung the zillion projects I'm working on I volunteered to help on any projects that have something for me. Fabio and Curtis are working on this cool project I can't talk about as such but here is this layout thing that came up in working on this control that needed fixed.

The issue is basically this. You have a control that is a set size and it has some element that is or needs to be layed out outside that control box's size. since its a custom control and its top element is a grid any thing laying out can only be the width of the grid. Event when rendered outside the control box using a translate transform etc. the last time this issue came up I remember there was also a rotate transform taht took me probably a day to figure out what was even going on but between Fabio, Curtis and I there wasn't to much wasted cycles on it but after going back and forth I did a number of tests to just to see what actually worked.

keep in mind that the control is a set size and the root element is a grid.

That being the case, here are the methods I tried to get something larger then the control box size layed out outside the box.

method 1: putting element in popup (wpf only trick, well sort of, you can do something like this in sl but its an even more aweful hack) works but lots of control issues... with behavior not the least of which is the element might still be there if the view is switched... this is a bad plan...

method 2: just trying to use a translatetransform to put it outside the box... no soup for you as your element is croped to the size of the control box (root element grid)... another bad plan...

method 3: chuncking the element into parts and transform it all into place... this works but is a silly hack... due to how messy the xaml gets... to me this is really a bad plan too unless something else didn't work.

method 4: put the element into a canvas and then transform it out... really? this works... feels like a hack but the xaml is very clean... #tiredallover

method 5: use negative margins... this really is against my inner designer or rather the xaml mess I've seen it cause is mind numbing. But alas used spairing this this is a clean xaml solution. Just bad on principal because it leads to abstract layouts that are difficult to visually decompose and mape to the xaml.

method 6: use a layout transform and then a render transform to size it down to smaller then the control box and then the layout transform to get it back to size and outside the control box...
...

this works... I don't even wnat to know why... I actually do know but really this is just well it makes me cringe but the xaml is fairly clean but its totally a hack... don't do this just for sanities sack but really it works... f... here is an example:

<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="2.88" ScaleY="2.88"/>
<TranslateTransform X="210"/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.LayoutTransform>
<ScaleTransform ScaleX=".5" ScaleY=".5"/>
</Grid.LayoutTransform>

I went with the canvas trick as the xaml is the most clean.

9 Speaking Engagements in the space of 5 weeks... about Silverlight

I think my head will explode or I'll get pretty good at it :) but here is my speaking engagements over the next four weeks oh and this is getting off from presenting at the big IxDA/Interact event 2 weeks ago...

* Windows Phone 7 Unleashed in Bellevue on Oct 07th http://wp7-bellevue.eventbrite.com/ on Phone 7 User Experience

* Windows Phone 7 Unleashed in Redmond on Oct 14th http://wp7-seattle.eventbrite.com/ on Phone 7 User Experience

* Windows Phone 7 Unleashed in Boise on Oct 25th http://wp7-boise.eventbrite.com/ session 4 on Phone 7 User Experience and Session 2

* SilverlightConnections/DevConnections - Going from Silverlight to Phone 7
http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151

* SilverlightConnections/DevConnections - Multi Dos and Don’t touches
http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151

* SilverlightConnection/DevConnections - Breaking Down Walls
http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151

* Mediations on Xaml Zen - Corporate Xaml Workshop for Wirestone
(private workshop by invitation Only in Boise Oct 26th)

* SilverlightConnection/DevConnections - Metro for Developers on Windows Phone 7
http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151

* SilverlightConnection/DevConnections - Windows Phone 7 Application Performance Optimization
http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151

I'm wondering if this means I'm a professional yet? :)

Professional Silverlight 4 - Book Review

ok, truth be known I helped write this book (a small part) and so I won't comment on the part that I did. but still it is pretty awesome, fine maybe the architecture section was light but WROX is about great references. I have bought just about every wrox book for he past 10 years and not just because the colors match. Very few people buy a wrox book to learn a technology and why I was so interested in this book or any wrox title is just for being the reference. Some people say that google (or bing, pick your poisen) but I like the feel and tacktile experience of a book and wrox is a must have and since I'm a professional Silverlight guy...

Like most Silverlight books it has been targeted to a specific version but WROX has done a great job of updating the professional series for each version and this is the latest. As anyone in the industry knows you cant be consider a professional without a WROX title on your shelf for the topic you work on so if you are a real Silverlight dev then you must have this book. in my opinion.

http://www.wrox.com/WileyCDA/WroxTitle/Professional-Silverlight-4.productCd-0470650923.html

Windows Phone 7 UX with David Kelley (thats me)

Had a great time talking about phone 7 ux this morning on MSDN Radio doing a podcast. Here are some great phone 7 resources related to touch and UX:

Phone 7 Links:
http://developer.windowsphone.com/windows-phone-7/
http://www.windowsphone7.com/
http://www.mobileappmatch.com/?fbid=IzTBJbx-cNj

Josh Blake as a great book on multitouch: http://manning.com/blake/ or http://nui.joshland.org/

http://www.Silverlight.net/
http://www.SilverlightCream.com/

user groups:
http://www.interactseattle.org/
http://www.SeattleSilverlight.net/

Other UX blog links that are cool:

teasers and trasitions

early ux phone 7 concepts

Windows Phone 7 Series User Interface (UI) codenamed “Metro” Design and Interaction Guide

Metro UI The Windows Phone 7 Aesthetic

Its Ok to Think Out-Of-The-Box

It is ‘Ok’ to think out of the box, at least we keep telling ourselves that. I know we always talk about thinking out of the box but frequently this tends really be ‘think out of that box as long as it’s not too far out of this box’ so just use a different box and stay in it. Begs the question how to really think out of the box and how do we let ourselves know its really ok to do that?

Case in point was a project we did recently where we were tasked to build a touch wall for Nike Basketball and the World Basket Ball Festival in New York City. One of the key elements was this idea of helping people (ie targeted demographic being male ages 14 to 35) connect with the history of basketball. The idea of the ‘history’ of anything in most ideation processes is going to bring up a time line. How boring is a timeline though, been there done that. This story is abit about how we broke out of the mode of a stereo typical timeline but still be a timeline and not some other metaphor that is been overly used like the carousel or something like that and therefore how we really thought out of the box and allowed our selves to do it.

So how can we let ourselves think out of the box ‘more’ better [yes yes I know English, it’s just more fun this way]? With that let us talk about 3 points on how we can better enable real life out of the box thinking without limiting out selves to preconceived notions and build really sexy User eXperiences (in this case all about basketball) and be ok with it.

Emotional Connections

One of the biggest problems we have as User eXperience professionals is: understanding our users. Do we really understand them? Have we bothered? Do we think we understand them but not really? Being open to the fact that you might not, as a team, really know your target demographic is a good start to not just thinking out of the box but being able to let yourself think out of the box. In doing so how then to you really know your users and in that how do we know we know? I would argue that we must always be in a mode of trying to better understand our users as they are diverse and ever changing and as soon as you think you know them you don’t, so therefore don’t stop getting to know them.

More than anything then you need to learn to connect with them emotionally and through constantly working on that connection emotionally you can better use that connection and cater to it. Working with emotional connections with users gives us a basis for building UX that takes it to the next level and we can vet those against our users to gage how well we connect and we can see if our out of the box ideas will fly. The user then is the judge of our ideas and not our perceived notions about them.

When we are building UX it is important to keep this process of emotional connections with our users as this is how our ideas will be connecting and how our ideas fail. To really get out of the box that emotional connection is critical. Now the reason I chose to bring emotional connects up first is that this idea of emotionally connecting with users helps us in the other two points I wanted to bring up.

Communication, Communication, Communication

Remember when building awesome UX it is not just you. It helps me and my team at Wirestone to think of ourselves as a single unit. It is not the developers vs the designers, it is our team and us including designers, developers, information architects, UX architects, PMs, the customer, and even demographic representatives. Its all of us working together and as I’m sure you’ve heard if you have studied group or team dynamics at all the trick always gets down to communication. When we communicate and ideas flow freely in a positive non critical way where we can talk about them and try them out we always come out of with cooler better ideas. No idea is bad it’s the degree in which it is awesome that matters. When a group or team then understands the business goal, understands the ROI, the technology, the information and content and are passionate about what they are doing and then fully communicate openly freely and often then things always, always go better.

Let’s get back to that Nike touch wall thing I mentioned earlier. As it turns out this was a case in point where brainstorming with the entire team was really a key defining moment it this projects success. With content we clearly had a demographic that was passionate about the content but really we had 2 kinds of elements to present and the typical time line was just so over done and not unique and some one other then the designers and developers in the room suggested why don’t we just have two lines one for this and one for that… of course at first much of the team scoffed but it was the most unique idea and no one could think of a reason not to at least try it. Getting a sample of the content together and putting in to a dual timeline that would expand and grow depending on which elements were of interest was an interesting idea and when put in front of users it worked much to many of our surprises. Further with a slight bit of gratuitous movement we found that it made it easier for users to wrap their heads around the content and learn to explore making the new dual timeline metaphor easier to understand or in other words more ‘discoverable’.

Let the Users Decide

The key then to the Nike touch wall success turned out to be putting it in front of users and letting the user decide if it was cool or not. Frequently we jump to conclusions about our users that may or may not be true and truth be told nothing is better than putting the UI in front of the real users to see if a UI/UX works or not.

Part of putting your ideas for UI in front of users is for the team to understand who the user is. One of the key tools a lot of people find successful is to have personas or virtual people that personify your typical user. This method also makes it easier to help other understand the user your team is targeting and help is finding real life version of the user. Even informal UX testing helps and in fact in our case we use some informal UX testing up front and additional more formal UX testing at all phases of the project to help let the user’s guide our creativity and our thinking. When we put our ideas in front of users it helped us focus on what worked best and in fact find the out of the box ideas that really worked.

Summary

That all being the case, letting ideas flow and putting all of them or the most unique ones in front of users can help bring focus to the out of the box thinking, where the entire teams is involved and no idea is left un vetted in front of users. Why is it ok to think out of the box? The reason is you will find the next best idea waiting for you and through that idea and the emotional connect with the user that you understand your UX will more likely hit the mark, be out of the box and a home run metaphorically speaking. Thinking out of the box requires that you let yourself as a team be open to all ideas, to give them serous configuration and let the user decide for you. Go forth and think out of the box (well at least head in the right direction). Like anything it takes time for a team to get up to speed and a willingness from everyone on the team to work together with novel techniques like ‘communication’, ‘brainstorming’ and the like. Here is hoping to see your next Hot and Sexy User eXperience…

also published at: http://www.interactseattle.org/?p=704

Silverlight 4 and SharePoint 2010 Integration

My first response to this is just say no. But, my personal biases against sharepoint aside, alot of people need to work with Sharepoint including myself in the past so with some trepidation I agreed to review the book 'Microsoft Silverlight 4 and SharePoint 2010 Integration' by Gaston Hillar. I don't know if I know Gaston personally but the fact I don't recall means if I have meet him and one of a zillion conferences it we never touched base outside of that. One thing I have noticed with packt books is that there seems to be less talking and more samples which is a good thing as far as I'm concerned and this book is no different. The chapters are broken out in detail covering related topics from just creating a web part in sharepoint (which if you have never done it before is a pain and having it well documented in a book is great) to WCF, RIA, Rich Media and all the points in between. The book isn't thick and short on words but as mentioned lots of examples which is what is important to me. I know many years ago when I learned classic ASP the book was lots of reading and I found over the years that it is more important to have samples you can follow along and a book that can be used as a reference with which this book has fallen into the catagory of books I'll keep just in case I have todo any sharepoint work again (which I'm less then fond of). I know I know some people like the google or even the bing but its nice to have it in print and for us old timers it is sooo much easier to read in print. In any case if you must do sharepoint, user Silverlight and build something hot but use this book to help get it in Sharepoint fast and spend more time doing something else :)

http://www.packtpub.com/microsoft-silverlight-4-and-sharepoint-2010-integration/book?utm_source=hackingsilverlight.blogspot.com&utm_medium=bookrev&utm_content=blog&utm_campaign=mdb_004103

Once in a life time you get the chance to hire a Luminary

Industry #Luminary & #Silverlight #MVP is looking for his next role, the race is on, if u'd like to have a rock star @ your company see @WynApse author of Silverlight Cream. see http://geekswithblogs.net/TehGrumpyCoder/archive/2010/09/01/day-1-of-being-unemployed.aspx

Hiring an MVP like David Campbell is just an almost unbelievable oppertunity for a company to gain enourmous creditbiltiy as wellas a huge strategic asset. Having heard that David (not me, but Mr. Campbell) I almost chocked. I would give my eye teeth to hire some one of his calibur and there is such low chance of ever being able to hire some one like him. In any case it will be interesting to see what company gets him first :)

some more about David Campbell:

http://www.silverlightcream.com/

http://wsinsiders.com/the-silverlight-mvp/

http://geekswithblogs.net/TehGrumpyCoder/archive/2010/09/01/day-1-of-being-unemployed.aspx

http://www.wynapse.com/

http://twitter.com/WynApse/

Getting the Root Visual in Phone7

ok, so this should have been easy for me but for some reason it took a half hour to figure it out so I figure it must be something that some one else might struggle just in case. That being the case if you are in some nested set of user controls and need to get a reference to the top level of your phone 7 UI here is the code:

PhoneApplicationFrame Temp = Application.Current.RootVisual as PhoneApplicationFrame;
MainPage TheUI = Temp.Content as MainPage;

now main page is the loaded PhoneApplicationPage is this could change pending your code and further 'TheUI' is something I made up but all things the same the reference to TheUI would then allow you to call any instances of the root visual. and the best part is this is admittedly a bit hacky... :)

Interact and Seattle Silverlight Videos Online

in the 5 minutes of free time I have each month I finally managed to get some videos that were takening with a flip cam at some of the local user group meetings posted on vimeo:


Summer Series Touch and Beyond: The Psychology of Future Interactions
http://www.vimeo.com/14095704

Summer Series - Windows Phone 7 Development Going Deeper (Session 2)
http://www.vimeo.com/14101547

10 Ways to Attack a Design Problem And Come Out Winning
http://www.vimeo.com/14105139

Accessibility Makes the Experience More Usable by More People - IxDA Interact
http://www.vimeo.com/14125563

Modern UX Creation from the Eyes of a Developer
http://www.vimeo.com/14370107

The Difference Between Silverlight and Silverlight Based Phone 7 Apps

The past week I was asked a couple times about the difference between Silverlight and Silverlight for phone 7. Really? Other then a few minor technical differences in the most current version of Silverlight vs a bit more limited version in phone 7. The cool thing is that Silverlight for phone 7 really is Silverlight so the same code base can be used on just about anything. But back to the details. Phone 7 is just a 'specific' more limited version so most stuff you can normally do work fine. There are no new skills, not really anything new save maybe a few api's specific to the phone. The biggest diffence is really just the basic pages and user control names. In phone 7 you really have a set size and 2 orientations. That being the case the phone 7 silverlight team has built these controls to deal with the 2 orientations of the screen and the specific size for phone 7. With that start making phone 7 apps its easy and fun just like any other Silverlight app. ok well you will need to download the special wizbang version of visual studio for phone 7 from http://www.Silverlight.net/ just click on 'Get Started' and go from there.

Updates to Silverlight Code Browser

A couple of bits of news. I did a number of updates to the HackingSilverlightCodeBrowser here:

http://www.hackingsilverlight.net/HackingSilverlightCodeBrowser.html

including things like MEF and IsolatedStorage. As to the community edition of the book, I'm still trying to get some contributors to finish. I've been slammed with 60 hour weeks so chapter 2 and 4 and appendix a still need edits. maybe a weeks worth of work pending time which tends to be limited in my life. :)

Isolated Storage Made Easy

In its most simple form Isolated Storage allows you to save name value pairs and retrieve them at some other time the next time your app runs. Granted we could get into XML and text files etc but I'm going to stick with just name value pairs. Lets take a look at this line:

private void PresistKeyValue(string _Key, string _Value)
{
StreamWriter MyWriter = new StreamWriter(new IsolatedStorageFileStream(_Key, FileMode.Create, IsolatedStorageFile.GetUserStoreForApplication()));
MyWriter.Write(_Value);
MyWriter.Close();
}

Nice and simple. using this block we can use a line like this:

PresistKeyValue("foobarkey", "blah blah blah");

this like saves a key falue of 'foobarkey' with the 'blah blah blah' as the 'value'

Now then to get the data you need a block like this:
private string ReturnKey(string _Key)
{
string Output = String.Empty;

StreamReader sr = new StreamReader(new IsolatedStorageFileStream(_Key, FileMode.Open, IsolatedStorageFile.GetUserStoreForApplication()));

string ALine = String.Empty;
while ((ALine = sr.ReadLine()) != null)
{
Output += ALine;
}

return Output;
}

Yes a little simple but you should be able to lift both of these functions directly and use the code as such like this to regtrieve values:

string SomeValue = ReturnKey("foobarkey");

nice and simple.

Dependency Properties Made Easy

ok so I found that for some reason I thought I did a post on this before and I couldn't find it. So I thought I would make a new post as simple as possible. Here is a simple dp:


public readonly DependencyProperty ResistanceProperty = DependencyProperty.Register("Resistance", typeof(double), typeof(AnimatingPanelBase), null);
public double Resistance
{
get
{
return (double)GetValue(ResistanceProperty);
}
set
{
SetValue(ResistanceProperty, value);
}
}

Nice and simple right? why bother you ask, well the biggest issue is that if you want to animate properties of a custom control of some kind using data binding and what that change to filter into the UI of some control. Otherwise I try to avoid DP's as much as possible. So if you need todo some mucking around in your control after the DP value has changed then do this:

public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register("Minimum", typeof(double), typeof(Dial), new PropertyMetadata(new PropertyChangedCallback(OnMinimumChanged)));

public double Minimum
{
get
{
return (double)GetValue(MinimumProperty);
}
set
{
SetValue(MinimumProperty, value);
}
}
private static void OnMinimumChanged(DependencyObject DpObj, DependencyPropertyChangedEventArgs e)
{
// some code :
}

You'll note that this has a changed handler but otherwise is like the first version. and that is pretty much it. :)

Microsoft Silverlight 4 Data and Services Cookbook

Alas I find my self doing another book review... its not clear to me that I should continue to do that but on this particular book it heads in the right direction. As noted in an earlier post I find the idea of a cook book to be of particular interest and useful in my work with Silverlight. This book has gotten closer then any other to date in building the ideal Silverlight book. Albeit the book does make an attempt to teach Silverlight to some degree but it tends to be more of a reference book, the down side is that there is more in the book about teaching and less about more esoteric topics not connected to data. Certainly though for the professional Silverlight developer this is a great addition to your library.


http://www.packtpub.com/microsoft-silverlight-4-data-and-services-cookbook/book/mid/130510v8s5cu?utm_source=hackingsilverlight.blogspot.com&utm_medium=affiliate&utm_content=blog&utm_campaign=mdb_003316

Silverlight Connections - Vegas Nov 1-4

got asked to speak at SilverlightConnections in Vegas in Nov. :) topics include: 'Breaking Down Walls – The Story of Getting designers and developers working together in an Agency Environment' and 'Multi Dos and Don’t touches –Multi Touch Development from the trenches' and 'Going from Silverlight to Phone 7 Silverlight Application Development'

http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151


Title: Breaking Down Walls – The Story of Getting designers and developers working together in an Agency Environment
Type: Regular session
Category: Expression Blend
Level: 300 -- Advanced

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
Type: Regular session
Category: Architecture, Patterns and Practices
Level: 300 -- Advanced

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: Going from Silverlight to Phone 7 Silverlight Application Development
Type: Regular session
Category: Windows Phone 7
Level: 200 -- Intermediate

Abstract: This session is about making the leap to Silverlight for Windows Phone 7 and using your Silverlight Skills to build cool Silverlight applications for Windows Phone 7. We'll talk about the basics, game development and even business(ish) apps for Phone 7.

MEF (Microsoft Extensibility Framework) made simple (ish)

Microsoft Extensibility Framework or MEF is one of the great features in Silverlight, designed around making Silverlight applications more extensible generally and provides a much more complete story for the separation of concerns. MEF then begs the question 'Why we care?' and 'What can MEF really do?' and we will address that here.

Let us talk about a real world example for a moment.

Say you are a vertical selling corporation of some kind, meaning that you sell to companies that do similar things. For example you might be selling to retail stores and your application will show their products. One of the problems is that your application will need to integrate with their CMS (Content Management System) to get product data. In Silverlight 3 your customers might need to provide a WCF Service to talk too. That WCF service they then provide has to have a certain API Signature or worse still they might need your code and need to recompile or YOU have to recompile for each customer or some other hack to make the application work.

Using MEF your customer still will need to get the data somewhere but it makes it easier on them to do this without mucking with your code. To make it work a customer can drop a 'XAP' that provides the content and your application doesn't care about WCF API signatures or other requirements that make it difficult to wire it into the existing system. Your customers can now easily extend, change or filter what and how their data gets to the application you built for their vertical.

In many ways this is like making the model of your application (speaking in the MVVM since) 'open source' and not only pulls the model out of the rest of the application into just about anything else and lets that model be manipulated by the client without rebuilding the application in any way.

Getting Started With MEF?

MEF is pretty straight forward to get started using since it is part of the Silverlight framework in these name spaces and you need to make sure you reference them at the project level.

System.ComponentModel.Composition
System.ComponentModel.Composition.Initialization

Now that we have the bits available, using MEF is as easy as Importing, Exporting and maybe a little code. The main idea is to be able to code or property decorations to allow MEF to find elements either being exported or imported and tie them together. We can look at this process as being able to export the data, import the data and composing the data in an abstract way that allows the elements of this process to be abstracted from our application to a degree that it can be done externally to the application post compile. "Gah!," you say? Let's take a look at the next section and learn more about this process?

MEF'd Properties in and out of our Application

Here we will work out the basics of using MEF in our application. We can start simple by creating some properties and decorate them so that we can build out our application and have them magically set by MEF. Ok maybe it is not magic so let's focus on the properties that will be set first and see how it is done. Take a look at the following code sample:

[Import("SomeValue")]
public string SomeValue;

You can see here we have 2 lines of code. The second line is our traditional string property of some object like a string. The declaration line before it is what exposes our property to MEF and allows MEF to set it. You'll note that we use a magic string here. I know this is generally not well thought of by your standard architecture astronaut but you need to have a key value in the form of a magic string to have MEF do the data mapping unless you want to define your own import attributes which we will talk about later on. Next we can take a look at the code that sets this value.

CompositionInitializer.SatisfyImports(this);

You can see here that we are doing this programmatically and we get our data from the MEF catalog. By doing this in the constructor we allow MEF to go get our data where it is coming from and loading it and we can then use it as needed in our view. This MEF process is much like dependency injection might be used in a MVVM View. Really making this work then requires that we also have this object we are talking about in our constructor. To make this week we still need to have a simple class that exports that data in such a way as we can have some data. The following code does that.

[Export("SomeValue")]
public string SomeValue = "foobar";

Notice the export declaration in this sample. When this current assembly is running we get this data element automatically added to the catalog. Going back to the sample that included the catalog you can see that we created an instance and added the current application running as our package. Once we have added a package to our catalog we can then create a container that using the container we can then ask MEF to match the elements together to do our 'binding' So how then do we make this a two way street or deal with larger collections?

Making our Properties a 2 way Street

A popular construct in Silverlight and in the XAML world altogether is the ObservableCollection. ObservableCollections allow us to do lots of things but let us focus on the fact that it is a bindable collection of data that we want to be populated by MEF. Now take a look at the following lines that show a declaration and a collection property of come class.

[Export("SomeStuffs")]
public string Stuff1 = "blah1, blah";

[Export("SomeStuffs")]
public string Stuff2 = "blah2, blah";

[ImportMany("SomeStuffs", AllowRecomposition = true)]
public ObservableCollection SomeStuffs { get; set; }

As you can see this looks mostly like the first property we looked at earlier but here we are creating an observablecollection. The ImportMany declaration above it he collection allows the multiple element collection to come through and by also setting 'AllowRecomposition' the property can then be set over and over again by MEF. From this standpoint point we are ready to really build something separate from our application.

Exporting a Class in a Separate Xap

To create a Xap we can use a standard Silverlight project that we add to our solution. Since we are going to load the xap we can get rid of the classes (x and y). Create a class called z and make it look like this code:

public class SomeClass
{
[Export("SomeValue")]
public string SomeValue = "foobar3";
}

In this class you can see we create a class with 4 properties and use export to the same key name. This creates the effect of the values being exported to the MEF catalog as a collection that will get associated with the collection we created in the last section. For this to work we need to make sure that our Xap is referenced in our first app.

Downloading Xap Dynamically

Now that we have our collection and a new xap with a class that exports values we want we can look at importing the Xap and using MEF to wire that up to the data we need. Take a look at the following code:

[Import("SomeValue", AllowRecomposition=true)]
public string SomeValue;

DeploymentCatalog catalog = new DeploymentCatalog("MEFModel.xap");

// in constructor:
CompositionInitializer.SatisfyImports(this);

catalog.DownloadCompleted += new EventHandler(catalog_DownloadCompleted);
catalog.DownloadAsync();


void catalog_DownloadCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
{
// some code...
}

This code can be added to the constructor of our application just after the call to AddPackage. You can see that we pass a Relative URI to our other Xap and that we add it to the package when it loads. This can also be an event handler to to the load. In this case we get the content added to the package and it gets wired up based on the name key values that we have set by the ImportMany and Export declarations. Now the cool thing is that we don't need to keep this in the constructor. We can call this same 'DownloadPackageAsync' from any event handler or other block of code that we need. We could use this to load content dynamically pending on certain conditions such as localization.

This is all wonderful but there is one problem with using a separate Xap that has the MEF bits in it. This means that both Xaps have MEF and now ours Xaps are twice blotted from MEF using more memory then needed. Fortunately there is way around this is to set the additional Xaps to use include this in the build. In Visual Studio in the other projects find the Library reference to the MEF and right click and select properties. On the reference property pain there is a property called 'Copy Local' and we need to set this to false. This way only one copy of the MEF bits will be in the overall application saving Xap size by not blotting all the Xaps with the same bits.

Book Review: Silverlight 4 Business Application Development

I normally don't do book reviews here but this book is kind of cool and what I'm looking for. Silverlight 4 Business Application Development, here is a book that is kind of not so much on the UX side but what stands out about this book is the fact that it is more pictures and code then text especially when compared to a regular book. For me in particular this is awesome as Im more into pictures and code samples. Much like a recipe book this kind of thing is right up my ally so I can focus on making the applications User eXperience cool. That being the case I would recommend it. On the downside the book is from a publisher I haven’t not heard up and the technical editors are more well known in the authors but once getting past that its a good resource to have. You can download a sample chapter here:

http://www.HackingSilverlight.net/Downloads/9843_SampleChapter.pdf

and purchase the book on their site:

Silverlight 4 Business Application Development


some of the samples will also show up the the HackingSilverlight Code Browser:

http://www.hackingsilverlight.net/HackingSilverlightBrowser.html

HackingSilverlight Code Browser

So sometime ago I had been working on a sample browser for all the different samples I had used for hackingsilverlight and for blog posts. After awhile with all the jumping around between projects, and my failing memory I found I needed a quick easy way to remember all the code clips I used often. For me I needed something like a rola-deck for code so after taking my toys and leaving the sandbox as it were regarding the book HackingSilverlight between projects for the 5 minutes here or there I've been working on a tool that I'm using in place of the older sample browser. And so the HackingSilverlight Code Browser was born. Its still a work in progress and really its all about me and my workflow but on the off chance it might help some one here it is:

http://www.hackingsilverlight.net/HackingSilverlightCodeBrowser.html

of course if you go to just hackingsilveright.net there is a click here to install button that will install the oob version but from this link you can also just right click and select install. Remember this tool is not designed to teach anything or example things to anyone, its purpose is to quick recall code that I know how to use already and make it easier to remember. So remember this isn't silverlight 101 , its more like silverlight 400 :) In any case when you first load the app there is a number of key elements. First on the left is a tag cloud where the tags related to blocks of code that have been 'tagged'. in the center is everything matching the search result and then in the far right is the search box. there is no search button as it updates dynamically as you type. I did put a reset and help link below this but really just start typing.

in the bottom corner you'll notice a version number, a contributor link and a add to library link so if I run across a bit of code that I think is important I can send email to my self to remind me. Also back on the left at the top is a cover shot that links back to the site and if you are running an outdated version you will get a warning along the left side.

If you happen to select one of the results from the middle you get a code box viewer that does some simple formating of the code and lets you select the contents. also all the tags associated with that block are shown and they are clickable. Clicking tags will close the code viewer and do a search on that tag. There are two arrow buttons if you get board and want to scroll through blocks quickly plus there are the help and contributor dialogs.

The help dialog is much like this post just giving a basic discriptions of functionality and then the contributor dialog is is a list of everyone that has helped, inspired or contributed in some way.

And thats pretty much it. oh and one more thing. only constructive feedback is of any use or more importantly if you have cool snippets to add... please feel free to contact me about it. And the code base I'll use to replace the existing HSL codeplex project...

Launching a URL from an OOB Silverlight Application

So I'm working on this code browser mostly to help me with my fading memory. In the app I want to be able to launch a url. So I do my normal thing and put a line of code that looks like this:

System.Windows.Browser.HtmlPage.Window.Navigate(new Uri(ThisURI), "_blank");

I was agast when I realized that this didn't work, for that matter it didn't even blow... grr... but with a bit of research I found that the hyper link button worked so a ended up making a little class like this:

public class MyHyperLink : HyperlinkButton
{
public MyHyperLink(string navigateUri)
{
base.NavigateUri = new Uri(navigateUri);
TargetName = "_blank";
base.OnClick();
}
}

even better the code to make this works looks like this:

MyHyperLink button = new MyHyperLink("some url here...");

Hacking Windows 7 Phone

So here is the Hack of the Week. For those who have had their heads in the closet and haven't heard Microsoft is coming out with this Windows Phone 7 - the mythical vapor ware for a number of years now has been made public. Like many Silverlight geeks especially we are estatic as this phone now public will run Silverlight as the primary way to develop applications for it. On the downside if you installed the developer kit, the VM for the phone lacks pretty much... um... everything... no sensors, (how can we do anything cool without sensors), no apps , not settings no nowthing except the Internet explorer and apps we write as long as they don't need sensor access. At least give us some proxies or fake data etc. But for now we are on our own.

Some people counldn't live with that and they hacked the vms. So one such example is Dan Ciprian from Italy and here is his two posts. I can attest to say that this seems to work as I have seen in live work, not that I my self would do such a thing and I can neither confirm nor deny that I did any such thing but Here are links to his posts on topic.

http://sviluppomobile.blogspot.com/2010/03/wmp7-emulator-unlock.html

http://sviluppomobile.blogspot.com/2010/03/wp7-emulator-unlocked-how-to.html

I was also aghast to see that one one greated a copy of the hacked VM and posted it here:

http://www.1800pocketpc.com/2010/03/20/how-to-unlock-the-windows-phone-7-emulator-download-the-unlocked-bin-file.html

which will get you a running version of the emulator unlocked in you follow these directions...

Talking about Immersive Retail Prototype at MIX 10

Here is a quick video that Pixel8 (Craig Shoemaker) did showing the TouchTag Prototype Hardware and Arduino controller and sensor I have been working on.

http://community.infragistics.com/ux/media/p/225460.aspx

http://channel9.msdn.com/posts/Psychlist1972/Pete-at-MIX10-David-Kelley-on-the-Prototype-WPF-and-Silverlight-Retail-Experience/?FlagType=Rating&FlagState=1#Page=1

Video From PDC 2009

Found this video this morning with me and Victor Gaudioso talking about UX and Silverlight.

http://www.youtube.com/watch?v=hUqd3vJwRg4

Immersive UX Changing the Face of Retail

Changing the Face of Retail is an article I’ve been thinking about most of the past couple weeks. I think my goal with the article is to one talk about how technology built into the retail environment can be used to build better experience’s for customers and 2 to talk about how this kind of evolutionary extension of the retail environment is better for customers AND retailers.

I walked into the Microsoft Retail Store or at least one of them, (see one at Mission Vejo or Scottsdale) and its really impressive how the store is built with this wide open and inviting layout, if you didn’t pay close attention one might think it’s more about interior design then about selling computers and software. One of the most striking features is the video wall that wraps around the entire store. But once I walked around looking at everything, what strikes me the most about this store is actually in the far corner or the software section where this small ‘podium’ with a touch screen built in sits. Granted up front I have a strong emotional tie to this ‘kiosk’ but I can’t really talk about it, with that said I wanted to talk about the idea that this ‘kiosk’ represents from a retail standpoint regarding targeted customer experience and UX in general.

So I played with this ‘kiosk’ and what I found interesting besides the ‘metro’ design aesthetic was that as I browsed software titles on this ‘Software’ Kiosk I realized that each time I entered a new ‘category’ of software the video wall nearby changed with the top 5 titles in that category. And then what I really think (in the case of the MS store) what is the most impactful is that they manufacture most of the titles in this kiosk on the spot when I ask for them. Theoretically the store could have a limitless list of titles, no inventory and just manufacture anything I want on the spot. How is that for brick and mortar?

My point in this story is how technology integrated into our environment can be such a huge game changer. When me, a person interested in software, in a retail space has this elegant multi-touch podium with a grand view of all the software in the universe that can lead me easily through all the titles, finding what I need and manufacturing it on the spot is the norm then other business’s in the same line of work or even Amazon.com will really need to bring up the game or fall behind. This is the kind of technology that really changes the face of retail.

So I work for Wirestone an Interactive Design Agency (so I have a vested interest in the technology). We do work like this touch kiosk in the retail space and specialize in ‘Targeted Customer Experience’s.’ So how would I help a retail store build a ‘game’ changing user experience like this (minus the replicator in back)? How can we make a ‘Retail’ experience that much more emotionally engaging, interesting, fun etc? Can we make something cooler that what we saw in the ms store? I really wanted to have something as engaging so I went and spoke with our R and D team in Seattle and we came up with a vision of a retail space like the following user story that we thought we could implement in our UX lab in Seattle.

Let’s say we have John Doe that is interested in Camera’s. He goes into our theoretical retail space looking to buy a camera. He sees one that looks interesting? As he stands in front of it for a few seconds and the price tag visually transforms. The price is adorned and highlighted and across the bottom some text slides in that says ‘touch here to compare’. John touches the digital price tag and the wall behind the product comes alive as that camera slides in to center in front of John with some of the key features listed below. John then takes a few steps down the aisle and realizes that the product detail on the wall follows him; he then touches another tag of a similar camera and that one slides in next to the first on the wall and John can see the key differences highlighted. John quickly is enthralled with this ‘experience’ and the short is he spends lots of money…

With this in mind I started out to build a prototype. One of the Integrators on our team besides having great design and UX skills, happens to write custom serial drivers for fun… I talked with him about it and he pointed me in the right direction including sensors, controller boards and drivers and sample app etc. (See Ryan’s post here: http://www.futile.com/2010/02/wpf-sonar-application-using-arduino-and-ping-sensor/ ) That aside I wanted to be able to talk about this kind of technology at MIX around integrating technology into the retail environment so I had to get busy. What I ended up with was a custom Silverlight control built out to include custom events and interfaces so it could be consumed by a WPF windows object controlled by a custom ‘windows’ manager in WPF for having lots of these little usb powered touch screens all wired together. Plus adding some more ‘custom’ code, some serial port programming over USB, a few config issues, sensors and a simple design later I had my working app for MIX.

Now dragging this around mix was kind of shock to see how interested people were and how extremely geeky it was to have all the cables and the sensors and the like mucking about but it turned out to be a great conversation starter. The next step in developing this kind of technology was around the Business Intelligence aspect of this. In our typical retail touch kiosk work it is always interesting to see how things are used. We normally do lots of user studies with the target demographic getting everyone from IA to devs and creative involved with working with the data collected around making the UX not just work but better. In the case of our touch tag prototype a lot of things came to mind. I ended up talking to a friend at Preemptive Solutions (Gabriel Torok) that did this cool BI tool for Silverlight and we met at MIX to talk about how integrated BI analytics would enhance our work around the touch tag prototype.

Many times knowing how users interact with a system and with the environment helps a business better enhance what and how users experiences a retail space to better help the custom solve the issue that they might not even know they have. With the touch tag system we are looking at retail heat maps, working with touch and interaction data as it related to products and POS data. Questions like what products to people pick up? Vs what do the buy? Vs what do the put back vs. what area of the store is most interesting? What areas of the store are ignored? How can I make better use of my retail space?

Being able to engage customers faster with more interesting experiences that get them engaged with the product they are most interested in and in how that product is the best for them through touch, through visuals and all the senses helps the customer connect with the product emotionally faster. In user studies we have found that this kind of holistic approach to the retail environment really ups the game not only for the end users or customer and the retailer but also for everyone else that has to compete. This is how you change the face of retail.

Next on my list of to-dos is making the average retail employee a super star with augmented reality. You might even think I’m kidding but I’m not. I meet with another friend a few days ago that runs a small but high end UX shop in Canada and that is our next project. I’d love to hear what everyone else is doing to make targeted customer experiences that much better.

Oh and here are a couple of pictures of the UI and hardware for the prototype:

http://www.facebook.com/photo.php?pid=4246729&l=bfecdad661&id=721326429

http://www.facebook.com/photo.php?pid=4246858&l=8936a70219&id=721326429

I published this post initially on the Interact Seattle Site at:

http://www.interactseattle.org/?p=538


some related links include:

post from MIX w/ video showing prototype hardware:
http://community.infragistics.com/ux/media/p/225460.aspx?CommentPosted=true#commentmessage

and this one talking about touch in general and mention the touch tag prototypes:

http://hackingsilverlight.blogspot.com/2010/03/me-on-windows-7-touch-and-i-mention.html

and the Silverlight TV ep3 I did on multitouch:

http://hackingsilverlight.blogspot.com/2010/01/silverlight-tv-episode-3-multi-touch.html

the touch tag demo at MIX on Channel9:

http://channel9.msdn.com/posts/Psychlist1972/Pete-at-MIX10-David-Kelley-on-the-Prototype-WPF-and-Silverlight-Retail-Experience/?FlagType=Rating&FlagState=1#Page=1

Developing Functional Specifications based on the UML Model

A few days ago I found this white paper I did around 2004 way before I started really blogging:

The Process Overview

Use-case to Specifications is a processing using UML use-cases to identify user requirements and model systems to be able to properly define functionality. This document is intended to serve as an execution based walk-through of this process.

As background: ‘The Unified Modeling Language (UML) is a language for specifying, visualizing, constructing, and documenting the artifacts of software systems, as well as for modeling business and other non-software systems. The UML represents a collection of best engineering practices that have proven successful in the modeling of large and complex systems.’ ~OMG Unified Modeling Language Specification

Use-case – Basic’s

In this process we are focusing on the use of use-cases to identify requirements. The goals of building a use-case is to first identify the actor. This is the person or entity performing the actions described in the use-case. In some cases, the actor is simply a component of the system and not necessarily a user or consumer of it. Second is to identify the goal or what we are looking for the end result to be. Third, and last, is the process in which the actor will take steps to reach the end result or goal. This process interaction is typically described in story form and contains a complete end-to-end walk-through of the actions taken by the actor to reach the goal in the proposed system. To this end, it helps to think of a use-case as a stand-alone story that isn’t dependent on any outside parts to be considered complete. Use-cases serve as a primary tool to help us work out system interaction issues, such as the way it’s accessed, how a part of it might be used or perceived, or how a particular aspect is intended to operates. Basic use-cases will include the following elements, all of which are derived from the overall story-line created:

Name
Actor
Triggers
Story
Steps
End conditions
Failed conditions
Success conditions
Alternate scenarios.

Use-case’s

To develop a use-case we first need to start with an actor. There are several ways to determine an appropriate actor. One way is to ask a couple of basic, but key, questions: 1. Is this actor a component of the system, like a class or object set, or is it another type of entity, such as an administrative or end user. 2. Is the actor a consumer of the proposed system or does it live and/or work within the system. Second, we need to come up with the goal. What is the end result we are expecting from the interaction process? The next step is to develop a story that describes how this actor interacts with the proposed system in order to reach the end result or goal. The following example uses ‘Microsoft’s ACME Project’ or MSAP as the proposed system and an end user “Joseph” who has specific privileges within the system. The goal in this case is to register for an existing course.

Example:

“Joseph, a gold level user and technology buff, has just learned that a new course is being offered for his favorite technology: C#. He immediately rushes onto the MSAP and signs in using his Passport credentials. Joseph then selects the MSAP Center link from the left-hand navigation menu. Once there he is able to quickly search for content relating to C#. Joseph locates the course in the search results that were returned to him and clicks the “Register” link. Joseph is able to get more information on the course while reading through the summary page. He decides that this class is definitely worth while and proceeds through the registration process. Once registration is complete he receives an email confirming his successful registration. Joseph marks the course date and time in his calendar and quickly gets back to his day-to-day tasks.”

Summary:

The story in this example use-case is fairly refined. When we carefully look at this story it identifies a number of qualities about the actor as well as the process used to reach the end goal. From this story we can derive requirements and even data elements needed to ensure that the functionality described matches what was proposed to be built.

First we see that we have given our actor a name. This allows us to reference the actor more easily throughout the use case. From this story we can see that each relevant step our actor goes through has been described. Additionally we can derive actions that “trigger” other actions and can see the basis for some assumptions that were made. As the story’s end draws near we take note of end conditions and finally, after the basic story is completed, we can assess whether or not there are alternate scenarios and even failed conditions that need to be documented.

Derivative Requirements

Once we have worked out the use case we can derive requirements from this. Let’s start with data elements… In the case of the above use-case we can identify the fact that we will need a user that has the following attributes:

User name
User level
Skill set(s)
Course(s) registered for
Course(s) history (assuming we want to keep track of what happens)
Language (if this is used internationally i.e. is he viewing this in English or does this apply to any local? )
Passport account
PUID
Partner
e-mail address

So we now know that the system will need at least the ability to define the above elements and logically we can think of this as an object.

As to the system, we know that we will need to have gold users be able to login via passport then search and finally register for events. From this we know that MSAP will need to use passport at some level, as well as have built in search functionality and registration functionality. In identifying these elements we also then know that we need to track these data elements as well in the system. So that means we need course information or a ‘course’ object that has search functionality and we need to be able to tie that into registration. An instance of registration would also then be associated to a user and to a course or event.

From this point we are able to identify the basic groups of functionality as well as document data elements from just one use case. These become our derived requirements based on developed use cases.

Building Specifications

From these derived requirements we can also do flow diagrams and sequence diagrams for each use case and this feeds our design process by making it easier to come up with object models and sequences etc.

To focus on specifications, we need to take from the original business requirements and data from our use cases and any requirements list to build functional specifications. Typically organizations have a template of sorts. Microsoft is no different with excellent templates that allow the collected data to be plugged in quickly and effectively. Use cases can be prioritized by this derivative process which in turn prioritizes the feature requirements. In our above use case, from the users stand point, the ability is needed to search and find classes and be able to register. If a user can’t do this then there would not be much point in the example software.

Regardless of templates or other things a functional spec should include all the critical use-case stories or summaries, a feature list, prioritization of features, any external requirements or limitations, assumptions, critical data, issues/risks and a summary of the document.