Silverlighter

Silverlight 4 Beta slides & code from Web-Fu! event

2009-12-22T15:37:00.028+01:00

Yesterday I had a great time at Microsoft's Web-Fu! event in Belgrade, Serbia, and at the same time it was an opportunity to talk about what's new in Silverlight 4 Beta. During the talk, I demoed a couple of interesting things:

New Bing Maps Beta application, Deep Zoom, street view, Photosynth, etc.
Rene Shulte's Real time 3D augmented reality proof of concept
Multi-Touch Puzzle
Excel Interop example.

I also showed a little demo application which demonstrates some of the new features coming in Silverlight 4:

New RichTextArea control
DataGrid improvements
New databinding improvements
Out of browser improvements: notification (toast), HtmlBrowser control
Making Silverlight speech using COM Interop
etc.

Here are Silverlight 4 Beta slides, and the code for demo application. Hope you'll find it useful.

Silverlight slides & demo application from MsForge CodeCamp

2009-10-28T17:23:00.023+01:00

I had a great pleasure to attend MsForge Code Camp in Belgrade (Serbia) and meet lots of cool IT folks. At the same time, I had an opportunity to talk about Silverlight & .NET RIA Services and demonstrate 2 simple Silverlight poll applications: one for managing polls and one for voting.

RIA Poll application for managing polls is available here (username: codecamp, pasword: codecamp).

Example of RIA Poll voting is available here.

Code can be found here - .NET Ria Service July Preview is required and web.config connection string needs to point to database which is in RiaPoll.Web/Data folder.

Presentation slides are available online here.

Multi-threading options in Rich Internet Applications

2009-09-24T10:21:00.036+02:00

A non-responsive user interface due to heavy computational work can lead to very poor user experience. In order to avoid freezing user interface, use of multi-threading is a must in any complex Rich Internet Application. Here are some pointers on multi-threading options in existing technologies and those that will come in the (near) future:

Silverlight

Silverlight provides a wide range of threading features and it's all done in a familiar .NET way. MSDN documentation about threading in Silverlight is extensive and you can read it here, and there are lots of examples out there about using threads in Silverlight application. You can use Thread, ThreadPool, BackgroundWorker, Timers, Monitors, Wait Handles, and more . Sure, lots of options here.

JavaFX

To my surprise, I've found that JavaFX script as of version 1.2 (released June 2009) is single-threaded, and all background work must be done in Java code as stated here by key members of JavaFx team at Sun Microsystems. More in their blog post:

There is one major caveat that I need to make clear. As of JavaFX 1.2, JavaFX Script is single threaded. All background work must be done in Java code. The JavaTaskBase abstract class is the base class intended to be used by all background threading implementations in JavaFX 1.2. Unfortunately, the hookup between JavaTaskBase and RunnableFuture didn’t come out right in 1.2 and you’re left with very little guidance as to how to do this appropriately.

The key thing is to understand that nothing should touch JavaFX variables from a background thread. So the idiom to use is to have the JavaTaskBase subclass to have a Java language peer which does the background work. The JavaTaskBase subclass would register a listener on the peer, and the peer would communicate back to the JavaTaskBase through that listener interface. The JavaTaskBase subclass would then pump events from the peer back onto the JavaFX thread (i.e. event thread) using FX.deferAction.

More information about background tasks in JavaFX using Java code is available here.

Flash

There isn't much you can do in Flash, since Flash is single-threaded application.

Alternatives include voting for missing threading feature here (if you are a part of Adobe community), or you can use Pixel Bender for calculating purposes, which is not a part of Flash and is programmed using GLSL syntax. There are more Flash alternatives for threading here, but that just doesn't look viable to me (and surely not just me!).

Html 5 and JavaScript

Html and JavaScript are not categorized as RIA technologies, but that could be changed in the near future. There are some sources here that mention things like multi-threaded JavaScript in Html 5. Draft recommendation for "Web Workers" is here and it's strongly influenced by a work of Google Gears. So we will have to wait until Html 5 is implemented in all major browsers. In the meantime you can try some nasty tricks for "simulating" multi-threading in JavaScript by James Edwards here.

