Поделиться через


Пошаговое руководство. Создание приложения Vision Clinic в LightSwitch

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

Обязательные компоненты

Загрузите базу данных PrescriptionContoso из коллекции исходных кодов MSDN.

Шаги

  • Создание проекта

    Создайте проект приложения.

  • Определение таблиц

    Добавьте сущности "Пациент", "Счет" и "Сведения о счете".

  • Создание списка значений

    Создайте список значений.

  • Определение отношения

    Привяжите связанные таблицы.

  • Добавление другой сущности

    Добавьте сущность "Прием".

  • Создание экрана

    Создайте экран для отображения сведений о любом пациенте.

  • Запуск приложения

    Запустите приложение и введите данные.

  • соединиться с базой данных

    Подключитесь к внешней базе данных.

  • Внесение изменений в сущности

    Измените сущности "Продукты" и "Скидки по продуктам".

  • Создание экрана списка и сведений

    Создайте экран для отображения продуктов.

  • Изменение макета экрана

    Измените макет экрана "Список продуктов".

  • Внесение изменений в среду выполнения

    Внесите изменения в работающее приложение.

  • Создание запроса

    Создайте параметризованный запрос и привяжите его к экрану.

  • Добавление вычисляемого поля

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

  • Создание отношения между базами данных

    Создайте виртуальную связь между сущностями в различных базах данных.

  • Создание экрана счетов

    Создайте экран для отображения счетов.

  • Изменение экрана счетов

    Измените макет экрана "Счета" в работающем приложении.

  • Добавление логики экрана

    Создайте код для вычисления дат.

  • Добавление дополнительных вычисляемых полей

    Создайте дополнительные вычисляемые поля и добавьте их на экран счетов.

  • Добавление мобильного клиента

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

Создание проекта

В качестве первого шага в создании приложения LightSwitch следует создать проект для этого приложения.

Создание проекта

  1. В строке меню выберите Файл, Создать проект.

    Откроется диалоговое окно Новый проект.

  2. В списке Установленные шаблоны разверните узел Visual Basic или Visual C# и выберите узел LightSwitch.

  3. В центральной области выберите шаблон Классическое приложение LightSwitch.

  4. В текстовом поле Имя введите "Vision Clinic" и нажмите кнопку ОК.

    Откроется окно Конструктор. Vision Clinic, а необходимые папки для проекта будут добавлены в окно Обозреватель решений.

    Проект Vision Clinic

Определение таблиц

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

Создание сущности "Пациент"

  1. В окне Конструктор. Vision Clinic выберите ссылку Создать таблицу.

    Откроется конструктор данных. В окне Solution Explorer узел Table1Items находится в узле Источники данных в проекте Vision Clinic.Server.

  2. В окне Свойства назовите таблицу Patient и нажмите клавишу ВВОД.

    Имя в строке заголовка области Конструктор данных изменится на Patient, и имя в области Обозреватель решений изменится на Patients.lsml.

  3. В столбце Имя раздела Конструктор данных выберите ссылку <Добавить свойство>, введите Name и нажмите клавишу ВВОД.

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

  4. В столбце Имя выберите ссылку <Добавить свойство> и введите Street.

  5. В столбце Имя выберите ссылку <Добавить свойство> и введите Street2.

  6. Снимите флажок в столбце Обязательный.

    Вторая строка адреса является необязательной.

  7. В столбце Имя выберите ссылку <Добавить свойство> и введите City.

  8. В столбце Имя выберите ссылку <Добавить свойство> и введите State.

  9. В столбце Имя выберите ссылку <Добавить свойство> и введите Zip.

  10. В столбце Имя выберите ссылку <Добавить свойство> и введите PrimaryPhone.

  11. В столбце Тип откройте список, а затем выберите PhoneNumber.

    PhoneNumber — это пользовательский бизнес-тип, представляющий общий шаблон для ввода и форматирования телефонных номеров.

  12. Снимите флажок в столбце Обязательный.

  13. В столбце Имя выберите ссылку <Добавить свойство> и введите SecondaryPhone.

  14. В столбце Тип откройте список, а затем выберите PhoneNumber.

  15. Снимите флажок в столбце Обязательный.

  16. В столбце Имя выберите ссылку <Добавить поле> и введите Email.

  17. В столбце Тип откройте список, а затем выберите EmailAddress.

    EmailAddress — еще один пользовательский бизнес-тип, представляющий адрес электронной почты с правильным форматом.

  18. Снимите флажок в столбце Обязательный.

  19. В столбце Имя выберите ссылку <Добавить свойство> и введите PolicyNumber.

  20. В окне Свойства задайте для свойства Максимальная длина значение 12.

    Это значение не позволит пользователям вводить номер полиса, состоящий более чем из 12 знаков.

    Сущность Patient

  21. В окне Свойства снимите флажок свойств Создано/Изменено.

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

  22. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

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

