Данная тема отчасти была навеяна серией статей Бреда Абрамса о разработке бизнес-приложений с использованием Silverlight 3 и .NET RIA Services, а частично книгой Web Form Design: Filling in the Blanks (автор Luke Wroblewski). В книге рассказывается об удобном представлении для пользователя различных онлайн-форм с целью быстрого и качественного сбора информации. Про правильную разработку форм для Silverlight-приложений тут не сказано. Но, тем не менее, почему бы не применить знания с одной области для другой? Тем более что Silverlight-приложение в первую очередь является веб-приложением.
Что ж, если мы представляем себе бизнес-приложение, то в первую очередь мы думаем о том, что оно действительно должно быть профессиональным как по реализации его функциональности, так и по дизайну.
SNA, SBA
Один из легких путей в этом направлении – создание такого приложения из Visual Studio 2008 на основе шаблонов Silverlight Navigation Application или Silverlight Business Application (с поддержкой login\logout). В Expression Blend 3 при создании проекта такая возможность отсутствует. Надеемся что пока :)
Достаточно выбрать необходимый шаблон (например, Silverlight Navigation Application), нажать кнопку создания проекта и у Вас уже будет необходимая минимальная структура из двух страниц с поддержкой навигации между ними. Добавить любое другое кол-во страниц можно следующим способом:
-
в Solution Explorer кликнуть правой кнопкой мыши на папке Views, выбрать пункт Add New Item и затем Silverlight Page, задать имя страницы (например, Contact).
-
Кроме этого необходимо добавить возможность перехода на эту страничку с остальных. Для этого в файле MainPage.xaml в элементе StackPanel с названием LinksStackPanel, по аналогии с существующими гиперссылками, добавим еще одну и разделитель между пунктами в виде прямоугольника.
…
<Rectangle x:Name="Divider2" Style='{StaticResource DividerStyle}'/>
<HyperlinkButton x:Name="Link3" Style='{StaticResource LinkStyle}' NavigateUri='/Contact' TargetName='ContentFrame' Content='contact'/>
…
В том же файле MainPage.xaml можно изменить заголовок приложения в шапке, присвоив соответствующему атрибуту текстового блока с именем ApplicationNameTextBlock - новое значение. После этого, можно запустить приложение и убедиться что две базовые страницы и одна новая присутствуют, но на странице контактов пока еще ничего нет. Открываем файл Contact.xaml и нагло скопируем в него содержимое Grid-a, например, с файла Home.xaml, изменив после этого заголовок для текста.
Темы
Также, по умолчанию Ваше приложение будет оформлено в лучших традициях, а точнее, будет применена стандартная тема. Сейчас доступно 7 новых тем, которые можно загрузить с сайта Microsoft Expression, распаковать и всего лишь заменить в проекте соответствующий файл Styles.xaml. Больше править ничего не нужно. The Best of The Best, наверное, это Skyline и Aurora (также есть и для .NET RIA Services Template) а также совсем свежие - вчера добавленные Seeing Sound и Mediterranean Sun. Вряд ли кому-то приглянется розовая тема Pinky, но мало ли, все бывает :)
При желании можно подправить цвета у стандартной темы в файле Styles.xaml, а можно сделать свою тему.
Кстати, не смотря на то, что в Expression Blend нельзя создать с самого начала новый проект Silverlight Navigation Application или Silverlight Business Application, не стоит отчаиваться. Как мы уже давно все знаем, мы можем открыть в Expression Blend 3 проект, созданный в Visual Studio 2008. В этом случае тот же функционал, которым мы воспользовались для добавления новой страницы в проект – доступен и в Blend.
Ну и конечно, цвета приложения подправить и поменять проще будет также в Blend. В закладке Resources мы видим полный список кистей и стилей.
Добавление формы
Основные минимальные приготовления мы сделали, теперь пришло время вернуться к формам. Кому ближе Expression Blend 3 – тот может остаться в этом инструменте. Кому – Visual Studio 2008 – тоже пожалуйста. Ради эксперимента даже можно открыть и поработать над проектом через Visual Studio 2010 Beta 1.
Открываем в Expresssion Blend 3 файл Contact.xaml.
В Expression Blend 3 есть замечательная панель Assets, которую всегда можно держать под рукой. Воспользовавшись поиском, найдем элемент управления DataForm, который нам как раз и нужен для добавления на страницу контактов.
И перетаскиваем его на рабочую область, так чтобы он находился в элементе StackPanel с именем ContentStackPanel.
Наш элемент формы в коде выглядит так:
<dataFormToolkit:DataForm />
Теперь добавим в наш проект небольшой класс ContactPerson
public class ContactPerson
{
public string FirstName { get; set; }
public string EmailAddress { get; set; }
public string Subject { get; set; }
public string Text { get; set; }
}
Для тестирования добавим в ресурсы нашей страницы контактов следующую запись:
<navigation:Page.Resources>
<local:ContactPerson
FirstName="" EmailAddress="" Subject="Message from site"
Text="Hello, " x:Key="MyContact" />
</navigation:Page.Resources>
В качестве текущего элемента для формы укажем наш ресурс:
<dataFormToolkit:DataForm CurrentItem="{StaticResource MyContact}" >
Можно прописать вручную в коде, а можно выбрать через панель свойств:
После чего уже в рабочей области Expression Blend 3 у Вас покажутся заветные поля.
Запустив приложение, и перейдя на нашу страницу контактов, мы увидим следующее:
Настройка формы
Теперь мы уже подошли гораздо ближе к настройке и изменению внешнего вида нашей формы.
Первое, что сразу бросается в глаза, это название меток к полям. Мы воспользуемся механизмом атрибутов для данной настройки.
Атрибуты – как подсказка к полям
Первое, что сделаем, в файле ContactPerson.cs подключим соответствующее пространство имен:
using System.ComponentModel.DataAnnotations;
Теперь, сделаем следующие изменения в нашем классе ContactPerson:
public class ContactPerson
{
[Display(Name="First Name:")]
public string FirstName { get; set; }
[Display(Name="Your e-mail:")]
public string EmailAddress { get; set; }
[Display(Name = "Subject:")]
public string Subject { get; set; }
[Display(Name="Your message:")]
public string Text { get; set; }
}
Теперь после запуска, мы увидим, что текст наших меток поменялся.
На этом возможности атрибутов не заканчиваются. Хорошим тоном будет задание подсказки к полям. Например, можно указать, какие являются обязательными для заполнения, либо дать какую-то расшифровывающую информацию.
Делается это с помощью задания второго параметра Description для атрибута:
[Display(Name = "Your e-mail:", Description = "Required. We could contact with you by e-mail.")]
После чего, в вашем приложении, возле соответствующего поля появится маленькая иконка ( i ), наведя мышку на которую – появится подсказка.
Кнопки
Нам необходимо несколько кнопок для нашей формы. Укажем следующие свойств для формы:
AutoCommit="True" CommandButtonsVisibility="Commit,Cancel" CommitButtonContent="Send" CancelButtonContent="Cancel"
Валидация
Отдельным атрибутом [Required()] можно указать обязательные поля.
Визуально они будут показаны более жирным текстом. Если поле не заполнено, то после нажатия кнопки отправки – будет выведено сообщение об ошибке.
Также с помощью атрибутов можно провести проверку на корректность ввода, например для e-mail это будет выглядеть следующим образом:
[RegularExpression(@"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", ErrorMessage="Provide valid e-mail")]
В итоге, если форма заполнена некорректно, то после нажатия кнопки “Send” мы увидим следующее:
Улучшение внешнего вида формы
Теперь хотелось привести некоторые советы по расположению элементов формы и их внешнего вида.
Позиционирование меток
Существует три общераспространенных метода расположения меток к полям ввода.
- Метки, выровненные по верхнему краю
- Метки, выровненные по правому краю
- Метки, выровненные по левому краю
Метки, выровненные по верхнему краю
Этим элементам характерны следующие утверждения:
- Собираемые данные известны и легко вспоминаемы
- Необходимо минимальное время для заполнения
- Требуется больше вертикального пространства
- Требуется больше пространства между элементами или дополнительного контраста
- Гибкость для локализации
С помощью свойства LabelPosition="Top" для элемента dataFormToolkit:DataForm есть возможность расположить метки, выровненные по верхнему краю.
Метки, выровненные по правому краю (по умолчанию в DataForm)
Этим элементам характерны следующие утверждения:
- Очевидная ассоциация между меткой и полем
- Требует меньше вертикального пространства
- Тяжелее визуально сканировать метки (мы привыкли читать с левого края)
- быстрое время заполнения формы
Метки, выровненные по левому краю
Этим элементам характерны следующие утверждения:
- Собираемые данные неизвестны или трудно вспоминаемы
- Легкое визуальное сканирование меток
- Менее очевидная ассоциация между меткой и полем
- Требует меньше вертикального пространства
- изменение длины метки может нарушить положение остальных элементов
Рекомендации по выбору выравнивания меток:
- Для уменьшения времени заполнения форм легко вспоминаемыми данными - используйте выравнивание по верхнему краю
- Когда необходимо экономить вертикальное пространство экрана - используйте выравнивание по правому краю
- При заполнении формы большим кол-вом данных или трудно вспоминаемыми данными используйте выравнивание по левому краю
Группировка контента
Если форма содержит большое кол-во полей, используйте релевантную группировку контента. Это позволит организовать форму более эффективно и позволит осуществить более быстрый визуальный поиск. Группы можно разделить большим пространством между группами, цветом фона, рамкой.
Обязательные для заполнения поля
Мы с вами рассмотрели - как с помощью атрибутов можно указать обязательные для заполнения поля.
Еще некоторые общие рекомендации
- Старайтесь избегать необязательных полей
- Если большинство полей обязательны - поставьте визуальные отметки возле необязательных полей
- Если большинство полей необязательны - поставьте визуальные отметки возле обязательных полей
- Информационная иконка с текстом - замечательный элемент. Но обычная * работает эффективнее
Помощь в заполнении формы
Один из способов, который мы с Вами рассмотрели – подсказки к полям. Положение этой иконки также можно поменять. По умолчанию она справа. Но ее можно расположить между меткой и полем для ввода, что гораздо удобнее при длинных полях ввода.
Сделать это можно с помощью свойства DescriptionViewerPosition="BesideLabel"
Общие рекомендации
- Минимизируйте кол-во подсказок, необходимых для заполнения формы
- При большом кол-ве данных, обязательных для заполнения - используйте динамическую систему отображения подсказок
Взаимодействие с пользователем
Если форма содержит большое кол-во полей - покажите прогресс заполнения формы. Если путь заполнения формы нелинейный - расставьте индексы табуляции.
Итоги
Сегодня мы рассмотрели аспекты создания форм и повышение их юзабилити. Конечно же, мы не рассмотрели еще стилизацию элементов формы. Но об этом в следующий раз :)
Что можно почитать и посмотреть:
Оригинал: Формы в Silverlight-приложениях. В бизнес Silverlight-приложениях.
Опубликовано
14 августа 2009, 03:51
, автор -
Helen