Simon a case study part 1 - designer developer work flow

So I while back a friend of mine and whom is another person that shows up to the local designer developer Interaction group and myself were talking about a simple demo app we could do that would show case a number of things, our goal was a good sample she could use on her resume and be a good sample application that could show case designer developer work flow and composite application development. Her idea was todo a simple Simon says game that we would have in Silverlight. As a team (such that two people being a designer and UX dev can be) we had our 'business requirement' but we needed to build on that with a comp or visual vision of what we wanted and a story (use case brief, scenario or other excuse for the same). Our user story went something like this:

John doe wants to play a game like Simon says. John sees link on a web page that says 'Simon says.' John clicks link and he doesn't have Silverlight installed so he gets a 'install me' link with a faded image of Simon. John can see from the faded image that Simon is what he is looking for and decided to install Silverlight. John then go to the Simon link and Simon comes up. John can click the new button to start a game and play a traditional game of Simon says buy following the sound and light patterns and clicking the appropriate game pads. John is able to use the high score button to see his high score. John has fun with and easy to use game and spends to much time playing the game.

with this as our user story, Ariel (the designer, names changed to protect the innocent or not) put together a wonderful bit of Xaml. Ariel being familiar with working with dev's took into account that things needed to be groups, and names reasonable or I would have a hard time working with the asset. For me the first thing I did was load the project and start to wire it up. One would think that Simon shouldn't be too complicated and at first it wasn't. A few events, and a game timer using a story board and we are good. Being the retentive dev that I am, I've had to learn to let go of that when it comes to Xaml as this tends to hamper or slow down the design to the point of just not being worth the time invested.

That all being the case we soon had a working game. Part of learning to work together and further learning to work on the same code at the same time that Silverlight and by extension WPF (actually that might be the other way around) is having the designer and dev work from source control. I know allot of dev's will have a cow about letting designer touch source control but its really not that hard. check out file, check in file... really even a designer can get the hang of it when their tool (Blend 3) supports it now. So we put this in source control (http://Simon.codeplex.com/). the one little detail we had to over come though was Silverlight 2 vs Silverlight 3 and we both were on opposite sides of the fence. This probably was our biggest issue we had to work out where we disagreed. And any time there is a designer and developer on the same project you tend to have at least one disagreement. We ended up eventually on Silverlight 3 as it supports more, the tools are better and it is being released next week. But generally deciding on any issue should be done based on the requirements and when the requirements don't provide enough bases then other reasons should come into play. The key then is to communicate. granted we hear that in everything from time immemorial but really how much do we have to tell people before the get it. 'TALK' things through and normally logic will dictate the best solution.

moving on...

Once in source and having the app running we would start building the application out. Ariel can muck with the design in more detail and focus on the finer points of the design to it was pixel perfect and I could play with game logic and function and we both could do it at the same time. Truly a zen moment for designer developer relations.

Silverlight 2 Installs Greatered the all others combined...

Can't get over the quote '... Silverlight 2, the platform is installed on more machines around the world than the web browsers Firefox, Safari and Chrome — combined. Damn. Them fightin’ words.' from:

http://www.techcrunch.com/2009/05/18/microsoft-says-silverlight-installed-more-than-firefox-safari-and-chrome-combined/

Silverlight 3 to Silverlight 2

here is a cool post on going from SL3 to SL2 on the same dev box.

http://blogs.msdn.com/amyd/archive/2009/03/18/switching-from-silverlight-3-tools-to-silverlight-2-tools.aspx

Silverlight Simon v.old

Ariel posted a version of Silverlight Simon that runs in SL2. it looses the flip, pref button doesn't do anything and the out of browser experience goes a way but still very cool :) the coolest part was the process Ariel had to go through to make it work in Silverlight 2 after I sent her the Silverlight 3 version.

http://www.facingblend.com/SimonInSilverlight/index.html

and of course the SL3 version is at:

http://www.HackingSilverlight.net/Simon.html

The Ultimate Design Pattern

So I'm building out all these different variations on Command Pattern for Silverlight and writting articles on MVP or pMVP or MVVM or M-WTF and some times the entire discussion gets so esoteric that I want to screen. I mean really how the heck to you entirely seperate presenter from the model and view for example? in Silverlight its NEVER entirely seperate, not really. Anyway so as always Dr. WPF is the man and has a solution... W-V-poo which I think applies to Silverlight as much as WPF. Check out the article:

http://www.drwpf.com/blog/Home/tabid/36/EntryID/27/Default.aspx

Rounded Corners MediaElement

so I was working on a new media player for Crossfader and wanted the media element in the new wizbang super tile to be able to form fit as in have roundy corners... I swear I spent hours trying to make this work and I guess had a brain block on this and thanks to Jobi pointing out the obvious the solution looks like this:

