Спонсор: Microsoft
Опубликован: 13.12.2011 | Доступ: свободный | Студентов: 981 / 29 | Оценка: 4.29 / 4.57 | Длительность: 13:56:00
Лекция 1:

Краткое знакомство с моделью программирования XAML

Аннотация: В лекции рассматривается технология декларативного программирования при помощи языка XAML.
Ключевые слова: XAML, элементы управления, путь, интерфейс, компьютер, пользовательский интерфейс, Windows, API, MFC, ATL, visual, шаблон, Паттерн, представление, кроссплатформенность, Java, C, AWT, Swing, windows 95, directx, opengl, silicon, Graphics, ветвь, HTML, net, ASP, Графический ускоритель, графическая подсистема, распознавание, список, программирование, информация, XML, application, markup, language, файл, язык разметки, user interface, браузер, механизмы, локализация, приложение, SMART, меню, тег, очередь, деление, polyline, векторный редактор, суперпозиция, expression, css, ресурс, поиск, время компиляции, парсер, класс, макет, средства разработки, IDE, graphic design, CLR, объект, значение, атрибут, команда, owner, фигурные скобки, NULL, встроенное свойство, статическое поле, пространство, URI, include, dock, programming, интерфейс программирования приложений, SDK, platform, компонент, style, формальный язык, RIA, Internet, пользователь, uniform, resource, identifier, идентификатор ресурса, идентифицирующая, presentation, foundation, отношение, программирование приложений, текстовый формат, XHTML, знание

Файлы к данному курсу Вы можете скачать здесь.

Цель лекции: показать читателям предпосылки возникновения модели декларативного программирования XAML, разобрать основополагающие элементы XAML (контейнеры, элементы управления, службы документов, графические примитивы), а так же кратко познакомить с текущей поддержкой языка XAML, и моделью программирования.

Краткий экскурс в историю графических интерфейсов пользователя

Человечество проделало огромный путь в технологиях создания пользовательского интерфейса. Когда-то, на заре компьютерной эры, единственный интерфейс пользователя составляла колода перфокарт, которые программист загружал в компьютер, и бумажная лента, которую компьютер ему выдавал. Первым революционным шагом стало появление консоли, что автоматически (хотя и далеко не сразу) привело к смене парадигмы общения компьютера и пользователя с пакетной обработки к интерактивной. Довольно долго консоли были текстовыми, и пользовательский интерфейс, в основном, сводился к вопросам и ответам. Однако и в консоли со временем появились довольно богатые интерфейсы, использовавшие возможности псевдографики.

В то же время становится популярной Windows, что в очередной раз меняет подходы к созданию интерфейсов. Windows предложила набор стандартных элементов управления (или, общепринятое, "контролов"), а также API для работы с ними. Это позволило приложениям выглядеть одинаково с системными, не говоря уже о существенном облегчении в программировании UI, т.к. большую часть труда взяла на себя система.

Поначалу набор контролов был недостаточен, а API вызывало много нареканий, но с развитием Windows положение вещей улучшалось. Кроме того, появилось много альтернатив низкоуровневому API Windows. В частности, можно упомянуть "родные" Microsoft’овские технологии MFC и ATL, которые были интегрированы со средством разработки Microsoft – Visual Studio. С помощью этих технологий можно разрабатывать интерфейсы в объекто-ориентированном стиле, кроме того, в них реализован шаблон ("паттерн") model-view-controller, позволяющий разделить представление и данные. Стоит упомянуть и другие технологии, такие как кроссплатформенная Qt и, конечно же, Java c ее AWT и Swing.

Параллельно с появлением и развитием технологий, подобных MFC, появились и стали развиваться технологии для работы с продвинутой графикой. Так, в 1995-м году в одноименной системе Windows 95 появилась технология DirectX, облегчающая работу по созданию игр и мультимедиа-приложений. За 3 года до Microsoft’овского DirectX появилась технология OpenGL компании Silicon Graphics. Точнее сказать, это стандарт, выработанный несколькими компаниями (и, в частности, Microsoft), выросший из разработки Silicon Graphics. В отличие от DirectX, OpenGL является кросс-платформенным и стандартным. Нас же интересует то, что развитие графических технологий с этого времени шло параллельно с развитием технологий создания "обычного" UI.

Наконец, надо упомянуть и третью ветвь развития UI, появившуюся примерно в то же время – UI сначала веб-страниц, потом и веб-приложений. Поначалу это был чистый HTML, потом как грибы после дождя стали появляться многочисленные технологии вроде Java-апплетов, flash-приложений и т.п. Наконец, с выходом Microsoft.NET появились технологии Windows Forms и ASP.NET.

