Html Руководство
Экраны HTML-клиента Практическое руководство. При разработке экранов HTML для приложения LightSwitch в основном используются. Руководства пользователя по 44.
При создании экрана ввода данных может потребоваться заполнять некоторые поля значениями по умолчанию. Например, можно задать полю даты значение по умолчанию, равное текущей дате. Чтобы задать значения по умолчанию на экране Добавить/Изменить сведения, который относится к сущности, требуется создать код в методе created этой сущности.
Установка значений по умолчанию. В конструкторе сущностей на панели Перспектива перейдите на вкладку HTMLClient. В списке Запись кода выберите created. В редакторе кода добавьте код в метод created, чтобы задать начальные значения. Для изменения формата даты необходимо использовать библиотеку JavaScript, например. Добавьте библиотеку в проект, затем добавьте ссылку в файл default.htm и напишите код в методе Render или postRender.
Добавление библиотеки. В окне Обозреватель решений откройте контекстное меню узла HTMLClient и выберите Управление пакетами NuGet.
В диалоговом окне Управление пакетами NuGet выберите узел В сети. В текстовом поле Поиск в Интернете введите moment.js. Нажмите кнопку Установить, чтобы установить библиотеку Moment.js, затем нажмите кнопку Закрыть. Добавление ссылки. В окне Обозреватель решений разверните узел HTMLClient и откройте файл default.htm.
В редакторе кода добавьте тег скрипта после последнего тега. Внешний вид элемента управления ListView определяется каскадной таблицей стилей (CSS), и этот стиль достаточно сложный.
Вместо того чтобы редактировать таблицу CSS, можно изменить цвета в коде с помощью метода postRender. Обратите внимание, что стиль самого списка ListView изменить нельзя, но можно изменить стиль каждого объекта Элемент списка через его родительский элемент RowTemplate.
Каждый Элемент списка имеет заданное фоновое изображение background-image. Поэтому прежде чем применить новый цвет фона background-color, необходимо задать background-image. Изменение цветов. В конструкторе экрана выберите узел Макет строк (или Макет столбцов) для списка. В окне Свойства щелкните ссылку Изменить код метода PostRender. В редакторе кода добавьте следующий код в метод postRender.
Предоставив пользовательскую логику проверки, вы сможете гарантировать, что в источнике данных будут сохраняться только допустимые данные. Можно добавить код проверки в метод beforeApplyChanges, вызываемый при нажатии кнопки Сохранить на экране Добавить/Изменить. В следующем примере при вводе в поле ContactName восклицательного знака выводится сообщение о том, что данный символ не допускается в этом поле. Проверка данных. В окне Конструктор экрана в списке Запись кода выберите beforeApplyChanges.
В редакторе кода добавьте следующий код, заменив Contact именем сущности, а ContactName — именем строкового поля, которое требуется проверять. LightSwitch предоставляет встроенные методы добавления и изменения элементов на экране HTML, но не предоставляет методы их удаления. Можно легко создать собственный метод для удаления элементов с экрана или из контекстного меню. Удаление элемента. Хрестоматия по античной литературе. На панели инструментов окна Конструктор экрана нажмите кнопку Добавление элемента данных. В диалоговом окне Добавление элемента данных выберите переключатель Метод и введите имя метода.
Откройте контекстное меню метода и выберите Изменить код Execute. В редакторе кода добавьте следующий код, заменив myScreen именем экрана, а оба экземпляра customers — именем сущности. Можно предоставить пользователям возможность выбирать элемент из списка при отображении модального диалогового окна. Для этого просто добавьте запрос экрана и контекстное меню. В этом примере имеется экран Добавить/Изменить сведения с именем AddOrders, основанный на сущности OrderDetails, и вторая связанная сущность с именем Products.
Создание модального элемента выбора. На панели инструментов окна Конструктор экрана нажмите кнопку Добавление элемента данных.
В диалоговом окне Добавление элемента данных выберите переключатель Запрос, а затем выберите из списка Products. На левой панели окна Конструктор экрана отображается запрос Products.
В дереве содержимого откройте контекстное меню узла Контекстное меню и выберите Добавить всплывающее окно. В списке Добавить выберите Products. На панели инструментов в списке Запись кода щелкните created. В области Редактор кода добавьте следующий код в метод created.
По умолчанию всплывающее окно отображается в нижней части экрана, а на более широких экранах — в нижней части экрана справа. При таком расположении на большом экране окно может быть не очень заметным. В следующем примере всплывающее окно размещается в центре экрана, благодаря чему его лучше видно. Расположение всплывающего окна по центру. В конструкторе экрана выберите узел кнопки, открывающей всплывающее окно. В окне Свойства в разделе Действия щелкните ссылку Касание. В диалоговом окне Изменить действие касания выберите переключатель Создать собственный метод, укажите имя метода и нажмите кнопку ОК.
В окне Свойства щелкните ссылку Изменить код Execute. В редакторе кода добавьте следующий код в метод execute. Вы можете предоставить пользователям несколько вариантов действий в окне сообщения, а затем выполнить выбранное действие. В следующем примере в зависимости от того, нажал ли пользователь в окне сообщения кнопку 'Да', 'Нет' или 'Отмена', отображаются разные сообщения.
В своем коде вы можете заменить код оповещения кодом, выполняющим нужное действие: например, отображать разные экраны в зависимости от выбранного пользователем варианта. Отображение окна сообщения. В окне Конструктор экрана откройте контекстное меню узла Панель команд и выберите Добавить кнопку. В диалоговом окне Добавление кнопки выберите переключатель Создать собственный метод и назовите его ShowMessageBox. В редакторе кода добавьте следующий код в метод ShowMessageBoxexecute. По умолчанию имя проекта отображается в виде названия приложения на экране-заставке и в строке заголовка или на вкладке браузера.
Можно определить другой заголовок, изменив файл default.htm проекта. Изменение заголовка. В окне Обозреватель решений в узле HTMLClient откройте контекстное меню файла default.htm и выберите команду Открыть.
В редакторе кода найдите элемент и замените существующее значение своим названием. Эта строка появится в строке заголовка или на вкладке браузера. Найдите элемент и замените существующее значение своим заголовком. Эта строка отобразится на экране-заставке. Зачастую необходимо включить или отключить кнопку в зависимости от определенного условия. Например, можно отключить кнопку запуска экрана для определенных пользователей или включить кнопку добавления только в том случае, если требуется значение.
В следующем примере показано, как отключить кнопку, задав в коде свойство IsEnabled. Во втором примере показывается двухпроходный подход, основанный на методе CanExecute.
Данные загружается в LightSwitch асинхронно, но методы CanExecute для кнопок являются синхронными. Поэтому кнопку невозможно включить на основании загруженных данных в одном проходе, но можно воспользоваться свойством IsLoaded и реализовать два прохода. Отключение кнопки с помощью свойства IsEnabled. На панели инструментов окна Конструктор экрана нажмите кнопку Добавление элемента данных.
В диалоговом окне Добавление элемента данных выберите переключатель Метод и введите имя метода. Откройте контекстное меню метода и выберите Изменить код Execute. В редакторе кода добавьте следующий код, заменив MyButton именем своей кнопки. Screen.findContentItem( 'MyButton').isEnabled = false; Метод можно вызывать из кода, когда необходимо отключить или включить кнопку. Совет Чтобы отобразить или скрыть кнопку, воспользуйтесь свойством IsVisible. Включение кнопки с помощью свойства IsLoaded. На панели инструментов окна Конструктор экрана нажмите кнопку Добавление элемента данных.
В диалоговом окне Добавление элемента данных выберите переключатель Метод и введите имя метода. Откройте контекстное меню метода и выберите Изменить код CanExecute. В редакторе кода добавьте следующий код, заменив Orders именем сущности, Photo — именем свойства сущности, а GetPhoto — именем функции, которую требуется выполнять.
После перехода с элемента списка на экран Вид или Правка поведением по умолчанию является возврат фокуса к первому элементу списка. Часто желательно возвратить фокус к элементу списка, запустившему экран — особенно в больших списках, требующих прокрутки. Такое поведение можно задать путем привязки к методу Custom Method и использования метода JQuery scrollTop. Задание фокуса. В конструкторе экрана выберите узел Список, в котором требуется реализовать поведение. В окне Свойства в разделе Действия щелкните ссылку Касание.
В диалоговом окне Изменить действие касания выберите переключатель Создать собственный метод и нажмите кнопку ОК. В окне Свойства щелкните ссылку Изменить код Execute. В редакторе кода добавьте следующий код в метод Tapexecute. Конструктор экрана предоставляет ограниченный набор элементов управления для отображения данных, но можно легко добавить элементы управления JQuery Mobile, чтобы расширить функциональность пользовательского интерфейса. Библиотека JQuery Mobile Foundation содержит множество элементов управления, оптимизированных для мобильных устройств, в том числе ползунки, переключатели, флажки и другие элементы. В следующем примере добавляется элемент управления 'ползунок', позволяющий задавать числовое значение в элементе управления 'текстовое поле'.
Добавление элемента управления 'ползунок'. В окне Конструктор экрана выберите узел числового поля. Замените элемент управления Текстовое поле элементом Пользовательский элемент управления. В окне Свойства задайте свойству Ширина значение Растянуть в контейнере. Щелкните ссылку Изменить код метода Render и в окне Редактор кода добавьте следующий код в метод render. Элемент управления FlipSwitch, отображающий значения Boolean, предоставляет только 2 параметра для отображения текста: Да и Нет или Вкл. Если требуется отобразить другие значения, можно создать пользовательский элемент управления, основанный на элементе управления FlipSwitch.
В следующем примере создается элемент управления True/False. Настройка элемента управления. В окне Конструктор экрана выберите узел поля Boolean. Измените тип элемента управления с FlipSwitch на Пользовательский элемент управления. В окне Свойства щелкните ссылку Изменить код метода Render. В редакторе кода добавьте следующий код в метод отображения.
По умолчанию тип элемента управления для типа данных Boolean — элемент управления FlipSwitch, но можно легко заменить CheckBox пользовательским элементом управления. Отображение элемента CheckBox. В конструкторе экрана выберите узел поля Boolean и измените тип элемента управления с FlipSwitch на Пользовательский элемент управления. В окне Свойства в разделе Высота выберите Min и введите 100.
Это необходимо, поскольку элемент управления CheckBox выше, чем стандартный элемент управления TextBox. Если в форме используются другие типы элементов управления, возможно, потребуется задать другое значение. В разделе Общие щелкните ссылку Изменить код метода Render. В редакторе кода добавьте следующий код в метод render. Пользовательские элементы управления создаются на основе платформы JQuery Mobile, и платформа автоматически задает стиль некоторых элементов управления для оптимального отображения на мобильных устройствах.
Иногда требуется переопределить внешний вид элементов и сделать его более стандартным. Например, кнопки JQuery Mobile крупнее, чем классический элемент управления 'кнопка'. Атрибут data-role='none' позволяет переопределить стиль, чтобы отображалась обычная кнопка. Применение атрибута. В конструкторе экрана выберите узел пользовательского элемента управления. В окне Свойства щелкните ссылку Изменить код метода Render. Добавьте следующий код в метод render.
Чтобы вам было удобно добавлять функцию определения местоположения, получите бесплатный ключ разработчика. Затем создайте настраиваемый элемент управления, вызывающий веб-службу Bing Maps. В следующем примере местоположения клиентов представлены в виде кнопок на карте.
Нажав кнопку, можно просмотреть сведения о клиенте. Для работы этого примера требуется, чтобы экран BrowseCustomers был привязан к сущности Customers с полями Address, City и Country, и контекстное меню Details находилось на экране BrowseCustomers. Создание пользовательского элемента управления. В окне Обозреватель решений выберите узел Скрипты и добавьте файл JavaScript с именем lightswitch.bing-maps.js.
В редакторе кода добавьте в этот файл следующий код. Вы можете предоставить пользователям возможность вводить числовые и другие данные с помощью пользовательской экранной клавиатуры. В следующем примере при активации элемента управления Текстовое поле отображается цифровая клавиатура. Отображение цифровой клавиатуры.
Взять маленький контур, охватывающий рассматриваемую точку пространства (рис. Основные формулы по физике. Но ЭДС равна касательной составляющей вектора напряженности электрического поля Е, помноженной на длину контура. Чтобы перейти к ротору, как и в первом уравнении Максвелла, достаточно разделить ЭДС на площадь контура, а последнюю устремить к нулю, т.
Html Руководство
В окне Конструктор экрана выберите узел Текстовое поле для поля, которое должно содержать числовые данные. В окне Свойства щелкните ссылку Изменить код метода PostRender. В редакторе кода добавьте следующий код в метод PostRender. Для надлежащей работы приложения на различных мобильных устройствах можно настраивать интерфейс в зависимости от размера экрана. Например, можно отображать полный адрес клиента на планшете и скрывать эти сведения на телефоне, чтобы информацию не приходилось долго прокручивать.
Скрытие элемента пользовательского интерфейса на некоторых устройствах. В окне Конструктор экрана выберите узел, который необходимо скрыть, разверните список Запись кода и выберите метод postRender. В редакторе кода добавьте следующий код. Некоторые базы данных сохраняют HTML в полях данных String.
Html Руководство Скачать
Приложение LightSwitch будет интерпретировать эти сведения как обычные строки и отображать исходный HTML-код в элементе управления Текст на экране (теги и текст). Фактический HTML-код можно отображать на экране с помощью пользовательского элемента управления и метода render. Предупреждение Чтобы не создавать угроз безопасности, пользуйтесь таким подходом только тогда, когда HTML-код предоставляется из надежного источника. Отображение HTML на экране. В окне Конструктор экрана выберите узел, представляющий поле HTML, а затем измените тип элемента управления на Пользовательский элемент управления. В окне Свойства щелкните ссылку Изменить код метода Render.
В редакторе кода добавьте следующий код в метод render. Всплывающие окна позволяют быстро просматривать и вводить сведения, не переходя на другой экран. В отличие от экранов, в них не отображается заголовок, но при необходимости во всплывающее окно можно добавить заголовок или другой статический текст. В следующем примере показано отображение заголовка и настройка его шрифта. Добавление заголовка. На панели инструментов окна Конструктор экрана нажмите кнопку Добавление элемента данных.
В диалоговом окне Добавление элемента данных добавьте Локальное свойство типа String. В окне Конструктор экрана добавьте локальное свойство в Контекстное меню, а затем задайте типу элемента управления значение Текст. В окне Свойства задайте свойству LabelPosition значение None.
В окне Конструктор экрана откройте список Запись кода и выберите метод postRender. В редакторе кода добавьте следующий код в метод postRender. В приложениях, предполагающих ввод данных, часто возникает необходимость дублировать часть информации с одного экрана ввода на другой.
Можно легко реализовать функцию копирования с помощью метода beforeShown для формы. В следующем примере на экран AddEditCustomers добавляется кнопка Copy, которая открывает новый экран с заполненными полями Country и Region для текущего клиента. Копирование данных. В окне Конструктор экрана выберите узел Панель команд экрана AddEdit, на который требуется добавить кнопку Copy. На панели инструментов нажмите кнопку Добавить элемент макета и выберите Кнопка. В диалоговом окне Добавление кнопки выберите переключатель Создать собственный метод, назовите его Copy и нажмите кнопку ОК. На левой панели выберите узел Copy, затем на панели инструментов откройте список Запись кода и выберите команду Copyexecute.
В редакторе кода добавьте следующий код в метод Copyexecute. По умолчанию реакция на событие кнопки Сохранить на экране Добавить/Изменить — закрыть экран и вернуться к запустившему его экрану. В некоторых случаях может понадобиться перейти на другой экран, например экран Вид, где только что добавленные данные отображаются в другом формате.
Это можно сделать, добавив код в метод afterClosed кнопки, запускающей экран Добавить/Изменить. В следующем примере на экран добавляется кнопка Add and View Order. Ее поведение изменено таким образом, чтобы после сохранения отображался экран View.
Переход на новый экран. В окне Конструктор экрана выберите узел Панель команд экрана Обзор, на который требуется добавить кнопку. На панели инструментов нажмите кнопку Добавить элемент макета и выберите Кнопка. В диалоговом окне Добавление кнопки выберите переключатель Создать собственный метод, назовите его AddAndViewOrder и нажмите кнопку ОК. На левой панели выберите узел AddAndViewOrder, затем на панели инструментов откройте список Запись кода и выберите команду AddAndViewOrder execute.
В редакторе кода добавьте следующий код в метод AddAndViewOrderexecute. Функция создания закладок для экранов HTML-клиента позволяет пользователю скопировать URL-адрес определенного экземпляра экрана и вернуться к нему позднее.
URL-адрес частично основан на первичном ключе сущности экрана, поэтому, если первичный ключ содержит конфиденциальные сведения, такие как SSN, может потребоваться заблокировать его просмотр пользователями, отключив функцию создания закладок. Следующий код отключает создание закладок, удаляя идентификатор сущности (часть между именем экрана и идентификатором сеанса) из URL-адреса. Отключение создания закладок. В обозревателе решений разверните узел HTMLClient, выберите и откройте файл default.htm.
В редакторе кода найдите строку $(document).ready(function и добавьте следующую строку кода сразу под этой строкой.