Практическое руководство. Изменение экрана HTML с помощью кода

При разработке экранов HTML для приложения LightSwitch в основном используются конструкторы и окна инструментов, но можно также изменять эти экраны необходимым образом с помощью кода. Использование API-интерфейсов LightSwitch JavaScript позволяет выполнять следующие задачи, связанные с данными.

• Set a default value on a data entry screen

• Format a number

• Format a Date

• Change the background color and font color for list items

• Mark fields as required

• Validate data on a screen

• Delete an item from a screen or a popup

• Create a custom modal picker by using a popup

• Center a popup on a screen

• Show a message box, and respond to a user selection

• Set the screen title dynamically

• Change the title of an application

• Enable or disable a button

• Customize the Save command to save to multiple data sources

• Return focus to a selected item in a list

• Use a JQuery Mobile control

• Customize a FlipSwitch control

• Implement a CheckBox control

• Override the appearance of a custom control

• Get the location of a device

• Display a location on a map

• Show a numeric keyboard on a device

• Adjust the UI for different form factors

• Render HTML data directly on a screen

• Display a title on a popup

• Copy information to a new screen

• Change screen navigation when saving

• Disable bookmarking

Задание значения по умолчанию на экране ввода данных

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

Установка значений по умолчанию

1. В конструкторе сущностей на панели Перспектива перейдите на вкладку HTMLClient.

2. В списке Запись кода выберите created.

3. В редакторе кода добавьте код в метод created, чтобы задать начальные значения:

   entity.OrderDate = new Date();
   entity.OrderStatus = 'New';
   

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

Форматирование числа

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

Форматирование числа

1. В окне Конструктор экрана выберите узел форматируемого числа.

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

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

   contentItem.dataBind("value", function (value) {
           if (value) {
               $(element).text(value.toFixed(2));
           }
       });
   

Форматирование даты

Для изменения формата даты необходимо использовать библиотеку JavaScript, например Moment.js. Добавьте библиотеку в проект, затем добавьте ссылку в файл default.htm и напишите код в методе Render или postRender.

Добавление библиотеки

1. В окне Обозреватель решений откройте контекстное меню узла HTMLClient и выберите Управление пакетами NuGet.

2. В диалоговом окне Управление пакетами NuGet выберите узел В сети.

3. В текстовом поле Поиск в Интернете введите moment.js.

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

Добавление ссылки

1. В окне Обозреватель решений разверните узел HTMLClient и откройте файл default.htm.

2. В редакторе кода добавьте тег скрипта после последнего тега </script>:

   <script type="text/javascript" src="Scripts/moment.js" charset="utf-8"></script>
   

Форматирование дат

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

2. В конструкторе экрана выберите узел, где требуется отформатировать дату.

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

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

   contentItem.dataBind("value", function (value) {
           if (value) {
               $(element).text(moment(value).format("DD/MM/YYYY"));
           }
       });
   

Изменение цвета фона и цвета шрифта элементов списка

Внешний вид элемента управления ListView определяется каскадной таблицей стилей (CSS), и этот стиль достаточно сложный. Вместо того чтобы редактировать таблицу CSS, можно изменить цвета в коде с помощью метода postRender. Обратите внимание, что стиль самого списка ListView изменить нельзя, но можно изменить стиль каждого объекта Элемент списка через его родительский элемент RowTemplate. Каждый Элемент списка имеет заданное фоновое изображение background-image. Поэтому прежде чем применить новый цвет фона background-color, необходимо задать background-image.

Изменение цветов

1. В конструкторе экрана выберите узел Макет строк (или Макет столбцов) для списка.

2. В окне Свойства щелкните ссылку Изменить код метода PostRender.

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

   $(element).parent().css({
               "background-color": "green",
               "background-image": "none",
               color: "yellow"
           });
   

Пометка полей обязательными

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

Выделение обязательного поля

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

2. В окне Свойства щелкните ссылку Изменить код метода PostRender.

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

   $(element).parent().css('color', 'red'); $(element).parent().find("label")[0].innerHTML += " *"
   

Проверка данных на экране

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

Проверка данных

1. В окне Конструктор экрана в списке Запись кода выберите beforeApplyChanges.

2. В редакторе кода добавьте следующий код, заменив Contact именем сущности, а ContactName — именем строкового поля, которое требуется проверять.

   if (screen.Contact.ContactName.indexOf('!') != -1) {
   
           screen.findContentItem("ContactName").validationResults = [
   
           new msls.ValidationResult(
   
           screen.Contact.details.properties.contactName,
   
           "Contact Name cannot contain the character '!'.")
   
           ];
   
           return false;
   
       }
   

Удаление элемента с экрана или из всплывающего окна

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

Удаление элемента

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

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

3. Откройте контекстное меню метода и выберите Изменить код Execute.

4. В редакторе кода добавьте следующий код, заменив myScreen именем экрана, а оба экземпляра customers — именем сущности.

   myapp.MyScreen.DeleteSelected_execute = function (screen) {
       screen.getCustomers().then(function (customers) {
           customers.deleteSelected();
       });
   };
   

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

Создание пользовательского модального окна выбора с помощью всплывающего окна

Можно предоставить пользователям возможность выбирать элемент из списка при отображении модального диалогового окна. Для этого просто добавьте запрос экрана и контекстное меню. В этом примере имеется экран Добавить/Изменить сведения с именем AddOrders, основанный на сущности OrderDetails, и вторая связанная сущность с именем Products.

Создание модального элемента выбора

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

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

   На левой панели окна Конструктор экрана отображается запрос Products.

3. В дереве содержимого откройте контекстное меню узла Контекстное меню и выберите Добавить всплывающее окно.

4. В списке Добавить выберите Products.

5. На панели инструментов в списке Запись кода щелкните created.

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

   myapp.AddOrders.created = function (screen) {
           screen.findContentItem("Products").dataBind("value.selectedItem", function (newValue) {
               if (newValue !== undefined && newValue !== null) {
                   //Whenever selectedItem for Products changes, update the Product value on the main page 
                   screen.Order_Detail.setProduct(screen.Products.selectedItem);
   
                   //Close popup, if one is open. 
                   screen.closePopup();
               }
           });
       };
   

7. В окне Конструктор экрана откройте контекстное меню узла Панель команд и выберите Добавить кнопку.

8. В диалоговом окне Добавление кнопки нажмите кнопку ОК.

9. (Необязательно) Чтобы очистить поле, добавьте метод экрана со следующим кодом:

   myapp.AddOrders.Clear_execute = function (screen) {
       //Clear the selection for Product. (Useful for 0...1 to many relationships.) 
       screen.Order_Detail.setProduct(undefined);
   };
   

Расположение всплывающего окна по центру экрана

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

Расположение всплывающего окна по центру

1. В конструкторе экрана выберите узел кнопки, открывающей всплывающее окно.

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

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

4. В окне Свойства щелкните ссылку Изменить код Execute.

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

   // Note:If using JQuery Mobile 1.3 (or higher) use
       // "popupcreate" rather than "popupbeforeposition"
       $(window).one("popupbeforeposition", function (e) {
           $(e.target).popup({
               positionTo: "window"
           });
       });
   
       // Show the Popup
       screen.showPopup("Popup1");
   

Отображение окна сообщения и реакция на выбор пользователя

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

Отображение окна сообщения

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

2. В диалоговом окне Добавление кнопки выберите переключатель Создать собственный метод и назовите его ShowMessageBox.

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

   msls.showMessageBox("Please choose the appropriate button", {
   
           title: "This is a message box",
   
           buttons: msls.MessageBoxButtons.yesNoCancel
   
       }).then(function (result) {
   
           if (result === msls.MessageBoxResult.yes) {
   
               alert("Yes button was chosen");
   
           }
   
           else if (result === msls.MessageBoxResult.no) {
   
               alert("No button was chosen");
   
           }
   
           else if (result === msls.MessageBoxResult.cancel) {
   
               alert("Please choose either Yes or No");
   
           }
   
       });
   

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

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

Задание заголовка экрана

1. В окне Конструктор экрана в списке Запись кода выберите created.

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

   myapp.ViewCustomer.created = function (screen) {
   
   var name;
   
       name = screen.Customer.CompanyName;
       screen.details.displayName = "Information about: " + name;
   };
   

Изменение названия приложения

По умолчанию имя проекта отображается в виде названия приложения на экране-заставке и в строке заголовка или на вкладке браузера. Можно определить другой заголовок, изменив файл default.htm проекта.

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