Итак, с точки зрения UI у нас существует три разных типа приложений, каждый из которых имеет свой набор технологий для реализации. И одной из предпосылок создания WPF является идея интеграции подобных технологий в одной. Идея интеграции всего со всем вообще является доминирующей последние годы. Кроме того, текущей графической платформе Windows уже 20 лет. Это прекрасно, но, учитывая ошеломительное развитие аппаратных графических средств (видеокарт и разнообразных графических ускорителей), потенциально мы могли бы использовать всю их мощь не только в приложениях типа игр, но и в обычных приложениях. Мешает нам только то, что с помощью привычных технологий типа MFC или Windows Forms крайне трудно сделать изощренный интерфейс, а тратить время на создание оного с помощью DirectX или OpenGL представляется малоосмысленным. Таким образом, одной из целей создания WPF было предоставить преимущества современных аппаратных графических средств более широкой аудитории разработчиков.

Наконец, еще одной предпосылкой появления WPF стала неудовлетворенность текущей схемой общения дизайнера и разработчика при создании UI. Это мы обсудим чуть позже в данной лекции.

Windows Presentation Foundation – три в одном

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

Надо отметить, что WPF – это не только диалоги, картинки и видео. Кроме прочего, WPF включает в себя также синтез и распознавание речи. Более полный список того, что поддерживается WPF:

  • 2D
  • 3D
  • Работа с текстами и шрифтами
  • Работа с изображениями
  • Эффекты
  • Аудио
  • Видео
  • Анимация и работа с временными интервалами

Декларативное программирование UI и XAML

Одной из идей WPF является то, что программирование UI хочется сделать как можно более декларативным. В самом деле, почему размеры и расположение элементов управления, реакцию на всякие события и т.п. надо реализовывать в коде, если эта информация известна заранее? Эти соображения привели разработчиков WPF к идее использовать XML для описания пользовательского интерфейса. Стандарт называется XAML (eXtensible Application Markup Language), и файл на нем выглядит примерно так:

<Button Width="200px" Click="onHelloClick">
    Hello, XAML!
    <Button.Background>
        LightBlue
    </Button.Background>
</Button>

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

Идея использовать XML для описания UI не нова. Достаточно популярен язык разметки XUL (XML User Interface Language). XUL является частью среды разработки кросс-платформенных интерфейсов, известной как XPFE. Это полнофункциональный язык разметки, на объекты приложений, такие как окна, метки и кнопки.

