Технология Silverlight: Ajax и С# для обработки событий элемента управления Silverlight
Как уже было сказано, Silverlight работает на разметке в формате XML-документа, который хранится в файле с расширением xaml. Например,
Файл Proba. xaml:
<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas. /winfx/2006/xaml/presentation" xmlns:x="http://schemas. /winfx/2006/xaml" x:Name="Document">
<Rectangle Stroke="Black" Height="113" HorizontalAlignment="Left"
Margin="18,8,0,0" VerticalAlignment="Top" Width="184"
RadiusX="30" RadiusY="10" x:Name="but">
<Rectangle. Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF774040" Offset="1"/>
</LinearGradientBrush>
</Rectangle. Fill>
</Rectangle>
<TextBlock x:Name="MyText" Height="55" HorizontalAlignment="Left"
Margin="45,30,0,0" VerticalAlignment="Top" Width="119" Text="!!!"
TextWrapping="Wrap" Foreground="#FF37EF40" FontWeight="Bold"
FontSize="16"/>
</Canvas>
Загрузка этой разметки в браузер основана на использовании элемента Silverlight, который устанавливается отдельно. Далее этот элемент управляется с помощью JavaScript модели.
Пусть указанная xamp-разметка определяет кнопку, при нажатии на которую следует отослать запрос серверу на получение текущей даты. Этот запрос может производиться посредством технологии Ajax, которая, к примеру, обращается к ajax-сценарию GetDate. ashx, который возвращает текущую системную дату:
<%@ WebHandler Language="C#" Class="GetDate" %>
using System;
using System. Web;
public class GetDate : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context. Response. ContentType = "text/plain";
context. Response. Write(System. DateTime. Now. ToString());
}
public bool IsReusable {
get {
return false;
}
}
}
Обращение к этому сценарию производится из обычного aspx-документа. Размерем его разметку.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default. aspx. cs" Inherits="_Default" %>
<!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" >
<head runat="server">
<title>Страница загрузки Silverlight</title>
<!-- файл Silverlight. js содержит параметры загрузки элемента Silverlight и основные функции управления им -->
<script type="text/javascript" src="Silverlight. js"></script>
<script type="text/javascript">
// функция загрузки Silverlight-элемента
function createSilverlight()
{
Silverlight. createObject("Proba. xaml",
document. getElementById("SilverlightControlHost"),
"mySilverlightControl",
{
width:'300',
height:'300',
inplaceInstallPrompt:false,
background:'#D6D6D6',
isWindowless:'false',
framerate:'24',
version:'2.0'
},
{
onError:null,
onLoad:handleLoad,
},
null);
}
// функция назначения обработчика нажатия на область прямоугольника
function handleLoad(control, userContext, sender)
{
document. getElementById('mySilverlightControl').content. findName('but').addEventListener("mouseLeftButtonDown",handleMouse);
}
// обработчик нажатия на область прямоугольника
function handleMouse(sender, mouseEventArgs)
{
// вызов функции отсылки сообщения на сервер с помощью Ajax
Send();
}
var xmlHttp;
// функция отсылки сообщения на сервер с помощью Ajax
function Send()
{
xmlHttp = new XMLHttpRequest();
xmlHttp. open("GET","GetDate. ashx",true);
xmlHttp. onreadystatechange = OnResp;
xmlHttp. send(null);
}
// функция приема сообщения с текущей датой от сервера
// и смена текста в текстовом блоке
function OnResp()
{
if(xmlHttp. readyState==4)
{
var SL=document. getElementById('mySilverlightControl');
SL. content. findName('MyText').Text=xmlHttp. responseText;
}
}
</script>
</head>
<body>
<div id="SilverlightControlHost">
<script type="text/javascript">
// вызов функции загрузки Silverlight-элемента
createSilverlight();
</script>
</div>
</body></html>
Разберем этот код поэтапно. В разметке документа устанавливатся блок <div>, который будет содержать Silverlight-элемент. Устанавливаем для него id, например, SilverlightControlHost. Функция загрузки Silverlight-элемента имеет следующий вид:
function createSilverlight()
{
Silverlight. createObject("Proba. xaml",
document. getElementById("SilverlightControlHost"),
"mySilverlightControl",
{
width:'300',
height:'300',
inplaceInstallPrompt:false,
background:'#D6D6D6',
isWindowless:'false',
framerate:'24',
version:'2.0'
},
{
onError:null,
onLoad:handleLoad,
},
null);
}
Загрузка осуществляется с помощью метода createObject Silverlight-элемента. Первым параметром является имя xaml-файла, содержащего xml-разметку, второй параметр – div-элемент, в который будет осуществляться загрузка, третий параметр – название Silverlight-элемента, четвертый параметр – различные стилевые настройки элемента (объединяются в {}), пятый параметр – наличие обработчиков элемента управления.
Текст обработчиков зависит от типа обработчика. Обработчик загрузки должен устанавливать слушателя для других событий, например, нажатия кнопки мыши:
// функция назначения обработчика нажатия на область прямоугольника
function handleLoad(control, userContext, sender)
{
document. getElementById('mySilverlightControl').content. findName('but').addEventListener("mouseLeftButtonDown",handleMouse);
}
Отметим принцип получения элемента их xamp-разметки. Сначала происходит обращение к элементу Silverlight посредством обычной модели DOM html-документа (document. getElementById('mySilverlightControl')), затем берется его содержимое (document. getElementById('mySilverlightControl').content), в котором можно найти элемент по его имени
(document. getElementById('mySilverlightControl').content. findName('but'))
Далее к полученному элементу (в нашем случае прямоугольнику с именем but) прикрепляется слушатель события mouseLeftButtonDown с помощью метода addEventListener. Обработчик же этого события создается по принципу формирования обработчиков событий в C# (с двумя параметрами – источником сообщении и доп. информацией):
// обработчик нажатия на область прямоугольника
function handleMouse(sender, mouseEventArgs)
{
// вызов функции отсылки сообщения на сервер с помощью Ajax
Send();
}
