Главная » Silverlight » Манипуляция элементами HTML

0

Свойства Parent и Children предоставляют не единственный способ прохода по иерархии объекта HtmlDocument. Например, с помощью метода GetElementBylD () или GetElementsByTagName () можно найти элемент с заданным именем. Найдя нужный эле­мент, им можно манипулировать с помощью методов, описанных в табл. 14.3.

Таблица 14.3. Методы класса HtmlElement

Метод

Описание

AppendChild()

Вставка нового элемента HTML как вложенного в текущий элемент. Чтобы создать элемент, нужно сначала применить метод

HtmlDocument.CreateElement()

RemoveChild()

Удаление элемента HtmlElement, заданного посредством аргумента. Удаляемый элемент HtmlElement должен быть дочерним, вложенным в текущий элемент HtmlElement

Focus ()

Присвоение фокуса текущему элементу, в результате чего он будет получать события клавиатуры

GetAttribute (), SetAttribute() И RemoveAttribute()

Извлечение, установка и удаление атрибута. Если при установке значения методом SetAttribute () атрибут не существует, он будет создан

GetStyleAttribute(), SetStyleAttribute() И RemoveStyleAttribute()

Извлечение значения свойства CSS, установка значения и удаление атрибута стиля. Свойства CSS применяются для форматирования элементов HTML и позволяют управлять шрифтами, цветами фона и переднего плана, позиционированием, рамками и т.д.

GetProperty() И SetProperty ()

Извлечение и установка значений свойств, определенных в модели DOM. Обычно этими значениями манипулируют посредством кода JavaScript. Например, с помощью свойства innerHTML можно извлечь текстовое содержимое элемента

AttachEvent() и DetachEvent()

Подключение обработчика, определенного в приложении Silverlight, к событиям JavaScript, генерируемым элементами HTML, и его отключение

Предположим, элемент <р> расположен под областью содержимого Silverlight, кото­рая занимает не все окно браузера. Чтобы манипулировать элементом <р> в коде прило­жения Silverlight было удобнее, рекомендуется присвоить ему уникальное значение id. <р id="paragraph">…</р>

Тогда извлечь объект HtmlElement, представляющий данный элемент, можно будет в любом обработчике Silverlight.

HtmlElement element =

HtmlPage.Document.GetElementBytd("paragraph"); element.SetProperty("innerHTML", "Этот абзац обновлен кодом Silverlight.");

Приведенный выше код вызывает метод HtmlElement. SetProperty () и устанавливает свойство innerHTML, являющееся одним из фундаментальных компонентов модели DOM.

Примечание. Применяя методы и свойства типа SetProperty () и SetStyleAttribute (), вы покидаете предсказуемую среду Silverlight и вступаете в коварный мир браузеров. В результате появляются проблемы кроссплатформенной совместимости. Предположим, вы решили применить свойство innerText (оно аналогично свойству innerHTML, с одним исключением: оно автоматически заменяет специальные символы HTML их представлениями, чтобы символы текста не были интерпретированы как элементы разметки). В результате код больше не будет работать в браузере Firefox, потому что он не поддерживает свойство innerText.

Рис. 14.3. Изменение элемента HTML с по­мощью кода Silverlight

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

Нетрудно заметить, что средства стыковки Silverlight с DOM HTML несовершенны. Платформа Silverlight предоставляет доступ не к полной модели DOM, а к ее сокращен­ной версии, стандартизированной на основе класса HtmlElement. При работе с этим эле­ментом иногда необходимо устанавливать свойства DOM (такие, как innerHTML в пре­дыдущем примере) с помощью метода SetProperty () и предоставлять имя свойства как строку. Если вы часто работаете с некоторым элементом HTML, то рекомендуется за­ключить его в оболочку верхнеуровневого пользовательского класса (например, создав пользовательский класс Paragraph) и заменить свойства DOM или CSS строго типизи­рованными свойствами. Многие разработчики делают так для предотвращения типо­графских ошибок в именах свойств. Во время компиляции эти ошибки не выявляются.

Замена специальных символов представлениями

При установке свойства innerHTML текст интерпретируется как разметка HTML. Это означает, что в тексте можно использовать элементы HTML, например, так.

element.SetProperty("innerHTML", "Это <Ь>слово</Ь> выводится полужирным шрифтом.");

Если в тексте встречается угловая скобка, которая должна быть интерпретирована не как открывающая скобка де­скриптора, а как обычный символ, необходимо заменить ее представлением sit; или &gt;, например, так.

element.SetProperty("innerHTML", "Полужирный шрифт создается элементом &lt;b&gt;.");

