Пошаговое руководство. Создание клиента LightSwitch для мобильных пользователей

Статья
06/10/2015

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

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

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

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

Загрузите пример приложения ContosoMoving.

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

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

Создание демонстрационных данных

В строке меню выберите Файл, Открыть, Проект/Решение.
Найдите файл ContosoMoving.sln, который вы загрузили, и откройте его.
В строке меню выберите Отладка, Начать отладку.
В выполняющемся клиенте перейдите к строке меню и выберите Демонстрационные данные, Создать демонстрационные данные.
На панели инструментов экрана Создать демонстрационные данные нажмите кнопку Добавить все демонстрационные данные.

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

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

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

Далее мы добавим в существующее решение проект HTML-клиента.

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

В окне Обозреватель решений выберите узел ContosoMoving.
В меню Проект выберите Добавить клиент.
В диалоговом окне Добавить клиент выберите HTML-клиент, назовите его MobileClient и нажмите кнопку ОК.

Узел проекта MobileClient добавляется в Обозреватель решений.

Создание экранов и определение навигации

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

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

В окне Обозреватель решений выберите узел MobileClient.
В строке меню выберите Проект, Добавить экран.
В диалоговом окне Добавление экрана выберите шаблон Экран обзора данных.
В текстовом поле Имя экрана введите Главный.
В списке Данные экрана выберите UpcomingAppointments и нажмите кнопку ОК.

Настройка основного экрана

В конструкторе экрана выберите узел Встреча и щелкните в раскрывающемся списке пункт Макет строк.
В узле Макет строк | Встреча удалите все узлы, за исключением Дата начала и Клиент.
В строке меню выберите Начать отладку.

Мобильный клиент отображается в браузере.

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

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

В конструкторе экрана выберите узел Предстоящие встречи.
В окне Свойства выберите ссылку Касание элемента: нет.
В диалоговом окне Изменение действия ItemTap выберите переключатель Выбрать существующий метод, а затем выберите в списке UpcomingAppointments.ViewSelected.
В списке Перейти выберите элемент (Новый экран) и нажмите кнопку ОК.

Откроется диалоговое окно Добавление экрана.
В диалоговом окне Добавление экрана выберите шаблон экрана Просмотр сведений.
В текстовом поле Имя экрана введите ViewAppointment.
В списке Данные экрана выберите Встреча.
Установите флажки Сведения о встрече, Фотографии встречи и Места встречи, а затем нажмите кнопку ОК.

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

Настройка экрана сведений

В окне Обозреватель решений откройте экран ViewAppointment.
В конструкторе экрана выберите узел Макет строк | Сведения.
Удалите узлы Дата начала, Дата окончания, Примечания, Вид переезда, Сотрудник и Клиент.
Перетащите узел Состояние, чтобы он располагался под узломГород.
Выберите узел Макет строк | по правому краю, разверните узел Добавить и выберите Другие данные экрана.

Откроется диалоговое окно Добавить данные экрана.
В текстовом поле Укажите добавляемые данные экрана введите Customer.Phone и нажмите кнопку ОК.
Разверните узел Добавить и выберите пункт Другие данные экрана.

Откроется диалоговое окно Добавить данные экрана.
В текстовом поле Укажите добавляемые данные экрана введите Customer.Email и нажмите кнопку ОК.

Создание модального диалогового окна

В окне Обозреватель решений откройте экран ViewAppointment.
В конструкторе экрана откройте контекстное меню узла Панель команд на вкладке Сведения и выберите Добавить кнопку.
В диалоговом окне Добавить кнопку выберите переключатель Выбрать существующий метод, а затем выберите в списке Appointment.edit.
В списке Перейти выберите элемент (Новый экран) и нажмите кнопку ОК.

Откроется диалоговое окно Добавление экрана.
В текстовом поле Имя экрана введите EditAppointment и нажмите ОК.

В поле Свойства установлен флажок Показать как диалоговое окно, чтобы экран отображался как модальное диалоговое окно.
В конструкторе экрана удалите узел Макет столбцов | Столбцы.
Разверните узел Добавить и выберите пункт Другие данные экрана.

Откроется диалоговое окно Добавить данные экрана.
В текстовом поле Укажите добавляемые данные экрана введите Appointment.Customer.FirstName и нажмите кнопку ОК.
Разверните узел Добавить и выберите пункт Другие данные экрана.