Создание сущностей Invoice и InvoiceDetail

  1. В области Обозреватель решений выберите узел Data Sources, а затем в строке меню выберите Проект и Добавить таблицу.

    Откроется новый экземпляр конструктора данных.

  2. В окне Свойства задайте для свойства Имя значение Invoice и нажмите клавишу ВВОД.

  3. В столбце Имя выберите ссылку <Добавить свойство>, введите InvoiceDate и нажмите клавишу TAB.

  4. В столбце Тип откройте список, а затем выберите Дата/Время.

  5. В столбце Имя выберите ссылку <Добавить свойство>, введите InvoiceDue и нажмите клавишу TAB.

  6. В столбце Тип откройте список, а затем выберите Дата/Время.

  7. В столбце Имя выберите ссылку <Добавить свойство>, введите InvoiceStatus и нажмите клавишу TAB.

  8. В столбце Тип откройте список, а затем выберите Целое.

  9. В столбце Имя выберите ссылку <Добавить свойство>, введите ShipDate и нажмите клавишу TAB.

  10. В столбце Тип откройте список, а затем выберите Дата/Время.

    Сущность Invoice

  11. В области Обозреватель решений выберите узел Data Sources, а затем в строке меню выберите Проект и Добавить таблицу.

  12. В окне Свойства задайте для свойства Имя значение InvoiceDetail и нажмите клавишу ВВОД.

  13. В столбце Имя выберите ссылку <Добавить свойство>, введите Quantity и нажмите клавишу TAB.

  14. В столбце Тип откройте список, а затем выберите Целое.

  15. В столбце Имя выберите ссылку <Добавить свойство> и введите UnitPrice.

  16. В столбце Тип откройте список, а затем выберите Денежный.

    Money — это еще один пользовательский бизнес-тип, который представляет валюту в правильном формате.

    Сущность InvoiceDetails

  17. В поле Свойства введите $ в поле Обозначение денежной единицы.

  18. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Создание списка значений

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

Создание списка значений

  1. В области Обозреватель решений откройте контекстное меню для узла Invoices.lsml и выберите Открыть.

  2. В области Конструктор данных выберите поле InvoiceStatus.

  3. В окне Свойства выберите ссылку Список значений.

    Диалоговое окно со списком выбора

  4. В диалоговом окне Список значений введите следующие значения и нажмите кнопку ОК.

    Значение

    Отображаемое имя

    0

    Активный

    1

    Оплаченный

    2

    Просроченный

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

  5. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Определение отношения

В следующем шаге определяются отношения между сущностями Patient, Invoice и InvoiceDetail.

Определение отношений

  1. В области Обозреватель решений откройте контекстное меню для узла Invoices.lsml и выберите Открыть.

  2. В области Конструктор данных нажмите кнопку Отношения.

    Откроется диалоговое окно Добавление нового отношения.

  3. В строке Имя: выберите столбец Кому, откройте список и выберите Patient, а затем нажмите кнопку ОК.

    Между сущностями Patient и Invoice создается связь "один ко многим". У пациента может быть несколько счетов.

  4. В области Конструктор данных нажмите кнопку Отношения.

    Откроется диалоговое окно Добавление нового отношения.

  5. В строке Имя: выберите столбец Кому, откройте список и выберите InvoiceDetail.

  6. В строке Кратность: выберите столбец От, откройте список и выберите Один.

  7. В строке Кратность: выберите столбец Кому, откройте список и выберите Много, а затем нажмите кнопку ОК.

    Между сущностями Invoice и InvoiceDetail создается связь "один ко многим". Счет может иметь несколько элементов сведений.

    Связь между Invoice и InvoiceDetail

  8. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Создание сущности "Прием"

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

Добавление сущности "Прием"

  1. В области Обозреватель решений выберите узел Data Sources, а затем в строке меню выберите Проект и Добавить таблицу.

  2. В окне Свойства выберите поле Имя и введите Прием.

  3. В области Конструктор данных выберите текст заполнителя <Добавить свойство> в столбце Имя и введите AppointmentTime.

  4. В столбце Тип откройте список, а затем выберите Дата/Время.

  5. В области Конструктор данных выберите текст заполнителя <Добавить свойство> в столбце Имя и введите AppointmentDate.

  6. В столбце Тип откройте список, а затем выберите Date.

  7. В столбце Имя выберите текст заполнителя <Добавить свойство> и введите AppointmentType.

  8. В столбце Тип откройте список, а затем выберите Короткое целое.

  9. В столбце Имя выберите текст заполнителя <Добавить свойство> и введите DoctorNotes.

  10. Примите тип по умолчанию, Строка, и снимите флажок Обязательный.

  11. В области Конструктор данных нажмите кнопку Отношения.

  12. В диалоговом окне Добавление нового отношения выберите столбец Кому в строке Имя:.

  13. Откройте список, выберите Patient и нажмите кнопку ОК.

    Между сущностями Patient и Appointment создается связь "один ко многим". Каждый пациент может иметь несколько назначенных приемов.

  14. В области Конструктор данных выберите поле AppointmentType.

  15. В окне Свойства выберите ссылку Список значений.

  16. В диалоговом окне Список значений введите следующие значения и нажмите кнопку ОК.

    Значение

    Отображаемое имя

    0

    Ежегодный

    1

    Повторный

    2

    Экстренный

    Сущность Appointment

  17. На панели Перспектива перейдите на вкладку DesktopClient.

  18. В окне Свойства откройте список Свойство "Сводка" и выберите пункт Время приема.

    Это свойство определяет поле, которое появляется, если отображается список приемов.

  19. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Создание экрана

В следующей процедуре рассмотрено создание экрана для отображения списка пациентов.

Создание экрана

  1. В области Обозреватель решений выберите узел Экраны, затем в меню Проект выберите Добавить экран.

    Откроется диалоговое окно Добавление экрана.

  2. В списке Выберите шаблон экрана выберите элемент Редактируемый экран сетки.

  3. В текстовом поле Имя экрана введите PatientList.

  4. В списке Данные экрана выберите Patients и нажмите кнопку ОК.

    Определение экрана PatientList

    Откроется конструктор экрана с отображением иерархического представления макета экрана.

  5. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Создание экрана "Прием"

Далее рассмотрено создание экрана для планирования приемов.

Создание экрана

  1. В области Обозреватель решений в проекте Vision Clinic.Server откройте контекстное меню для узла Appointments.lsml, а затем выберите Открыть.

  2. На панели Перспектива перейдите на вкладку DesktopClient и на панели инструментов нажмите кнопку Экран.

  3. В диалоговом окне Добавление экрана в списке Выберите шаблон экрана выберите Новый экран данных.

  4. В списке Данные экрана выберите Прием и нажмите кнопку ОК.

  5. В центральной области раздела Конструктор экрана выберите узел AppointmentTime.

  6. В окне Свойства снимите флажок Показать дату.

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

Запуск приложения и ввод данных

Приложение создано и готово к работе. В следующем шаге приложение запускается и вводятся данные.

