Silverlight 2. Интеграция с HTML и JavaScript

В начале хотелось бы поделиться интересной новостью. Мы при поддержке креативных дизайнеров из самарского Турбомилка запустили альфа-версию Сообщества пользователей Silverlight — сайт Сильверлайтер.

Кстати, Сильверлайтер — это не только участник сообщества, но и это замечательное существо с газовым свечением на картинке :)

Ну, а теперь, собственно, перейдём к самогй статье.
Здравствуйте дорогие читатели. Меня зовут Сергей Пугачёв. Я уже достаточно долгое время являюсь Silverlight разработчиком и активно пропагандирую данную технологию, поэтому меня часто спрашивают о том, как реализовать ту или иную возможность или функциональность. Данная статья является своего рода ответом на эти часто задаваемые вопросы. Это первая часть, она посвящена вопросам интеграции с HTML и JavaScript.


Однако начнём с небольшого маркетингового вступления.

В последнее время технология Microsoft Silverlight у всех на слуху. На форумах и в блогах живо обсуждаются различные возможности второй версии (Silverlight 2), вышедшей 14 октября 2008 года. Многие уже начали писать Silverlight приложения, а кто-то собирается начать разработку решений с использованием технологии Silverlight в самое ближайшее время. Спектр возможного применения данной технологии огромен. Тут и интернет телевещание, развлекательные и образовательные порталы. На мой взгляд, в скором будущем будут появляться и активно развиваться полноценные корпоративные (Line of Business, Enterprise, CRM и ERP) Silverlight приложения. Причём подавляющему большинству .NET разработчиков, с которыми я общался, технология Silverlight нравится. И это внушает определённый оптимизм! Как говорится, попробуйте и Вы.

Если Вы ещё не знакомы с технологией Silverlight, я рекомендую Вам сначала прочитать водные статьи и посмотреть скринкасты, которые Вы можете найти на сайтах http://www.silverlighter.ru и http://techdays.ru/. А потом переходить к чтению данной статьи.

Ну, что, дорогие читатели, не подумали ли вы к этому месту о том, что ХВАТИТ уже этого МАРКЕТИНГА! Да, действительно, для нас, для, разработчиков главное программы, а не маркетинговые заявления. Обещаю, на этом месте весь маркетинг заканчивается и начинается то, что мы с Вами, любим, а именно КОД.


Итак, вот какие темы я бы хотел осветить в первой части статьи:

• Чтение параметров инициализации
• Доступ к HTML DOM (Document Object Model)
• Вызов JavaScript функций из Silverlight
• Вызов Silverlight функций из JavaScript

Создание проекта Silverlight приложения

Давайте создадим новое Silverlight приложение в Visual Studio 2008 SP1 c установленными Silverlight Tools for Visual Studio. Для этого выберем File->New->Project->Silverlight->Silverlight Application. Назовём приложение MySilverlightApplication и нажмём кнопку OK. В диалоге Add Silverlight Application оставим значения по умолчанию. Нажмём кнопку OK и увидим в Visual Studio два новых проекта. Собственно Silverlight приложение и ASP.NET приложение для хостинга Silverlight приложения. Ну, это Вы, наверное, уже и так знаете.

Чтение параметров инициализации

Сейчас мы сделаем следующее. Мы зададим на страницах MySilverlightApplicationTestPage.html и MySilverlightApplicationTestPage.aspx параметры инициализации для Silverlight плагина. Прочитав параметры инициализации Silverlight приложение выберет, какую XAML страницу сделать стартовой и соответственно показывать пользователю при загрузке: создаваемую по умолчанию Page.xaml или созданную нами NextPage.xaml.

Для этого добавим в Silverlight приложение новую страницу. Правым кликом по названию проекта, выберем Add->New Item-> Silverlight User Control. Назовём элемент управления NextPage.xaml. И нажмём кнопку OK.

Далее изменим цвет фона страницы NextPage на красный, для того, чтобы во время выполнения определить загруженную страницу, ведь фон страницы Page.xaml останется белым. Установим свойство Background элемента Grid (с именем LayoutRoot) в значение «Red».

Теперь откроем в ASP.NET проекте страницу MySilverlightApplicationTestPage.html и посмотрим на код внедрения Silverlight приложения:

<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2"
width="100%" height="100%">
      <param name="source" value="ClientBin/MySilverlightApplication.xap"/>
      <param name="onerror" value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="2.0.31005.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>