<mediaelement width="0" name="ThisMediaElement" height="0" stretch="Uniform" source="http://localhost:36825/Seiryu.wmv" balance="5" volume="0" autoplay="True" downloadprogresschanged="ThisMediaElement_DownloadProgressChanged">
<rectangle width="Auto" name="ControlBack" fill="Black" radiusy="30" radiusx="30" height="Auto">
<rectangle width="Auto" radiusy="30" radiusx="30" height="Auto">
<rectangle.fill>
<videobrush stretch="Uniform" sourcename="ThisMediaElement">
</rectangle.fill>
<rectangle.stroke>
<lineargradientbrush endpoint="0.972438,1.14352" startpoint="0.972438,0.000225328">
<gradientstop offset="0" color="#FF848484">
<gradientstop offset="1" color="#FF000000">
</lineargradientbrush>
</rectangle.stroke>
</rectangle>

seemed like the obvious solution but some how missed it...

FacingBlend and the New Year

I have been off line for the Holidays, more a function of my wifes surgury in Decemeber. Over the holidays I noticed a designer friend of mine started blogging alot alot more. I was reviewing the material she posted and I think its great stuff. Check it out at:

http://www.facingblend.com/blog/

Xaml Guidelines, Part 1

Check out Jonathan, Jared and Nathan on Xaml Guidelines on Channel 9. I know this is focused alot of WPF but as suggested on their post it applies to Silverlight AND wpf.

http://channel9.msdn.com/shows/Continuum/XAML-Guidelines-Part-1/Default.aspx?wa=wsignin1.0

Scrubbing Timeline MediaElement

I wrote this sample of a timeline a year ago in Dec, and some one posted a link saying that the code didn't work. gasp code written against the 1.1 alpha doesn't work against the released v2.0??? oh my, how can that be. Personally I htink the expectation was a bit over the top. Anyway i wipped out the same used in the book and yes I have not tried it in some time but working 18 hours a day on BillG keynotes and other such nonsense kind of does that to you.

anyway I got the code out and walked through it since actually I'm checking all the samples currenty for the final review so I had todo it. In any case I was suprised to find that it works, Yes granted the in the article and post a year ago didn't expressly bind the events but seeing as the audience is developers and this is a blog called 'hacking' silverlight so I'm assuming that most of the readers are trained developers and in fact many are probably smarter then me so I would think they would be able to figure out what it means to add the events. The only other issue I found with the code was in fact when I wrote the article the play and pause methods were abstracted in the original which again was a simple thing but anyway I found the remark mean. and here is the same code recompiled on RTM SL 2.0 and it seems to work:

http://www.hackingsilverlight.net/samples/ScrubbingTimeline.zip

Silverlight Trigonometry

a cool post on stuff that makes my head hurt in Silverlight no less :)

http://channel9.msdn.com/continuum/tutorials/Trigonometry/

check it out.

Silverlight 2 Performance Best Practices

Here is some more 'content' summary info from my Architectural Best Practices presentation at DevTeach.

As to performance best practices… use the following as a good starting place:

· Don’t stretch things including Images, videos, or paths. Stretching things is going to cause more processing. Create assets at the size that they will be used and life will be much easier.

· Don’t use ECMA Script or the Anti-Pattern Silverlight 1.0.

· Don’t use windowless mode.

· Remove event handlers and set them to null before removing the element from the visual tree.

· Set MediaElement sources to null before removing them from the tree.

· Don’t use opacity if you just need to make things disappear, instead use the visibility property.

· Do use ‘IsHitTest’ and set it to false when doing drag and drop do hit testing only happens on the elements that are drag targets. This also allows you to keep visual elements from interfering with role over related events such as Mouse Enter and Mouse Exit events.

· Don’t have 1000 thousand elements in the same Visual Tree…

· If something is going to take a while tell the user or show the user that we are waiting.

· Don’t use ‘findName’ if you don’t have too as this causes a walk through the visual tree.

At least following these rules for Architecture and Performance your application won’t fall on its face.

Architectural Best Practices for Silverlight 2.0

these will or could change when people that are smarter then me publish material I'm sure but in my work on everything from the emmy site for the SL 1.0, lauch or Crossfader for the BG keynote, or innovate on or msn or the mix 08 stuff etc this all seems to be a nice bulleted list of best practices for Silverlight 2. we will see what happens when there is a Silverlight 3.o so with much ado:

Underlying Silverlight architecture helps us abstracted UI from logic and we need to take into account this toolability story that Silverlight enables as this can provide more ROI and shorter time to market for application development if designers and developers can work at the same time without the whole ‘through it over the fence’ approach. From a design pattern standpoint I recommend pMVP or Proxy Model View Presenter as the ‘better’ design patterns I know of require more upfront development as Silverlight doesn’t support the underlying infrastructure for these patterns. pMVP keeps it simple and the simplest solution is usually the best.
For Architectural best practices lets bullet out our best practices:

· Design Pattern pMVP (Proxy Model View Presenter) which is a clean, simple design pattern to implement that gives better abstraction.

· Make use of designer developer workflow enabled by Xaml UI separation.

· Don’t impose artificial Xaml coding conventions on designers or yourself as this slows productivity. Just let Blend go with it.

· Agree on Naming conventions, coding conventions (maybe standard WPF conventions might be a good place to start) and the like as you like but be consistent so that it is easier to support and pick up again later. This improves readability and helps the whole designer developer interaction.

· For the most part doing event bindings in Xaml, the more in Xaml the better however use common sense. If the designers are using Photoshop and converting the Xaml maybe just do the bindings in code so that you can have the designer just do a new conversion to generate new Xaml if they might make changes.

· Build at lest the Presenter logic in a separate Silverlight library.

· Build generic custom controls in a library.

· Consider putting the presenter code in a separate library or at least its own folder.

· Build Views with Blendablity in mind. Break up complex user controls that build the View into its component parts so that the elements can be more easily worked with in Blend.

· Use Gobal Styles and Templates and other resources in the App.xaml only when they are truly global in the application. Don’t clutter up the global resources with elements that are not really global.

· Use best practices with other connected technologies such as WCF or SQL or IIS/ASP.NET. Best practices in Silverlight wont’ do you much good if everything else is a mess.

· IF you build controls that rely on the DOM bridge encapsulate the ECMA related resources either in a Xap or right into the control so the ‘user’ as the simplest method to use the control.

· Consider the install experience to encourage users to install Silverlight so they can use your Silverlight application. Just using the default badge is boring.

· Consider Search Engine Optimization if it is a public site, such as control element names and the HTML on the Silverlight page etc. event the names of Xaml elements as a lot of this will be in the Xap that will at some point be parsed by search engine spiders.

That gives us a nice list of best architectural best practices. Following these simple rules lets you approach Silverlight architecture and application design with ease. Now we didn’t go into a lot of the application ‘Design’ aspects of ‘Designing’ applications such as UML etc but the focus here is strictly on Silverlight.

DevTeach Conference Content - Best Practices, Hacking Silverlight, Controls

Last week I traveled to Montreal Canada for DevTeach 08. It was a great conference. not as big as MIX but alot more 'cozy' with great content and lots of cool people. I had the chance to hang out with lots of poeple that were smarter then me such as Dave Cambell and a few guys from INETA and Microsoft. The trip there was a bit of a 'challenge'. Granted my flight out of seattle was delayed once but coming out of Chicago... I swear I heard every single excuse in the book including the airplane didn't have enough air and we had to wait to take off until we could get enough air...

enough air???

Anyway ignoring that little episode it was great. Here are the links to session material and content (mosting slide decks and sample code and some talk track notes I used to memorize content)

http://www.hackingsilverlight.net/samples/SLV421.SLArchitecture.zip
http://www.hackingsilverlight.net/samples/SLV467.SilverlightControls.zip
http://www.hackingsilverlight.net/samples/SLV469.HackingSilverlight.zip

Netflix Layoff Blamed on Silverlight

I heard this morning from the guys in the office, Now this is extremely funny...

http://blog.netflix.com/2008/12/changes-in-customer-service.html

sad for those guys but cool for Silverlight... hmm.. will the dow go up or down?

Silverlight Threading and Events

$##$%^#$% Silverlight today is really making me tired. So I have this textbox? no big deal tha tis a search form. Users expect the return to make the form 'submit'. we know that is not exactly how Silverlight forms 'work' persay but we get the point right. no problem nothing a bit of code won't solve. so I make the 'search' button have a click event that validates the form and sents it to a class that deals with the data. and it works great.

then I make the text block have a keydown event so I can capture returns and send them along their way... if it is a return I just call the other event handler...

and one does a call to system which blows up. so the event in the key up looks like this:


private void SearchBox_KeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Enter)
{
SearchBtn_Click(sender, null);
}
}

but in the search btn we are trying todo an alert as I'm in a hurry and don't feel like making a nice silverlight message thingy so I just want todo this:


private void SearchBtn_Click(object sender, RoutedEventArgs e)
{
string SearchValue = SearchBox.Text.ToString();
if (SearchValue != "" && SearchValue.Length > 2)
{
DataBindMe.DataContext = CrossfaderUsers.RetrieveSearchUserList(SearchValue);
}
else
{
System.Windows.Browser.HtmlPage.Window.Alert(App.SEARCHTEXTINVALID);
}
SearchMessageBox.Visibility = Visibility.Collapsed;
}