1. В окне Обозреватель решений в узле HTMLClient откройте контекстное меню файла default.htm и выберите команду Открыть.

2. В редакторе кода найдите элемент <title> и замените существующее значение своим названием.

   Эта строка появится в строке заголовка или на вкладке браузера.

3. Найдите элемент <div> и замените существующее значение своим заголовком.

   Эта строка отобразится на экране-заставке.

Включение и отключение кнопки

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

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

Отключение кнопки с помощью свойства IsEnabled

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

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

3. Откройте контекстное меню метода и выберите Изменить код Execute.

4. В редакторе кода добавьте следующий код, заменив MyButton именем своей кнопки.

   screen.findContentItem("MyButton").isEnabled = false;
   

   Метод можно вызывать из кода, когда необходимо отключить или включить кнопку.

   Совет

   Чтобы отобразить или скрыть кнопку, воспользуйтесь свойством IsVisible.

Включение кнопки с помощью свойства IsLoaded

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

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

3. Откройте контекстное меню метода и выберите Изменить код CanExecute.

4. В редакторе кода добавьте следующий код, заменив Orders именем сущности, Photo — именем свойства сущности, а GetPhoto — именем функции, которую требуется выполнять.

   var result = false; 
   if (!screen.Order.details.properties.Photo.isLoaded) { 
   screen.Order.getPhoto(); 
   } else { 
   screen.Order.getPhoto().then(function (ph) { 
   result = !ph; 
   }); 
   } 
   return result; 
   

   Метод CanExecute вызывается при создании экрана. При первом прохождении код проверяет, загружено ли уже свойство Photo. Если нет, то код загружает данные и функция заканчивается. После загрузки данных метод CanExecute вызывается снова, и выполняется ветвь else. На этот раз функция GetPhoto выполняется синхронно, поскольку данные уже загружены, что гарантирует допустимый результат.

Настройка команды "Сохранить" для сохранения в нескольких источниках данных

Можно сохранять обновления с одного экрана в нескольких источниках данных, настроив встроенную команду Сохранить с помощью объекта Promise WinJs.

Сохранение в нескольких источниках данных

1. На панели инструментов окна Конструктор экрана нажмите кнопку Запись кода.

2. В редакторе кода добавьте следующий код в метод onsavechanges, заменив NorthwindData и ApplicationData именами своих источников данных.

   myapp.onsavechanges = function (e) {
   
       var promises = [];
   
       promises.push(myapp.activeDataWorkspace.NorthwindData.saveChanges());
   
       promises.push(myapp.activeDataWorkspace.ApplicationData.saveChanges());
   
       e.detail.promise = WinJS.Promise.join(promises);
   
   };
   

   Если требуется больше источников данных, можно добавить для каждого из них по строке promises.push….

Возврат фокуса к выбранному элементу списка

После перехода с элемента списка на экран Вид или Правка поведением по умолчанию является возврат фокуса к первому элементу списка. Часто желательно возвратить фокус к элементу списка, запустившему экран — особенно в больших списках, требующих прокрутки. Такое поведение можно задать путем привязки к методу Custom Method и использования метода JQuery scrollTop.

Задание фокуса

1. В конструкторе экрана выберите узел Список, в котором требуется реализовать поведение.

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

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

4. В окне Свойства щелкните ссылку Изменить код Execute.

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

   var scrollTopPosition = $(window).scrollTop();
       myapp.showViewOrder(screen.Orders.selectedItem, {
           afterClosed: function () {
               $(window).scrollTop(scrollTopPosition);
           }
       });
   

Использование элемента управления JQuery Mobile

Конструктор экрана предоставляет ограниченный набор элементов управления для отображения данных, но можно легко добавить элементы управления JQuery Mobile, чтобы расширить функциональность пользовательского интерфейса. Библиотека JQuery Mobile Foundation содержит множество элементов управления, оптимизированных для мобильных устройств, в том числе ползунки, переключатели, флажки и другие элементы. См. статью JQuery Mobile Framework.

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

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

1. В окне Конструктор экрана выберите узел числового поля.

2. Замените элемент управления Текстовое поле элементом Пользовательский элемент управления.

3. В окне Свойства задайте свойству Ширина значение Растянуть в контейнере.