* This source code was highlighted with Source Code Highlighter.

Давайте добавим внутрь тэга object следующий тэг:

<param name="initParams" value="startPage=Page"/>

* This source code was highlighted with Source Code Highlighter.

Этот код задаёт параметр инициализации с именем «startPage», значение которого равно «Page». В данном случае параметр один, но мы можем написать через запятую несколько параметров.

Теперь откроем ASP.NET страницу MySilverlightApplicationTestPage.aspx. Код внедрения в неё Silverlight приложения отличается и выгладит следующим образом:

<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/MySilverlightApplication.xap"
MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />

* This source code was highlighted with Source Code Highlighter.

Изменим его на данный код:

<asp:Silverlight ID="Xaml1" runat="server" 
Source="~/ClientBin/MySilverlightApplication.xap"
MinimumVersion="2.0.31005.0" Width="100%" Height="100%"
InitParameters="startPage=Page"/>

* This source code was highlighted with Source Code Highlighter.

Сделанные изменения налицо. Свойство InitParameters добавлено.

Мы использовали два эквивалентных с точки зрения Silverlight приложения способа задания параметров инициализации: для тега object и для серверного элемента управления asp:Silverlight.

Теперь нам надо получить в самом Silverlight приложении параметры инициализации. Для этого откроем C# код страницы App.xaml и заменим код функции Application_Startup на следующий:

private void Application_Startup(object sender, StartupEventArgs e)
{
  string startPage = e.InitParams["startPage"];
  if (startPage != null && startPage.Equals("Page"))
  {
    this.RootVisual = new Page();
  }
  else
  {
    this.RootVisual = new NextPage();
  }
}

* This source code was highlighted with Source Code Highlighter.

Свойство StartupEventArgs.InitParams имеет тип IDictionary<string, string>. И мы можем получить все заданные параметры инициализации из данного словаря. В нашем случае, если заданный нами параметр startPage равняется «Page» главным визуальным элементом приложения становится элемент управления, описанный в файле Page.xaml. При любом другом значении главным визуальным элементом управления приложения будет страница NextPage.xaml.

Давайте запустим программу и посмотрим на результат. Поменяйте значение параметра «startPage» и посмотрите что получится. Не забудьте, потом вернуть значение параметра обратно. Так как мы будем использовать данное Silverlight приложение и для дальнейших примеров.

Доступ к HTML DOM (Document Object Model)

В первом примере изменения проводились на двух (HTML и ASP.NET) страницах. Далее в статье для отладки Silverlight приложений будет использоваться только страница – MySilverlightApplicationTestPage.aspx и все изменения будут проводиться соответственно только на ней.

Для доступа к HTML документу страницы, на которой размещено Silverlight приложение используется объект HtmlPage.Document типа HtmlDocument. Также не забудьте подключить пространство имён System.Windows.Browser. Для этого в секцию usings C# файла Page.xaml.cs добавим:

using System.Windows.Browser

* This source code was highlighted with Source Code Highlighter.

Давайте теперь добавим на страницу Page.xaml кнопку, которая будет иметь имя «mainButton», и зададим событие нажатия на кнопку. Вот исходный код страницы:

<UserControl x:Class="MySilverlightApplication.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 Click="Button_Click" Content="Изменить цвет"
    Width="250" Height="50" x:Name="mainButton"/>
  </Grid>
</UserControl>

* This source code was highlighted with Source Code Highlighter.

Откроем страницу MySilverlightApplicationTestPage.aspx в ASP.NET приложении и посмотри на код внедрения Silverlight плагина.

<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/MySilverlightApplication.xap"
MinimumVersion="2.0.31005.0" Width="100%" Height="100%"
InitParameters="startPage=Page"/>
</div>

* This source code was highlighted with Source Code Highlighter.

Тег asp:Silverlight находится внутри тега тега div. Зададим для div имя «myDIV» и изменим стиль.

<div id="myDIV" style="background:blue;width:100%;height:100%">

* This source code was highlighted with Source Code Highlighter.

Также установим для Silverlight плагина ширину, Width=«50%», а не 100%.

<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/MySilverlightApplication.xap"
MinimumVersion="2.0.31005.0" Width="50%" Height="100%"
InitParameters="startPage=Page"/>

