Outils et exemplesTools and Samples

Concepteur de cartesCard Designer

Vous avez besoin d’un outil pour concevoir vos cartes ?Need for a tool to design your cards? Ne cherchez pas plus loin. Sur https://adaptivecards.io/designer, vous trouverez un concepteur de cartes adaptatives basé sur le navigateur.Look no further than the browser-based adaptive card designer at https://adaptivecards.io/designer

capture d’écran du concepteurdesigner screenshot

Incorporer le concepteur dans votre applicationEmbed the designer into your app

Mais pourquoi y envoyer vos utilisateurs quand vous pouvez incorporer le concepteur de cartes directement dans votre application web à l’aide de notre bibliothèque JavaScript.But why send your users there when you can embed the card designer directly into your web app using our JavaScript library.

Pour bien démarrer, consultez le package adaptivecards-designer.Check out the adaptivecards-designer package to get started.

Validation de schémaSchema validation

La validation de schéma est un excellent moyen de simplifier la création d’outils.Schema validation is a powerful way of making authoring easier and enabling tooling.

Nous mettons à votre disposition un fichier de schéma JSON complet pour la modification et la validation des cartes adaptatives dans JSON.We have provided a complete JSON Schema file for editing and validating adaptive cards in json. Notez que l’URL de schéma a une version spécifique. Les versions plus récentes des cartes adaptatives auront une URL correspondante.Note that the schema URL is versioned, newer versions of Adaptive Cards will have a corresponding URL.

Dans Visual Studio et Visual Studio Code, vous pouvez obtenir une fonctionnalité IntelliSense automatique en incluant une référence $schema.In Visual Studio and Visual Studio Code you can get automatic Intellisense by including a $schema reference.

incorrect

complétion automatique

ExempleExample

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

Extensions Visual Studio CodeVisual Studio Code Extensions

Adaptive Cards StudioAdaptive Cards Studio

place de marché

Grâce à Adaptive Cards Studio, vous pouvez créer des cartes directement dans Visual Studio Code.With AdaptiveCards Studio you can author cards directly in Visual Studio Code. L’extension détecte automatiquement toutes les cartes adaptatives dans votre espace de travail et vous permet de modifier facilement le modèle de carte et les exemples de données.The Extension automatically detects all Adaptive Cards in your working space and lets you easily edit the card template and sample data.

En savoir plus et l’installer à partir du marketplace Visual Studio CodeRead more and install it from the Visual Studio Code Marketplace

Adaptive Card ViewerAdaptive Card Viewer

Nous avons créé une extension Visual Studio Code qui vous permet de visualiser la carte que vous modifiez en temps réel dans l’éditeur lui-même.We have created a Visual Studio code extension which allows you to visualize the card you are editing in real time inside the editor itself.

extension

Pour l’installer, ouvrez la Place de marché des extensions et recherchez Adaptive Card Viewer.To install, open Extensions Marketplace and search for Adaptive Card Viewer.

place de marché

UsageUsage

Quand vous modifiez un fichier .json avec une propriété $schema de carte adaptative, vous pouvez la voir à l’aide de Ctrl+Shift+V A.When you are editing a .json file with an Adaptive Card $schema property you can view by using Ctrl+Shift+V A.

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

OptionsOptions

Le paramètre Visual Studio Code suivant est disponible pour la visionneuse AdaptiveCards.The following Visual Studio Code setting is available for the AdaptiveCards Viewer. Vous pouvez le définir dans les paramètres utilisateur ou dans les paramètres de l’espace de travail.This can be set in User Settings or Workspace Settings.

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

Exemple de visualiseur WPFWPF Visualizer Sample

L’exemple de projet de visualiseur WPF vous permet de visualiser des cartes à l’aide de WPF/XAML sur un ordinateur Windows.The WPF visualizer sample project lets you visualize cards using WPF/Xaml on a Windows machine. Un éditeur hostconfig est intégré pour modifier et voir les paramètres de configuration de l’hôte.A hostconfig editor is built in for editing and viewing host config settings. Enregistrez ces paramètres au format JSON pour les utiliser dans le cadre du rendu de votre application.Save these settings as a JSON to use them in rendering in your application.

visualiseur WPF

Exemple ImageRender WPFWPF ImageRender Sample

L’exemple de projet ImageRender convertit n’importe quelle carte au format PNG à partir de la ligne de commande à l’aide de WPF.The ImageRender sample project turns any card into a PNG from the command line using WPF.