4. Щелкните ссылку Изменить код метода Render и в окне Редактор кода добавьте следующий код в метод render.

   createSlider(element, contentItem, 0, 100);
   

   Примечание

   По умолчанию диапазон значений свойства — от 0 до 100.При необходимости замените эти числа требуемыми в приложении значениями.

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

   function createSlider(element, contentItem, min, max) {
       // Generate the input element.var value = contentItem.value || 0,
           $element = $(element)
               .append('<input type="range" min="' + min + '" max="' + max + '" value="' + value + '"/>')
               .on("slidestop", function () {
                   contentItem.value = $element.find("input").val();
               });
   

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

Элемент управления FlipSwitch, отображающий значения Boolean, предоставляет только 2 параметра для отображения текста: Да и Нет или Вкл. и Выкл.. Если требуется отобразить другие значения, можно создать пользовательский элемент управления, основанный на элементе управления FlipSwitch. В следующем примере создается элемент управления True/False.

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

1. В окне Конструктор экрана выберите узел поля Boolean.

2. Измените тип элемента управления с FlipSwitch на Пользовательский элемент управления.

3. В окне Свойства щелкните ссылку Изменить код метода Render.

4. В редакторе кода добавьте следующий код в метод отображения:

   createBooleanSwitch(element, contentItem);
   

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

   function createBooleanSwitch(element, contentItem) {
       var $flipSwitch = $('<select data-role="slider"></select>').appendTo($(element));
       $('<option value="false">false</option>').appendTo($flipSwitch);
       $('<option value="true">true</option>').appendTo($flipSwitch);
   
       // set select value to match the original contentItem.value
       $flipSwitch.val((contentItem.value) ? "true" : "false");
   
       // add listener to update contentItem's value if slider changes
       $flipSwitch.change(function () {
           contentItem.value = ($flipSwitch.val() == "true");
       });
   
       // visually refresh the slider.
       $flipSwitch.slider().slider("refresh");
   };
   

   Примечание

   Для правильного отображения элемента управления может потребоваться задать свойству Ширина значение не менее 150.

Реализация элемента управления CheckBox

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

Отображение элемента CheckBox

1. В конструкторе экрана выберите узел поля Boolean и измените тип элемента управления с FlipSwitch на Пользовательский элемент управления.

2. В окне Свойства в разделе Высота выберите Min и введите 100. Это необходимо, поскольку элемент управления CheckBox выше, чем стандартный элемент управления TextBox. Если в форме используются другие типы элементов управления, возможно, потребуется задать другое значение.

3. В разделе Общие щелкните ссылку Изменить код метода Render.

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

   // Create the checkbox and add it to the DOM.
       var checkbox = $("<input type='checkbox'/>")
               .css({
                   height: 20,
                   width: 20,
                   margin: "10px"
               })
               .appendTo($(element));
   
       // Determine if the change was initiated by the user.
       var changingValue = false;
   
       checkbox.change(function () {
           changingValue = true;
           contentItem.value = checkbox[0].checked;
           changingValue = false;
       });
       contentItem.dataBind("value", function (newValue) {
           if (!changingValue) {
               checkbox[0].checked = newValue;
           }
       });
   

Если для обязательного поля на экране Добавить/Изменить отображается CheckBox, также необходимо задать этому элементу управления начальное значение; в противном случае пользователь может получить ошибку проверки.

Задание начального значения

1. В конструкторе сущностей на панели Перспектива перейдите на вкладку HTMLClient.

2. В списке Запись кода выберите created.

3. В редакторе кода добавьте код в метод created, чтобы задать начальные значения:

   entity.FieldName = new Boolean();
       entity.FieldName = 'true';
   

   Замените FieldName именем своего поля Boolean. Для инициализации элемента управления в невыбранном состоянии замените значение true значением false.

Переопределение внешнего вида пользовательского элемента управления

Пользовательские элементы управления создаются на основе платформы JQuery Mobile, и платформа автоматически задает стиль некоторых элементов управления для оптимального отображения на мобильных устройствах. Иногда требуется переопределить внешний вид элементов и сделать его более стандартным. Например, кнопки JQuery Mobile крупнее, чем классический элемент управления "кнопка". Атрибут data-role="none" позволяет переопределить стиль, чтобы отображалась обычная кнопка.

Применение атрибута

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

2. В окне Свойства щелкните ссылку Изменить код метода Render.

3. Добавьте следующий код в метод render.

   var $element = $(element);
       var $textbox1 = $('<input type="text" data-role="none"/>');
       $element.append($textbox1);
   

   Примечание

   Замените textbox1 именем настраиваемого элемента управления, а “text” — типом элемента управления.

Получение местоположения устройства

Можно включить определение местоположения на карте и сценарии близкого расположения с помощью интерфейсов API геолокации, чтобы установить текущее местоположение конкретного устройства. В следующем примере определяются координаты сущности с именем MyLocation, которая имеет свойства типа Double с именами Latitude и Longitude.

Получение местоположения

1. На панели инструментов окна Конструктор экрана нажмите кнопку Запись кода.

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

   myapp.AddEditMyLocation.GetGeolocation_execute = function (screen) { 
   
   
   if (navigator.geolocation) { 
   navigator.geolocation.getCurrentPosition(function (pos) { 
   screen.MyLocation.latitude = pos.coords.latitude.toString(); 
   screen.MyLocation.longitude = pos.coords.longitude.toString(); 
   }); 
   } 
   else { 
   alert("Geolocation not supported"); 
   } 
   }; 
   

Отображение местоположения на карте

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

В следующем примере местоположения клиентов представлены в виде кнопок на карте. Нажав кнопку, можно просмотреть сведения о клиенте. Для работы этого примера требуется, чтобы экран BrowseCustomers был привязан к сущности Customers с полями Address, City и Country, и контекстное меню Details находилось на экране BrowseCustomers.

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

1. В окне Обозреватель решений выберите узел Скрипты и добавьте файл JavaScript с именем lightswitch.bing-maps.js.

2. В редакторе кода добавьте в этот файл следующий код:

   /// <reference path="jquery-1.7.1.js" />
   /// <reference path="jquery.mobile-1.1.1.js" />
   /// <reference path="msls-1.0.0.js" />
   
   (function ($) {
       var _credentialsKey = "Ao75sYhQSfLgssT0QkO9n22xt0lgxzntrZ1xpCwLOC-kGhI584OYED3viFXLIWgC";
   
       // load the directions module only once per session
       Microsoft.Maps.loadModule('Microsoft.Maps.Directions');
   
       $.widget("msls.lightswitchBingMapsControl", {
           options: {
               mapType: Microsoft.Maps.MapTypeId.road,
               zoom: 3,
               showDashboard: false
           },
   
           _create: function () {
           },
   
           _init: function () {
               this.createMap();
           },
   
           destroy: function () {
               this._destroyBingMapsControl();
           },
   
           createMap: function () {
               this.htmlMapElement = this.element[0];
   
               // create empty map
               this.map = new Microsoft.Maps.Map(this.htmlMapElement,
                                   {
                                       credentials: _credentialsKey,
                                       mapTypeId: this.options.mapType,
                                       zoom: this.options.zoom,
                                       showDashboard: this.options.showDashboard
                                   });
           },
   
           addPinAsync: function (street, city, country, i, callback) {
   
               var widgetInstance = this;
   
               // construct a request to the REST geocode service using the widget's
               // optional parameters
               var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations/" +
                                    street + "," + city + "," + country +
                                    "?key=" + _credentialsKey;
   
               // make the ajax request to the Bing Maps geocode REST service
               $.ajax({
                   url: geocodeRequest,
                   dataType: 'jsonp',
                   async: true,
                   jsonp: 'jsonp',
                   error: function (XMLHttpRequest, textStatus, errorThrown) {
                       alert(textStatus + " " + errorThrown);
                   },
                   success: function (result) {
                       var coordinates = null;
   
                       if (result && result.resourceSets && (result.resourceSets.length > 0) &&
                           result.resourceSets[0].resources && (result.resourceSets[0].resources.length > 0)) {
   
                           // create a location based on the geocoded coordinates
                           coordinates = result.resourceSets[0].resources[0].point.coordinates;
   
                           widgetInstance._createPinFromCoordinates(coordinates, i, callback);
                       }
                   }
               });
           },
   
           _createPinFromCoordinates: function(coordinates, i, callback) {
               var location = new Microsoft.Maps.Location(coordinates[0], coordinates[1]);
               var pin = new Microsoft.Maps.Pushpin(location, { text: '' + i + '' });
               Microsoft.Maps.Events.addHandler(pin, 'click', callback);
               this.map.entities.push(pin);
           },
   
           resetMap: function () {
               this.map.entities.clear();
           },
   
           _handleError: function (error) {
               alert("An error occurred.  " + error.message);
           },
   
           _destroyBingMapsControl: function () {
               if (this.map != null) {
                   this.map.dispose();
                   this.map = null;
               }
           }
       });
   }(jQuery));
   

   Важно!

   Замените значение var _credentialsKey своим ключом разработчика Bing Maps.

Добавление карты на экран

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

2. В окне Свойства измените Имя элемента управления на Map, а затем щелкните ссылку Изменить код метода Render.

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

   /// <reference path="../GeneratedArtifacts/viewModel.js" />
   
   var mapDiv;
   var current = 0;
   var step = 15;
   
   myapp.BrowseCustomers.Customer_render = function (element, contentItem) {
       mapDiv = $('<div />').appendTo($(element));
       $(mapDiv).lightswitchBingMapsControl();
   
       var visualCollection = contentItem.value;
       if (visualCollection.isLoaded) {
           showItems(current, step, contentItem.screen);
       } else {
           visualCollection.addChangeListener("isLoaded", function () {
               showItems(current, step, contentItem.screen);
           });
           visualCollection.load();
       }
   };
   
   function showItems(start, end, screen) {
       $(mapDiv).lightswitchBingMapsControl("resetMap");
   
       $.each(screen.Customers.data, function (i, customer) {
           if (i >= start && i <= end) {
               $(mapDiv).lightswitchBingMapsControl("addPinAsync", customer.Address,
                   customer.City, customer.Country, i + 1, function () {
                       screen.Customers.selectedItem = customer;
                       screen.showPopup("Details");
                   });
           }
       });
   };
   

4. В окне Обозреватель решений перейдите в Представление файлов.

5. В узле HTMLClient откройте файл default.htm.

6. В редакторе кода добавьте следующую ссылку в начало блока ссылок на скрипты:

   <script type="text/javascript" charset="utf­8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
   

7. В конце блока ссылок на скрипты добавьте ссылку на файл JavaScript:

   <script type="text/javascript" charset="utf­8" src="Scripts/lightswitch.bing-maps.js"></script>
   

Отображение на устройстве цифровой клавиатуры

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

Отображение цифровой клавиатуры

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

2. В окне Свойства щелкните ссылку Изменить код метода PostRender.

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

   $(element).find("input").get(0).type = "number";
   

   Примечание

   Таким же образом можно отображать клавиатуру для другого типа входных данных. Клавиатуру для данных типа color в HTML-клиенте приложения LightSwitch отобразить невозможно.

Настройка пользовательского интерфейса для различных форм-факторов

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

Скрытие элемента пользовательского интерфейса на некоторых устройствах

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

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

   $(element).addClass("hidden-on-phone");
   

3. В окне Обозреватель решений перейдите в Представление файлов и разверните узел Содержимое проекта HTMLClient.

4. Откройте файл user-customizations.css.

5. В редакторе кода добавьте следующий код в конец раздела @media.

   .hidden-on-phone {
          display: none;
      }
   

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

Можно также показывать различные домашние экраны на телефонах и планшетах, добавив код JavaScript в файл default.htm.

Отображение разных домашних экранов на разных устройствах

1. В окне Обозреватель решений выберите узел HTMLClient и откройте файл default.htm.

2. В редакторе кода замените элемент скрипта, содержащий функцию msls.run(), следующим кодом:

   <script type="text/javascript">
          $(document).ready(function () {
              if ($.mobile.media("screen and (max-width: 400px) and (orientation: portrait), \
                  screen and (max-width: 640px)  and (max-height: 400px) and (orientation: landscape)")) {
                  var screen = "BrowseCustomersSmall";
              } else {
                  var screen = "BrowseCustomers";
              }
              msls._run(screen)
              .then(null, function failure(error) {
                  alert(error);
              });
          });
      </script>
   

   Замените BrowseCustomersSmall именем экрана для телефонов и замените BrowseCustomers именем экрана для планшетов.

Обработка HTML-данных непосредственно на экране

Некоторые базы данных сохраняют HTML в полях данных String. Приложение LightSwitch будет интерпретировать эти сведения как обычные строки и отображать исходный HTML-код в элементе управления Текст на экране (теги и текст). Фактический HTML-код можно отображать на экране с помощью пользовательского элемента управления и метода render.

Предупреждение

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

Отображение HTML на экране

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

2. В окне Свойства щелкните ссылку Изменить код метода Render.

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

   element.innerHTML = contentItem.stringValue;
   

Отображение заголовка во всплывающем окне

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

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

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

2. В диалоговом окне Добавление элемента данных добавьте Локальное свойство типа String.

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

4. В окне Свойства задайте свойству LabelPosition значение None.

5. В окне Конструктор экрана откройте список Запись кода и выберите метод postRender.

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

   element.textContent = "This is the title";
       $(element).css("font-size", "23px");
       $(element).css("font-weight", "bold");
   

Копирование данных на новый экран

В приложениях, предполагающих ввод данных, часто возникает необходимость дублировать часть информации с одного экрана ввода на другой. Можно легко реализовать функцию копирования с помощью метода beforeShown для формы. В следующем примере на экран AddEditCustomers добавляется кнопка Copy, которая открывает новый экран с заполненными полями Country и Region для текущего клиента.

Копирование данных

1. В окне Конструктор экрана выберите узел Панель команд экрана AddEdit, на который требуется добавить кнопку Copy

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

3. В диалоговом окне Добавление кнопки выберите переключатель Создать собственный метод, назовите его Copy и нажмите кнопку ОК.

4. На левой панели выберите узел Copy, затем на панели инструментов откройте список Запись кода и выберите команду Copy_execute.

5. В редакторе кода добавьте следующий код в метод Copy_execute:

   myapp.showAddEditCustomer(null, {
           beforeShown: function (addNewScreen) {
               var copied_item = screen.Customer;
               var new_item = new myapp.Customer;
               new_item.Country = copied_item.Country;
               new_item.Region = copied_item.Region;
               addNewScreen.Customer = new_item;
           }
       })
   

Изменение навигации по экранам при сохранении

По умолчанию реакция на событие кнопки Сохранить на экране Добавить/Изменить — закрыть экран и вернуться к запустившему его экрану. В некоторых случаях может понадобиться перейти на другой экран, например экран Вид, где только что добавленные данные отображаются в другом формате. Это можно сделать, добавив код в метод afterClosed кнопки, запускающей экран Добавить/Изменить. В следующем примере на экран добавляется кнопка Add and View Order. Ее поведение изменено таким образом, чтобы после сохранения отображался экран View.

Переход на новый экран

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

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

3. В диалоговом окне Добавление кнопки выберите переключатель Создать собственный метод, назовите его AddAndViewOrder и нажмите кнопку ОК.

4. На левой панели выберите узел AddAndViewOrder, затем на панели инструментов откройте список Запись кода и выберите команду AddAndViewOrder _execute.

5. В редакторе кода добавьте следующий код в метод AddAndViewOrder_execute:

   myapp.showAddEditOrder(null, {
           beforeShown: function (AddEditScreen) {
               // Create a new order here.
               var newOrder = new myapp.Order();
               AddEditScreen.Order = newOrder;
           },
           afterClosed: function (addEditScreen, navigationAction) {
               // If the user commits the change, show the View screen
               if (navigationAction === msls.NavigateBackAction.commit) {
                   var newOrder = addEditScreen.Order;
                   myapp.showViewOrder(newOrder);
               }
           }
       })
   

   Обратите внимание, что код также управляет созданием нового заказа в функции beforeShown. Это значение переопределяет поведение формы AddEdit по умолчанию и обрабатывает случай, когда пользователь отменяет изменения.

Отключение создания закладок

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

Отключение создания закладок

1. В обозревателе решений разверните узел HTMLClient, выберите и откройте файл default.htm.

2. В редакторе кода найдите строку $(document).ready(function () { и добавьте следующую строку кода сразу под этой строкой:

   msls.application.options.disableUrlScreenParameters = true;
   

   Идентификатор сущности будет удален из URL-адреса, и пользователи больше не смогут создавать закладки для экранов.

См. также

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

Справочник по клиентскому интерфейсу API HTML