网站导航网学 原创论文 原创专题 网站设计 最新系统 原创论文 论文降重 发表论文 论文发表 UI设计定制 论文答辩PPT格式排版 期刊发表 论文专题
返回网学首页
网学原创论文
最新论文 推荐专题 热门论文 论文专题
当前位置: 网学 > 设计资源 > Silverlight > 正文

JavaScript使用createObject创建Silverlight对象

论文降重修改服务、格式排版等 获取论文 论文降重及排版 论文发表 相关服务

在我们正常创建的silverlight Application项目之后,会在相应的web文件夹中生成两个名称相同但扩展名分别为aspx和html和页面。

其中的aspx页面是我们所熟悉的控件声明方式的布局页,形如:    

  1. <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
  2. <div  style="height:100%;"> 
  3.             <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/**.xap"  
  4.                  MinimumVersion="2.0.30523" Width="100%" Height="100%"/> 
  5. </div> 

在我之前所写的大部分silverlight文章中都是以这样的方面来声明并调用XAP文件的。但这种是采用控件声
明方式来实现,而silverlight本身是可以在多种语言(包括动态语言)平台上开发,并跨浏览器运行的。比如我们
就可以在html 中使用js来创建和操作silverlight对象(通过Silverlight.js提供),而相应的方法包括:

  1. Silverlight.createObject = function(source, parentElement, id, properties,  
  2.                                     events, initParams, userContext) 
  3.  
  4. Silverlight.createObjectEx = function(params) 

 而在介绍这两个方法之前,有必要先看一下这张图:

上图中的顺时针箭头方向表示当我们在HTM页面中采用JS方式创建SILVERLIGHT对象时,文件之间的相应
调用关系。
    当然本文为了简化这张图所调用的环节,直接将 CreateSilverlight.js 中的调用写在了htm中,将这不会影
响我们对上图的理解。
    好了,接下来先介绍上面提到的两个方法, 先说一下createObject,其函数声明如下(Silverlight.js文件中):

  1. Silverlight.createObject = function(source,  
  2.                                         parentElement,  
  3.                                         id,  
  4.                                         properties,  
  5.                                         events,  
  6.                                         initParams,  
  7.                                         userContext) 

该方面中的参数说明摘自silverlight sdk:

    source :对 XAML 内容的文件的引用,对应 Silverlight 插件的 Source 属性

parentElement: 对包含 createSilverlight 方法调用的 HTML 文件中块级元素的引用,在实例化后成为
Silverlight 插件的宿主元素(也就是想在哪个元素中声明silverlight object)

id : HTML DOM 中对 实例化的 Silverlight 插件的唯一标识

properties :Silverlight 插件实例化属性的集合 

  1. (width,height,background,isWindowless,frameRate, 
  2.                  inplaceInstallPrompt,version,ignoreBrowserVer,enableHtmlAccess) 

 events :能够在初始化时设置的 Silverlight 插件的事件集合
            包括onError:当生成silverlight运行时组件报错信息的处理;
                 onLoad:当组件的onLoad事件触发时绑定的JS方法;

initParams : 初始化参数允许你指定用户定义的参数值。这些参数值可以在运行时通过访问插件的InitParams
属性得到。
userContext: 作为参数传给 OnLoad 事件处理器的唯一标识,可以被同一页面中的多个 Silverlight 插件共享。
这个值唯一标识了哪个插件被加载,而无需检查 HTML DOM。更多信息请参见 使用 OnLoad 事件。

看着挺麻烦,但实际使用起来很简单,请看一下如下示例代码(对照上面的函数声明):    

  1. // 创建当前插件宿主元素(html)的引用. 
  2. var parentElement = document.getElementById("silverlightControlHost"); 
  3.      
  4. // 对当前实例定义唯一标识变量. 
  5. var conText = "context_2"
  6.      
  7. function createSilverlightByPluginID(pluginID) 
  8. {   
  9.     Silverlight.createObject( 
  10.         "ClientBin/Silverlight_Js.xap",                  // 源属性值. 
  11.         parentElement,                  // Div标签宿主引用. 
  12.         pluginID,                           // 唯一插件ID值, 当页面调用被设置. 
  13.         {                               // 插件属性,此处属性设置优先于xaml中的设置 
  14.             width:'400',                
  15.             height:'200',               
  16.             version:'2.0',              
  17.             isWindowless:'true'
  18.             background:'aliceblue'
  19.             framerate:'24',  
  20.             version:'2.0'                    
  21.         }, 
  22.         { 
  23.             onError:onSilverlightError, // 错误处理事件绑定. 
  24.             onLoad:onLoad               // 加载事件绑定,可用于多个实例. 
  25.         }, 
  26.         "pluginID=" + pluginID,        // 初始化参数,可设置为 null 或 {}   
  27.         conText);                      

这样我们就在"silverlightControlHost"元素中定义了一个silverlight object对象。

    当然上面JS代码中的onSilverlightError是在创建silverlight项目中就已声明好的,这里就不多做介绍了。需要
说明的是onLoad的事件绑定,因为在这里我们可以对silverlight object做进行一步的操作如下:

  1. /*参数说明 
  2. plugin  Object : 标识的 Silverlight plug-in 插件. 
  3. userContext  String :  对象上面所说的userContext. 
  4. sender  Object : 当前插件的根元素引用,如Canvas等  
  5. */ 
  6. function onLoad(plugin, userContext, sender) 
  7.     $get('message').innerHTML = plugin.id + " : " + userContext + " : " + sender.toString(); 
  8.      
  9.     // getHost()返回plug-in的引用 
  10.  
  11. // 任何UIElement派生对象将可使用GetHost方法来返回Silverlight插件的实例.  
  12.  
  13. var plugin = sender.getHost(); 
  14.  
  15.     // 获取初始化参数 InitParams 值,并使用逗号分割符分割该字符串. 
  16.  
  17. var params = plugin.initParams.split(","); 
  18.  
  19.     // 显示参数 
  20.  
  21. var msg = "Params: "
  22.     for (var i = 0; i < params.length; i++) 
  23.     { 
  24.         msg += params+ " "
  25.     } 
  26.  
  27.     alert(msg); 
  28.      
  29.     //只读属性 IsLoaded 是在 Onload 事件之前设置的,标识 Silverlight 插件是否已经加载。 
  30.     alert(plugin.IsLoaded); 
  31.      
  32.      
  33.     if (plugin.IsVersionSupported("2.0")) 
  34.     { 
  35.         alert("当前版本支持 2.0"); 
  36.     } 
  37.     else 
  38.     { 
  39.         alert("当前版本不支持 2.0"); 
  40.     } 

