Como renderizar cartões dentro do aplicativoRendering cards inside your application

É fácil renderizar Cartões Adaptáveis dentro do aplicativo.It's easy to render Adaptive Cards inside your application. Fornecemos SDKs para todas as plataformas comuns, além de fornecer uma especificação detalhada para a criação de seu próprio renderizador de Cartões Adaptáveis.We provide SDKs for the all common platforms, as well as provide a detailed specification for creating your own Adaptive Card renderer.

  1. Instale um SDK do renderizador – para a plataforma de destino.Install a renderer SDK - for your target platform.
  2. Crie uma instância de renderizador – configurada com o estilo, as regras e os manipuladores de eventos de ação do aplicativo.Create a renderer instance - configured with your app's style, rules, and action event handlers.
  3. Renderize um cartão para uma interface do usuário nativa – com estilo definido automaticamente para o aplicativo.Render a card to native UI - automatically styled to your app.

SDKs de Cartões AdaptáveisAdaptive Cards SDKs

PlataformaPlatform InstalarInstall BuildBuild DocsDocs StatusStatus
JavaScriptJavaScript Instalar NPMnpm install OrigemSource DocumentosDocs Status do Build
.NET WPF.NET WPF Instalação do NugetNuget install OrigemSource DocumentosDocs Status do Build
HTML .NET.NET HTML Instalação do NugetNuget install OrigemSource DocumentosDocs Status do Build
Windows UWPWindows UWP Instalação do NugetNuget install OrigemSource DocumentosDocs Status do Build
AndroidAndroid Central do MavenMaven Central OrigemSource DocumentosDocs Status do Build
iOSiOS CocoaPodsCocoaPods OrigemSource DocumentosDocs Status do Build

Criar uma instância do renderizadorCreate an instance of the renderer

A próxima etapa é criar uma instância de um AdaptiveCardRenderer.The next step is to create an instance of an AdaptiveCardRenderer.

Vincular eventos de açãoHook up action events

Por padrão, as ações serão renderizadas como botões no cartão, mas cabe ao aplicativo fazer com que eles se comportem conforme o esperado.By default, the actions will render as buttons on the card, but it's up to your app to make them behave as you expect. Cada SDK tem o equivalente a um evento OnAction que você precisa manipular.Each SDK has the equivalent of an OnAction event that you must handle.

  • Action.OpenUrl – abra o url especificado.Action.OpenUrl - open the specified url.
  • Action.Submit – envie o resultado do envio para a origem.Action.Submit - take the result of the submit and send it to the source. O modo como você o envia para a origem do cartão depende inteiramente de você.How you send it to the source of the card is entirely up to you.
  • Action.ShowCard – invoca uma caixa de diálogo e renderiza o subcartão nessa caixa de diálogo.Action.ShowCard - invokes a dialog and renders the sub-card into that dialog. Observe que você só precisará lidar com isso se ShowCardActionMode estiver definido como popup.Note that you only need to handle this if ShowCardActionMode is set to popup.

Renderizar um cartãoRender a card

Depois de adquirir um conteúdo de cartão, basta efetuar uma chamada ao renderizador e passar o cartão.After you acquire a card payload, simply call the renderer and pass in the card. Você obterá um objeto de interface do usuário nativo composto pelo conteúdo do cartão.You will to get back a native UI object made up of the card contents. Agora, basta colocar essa interface do usuário em algum lugar no aplicativo.Now just put this UI somewhere in your app.

PersonalizaçãoCustomization

Há várias maneiras de personalizar o que é renderizado.There are several ways you can customize what is rendered.

HostConfigHostConfig

Um HostConfig é um objeto de configuração multiplataforma compartilhado que controla o estilo básico e o comportamento de cartões dentro do aplicativo.A HostConfig is a shared, cross-platform configuration object that controls the basic styling and behavior of cards inside your app. Ele define itens como tamanhos da fonte, espaçamento entre elementos, cores, número de ações compatíveis, etc.It defines things like font sizes, spacing between elements, colors, number of supported actions, etc.

Estilo de plataforma nativaNative platform styling

A maioria das estruturas de interface do usuário permite que você defina estilos do cartão renderizado usando o estilo da estrutura de interface do usuário nativa.Most UI frameworks allow you to style the rendered card by using the native UI framework styling. Por exemplo, em HTML, você pode especificar classes CSS para o HTML. Em XAML, você pode passar um ResourceDictionary personalizado para um controle refinado da saída.For example, in HTML you can specify CSS classes for the HTML, or in XAML you can pass in a custom ResourceDictionary for fine-grained control of the output.

Personalizar renderização por elementoCustomize per-element rendering

Cada SDK permite que você substitua a renderização de qualquer elemento ou até mesmo que adicione suporte para elementos totalmente novos que você definir.Each SDK allows you to override the rendering of any element, or even add support for entirely new elements that you define. Por exemplo, você pode alterar o renderizador Input.Date para emitir seu próprio controle personalizado e ainda manter o restante da saída do renderizador.For example, you can change the Input.Date renderer to emit your own custom control while still retaining the rest of the output of the renderer. Ou você pode adicionar suporte para um elemento Rating personalizado definido por você.Or you can add support for a custom Rating element that you define.