Silverlight - การรวมเบราว์เซอร์

ในบทนี้เราจะมาดูกันว่าแอปพลิเคชัน Silverlight สามารถทำงานร่วมกับเว็บเพจโดยใช้การสนับสนุนการรวมเบราว์เซอร์ได้อย่างไร

เราสามารถสำรวจการรวม Silverlight กับเบราว์เซอร์ได้สองวิธีต่อไปนี้ -

โค้ด JavaScript ที่ทำงานในเบราว์เซอร์สามารถเข้าถึงคุณสมบัติภายในแอปพลิเคชัน Silverlight ของคุณ
Silverlight มีความสามารถในการจัดเตรียม JavaScript wrapper สำหรับออบเจ็กต์ ของคุณ.NET โค้ดที่ทำงานภายในปลั๊กอิน Silverlight สามารถเข้าถึง HTML DOM และคุณลักษณะการเขียนสคริปต์ของเบราว์เซอร์อื่น ๆ เนื่องจาก Silverlight .NET Wrapper สำหรับวัตถุ JavaScript

เราจะดูว่าแอปพลิเคชันซอฟต์แวร์ที่ใช้เบราว์เซอร์สามารถจัดเก็บข้อมูลบนไคลเอนต์ได้อย่างไร

Silverlight และ HTML

เท่าที่เกี่ยวข้องกับโลกของ HTML เนื้อหา Silverlight เป็นเพียงองค์ประกอบเดียว นี่เป็นจริงสำหรับการจัดวาง ปลั๊กอิน Silverlight ทั้งหมดและเนื้อหาทั้งหมดดูเหมือนเป็นเพียงองค์ประกอบออบเจ็กต์เดียว

คุณต้องจำไว้ว่า -

Silverlight ไม่ได้มาแทนที่ HTML แต่ได้รับการออกแบบมาเพื่อเสริม ดังนั้นความสามารถในการเข้าถึงเพียงองค์ประกอบอื่นใน DOM จึงมีความสำคัญ
ช่วยให้คุณใช้ Silverlight ได้ตามความเหมาะสม
ในหน้าเว็บที่ใช้ HTML เป็นหลักการผสานรวม Silverlight กับโลกของเบราว์เซอร์นั้นเป็นมากกว่าเพียงองค์ประกอบ DOM ที่มีอยู่ภายใต้เค้าโครง HTML ปกติ

การเข้าถึง DOM

เนื้อหา Silverlight ต้องสามารถเข้าร่วมได้อย่างสมบูรณ์ในหน้าเว็บ ดังนั้นจึงควรเข้าถึง HTML DOM Silverlight จัดเตรียมอ็อบเจ็กต์บริดจ์ที่ห่ออ็อบเจ็กต์สคริปต์ของเบราว์เซอร์เป็นอ็อบเจ็กต์ Dot Net ซึ่งเป็นไฟล์Script objectคลาสในระบบ เนมสเปซของเบราว์เซอร์มีวิธีการที่ช่วยให้คุณอ่านและเขียนคุณสมบัติและอุทิศฟังก์ชันบนวัตถุสคริปต์ของเบราว์เซอร์

คุณต้องการวิธีที่จะได้รับวัตถุสคริปต์ในตอนแรก Silverlight จัดเตรียมคลาสเพจ HTML ที่ให้คุณเข้าถึงเพจต่างๆของคุณสมบัติเช่นอ็อบเจกต์สคริปต์

ให้เราดูตัวอย่างง่ายๆที่เรามีสคริปต์ง่ายๆที่สร้างวัตถุที่มีคุณลักษณะบางอย่าง บางส่วนเป็นเพียงค่านิยมและสองสามอย่างเป็นฟังก์ชัน

<script type = "text/javascript">  
   myJsObject = { 
      answer: 42, 
      message: "Hello, world", 
      modifyHeading: function(title) 
         { document.getElementById('heading').innerHTML = title; }, 
      performReallyComplexCalculation: function(x, y) { return x + y; } 
   }; 
     
</script>

ด้านล่างนี้คือรหัส XAML ที่มีการเพิ่มปุ่ม