this blows up from the keydown event apperently as it is not on the UI thread??? WT...? I mean really the 'click' event is on the UI thread but keydown is not? the error message is something to effect of namespace 'System' is not accessable due to the context? As far as I can tell by 30 minutes of googling is that this event some how is magically not on the UI thread so when I add this:


Dispatcher.BeginInvoke(delegate()
{
System.Windows.Browser.HtmlPage.Window.Alert(App.SEARCHTEXTINVALID);
});

it magically works???

Silverlight 2 Event bindings

So in the process of working on this presentation for dev teach and the article and the book I got in a long discussion with alot of the ubber guys I work with around event binding in Silverlight. In that spirit I would like to get everyones input or at least some ones on what they think about where event bindings should take place....

checkout my post on dotnetslackers and let me know:

http://dotnetslackers.com/Community/forums/silverlight-architectural-best-pratices/t/2609.aspx

Silverlight 2 Architecture and CodeCamp

So I was going todo a couple of sessions recently at a seattle local even called codecamp. I had a family related complication and was not able to attend (I did let the organizers know BEFORE it started, so don't go harping on me for doing it at the last moment).

Anyway one guy emailed me about getting that content available. of course this stuff will be in my book and I'm doing the presentations at DevTeach etc. but up front I'd like to point out a few things that might help get people going in the right direction.

So from a design pattern stand point the entire discussion frequently has more in comon with Hell Fire and brime stone religous discussions then real logical 'Useful' disuccusions that are actually helpful. It really is all kind of esoteric mumbo jumbo at some level.

In an effort not to get sucked into a religous war I'm going to go WAYYYY out of a limb and say the best design pattern is in fact MVP (model view presentor) as discribed in the following posts by others:



Phil Haack
http://haacked.com/archive/2006/08/09/ASP.NETSupervisingControllerModelViewPresenterFromSchematicToUnitTestsToCode.aspx
Tim Ross
http://timross.wordpress.com/2008/03/16/implementing-the-mvp-pattern-in-silverlight/

There are several ways todo it and I'm not even saying that this one is correct just it happens to be my choice for no other reason then it helps get back to some nice old CS101 ideas like 'gasp' OBJECT ORIENTED or Encapsulation sorts of things.

my code behinds are simple may data model objects are clean and my Xaml is Zen with the universe.

lets just say for the sake of moving foward that I'm going with the MVP design pattern as my prescribed method. Alot of what you do on top of that is more or less common sense. Follow stand coding conventions as they apply, following Preformance best practices where they apply, and most of all consistency.

do it, all do it and do it the same...

I really don't care which way but really I should never be able to tell who did and I should seem lots of oh yea that is logical and is the best way.

really thats is the bottom line. More to come as I work out a detailed talk track for the SLV421 presentation in case I want to give it to say my friend John todo the same presentation at another conference... ;)

Seattle Developer / Designer Interactive Group

we had our second meeting last night. I was surprised that we had the same size audience but with alot of new faces. A big part of this was that all the adobe/flash/flex types were at the ubber adobe conference this week. Ariel posted a great post on the happenings at http://www.SeattleD2IG.com

Next month we will focus on mobile devices and we are hoping to get some cool people in this space to talk about their work. Be cool too and show up. :)

CodeMash and DevTeach

Hm... I'm thinking I need to get my outline finished today for DevTeach. I'm exicted about both of these conferences. DevTeach I'm doing 3 sessions as planned but I found out today that I'm also doing a session at CodeMash this year.

DevTeach is giving a bunch of cool stuff to attendee's and I'm planning on having lots of swag to give out too. Now also at Codemash I get todo the same thing. Codemash is in Ohio at this cool resort and I'm doing a presentation on Silverlight 2 Arctectural Best Practices which will probably include some great 'Anti-Patterns' with the ubber Silverlight app Crossfader. If you can come check it out. :)

http://www.codemash.org/

and of

http://www.devteach.com/

both awesome conferences. :)

Crossfader Goes Live

Crossfader is the largest most complicated Silverlight application to date. After a years work finaly is live. Yesterday afternoon in secret the url was changed to point to the real application. most of the dev team spent all day playing with it. Dan the business owner and Darak (Editor In Chief) are working on closing all the artist deals so hopefully all the music content will get all the real artist content loaded over the next few weeks.

As to Silverlight I went through the application and counted 54 distinct screens, dialogs and views currently in the system. Some of these are amagalmations but remember the whole things is one xap. I'm impressed it runs. :) 10 years ago a web application like this even if it wasn't all together was more likely then not going to lock up your computer. Crossfader certainly is next gen stuff and about the experience. Remember this is still just a beta but facebook will have some catching up todo :)

http://www.crossfader.com/