“Silverlight in a day!” a huge success

February 23, 2009

Well we’ve just held our first ever training day! Actually it was the first free Silverlight training day in Australia!

Forty keen students rocked in to Cliftons in Melbourne for a day of intensive boot camp style Silverlight training.

Check out the pictures

We took some great shots of the day in action, see them here.

Training format

The format for the day was each student had a copy of the labs, the starting projects and a completed copy to review. An instructor then ran the students through each and every step of every lab. No “do it yourself” labs here…

We had three instructors – myself, Phil Beadle and Mahesh Krishnan. Shane Morris (UX Evangelist) from Microsoft was also there to help out. Each of us who weren’t presenting were available to help one on one with the students.

Introduction to XAML and Expression Blend

The day started off with Mahesh running the class through XAML and how damn cool it is. He then guided them through their first Expression Blend experience. I was very impressed with how fast they picked up the technology, a testament to themselves and the Silverlight platform and tools… within one hour they had made their first running applications. Mahesh then ran through the Silverlight layout controls (Grid, StackPanel etc.).

Networking, data binding and media

Next up Phil took the class out of Blend land and in to Visual Studio land. He taught them how to use Windows Communication Foundation services from Silverlight… it was great to see working network calls and data showing up in their Silverlight applications so quick! This lab also introduced the class to some basic data binding. Phil then introduced the class to the powerful media capabilities in Silverlight.

Templating, the VSM, more data binding and the HTML DOM Bridge

After lunch I took over and started with templating and the Visual State Manager. We made a cool glassy button. Then we added some state changes with the VSM to demonstrate hover and click states. Damn the VSM is cool for designer developer workflow.

After this I took data binding to the next level. The class learned how to do more advanced OneTime, OneWay and TwoWay data binding, about INotifyPropertyChanged and ObservableCollection. They also discovered IValueCoverter.

To round out the day we looked at the HTML DOM Bridge. We covered DOM manipulation, events, calling JS from Silverlight and vice versa!

Through the sessions we talked about the Blend design time experience (and design time data) and designer developer workflows.

Wow what a lot of content for one day! To help alleviate the learning curve and to help it all sink in, the class were given a copy of the labs to take home with them.

Lab Availability

The SDDN will make these labs available through the site soon – along with videos of our instructors running through them!

Prizes

Well, in true SDDN spirit we gave away and king’s ransom of prizes! We gave away five Expression Studio’s, 42 T-shirts, 5 Silverlight Lanyards and a PGR hoodie! Best of all we gave away our second VSTS with MSDN Premium subscription worth $19k! That’s almost $50k of schwag in two meetings!

More sessions please!

The resounding feedback was that they loved the day and want to see more training events like it… and for this to happen we need feedback people! Leave comments on this blog, or mail to the SDDN info address. The more feedback we get then the more possibility we have of getting sponsorship to cover the costs of days like this one.

If you would like to see classes on more advanced topics like ADO.NET Data Services, MVVM, testing etc them please let us know also… we need feedback and visibility before we can get funding to put on things like this!

Speaking of costs…

A big call out to the guys at Microsoft for fronting up with the cash to allow this day to happen. The Cliftons training rooms are the best in class and they come with an appropriate price tag…

Thanks to Joerg Lindner from Microsoft for making all this happen. Also a special thanks for Shane Morris for a) opening up doors and b) coming along on the day to help out… We really appreciated it (as did the class)!

Also thanks to Readify for helping us manage the room booking.

MIX conference report

Phil and I are off to the Microsoft MIX conference in Vegas next month so we will be holding out next meet in late March / early April with all the juicy details. I might use the 30 hour round trip flying time to get the SDDN site up to scratch (and even add RSS!).

Now to record some lab videos…

5 Comments | SDDN, Silverlight | Tagged: , , | Permalink
Posted by Jordan

How to: Vector Graphics in Expression Design

February 18, 2009

My brother Alex recently posted a great little article on creating vectors in Expression Design.

I was talking to Alex the other day and he made the interesting comment that he finds Expression Design quite accessible even compared to Illustrator -> very interesting.

Leave a Comment » | Expression Studio, Silverlight | Tagged: , | Permalink
Posted by Jordan

Evangelising Silverlight

February 11, 2009

This article presents you with the facts, links and opinions required to arm you with information about Silverlight and what makes it so good.