Conclusion

Microsoft Silverlight provides great multi-threading features in today's RIA with lots of options.

Multi-threading in JavaFx 1.2 (released in June 2009) has changed so that JavaFx Script is single-threaded and therefore all threading operations are handled by Java code since JavaFx is fully integrated with Java Runtime Environment (JRE). Some multi-threading improvements (a hookup between JavaTaskBase and FutureRunnable) are coming in next JavaFx releases.

Communicating using only primitive types with Pixel Bender (which is not a part of Flash) doing background work written in GLSL syntax represents a very poor multi-threading choice. Moreover, missing multi-threading feature unfortunately doesn't have highest priority in Flash community.

Web Worker as a part of Html 5 which is currently in draft recommendation form have a long way to go. A lot of existing Ajax and Flash application could also take advantage of Html 5 Web Worker once it comes out, so it is also an option to watch for.

Silverlight SaveFileDialog doesn't work in Opera

2009-09-14T12:59:00.011+02:00

Generally, most Silverlight 3 applications work ok in Opera. There were some problems with windowless mode in Opera using Silverlight 2, but it appears that it's been fixed in Silverlight 3.

Nevertheless, Opera is still not on the list of Microsoft Silverlight 3 officially supported browsers, and today I've found one more reason why. There isn't much documentation about this stuff, but I've got an exception when Silverlight 3 SaveFileDialog is used in Opera 10 (build 1750). The thrown exception is:

"Dialogs must be user-initiated at System.Windows.Controls.SaveFileDialog.ShowDialog()..."

which appears in other browsers, too, but only if you try to invoke save file dialog avoiding button click event. I haven't found any workaround for this, so my code looks like this. I would like to know if there is a better way to solve this problem in order to use Silverlight applications in Opera. Any thoughts?

Prime Timetable in Summer Silverlight Coding Competition

2009-08-24T17:05:00.017+02:00

I've decided to submit Prime Timetable to the Summer Silverlight Coding Competition hosted by ComponentArt. If you find Prime Timetable interesting, you can vote for it here. In order to vote you will need ComponentArt account (just click on "Log in to cast your vote" > Create account, if you don't have it).

It's my pleasure to be able to take part in this competition. The motivation for entering the coding competition came from these:

Not many other Silverlight line of business (LOB) application have been submitted yet, and I wonder why? They don't like to compete or what?
I am ambitious by nature and like to compete :).

So, go ahead and vote and may the best Silverlight app win!

Snapshot of scrollable content using Silverlight 3 WriteableBitmap

2009-08-17T13:36:00.018+02:00

Recently, I've been working on exporting part of XAML tree to Jpeg image using Silverlight 3 WriteableBitmap and it all went pretty well until I put lots of stuff into exporting content container. Here are some of the problems I've encountered:

Scrollbar appears in the snapshot.
Non-visible content doesn't appear in the snapshot even when its size increased.

Here is my approach for solving these problems:

1. Prior to creating WriteableBitmap adjust user interface:

Adjust the size (width and height) of scrolling content so that the scrollbar doesn't appear.
Adjust the size of content containers including plugin size (!), so that you don't have cut offs in exported image.
If there are some UIElements you don't want exported, set them as invisible.

2. Create WriteableBitmap.

3. Revert user interface changes.

The part of code that solves scrolling problems in my scenario is published here. Feel free to adjust it to your needs and let me know what you think. I wonder how this could be accomplished in Out Of Browser (OOP) scenario. How can the platform window be resized to get all the scrollable content without cut offs, and does the cut-off problem even exist? I might even try that one day ;).

Example of generating image from (scrollable) content is available online here, just choose Timetable > Export to Jpeg. That's it.

JavaScript location.href instead of Silverlight HtmlPage.Window.Navigate

2009-08-11T18:11:00.012+02:00

MSDN documentation for Silverlight HtmlPage.Window.Navigate method is pretty basic, here is the link. Summary for the method is: "Opens the specified page in the specified browser instance."

But, behind the scene, if you look at the code in Reflector, HtmlPage.Window.Navigate method invokes JavaScript "open" method. That's all right if you want to call popups, but what if you want to navigate to html page in the same window without calling the popup?
I've encountered following problems with using HtmlPage.Window.Navigate:

It looks like there are some problems with the browser's cache when Navigate method is used, as described by Kevin Hazzard here. Furthermore, in case you use Asp.Net postbacks, the popup page can lead to corrupted viewstate in some scenarios.
HtmlPage.Window.Navigate method's just stopped working in recent builds of Google Chrome browser, probably because of some internal pop-up blocker code.

Therefore, I've decided to use JavaScript location.href instead of HtmlPage.Window.Navigate when target navigation page is set to "_self". Code snippet which looks like a possible solution is published on Rick Strahl's great CodePaste tool here.

I would like to hear your thoughts and experiences on this.

Assembly Caching in Silverlight 3 - practical example

2009-07-25T11:39:00.024+02:00

As an introduction on Silverlight 3 Assembly Caching feature, I suggest reading Tim Heuer's detailed blog post here . Following is a practical example of using Assembly Cache in new projects (for existing ones just skip Step 1 and 2).

Step 1 - Start new project

In Visual Studio 2008 start new Silverlight project: File -> New -> Project.

Step 2 - Choose hosting web application project

Check option "Host new Silverlight application in a new web site".

Step 3 - Add dlls of interest and appropriate .extmap.xml files into newly created Solution Folders

(For the sake of simpler walkthrough I will only show adding Silverlight and SilverlightToolkit dlls, but you can easily add your own specific ones)

Right click on Solution, Add -> New Solution Folder: type "Reference". Right click on Reference solution folder and add two new sub-solution folders: "Silverlight" and "SilverlightToolkit". Create a coresponding folder structure on the file system, too: {SolutionFolder}\Reference\Silverlight and {SolutionFolder}\Reference\SilverlightToolkit.

Silverlight 3 dlls and their *.extmap.xml files are located in the following folder: c:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client.

For instance, for a classical Silverlight 3 data application, the following dlls are needed:

System.ComponentModel.DataAnnotations.dll
System.Data.Services.Client.dll
System.Windows.Controls.dll
System.Windows.Controls.Data.dll
System.Windows.Controls.Data.Input.dll
System.Windows.Controls.Input.dll
System.Windows.Data.dll
System.Xml.Linq.dll

Copy all those dlls and their already generated *.extmap.xml files into {SolutionFolder}\Reference\Silverlight.

Silverlight Toolkit dlls for July 2009 release are located in the following folder: c:\Program Files\Microsoft SDKs\Silverlight\v3.0\Toolkit\Jul09\Bin, e.g.:

System.Windows.Controls.Toolkit.dll
System.Windows.Controls.Input.Toolkit.dll

Copy Silverlight Toolkit dlls and their *.extmap.xml files into {SolutionFolder}\Reference\SilverlightToolkit folder.

Unfortunetely, *.extmap.xml files for Silverlight Toolkit July 2009 release are not provided so they need to be manually created.

For the instructions on manual creating extmap.xml file, refer to Tim Heuer's detailed blog post here. There is also a small utility deloped by Alex Golesh for easier creating extmap.xml files here.

"Download uri" attribute in "extension" node in all *.extmap.xml files should be set for Silverlight dlls:

<extension downloaduri="Silverlight.zip"></extension>

and for SilverlightToolkit dlls:

<extension downloaduri="SilverlightToolkit.zip"></extension>

The solution should look like this, now.

Step 4 - Add reference in Silverlight project to external dlls in Solution Folders

Right click on Silverlight client project and select Add reference, then select Browse tab (not .Net tab!) and set "Look in" folder to corresponding Silverlight Reference Solution Folder. Select all dll files and click Ok. Do the same for SilverlightToolkit references.

In properties dialog of Silverlight client project check "Reduce XAP size by using application library cache" option.

If everything goes well, after rebuilding solution in ClientBin folder of your Silverlight client web application host project, Silverlight.zip and SilverlightToolkit.zip files will appear as shown below:

That sums it up. Startup Silverlight client XAP file size is now only 3 KB (!), and all Silverlight and Silverlight Toolkit dlls are in separate .zip files.

Silverlight.zip (for classic data application) takes 480KB and SilverlightToolkit.zip 135 KB. These .zip files are now ready for caching on client browser, since they are not going to be changed that often. Of course, you can organize your own dlls in your own logical .zip groups based on your project requirements and based on frequency of dll changes.

SilverlClient.xap files contains only SilverlClient.dll and AppManifest.xaml with following content (notice Deployment.ExternalParts node):

Download example solution

You can download example solution here. It contains all necessary *.extmap.xml files for dlls in this article.

Step 5 - Use absolute download uri with .zip version number

Since Microsoft has decided not to host .zip files for us at this point, you need to do it by yourself. On your official web server (where you host your Silverlight application) create AssemblyCache folder and copy Silverlight_3.0.zip and SilvelirghtToolkit_July09.zip files there. Change all *.extmap.xml files so that their downloadUri attribute points to new location, for instance:

<extension downloaduri="http://www.YourDomain.com/AssemblyCache/Silverlight_3.0.zip"></extension>

Version number should be included in download file path to make download url unique and it will help you handle possible version conflicts when one or all dlls in .zip file are changed.

Assembly Caching - When not to use it?

While assembly caching is easy to setup and use, there are certain scenarios when they are not appropriate.

The obvious downside of assembly caching feature is that all external *.zip files need to be loaded before starting the Silverlight application, which can be a problem in more advanced scenarios where not all libraries are required from the start. In those scenarios, you should leverage existing Prism for Silverlight or MEF for dynamically loading assemblies only when they are required (e.g. user request).

Silverlight 3 Assembly Caching doesn't work in combination with Out of Browser (OOB) feature, and in that case you can use Isolated Storage as a dll cache mechanism.

Conclusion

Silverlight 3 Assembly Caching feature makes XAP files much smaller, which can dramatically reduce download for your existing Silverlight 3 application users, resulting in much better user experience even if code is constantly evolving.

Assembly caching is practically collection of zip files holding third party or any other dlls that is downloaded to client's machine on Silverlight application start and saved in browser's cache via browser's cache mechanism.

Silverlight 3 Assembly Caching is not available in OOB scenarios and when external dlls are needed only on user's request.

The joy of Silverlight 3 migration - no code required

2009-07-23T01:55:00.017+02:00

In my previous post, I've showed how easy it was for me to migrate LOB application from Silverlight 2 to Silverlight 3, and now I would like to write about some Silverlight 3 goodies that don't require coding at all:

Better XAP compression rate

Silverlight 3 finally raised compression rate of XAP files, so in my case XAP file was reduced for about 10% of its previous size, although I had to add new System.Windows.Controls.Input.dll (93 KB). Very nice. No need for manually hacking compression rate anymore.

Assembly Caching

This is one of the features that is extremely useful even for very small projects. Basically, you can divide your code into couple of XAP files, for instance, third party libraries and your "changeable" code. Third party libraries can be cached, so when you change your code, only changed dlls will be downloaded to your existing clients, reducing overall payload size.

WCF binaryHttpBinding

There is no reason to keep the old WCF basicHttpBinding now the Silverlight 3 is out. "Old" Silverlight 2 sent text over wire, but now with just couple of web.config changes it is easy to setup binaryHttpBinding for WCF services and experience better WCF performances. Done. No turning back!

Better font rendering

It's hard to miss this one as that was the major reason some designers didn't like Silverlight. Finally, I am very happy that I can actually work with designers, though it looks like font rendering could be even better.

VirtualizingStackPanel in ListBoxes by default

I thought that I should do it by myself. But, hey... I get it for free :). In Silverlight 3, ListBox has VirtualizedStackPanel in ListBoxes by default, which practically means that only displayed items will be rendered, which increases performances on some forms. More details here.

New MouseWheel event

There is a new MouseWheel event exposed (without JavaScript hack!), which can be used the same way it is used in WPF application. I guess I will have to refactor old Silverlight 2 mouse wheel "quirk" code into the new simpler one.

