10. Технология Silverlight
реклама
Технология Silverlight: Ajax и С# для обработки событий элемента управления
Silverlight
Как уже было сказано, Silverlight работает на разметке в формате XML-документа,
который хранится в файле с расширением xaml. Например,
Файл Proba.xaml:
<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/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"
Inherits="_Default" %>
CodeFile="Default.aspx.cs"
<!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();
}
