понедельник, 15 ноября 2010 г.

Философия дизайна в WPF

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

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

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

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

До того, как я покажу простые виды разметки и кода WPF (Windows Presentation Foundation), вы должны быть уверенны в том, что знаете почему WPF приложения работают тем или иным образом, и в том, какое огромное количество частей WPF взаимодействуют друг с другом для представления конечному пользователю удобств и возможностей работать. Знание философии дизайна WPF сделает ваши будущие приложения более надежными, более понятными и гораздо более удобными, потому что вы будете меньше тратить время на построение стеклянных домов в местности, подверженной ураганам.

 

Данные и привязки

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

Когда пользователи смотрят на приложение, они видят информацию, которая относится к частичному завершению задачи. Такой как информация об уничтожении ближайшего космического корабля, отображенная на их экране радара или ввод другой строчки на листе кредиторской задолженности. Ваши пользователи видят информацию, понимают ее смысл и потенциально могут взаимодействовать с ней. А вы, как разработчик, чаще всего видите строки, колонки, градиенты, ячейки, кнопки, списки, полосы прокрутки и так далее. И вы не будучи пользователем обычно не уделяете достаточно времени обдумыванию того, что все это для пользователя значит гораздо больше. Существуют слои, представляющие видение мира разработчиком и видение мира пользователем. Мы можем разделить эти слои по двум главным категориям: данные и привязки.

Когда мы разрабатываем пользовательские интерфейсы, мы обычно накладываем обложку поверх данных. Данные могут быть любыми из высокоуровневой объектной модели, такой как пользователь или простое булево значение. Данные оказывают значительное влияние  на ваш пользовательский интерфейс и могут принимать различные формы. Следующий список основных типов данных представлены в современных приложениях:

  • Примитивные данные (Primitive Data) – атомарные данные самого низкого уровня, которые могут состоять из примитивов, таких как строки (strings), булевы типы (booleans), целочисленные типы (integers), десятичные дроби (decimals).
  • Списки (List Data) – данные, представленные в коллекциях. Эти данные могут быть такими же, или включать в себя массивы (arrays), списки (lists), и так далее.
  • Иерархические данные (Hierarchical Data) – комплексные графы данных, которые могут представлены иерархически, так как деревья, списки списков и т.д.
  • Композитные данные (Composite Data) –данные, сформированные более чем из одного типа, показанного выше.

По мере того, как мощь пользовательских интерфейсов (UI) и технологий доступа к данным растут, становится проще и проще брать данные и отрисовывать их. Технология Windows Forms позволяет нам часто перетаскивать (drag and drop) индивидуальные элементы управления и быстро указывать источник данных для отображения. Тем не менее, создание собственных элементов управления в Windows Forms было непростой задачей, требующей навыков мастера Дзен в области GDI (Graphics Device Interface). WPF выглядит сладкой конфеткой после этого и дажет разработчикам необходимую гибкость, сохраняя простым получение  и отрисовку данных.

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

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

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

 

Работа с данными

В этой части будет показано как WPF помогает преобразовывать сырые данные в яркое визуальное представление.

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

Это та ситуация, в который многие фреймворки пользовательского интерфейса обладают исторически гораздо большей сложностью, и в которой WPF такой мощный. Многие элементы управления WPF представляют тип данных по умолчанию как свое содержимое типа System.Object. Если содержимое элемента управления может быть любым типом данных, как элементы понимают, как отображать данные? Как же WPF получая сырые данные любого типа, проходящие через иерархию элемента управления преобразует их в что-то видимое, материальное и отвечающее на пользовательские воздействия?

Ответ на первый вопрос – шаблоны.

 

Шаблоны (templates)

Думайте о шаблонах как о кухонных формочках для выпечки. Когда для WPF нужна новая формочка, она обращается к шаблонам за одним из них. Шаблоны обозначают свежую формочку, представленную WPF. WPF выпекает из нее пирожное и пользователь видит свежий пользовательский интерфейс.

WPF представляет два различных вида шаблонов, которые представляют две различных вида формочек: шаблоны элементов управления (control templates) и шаблоны данных (data templates).

Шаблоны элементов управления используются, когда WPF хочет визуально представить элемент управления. Он определяется полностью в слое пользовательского интерфейса и не зависит от данных. Шаблон по-умолчанию элемента управления кнопка (button) выглядит как четырехугольник с закругленными краями.

Шаблоны данных используются, когда WPF получает сырые данные и нуждается в знании, как представить данные. В этом случае, что данные – это пирожное, а шаблон данных – формочка для выпечки. В результате, после применения формочки (шаблона) к пирожному (данным) получается визуальное представление данных так, как хотел разработчик.

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

 

Представители (Presenters)

Допустим мы имеем только маленькую область изображения. Мы знаем, что элемент управления использует форму как основу визуализации элемента управления, а данные определяют какая часть картинки должна быть отображена.

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

 

Привязки и конвертеры (Binding and converters)

Мы увидели различные типы данных, которые могут быть представлены и механизм шаблонов данных для описания способа визуального представления данных. Тем не менее нам необходимы некоторые возможности для соединения всего вместе. Эти возможности называются связыванием данных (data binding). Связывание данных в WPF гораздо более мощно, чем во многих других фреймворках построения пользовательского интерфейса, потому что они могут быть однонаправленными в ту или другую сторону или направленными в обе стороны. Пользовательский интерфейс может автоматически обновлять самостоятельно данные в элементах управления и связанные обьекты данных немедленно в ответ на действие пользователя. Шаблоны данных в WPF представляют всю гибкость, необходимую вам для визуального представления любого типа данных, который вам необходим в вашем приложении.

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

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

 

