Slides & code

The slides and code of the talk are available for download:

• An Introduction To Silverlight - presentation, PowerPoint format
• An Introduction To Silverlight - presentation, OpenOffice Impress format
• XAML example source code
• VideoBrush example source code (large file as it contains the sample video as well!)
• Styling and templating example source code
• Dependency Properties example source code
• Attached Properties example source code (this one I didn’t show in the presentation)
• MVVM example source code

Cool Silverlight applications

Some interesting links worth looking at (the ones I couldn’t show at the end of the presentation):

• A great DeepZoom example: Michael Jordan mosaic
• Silverlight client for Facebook (needs Silverlight 4)
• The cocktail page in Flash and the version I’ve developed rapidly in in Silverlight
• Other good Silverlight examples

Brief summary of the talk

The structure of the talk was the following:

• What is Silverlight?
  A short and simple explanation: RIA concepts, relation to WPF, competitors
• Flash vs Silverlight
  An overview focusing on the differences of the technologies and their features.
• Silverlight (and WPF) features
  Features that make Silverlight and WPF different than their predecessor technologies (e.g. WinForms and WebForms). Overview of how Silverlight is more limited than WPF
• XAML
  What is it, why it’s good and how it works. Overview and demo.
• UI Basics
  Silverlight introduces a new way of handling the UI. Brief overview of how this is done and demo of the VideoBrush
• Styling and templating
  Silverlight is very powerful in customizing user interface through styling and templating. Demo of styling a button and then completely changing the looks of this button with templating
• Dependency Properties
  One of the most significant features Silverlight (and WPF) introduce are Dependency Properties. Overview of how these properties add functionality compared to CLR properties by providing property changed notification, data binding, animation, DefaultValue and ClearValue. Demo of how Dependency Properties can be used
• Attached Properties
  (On the presentation I skipped this part) Brief overview of attached properties, demo.
• MVVM
  Overview of the Model View ViewModel concept and why it is useful. Demo of a simple application designed with MVVM.
• Effort To Learn Silverlight
  My thoughts of how much effort it takes to learn certain parts of Silverlight if coming from a .NET background
• Why It’s Worth It
  Some inspiration on why it’s worth jumping into Silverlight development.

In Silverlight, using fonts can be done in three ways:

• Built-in fonts
  Silverlight can use a limited number of “built-in” fonts to display text such as Arial, Verdana, Times New Roman and a couple of more. The list is limited and it’s also worth noting that Silverlight can only use these fonts if they are installed on the client machine as the runtime does not ship with any fonts.
• Embedded custom fonts
  Custom font files can be embedded in Silverlight applications and then shipped within the xap files. This option makes sure that the font will be rendered as wanted regardless of wether the font is installed on the client machine or not.
• Streamed (dynamically downloaded) custom fonts
  The problem with embedding fonts in Silverlight is that it increases the xap size. If a font is only needed in certain cases the font file can be dynamically loaded from a remote location making the initial download time faster.

For details on how to implement the above use cases and some sample applications with source code check out my blog post on the Scott Logic website: Using built-in, embedded and streamed fonts in Silverlight.

As the team grows the overhead of coordinating work just increases. I’m sure everyone has realized at some point that emails and Excel sheets are quite limited at managing things as the project grows and sticky notes work good, but not with distributed teams.

Of course lots of others have realized this problem before and created software to aid this process: these tools are usually referred to as project management tools or (virtual) workspace solutions. The idea of these is to have users store and update documents in the workspace, be able to constantly track their and others’ progress and make collaboration easy in this space. There are lots of promising workspace solutions: when first searching I came across at least two dozen seemingly good products/services.

One of the most efficient and popular way to help manage comlpex projects is by providing workspaces to users - a common shared storage area related to a specific task. Users can upload and share documents related to the project to the workplace, collaborate with other users involved in the project and track what is going on in the workspace.

