Sharing C# .NET assemblies and classes with a Silverlight project - reusing common code
Generally you wouldn't want the business logic placed into a Silverlight application... except for instances like mimicking a pure desktop application. For example a twitter client, video games, or other types of Silverlight applications that won't require any shared user data access (in the case of twitter, that is your backend). That being said, there are ways to share client and server code for a Silverlight project using a WCF back end.
Moving existing code to Silverlight (reusing old C# code)
If your project fits this description, you can modify the .csproj file to switch it between using the standard .NET assemblies and the Silverlight assemblies.
The key to switching the build type is finding this line in the non-Silverlight assembly project's .csproj file:
<Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
and changing it to:
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\Silverlight\v3.0\Microsoft.Silverlight.CSharp.targets" Condition="" />
Now your project will be using the Silverlight assemblies, but some of the <References> lines in the csproj will need to be removed or changed. Here is what a typical Silverlight project has for the references:
<Reference Include="System.Runtime.Serialization" />
<Reference Include="System.Windows" />
<Reference Include="mscorlib" />
<Reference Include="system" />
<Reference Include="System.Core" />
<Reference Include="System.Xml" />
<Reference Include="System.Net" />
<Reference Include="System.Windows.Browser" />
If your project references any other assemblies that you have written, or any 3rd party assemblies, you will have to remove those references or perform the same csproj operation on them so that they are built against the Silverlight assemblies as well. All assemblies used by a Silverlight application must have been built against Silverlight .NET assemblies. If you try to add a reference to an assembly that did not, Visual Studio should display a warning.
Sharing source code via two proxy projects
If you want the source code to be shared with the server logic and client logic (maybe validation), then you can create two separate Visual Studio projects. Place the .cs files in a common/shared folder path, and when you 'add existing item' to the project you will use VS's "Add as Link" dropdown (the 'Add' button on the Add Existing Item screen has a dropdown arrow on it). Now you can have two primary projects (one Silverlight, one full .NET / WCF) referencing either of the new projects built on different platforms(one Silverlight, one full .NET / WCF), but the source code will be the same for both projects.
Also worth mentioning is the patterns and practices Project Linker Tool located here: http://msdn.microsoft.com/en-us/library/dd458870.aspx
Prism / Composite Application Guidance for WPF and Silverlight
Sharing code between WPF and Silverlight for a small utility class may work short term, but you will want to examine Prism - the Microsoft patterns and practices Composite Application Guidance located here: http://www.codeplex.com/CompositeWPF
Silverlight or Sketchflow error 2104 unable to download the application with IIS
Any time you receive a blank web page when trying to view or deploy a Silverlight application to your web server, it is possibly the result of a missing .xap MIME type handler. Occasionally it has to do with file permissions, if you just created a new web site and directory. Back in early 2008 when I first started working with Silverlight, it was difficult to find information about why the Silverlight app wouldn't display. If I remember correctly, Visual Studio at that time did not generate the Javascript code in the HTML app page to bubble up the error in Silverlight 2 so there was no indication. The first place that you should check when you have a strange issue with a web page hosted on IIS is to examine the web site access logs. The logs should give you an indication of whether it is file access permissions, authentication problems, or (in this case) missing mime type mappings.
Here in the access log you can see the xap file error:
2009-10-15 08:54:08 W3SVC1512438873 192.1681.1.22 GET /WebAdmin/WebAdmin.xap - 80 - 192.168.1.44 Mozilla/5.0+(Windows;+U;+Windows+NT+6.0;+en-US;+rv:1.9.0.14)+Gecko/2009082707+Firefox/3.0.14+(.NET+CLR+3.5.30729) 404 3 50
For IIS, you can find the detailed explanation of IIS HTTP status codes listed here:
http://support.microsoft.com/default.aspx/kb/318380
If you skip to the 404 error in the reference documentation, you will see that 404.3 means "MIME map policy prevents this request"
I describe how to find the error in javascript Internet Explorer below... but in FireFox you would need to use the Tools menu to open the Error Console and scroll to the end to find the javascript error.
When you navigate your web browser to the page in IE, you are greeted with a blank web page and the only indication of a problem (on IE) is the little javascript error icon in the bottom left corner of the browser as seen here:
Double clicking on the icon shows the following error:
Right click on the website in IIS select Properties, and click on the HTTP Headers tab:
click on MIME Types... click New.. and enter ".xap" for Extension and "application/x-silverlight-app" as the MIME-Type:
The older .xaml is for Silverlight 1 and .xbap is for WAML Browser Application for WPF deployments. If you want xbap add a similar entry with "application/x-ms-xbap". For more info on XBAP go here: http://xbap.org/
For anyone hosting on an asp.net web host provider like GoDaddy or DiscountASP, you can configure the mappings yourself in web.config. Here is an article that has tips on web hosting with Silverlight: http://www.wpflearningexperience.com/?cat=12
This article contains information about setting the mime types using web.config:
http://blogs.iis.net/bills/archive/2008/03/25/how-to-add-mime-types-with-iis7-web-config.aspx
How to list, clear or delete isolated local storage used with Silverlight
Using Isolated Local Storage in Silveright is simple enough, but I was curious about how to clear the local storage... To delete Silverlight specific local application storage, bring up any Silverlight application and right click on it. The only popup menu option given is 'Silverlight'. Select it, and on the Microsoft Silverlight Configuration dialog, select the Application Storage tab:
At this point you can select and delete isolated storage for any Silverlight application you may have used.
The MSDN documenation on the Silverlight Configuration dialog is at http://msdn.microsoft.com/en-us/library/cc645084(VS.95).aspx
For ASP.NET applications and WCF services you use the storeadm.exe Isolated Storage Tool, accessible by using the Visual Studio Command Prompt.
Available command line options are shown in the MSDN documentation as storeadm [/list][/machine][/remove][/roaming][/quiet]
storeadm /list will show you all of the local stores currently on the machine.
storeadm /roaming /remove will clear the current user's local storage whereas storeadm /machine /remove will clear the machine local storage.
The MSDN documentation is at http://msdn.microsoft.com/en-us/library/ezabwsbk(VS.100).aspx
Matchingo memory game deployed on Facebook
We released Matchingo for Facebook... @smartyp of SmartyPantsCoding.com envisioned, created, designed, and developed the original Silverlight 2 based game. I am building the Facebook integration and the server components... working with the Facebook API, building the WCF service, SQL data, and internal game engine providers required to power the Facebook functionalities that we want.
Right now it supports a global Facebook scoreboard as well as comparing your scores with your friends. It also sends a taunt to your opponents, whenever you beat one of their scores.
We'd like to allow people to pull in their own pictures to use as flash cards from Facebook albums or Flickr, and then share their 'Matchingo flashcard albums' for others' gameplay use if they want to. (once approved to be on the public card list of course.. after all, The Internet is for Porn...)
We are considering other things like deploying into Azure, that might be fun.
Part 1 : Integrating a Silverlight application with Facebook
In this first part of the series on integrating a Silverlight application with Facebook, I will discuss how to register a Facebook application. I will discuss the Facebook application settings, what they mean, specific settings for a Silverlight application, and how to debug a Silverlight application integrated with Facebook, since some of the Faceboook application settings can be used for this purpose.
My guide will assume you have a Facebook account, already know Microsoft .NET, and that you are familiar with Silverlight development. You may or may not already have a Silverlight application that you would like to build a Facebook application from, or you are just interested in learning how to build one. Whatever the case, hopefully you will learn more about what a Facebook application entails and how to being integrating your application with Facebook. While I will specifically address Silverlight integration with Facebook, some of the settings and solutions can be applied to building Flash application for Facebook as well. The issues addressed in this series will be applicable to any RIA.
The very first step in creating a Facebook application is to register the application. The URL for the Facebook Developers area is:
http://developers.facebook.com/
This URL displays a welcome page and offers various blogs and links to Facebook development resources. Of special note is the link on the right side of the page, 'Documentation Wiki' .On the page is the 'Building an app is easy, Start Now' button.
Clicking Start Now will bring you to the Get Started page as shown below.
Even though I will go over some of the Facebook application settings in my guide, the information on the Get Started page is an important read. It very briefly explains the settings, and generally gives you an idea of what you will need. It explains the need for your own web hosting provider, and knowledge of programming. PHP is a very popular web technology, the one which Facebook was written in, and it has many references to integrating PHP with Facebook but less references to other technologies.
Once you have thoroughly read the Get Started page, click on the "Go to Facebook Developer App" link to begin registering your first Facebook application. Immediately after clicking the link you will be greeted with the Facebook Developer 'Allow Access' prompt:
Click Allow to continue.
Now we are at the main developer landing page. Of primary note is the 'Set Up New Application' button shown below, but later under the 'My Applications' heading, your application(s) will be listed.
Click the 'Set Up New Application' button to continue. You will be prompted for the application name, and to accept Facebook terms. The application name will be displayed to your users and used on links to your application in Facebook. The application name will be displayed anywhere that Facebook refers to your application on menus and such. An example name would be the popular Facebook game 'Mafia Wars'. Certain terms like 'Face', 'FB', 'fb' or other words or phrases are prohibited by the Facebook Terms.
Once you have chosen your app's name and agreed to the terms, click on Save Changes.
If you're having trouble coming up with ideas, here is a list of ideas that users have written in with to help with your brainstorming:
- Sports
- Religion
- Parenting
- Fitness
After clicking Save Changes, you will be presented with the Application Settings page:
Down the left hand side is navigation to different settings pages for your Facebook app. We will use these later. Lets discuss the Basic settings first.
The Description is important, it is displayed on the Application Authorization web page that is presented to a user when they first attempt to access your application. The Application Authorization page ('Allow Access' page) that I am describing is similar to the page that I displayed earlier, having the 'Allow' or cancel buttons. The description should concisely explain what the application is and what it does.
The Icon image is displayed on the Facebook Applications toolbar that is shown at the bottom left of every Facebook user's browser window.
Clicking the change your icon link will bring up the icon upload page. I recommend uploading the icon in 16x16 dimensions, but if you upload an image that is larger it will automatically resize the image for you.
The Logo image is displayed on the Application Authorization page (Allow Access). It should be 75x75 but the system will resize the image for you if necessary.
The Developers section gives you the option of granting admin privledges to other Facebook users. The user must be your Friend in Facebook. Simply enter their name (as shown on their Facebook profile) to give them access.
The Developer Contact Email is used by Facebook staff in the event they need to contact you about your application.
The User Support Email Address (or URL) is used in several Facebook web pages, where the user is given the ability to contact the owners of the Facebook application. Some of these Facebook links are found on your application's Facebook page, which we will discuss later. The email address is not displayed to users but you can receive feedback, complaints, and questions from users.
Clicking on the right side navigation bar, select 'Authentication'
'Installable to' refers to the ability for your application to be installed as tabs on User pages and Public Facebook Pages.
The Post-Authorize Callback URL is POSTed to when a person authorizes your application. Facebook's servers will POST several fields back to this URL along with a signature. Facebook sends a number of POST parameters to your Post-Authorize Callback URL in the form of a POST request. The user authorizing your application will not be redirected to this URL (specify the Post-Authorize Redirect URL in your application's settings to configure the redirect). Facebook's servers send this request in the background. A description of the fields posted is here: http://wiki.developers.facebook.com/index.php/Post-Authorize_Callback_URL
The Post-Remove Callback URL is POSTed to when a person removes your application from their applications on their "My Applications" page. Facebook's servers will POST several fields back to this URL along with a signature. A description of the fields posted is here: http://wiki.developers.facebook.com/index.php/Post-Remove_URL
In the beginning, most developers will not need to use these URLs. Later, you will probably find some uses for them. They are optional and not required for a Facebook application to function.
Clicking on the Canvas navigation pane displays the following settings:
The Canvas Page is not terribly important, except maybe for SEO / search engine ranking. Note that if your Canvas Page URL is already taken by another application, you will see the following message:
If you see this message you will have to click your browser's back button, or on Application Settings and then Canvas navigation pane to get back and try another url name.
The Canvas Callback URL is the most important setting for your application. This is the URL that Facebook will use for the IFrame. For the purposes of this guide, we will be using an IFrame for the Render Method. If we were not using IFrame, this would be the page that the Facebook server loads the FBML from.
For the purposes of debugging your Silverlight application on Facebook, is is possible to set the Canvas Callback URL to 'http://127.0.0.1' and attach to the process. Note that you will attach to the iexplore.exe of the IFrame process, NOT the iexplore.exe process that has the same title as the web browser. The process you want to attach to will have no title and be of type 'Silverlight'.
The Bookmark URL and Post-Authorize Redirect URLs are where the browser will be redirected for the respective actions. You can find possible uses for these, but for our purposes we will leave these blank.
Render Method should be set to IFrame. When a user goes to your application, Facebook splits the screen into two IFrames. The bottom IFrame is pointed to the Canvas Callback URL along with several querystring parameters. For a Silverlight application, the IFrame (along with the querystring) will only load one time, the initial page load. Whatever you enter as your Canvas Callback URL will be used for the bottom IFrame, and whatever your website displays will be shown in all its glory within it's own IFrame browser window. With this render method you can output whatever HTML, CSS, Javascript, Java, Flash, or Silverlight however you would like, just like a normal web application. If you use IFrame you do not need to be concerned with FBML.
The rest of the settings are explained well, they may affect how your web pages display within the IFrame.
Clicking on the Advanced pane on the left navigation, you will see these settings:
For any client side technology like Silverlight or Flash, you will want to select 'Desktop' as the application type. The reasons for this setting will be explained in my next tutorials on building Silverlight Applications for Facebook.
You will want to set Sandbox Mode to be enabled. This will prevent anyone except the application developers (as set in your Basic settings) from accessing your Facebook application. While the Sandbox Mode is turned on, when anyone else tries to access your application's Facebook URL, they will receive a 'Page Not Found' message.
Once your settings are configured, you can navigate directly to your new application via the Canvas Page URL. For my example, I would direct my browser to http://apps.facebook.com/tictactoe
The next tutorials in this series on Integrating a Silverlight application with Facebook will discuss handling Facebook authentication and consuming the Facebook API as it relates to a Silverlight application.
Official Silverlight 3 release - download links / urls
Silverlight 3 was released by Microsoft yesterday and here are the download links of the development tools, for future reference:
Expression Blend 3 with Sketchflow
Silverlight 3 Software Development Kit (SDK)
Silverlight 3 Tools for Visual Studio 2008 SP 1
these links go directly to the download page, so understand that they may become outdated after a few months.
For the actual Silverlight runtime, you can download the latest version here: http://www.microsoft.com/silverlight/resources/install.aspx
Open source Silverlight 3D charts and graphs controls
I have experience integrating the VISIfire Silverlight controls into a web site, and they kick @ss.... besides, they are open source.
http://www.visifire.com/silverlight_charts_gallery.php