You are a developer / architect / manager / designer / consultant and you have this great idea and you think Silverlight would rock out the implementation.

So you embark on an crusade of internal evangelism and enlightenment. The problem you face is that every time you mention this new dark magic the senior management / IT guys / Flash fanbois / druids cry *WITCH* – and bury your suggestions under a pile of sly negative remarks. They come out with all sorts of comments, questions, accusations, slander, colorful language… you name it. What you need is some AMMO. Ammo to take in to that next meeting and shoot them down. Get in their head. Preempt questions and remarks. Un-negative their negativity. Make them think you are reading their minds. Make them rue the day they ever cussed Silverlight!

This article will provide that ammo. Oh and I’ll stop with that bizarre prose from the first paragraph :)

First off the chopping block – Flash

Okay, so Flash is fairly entrenched. As the protagonist it will be your job to tackle the Flash monster first up.

Lets start of with some of the defensive comments you may hear from a “Flash backer”.

Flash has ten years on Silverlight

It sure does… but Silverlight is based on the venerable .NET Framework – itself coming up on ten years old – so the platform maturity of Silverlight is right up there.
Ten years sure has more copies of Flash installed in browsers around the Internet no denying this fact – but below I explain why this is not a problem for Silverlight (in the section “Flash is Known!”).

Our designers really really like Photoshop and Illustrator

So install the Illustrator XAML export plugin. Nobody ever said you had to stop using it. Although, you are only creating flat designs in Illustrator.. maybe you might like to make something that can be used in the real app? Maybe developers shouldn’t be doing animation. Take back the control designers, feel the power… Get in to Blend and actively contribute to the design of the app. Don’t just throw your design over the wall for an integrator to cut up, CSS it, HTML it, JS it for you! Check out the Designer/Developer Workflow stuff below.

Designers don’t like change

Nope, probably not… but the designers I’ve seen persuaded to give it a shot come out the other side absolutely loving Silverlight… and the Expression tools. Also remember that designers probably don’t know/care about all that .NET knowledge you have lurking in your development department either. I’ll come back to designers later.

Flash has more features

Yuppers – it has pixel level shaders, web cam you name it! Hey Silverlight is barely two years old, and its got XAML (awesome binding), .NET, awesome networking stack, LINQ, extension methods, anonymous methods, HTML DOM Bridge plus so much more… I’m saying Silverlight may be lacking some of the “pretty” features of Flash, but it’s core is just so damn good and it’s language features simply blow what Action Script can offer out of the water. .NET Framework baby! Give me C#!

Silverlight also has support for adaptive streaming (see SmoothHD.com for a dose of awesome) and the venerable VC-1 high definition video codec. Microsoft also *builds* codecs, unlike Adobe which hacks and licenses them.

Add all this up and smash in a dose of “Silverlight is only a toddler” -> and you can see where this is headed pretty quickly… Somebody got all growd up!

Flash is Known!

Yes it is – by developers, CIO’s, IT managers, CEO’s (maybe), designers – people in the industry. I performed a highly scientific survey of my middle aged aunties asking them all about Flash and how it came to live on their HDD. “Umm… what?” was the response. Turns out they just were after a particular piece of functionality (probably YouTube) to work, so clicked yes until the bloody questions went away and the video started playing.

My point, people will click anything to see the content they want – and Flash isn’t installed by default in *any major browser*. They’ll install Silverlight to see your site… at 4 megabytes and 20 seconds to install – its totally painless. This was proved by the NBC Olympic coverage. Add to this the pop up they see to install Silverlight is branded heavily with “Microsoft” – now that’s a brand my aunties recognised! Microsoft could pop up a message saying “Click here to blow away all your family photos” and they would click yes. Probably not from Adobe – which only one had heard of mind you.

Silverlight is installed by Windows update – so a lot of people already have it… and you can bet it will be in the next version of Windows.

So – developers, CIO’s, IT managers, CEO’s – I challenge you to survey your aunties and grandmas and other random non technical persons! These people will not install Silverlight problem is *in YOUR head* – not the public’s head.

What about SOE – Standard Operating Environment

