Разработка облачных бизнес-приложений с использованием Visual Studio LightSwitch 2011

Разработка пользовательского интерфейса бизнес-приложения на основе экранов

Разбить на страницы
Показывать лекцию целиком

Цель лекции: познакомить с концепцией построения интерфейсов на основе экранов, изучить редактор экранов и основные элементы управления LightSwitch.

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

Рассмотрим эти элементы по порядку.

Навигационная панель.

(рис 6.1) Навигационная панель

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

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

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

    (рис 6.2) Управление экранами

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

    Окно настройки вызывается двойным щелчком по ссылке Свойства в Инспекторе проекта.

    Таким образом, видно, что навигационная панель является удобным механизмом вызова различных экранов. Другим способом реализации навигации по экранам в проекте является создание и использование пользовательских кнопок на панели инструментов. С каждой кнопкой ассоциируется событие, в которое можно добавить необходимый код, в том числе и код вызова экранов с параметрами. Еще одним способом реализации переходов является использование элементов List и Data с гиперссылками через свойство "Summary". Когда пользователь выбирает такую гиперссылку, происходит переход на соответствующую форму для ее редактирования. Настройка такого поведения осуществляется в окне свойств экрана, через установку свойства Show as Link, при этом активизируется список подлинных форм, где можно выбрать необходимую. Если форму не выбирать, то будет использована автоматически сгенерированная форма для редактирования.

    Шаблоны экранов.

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

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

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

  • Выберите кнопку Экран в режиме дизайна таблиц или команду Добавить экран в контекстном меню инспектора проекта;
  • Выберите шаблон Экран со списком и подробными сведениями;
  • Выберите таблицу Группы в списке Данные экрана и установите флажок ГруппыItem Сведения.
  • Установите имя для экрана, например СтудентыПоГруппам.
  • В результате будет сгенерирован шаблон этого экрана, рис 6.3.
    •  (рис 6.3) Конструктор экрана

    При запуске этот экран будет иметь следующий вид (рис 6.4).

    (рис 6.4) Вид экрана в работающем приложении

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

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

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

    Для настройки автогенерации детальных экранов необходимо выполнить следующие действия:

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

    Название групп будут отображаться в виде ссылок, щелчок по которым вызовет сгенерированное окно редактирования подробных сведений (рис 6.5).

    (рис 6.5) Экран подробных сведений

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

    Для этого необходимо выполнить следующие шаги (пример для таблицы Студенты):

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

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

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

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

    Экран ).

    (рис 6.6) Новый экран данных

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

  • в режиме редактирования для полей установить требуемое название через свойство Отображаемое имя;
  • для скрытия элемента можно сбросить его флажок Является видимым.
    •

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

    Для использования этого окна необходимо вызвать его в коде:

  • Откройте окно с редактируемой таблицей в дизайнере. Например, в нашем случае окно Редактор факультетов.
  • Раскройте узел ). (рис 6.7) Добавление кнопки
  • Выберите пункт Изменить код Execute
  • Запишите в редактор строки 
            partial void gridAddAndEditNew_Execute()
        {
            // Write your code here.
            Application.ShowСозданиеФакультета();
        }

    • В результате для добавления нового факультета будет вызываться специальное окно приведённое на рисунке 6.8 .

    (рис 6.8) Экран добавления информации

    Это окно позволяет добавить не только факультет, но связанную с ним информацию о группах и преподавателях.

    Шаблон ).

    (рис 6.9) Включение поиска

    Информация из таблиц данных может быть легко экспортирована в Excel. Для этого используется соответствующая кнопка на панели над таблицей. В ходе экспорта создается новая рабочая книга, первый лист которой имеет имя, как и таблица из которой выполняется экспорт. Первая строка имеет имена – совпадающие с именами полей, а строки ниже содержат данные. Таблица никак не форматируется. Механизм экспорта в Excel является одним из способов создания отчетов. Другие способы связаны с использованием либо SQL Server Reporting Services, либо применения сторонних расширений для создания отчетов, например от компании Infragrastics.

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

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

    В режиме разработки экрана интерфейс LightSwitch состоит из трех частей:

  • Элементы данных экрана располагаются слева в дизайнере LightSwitch IDE. Представляет собой данные, с которыми работает интерфейс экрана. В качестве таких данных могут выступать коллекции сущностей, отдельные (единичные) сущности, а также скалярные значения. Также здесь отображаются команды, как встроенные (обновление, сохранение), так и созданные разработчиком.
  • В центре экрана отображается контекстное дерево экрана, определяющее иерархию, взаимосвязь и расположение элементов управления. Контекстное дерево состоит из элементов управления. Некоторые элементы обеспечивают только механизмы правильного расположения элементов интерфейса и не имеют собственного отображения, и не связаны с элементами данных. Другие реализуют пользовательский интерфейс и имеют связь с элементами данных или единичные значения.
  • В правой части располагается Инспектор проекта и окно свойств проекта (рис 6.10). (рис 6.10) Элементы конструктора экрана
    •

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

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

    (рис 6.11) Использование Макета строк

    Использование этих типов макетов позволяет выделить регионы и подрегионы на экране и управлять их размещением.

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

    К основным элементам макетирования, определяющих относительные позиции подчиненных элементов относятся: Макет строк, Макет столбцов, Макет таблицы, Макет вкладок, Модальное окно.

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

    Композиционные элементы (например, редактор Адреса) состоят из нескольких связанных элементов управления, объединенных единой логикой использования и редактирования информации.

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

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

    Особый вид и место имеет элемент Панель команд который позволяет определить какие командные кнопки будут отображаться на панели.

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

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

  • Свойства размера и внешнего вида включают: горизонтальное и вертикальное выравнивание, которые могут быть по соответствующим направлениям или растягиванием. По умолчанию установлен режим растягивания, что является наиболее используемым и удобным способом выравнивания и означает, что элемент будет занимать все свободное место под него.
  • Свойства Ширина и Высота установлены в значении Auto, для них можно задать определенные границы через свойства Мин. ширина / Мин. высота и Макс. ширина / Макс. высота. Также можно точно указать размер через свойство точек (знаков, строк).
  • Включить и выключить элемент, в том числе и программно, можно через свойство Является видимым.
  • Свойство ). (рис 6.12) Окно Свойства экрана
    •

    Рассмотрим общий алгоритм создания и настройки экрана без использования шаблонов.

  • Необходимо добавить новый экран в секцию экраны.
  • Следующий шаг состоит в подготовке данных экрана. Для этого необходимо нажать кнопку Добавить элемент данных и выбрать требуемый запрос или запросы, они появляются слева в списке экрана. (рис 6.13) Выбор запроса для экрана
  • Затем полученные данные перенести в область построения экрана, в результате автоматически будет создана таблица данных, связанная с этим запросом.
  • Другой способ состоит в использовании кнопки Добавить в области построения. Из появляющегося меню можно выбрать требуемый элемент данных.
  • Для добавляемых элементов можно в любой момент изменять вид раскладки. Также можно добавить первоначально пустой элемент раскладки, а затем в него перенести нужные данные.

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

    (рис 6.14) Настройка экрана в дизайнере

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

    Краткие итоги

  • Для перемещения между экранами приложения используется навигационная панель, которая располагается слева в окне приложения.
  • Элементы навигационной панели создаются автоматически в ходе добавления экранов, при необходимости их можно редактировать в окне Свойства проекта на панели Навигация по экранам.
  • Базовым интерфейсным элементом является Экран, который может быть создан путем добавления необходимые элементы в специальном конструкторе, либо использовать один из готовых шаблонов.
  • Экран Новый экран данных отображается, если нажать кнопку Добавить на экранах редактирования таблиц.
  • Экран Поиск данных представляет данные в режиме только для чтения и используется для быстрого поиска требуемой записи или отбора информации для экспорта.
  • В режиме разработки экрана интерфейс LightSwitch состоит из трех частей: панель источников данных, дизайнер экрана и окно свойств элементов.
  • К основным элементам макетирования, определяющих относительные позиции подчиненных элементов относятся: Макет строк, Макет столбцов, Макет таблицы, Макет вкладок, Модальное окно
  • Различные элементы в LightSwitch имеют собственный набор свойств.
  • После создания экрана существует возможность более точной его подстройки, для этого необходимо использовать кнопку Экран конструктора расположенную в правом верхнем углу окна приложения.
    • Страницы:

    Цель лекции: познакомить с концепцией построения интерфейсов на основе экранов, изучить редактор экранов и основные элементы управления LightSwitch.

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

    Рассмотрим эти элементы по порядку.

    Навигационная панель.

    (рис 6.1) Навигационная панель

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

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

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

    (рис 6.2) Управление экранами

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

    Окно настройки вызывается двойным щелчком по ссылке Свойства в Инспекторе проекта.

    Таким образом, видно, что навигационная панель является удобным механизмом вызова различных экранов. Другим способом реализации навигации по экранам в проекте является создание и использование пользовательских кнопок на панели инструментов. С каждой кнопкой ассоциируется событие, в которое можно добавить необходимый код, в том числе и код вызова экранов с параметрами. Еще одним способом реализации переходов является использование элементов List и Data с гиперссылками через свойство "Summary". Когда пользователь выбирает такую гиперссылку, происходит переход на соответствующую форму для ее редактирования. Настройка такого поведения осуществляется в окне свойств экрана, через установку свойства Show as Link, при этом активизируется список подлинных форм, где можно выбрать необходимую. Если форму не выбирать, то будет использована автоматически сгенерированная форма для редактирования.

    Шаблоны экранов.

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

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

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

  • Выберите кнопку Экран в режиме дизайна таблиц или команду Добавить экран в контекстном меню инспектора проекта;
  • Выберите шаблон Экран со списком и подробными сведениями;
  • Выберите таблицу Группы в списке Данные экрана и установите флажок ГруппыItem Сведения.
  • Установите имя для экрана, например СтудентыПоГруппам.
  • В результате будет сгенерирован шаблон этого экрана, рис 6.3.
    •  (рис 6.3) Конструктор экрана

    При запуске этот экран будет иметь следующий вид (рис 6.4).

    (рис 6.4) Вид экрана в работающем приложении

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

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

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

    Для настройки автогенерации детальных экранов необходимо выполнить следующие действия:

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

    Название групп будут отображаться в виде ссылок, щелчок по которым вызовет сгенерированное окно редактирования подробных сведений (рис 6.5).

    (рис 6.5) Экран подробных сведений

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

    Для этого необходимо выполнить следующие шаги (пример для таблицы Студенты):

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

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

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

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

    Экран ).

    (рис 6.6) Новый экран данных

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

  • в режиме редактирования для полей установить требуемое название через свойство Отображаемое имя;
  • для скрытия элемента можно сбросить его флажок Является видимым.
    •

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

    Для использования этого окна необходимо вызвать его в коде:

  • Откройте окно с редактируемой таблицей в дизайнере. Например, в нашем случае окно Редактор факультетов.
  • Раскройте узел ). (рис 6.7) Добавление кнопки
  • Выберите пункт Изменить код Execute
  • Запишите в редактор строки 
            partial void gridAddAndEditNew_Execute()
        {
            // Write your code here.
            Application.ShowСозданиеФакультета();
        }

    • В результате для добавления нового факультета будет вызываться специальное окно приведённое на рисунке 6.8 .

    (рис 6.8) Экран добавления информации

    Это окно позволяет добавить не только факультет, но связанную с ним информацию о группах и преподавателях.

    Шаблон ).

    (рис 6.9) Включение поиска

    Информация из таблиц данных может быть легко экспортирована в Excel. Для этого используется соответствующая кнопка на панели над таблицей. В ходе экспорта создается новая рабочая книга, первый лист которой имеет имя, как и таблица из которой выполняется экспорт. Первая строка имеет имена – совпадающие с именами полей, а строки ниже содержат данные. Таблица никак не форматируется. Механизм экспорта в Excel является одним из способов создания отчетов. Другие способы связаны с использованием либо SQL Server Reporting Services, либо применения сторонних расширений для создания отчетов, например от компании Infragrastics.

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

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

    В режиме разработки экрана интерфейс LightSwitch состоит из трех частей:

  • Элементы данных экрана располагаются слева в дизайнере LightSwitch IDE. Представляет собой данные, с которыми работает интерфейс экрана. В качестве таких данных могут выступать коллекции сущностей, отдельные (единичные) сущности, а также скалярные значения. Также здесь отображаются команды, как встроенные (обновление, сохранение), так и созданные разработчиком.
  • В центре экрана отображается контекстное дерево экрана, определяющее иерархию, взаимосвязь и расположение элементов управления. Контекстное дерево состоит из элементов управления. Некоторые элементы обеспечивают только механизмы правильного расположения элементов интерфейса и не имеют собственного отображения, и не связаны с элементами данных. Другие реализуют пользовательский интерфейс и имеют связь с элементами данных или единичные значения.
  • В правой части располагается Инспектор проекта и окно свойств проекта (рис 6.10). (рис 6.10) Элементы конструктора экрана
    •

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

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

    (рис 6.11) Использование Макета строк

    Использование этих типов макетов позволяет выделить регионы и подрегионы на экране и управлять их размещением.

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

    К основным элементам макетирования, определяющих относительные позиции подчиненных элементов относятся: Макет строк, Макет столбцов, Макет таблицы, Макет вкладок, Модальное окно.

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

    Композиционные элементы (например, редактор Адреса) состоят из нескольких связанных элементов управления, объединенных единой логикой использования и редактирования информации.

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

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

    Особый вид и место имеет элемент Панель команд который позволяет определить какие командные кнопки будут отображаться на панели.

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

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

  • Свойства размера и внешнего вида включают: горизонтальное и вертикальное выравнивание, которые могут быть по соответствующим направлениям или растягиванием. По умолчанию установлен режим растягивания, что является наиболее используемым и удобным способом выравнивания и означает, что элемент будет занимать все свободное место под него.
  • Свойства Ширина и Высота установлены в значении Auto, для них можно задать определенные границы через свойства Мин. ширина / Мин. высота и Макс. ширина / Макс. высота. Также можно точно указать размер через свойство точек (знаков, строк).
  • Включить и выключить элемент, в том числе и программно, можно через свойство Является видимым.
  • Свойство ). (рис 6.12) Окно Свойства экрана
    •

    Рассмотрим общий алгоритм создания и настройки экрана без использования шаблонов.

  • Необходимо добавить новый экран в секцию экраны.
  • Следующий шаг состоит в подготовке данных экрана. Для этого необходимо нажать кнопку Добавить элемент данных и выбрать требуемый запрос или запросы, они появляются слева в списке экрана. (рис 6.13) Выбор запроса для экрана
  • Затем полученные данные перенести в область построения экрана, в результате автоматически будет создана таблица данных, связанная с этим запросом.
  • Другой способ состоит в использовании кнопки Добавить в области построения. Из появляющегося меню можно выбрать требуемый элемент данных.
  • Для добавляемых элементов можно в любой момент изменять вид раскладки. Также можно добавить первоначально пустой элемент раскладки, а затем в него перенести нужные данные.

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

    (рис 6.14) Настройка экрана в дизайнере

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

    Краткие итоги

  • Для перемещения между экранами приложения используется навигационная панель, которая располагается слева в окне приложения.
  • Элементы навигационной панели создаются автоматически в ходе добавления экранов, при необходимости их можно редактировать в окне Свойства проекта на панели Навигация по экранам.
  • Базовым интерфейсным элементом является Экран, который может быть создан путем добавления необходимые элементы в специальном конструкторе, либо использовать один из готовых шаблонов.
  • Экран Новый экран данных отображается, если нажать кнопку Добавить на экранах редактирования таблиц.
  • Экран Поиск данных представляет данные в режиме только для чтения и используется для быстрого поиска требуемой записи или отбора информации для экспорта.
  • В режиме разработки экрана интерфейс LightSwitch состоит из трех частей: панель источников данных, дизайнер экрана и окно свойств элементов.
  • К основным элементам макетирования, определяющих относительные позиции подчиненных элементов относятся: Макет строк, Макет столбцов, Макет таблицы, Макет вкладок, Модальное окно
  • Различные элементы в LightSwitch имеют собственный набор свойств.
  • После создания экрана существует возможность более точной его подстройки, для этого необходимо использовать кнопку Экран конструктора расположенную в правом верхнем углу окна приложения.
    • Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^