Элемент управления браузера Silverlight

Программирование элементов UI

XAML предоставляет ряд визуальных элементов для создания UI. Все они были перечислены и подробно рассмотрены в лекциях 4 и 5. К элементам UI относятся Canvas, Ellipse, Glyphs, Image, Line, Me-diaElement, Path, Polygon, Polyline, Rectangle, Run, Shape, TextBlock и другие.

Каждый из этих элементов поддерживает полнофункциональный набор методов и событий, которые будут перечислены и рассмотрены в следующих нескольких разделах.

Кроме того, Silverlight 2 обладает богатым набором элементов управления. Они используются из .NET-кода для создания насыщенных UI, которые подробно обсуждаются в "Элементы управления Silverlight: представления и компоновки" , "Элементы управления Silverlight: представления и компоновки".

Методы элементов UI

Элементы UI предоставляют функции, которые могут вызываться из JavaScript. Эти функции позволяют манипулировать элементами UI для создания сложных сценариев взаимодействия с приложением и являются общими для всех элементов UI.

Методы AddEventListener и RemoveEventListener

Метод AddEventListener (Добавить обработчик события) используется для привязки к элементу UI обработчика события во время выполнения. Это полезно для разделения дизайна и разработки: разработчик ничего не добавляет непосредственно в XAML, создаваемый дизайнером, а вводит код обработки события в файл (или блок) JavaScript. События элементов UI, которые могут обрабатываться, обсуждаются в данной лекции позже.

Далее представлен пример привязки обработчика события во время выполнения. Здесь добавляется обработчик события, который отслеживает щелчок мыши и определяет, что событие должно обрабатываться функцией JavaScript handleMouse (обработка мыши). Эта функция, как большинство обработчиков событий, принимает два параметра: аргументы отправителя и события. Поскольку обрабатывается событие мыши, данная функция принимает экземпляр объекта MouseEventArgs (Аргументы события мыши), предоставляющий координаты х и у положения мыши в момент формирования события:

<script type="text/javascript"> 
 function handleLoad(control, userContext, sender) 
 {
  sender.addEventListener("mouseLeftButtonDown", handleMouse); 
 }
 function handleMouse(sender, mouseEventArgs) 
 {
  alert(mouseEventArgs.getPosition(null).x + ":" 
          + mouseEventArgs.getPosition(null).y); 
 } 
</script>

Вы можете уничтожить подключение во время выполнения, используя метод RemoveEventListener (Удалить обработчик события). В него можно передать либо целочисленный маркер, который был возвращен addEventListener, либо имя события.

Метод findName

Этот метод используется для выполнения поиска именованного объекта в дереве элементов XAML Он возвращает ссылку на заданный объект, если он существует; в противном случае, он возвратит null. Например, рассмотрим код XAML:

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"
    Height="400" Width="400">
  <TextBlock Canvas.Top="0" x:Name="txt1" Text="TextBlock1" />
  <TextBlock Canvas.Top="20" x:Name="txt2" Text="TextBlock2" />
  <TextBlock Canvas.Top="40" x:Name="txt3" Text="TextBlock3" />
</Canvas>

В этом коде с помощью свойства x:Name задается три элемента TextBlock: txt1, txt2 и txt3. Теперь с помощью метода findName можно найти именованный узел, получить ссылку на него и, используя эту ссылку, редактировать его. В данном случае, все это выполняется в обработчике события handleLoad (обработка загрузки).

<script type="text/javascript">
function handleLoad(control, userContext, sender) {
var t1 = sender.findName("txt1"); t1.Text = "TextBlock1 has changed"; } </script>

Организация доступа к элементу управления с помощью метода GetHost

Элементы UI предоставляют метод GetHost (Получить хост). Он может использоваться для доступа к элементу управления Silverlight, в котором располагается данный элемент. Это особенно полезно, если требуется запросить у объекта некоторые сведения, например, номер версии.

Организация доступа к родительскому элементу с помощью метода getParent

Возможны случаи, когда требуется обратиться к родителю элемента UI. Получение ссылки на элемент управления Silverlight и затем использование findName для получения родителя является очень неэффективным способом, поэтому предоставляется метод getParent (Получить родителя). В случае успешного выполнения он возвращает ссылку на родительский элемент; в противном случае, возвращается null.

Использование методов GetValue и SetValue

Доступ к обычным свойствам всегда можно организовать с помощью традиционного синтаксиса с использованием точки (объект.имясвойства),но для поддержки присоединенных свойств существует альтернативная методика с использованием метода GetValue (Получить значение). Например, если необходимо обратиться к свойству Canvas.Top, вы не можете сделать это через o6beKm.Canvas.Top.В этом случае должен использоваться синтаксис o6beKm.GetValue("Canvas.Top"). GetValue также может использоваться для доступа к неприсоединенным (простым) свойствам как эквивалент нотации с использованием точки.

Аналогично, можно применять метод SetValue (Задать значение) для задания значения, как простого, так и присоединенного свойства. Этот метод принимает два параметра. Первый - имя свойства, и второй - присваиваемое значение. Рассмотрим пример:

var t1 = ctrl.content.findName("txt1"); 
t1.setValue("Canvas.Top",20);

Использование SetFontSource

Элемент TextBlock поддерживает дополнительный метод SetFontSource (Задать источник шрифта), который позволяет использовать в TextBlock загруженный шрифт. Итак, если для отображения текста вы хотите использовать новый шрифт- например, если необходимо поддерживать набор иностранных символов (такой как используется для языков Восточной Азии), - вы можете скачать этот шрифт с помощью объекта Downloader и передать этот объект в метод SetFontSource. После этого TextBlock сможет использовать данный шрифт. Для применения этого метода необходимо обладать правами на распространение шрифта (или его подмножества).