正如大家所看到了,我们可以通过getHost得到silverlight object属性中的一些重要信息,当然
还可以进行版本检测,插件对象加载是否完成等功能的开发。不如要说明的是silverlight 版本号是按
下面格式的字符串表示:
versionMajor.versionMinor.buildNumber.revisionNumber


看到这里,我们还需要再深入一步,看一下createObject方法体到底是执行了什么操作来进行对象
声明的。
请看如下代码段(摘自silverlight.js):   

  1. Silverlight.createObject = function(source,  
  2.                                     parentElement,  
  3.                                     id,  
  4.                                     properties,  
  5.                                     events,  
  6.                                     initParams,  
  7.                                     userContext) 
  8.     var slPluginHelper = new Object(); 
  9.     var slProperties = properties; 
  10.     var slEvents = events; 
  11.      
  12.     slPluginHelper.version = slProperties.version; 
  13.     slProperties.source = source;     
  14.     slPluginHelper.alt = slProperties.alt; 
  15.      
  16.     //rename properties to their tag property names 
  17.  
  18. if ( initParams ) 
  19.         slProperties.initParams = initParams; 
  20.     if ( slProperties.isWindowless && !slProperties.windowless) 
  21.         slProperties.windowless = slProperties.isWindowless; 
  22.     if ( slProperties.framerate && !slProperties.maxFramerate) 
  23.         slProperties.maxFramerate = slProperties.framerate; 
  24.     if ( id && !slProperties.id) 
  25.         slProperties.id = id; 
  26.      
  27.     // remove elements which are not to be added to the instantiation tag 
  28.  
  29. delete slProperties.ignoreBrowserVer; 
  30.     delete slProperties.inplaceInstallPrompt; 
  31.     delete slProperties.version; 
  32.     delete slProperties.isWindowless; 
  33.     delete slProperties.framerate; 
  34.     delete slProperties.data; 
  35.     delete slProperties.src; 
  36.     delete slProperties.alt; 
  37.  
  38.  
  39.     // detect that the correct version of Silverlight is installed, else display install 
  40.  
  41.     if (Silverlight.isInstalled(slPluginHelper.version)) 
  42.     { 
  43.         //move unknown events to the slProperties array 
  44.         for (var name in slEvents) 
  45.         { 
  46.             if ( slEvents[name]) 
  47.             { 
  48.                 if ( name == "onLoad" && typeof slEvents[name] == "function" && slEvents[name].length != 1 ) 
  49.                 { 
  50.                     var onLoadHandler = slEvents[name]; 
  51.                     slEvents[name]=function (sender) 
  52.                     {  
  53.                         return onLoadHandler(document.getElementById(id), userContext, sender) 
  54.                     }; 
  55.                 } 
  56.                 //绑定事件处理方法(有点C#事件绑定味道,呵呵) 
  57.                 var handlerName = Silverlight.__getHandlerName(slEvents[name]); 
  58.                 if ( handlerName != null ) 
  59.                 { 
  60.                     slProperties[name] = handlerName; 
  61.                     slEvents[name] = null
  62.                 } 
  63.                 else 
  64.                 { 
  65.                     throw "typeof events."+name+" must be 'function' or 'string'"
  66.                 } 
  67.             } 
  68.         } 
  69.         slPluginHTML = Silverlight.buildHTML(slProperties); 
  70.     } 
  71.     //The control could not be instantiated. Show the installation prompt 
  72.     else  
  73.     { 
  74.         slPluginHTML = Silverlight.buildPromptHTML(slPluginHelper); 
  75.     } 
  76.  
  77.     // insert or return the HTML 
  78.     if(parentElement) 
  79.     { 
  80.         parentElement.innerHTML = slPluginHTML; 
  81.     } 
  82.     else 
  83.     { 
  84.         return slPluginHTML; 
  85.     } 
  86.  
  87.  
  88. /////////////////////////////////////////////////////////////////////////////// 
  89. // 
  90. //  create HTML that instantiates the control 
  91. // 
  92. /////////////////////////////////////////////////////////////////////////////// 
  93. Silverlight.buildHTML = function( slProperties) 
  94.     var htmlBuilder = []; 
  95.  
  96.     htmlBuilder.push('<object type=\"application/x-silverlight\" data="data:application/x-silverlight,"'); 
  97.     if ( slProperties.id != null ) 
  98.     { 
  99.         htmlBuilder.push(' id="' + slProperties.id + '"'); 
  100.     } 
  101.     if ( slProperties.width != null ) 
  102.     { 
  103.         htmlBuilder.push(' width="' + slProperties.width+ '"'); 
  104.     } 
  105.     if ( slProperties.height != null ) 
  106.     { 
  107.         htmlBuilder.push(' height="' + slProperties.height + '"'); 
  108.     } 
  109.     htmlBuilder.push(' >'); 
  110.      
  111.     delete slProperties.id; 
  112.     delete slProperties.width; 
  113.     delete slProperties.height; 
  114.      
  115.     for (var name in slProperties) 
  116.     { 
  117.         if (slProperties[name]) 
  118.         { 
  119.             htmlBuilder.push('<param name="'+Silverlight.HtmlAttributeEncode(name)+'" value="'+Silverlight.HtmlAttributeEncode(slProperties[name])+'" />'); 
  120.         } 
  121.     } 
  122.     htmlBuilder.push('<\/object>'); 
  123.     return htmlBuilder.join(''); 

