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

Практическое руководство. Добавление настраиваемого элемента управления на экран HTML приложения LightSwitch

  • Статья

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

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

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

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

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

  2. Открыть контекстное меню для папки Скрипты, выберите Добавить, затем выберите Существующий элемент.

  3. Выберите файл JavaScript (js-файлы) для пользовательского элемента управления, а затем нажмите кнопку Добавить.

    ПримечаниеПримечание

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

  4. В <script> разделе default.htm для файла проекта добавьте тег скрипта, будет выглядеть как в следующем примере, где MyControl - имя пользовательского элемента управления.

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

Добавление новых элементов управления и замена существующих элементов управления

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

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

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

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

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

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

    Например, введите Customers.selectedItem.PostalCode для привязки к почтовому индексу клиента, или введите Customers.selectedItem, чтобы привязать ко всей записи клиента.

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

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

Заменить существующий элемент управления с пользовательским элементом управления

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

  2. В окне Свойства откройте список Тип элемента управления и выберите пункт Настраиваемый элемент управления.

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

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

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

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

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

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

  2. В поле Свойства выберите гиперссылку Отображает код правка.

  3. В редакторе кода добавьте код, который будет выглядеть как в следующем примере методу отрисовки:

    createMyControl(element, contentItem, “max-width: 300px; max-height: 300px”);

    Этот код отображает элемент управления во время выполнения.Замените MyControl именем элемента управления и измените параметры max-height и max-width по мере необходимости.

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

См. также

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

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