* This source code was highlighted with Source Code Highlighter.

Теперь напишем код обработчика нажатия на кнопку:

private void Button_Click(object sender, RoutedEventArgs e)
{
  HtmlDocument doc = HtmlPage.Document;
  HtmlElement div = doc.GetElementById("myDIV");
  div.SetStyleAttribute("background", "green");
}

* This source code was highlighted with Source Code Highlighter.

Данным кодом мы получаем HTML документ, находим элемент внутри HTML документа и задаём стиль для этого элемента. Таким образом, внутри Silverlight приложения мы имеем богатые возможности по изменению внешнего вида и содержимого HTML страницы.

Более того, мы можем обрабатывать события HTML страницы в нашем C# коде. Для этого в обработчик нажатия на кнопку, Button_Click добавим код:

div.AttachEvent("onclick", new EventHandler((o, x) =>
      {
        div.SetStyleAttribute("background", "yellow");
      }));

* This source code was highlighted with Source Code Highlighter.

Мы присоединяемся к событию клика по свободному пространству элемента div. При таком клике цвет фона меняется на жёлтый. Здесь для обработчика события используется лямбда выражение. Вот полный код обработчика нажатия кнопки:

private void Button_Click(object sender, RoutedEventArgs e)
{
  HtmlDocument doc = HtmlPage.Document;
  HtmlElement div = doc.GetElementById("myDIV");
  div.AttachEvent("onclick", new EventHandler((o, x) =>
  {
    div.SetStyleAttribute("background", "yellow");
  }));
  div.SetStyleAttribute("background", "green");
}

* This source code was highlighted with Source Code Highlighter.

Так как это тестовый пример, то при каждом нажатии на кнопку происходит подписывание на событие. В реальных приложениях так делать нельзя и надо выносить данный код в раздел инициализации. Например, так:

public Page()
{
  InitializeComponent();
  HtmlDocument doc = HtmlPage.Document;
  HtmlElement div = doc.GetElementById("myDIV");
  div.AttachEvent("onclick", new EventHandler((o, x) =>
  {
    div.SetStyleAttribute("background", "yellow");
  }));
}
 
private void Button_Click(object sender, RoutedEventArgs e)
{
  HtmlDocument doc = HtmlPage.Document;
  HtmlElement div = doc.GetElementById("myDIV");
  div.SetStyleAttribute("background", "green");
}

* This source code was highlighted with Source Code Highlighter.

Здесь мы в конструкторе страницы подписываемся на нужное нам событие.
Запустим данное приложение. Нажмём на кнопку. Синее пространство станет зелёным. Теперь нажмём на зелёное пространство, и оно станет жёлтым.

Хочется отметить, что можно запретить доступ к HTML странице из Silverlight приложения. Для этого надо установить свойство HtmlAccess=«Disabled» у серверного элемента управления asp:Silverlight. Разрешён ли доступ к HTML странице и скриптам можно проверить из Silverlight приложения благодаря свойству HtmlPage.IsEnabled.

Вызов JavaScript функций из Silverlight

Теперь давайте поговорим про интеграцию с JavaScript. Для того, чтобы вызвать JavaScript функцию из Silverlight достаточно написать следующий код:

HtmlPage.Window.Invoke("DisplayMessage","Привет из Silverlight!");

* This source code was highlighted with Source Code Highlighter.

Здесь мы вызываем JavaScript функцию DisplayMessage и передаём её в качестве параметра строку. Добавим этот код в обработчик события нажатия кнопки.

Теперь создадим данную JavaScript функцию на ASP.NET странице. Раздел head страницы будет выглядить так:

<head runat="server">
  <title>MySilverlightApplication</title>
<script type="text/javascript">
  function DisplayMessage(message) {
    alert(message);
  }
</script>
</head>

* This source code was highlighted with Source Code Highlighter.

После этого при нажатии на кнопку выполняется JavaScript функция. Которая отображает сообщение с заданным текстом. Текст сообщения передаётся в параметре. Запустим приложение и проверим его работу.

Вызов Silverlight функций из JavaScript

Теперь пришло время вызывать из JavaScript функции в нашем Silverlight приложении. Для этого установим аттрибут ScriptableType у типа Page в файле Page.xaml.cs.

[ScriptableType]
public partial class Page : UserControl

* This source code was highlighted with Source Code Highlighter.

