#024 – Знакомство с WPF/E

Автор: Topol Воскресенье, Май 6th, 2012 Нет комментариев

Рубрика: Операционные системы

Не так давно произошел долгожданный релиз набора библиотек Microsoft .NET  3.0 и, возможно, появилась возможность вникнуть более подробно в привнесенные этим набором новшества. Возможно, но не тут- то было. Microsoft в серьез взялась за популяризациюWindows Presentation Foundation  – и вот, с пылу с жару, новый (или не совсем новый) продукт WPF-E. E – это от английского “everywhere” – тобишь WPF  везде. Отбросим мысли о том, что софтверный гигант решил таким образом всего лишь задавить (или все-таки слегка потеснить?) Flash и подумаем о том, что же означает это «везде». А означает это следующее – разработчики веб-сайтов смогут не только создавать стандартные, «тяжелые» XBAP-приложения (для работы с которыми уж очень нужен IE…) но и «легкие», основанные на XAML страницы. И при чем тут «везде»? А при том, что вместе с технологией WPF-E, компания выпустила несколько плагинов (объемом всего-то в один мегабайт), при помощи которых просмотр WPF-E контента в IE, Firefox и даже на компьютерах Apple Macintosh и даже на мобильных устройствах яйца выеденного стоить не будет. Поистине сильно желание Microsoft сразиться с Flash и, надо заметить, некоторые энтузиасты уже сделали абсолютно идентичные проекты на Flash и WPF-E и последний ничуть не уступает первому. Мало того, есть масса способов объединить обе технологии в рамках одного web-сайта, и не только объединить, но даже заставить взаимодействовать. Действительно, огромное поле для творчества.

Итак, давайте создадим очень простую страницу типа «Hello World», чтобы познакомиться с технологией WPF/E.

Что нам необходимо? Прежде всего скачать Silverlight. Во вторых, нам понадобится пустая html-страница, например, с таким содержанием:

Код:
<!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» xml:lang=»en»>
<head>
<title>A Sample HTML page</title>
</head>
<body>
</body>
</html>

И в третьих, нам потребуется текстовый редактор, например «Блокнот» прекрасно подойдет.

После того, как вы подготовили все вышеуказанные средства, Вам понадобится небольшой файл, основанный на JavaScript, который Microsoft любезно подготовила для разработчиков, с целью организовать очень быстрый и простой способ внедрить WPF-E контент на любую html-страницу. Скачайте архив с этим файлом тут: http://www.thevista.ru/datas/users/2180-aghost.zip , распакуйте архив и разместите вышеупомянутый файл, который имеет имя «aghost.js» в директории, в которой вы подготовили свою html-страницу.

Теперь, нам необходимо подключить этот файл к нашей странице, для этого откройте Вашу страницу в блокноте и внесите следующую строку в секцию <head> вашего html-файла:

Код:
<script type=»text/javascript» src=»aghost.js»></script>

В моем случае код страницы будет выглядеть так:

Код:
<!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» xml:lang=»en»>
<head>
<title>A Sample HTML page</title>
<script type=»text/javascript» src=»aghost.js»></script>
</head>
<body>
</body>
</html>

Теперь нам необходимо создать область в которой будет работать наш WPF-E элемент. Это очень просто. Добавьте этот код внутрь секции <body> Вашего html-файла:

Код:
<!—Здесь будет работать WPF/E ActiveX контрол—>
<div id=»agControl1Host»>
</div>

Создав таким образом область для работы контрола, необходимо описать этот самый контрол – сделать это, так же, довольно просто. Нижеизложенный код необходимо добавить внутрь блока <body>, но ниже вышеописанных тегов <div></div>:

Код:
<script type=»text/javascript»>
// Создаем WPF/E ActiveX контрол.
// Используя данный метод мы избавляем пользователя от необходимости кликать по
// ActiveX контролу прежде чем WPF/E получит информацию от пользователя
new agHost(
«agControl1Host», // hostElementID ( элемент HTML element который мы описали выше в теге <div>)
«agControl1″, // ID контрола WPF/E ActiveX которого мы создаем
«300px», // ширина (width)
«300px», // высота (height)
«#D6D6D6″, // цвет фона (backgroundcolor)
null, // SourceElement (имя script-тэга содержащего xaml)
«SampleProject.xaml», // файл источник контента (source file)
«false», // Без окна (IsWindowless)
«30″,  // Скорость кадров (MaxFrameRate)

null // OnError handler (метод отлова ошибок)
);

// также создаем глобальную переменную для WPF/E ActiveX контрола,
// которую мы можем использовать, чтобы найти xaml элементы
var agControl = document.getElementById(«agControl1″);
</script>

Итак, возможно Вам покажется, что данный код несколько громоздкий, но на самом деле он не содержит ни одной лишней строки. Вы уже поняли, что мы применяем комбинированный HTML+Sсript язык, для описания. Думаю, разобраться в нем не составит проблемы. Тем не менее, внимательно изучите комментарии, которые я внес в код, для Вас. Эти комментарии помогут Вам максимально быстро разобраться с тем, как правильно определить отображающий элемент (под отображающим элементом я понимаю ту область, которая будет отображать WPF-E контент).

Итак, внимательный читатель обратил внимание на параметр «Source File» — и правильно, так как именно этот параметр ссылается на xaml-файл, в данном случае с именем «SampleProject.xaml», который и содержит замечательный WPF-контент. Чтож, создайте пустой xaml-файл (для этого достаточно создать текстовый документ и изменить расширение с «txt» на «xaml») c нужным именем и разместите его в директории, в которой находится ваша html-страница.

Вы уже знакомы с тем, какие элементы используются для рисования в XAML. Все, что нужно добавить, это то, что контент WPF-E всегда размещается внутри контейнера <Canvas>, в другом все идентично. Для того, чтобы закончить нашу страницу нарисуем кое-что в нашем xaml-файле. Внесите в него такой код:

Код:
<Canvas Width=»300″ Height=»300″
xmlns=»http://schemas.microsoft.com/client/2007″
xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»>

<Ellipse Height=»200″ Width=»200″ Canvas.Left=»30″ Canvas.Top=»30″
Stroke=»Black» StrokeThickness=»10″ Fill=»LightBlue»/>
</Canvas>

Сохраните все документы и запустите Вашу страницу:

Поздравляю! Вы только что создали свою первую страницу на базе WPF-E. Что еще можно добавить? Если Вы хотите разместить на странице несколько независимых контролов для отображения XAML – не забудьте присвоить каждому из них уникальное имя. Что? Вы не видите содержимого данной страницы? Это может быть только потому, что вы забыли установить плагин для Вашего броузера.

Источник: thevista.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты