Learning Silverlight: Hosting Silverlight Content
One of my latest quests is to learn more about Silverlight.
One of the first things I wanted to figure out is how, if I’m going to be developing Silverlight apps, can I publish them on my site so I can share them. So far I’ve found three ways to do it. For purposes of this demo, I created a very simple silverlight app that just has a single button. Each time you click the button, the text toggles between “Click Me” and “Reset”.
Embedding Silverlight Content in an HTML page
Since I plan on posting a series of Silverlight projects as I learn more about what can be done with it, I thought one way to show them was to give each one it’s own html page. This involves using the object element and setting its source property to point to the .xap file that’s generated when you compile your silverlight app.
Here’s what the html code looks like (my .xap file is called Hello.xap and it lives in the same directory as the web page):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Arachnophilia 3.9">
<meta name="description" content="Embedding Silverlight in HTML.">
<meta name="keywords" content="Silverlight, HTML">
<title>Embedding Silverlight in HTML:</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" ||
errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application "
+ appSource + "\n";
errMsg += "Code: " + iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition +
" \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
</head>
<body>
<h2>Embedding Silverlight in HTML:</h2>
<div id="silverlightControlHost">
<object width="100%" height="100%"
type="application/x-silverlight-2"
data="data:application/x-silverlight-2," >
<param name="source" value="Hello.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156"
style="text-decoration: none;">
<img
src="http://go.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight"
style="border-style: none"/>
</a>
</object>
<iframe id="_sl_historyFrame"
style='visibility:hidden;height:0px;width:0px;border:0px'>
</iframe>
</div>
</body>
</html>
You can view this page with the embedded app here: Hello
There’s alot to more to learn before this is ready for a production deployment, but it gets the job done for now. Here are some resources for learning more:
- How to Add Silverlight to a Web Page
- Sizing the Silverlight Plugin
- Properties of the Silverlight HTML Object
- Silverlight Installation Experience White Paper
Embedding Silverlight Content in a Wordpress Blog
Thanks to people sharing their code, this one is easy. There’s a plugin for WordPress that allows you to embed your application in a blog post very easily. You can get the plug in Here. Thanks to Tim Heuer for this great plugin.
Embedding the app in this blog post is this easy (enclose this in brackets):
silverlight: http://www.inveigledsoftware.com/wp-content/files/silverlight/Hello.xap
Here’s the result:
Embedding Silverlight Content Using the Silverlight Streaming Service
I haven’t uploaded anything to the Silverlight Streaming Service but it’s currently free (and may remain so if you don’t mind some advertising).
Embedding content deployed to the streaming service involves using an iframe like so:
<iframe src="http://silverlight.services.live.com/invoke/32/SlLogo/iframe.html"
frameborder="0" width="258" height="100" scrolling="no" ></iframe>
This ends up looking like this:
frameborder="0" width="258" height="100" scrolling="no" >
Leave a Reply