Это позволит нам обращаться к специально отмеченным функциям данного обекта из JavaScript. Но сначала нам надо зарегистрировать объект класса Page как доступный для вызова. Для этого в конструктор Page() добавим следующий код:

HtmlPage.RegisterScriptableObject("silverlightApplication", this);

* This source code was highlighted with Source Code Highlighter.

Здесь мы задали имя («silverlightApplication») по которому мы сможем из JavaScript обращаться к .NET объекту.

Теперь внутри класса Page нам надо создать функцию, которую мы и будем вызывать из JavaScript. Вот код этой функции. Она имеет аттрибут ScriptableMember, что говорит о возможности её вызова из скриптов.

[ScriptableMember]
public void ChangeButtonContent(string text)
{
  mainButton.Content = text;
}

* This source code was highlighted with Source Code Highlighter.

Данная функция устанавливает текст у кнопки на Silverlight странице.

Далее представлен полный код класса Page:

[ScriptableType]
public partial class Page : UserControl
{
  public Page()
  {
    InitializeComponent();
    HtmlPage.RegisterScriptableObject("silverlightApplication", this);
    HtmlDocument doc = HtmlPage.Document;
    HtmlElement div = doc.GetElementById("myDIV");
    div.AttachEvent("onclick", new EventHandler((o, x) =>
    {
      div.SetStyleAttribute("background", "yellow");
    }));
  }
 
  private void Button_Click(object sender, RoutedEventArgs e)
  {
    HtmlDocument doc = HtmlPage.Document;
    HtmlElement div = doc.GetElementById("myDIV");
    div.SetStyleAttribute("background", "green");
    HtmlPage.Window.Invoke("DisplayMessage", "Привет из Silverlight!");
  }
 
  [ScriptableMember]
  public void ChangeButtonContent(string text)
  {
    mainButton.Content = text;
  }
}

* This source code was highlighted with Source Code Highlighter.

И файла Page.xaml:

<UserControl x:Class="MySilverlightApplication.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 Click="Button_Click"
    Content="Изменить цвет"
    Width="250" Height="50" x:Name="mainButton"/>
  </Grid>
</UserControl>

* This source code was highlighted with Source Code Highlighter.

Теперь изменим JavaScript функцию DisplayMessage так, чтобы она вызывала C# функцию ChangeButtonContent.

function DisplayMessage(message) {
  alert(message);
  silverLightControl = document.getElementById("Xaml1");
  silverLightControl.content.silverlightApplication.ChangeButtonContent(
  message);
}


* This source code was highlighted with Source Code Highlighter.

Мы получаем объект Silverlight плагина и вызываем функцию ChangeButtonContent, передавая ей тот же самый параметр, что мы передавали из C# кода в функцию DisplayMessage.

Полный код страницы MySilverlightApplicationTestPage.aspx находится ниже:

<%@ Page Language="C#" AutoEventWireup="true" %>
 
<%@ Register Assembly="System.Web.Silverlight"
Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
 
<!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" style="height:100%;">
<head runat="server">
  <title>MySilverlightApplication</title>
  <script type="text/javascript">
    function DisplayMessage(message) {
      alert(message);
      silverLightControl = document.getElementById("Xaml1");
      silverLightControl.content.silverlightApplication.ChangeButtonContent(
      message);
    }
  </script>
</head>
<body style="height:100%;margin:0;">
  <form id="form1" runat="server" style="height:100%;">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div id="myDIV" style="background:blue;width:100%;height:100%">
      <asp:Silverlight ID="Xaml1" runat="server"
      Source="~/ClientBin/MySilverlightApplication.xap"
      MinimumVersion="2.0.31005.0" Width="50%" Height="100%"
      InitParameters="startPage=Page"/>
    </div>
  </form>
</body>
</html>

* This source code was highlighted with Source Code Highlighter.

Запустите приложение и проверьте его работоспособность.


При нажатии на кнопку в Silverlight приложении меняется цвет фона у элемента div на HTML странице, а также происходит вызов JavaScript функции DisplayMessage, которая отображает сообщение. Данная JavaScript функция вызывает C# функцию ChangeButtonContent в классе Page. Функция ChangeButtonContent меняет текст на кнопке.

На этом первая часть статьи завершается. В следующих частях будут освещены другие актуальные вопросы разработки Silverlight приложений. Буду рад Вашим пожеланиям и комментариям.