Back in September 2009 while I took up the task to test the major players in workspace management fields so that the company would have a picture of where their workspace module was on the market. This study never got published however while doing the research I didn’t find any useful comparisons that were not funded by some vendor. I’ve left Sense/Net in October 2009 and decided to publish my research as it might be a good guideline for someone looking for a short list of project management tools.

The products evaluated in this comparison are Central Desktop, Huddle, Office Live Workspaces, O3Spaces, ProjectPlace, ProjectSpaces, Sense/Net 6.0 and Sharepoint 2007. Evaluation criteria is detailed and is grouped into general overview, document management, collaboration and content publishing categories.

* an email was sent to the vendors asking to evaluate themselves on some of the functionality listed here and the response time to this email is featured.

Product screenshots

The larger the comparison table, the more confusing it can get. To help associate the products with an image we’ve included screenshots and a one-sentence description of the solution, listed in alphabetical order.

Central Desktop

Central Desktop is a mature project management application with numerous advanced features. Its interface is clean and easy to navigate. Visit their website for more information and a trial.

Huddle

Huddle is an advanced online collaboration tool with lots of advanced features. Its interface is self-explanatory. Visit their home page to learn more and try out their solution.

Office Live Workspace

Office Live Workspace - unlike the other products - is the tool offering the least collaboration. It is basically an add-on to the Microsoft Office suite enabling one to store and share documents online. Its collaboration support is very limited, however it is freely accessible with a Microsoft Office license. Visit their home page to try it out.

O3Spaces

O3Spaces is a mature document management solution plugging in to OpenOffice, StarOffice and MS Word allowing documents to be simply transferred to and from the workspaces. Go to their website to find out more details.

ProjectPlace

Projectplace is a project collaboration solution. See their home page for more details.

ProjectSpaces

ProjectSpaces is an online collaboration space which enables users to collaborate on projects (essentially these are workspaces). It has a clean and customizable interface. Go to their web site for details and to try out the solution.

Sense/Net 6.0

Sense/Net 6.0 is an open source enterprise content management system built on the .NET platform with some support for collaborating in workspaces - though this feature is not the most polished point of the system. The software however can be entirely customized or even modified for specific needs. Download the software from the download page or find out more about it on the Sense/Net homepage.

Sharepoint 2007

Microsoft Sharepoint is a mature collaboration and process management solution. Its user interface is not entirely straightforward but it can be customized to support a wide range of use cases. Find out more on the website of the product.

Conclusion

This article intended to help give an overview of some products worth considering to use in the crowded workspace alternatives market. All products have different characteristics and price range so finding the right one for a team or organization is not a simple task. However once aware of the requirements for the workspace tool these tables are likely to provide help in identifying products suiting those needs.

Even though we’ve evaluated eight products in this article the workspace and collaboration market is booming, there are other good alternatives apart from the ones listed above.  These include:

• ActiveState Firefly
• BaseCamp (even though a big player, still didn’t respond to my email though)
• Box.Net (this solution focuses more on sharing though)
• Colaab (a visually really appealing solution, written fully in Silverlight. It’s actually developed in Edinburgh, down the street from me )

If you know of other good alternatives these are welcomed in comments for this article.

Note: this evaluation was carried out in September 2009 therefore some data may be inaccurate. If this is the case, please get in touch so I can correct these details.

ICocktail.co.uk was built with Flash using XML services and since Silverlight is indeed as powerful as Flash implementation was quite an ease - my only problem was squishing in the 10K limit (thanks for Colin’s post on some tips on minifying the code). The application I’ve developed is the following:

If you like it, please vote for it on its the MIX 10K entry site.

One thing all people noticed when looking at the application at first is the cool “bouncing” effect of the cocktail name. In the flash version this was done by using an EaseOutElastic transition. Not surprisingly Silverlight has similar animation effects as Flash, these are called easing functions. To achieve the bouncing effect I only had to add the following code to the animations changing the width and height of the shape:

DoubleAnimation animation; // The animation changing width or height of the shape popping up
animation.EasingFunction=new ElasticEase(){ Oscillations=3, Springiness=1, EasingMode=EasingMode.EaseOut };

