IntroduçãoGetting Started

Um Cartão Adaptável é um modelo de objeto de cartão serializado em JSON.An Adaptive Card is a JSON-serialized card object model.

Estrutura do Cartão AdaptávelAdaptive Card structure

A estrutura básica de um cartão é a seguinte:The basic structure of a card is as follows:

  • AdaptiveCard – o objeto raiz descreve o AdaptiveCard propriamente dito, incluindo sua composição de elementos, suas ações, como ele deve ser falado e a versão do esquema necessária para renderizá-lo.AdaptiveCard - The root object describes the AdaptiveCard itself, including its element makeup, its actions, how it should be spoken, and the schema version required to render it.
  • body – o corpo do cartão é composto por blocos de construção conhecidos como elements.body - The body of the card is made up of building-blocks known as elements. Os elementos podem ser compostos em disposições quase infinitas para criar muitos tipos de cartões.Elements can be composed in nearly infinite arrangements to create many types of cards.
  • actions – muitos cartões têm um conjunto de ações que um usuário pode executar nele.actions - Many cards have a set of actions a user may take on it. Essa propriedade descreve as ações que normalmente são renderizadas em uma "barra de ações" na parte inferior.This property describes those actions which typically get rendered in an "action bar" at the bottom.

Cartão de exemploExample Card

Este cartão de exemplo, que inclui uma única linha de texto seguido por uma imagem.This sample card which includes a single line of text followed by an image.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Propriedade TypeType property

Cada elemento tem uma propriedade type que identifica o tipo de objeto.Every element has a type property which identifies what kind of object it is. Observando o cartão acima, você poderá ver que temos dois elementos: um TextBlock e uma Image.Looking at the above card, you can see we have two elements, a TextBlock and an Image.

Todos os elementos do Cartão Adaptável são empilhados verticalmente e se expandem até a largura de seu pai (considere display: block em HTML).All Adaptive Card elements stack vertically and expand to the width of their parent (think display: block in HTML). No entanto, você pode usar um ColumnSet para criar colunas lado a lado dos contêineres.However, you can use a ColumnSet to create side-by-side columns of containers.

Elementos adaptáveisAdaptive Elements

Os elementos mais importantes são:The most fundamental elements are:

  • TextBlock – adiciona um bloco de texto com propriedades para controlar a aparência do textoTextBlock - adds a block of text with properties to control what the text looks like
  • Image – adiciona uma imagem com propriedades para controlar a aparência da imagemImage - adds an image with properties to control what the image looks like

Elementos de contêinerContainer elements

Os cartões também podem ter contêineres, que organizam uma coleção de elementos filho.Cards can also have containers, which arrange a collection of child elements.

  • Container – define uma coleção de elementosContainer - Defines a a collection of elements
  • ColumnSet/Column – define uma coleção de colunas; cada coluna é um contêinerColumnSet/Column - Defines a collection of columns, each column is a container
  • FactSet – contêiner de fatosFactSet - Container of Facts
  • ImageSet – contêiner de imagens, de modo que a interface do usuário possa mostrar uma experiência apropriada de galeria de fotos para uma coleção de imagens.ImageSet - Container of Images so that UI can show appropriate photo gallery experience for a collection of images.

Elementos de entradaInput elements

Os elementos de entrada permitem que você solicite à interface do usuário nativa a criação de formulários simples:Input elements allow you to ask for native UI to build simple forms:

  • Input.Text – obtém o conteúdo de texto do usuárioInput.Text - get text content from the user
  • Input.Date – obtém uma Data do usuárioInput.Date - get a Date from the user
  • Input.Time – obtém uma Hora do usuárioInput.Time - get a Time from the user
  • Input.Number – obtém um Número do usuárioInput.Number - get a Number from the user
  • Input.ChoiceSet – fornece ao usuário um conjunto de opções e solicita uma escolhaInput.ChoiceSet - Give the user a set of choices and have them pick
  • Input.Toggle – fornece ao usuário uma única opção entre dois itens e solicita uma escolhaInput.Toggle - Give the user a single choice between two items and have them pick

AçõesActions

As ações adicionam botões ao cartão.Actions add buttons to the card. Elas podem executar uma variedade de ações, como abrir uma URL ou enviar alguns dados.These can perform a variety of actions, like opening a URL or submitting some data.

  • Action.OpenUrl – o botão abre uma URL externa para exibiçãoAction.OpenUrl - the button opens an external URL for viewing
  • Action.ShowCard – solicita um subcartão a ser mostrado ao usuário.Action.ShowCard - Requests a sub-card to be shown to the user.
  • Action.Submit – solicita que todos os elementos de entrada sejam reunidos em um objeto que é então enviado para você por meio de um método definido pelo aplicativo host.Action.Submit - Ask for all of the input elements to be gathered up into an object which is then sent to you through some method defined by the host application.

Action.Submit de exemplo: Com o Skype, um Action.Submit enviará uma atividade de bot do Bot Framework novamente para o bot com a propriedade Value que contém um objeto com todos os dados de entrada.Example Action.Submit: With Skype, an Action.Submit will send a Bot Framework bot activity back to the bot with the Value property containing an object with all of the input data on it.

Saiba MaisLearn More