Developer in Beta

Silverlight In Arena

I recently discovered that Silverlight is not dependant on the .NET framework for hosting. This means that it's not dependant on any particular version of the .NET framework, either. Therefore, I thought that I might be able to host it inside Arena, a .NET 2.0 application, and it seems to work.

I have a more complete document, as well as the Silverlight host module I mention in this post up for download.
Alternatively, if you cannot access the download on the Arena Community, download it here.

To start using Silverlight with Arena, you will need the tools listed on this page. Note that Expression Blend is optional, and I personally will not be using it. More on that later.

Most importantly, though, you will need Visual Studio 2008, Standard or above. If you do not have VS08, I would recommend upgrading if possible, as the 2008.2 Arena release will be using .NET 3.5 (which is only supported by VS08), and it has several features that are useful for the current version of Arena, such as Javascript Intellisense.

Once you have the Silverlight Tools installed, open up your Arena solution. Add a new Project, and note that there are some new Project Templates installed:

Don't be alarmed by the .NET 3.5 option, Silverlight is actually a separate version of the .NET framework, and in fact only uses .NET on the client. It will still be compatible with all .NET 2.0 sites.

I recommend you name your project with the following naming convention:
ArenaWeb.Silverlight.Custom.<OrgId>.<AppName>

At this point, you should have the following dialog box:

You do not want a test page to reference the application, so always uncheck that. Instead, you'll be integrating it into a module.

Go ahead and build the Silverlight Application, and notice that it creates a "ClientBin" folder in the Arena project:

Also, note the XAML editor:

It is not a WYSIWYG editor. Instead, it is a text editor (with Intellisense) and a live preview. If you, like me, don't want to shell out more money to get Expression Blend, this is an adequate editor. However, if you use the ASPX designer extensively, and do not like using markup, you may want to invest in Blend.

This isn't a XAML tutorial, but go ahead and put this code inside the Grid:

<TextBlock>Hello World</TextBlock>

At this point, you have a Silverlight Application project linked to Arena. Time to get it inside a page. I created a module to do this, and it is in the download at the top of this post. Using it is as simple as configuring a few module settings:

The Height and Width properties are required, as without them, the Silverlight control will not display correctly in Arena's layout. The XAP file property is a little more difficult to explain. Basically, a XAP is for Silverlight what a JAR is for Java. At runtime, the XAP file is downloaded to the user's computer and executed. By default, this file is ClientBin/<ProjectName>.xap.

If using a module won't work, then you'll need the following code to host a Silverlight control inside a module:

   1:  <script type="text/javascript">

   2:          function onSilverlightError(sender, args) {

   3:          

   4:              var appSource = "";

   5:              if (sender != null && sender != 0) {

   6:                  appSource = sender.getHost().Source;

   7:              } 

   8:              var errorType = args.ErrorType;

   9:              var iErrorCode = args.ErrorCode;

  10:              

  11:              var errMsg = "Unhandled Error in Silverlight 2 Application " +  appSource + "\n" ;

  12:   

  13:              errMsg += "Code: "+ iErrorCode + "    \n";

  14:              errMsg += "Category: " + errorType + "       \n";

  15:              errMsg += "Message: " + args.ErrorMessage + "     \n";

  16:   

  17:              if (errorType == "ParserError")

  18:              {

  19:                  errMsg += "File: " + args.xamlFile + "     \n";

  20:                  errMsg += "Line: " + args.lineNumber + "     \n";

  21:                  errMsg += "Position: " + args.charPosition + "     \n";

  22:              }

  23:              else if (errorType == "RuntimeError")

  24:              {           

  25:                  if (args.lineNumber != 0)

  26:                  {

  27:                      errMsg += "Line: " + args.lineNumber + "     \n";

  28:                      errMsg += "Position: " +  args.charPosition + "     \n";

  29:                  }

  30:                  errMsg += "MethodName: " + args.methodName + "     \n";

  31:              }

  32:   

  33:              throw new Error(errMsg);

  34:          }

  35:      </script>

  36:      <!-- Runtime errors from Silverlight will be displayed here.

  37:      This will contain debugging information and should be removed or hidden when debugging is completed -->

  38:  <div id='errorLocation' style="font-size: small;color: Gray;"></div>

  39:   

  40:  <div id="silverlightControlHost">

  41:          <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width='[WIDTH]' height='[HEIGHT]'>

  42:              <param name="source" value='[XAP LOCATION]'/>

  43:              <param name="onerror" value="onSilverlightError" />

  44:              <param name="background" value="white" />

  45:              <param name="InitParameters" value='[INIT PARAMS]' />

  46:              

  47:              <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">

  48:                   <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>

  49:              </a>

  50:          </object>

  51:          <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>

  52:  </div>

Replace the[PLACEHOLDER]s with proper values, and it should work.

In conclusion, I would highly recommend using Silverlight, and I hope these eases any concerns you may have had over using it in Arena. If you're interested in using Silverlight, I recommend again that you download the package I have created:

Download
Mirror