Silverlight 技巧、窍门和最佳实践

　2008-10-26 11:49:37　来源：WEB开发网　　　

核心提示： 本栏目附有名为 RevolvingAuto 的示例应用程序，它展示了在此出现的一些最佳实践，Silverlight 技巧、窍门和最佳实践(4)，包括如何构建更好的安装体验，我将向您简要显示此源代码的关键部分，图 2安装 Silverlight 前的 RevolvingAutoDefault

本栏目附有名为 RevolvingAuto 的示例应用程序，它展示了在此出现的一些最佳实践，包括如何构建更好的安装体验。我将向您简要显示此源代码的关键部分。

RevolvingAuto 对于其安装体验是最值得注意的。图 2 显示了没有安装 Silverlight 的访问者所看到的主页。如果已安装 Silverlight，则“Get Microsoft Silverlight”（获得 Microsoft Silverlight）按钮之后是着色的。因为对 Silverlight.createObjectEx 的调用包含一个 inplaceInstallPrompt="true" 参数，所以用户安装 Silverlight 时不必离开网页。更可贵的是，主页包含完成安装后创建 Silverlight 控件的逻辑，因此不必再手动刷新。（此功能在 Internet Explorer® 中运行良好，因为它不必在安装 Silverlight 后重新启动。但是，它在需要重新启动的浏览器中无法发挥作用）。

图 2安装 Silverlight 前的 RevolvingAuto

Default.html 中有改善安装体验的 JavaScript（请参见图 3）。要创建 Silverlight 控件，大部分 Silverlight 应用程序都构造代码和标记，如下所示：

Silverlight 技巧、窍门和最佳实践 Figure3RevolvingAuto 应用程序—Default.html

<html > <head> 　　<title>Revolving Auto</title> 　　<script type="text/javascript" src="Silverlight.js"></script> 　　<script type="text/javascript" src="Default.html.js"></script> 　　<style> 　　　　.AgInstalled { 　　　　　　margin-left: auto; margin-right: auto; 　　　　　　width: 612px; height: 700px; text-align: left } 　　　　.AgNotInstalled { 　　　　　　margin-left: auto; margin-right: auto; 　　　　　　width: 612px; height: 700px; text-align: left; 　　　　　　background-image: url(Images/Install.jpg); 　　　　　　background-repeat: no-repeat; padding-top: 100px } 　　</style> </head> <body style="background-color: black; text-align: center"> 　　<div style="height: 40px"></div> 　　<div id="Container" class="AgInstalled"> 　　　　<div id="SilverlightPlugInHost" style="padding-left: 200px"> 　　　　</div> 　　</div> 　　<script type="text/javascript"> 　　　　var _id; 　　　　if (!Silverlight.isInstalled('1.0')) 　　　　{ 　　　　　　document.getElementById('Container').className = 　　　　　　　　'AgNotInstalled'; 　　　　　　_id = window.setTimeout('checkInstall()', 3000); 　　　　} 　　　　else 　　　　　　document.getElementById ('SilverlightPlugInHost') 　　　　　　　　.removeAttribute('style'); 　　　　　　　　createSilverlight(); 　　　　function checkInstall() 　　　　{ 　　　　　　if (Silverlight.isInstalled('1.0')) 　　　　　　{ 　　　　　　　　window.clearInterval(_id); 　　　　　　　　document.getElementById('Container') 　　　　　　　　　　.className = 'AgInstalled'; 　　　　　　　　document.getElementById ('SilverlightPlugInHost') 　　　　　　　　　　.removeAttribute('style'); 　　　　　　　　createSilverlight(); 　　　　　　} 　　　　} 　　</script> </body> </html> 　　 <div id="SilverlightPlugInHost"> 　<script type="text/javascript"> 　　createSilverlight(); 　</script> </div>