原来是用buildHTML方法将传入的属性按声明顺序组合成字符串并最终绑定到指定的parentElement.innerHTML
属性上,的确很简单,实在没什么可多说的了(当然里面的方法绑定略有不同,但与我们进行事件声明绑定有类似的语法
味道)。

    看到这里,还需要介绍一下另外一个创建对象的方法createObjectEx,其函数声明如下(silverlight.js中):
 

  1. Silverlight.createObjectEx = function(params) 
  2.     var parameters = params; 
  3.     var html = Silverlight.createObject(parameters.source, parameters.parentElement, parameters.id, parameters.properties, parameters.events, parameters.initParams, parameters.context); 
  4.     if (parameters.parentElement == null
  5.     { 
  6.         return html; 
  7.     } 

 说白了它就是对createObject方法的一次封装([size=-1]encapsulation),而这样做的目的就是为了让那些习惯使用JSON
格式的程序员有一个感觉很舒服的参数声明方法,其最终的使用格式如下:

  1. function createSilverlightExByPluginID(pluginID) 
  2. {   
  3.     Silverlight.createObjectEx({ 
  4.         source: 'ClientBin/Silverlight_Js.xap',          // Source property value. 
  5.         parentElement:parentElement2,    // 对包含 createSilverlight 方法调用的 HTML 文件中块级元素的引用, 
  6.  
  7. //  在实例化后成为 Silverlight 插件的宿主元素 
  8.         id:pluginID,                  // 唯一的插件ID值 
  9.         properties:{                    // 插件属性. 
  10.             width:'400',                
  11.             height:'200',               
  12.             inplaceInstallPrompt:false// 如果指定版本的 Silverlight 插件没有安装,inplaceInstallPrompt  
  13.  
  14. //  初始化参数决定是否出现安装对话框。它的默认值是 false,也就是说, 
  15.  
  16. //  如果 Silverlight.js 文件中版本检查返回 false,下面的 Silverlight  
  17.  
  18. //  标准安装对话框将会出现。 
  19.             background:'red',        // 插件背景色 
  20.             isWindowless:'true',     // 是否在windowless 模式下显示插件. 
  21.             framerate:'24',          // MaxFrameRate property value. 
  22.             version:'2.0'},          // Silverlight 版本. 
  23.         events:{ 
  24.             onError:onSilverlightError,   
  25.             onLoad:onLoad 
  26.             },               
  27.         initParams:"pluginID=" 
  28. + pluginID, // 初始化参数 
  29.         context:conText});                  

总体感觉与上面的createObject方法差别不是太大,但参数的可读性和层次性更清晰了。

     到这里这两个重要的方法介绍的差不多了,下面的这个DEMO分别演示了这两种方法的使用方法。并通过指定不同的初
始化initParams方法来实现调用不同的XAML的功能(里面的CS代码很简单,大家下载之后一看便知)。

设为首页 | 加入收藏 | 网学首页 | 原创论文 | 计算机原创
版权所有 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2020 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号 常年法律顾问:王律师