Oh, and if you’re in for some more drinks, check out iCocktail.co.uk as well!

At first I was thinking of creating a simple application with fading pictures in Silverlight. However I’m intending to send it to some older relatives whom I don’t want to have to mess with installing the Silverlight plugin - they would probably skip from that point. Doing the card in Powerpoint was not an option as not all friends have software to open it. So that left me trying to find a Flash application that does something like that - without any luck. So at that point I almost gave up. And then realized that I’ve forgorren about one of the most simple cross-crowser solution: using javascript to do the job.

So I’ve created a nice greeting card using jQuery that fades in a few images like it was a slideshow and writes out a greeting message in the end. You can take a look at it working here: Christmas Card using jQuery demo, and here’s a screenshot of what it looks like:

I’m sharing the complete application for further re-use, you can download the package here: source code for Christmas Card using jQuery. It consists of a html page, a css file, some demo images and a javascript file. If you want to create a similar nice greeting card, you can do it the following way:

• Download the source
• Insert your images(s) into the /images folder
• Edit the first few lines of index.html; look for the lines having TODO comments.

  var images = [];
  // TODO: add the URLs of your images here
  // These urls can be absolute URLS (http://....) or relative ones as well
  // It is recommended the images are resized to 600px with for faster loading
  // Be sure to whatch out for uppercase/lowercase differences!
  images.push("images/01.jpg");
  images.push("images/02.jpg");
  images.push("images/03.jpg");
   
  // TODO: specify the loading text
  var loadingText = "Loading card...";
   
  // TODO: specify the text appearing when the slideshow has ended
  // Leave it blank if the last image has some greeting text on it
  var merryChristmasText = "Merry Christmas and a Happy New Year from Gergely Orosz!";
   
  // TODO: specify the text on the replay button
  var replayText = "Replay";
   
  // Wether the application should force images to be displayed at the given width
  // For good display this option is preferred
  var forceImageWidth = true;
   
  // Width of images. If forceImageWidth is set to true images will be rendered at this width
  var imageWidth = 600;
   
  // These were the only customizations you had to do in the script

• Copy the modified source files to a server and you’re done!

christmas

So if you’re looking to create your own cross-browser compatible, jQuery based festive greeting card, here you go!

Happy Holidays!

Based on this talk I’ve written a small article on what BDD is, what tools there are out there to use it in the .NET world and how it can help in software projects. Read the article on my ScottLogic blog: Behaviour Driven Development for .NET developers

I’ve tracked the behaviour down to the point to when it seems that the problem is not with ScaleTransform but with Paths above a certain size. I’ve created a simple example project to reproduce the problem. The source can be downloaded here.

What I’m doing is drawing a simple rectangle with 5 points:

The issue

And I start to redraw it in larger sizes and at the same time re-positioning it to stay in the center (so I’m basically doing a centre zoom effect):

However when the size of the path is about 65 000px (or 80 times the height of the LayoutRoot - I used 1280*1024 resolution with the LayoutRoot grid being about 770px) the shape is drawn incorrectly:

Note: the point where the shape is drawn incorrectly seemed to vary on the size of the window (both width and height), when set to really small it started to happen at about 63000px but I could not find a real corelation between window size and when this appearance started to happen. In IE8 with 1280×1024 it was 80x screen height (or 65 120px) where this behaviour was noticed.

At 83x height on my computer (at 67 562px) the path was rendered like this:

It stayed like this until about 160x screen height (130 240 px) when it started to “shrink”:

And finally at about 161.8x (131 705 px) the middle of the screen was starting to get normal with the strange behaviour moving up and left probably causing troubles elsewhere:

This behaviour is periodical so on my computer I’ve noticed it happen again and again at 240x screen height (195 360 px), 320x screen height (260 480 px) and so on.

Reproducing the bug

The below steps are guidelines among which hopefully this strange behaviour can be reproduced:

• Download, compile and run the here.
• If possible, set your resolution to 1280×1024. If not, you’ll probably have to do some playing around at the screen size the issue happens
• Set “Square size” to “80″, click on the “Apply” button next to it. You should see the drawing on the second picture. If your screen resolution is under 1280×1024 you’ll probably have to enter a smaller number than 80x, if it’s a higher resolution, you might have to increase this number
• Play around by increasing the multiplier and the shape should render similar to the images I’ve attached.

Workaround

As a temporary workaround I’m limiting paths to be enlarged up to 40 000 px - the problem only seemed to occur around 65 000 px. Should anyone be aware of any other workaround or the issue being resolved please leave a comment.

(Note: this post is also intended to be a detailed bugreport for the Silverlight team.)

Uploading files in Silverlight

Uploading files is quite an easy one in Silverlight: it’s basically just a request made to another server and the file contents are passed in this request. A possible way of implementing this is by using the WebClient class:

private void UploadFile()
{
FileStream _data; // The file stream to be read
string uploadUri;
 
byte[] fileContent = new byte[_data.Length]; // Read the contents of the stream into a byte array
_data.Read(fileContent, 0, _data.Length);
 
WebClient wc = new WebClient();
wc.OpenWriteCompleted += new OpenWriteCompletedEventHandler(wc_OpenWriteCompleted);
Uri u = new Uri(uploadUri);
wc.OpenWriteAsync(u, null, fileContent); // Upload the file to the server
}
 