<UserControl x:Class = "DomAccess.Page" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"  
   Width = "400" Height = "300"> 
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Button x:Name = "useDomButton" Content = "Use DOM" Width = "75" Height = "30" 
         Click = "useDomButton_Click" /> 
   </Grid>
	
</UserControl>

นี่คือการใช้งานการคลิกปุ่มซึ่งสคริปต์เรียกว่าซึ่งสร้างขึ้นในไฟล์ HTML

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes;
using System.Windows.Browser; 

using System.Diagnostics; 
 
namespace DomAccess { 

   public partial class Page : UserControl { 
	
      public Page() { 
         InitializeComponent(); 
      } 
   
      private void useDomButton_Click(object sender, RoutedEventArgs e) { 
         ScriptObject myJsObject = HtmlPage.Window.GetProperty("myJsObject") as ScriptObject;  
         string[] propertyNames = { "answer", "message", "modifyHeading", 
            "performReallyComplexCalculation" }; 
				
         foreach (string propertyName in propertyNames) { 
            object value = myJsObject.GetProperty(propertyName); 
            Debug.WriteLine("{0}: {1} ({2})", propertyName, value, value.GetType()); 
         }
			
         object result = myJsObject.Invoke("performReallyComplexCalculation", 11, 31);  
         HtmlElement h1 = HtmlPage.Document.GetElementById("heading"); 
         h1.SetProperty("innerHTML", "Text from C# (without JavaScript's help)"); 
         h1.SetStyleAttribute("height", "200px"); 
      } 
   } 
}

ด้านล่างเป็นไฟล์ HTML ที่สมบูรณ์

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
<html xmlns = "http://www.w3.org/1999/xhtml" > 
   <!-- saved from url = (0014)about:internet --> 
	
   <head> 
      <title>DomAccess</title>  
		
      <script type = "text/javascript">  
		
         myJsObject = { 
            answer: 42, 
            message: "Hello, world", 
            modifyHeading: function(title) { 
               document.getElementById('heading').innerHTML = title; }, 
            performReallyComplexCalculation: function(x, y) { return x + y; } 
         }; 
     
      </script> 
     
      <style type = "text/css"> 
		
         html, body { 
            height: 100%; 
            overflow: auto; 
         } 
			
         body { 
            padding: 0; 
            margin: 0; 
         } 
			
         #silverlightControlHost { 
            height: 100%; 
         }
			
      </style>
		
      <script type = "text/javascript" src = "Silverlight.js"></script> 
		
      <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; 
             
            var errMsg = "Unhandled Error in Silverlight 2 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> 
	
      <!-- Runtime errors from Silverlight will be displayed here. 
         This will contain debugging information and should be removed or hidden when 
         debugging is completed -->
			
      <div id = 'errorLocation' style = "font-size: small;color: Gray;"></div> 
		
      <h1 id = 'heading'></h1>
		
      <div id = "silverlightControlHost"> 
		
         <object data = "data:application/x-silverlight-2," 
            type = "application/x-silverlight-2" width = "100%" height = "100%"> 
				
            <param name = "source" value = "ClientBin/DomAccess.xap"/> 
            <param name = "onerror" value = "onSilverlightError" /> 
            <param name = "background" value = "white" /> 
            <param name = "minRuntimeVersion" value = "2.0.30923.0" /> 
            <param name = "autoUpgrade" value = "true" /> 
				
            <a href = "http://go.microsoft.com/fwlink/?LinkID=124807" 
               style = "text-decoration: none;"> 
               <img src = "http://go.microsoft.com/fwlink/?LinkId=108181" 
               alt = "Get Microsoft Silverlight" style = "border-style: none"/> 
            </a> 
				
         </object>
			
         <iframe style = 'visibility:hidden;height:0;width:0;border:0px'></iframe> 
			
      </div> 
		
   </body> 
	
</html>

เมื่อโค้ดด้านบนถูกคอมไพล์และดำเนินการคุณจะเห็นค่าทั้งหมดในหน้าต่างเอาต์พุตซึ่งดึงมาจากไฟล์ HTML