Главная » Silverlight » Взаимодействие кодов С# и JavaScript

0

В предыдущих примерах приложение Silverlight обращалось к браузеру для мани­пулирования элементами HTML. Один из недостатков этого способа состоит в том, что код приложения жестко привязан к странице HTML. При его создании необходи­мо заложить в код информацию об элементах текущей страницы и уникальных зна­чениях id. Как результат, после изменения страницы HTML код Silverlight становится неработоспособным.

Для решения этой проблемы необходимо запрограммировать взаимодействие между кодами, а не элементами. Например, приложение Silverlight может обновлять содержи­мое HTML, вызывая методы JavaScript, определенные на странице. Код JavaScript создает дополнительную прослойку между Silverlight и HTML, обеспечивая гибкость приложения. При использовании этого способа устраняется необходимость перекомпиляции приложе­ния Silverlight, потому что элементы HTML можно изменять, обновив методы JavaScript для учета изменений. Взаимодействие может выполняться и в обратном направлении. Например, можно создать код JavaScript, который вызывает методы Silverlight, написан­ные на С#. В следующих разделах подробно рассматриваются оба подхода.

Вызов сценария JavaScript из кода Silverlight

С помощью классов Silverlight, приведенных в пространстве имен System.Windows. Browser, можно вызывать функции JavaScript, объявленные в блоке сценариев. Этот способ взаимодействия позволяет коду Silverlight взаимодействовать со страницей HTML. Он особенно полезен, если уже существует страница с полным набором функ­ций JavaScript. Вместо дублирования кодов, манипулирующих элементами страницы, можно вызывать существующие функции.

Рассмотрим функцию changeParagraph, определенную в разделе <head> страницы HTML.

<script type="text/javascript"> function changeParagraph(newText) { var element = document.getElementByld("paragraph"); element.innerHTML = newText;

}

</script>

Для ее вызова в Silverlight нужно применить метод HtmlPage.Window.GetProperty () и передать ему имя функции. Метод возвратит объект типа ScriptObject, через кото­рый можно в любой момент запустить функцию, вызвав метод InvokeSelf ().

ScriptObject script = (ScriptObj ect)HtmlPage.Window.GetProperty ("changeParagraph");

При вызове метода InvokeSelf () ему нужно передать все параметры функции JavaScript. Функция changeParagraph () принимает один строковый параметр, поэтому метод InvokeSelf () можно вызвать так.

script.InvokeSelf("Новый текст абзаца.");

Вызов методов Silverlight из браузера

Код JavaScript может вызывать методы Silverlight, написанные на С#. Эта задача немного сложнее. Для ее решения необходимо выполнить ряд операций.

V

1.     Создайте в коде Silverlight открытый метод, предоставляющий информацию или средства, которые нужно использовать на странице HTML. Метод можно разме­стить в классе страницы или отдельном классе. Используйте простые типы дан­ных, такие как строки, булевы значения и числа, в противном случае вам при­дется сериализовать объекты данных для совместимости с типами JavaScript.

2.     Добавьте атрибут ScriptableMember в объявление метода, который планируете вызывать из JavaScript.

3.  Добавьте атрибут ScriptableType в объявление класса, содержащего метод.

4.     Чтобы предоставить сценарию доступ к методу Silverlight, вызовите метод Html­Page .RegisterScriptableObject().   ‘

После выполнения этих операций код JavaScript сможет вызывать методы Silverlight посредством элемента <object>, представляющего область содержимого Silverlight. Чтобы облегчить задачу, рекомендуется присвоить элементу <object> уникальное зна­чение id. Программа Visual Studio по умолчанию создает тестовую страницу и присваи­вает имя silverlightControlHost элементу <div>, содержащему элемент <object>, но не присваивает имя элементу <object>. Поэтому создайте тестовую страницу, в которой имя присвоено также элементу <object>.

<div id="silverlightControlHost"> cobject data="data:application/x-silverlight," type="application/x-silverlight-2-bl" width="4Q0" height="300" id="silverlightControl">

</object> <iframe

s tyle=’visibility:hidden;height:0;width:0;border:Opx’> </iframe>

</div>

Примечание. He забывайте, что модифицировать тестовую страницу изолированного приложения Silverlight нельзя, потому что она будет переопределена при компиляции проекта. Вместо этого создайте новую тестовую страницу, как описано в главе 1. При использовании решения на основе тестового сайта ASP.NET тестовую страницу HTML можно изменять. При использовании серверной тестовой страницы . aspx можно изменить идентификатор элемента управления Silverlight на стороне сервера. Он будет применен при создании элемента управления Silverlight на стороне клиента.

После присвоения имени элементу управления Silverlight, можно создавать мето­ды, доступные в сценариях. Рассмотрим пример, показанный на рис. 14.5. Область Silverlight (с градиентным фоном) содержит текстовый блок (слева). Под ним располо­жен абзац HTML. Когда пользователь щелкает на абзаце, запускается обработчик со­бытия JavaScript. Он вызывает метод, определенный в приложении Silverlight. Метод обновляет текстовый блок (справа).

Рис. 14.5. Вызов кода Silverlight из JavaScript

В примере используется приведенный ниже пользовательский класс страницы. Он содержит метод, доступный в сценариях и регистрируемый при первом создании страницы.

[ScriptableType()]

public partial class ScriptableSilverlight : UserControl {

public ScriptableSilverlight() f

InitializeComponent();

HtmlPage.RegisterScriptableObject("Page", this);

}

[ScriptableMember()]

public void ChangeText(string newText) {

lbl.Text = newText;

)

}

При регистрации типа, доступного в сценариях, нужно задать имя объекта Java­Script и передать ссылку на объект. В данном примере экземпляр класса Scriptable­Silverlight зарегистрирован с именем Page. Регистрация вынуждает Silverlight создать свойство Раде в элементе управления. Чтобы вызвать метод, код JavaScript должен по­лучить элемент управления Silverlight, извлечь его содержимое и вызвать его метод Раде.ChangeText().

Ниже приведена функция JavaScript, выполняющая эти операции.

<script type="text/javascript">

function updateSilverlightText () {

var control = document.getElementByld("silverlightControl"); control.content.Page.ChangeText(

"Обновленный текстовый блок Silverlight после щелчка.");

}

</script> ?

Запустить функцию JavaScript можно в любой момент времени. Приведенный ниже код запускает ее при щелчке на абзаце.

<р onclick="updateSilverlightText()"> Щелкните здесь, чтобы изменить<Ьг /> текстовый блок Silverlight.</р>

Щелчок на абзаце запускает функцию updateSilverlightText (), которая вызывает метод ChangeText (), определенный в классе ScriptableSilverlight.

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии