Прочитать на английском

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


Инструменты и примеры

Конструктор карточек

Вам нужен инструмент для проектирования карточек? Можете больше не искать! Вот удобный браузерный конструктор адаптивных карточек: https://adaptivecards.io/designer

designer screenshot

Внедрение конструктора в приложение

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

Чтобы приступить к работе, ознакомьтесь с пакетом adaptivecards-designer.

Проверка схемы

Проверка схемы — это эффективный способ упрощения процесса разработки и добавления инструментов.

Мы предоставили полный JSON-файл для редактирования и проверки адаптивных карт на основе JSON. Обратите внимание на то, что URL-адрес схемы соответствует версии, поэтому более новые версии адаптивных карточек будут иметь соответствующий URL-адрес.

В Visual Studio и Visual Studio Code можно включить автоматическую функцию IntelliSense, добавив ссылку $schema.

bad

autocomplete

Пример

{
    "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": []
}

Расширения Visual Studio Code

Студия адаптивных карточек

marketplace

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

Дополнительные сведения и установка из Visual Studio Code Marketplace

Средство просмотра адаптивных карточек

Мы создали расширение Visual Studio Code, которое позволяет визуализировать редактируемую карту в реальном времени в самом редакторе.

extension

Чтобы установить его, откройте Marketplace для расширений и выполните поиск Adaptive Card Viewer.

marketplace

Использование

При редактировании JSON-файла со свойством адаптивной карточки $schema его можно просмотреть с помощью Ctrl+Shift+V A.

{
    "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": []
}

Параметры

Следующий параметр Visual Studio Code доступен для Adaptive Card Viewer. Его можно задать в разделе "Параметры пользователя" или "Параметры рабочей области".

{
    // Open or not open the preview screen automatically
    "adaptivecardsviewer.enableautopreview": true,
}

Пример визуализатора WPF

Пример проекта визуализатора WPF позволяет визуализировать карточки с использованием WPF или XAML на компьютере с Windows. Доступен встроенный редактор hostconfig, в котором можно редактировать и просматривать параметры HostConfig. Сохраните эти параметры в JSON-файл, чтобы использовать их для отрисовки в своем приложении.

wpf visualizer

Пример ImageRender для WPF

Пример проекта ImageRender превращает любую карточку в PNG-файл из командной строки с помощью WPF.