C помощью XAML описывается, прежде всего, пользовательский интерфейс. Логика приложения по-прежнему управляется процедурным кодом (С#, VB и т.д.).

XAML может использоваться как для браузер-базированных приложений, так и для локальных настольных приложений. Немаловажной деталью является легкость XAML для локализации UI. Если раньше для этих целей использовали специальные механизмы вроде таблицы строк, загрузки строк из ini-файлов, ресурсные dll или же специальных утилит "вытаскивания" строк, то с появлением XAML, хранящего все строчки UI в текстовом виде, локализация значительно упрощается.

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

Основы модели UI и XAML

Интерфейс пользователя WPF-приложения задается XAML. C XAML может быть связан скомпилированный code-behind код (что может вызвать легкое ощущение дежавю у знакомых с моделью ASP.NET). Например, если страница вашего приложения описывается файлом page.xaml, то code-behind, как правило, будет храниться в page.xaml.cs. Codebehind может содержать реакцию на различные события, генерируемые пользовательским интерфейсом (такие как нажатие клавиши мыши или "наезд" указателя мыши на элемент управления). Одной из светлых целей такого разделения является написание одного кода для всех типов приложений (то есть, ваш код можно было бы скомпилировать и как настольное приложение, и как приложение, просматриваемое с помощью браузера, и как smart client-приложение).

Т.к. XAML – это "нормальный" XML, то он подчиняется всем правилам wellformed XML, в частности, содержит ровно одну корневую вершину и является деревом. На вершине иерархии находится один из контейнерных объектов. Внутри этих объектов располагаются знакомые нам элементы управления и другие контейнеры. Набор элементов управления, без сюрпризов, очень похож на "старый добрый" набор контролов Win32. Это кнопки, меню, текст, картинки и т.п. Но на самом деле каждый тег XAML соответствует классу модели, который, в свою очередь, имеет набор свойств, методов и событий. В соответствие с этими членами класса вы можете настраивать ваш XAML-код. Во время исполнения именно экземпляры этих классов создаются рантаймом для того, чтобы отобразить то, что вы указали в XAML, – очень похоже на ASP.NET и его серверные контролы.

Элементы XAML

Основное деление элементов XAML таково:

  • Контейнеры (панели)
  • Элементы управления
  • Службы документов (document services)
  • Графические примитивы

Панели

С помощью панелей вы можете располагать содержащиеся внутри них элементы. Среди стандартных панелей есть Canvas (дочерние элементы размещаются с использованием относительных координат), DockPanel (панель, в которой дочерние элементы стыкуются), FlowPanel (напоминает джавский FlowLayout, где элементы выводятся в ряд друг за другом), GridPanel (табличная организация сыновей) и некоторые другие. Естественно, вы можете определять свои типы панелей. Пример панели:

<DockPanel  xmlns="http://schemas.microsoft.com/2003/xaml>
    <Button DockPanel.Dock="Left" Width="50px" Height="30px">One</Button>
    <Button DockPanel.Dock="Left" Width="50px" Height="30px">Two</Button>
    <Button DockPanel.Dock="Left" Width="70px" Height="30px">Three</Button>
</DockPanel>

На этой панели будет создано три кнопки, состыкованные друг с другом по горизонтали. Обратите внимание на указание соответствующего пространства имен в элементе верхнего уровня.

Элементы управления

Элементы управления, как уже было сказано, во многом уже знакомы программистам Win32 и WinForms. Все они унаследованы от типа Control, среди них есть старые добрые комбобоксы, листбоксы, меню, скроллбары, слайдеры, и т.п., а есть и новые контролы наподобие RadioButtonList. XAML однако же дает вам невероятную гибкость в настройке свойств этих контролов (то, чего ранее можно было добиться только нелегким трудом ручной отрисовки owner draw). Так, например, чтобы нарисовать кнопку с изображением (что, правда, стало несложно и во второй версии WinForms), в WPF надо всего лишь написать

<Button>
    <Image Source="myphoto.jpg">
</Button>

Вы можете задавать различные цвета, кисти, градиентные заливки и даже сделать кнопку с чек-боксом на ней!

Графические примитивы

С ними все понятно, набор весьма стандартен – Ellipse, Line, Rectangle, Path, Polygon, Polyline, для которых можно использовать заливки (Fill) и штрихи (stroke), причем всё это можно рисовать разными кистями, использовать градиенты, устанавливать толщину линий и т.п. Кто работал в векторных редакторах наподобие Macromedia Flash или Adobe Illustrator, тому эти возможности знакомы.

Графические примитивы не имеют дочерних элементов и обычно содержатся внутри панели Canvas, например:

<Canvas xmlns = "http://schemas.microsoft.com/2003/xaml">
    <Line X1 = "0" Y1 = "0" X2 = "100" Y2 = "200" Stroke = "red" />
</Canvas>

нарисует обычную линию красного цвета из 0,0 в 100, 200 (в локальных координатах панели).

Службы документов

В то время как традиционная веб-страница имеет непрерывное представление, отображая весь контент в одном едином блоке, сервисы управления документами предоставляют вам удобные возможности разбивать контент на страницы, масштабировать содержимое, адаптировать документы под специфические особенности дисплея пользователя и т.д. Еще один шаг, приближающий веб-интерфейс к привычному интерфейсу настольных приложений.

Преобразования и анимация

С помощью XAML вы можете определить различные преобразования (трансформации) над элементами интерфейса. Среди стандартных преобразований есть:

  • RotateTransform – поворот на указанный угол
  • TranslateTransform – сдвиг на указанные смещения
  • ScaleTransform – растягивание или сужение в указанное количество раз
  • SkewTransform – искажение на указанные углы относительно указанного центра
  • MatrixTransform – любое аффинное преобразование
  • TransformCollection – суперпозиция нескольких преобразований

Например, вы можете повернуть обычную надпись с помощью единственного преобразования:

<Canvas xmlns = "http://schemas.microsoft.com/2003/xaml/">
<TransformDecorator>
    <TransformDecorator.Transform>
        <RotateTransform Angle="45"/>
    </TransformDecorator.Transform>
    <Text>Hello!</Text>
</TransformDecorator>
</Canvas>

или отобразить список (ListBox) с помощью нескольких преобразований, объединенных TransformCollection, так, что он будет растянут и перевернут:

<Canvas xmlns="http://schemas.microsoft.com/2003/xaml">
  <TransformDecorator>
    <TransformCollection>
        <RotateTransform Angle="100"/>
        <ScaleTransform ScaleX="2", ScaleY="1"/>
    </TransformCollection>
   <ListBox>
        <ListBoxItem> One </ListBoxItem>
        <ListBoxItem> Two </ListBoxItem>
        <ListBoxItem> Three </ListBoxItem>
    </ListBox>
  </TransformDecorator>
</Canvas>

Кроме преобразований XAML предлагает вам также возможности анимации (нечто похожее на преобразования, но что можно повторять и применять многократно). Например, вы можете сделать кнопку, которая при наведении на нее мышки будет постепенно растягиваться до некоторых пределов (не скачком) и также постепенно сужаться после того, как мышка будет отведена. Анимировать можно все свойства элементов управления, что позволяет вам создавать сколь угодно изощренные эффекты анимации. Правда сказать, создавать эти эффекты руками – не самое благодарное занятие. Например, взгляните на доступные для скачивания примеры XAML на сайте http://xamlshare.com. Конечно же, для создания более-менее сложных UI лучше использовать продукты семейства Expression (рассматриваемые ниже).

Игорь Ключников
Игорь Ключников
Россия
Михаил Ковязо
Михаил Ковязо
Россия, Москва, ВЗМИ, 1982