void wc_OpenWriteCompleted(object sender, OpenWriteCompletedEventArgs e) // The upload completed
{
if (e.Error == null)
{
  // Upload completed without error
}

Upload Progress Indicator

The above solution does the job of uploading the file well. However it does not indicate file upload progress at all: when uploading large files or when having slow internet connection this behaviour would be desirable.

Silverlight has no built-in way to monitor the number of bytes sent which means that the only way to indicate upload progress is sending the file to the server in multiple, smaller chunks. Of course this behaviour needs support from the server side as well.

The idea is that multiple calls are made to the server, every call submitting the next chunk of the file. On the server these chunks are appended to the file.

Silverlight code snipplet

public const int CHUNK_SIZE = 4096;
public const string UPLOAD_URI = "http://localhost:55087/FileUpload.ashx?filename={0}&append={1}";
private Stream _data;
private string _fileName;
private long _bytesTotal;
private long _bytesUploaded;
 
private void UploadFileChunk()
{
    string uploadUri = ""; // Format the upload URI according to wether the it's the first chunk of the file
    if (_bytesUploaded == 0)
    {
        uploadUri = String.Format(UPLOAD_URI,_fileName,0); // Dont't append
    }
    else if (_bytesUploaded < _bytesTotal)
    {
        uploadUri = String.Format(UPLOAD_URI, _fileName, 1); // append
    }
    else
    {
        return;  // Upload finished
    }
 
    byte[] fileContent = new byte[CHUNK_SIZE];
    _data.Read(fileContent, 0, CHUNK_SIZE);
 
    WebClient wc = new WebClient();
    wc.OpenWriteCompleted += new OpenWriteCompletedEventHandler(wc_OpenWriteCompleted);
    Uri u = new Uri(uploadUri);
    wc.OpenWriteAsync(u, null, fileContent);
    _bytesUploaded += fileContent.Length;
}
 
void wc_OpenWriteCompleted(object sender, OpenWriteCompletedEventArgs e)
{
    if (e.Error == null)
    {   
        if (_bytesUploaded < _bytesTotal)
        {
            UploadFileChunk();
        }
        else
        {
            // Upload complete
        }
    }
}

Since Silverlight is a client side technology the server side can be implemented in any language. In this example I’ve created .NET and PHP support for the server side.

.NET server side code snipplet

public void ProcessRequest(HttpContext context)
{
    if (context.Request.InputStream.Length == 0)
        throw new ArgumentException("No file input");
    if (context.Request.QueryString["fileName"] == null)
        throw new Exception("Parameter fileName not set!");
 
    string fileName = context.Request.QueryString["fileName"];
    string filePath = @HostingEnvironment.ApplicationPhysicalPath + "/" + fileName;
    bool appendToFile = context.Request.QueryString["append"] != null && context.Request.QueryString["append"] == "1";
 
    FileMode fileMode;
    if (!appendToFile)
    {
        if (File.Exists(filePath))
            File.Delete(filePath);
        fileMode = FileMode.Create;
    }
    else
    {
        fileMode = FileMode.Append;
    }
    using (FileStream fs = File.Open(filePath, fileMode))
    {
        byte[] buffer = new byte[4096];
        int bytesRead;
        while ((bytesRead = context.Request.InputStream.Read(buffer, 0, buffer.Length)) != 0)
        {
            fs.Write(buffer, 0, bytesRead);
        }
        fs.Close();
    }
}

PHP server side code snipplet

<?php
//  This is the most basic of scripts with no try catches
$filename = isset($_REQUEST["filename"]) ? $_REQUEST["filename"] : "jjj";
$append = isset($_REQUEST["append"]);
try
{
	if(!$append)
		$file = fopen($filename,"w");
	else
		$file = fopen($filename,"a");
	$input = file_get_contents ("php://input");
	fwrite($file,$input);
	fclose($file);
}
catch (Exception $e) 
{
	echo 'Caught exception: ',  $e->getMessage(), "\n";
}
?>

Give me the code

In my solution I’ve added some small enhancements: a progress bar and a textbox to display file upload status. The Silverlight solution along with the .NET and PHP server side handlers can be downloaded from here: SimpleFileUpload.zip.

Notes for the code

• Before running the project, set the UPLOAD_URI variable to point to the appropriate .asmx or .php file
• The script is not suited for production environment because of the following:
  • Files are uploaded directly to the root directory of the web application
  • The files are created and constantly appended to. A more desirable approach would be to store the unfinished files in a temp folder until upload is complete and then move them to the upload folder

Other File Upload Resources

Finally, for those looking for a more advanced solution, here is a list of more advanced (and more complex) file upload components with links to their download pages.

• Silverlight file upload control on Codeplex - an advanced file upload control
• Silverlight file upload control with file explorer
• A stripped down file upload solution - source is simpler than the ones above, though still quite complex

You can see the original announcement on the Sense/Net development blog and you can download and play with the newest release from the Sense/Net project on Codeplex.

The reason I’m revising previous results is because some members of the NHibernate community looked into the code and discovered that the comparison wasn’t totally fair. While the test cases with Entity Framework used batch operations, the NHibernate implementation had this feature turned off. Tuna Toksoz was kind enough to re-write the critical parts of the code and apply settings enabling batching, you can download the revised source code here.

Note that I’ve made the source open for two reasons. First, I’d like the tests to be reproducible. And more importantly: I have experience with the two frameworks however I’m not an expert at any of them: therefore treat the results with caution. Anyone is free to analyze the source and if there are some issues in the code resulting in major performance drops, please let me know.

After Tuna modified the code NHibernate storage speed rocketed up compared to the previous version:

However improving performance does not stop here. Fabio Maulo posted a great article on why the original code was far from optimal and improved runtime results even more.

Conclusion

As I’ve stated before I don’t beleive there is a good way in comparing ORM frameworks and even if there were, this little test certanly is not it.

As the contribution of the NHibernate community members showed the more complex and configurable the tool, the more experience you’ll need to make the best of this. If you’re working on a performance critical product, you’d better know you’re tool well and use it accordingly.

But which one should I use?

From the current results it seems that there is no major performance difference between two tools and even if there is it might be due to misuse. So my advice is to use which ever tool suits you more based on its features.

At first glance Entity Framework seems to have a shorter learning curve as well as some nice integrated VS tools to make development easier. On the other hand there is a constantly active and helping NHibernate community always ready to answer questions and NHibernate seems to be much more customizable at a higher level. Also see this thread on EF vs NH features and learning as well to help decide.

The decision is up to you which one you find more suitable for your needs. However since both are proven and mature solutions you won’t be making a big mistake going with which either.