Запуск приложения

  1. Нажмите клавишу F5, чтобы запустить приложение.

  2. В работающем приложении выберите экран PatientList и нажмите кнопку добавления (+).

    Откроется диалоговое окно Добавить нового пациента.

  3. Введите данные для нового пациента и укажите недопустимое значение в поле Email (например, john#example.com).

    Недопустимый адрес электронной почты

    При перемещении из поля появится красная граница. Бизнес-тип EmailAddress имеет встроенные правила проверки, которые позволяют выявить неправильный формат адреса электронной почты.

  4. Исправьте ошибку, завершите ввод данных и нажмите кнопку ОК.

    Кнопка Сохранить на панели инструментов приложения теперь доступна.

  5. Добавьте несколько пациентов.

  6. Нажмите кнопку Сохранить, чтобы сохранить свои данные.

    Теперь можно изменять порядок столбцов в сетке PatientList и выполнять сортировку по любому столбцу.

  7. В строке меню выберите Задачи, Создать прием.

    Откроется экран Создание приема.

  8. Введите данные приема, выбрав пациента из списка Patient и указав время приема на более позднее время сегодня.

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

  10. Нажмите кнопку Закрыть в правом верхнем углу окна работающего приложения, чтобы вернуться в режим конструктора.

соединиться с базой данных

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

Примечание

Перед выполнением этого шага необходимо загрузить базу данных PrescriptionContoso из коллекции исходных кодов MSDN и установить ее в соответствии с инструкциями в файле Install.htm.

Подключение к источнику данных

  1. В обозревателе решений выберите узел Источники данных.

  2. В меню Проект выберите Добавить источник данных.

  3. В разделе Мастер присоединения к источнику данных выберите значок База данных и нажмите кнопку Далее.

    Откроется диалоговое окно Выбор источника данных.

    Примечание

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

  4. В списке выберите Microsoft SQL Server, а затем нажмите кнопку Продолжить.

  5. В диалоговом окне Свойства подключения введите значения в следующую таблицу и нажмите кнопку ОК.

    Поле

    Значение

    Имя сервера

    (localdb)\v11.0

    Вход на сервер

    Использование проверки подлинности Windows

    Выбор или ввод имени базы данных

    C:\Temp\PrescriptionContoso.mdf

    Свойства подключения

    Откроется страница мастера Выбор объектов базы данных.

  6. Разверните узел Таблицы, выберите таблицы Product и ProductRebate, а затем нажмите кнопку Готово.

    Источник данных C_TEMP_PRESCRIPTIONCONTOSO_MDFData добавляется в проект, а для полей Products и ProductRebates создаются сущности.

  7. В области Обозреватель решений откройте контекстное меню узла C_TEMP_PRESCRIPTIONCONTOSO_MDFData, выберите Переименовать, а затем введите PrescriptionContoso.

  8. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Изменение сущностей Products и ProductRebate

В следующем шаге в сущности ProductRebate и Products вносятся изменения.

Изменение сущностей Products и ProductRebate

  1. В области Обозреватель решений откройте контекстное меню для узла ProductRebates.lsml и выберите Открыть.

  2. Выберите поле Rebate и измените значение поля Тип на Денежный.

  3. В поле Свойства введите $ в поле Обозначение денежной единицы.

  4. В области Обозреватель решений откройте контекстное меню для узла Products.lsml и выберите Открыть.

  5. В области Конструктор данных выберите поле MSRP и измените значение поля Тип на Денежный.

  6. В поле Свойства введите $ в поле Обозначение денежной единицы.

  7. Выберите поле ProductImage и измените значение поля Тип на Изображение.

  8. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Создание экрана списка и сведений

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

Создание экрана списка и сведений

  1. В области Конструктор данных на панели Перспектива перейдите на вкладку DesktopClient, а затем на панели инструментов нажмите кнопку Экран.

    Откроется диалоговое окно Добавление экрана.

  2. В списке Выберите шаблон экрана выберите элемент Экран со списком и подробными сведениями.

  3. В текстовом поле Имя экрана введите ProductList.

  4. В списке Данные экрана выберите PrescriptionContoso.Products.

  5. В списке Включить дополнительные данные установите флажки Product Details и Product ProductRebates и нажмите кнопку ОК.

Изменение макета экрана

В следующем шаге изменяется макет экрана ProductList.

Настройка макета

  1. В области Конструктор экрана выберите узел Макет строк | Сведения о продукте в дереве содержимого экрана.

  2. В списке Макет строк выберите Рисунок и текст.

  3. Выберите в раскрывающемся списке следующие значения для каждого поля узла Рисунок и текст.

    Поле

    Значение

    (РИСУНОК)

    Изображение продукта

    (ЗАГОЛОВОК)

    Название продукта

    (ПОДЗАГОЛОВОК)

    MSRP

    (ОПИСАНИЕ)

    Описание

    Макет изображения и текста

  4. Нажмите клавишу F5, чтобы запустить приложение и просмотреть результаты.

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

    Оставьте приложение открытым. В следующем шаге в работающее приложение вносятся изменения.

Внесение изменений в выполняющееся приложение

В следующем шаге изменяется экран Список продуктов в работающем приложении.

Настройка экрана во время выполнения

  1. В нижнем правом углу экрана Список продуктов щелкните ссылку Экран конструктора.

  2. В левой области выберите узел Таблица данных | Скидки на продукт.

  3. В окне Свойства задайте для свойства Отображаемое имя значение Contoso Rebates.

    Это имя также изменяется в окне приложения.

  4. Выберите поле MSRP, а затем измените значение свойства Описание на Рекомендованная цена до скидки.

    Настройка времени разработки

  5. Нажмите кнопку Сохранить, чтобы вернуться в работающее приложение и просмотреть изменения.

    Например, если указать на поле MSRP, отобразится описание.

  6. Нажмите кнопку Закрыть в правом верхнем углу окна работающего приложения, чтобы вернуться в режим конструктора.

  7. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Создание запроса

В следующем шаге создается параметризованный запрос и привязывается к экрану.

Создание параметризованного запроса

  1. В области Обозреватель решений откройте контекстное меню для узла Продукты и выберите Добавить запрос.

    Откроется конструктор запросов.

  2. В окне Свойства выберите поле Имя и введите RelatedProducts.

  3. В области Конструктор запросов выберите ссылку Добавить фильтр.

    Условие фильтра добавляется в раздел Фильтр.

  4. Во втором списке выберите Категория.

  5. В четвертом списке выберите Параметр.

  6. В пятом списке выберите Добавить новый.

    Новый Parameter с именем Category и типом String добавляется в раздел Параметры.

    Запрос RelatedProducts

  7. В области Обозреватель решений откройте контекстное меню для узла ProductList.lsml и выберите Открыть.

  8. На панели инструментов конструктора экрана нажмите кнопку Добавить элемент данных.

  9. В диалоговом окне Добавление элемента данных выберите переключатель Запрос.

  10. В столбце Имя выберите PrescriptionContoso.RelatedProducts и нажмите кнопку ОК.

    В левой области появится узел RelatedProducts.

  11. В разделе Параметры запроса выберите узел Категория.

  12. В окне Свойства задайте для свойства Привязка параметра значение Products.SelectedItem.Category.

  13. В центральной области разверните узел Добавить под узлом Таблица данных | Скидки Contoso и выберите Связанные продукты.

    Добавление связанных продуктов

  14. Нажмите клавишу F5, чтобы запустить приложение и просмотреть результаты.

    Если открыт экран Список продуктов, в нем отображается список связанных продуктов для каждого выбранного продукта.

  15. Нажмите кнопку Закрыть в правом верхнем углу окна работающего приложения, чтобы вернуться в режим конструктора.

  16. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Добавление вычисляемого поля

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

Добавление вычисляемого поля

  1. В области Обозреватель решений откройте контекстное меню для узла сущности Products.lsml и выберите Открыть.

  2. В области Конструктор данных на панели Перспектива перейдите на вкладку Сервер.

  3. Выберите ссылку <Добавить свойство> и введите CurrentPrice, а затем нажмите клавишу TAB.

  4. В столбце Тип откройте список, а затем выберите Денежный.

    В окне Свойства в разделе Общие флажок Является вычисляемым установлен по умолчанию.

  5. В поле Свойства введите $ в поле Обозначение денежной единицы.

  6. В окне Свойства выберите ссылку Изменить метод.

    Откроется редактор кода, в котором будет показан метод CurrentPrice_Compute.

  7. Добавьте в обработчик событий следующий код:

    Dim rebates As Decimal
        For Each item In ProductRebates
            If item.RebateStart <= Date.Today And item.RebateEnd >= Date.Today Then
                rebates = rebates + item.Rebate
            End If
        Next
    
        result = Me.MSRP - rebates
    
    decimal rebates = default(decimal);
    
    
                foreach (var item in ProductRebates)
                {
                    if (item.RebateStart <= System.DateTime.Today && item.RebateEnd >= System.DateTime.Today)
                    {
                        rebates += item.Rebate.Value;
                    }
                }
    
                result = this.MSRP - rebates;
    

    Код для вычисления текущей цены

  8. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

В следующей процедуре на экран ProductList добавляется вычисляемое поле.

Добавление вычисляемого поля на экран

  1. В области Обозреватель решений откройте контекстное меню для узла экрана ProductList.lsml и выберите Открыть.

  2. В левой области раздела Конструктор экрана переместите узел CurrentPrice так, чтобы он находился под узлом (Описание) | Описание в центральной области.

    Текущая цена после перетаскивания

  3. Нажмите клавишу F5, чтобы запустить приложение и просмотреть результаты.

  4. На экране ProductList измените поле Скидка или MSRP.

    Значение поля CurrentPrice будет пересчитано.

  5. Нажмите кнопку Закрыть в правом верхнем углу окна работающего приложения, чтобы вернуться в режим конструктора.

  6. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Создание отношения между базами данных

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

Создание отношения между базами данных

  1. В области Обозреватель решений откройте контекстное меню для узла InvoiceDetails.lsml и выберите Открыть.

  2. В области Конструктор данных на панели инструментов нажмите кнопку Отношения.

    Откроется диалоговое окно Добавление нового отношения.

  3. В столбце Кому в списке Имя откройте список и выберите Продукт.

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

    Межбазовая связь

  4. Нажмите кнопку ОК, чтобы сохранить отношение.

    Новое отношение показано в конструкторе пунктирной линией. Эта линия указывает на то, что сущности находятся в разных источниках данных. В данном случае InvoiceDetails берется из внутренней базы данных, а Products — из базы данных PrescriptionContoso.

  5. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Создание экрана для отображения счетов

В следующем шаге создается экран для отображения счетов.

Создание экрана

  1. В области Обозреватель решений выберите узел Экраны, затем в меню Проект выберите Добавить экран.

    Откроется диалоговое окно Добавление экрана.

  2. В списке Выберите шаблон экрана выберите элемент Экран со списком и подробными сведениями.

  3. В текстовом поле Имя экрана введите InvoiceScreen.

  4. В списке Данные экрана выберите Счета.

  5. В списке Включить дополнительные данные выберите Invoice Details и Invoice InvoiceDetails, а затем нажмите кнопку ОК.

    Макет InvoiceScreen

  6. Разверните узел Строка таблицы данных | Сведения о счете, а затем удалите узел ИД продукта.

  7. Чтобы изменить порядок полей, переместите узлы Quantity и UnitPrice в узел Product.

  8. Нажмите клавишу F5, чтобы запустить приложение.

  9. В строке меню выберите Задачи и Экран счетов, чтобы открыть этот экран.

  10. В области Счета нажмите кнопку добавления (+), а затем введите некоторые сведения о счете.

    Поле InvoiceStatus содержит раскрывающийся список значений, а поле Patient — кнопку, при нажатии которой открывается диалоговое окно со списком пациентов.

  11. В области Сведения о счете нажмите кнопку добавления +…, а затем введите некоторые сведения о счете.

    Обратите внимание, что поле Product содержит список продуктов из базы данных PrescriptionContoso.

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

    В следующей процедуре в выполняющееся приложение вносятся изменения.

Изменение экрана счетов

В следующем шаге изменяется макет экрана счетов в выполняющемся приложении.

Изменение экрана в выполняющемся приложении

  1. В нижнем правом углу экрана Экран счета выберите ссылку Экран конструктора.

  2. В левой области выберите Список | Счета, откройте Список и выберите DataGrid.

  3. Выберите узел Patient и нажмите стрелку Вверх в левом поле, чтобы переместить узел так, чтобы он находился над узлом Invoice Date.

    Настроенный экран Invoice

  4. Нажмите кнопку Сохранить, чтобы вернуться в работающее приложение и просмотреть изменения.

  5. Нажмите кнопку Закрыть в правом верхнем углу окна работающего приложения, чтобы вернуться в режим конструктора.

  6. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Определение логики экрана

В следующем шаге добавляется код для определения логики по умолчанию для дат счетов.

Определение логики экрана

  1. В области Обозреватель решений откройте контекстное меню для узла Invoices.lsml и выберите Открыть.

  2. В области Конструктор данных на панели задач раскройте список Запись кода, а затем выберите Invoice_Created.

    Откроется редактор кода, в котором будет отображаться метод Invoice_Created.

  3. В методе Invoice_Created добавьте следующий код, чтобы задать поведение по умолчанию для дат.

    InvoiceDate = Date.Today
    InvoiceDue = Date.Today.AddDays(30)
    ShipDate = Date.Today.AddDays(3)
    
    InvoiceDate = System.DateTime.Today;
    InvoiceDue = System.DateTime.Today.AddDays(30);
    ShipDate = System.DateTime.Today.AddDays(3);
    
  4. В области Обозреватель решений откройте контекстное меню для узла Invoices.lsml и выберите Открыть.

  5. В области Конструктор данных выберите поле InvoiceDate.

  6. На панели инструментов откройте список Запись кода и выберите InvoiceDate_Changed.

  7. В методе InvoiceDate_Changed добавьте следующий код, чтобы обновлять даты при изменении InvoiceDate.

    InvoiceDue = InvoiceDate.AddDays(30)
    ‘ If the ShipDate is earlier than the new InvoiceDate, update it.
    If ShipDate < InvoiceDate Then
        ShipDate = InvoiceDate.AddDays(2)
    End If
    
    InvoiceDue = InvoiceDate.AddDays(30); 
        // If the ShipDate is earlier than the new InvoiceDate, update it
    if (ShipDate < InvoiceDate)
        {
            ShipDate = InvoiceDate.AddDays(2);
        }
    
  8. В области Обозреватель решений откройте контекстное меню для узла InvoiceDetails.lsml и выберите Открыть.

  9. В области Конструктор данных выберите поле Продукт.

  10. На панели инструментов откройте список Запись кода и выберите Product_Changed.

  11. В области Редактор кода добавьте следующий код, чтобы задать цену единицы товара и количество по умолчанию.

    UnitPrice = Product.CurrentPrice
    Quantity = 1
    
    UnitPrice = Product.CurrentPrice;
    
    Quantity = 1;
    
  12. Нажмите клавишу F5, чтобы запустить приложение, затем откройте экран Счет и добавьте счет.

    Поля даты, цены и количества были автоматически обновлены.

  13. Нажмите кнопку Сохранить, чтобы сохранить внесенные изменения.

  14. Нажмите кнопку Закрыть в правом верхнем углу окна работающего приложения, чтобы вернуться в режим конструктора.

  15. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Добавление дополнительных вычисляемых полей

В следующем шаге вычисляемые поля SubTotal, Tax, и Totals добавляются в сущности InvoiceDetails и Invoices.

Добавление вычисляемых полей

  1. В области Обозреватель решений откройте контекстное меню для узла InvoiceDetails.lsml и выберите Открыть.

  2. В области Конструктор данных выберите ссылку <Добавить свойство>, введите SubTotal и нажмите клавишу TAB.

  3. В столбце Тип откройте список, а затем выберите Денежный.

  4. В окне Свойства введите $ в текстовом поле Обозначение денежной единицы.

  5. В окне Свойства в разделе Общие свойства установите флажок IsComputed, а затем выберите ссылку Изменить метод.

    Откроется редактор кода, в котором будет отображаться метод SubTotal_Compute.

  6. Добавьте следующий код, чтобы вычислить SubTotal.

    result = Quantity * UnitPrice
    
    result = Quantity * UnitPrice;
    
  7. В области Обозреватель решений откройте контекстное меню для узла Invoices.lsml и выберите Открыть.

  8. В области Конструктор данных выберите ссылку <Добавить свойство>, введите Tax и нажмите клавишу TAB.

  9. В столбце Тип откройте список, а затем выберите Денежный.

  10. В поле Свойства введите $ в поле Обозначение денежной единицы.

  11. В окне Свойства установите флажок IsComputed и щелкните ссылку Изменить метод.

    Откроется редактор кода, в котором будет отображаться метод Tax_Compute.

  12. Замените метод Tax_Compute следующим кодом, чтобы вычислить значение Tax.

    Private Sub Tax_Compute(ByRef result As Decimal)
        result =  GetSubTotal() * 0.095
    End Sub
    Protected Function GetSubTotal() As Decimal
        GetSubtotal = 0
        For Each item In InvoiceDetails
            GetSubTotal = GetSubTotal + item.SubTotal
        Next
    End Function
    
    partial void Tax_Compute(ref decimal result)
        {
            result = GetSubTotal() * (decimal)0.095;
        }
    protected decimal GetSubTotal()
        {
            return this.InvoiceDetails.Sum(i => i.SubTotal);
        }
    
  13. В области Обозреватель решений откройте контекстное меню для узла Invoices.lsml и выберите Открыть.

  14. В области Конструктор данных выберите ссылку <Добавить свойство>, введите Всего и нажмите клавишу TAB.

  15. В столбце Тип откройте список, а затем выберите Денежный.

  16. В поле Свойства введите $ в поле Обозначение денежной единицы.

  17. В окне Свойства установите флажок IsComputed и щелкните ссылку Изменить метод.

    Откроется редактор кода, в котором будет отображаться метод Total_Compute.

  18. Добавьте следующий код, чтобы вычислить Total.

    result = GetSubTotal() + Tax
    
    result = GetSubTotal() + Tax;
    
  19. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

В следующем шаге на экран Счета добавляются новые поля.

Добавление полей на экран

  1. В области Обозреватель решений откройте контекстное меню для узла InvoiceScreen.lsml и выберите Открыть.

  2. В центральной области разверните узел Макет строк | Сведения о счете, разверните список Добавить , а затем выберите Tax.

    Поле Tax появится в разделе Вертикальный стек | InvoiceDetails.

  3. Откройте список Добавить еще раз, а затем выберите поле Всего.

  4. Нажмите клавишу F5, чтобы запустить приложение, а затем откройте Экран счета.

    Теперь для каждой строки счета отображаются поля Tax и Всего.

  5. Выберите ссылку Экран конструктора, чтобы перейти в режим настройки.

  6. В левой области разверните узел Строк таблицы данных | Сведения о счете, разверните список Добавить и выберите SubTotal.

  7. Нажмите кнопку Сохранить, чтобы сохранить изменение.

    Поле SubTotal теперь отображается в сетке Сведения о счете.

    Обновленный экран Invoice

  8. Нажмите кнопку Закрыть в правом верхнем углу окна работающего приложения, чтобы вернуться в режим конструктора.

  9. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Добавление мобильного клиента

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

Добавление клиентского проекта HTML

  1. В области Обозреватель решений откройте контекстное меню для узла Vision Clinic и выберите Добавить клиент.

  2. В диалоговом окне Добавить клиент выберите HTML-клиент и нажмите кнопку ОК.

    В решение будет добавлен проект VisionClinic.HTMLClient.

Добавление экрана для просмотра сведений о пациентах

  1. В области Обозреватель решений в проекте Vision Clinic.Server откройте контекстное меню для узла Patients.lsml, а затем выберите Открыть.

  2. На панели Перспектива перейдите на вкладку HTMLClient и на панели инструментов нажмите кнопку Экран.

    Откроется диалоговое окно Добавление экрана.

  3. В списке Выберите шаблон экрана выберите элемент Обзор экрана данных.

  4. В списке Данные экрана выберите Patients и нажмите кнопку ОК.

Настройка экрана просмотра

  1. В области Конструктор экрана выберите узел Список | Пациенты в дереве содержимого экрана.

  2. В области Список выберите Список плиток.

    В результате для каждого пациента отобразится своя плитка. По умолчанию на плитке отображаются все поля для данного пациента.

  3. В узле Макет строк | Пациент удалите все поля, кроме Имя, Фамилия и Номер полиса.

  4. В области Обозреватель решений в проекте Vision Clinic.HTMLClient откройте контекстное меню для узла BrowsePatients.lsml, а затем выберите Задать в качестве начального экрана.

  5. Нажмите клавишу F5, чтобы запустить приложение.

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

  6. Нажмите кнопку Закрыть в правом верхнем углу окна работающего приложения, чтобы вернуться в режим конструктора.

  7. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

    Далее следует добавить экран для просмотра сведений о пациенте.

Добавление экрана сведений

  1. В области Конструктор экрана выберите узел Список плиток | Пациенты в дереве содержимого экрана.

  2. В окне Свойства в разделе Действия выберите ссылку Касание элемента: нет.

  3. В диалоговом окне Изменить действие касания элемента разверните список ShowTab и выберите viewSelected, а затем нажмите кнопку ОК.

  4. В диалоговом окне Добавление экрана примите значения по умолчанию и нажмите кнопку ОК.

  5. Нажмите клавишу F5, чтобы запустить приложение.

  6. На экране Обзор пациентов выберите пациента, чтобы открыть экран Просмотр данных пациента.

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

  7. Нажмите кнопку Закрыть в правом верхнем углу окна работающего приложения, чтобы вернуться в режим конструктора.

  8. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

    Далее добавляется экран на основе запроса для просмотра предстоящих приемов.

Создание запроса

  1. В области Обозреватель решений откройте контекстное меню для узла Appointments.lsml и выберите Добавить запрос.

  2. В поле Свойства введите UpcomingAppointments в текстовом поле Имя.

  3. В области Конструктор запросов выберите ссылку Добавить фильтр.

  4. В третьем списке выберите >= (больше или равно).

  5. В четвертом списке выберите Везде.

  6. В пятом списке выберите Сегодня.

  7. Выберите ссылку Добавить фильтр еще раз.

  8. Во втором списке выберите AppointmentTime.

  9. В третьем списке выберите >= (больше или равно).

  10. В четвертом списке выберите Везде.

  11. В пятом списке выберите Сейчас.

  12. Выберите ссылку Добавить сортировку и примите значения по умолчанию AppointmentDate и По возрастанию.

  13. Выберите ссылку Добавить сортировку еще раз и примите значения по умолчанию AppointmentTime и По возрастанию.

    Запрос ближайших встреч

  14. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Создание экрана приема

  1. В области Обозреватель решений откройте контекстное меню для узла Appointments.lsml и выберите Открыть.

  2. В области Конструктор данных на панели Перспектива перейдите на вкладку HTMLClient.

  3. В окне Свойства откройте список Свойство "Сводка" и выберите пункт AppointmentTime.

  4. В области Конструктор данных на панели команд нажмите кнопку Экран.

  5. В диалоговом окне Добавление экрана в списке Выберите шаблон экрана выберите Обзор экрана данных.

  6. В списке Данные экрана выберите UpcomingAppointments и нажмите кнопку ОК.

Создание экрана сведений о приеме

  1. В области Конструктор экрана выберите узел Список | Будущие приемы в дереве содержимого экрана.

  2. В окне Свойства в разделе Действия выберите ссылку Касание элемента: нет.

  3. В диалоговом окне Изменить действие касания элемента разверните список ShowTab и выберите viewSelected, а затем нажмите кнопку ОК.

  4. В диалоговом окне Добавление экрана примите значения по умолчанию и нажмите кнопку ОК.

Добавление навигации по экрану

  1. В области Обозреватель решений откройте контекстное меню для узла Vision Clinic.HTMLClient и выберите Изменить навигацию по экранам.

  2. В области Конструктор приложений выберите ссылку Включить экран и выберите пункт Обзор пациентов.

  3. Выберите ссылку Включить экран еще раз, а затем выберите Обзор будущих приемов.

  4. Нажмите клавишу F5, чтобы запустить приложение.

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

    Заголовок окна с раскрывающимся меню навигации

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

  6. Нажмите кнопку Закрыть в правом верхнем углу окна работающего приложения, чтобы вернуться в режим конструктора.

  7. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

Изменение заголовка экрана

  1. В области Обозреватель решений откройте контекстное меню для узла BrowseUpcomingAppointments.lsml и выберите Открыть.

  2. В области Конструктор экрана на панели задач раскройте список Запись кода, а затем выберите created.

  3. В области Редактор кода добавьте следующий код в метод created.

    screen.details.displayName = "Appointments";
    
  4. Нажмите клавишу F5, чтобы запустить приложение.

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

    Обратите внимание, что теперь заголовок имеет вид Приемы.

  6. Нажмите кнопку Закрыть в правом верхнем углу окна работающего приложения, чтобы вернуться в режим конструктора.

  7. В меню Файл выберите Сохранить все, чтобы сохранить свою работу.

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

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

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

См. также

Основные понятия

Интерактивный учебник по LightSwitch

Visual Studio LightSwitch

Другие ресурсы

Начало работы с LightSwitch