Okay, this could be tricky… but it’s amazing how quickly an SOE can be changed when a head kicking, big shot, pragmatic manager thunders down the line asking why he can’t run the new demo app that his .NET team has made for a client! “Give me one good reason why you wont use your automated WSUS server to send out Silverlight?!”. Talk about a scared little obsessive control freak administrator… “Just get it done, Roy”. [It's going to be in Windows 7 anyway.] EDIT (July 09) Silverlight will not be in Windows 7 by default – my bad :)

.NET apps in the browser with a nice and safe sandbox? Yes please.

Illustrator kicks Expression Design/Blend’s ass

Okay, sure… Illustrator has loads of features over Expression. But the stuff you output from Illustrator is miles away from being usable in a real app! Design and Blend are created with one thing in mind… making *real applications* not *pretty designs that require a week of a developer’s time to mangle in to something workable*. What, you think that you can output a PNG, slap it on to a page and it just work – dude, you know that’s not true. Designer 2.0 please (see below).

They say design has 20% of the features you use in Illustrator 80% of the time.

Robots vector created with Expression Design - www.agkdesign.net

Robots vector created with Expression Design - www.agkdesign.net

JavaScript and AJAX

Let me start by saying I totally love JavaScript… and jQuery and all that. I train people on JavaScript etc and it forms a decent part of my job as a consultant at Readify.

JavaScript has reach

Can’t deny that… probably to it’s detriment a little, because of *how* it gets it’s reach. A definite up for JS is that it is almost universally available. The problem is that JavaScript is different between browsers. Sure there are libraries to fix this, like the awesome jQuery – but as a platform it’s “different”… no denying that.

JavaScript is known

Is it? Ask your developer if JS is OO, what prototypal inheritance means and describe what is so good about a closure… maybe ask them what is currying? Even better, ask your “designer that does some JS” these questions. My point here is that in my experience JavaScript may not be as well known as you think.

I’ll tell you something – JavaScript sucks for designers

JavaScript is let down because it is not inherently toolable… You can’t set the timeline bar to 10 sec, drag an image to the other side of the screen and click “play”. You have to write code, CSS and the rest to do this… Sure, I know of (some) designers that can do this – but designers are rarely good developers, and JS is a powerful functional language… see the previous point. I’ll do the code thank you very much!

So what’s Silverlight got then?

Silverlight has so many hidden features and benefits, some technical and some not. If you look at Silverlight like a “it can animate and play videos, it’s just like Flash” then you are sooooooo missing the point. I put it to you that you are completely under-informed sir!

Silverlight has you-beaut designer/developer workflow

You-beaut? It’s Aussie for total awesome.

You have heard of XAML… its this HTML like markup thing right? Something about making tooling easier? Human readable? Yep, yep and yep… but did you know the real reason why XAML is just ridiculously awesome? Designer/Developer Workflow… bam. The Adobe camp dropped the ball on this by releasing designer/developer friendly tools that do not promote workflow… and their attempt to rectify the problem – “Catalyst” is still a year away at the time of writing.

So what’s so good about designer/developer workflow? Well, for bean counters it’s large cost savings. The basic premise of DDW is wireframe and prototype re-use by designers and developers. They sit down and build a wireframe in Blend, which can then be used by both parties to make the final product. Oh, make sure you throw in a sweet naming convention whilst you are in there.

For example, you are building a clock. Designer makes a really simple wireframe of a clock – the round bits, the hands, some fields for date and day etc. A naming convention is created at this same stage e.g. Call this text box txtDate, txtDay, txtXxxx, call this animation sbxxxx etc.

The wireframe is then taken by both the designer and the developer to have their way with. The developer adds in the code to create the behavior of the clock. Populate the day data, fire off animations etc… hopefully they would be using a sweet pattern like Model-View-ViewModel to make this all work nicely in Blend… more on this little gem later.

During this stage, the designer takes the wireframe and pretties it up, turning it in to a masterpiece.

When both parties have completed their work (or at iterations during development) they merge the result. The merge is easy, because the developer hasn’t had to touch much XAML at all! Just dump in the designer’s XAML and because data binding was used, it all just hooks up…

I’m not going to try to smash a full lesson on DDW in here, but I will sure as heck provide some links.

  • First read this whitepaper on XAML and DDW by Karsten Januszewski and Jaime Rodriguez. The New Iteration. This is a fantastic paper on all things XAML and workflows… full of cost saving tips.
  • This video from PDC demonstrates how to use Blend and Designer Developer workflow to great effect.
  • This three part post shows how to build a real application using Designer Developer workflow. Part 2 and Part 3. Get up on it.
  • This video from MIX08 in Vegas demonstrates the clock scenario I described above… simply a must watch.

I’d strongly recommend viewing these videos and reading these posts to gain a real understanding of how this process/pattern can really help you cut down development time and smash quality through the roof.

The big bertha point – .NET Framework

Wait a minute. You mean that any ASP.NET/Win Forms/WCF/WPF/blah developer can do Silverlight? Whaaaaaaat? You mean I can just advertise for a C# developer when I need more talent?

Silverlight 2 is built around the Core .NET Framework, a scaled down version of the full .NET Framework. What do I mean by scaled down? Well, it’s missing things that don’t make sense in Silverlight, like ADO.NET, ASP.NET and Windows Forms etc.

What it’s not missing is WCF, ASMX, JS integration, XAML (with binding and all that cool stuff). It’s plenty of awesome .NET features.

Oh, and what about LINQ, extension methods, anonymous methods – all that cool C# and VB.NET stuff! It’s all there. .NET 3.5 is at home in Silverlight 2 – and you are welcome for dinner any time you want.

Visual Studio… just going to let that sink in for a minute. Visual Studio man. That’s how you make Silverlight. Even on the Express edition of Visual Studio. Just wack in the free Silverlight tools and away you go. Seriously, developers love Visual Studio and they will be right at home here. Seamlessly switch between client and server development in the one solution, using the same languages and techniques at both sites… the integration is awesome.

Adding a web service? No problems, Visual Studio automatically discovers and creates the service proxies for you, just like in other .NET projects… Just add the thing and start using it.

TFS, MSBUILD, Unit testing etc… all present and accounted for.

Seriously, when creating Silverlight applications you get to use the best of breed tools… there is absolutely no arguing with that.

What about Expression – how much is it?

If you have a MSDN Subscription (even the base one) then you get Expression Blend… And if you don’t have it then you can purchase it for a few hundred bucks. Or go win a copy at a user group meeting or at ReMIX. A little licensing never hurt anybody, and it’s an awesome product. It’s built with WPF too…

Edit It’s been pointed out to me that Expression Blend only comes with Premium MSDN packs. Expression Studio comes with VSTS + Premium.

Integration with Server Side

Like I stated above, Silverlight works seamlessly with WCF and ASMX. Just click the buttons to consume people.

ADO.NET Data Services are rockin’ out in Silverlight. Check em out…. Oh and check out how you can use LINQ from Silverlight to dynamically retrieve data from the server – here… Sooo awesome.

Something else worth checking out is the new LOB framework for Silverlight is really cool too – business rules created in your OR/M system (LINQ2SQL and Entity Framework) seamlessly are passed to the client, and much much more – Check out the videos here.

Silverlight Performance

Silverlight is faster than Flash at processing animations and compiled execution of commands. See the Bubblemark animation test for a working example of comparative animation speeds.

Dependency Injection

Want design time data or testable code? Then check out Dependency Injection in Silverlight. There are a few libraries to do this, the best of which is Ninject. Check out this post for a great example on how to do this.

Model-View-ViewModel

There is a Silverlight project… then there is a Silverlight project made with M-V-VM… This pattern allows you to maximise the abilities of databinding to create loosly coupled/high cohesion code and design (XAML). Using Dependency Injection with M-V-VM (and the Command Pattern) you can make massive applications with such low complexity it will make you cry. See this post for a great example on how to use M-V-VM and the Command Pattern in Silverlight. Oh, and these patterns can also be used in WPF!

Will it Blend? Designer 2.0!

Blend… the XAML creation powerhouse.

Did you know that Blend actually runs your Silverlight application? This means that designers can adjust the layout/design at RUNTIME. Yep, if you make a clock, it will tick. Text boxes will have live data.

This allows for “nudge nudge nudge” design rather than “build, run, view, close, nudge, repeat” type design. This is a fantastic feature that you should have a really good think about.

You’ll need some design time data, so check out the part on Dependency Injection above!

Take this feature and meld it with Designer Developer workflow and designers can now work on the real apps… the stuff they make is actually used! Designer 2.0 here we come.

Community

The Silverlight community is booming. Silverlight.NET has a fantastic forum that is alive and kicking. You are never alone, post a question here and it is almost guaranteed to be answered, and quickly!

Perform a quick search on the Internet for Silverlight blogs -> you will be astounded.

There are many Silverlight user groups around the globe. We have the Silverlight Designer and Developer Network in Melbourne Australia which I help run. Check out the site for more information.

Common Questions and Concerns

So you’ve got passed the initial sell, and now they are pounding you with questions… well preempt them!

What about Security

You’ve spent all this time on web security and now you are going to go stuff it all up? No way. Silverlight uses the standard browser stack to communicate. So a network call in Silverlight will automatically include cookies and all those goodies to continue authorisation and authentication on the server. You can check the identity of a user in your service just as if you called it from a normal page.

You can log in with ASP.NET Forms Authentication then secure a folder in the web.config that has a web service in it and Silverlight will be able to access the service.

Additionally you can use the ASP.NET AJAX Authentication Service to log in / check user name etc from Silverlight at runtime.

The long and the short of it, treat Silverlight just like any other web page.

See this post for an example of how to integrate Silverlight with ASP.NET Forms Authentication, Custom Membership, WCF and even Windows Live ID (Screencast of same post here).

Do we have to start over?

Absolutely not. Silverlight integrates with JavaScript and the HTML DOM effortlessly. You can reuse your old content in the Silverlight application without making any back end changes (except for inserting the Silverlight application of course). Silverlight can search the HTML page for content, grab out this content and load it in to the Silverlight application, then overlay itself on the content to update the appearance and functionality. This means you can use your existing content management systems/techniques.

Your back end systems do not need to know *anything* about Silverlight.

How does Silverlight integrate with existing pages/functionality?

Silverlight uses a technology called the HTML DOM Bridge. This enables all Silverlight code to be called from JavaScript and all HTML/JS/DOM code to be called from Silverlight. For example, Silverlight could scan the entire page and look for an element with a particular ID, then change the content in that element with some data Silverlight retrieved from a WCF service.

See this post for an effective use of Silverlight and the HTML DOM Bridge to control Silverlight navigation with the browser back and forward buttons.

Do entire pages have to be converted to Silverlight?

Absolutely not. You can slowly update segments of a page to Silverlight… or you can upgrade the entire page at once. It’s completely up to you and your plan. Silverlight can run as an island or take over the entire page.

How could I minimise re-work and leverage existing code?

Firstly, Silverlight uses the Core .NET CLR (Common Language Runtime) and the C# and VB.NET languages. This means that any code you have written for use on the back end could now potentially be used on the client (for example advanced validation code). Silverlight XAML and C# could also be ported almost verbatim over to/from a WPF project for a desktop sister application.

Most common .NET patterns apply to Silverlight, so your developers can bring a host of their existing experience (and code snippets) across to the client.

Resistance to Silverlight

So you see some resistance to Silverlight. You get asked why all the resistance?

Design shop resistance

Design shops may resist Silverlight because they have a heap of cash invested in Adobe. They have all their Photoshop/Illustrator licenses and they have all these ActionScript developers that they have invested cash in… What happens when Silverlight takes off – it’s not like the ActionScript guys can do *anything but FLASH*!! They are married to that one platform.

Design shops usually have so much work piled up they don’t need to take on building Silverlight apps, they can just sit on their piles of work quite happily. And you can keep sending requests for tiny adjustments to the ActionScript code you own but can’t change. They can keep quoting you half a day for 1 hour worth of work.

Or… you can take back the code! Take it all back, take control! Why should you have a design shop in charge of your code?? Why can’t you do the code and they do what they do best – the pretty designs (hopefully in a working XAML format produced from Blend).

Keep in mind that design shops couldn’t give two hoots about your .NET skills, they don’t care that you have this development capacity that you can’t use on the client side.

Internal design department resistance

At some stage you have to make the decision that utilising .NET for client development is worth putting a couple of designers outside their comfort zone whilst they learn a new product / paradigm (DDW). You can guarantee they will come around to the benefits (as you already have). Remind them they don’t have to give up their Adobe favorites. Have a look at WikiPedia on Expression Design – here you’ll see that Design is based on Creature House Expression – a product which got rave reviews back in the day.

IT Guy

Awww, they are just scared of any changes to the SOE… think of progress. I’m sure the arguments in this article are enough to pull some strings to get this happening. Nuff said.

Enjoy!

So, get over to the Silverlight Getting Started page and download all the stuff you need to get up and running. Don’t forget to check out the documentation, labs, whitepapers and examples on the Lean Silverlight page too!

Hopefully you now have all the ammo you need to cut through the red tape and get your Silverlight project off the ground.

Jordan.

45 Comments | Microsoft, Silverlight | Tagged: | Permalink
Posted by Jordan

Simple Ajax Style Loading Animation in Silverlight

February 4, 2009

I had the need a while back for a spinny loading animation thingy – they seem to be the industry standard “ajaxy load” animation of choice, so I figured I would wack one in my Silverlight application.

I had a bit of a hunt around and to my astonishment there weren’t many around. My searches returned a couple if simple spinny animations where the entire thing spins (i.e. a rotation transform… but I wanted one where each element lights up in turn.

So I got to thinking (which can be dangerous). I decided to jump in to my latest playground – Expression Design – and see what I could come up with. I started with an ellipse object. This would form the “wheel” that the animation would follow. Next I used the text along path feature to draw a series of pipe (“|”) characters around the circle. With some font size and baseline adjustments I had the pipes lining up in to a nice little circle. See the .design file in the download sample. It’s really easy!

SpinnyWheelDesign

Next I exported the design as XAML (with the option to convert text to paths).

In Blend, I pulled out the original Ellipse (the wheel that the pipes are one) as it’s no longer needed, leaving some nicely arranged pipe characters. My loading animation foundation was laid.

The hard part would be actually animating the pipes… or would it.

Naturally I looked to my Animation Chainer library to help out. With a few lines of code I had the animation going.

Basically I walk through each pipe and get its opacity to animate from 100% to 30%. Then the animation waits a bit before starting again (so the other animations around the circle complete). The animation then repeats… forever :)

Sample and demo

Live Demo

<Sample Code>

Ajaxy animation sample code

</Sample Code>

The chainer code is quite simple:


void beginAnim()
{
	AnimationChainManager am = new AnimationChainManager(false);

	int delay = 0;

	foreach (UIElement child in SpinWheel.Children)
	{
		am.Add()
			.DoubleAnimationK() // Create a new Double animation with keyframes
			.Target(child) // Target the UIElement
			.Property(Path.OpacityProperty) // Change the opacity of the object.
			.KeyFrame(1, new TimeSpan(0))// At time 0, have opacity of 100%
			.KeyFrame(.3, new TimeSpan(0, 0, 0, 1, 0)) // Move to 30% at 1 second
			.KeyFrame(.3, new TimeSpan(0,0,0,0,700)) // Wait 700 ms before repeating (this is how long it takes to get back around
			.Repeat() // Keep doing it forever
			.Offset(new TimeSpan(0,0,0,0,delay))
			.Queue();

		delay += 100; // wait 100ms in between each animation, so they start slightly after each other (create the wheel effect)
	}
}

I’ve added a couple of new options to the chainer fluent interface.

  • Ability to repeat
  • If tests. Basically they take a lambda… if the lambda returns true it will run the following commands. .EndIf clears out the if test.

I’ve not used the if tests in this project, it was just a muck around that I’ve decided to leave in for next time :)

Once the animations have been configured once they look after themselves. Just repeat as needed, animating in sequence around the wheel.

Keep in mind that even when hidden these animations will still run in the background – so put the animation in to a user control and add and remove it from the visual tree as you need to show and hide the animation.

9 Comments | Silverlight | Tagged: , , | Permalink
Posted by Jordan

I’m going to MIX Baby!

February 1, 2009

I’m off to Mix baby! Yep, the Microsoft Mix conference in Vegas at the Venetian Hotel in March.

The planets aligned last week, everything just fell in to place and I came out the other side with a plane ticket, accomodation and a ticket to the conference.

I am so damn excited… Not only have I never travelled overseas from Australia, but Mix is THE conference I’d choose to attend anywhere in the world. There is going to be sooo much stuff on Silverlight 3 and I will be right in the thick of it.

Raaaaaaaaaaaaaaaaaaaaaaaa I’m not going to be able to sleep :)

>> Mix Online

3 Comments | Conference, Microsoft, Silverlight | Permalink
Posted by Jordan