Откроется диалоговое окно Добавить данные экрана.
В текстовом поле Укажите добавляемые данные экрана введите Appointment.Customer.LastName и нажмите кнопку ОК.
Разверните узел Добавить и выберите пункт Другие данные экрана.

Откроется диалоговое окно Добавить данные экрана.
В текстовом поле Укажите добавляемые данные экрана введите Appointment.Customer.Phone и нажмите кнопку ОК.
Разверните узел Добавить и выберите пункт Другие данные экрана.

Откроется диалоговое окно Добавить данные экрана.
В текстовом поле Укажите добавляемые данные экрана введите Appointment.Customer.Email и нажмите кнопку ОК.
На панели слева перетащите узлы Street, City, State и PostalCode под узел Email.

Примечание

Либо можно не перетаскивать узлы, а добавить поля Street, StreetLine2, City, State и PostalCode таким же образом, как были добавлены поля FirstName и LastName.

Отображение диалогового окна

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

Кнопки ОК и Отмена включаются в него автоматически.

Настройка пользовательского интерфейса

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

Применение пользовательского форматирования с помощью библиотек JavaScript

В окне Обозреватель решений откройте экран Главная страница.
В конструкторе экрана щелкните узел Макет строк | Встреча и выберите в списке пункт Пользовательский элемент управления.
В списке Запись кода выберите метод RowTemplate_render.

В редакторе кода добавьте следующий код для функции RowTemplate_render.

myapp.Home.RowTemplate_render = function (element, contentItem) {
    var itemTemplate = $("<div> </div>");
    var title = $("<h3>" + moment(contentItem.value.StartDate).format("ddd, MMM Do, h:mm") + "-" + moment(contentItem.value.EndDate).format("h:mma") + "</h3>");
    var subTitle = $("<span>" + contentItem.value.Customer.FirstName + " " + contentItem.value.Customer.LastName + " - " + contentItem.value.Customer.Phone + "</span>");
    title.appendTo($(itemTemplate));
    subTitle.appendTo($(itemTemplate));
    itemTemplate.appendTo($(element));
};

Этот код JavaScript использует переменную-член contentItem.value, чтобы определить отображаемые данные, и метод format, чтобы определить форматирование.

В окне Обозреватель решений откройте контекстное меню узла MobileClient и выберите Управление пакетами NuGet.
В диалоговом окне Управление пакетами NuGet выберите узел В сети.
В текстовом поле Поиск в Интернете введите moment.js.
Нажмите кнопку Установить, чтобы установить библиотеку Moment.js, затем нажмите кнопку Закрыть.
В окне Обозреватель решений разверните узел MobileClient и откройте файл default.htm.
В редакторе кода добавьте тег скрипта после последнего тега </script>:
```
<script type="text/javascript" src="Scripts/moment.js" charset="utf-8"></script>
```
Этот тег добавляет ссылку на библиотеку moment.js.
В строке меню выберите Отладка, Начать отладку, чтобы запустить клиент.

Встреча форматируется, добавляются время и телефонный номер.

Преобразование макета в виде списка в мозаику

В окне Обозреватель решений откройте экран Главная страница.
В конструкторе экрана щелкните Список | Предстоящие встречи и выберите в списке пункт Список плиток.
В строке меню выберите Отладка, Начать отладку, чтобы запустить клиент.

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

Добавление динамического заголовка экрана

В окне Обозреватель решений откройте экран ViewAppointment.
В конструкторе экрана выберите узел Макет строк | Сведения.
В списке Запись кода выберите Details_postRender.

В редакторе кода добавьте следующий код JavaScript:

myapp.ViewAppointmentDetail.Details_postRender = function (element, contentItem) {
    contentItem.dataBind("value.Appointment.Customer.FirstName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    contentItem.dataBind("value.Appointment.Customer.LastName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    function formatAppointmentScreenTitle(contentItem) {
        contentItem.screen.details.displayName = contentItem.value.Appointment.Customer.FirstName + " " +
        contentItem.value.Appointment.Customer.LastName + " " +
        moment(contentItem.value.Appointment.StartDate).format("h:mma") + " - " +
        moment(contentItem.value.Appointment.EndDate).format("h:mma");
    };
};

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

На экране сведений о встрече показано имя клиента, а также время начала и окончания встречи.

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

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

Добавление пользовательского элемента управления

В окне Обозреватель решений откройте контекстное меню узла Скрипты, выберите Добавить, затем Существующий элемент.
В диалоговом окне Добавление существующего элемента перейдите в папку ContosoMoving и откройте папку Sample Resources.
Выберите файлы image_uploader-base64-file-encoder и image-uploader, а затем нажмите кнопку Добавить.
Откройте файл default.htm и в редакторе кода добавьте следующую ссылку на файл image-uploader.js в конце блока ссылок на скрипты:
```
<script type="text/javascript" src="Scripts/image-uploader.js" charset="utf-8"></script>
```
В окне Обозреватель решений откройте экран ViewAppointment.
В конструкторе экрана выберите Список | Фотографии и щелкните в списке пункт Список плиток.
В окне Свойства откройте список свойств Высота и выберите Растянуть в контейнере.
В текстовом поле Min введите 500.
В конструкторе экрана откройте контекстное меню вкладки Фотографии узла Панель команд и выберите Добавить кнопку.
В диалогом окне Добавить кнопку нажмите переключатель Выбрать существующий метод, выберите в списке Photos.addEditNew и нажмите кнопку ОК.

Откроется диалоговое окно Добавление экрана.
В текстовом поле Имя экрана введите UploadPhoto и нажмите кнопку ОК.
В конструкторе экрана удалите узел Макет строк | по правому краю.
Выберите узел Заголовок и измените тип элемента управления на Область текста.
Выберите узел Рисунок и измените тип элемента управления на Пользовательский элемент управления.
В окне Свойства щелкните ссылку Изменить код метода Render.
В редакторе кода добавьте следующий код в функцию Picture1_render:
```
createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");
```
Этот код инициализирует пользовательский элемент управления ImageUploader при отображении экрана.
В окне Обозреватель решений откройте экран ViewAppointment.
В конструкторе экрана выберите узел кнопки Добавить фотографию и задайте свойству Значок значение Добавить изображение.
В строке меню выберите Отладка, Начать отладку, чтобы запустить клиент.
В выполняющемся клиенте коснитесь встречи.
На экране сведений о встрече выберите вкладку Фотографии.
Нажмите кнопку Добавить фото, чтобы открыть диалоговое окно Средство отправки отображений.

Сопоставление адреса клиента

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

Добавление элемента управления картой

В окне Обозреватель решений откройте контекстное меню узла Скрипты, выберите Добавить, затем Существующий элемент.
В диалоговом окне Добавление существующего элемента перейдите в папку ContosoMoving и откройте папку Sample Resources.
Выберите файл lightswitch.bing-maps.js и нажмите кнопку Добавить.
Откройте файл default.htm и в редакторе кода добавьте ссылку в начало блока ссылок на скрипты:
```
<script type="text/javascript" charset="utf-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
```
В конце блока ссылок на скрипты добавьте ссылку на файл JavaScript:
```
<script type="text/javascript" src="Scripts/lightswitch.bing-maps.js" charset="utf-8"></script>
```
В окне Обозреватель решений откройте экран ViewAppointment.
В конструкторе экрана откройте контекстное меню для узла Вкладки и выберите Добавить вкладку.
В окне Свойства задайте свойству Имя значение Карта.
Откройте контекстное меню узла Макет строк | Карта и выберите Добавить пользовательский элемент управления.

Откроется диалоговое окно Добавление пользовательского элемента управления.
В текстовом поле Укажите данные для нового пользовательского элемента управления введите Встреча и нажмите кнопку ОК.
В окне Свойства щелкните ссылку Изменить код метода Render.

В редакторе кода добавьте следующие служебные методы перед функцией Appointment_render:

function rebindMap(element, contentItem) {
    // Verify that we aren't updating the map continuously due to multiple bound values changing.
    var now = new Date();
    if (now.getTime() - mapLastUpdated.getTime() > 15) {
        setTimeout(function () {
            updateMap(element, contentItem);
            mapLastUpdated = new Date();
        }, 20);
    }
};

function updateMap(element, contentItem) {
    var mapDiv = $("#appointmentMap");
    // If we've previously created the map, make sure to clean up the div that contained it;
    // otherwise, the Bing map control fails to create properly.
    if (mapDiv.length > 0) {
        $(mapDiv).remove();
    }
    mapDiv = $("<div id='appointmentMap' class='msls-hauto msls-vauto' ></div>");

    $(mapDiv).appendTo($(element));
    mapControl = mapDiv.lightswitchBingMapsControl({
        street: contentItem.value.Street,
        city: contentItem.value.City,
        state: contentItem.value.State.Name,
        zipcode: contentItem.value.PostalCode,
        mapTypeId: Microsoft.Maps.MapTypeId.road,


        height: "400"
    });
};

Добавьте следующий код в функцию Appointment_render:

updateMap(element, contentItem);
mapLastUpdated = new Date();
    contentItem.dataBind("value.Street", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.City", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.Zip", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.PostalCode", function () { rebindMap(element, contentItem); });

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

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

Добавление фирменной символики

Далее мы заменим заголовок клиента более подходящим названием, чем MobileClient, и персонализируем клиент, добавив корпоративную эмблему Contoso Moving.

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

В окне Обозреватель решений откройте файл default.htm и в редакторе кода замените элемент <title>MobileClient</title> следующим кодом:
```
<title>Contoso Moving Mobile</title>
```

Добавление значка

В окне Обозреватель решений разверните узлы Содержимое и Изображения.
Удалите файл user-logo.png.
Откройте контекстное меню узла Изображения, выберите Добавить, затем Существующий элемент.
В диалоговом окне Добавление существующего элемента перейдите в папку ContosoMoving и откройте папку Sample Resources.
Выберите файл user-logo.png и нажмите кнопку Добавить.

Примечание

Также можно отображать на экране-заставке другое изображение, заменив файл user-splash-screen.png.
В строке меню выберите Отладка, Начать отладку, чтобы запустить клиент.

Примечание

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

Изменение темы

Каскадные таблицы стилей (CSS) позволяют определить тему клиента. Чтобы изменить внешний вид клиента, измените тему по умолчанию или замените ее, изменив CSS-файл. Для создания CSS-файла с пользовательской темой мы воспользуемся веб-средством ThemeRoller.

Переключение между темами

В окне Обозреватель решений откройте файл default.htm и в редакторе кода замените "light" на dark в следующих двух строках: <link rel="stylesheet" type="text/css" href="Content/light-theme.css" />, <link rel="stylesheet" type="text/css" href="Content/msls-light.css" />.
В строке меню выберите Отладка, Начать отладку, чтобы запустить клиент.

Настройка существующей темы

В веб-браузере перейдите на веб-сайт ThemeRoller.
На панели инструментов ThemeRoller нажмите кнопку Импорт или обновление.

Откроется диалоговое окно Импортировать тему.
Перейдите в Visual Studio и в окне Обозреватель решений выберите в списке на панели инструментов пункт Представление файлов.
Разверните узел Содержимое и откройте файл dark-theme.css.
В редакторе кода скопируйте все содержимое файла.
В ThemeRoller вставьте содержимое файла dark-theme.css в диалоговое окно Импортировать тему и нажмите кнопку Импорт.
На панели слева щелкните вкладку Глобальная и разверните узел Радиусы углов.
В текстовом поле Группа введите 0.8em.
В текстовом поле Кнопка введите 1.5em.

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

Все связанные элементы также меняют цвет. При наведении указателя мыши на элемент его цвет изменяется на комплементарный, обозначая таким образом выделение.
На панели инструментов ThemeRoller нажмите кнопку Загрузить.
В диалоговом окне Загрузить тему назовите тему my-theme и нажмите кнопку Загрузить ZIP.
Извлеките содержимое сжатого файла в локальную папку.
В окне Обозреватель решений откройте контекстное меню узла Содержимое, выберите Добавить, затем Существующий элемент.
В диалоговом окне Добавление существующего элемента перейдите в папку, из которой были извлечены файлы, выберите файл my-theme.css и нажмите кнопку Добавить.
Откройте файл default.htm, в редакторе кода найдите строку <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> и замените "dark-theme" на my-theme.
В строке меню выберите Отладка, Начать отладку, чтобы запустить клиент.

Следующие действия

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

См. также

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

Экраны HTML-клиента для приложений LightSwitch

Практическое руководство. Развертывание трехуровневого приложения LightSwitch

Практическое руководство. Размещение приложения LightSwitch в Microsoft Azure

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