Далее приведен пример использования метода SetFontSource. В данном случае, имеется XAML-документ, описанный с помощью Expression Blend, в котором есть некоторый текст на китайском языке:

<Canvas xmlns=" http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Width="640" Height="480" Background = "White">
  <TextBlock x:Name="myTextBlock" Width="152" Height="64" 
             Canvas.Left="184" Canvas.Top="56" Text="fr^f4? " 
    TextWrapping="Wrap" MouseLeftButtonDown="handleIt" />
</Canvas>

В Silverlight 2 имеется стандартный шрифт для этих символов. Если требуется отображать их особым шрифтом, который, вероятно, не доступен на всех пользовательских компьютерах, можно скачать этот шрифт с помощью объекта Downloader. В приведенном выше XAML-коде был описан обработчик события handleIt. Вот эта функция:

// Обработчик события для инициализации и выполнения запроса на скачивание файла шрифта.
function handleIt(sender, eventArgs)
{
// Извлекаем ссылку на элемент управления.
var control = sender.getHost();
// Создаем объект Downloader.
var downloader = control.createObject("downloader");
// Добавляем событие Completed.
downloader.addEventListener("Completed", "onCompleted");
// Инициализируем запрос Downloader.
downloader.open("GET", "MyFontName.TTF");
// Выполняем запрос Downloader.
downloader.send(); }

Данный код обеспечивает создание объекта загрузки. Этот объект скачивает шрифт и описывает обработчик события onCompleted (по завершении), который будет обрабатывать событие Completed, формируемое по завершении загрузки. Это событие будет задавать в качестве источника шрифта для TextBlock дополнительный шрифт, и тогда Silverlight будет формировать визуальное представление китайских иероглифов, используя этот новый источник шрифта.

// Обработчик события Completed. 
function onCompleted(sender, eventArgs) 
{// Извлекаем объект TextBlock.
 var myTextBlock = sender.findName("myTextBlock");
 // Добавляем файлы шрифтов, содержащиеся в загруженном объекте 
 // в коллекцию шрифтов типа 
 TextBlock. myTextBlock. setFontSource(sender);
 // Задаем свойству FontFamily удобное для пользователя имя шрифта. 
 myTextBlock.fontFamily = "Simhei"; 
}

События элементов UI

Элементы UI поддерживают ряд событий, которые могут быть ассоциированы с функциями JavaScript либо через AddEventListener для добавления их во время выполнения, либо путем использования соответствующего атрибута XAML для добавления их во время разработки. Например, чтобы ассоциировать событие MouseLeftButtonDown (Нажатие левой кнопки мыши) с помощью JavaScript, применяется метод AddEventListener:

t1.addEventListener("MouseLeftButtonDown", handleMouseDown);

Чтобы ассоциировать событие в XAML, можно использовать атрибут, имя которого аналогично имени рассматриваемого события (например, "MouseLeftButtonDown"). Рассмотрим пример:

<TextBlock Canvas.Top="0" x:Name="txt1" Text="Status" MouseLeftButtonDown=" handleMouseDown"/>

Элемент UI поддерживает следующие события:

• GotFocus ( Получение фокуса ) Это событие формируется, когда элемент получает фокус мыши.
• KeyDown ( Нажатие клавиши ) Это событие возникает для элемента, находящегося в фокусе, при нажатии клавиши. Обработчик данного события принимает два параметра. Первый параметр, sender (отправитель), представляет ссылку на объект, сформировавший событие. Второй параметр - объект KeyEventArgs, имеющий ряд собственных свойств. Одно из них - key (клавиша), является целым значением, представляющим нажатую клавишу. Это значение не является характерным для операционной системы, и соответствия между ним и конкретными клавишами можно найти в Silverlight SDK. Другое свойство - platformKeyCode (код клавиши для конкретной ОС) относится к операционной системе. Кроме фактической клавиши, предоставляются Булевы свойства shift и ctrl. Они показывают, были ли нажаты клавиши Shift и Ctrl. (Обратите внимание, что это событие не формируется, когда Silverlight выполняется в полноэкранном режиме.)
• KeyUp ( Удерживаемая клавиша отпущена ) Это событие возникает для элемента, находящегося в фокусе, когда удерживаемая клавиша отпускается. Оно предусматривает все те же два параметра, что и событие KeyDown. (Заметьте, что это событие не формируется, когда Silverlight выполняется в полноэкранном режиме.)
• Loaded Это событие формируется, когда содержимое Silverlight загружено в элемент управления Silverlight и проведен его синтаксический разбор, но перед формированием его визуального представления.
• LostFocus ( Потеря фокуса ) Это событие, противоположное GotFocus: оно формируется, когда объект теряет фокус.
• MouseEnter ( Вход курсора мыши ) Это событие формируется, когда курсор мыши входит в границы объекта.
• MouseLeave ( Выход курсора мыши ) Это событие, противоположное MouseEnter: оно формируется, когда курсор мыши покидает область, ограничивающую объект.
• MouseLeftButtonDown Это событие возникает при нажатии пользователем левой кнопки мыши, когда курсор находится над элементом UI.
• MouseLeftButtonUp ( Удерживаемая левая кнопка мыши отпущена ) Это событие возникает при отпускании удерживаемой левой кнопки мыши.
• MouseMove ( Перемещение мыши ) Это событие формируется при перемещении курсора по элементу UI.