Разметка (Layout)

Наконец, когда шаблоны были применены, данные привязаны, конвертеры вызваны, контейнер представления создан, остался последний шаг до того, как пользователи смогут что-либо увидеть. Этот шаг – разметка.

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

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

В WPF панели и классы, наследованные от разметки (layout) несут в себе ее функциональность. Они отвечают за группировку вложенных элементов друг с другом (вложенные элементы хранятся как дети (children) на панели) и задают финальные размеры и позицию их.

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

 

Стили (Styles)

На протяжении всей цепочки событий, в которой потоки данных из сырых объектов данных с помощью логического расположения элементов преобразуются в визуально отрисованные элементы, мы можем определять стили элементов управления. Стили в WPF работают похожим образом как каскадные стили CSS для веб-приложений.Стили могут применяться к любому уровню от шаблона до представителя (Presenter) или к разметке и могут представлять внешний вид более связанным для производных элементов. Они представляют абстракцию, которая может задавать как все свойства элемента, так и те свойства, которые могут быть применены к нескольким элементам приложения без спецификации стиля для кажждого элемента управления. Стили загружаются из словаря ресурсов, который может быть где угодно в иерархии элементов, уровнях приложения или темы. Стиль по умолчанию устанавливает вид по умолчанию для WPF приложений и определен в отдельной сборке.

На рисунке 1. показывается как сырые данные пройдя через различные подсистемы становятся видимы пользователю так, как хотел разработчик.

image

Рис.1

 

Работа с привязками

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

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

Устройства ввода больше не ограниченны нашими руками, лежащими на столе. Особенностью работы с этими многочисленными интерфейсами ввода является то, что многие современные технологии просто не подготовлены для такого. К счастью WPF работает хорошо для клавиатуры, мыши и других типов ввода, в частности мультисенсорного.

Взаимодействие пользователя с вашим приложением начинается с того, что пользователь что-то вводит из любого устройства. Ввод вызывает событие (event). Windows отвечает низкоуровневым сигналом ввода и отправляет сообщение в ваше приложение, тогда WPF возбуждает высокоуровневое событие. Эти события могут быть различных типов, таких как перемещение мыши, нажатие клавиши, прикосновение стилусом и др. Эти события предоставляют базовую информацию, которая описывает условия, когда событие было возбуждено. Например два быстрых клика мыши станут событием double-click event, и WPF сгенерирует высокоуровневое событие.

Определение событий это первый шаг к обеспечению вашего приложения возможностью взаимодействия с пользователем. Следующим шагом будет привязка событий ввода к действиям, которые должен выполнить код. Действия могут переключаться простым событием или комбинацией событий. Например пользователь нажимает F5 чтобы обновить веб-страницу – это событие; или пользователь зажимает Ctrl когда перемещает элементы пользовательского интерфейса.- это комбинация событий. В общем, WPF возбуждает события пользователя как RoutedEvents, которые являются специализированными событиями проходящими через все элементы пользовательского интерфейса приложения WPF. Запомните, что источником событий не обязательно может быть пользователь. Сервера в сети могут отсылать события вашему приложению, или уведомлять другие приложения. В любом случае, ваше приложение может обрабатывать события с помощью действий.

Действия, которые производит приложение в ответ на событие выполняются в обработчиках событий (event handlers). Тем не менее, вы можете специфицировать действия с помощью команд (command). Команды – это мощный инструмент, который позволяет вам разделять действия приложения на основе событий и переключает их, позволяя приложению просто обрабатывать множество пользовательских действий. Например вы хотите выделить блок кода и скопировать текст в буфер. Команда может быть вызвана комбинацией CTRL+C или правым кликом мыши по контекстному меню. Логика копирования текста в буфер инкапсулирована в одном месте, что делает код более поддерживаемым.

События и действия – это основа взаимодействия пользователя с приложением, но более более общее значение взаимодействия представляется множеством комманд и примитивов событий. Они могут включать перетаскивание, изменение фокуса ввода элемента с помощью Tab, нажатие CTRL для выбора множества элементов и т.д. Все эти  парадигмы взаимодействия доступны программистам WPF и осуществляются проще, чем в Windows Forms.

image

Рис. 2. Прохождение информации от пользователя черех WPF.

 

Опыт использования

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

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

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

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

Элементы управлениямогут быть динамичными и изменять свое состояние с течением времени. Однако это нужно использовать аккуратно: использование особо красивых анимации для смены состояний элементов может шокировать пользователя.

 

Заключение

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

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

image

Больше узнать можно в книге WPF Control Development

5 комментариев:

  1. И что бы мы делали без вашей очень хорошей идеи

    ОтветитьУдалить
  2. 2006 mens fashion http://foreverfashion.eu/anya-hindmarch_g111.html 1997 fashion

    ОтветитьУдалить
  3. pharmacy news colorado http://usadrugstoretoday.com/products/valtrex.htm pharmacy gold

    ОтветитьУдалить
  4. meridia no prescription usa pharmacy http://usadrugstoretoday.com/products/ed-discount-pack-3.htm us pharmacy schools

    ОтветитьУдалить
  5. В статье не отображаются изображения

    ОтветитьУдалить