Если строка содержит много символов, которые нужно заменить представлениями, или применять представле­ния нежелательно из-за того, что они затрудняют чтение кода, можно закодировать строку с помощью метода

HttpUtility.HtmlEncode().

element.SetProperty("innerHTML", HttpUtility.HtmlEncode(

"В документе используются дескрипторы <b>, <i> и <p>."));

Добавить дополнительные пробелы можно с помощью представления snbsp;. Учитывайте, что браузер интерпрети­рует последовательность пробельных символов (но не представлений) как один пробел.

Вставка и удаление элементов

В предыдущем примере код Silverlight модифицирует элемент HTML. Так же лег­ко добавить или удалить элемент. Для этого предназначены методы HtmlDocument. CreateElement(), HtmlElement.AppendChiId() и HtmlElement.RemoveChild().

Ниже приведен код, создающий элемент <р>.

HtmlElement element = HtmlPage.Document.CreateElement ("р");

element.Id = "paragraph";

element.SetProperty("innerHTML",

"Это текст нового элемента.");

HtmlPage.Document.Body.AppendChiId(element);

В данном примере объект element добавляется как последний дочерний элемент, т.е. вставляется в конец элемента <body>. Иногда нужно вставить динамическое содержимое в определенное место. Легче всего определить для этого пустой контейнер <div> с уни­кальным значением id. Тогда можно будет извлечь объект HtmlElement, представляющий контейнер <div>, и вставить динамическое содержимое с помощью метода AppendChild О.

Примечание. Выполнив приведенный выше код вставки многократно, можно добавить в конец документа HTML несколько абзацев. Однако каждому абзацу будет присвоено одно и то же значение id, что нехорошо. Например, если к полученному таким образом документу применить метод GetElementByid (), он возвратит только один элемент, хотя данное значение id присвоено многим элементам.

Обычно метод AppendChild () добавляет новый элемент в конец коллекции вло­женных дочерних элементов. Позиционировать элемент более точно можно с помо­щью перегруженной версии метода AppendChild (), которая принимает другой элемент HtmlElement, используемый в качестве ссылки. Новый элемент вставляется перед ука­занным в ссылке.

// Получение ссылки HtmlElement referenceElement = HtmlPage.Document.Body.Children[0];

// Вставка элемента перед указанным в ссылке HtmlPage.Document.Body.AppendChild(element, referenceElement);

Удалить элемент так же легко, как и вставить. Учитывайте лишь, что нужно исполь­зовать метод RemoveChild () родительского элемента, а не удаляемого.

Ниже приведен код, удаляющий абзац с атрибутом id="paragraph" (если он существует).

HtmlElement element =

HtmlPage.Document.GetElementByid("paragraph"); if (element != null) element.Parent.RemoveChild(element);

Изменение стилей

Существует два способа установки стилевых атрибутов.

Первый состоит в присвоении элементу существующего класса стилей. Для этого нужно установить свойство HtmlElement .CssClass.

element.CssClass = "highlightedParagraph";

Именованный стиль highlightedParagraph должен быть определен в текущем до­кументе HTML или в связанной таблице стилей. Ниже приведен пример определения стиля highlightedParagraph в элементе <head> страницы HTML.

<html xmlns="http: //www. w3. org/1999/xhtml"> <head> <style type="text/css">

.highlightedParagraph {

color: White;

border: solid lpx black;

background-color: Lime;

}

</style> </head>

<body>…</body>

</html>

Приведенный способ требует минимального кода. Кроме того, параметры форматиро­вания хранятся в разметке HTML, что очень удобно. Однако данный способ работает по принципу "все или ничего" — если потом возникнет необходимость настроить свойства индивидуальных стилей, то придется отказаться от него и применить другие способы.

Второй способ установки стилевых атрибутов состоит в одновременном присвоении элементу всех свойств стиля.

element.SetAttribute("style",

"color: White; border: solid lpx black; background-color: Lime;"); .

Чтобы код был более аккуратным и понятным, рекомендуется вызвать метод

SetStyleAttribute () несколько раз.

element.SetStyleAttribute("color", "White");

element.SetStyleAttribute("border", "solid lpx black");

element.SetStyleAttribute("background", "Lime");

Вызов метода SetStyleAttribute () можно вставить в любую точку кода для измене­ния одного свойства стиля, независимо от того, как стиль был установлен, и даже если другие свойства стиля не установлены.

Совет. Обзор свойств CSS, которые можно использовать для конфигурирования элементов, можно найти на странице

www.w3schools.com/Css/default.asp.

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

По теме:

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