No need for extra rebuild in bigger projects

When Silverlight 2 XAP file becomes bigger (1MB+), I have often experienced a need for separate rebuild prior starting application in debug mode, which slowed the development. It looks like it's fixed now, and I can just press F5. What a relief ;).

Noteble bug fixes

ComboBox DropDown height is finally fixed when using in cascading fashion, which caused problems in lots of LOB scenarios.

Some pitfalls

Out of browser (OOB) feature doesn't work in combination with Assembly Caching in Silverlight 3, but I guess one can overcome this limitation by using Prism for Silverlight framework or MEF for even better dynamically loading of assemblies, only when needed.

I still don't get why some classes are sealed: Shape and HtmlElement come to my mind first. There are some very old forum posts on this topic here, but apparently, nothing has changed.

These are some of my favourite Silverlight 3 enhancements which don't require any coding. How about that :).

Migration from Silverlight 2 to Silverlight 3

2009-07-21T15:59:00.020+02:00

In one word: Smooth. In two words: Very Smooth! Read on if you want to know my experience of migrating http://www.primetimetable.com from Silverlight 2 to Silverlight 3:

Step 1 - Introduction

I have rechecked information published by Silverlight team here.

Step 2 - Installation

Downloaded and installed new stuff:

Visual Studio Tools for Silverlight 3

Silverlight Toolkit July 2009

Step 3 - Visual Studio Conversion Wizard

Started the old Silverlight 2 solution and converted it using Visual Studio Conversion Wizard.

Step 4 - Rebuild solution(s) and fix errors

As expected, Silverlight Toolkit controls needed the new Silverlight Toolkit July 2009 references
AutoCompleteBox has been moved into System.Windows.Controls.Input namespace as stated in the migration document.
WCF services showed errors even after updating them. Re-adding was enough for errors to disappear.
HierarhicalDataTemplate namespace for TreeView custom item template is now in System.Windows.Controls namespace instead of System.Windows.Controls.Toolkit.

Step 5 - Final touches

Minimum runtime version for Silverlight 3 object tag needs to be: 3.0.40624.0
Silverlight Toolkit NumericUpDown control needed some fixes for background color (?).

Step 6 - Testing

After exhaustive testing I found it hard to believe that all code just worked: custom window, ribbon, other custom controls, mouse wheel, mouse right click and all other stuff just worked. I have also experienced some fixes to Silverlight 3 controls which bugged me previously.

Step 7 - Publishing

Nothing new here. That's it. It's live since Silverlight 3 release date :) here: http://www.primetimetable.com/demo/

Conclusion:

Migrating from Silverlight 2 to Silverlight 3 took me only 1 hour(!) and I did it while I was on my vacation ;). This was the best upgrading experience I have ever had. I remember the old days when I tried converting Flash/ActionScript code to newer Flash version, and the code needed complete rewrite from the scratch - that's where I decided to completely stop developing Flash. Also, I remember converting Asp.Net 1.1 projects into 2.0 and later into 3.0 and 3.5. That was smooth, because the code basically remained the same, but there were always some gotchas and it took some time. Definitely, a pleasant surprise from Silverlight team. Thank you guys for great work!

School timetabling just got better using Silverlight

2009-06-30T20:57:00.007+02:00

It's a great pleasure to share with you the world's first online school scheduling/timetabling software done using Microsoft Silverlight. It's a software as a service available at: http://www.primetimetable.com.
Building this line of business application was a great experience as well as struggle, but as they say "all's well that ends well" :).
Hope I will have time to blog more about this experience.
In the mean-time, check it out, and let me know what you think about it.
I won't mind if you share this link with all your teacher/school master friends :), because school timetabling just got better!
Enjoy!

Silverlight web development presentation

2009-05-13T12:26:00.012+02:00

I have created a small Silverlight introduction presentation for Microsoft .Net User Group meeting in Belgrade, Serbia.

Presentation is done and published via Google Docs here: http://docs.google.com/Presentation?id=dc64vvk5_6gqb988dr

Resources: Mike Taulty's presentation, Nikhil Kothari and others... Hope you like it. Feel free to use it.