Silverlight - Integrasi Browser

Dalam bab ini, kita akan melihat bagaimana aplikasi Silverlight dapat bekerja bersama dengan halaman web menggunakan dukungan integrasi browser.

Kami dapat menjelajahi integrasi Silverlight dengan browser dalam dua cara berikut -

Kode JavaScript yang berjalan di browser dapat mengakses fitur dalam aplikasi Silverlight Anda.
Silverlight memiliki kemampuan untuk menyediakan pembungkus JavaScript untuk objek. Anda.NET kode yang berjalan di dalam plugin Silverlight memiliki akses ke DOM HTML dan fitur skrip browser lainnya karena Silverlight .NET pembungkus untuk objek JavaScript.

Kita akan melihat bagaimana aplikasi perangkat lunak berbasis browser dapat menyimpan informasi secara terus-menerus pada klien.

Silverlight dan HTML

Sejauh menyangkut dunia HTML, konten Silverlight hanyalah satu elemen. Ini berlaku untuk tata letak. Keseluruhan plugin Silverlight dan semua kontennya tampak seperti satu elemen objek.

Anda harus ingat bahwa -

Silverlight bukanlah pengganti HTML, ia dirancang untuk melengkapinya. Oleh karena itu, kemampuan untuk mengakses elemen lain di DOM itu penting.
Ini memungkinkan Anda untuk menggunakan Silverlight jika sesuai.
Pada halaman, yang sebagian besar menggunakan HTML, integrasi Silverlight dengan dunia browser lebih dari sekadar elemen DOM, yang tunduk pada Tata Letak HTML normal.

Mengakses DOM

Konten Silverlight harus dapat berpartisipasi penuh di halaman web. Oleh karena itu, ia harus dapat mengakses DOM HTML. Silverlight menyediakan objek jembatan yang membungkus objek skrip browser sebagai objek Dot Net, fileScript objectkelas dalam sistem. Namespace browser menyediakan metode yang memungkinkan Anda membaca dan menulis properti dan menyediakan fungsi pada objek skrip browser.

Anda memerlukan cara untuk mendapatkan objek Script sejak awal. Silverlight menyediakan kelas halaman HTML yang memberi Anda akses ke berbagai halaman fitur seperti objek Script.

Mari kita lihat contoh sederhana di mana kita memiliki skrip sederhana yang membuat objek dengan beberapa atribut. Beberapa di antaranya hanyalah nilai dan beberapa di antaranya adalah fungsi.

<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>

Diberikan di bawah ini adalah kode XAML di mana tombol ditambahkan.

<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>

Berikut adalah implementasi klik tombol di mana sebuah skrip dipanggil yang dibuat dalam file 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"); 
      } 
   } 
}

Diberikan di bawah ini adalah file HTML lengkap.

<!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>

Ketika kode di atas dikompilasi dan dijalankan, Anda akan melihat semua nilai di jendela keluaran, yang diambil dari file HTML.