Разработка пользовательского интерфейса бизнес-приложения на основе экранов
Экран также может иметь пользовательский код, который используется для настройки требуемого поведения экрана и реализации необходимой бизнес-логики. Для перехода в режим редактирования кода используется кнопка Запись кода в окне дизайнера.
На рисунке представлен образец экрана, который разделен на две части, в левой части – список студентов, а в правой – две таблицы с описанием студента и списком его оценок. Указанное размещение достигается за счет использования элементов Макет столбцов и Макет строк. Элемент Макет столбцов делит экран на две части, а элемент Макет строк размещает последовательно друг под другом различные элементы ( рис. 6.11) .
Использование этих типов макетов позволяет выделить регионы и подрегионы на экране и управлять их размещением.
Подробнее рассмотрим элементы, которые могут использоваться на экранах. Элементы можно условно разделить на две группы: элементы макетирования и элементы управления. Элементы макетирования позволяют определять размещение других элементов, а с помощью элементов управления реализуется пользовательский интерфейс.
К основным элементам макетирования, определяющих относительные позиции подчиненных элементов относятся: Макет строк, Макет столбцов, Макет таблицы, Макет вкладок, Модальное окно.
Элементы коллекции, к которым относятся Сетка данных (Data Grid) и Список отображают информацию из источника данных. Для каждой записи источника выводится одна строка в списковой коллекции. Эти элементы – одни из наиболее часто используемых, т.к. они представляют собой естественное отображение данных из таблиц реляционной базы данных.
Композиционные элементы (например, редактор Адреса) состоят из нескольких связанных элементов управления, объединенных единой логикой использования и редактирования информации.
Все элементы макетирования и коллекции представляют собой группы, Экран может рассматриваться как объединение групп, связанных единой логикой интерфейса для обеспечения редактирования фрагмента информации. Группы могут находиться в подчинении друг у друга в виде иерархии.
Кроме групповых элементов на экране располагаются простые элементы, представляющие собой стандартные интерфейсные элементы Silverlight, например, Текстовое поле или Подпись. Такие элементы не имеют подчиненных.
Особый вид и место имеет элемент Панель команд который позволяет определить какие командные кнопки будут отображаться на панели.
Большинство групповых элементов могут обладать собственным элементом Панель команд. При этом он добавляется в них автоматически при создании элемента. В зависимости от расположения Панель команд отображается по-разному. Для корневого элемента он выводится как ленточный интерфейс. Для строки таблицы данных как дополнительный столбец таблицы с кнопками. Для других элементов как отдельная строка с кнопками. Кнопки связаны со стандартными операциями, но имеется возможность создавать пользовательские кнопки, связываемые с пользовательским кодом. Для кнопок на ленте можно задавать вид изображения через команду Выберите изображение.
Различные элементы в LightSwitch имеют собственный набор свойств. Ряд свойств является общими для различных элементов. Это позволяет сгруппировать свойства и рассмотреть их в общем виде.
- Свойства размера и внешнего вида включают: горизонтальное и вертикальное выравнивание, которые могут быть по соответствующим направлениям или растягиванием. По умолчанию установлен режим растягивания, что является наиболее используемым и удобным способом выравнивания и означает, что элемент будет занимать все свободное место под него.
- Свойства Ширина и Высота установлены в значении Auto, для них можно задать определенные границы через свойства Мин. ширина / Мин. высота и Макс. ширина / Макс. высота. Также можно точно указать размер через свойство точек (знаков, строк).
- Включить и выключить элемент, в том числе и программно, можно через свойство Является видимым.
- Свойство Положение подписи определяет расположение названия радом с элементом ( рис. 6.12).
Рассмотрим общий алгоритм создания и настройки экрана без использования шаблонов.
- Необходимо добавить новый экран в секцию экраны.
- Следующий шаг состоит в подготовке данных экрана. Для этого необходимо нажать кнопку Добавить элемент данных и выбрать требуемый запрос или запросы, они появляются слева в списке экрана.
- Затем полученные данные перенести в область построения экрана, в результате автоматически будет создана таблица данных, связанная с этим запросом.
- Другой способ состоит в использовании кнопки Добавить в области построения. Из появляющегося меню можно выбрать требуемый элемент данных.
- Для добавляемых элементов можно в любой момент изменять вид раскладки. Также можно добавить первоначально пустой элемент раскладки, а затем в него перенести нужные данные.
После создания экрана существует возможность более точной его подстройки. Для этого необходимо запустить проект, открыть созданный экран и перейти в режим его настройки нажав кнопку Экран конструктора. В этом режиме слева отображается иерархическое дерево элементов экрана, а снизу панель свойств. Также отображается предпросмотр изменений. Этот режим можно рассматривать как альтернативу обычной разработки в редакторе форм, но данный подход является боле практичным, т.к. в элементах отображаются реальные данные и разработчик точно видит экран, как он будет отображаться для конечного пользователя ( рис. 6.14).
Завершая указанную лекцию, следует отметить, что были рассмотрены только базовые принципы создания интерфейсных экранов в LightSwitch. Вместе с тем, даже они покрывают более 80% требований для разработки интерфейсов приложений, основанных на данных. Как уже было указано, имеется возможность использования других элементов управления, а также создание нестандартных интерфейсных решений, например, внедрение карт, это достигается через использование механизмов расширения.
Краткие итоги
- Для перемещения между экранами приложения используется навигационная панель, которая располагается слева в окне приложения.
- Элементы навигационной панели создаются автоматически в ходе добавления экранов, при необходимости их можно редактировать в окне Свойства проекта на панели Навигация по экранам.
- Базовым интерфейсным элементом является Экран, который может быть создан путем добавления необходимые элементы в специальном конструкторе, либо использовать один из готовых шаблонов.
- Экран Новый экран данных отображается, если нажать кнопку Добавить на экранах редактирования таблиц.
- Экран Поиск данных представляет данные в режиме только для чтения и используется для быстрого поиска требуемой записи или отбора информации для экспорта.
- В режиме разработки экрана интерфейс LightSwitch состоит из трех частей: панель источников данных, дизайнер экрана и окно свойств элементов.
- К основным элементам макетирования, определяющих относительные позиции подчиненных элементов относятся: Макет строк, Макет столбцов, Макет таблицы, Макет вкладок, Модальное окно
- Различные элементы в LightSwitch имеют собственный набор свойств.
- После создания экрана существует возможность более точной его подстройки, для этого необходимо использовать кнопку Экран конструктора расположенную в правом верхнем углу окна приложения.