애플리케이션 내에서 카드 렌더링Rendering cards inside your application

애플리케이션 내에서 적응형 카드를 쉽게 렌더링할 수 있습니다.It's easy to render Adaptive Cards inside your application. 모든 일반적인 플랫폼용 SDK를 제공하며 고유한 적응형 카드 렌더러를 만드는 데 필요한 자세한 사양을 제공합니다.We provide SDKs for the all common platforms, as well as provide a detailed specification for creating your own Adaptive Card renderer.

  1. 렌더러 SDK 설치 - 대상 플랫폼에 해당합니다.Install a renderer SDK - for your target platform.
  2. 렌더러 인스턴스 만들기 - 앱 스타일, 규칙 및 작업 이벤트 처리기를 사용하여 구성됩니다.Create a renderer instance - configured with your app's style, rules, and action event handlers.
  3. 카드를 네이티브 UI로 렌더링 - 자동으로 앱에 맞게 스타일이 지정됩니다.Render a card to native UI - automatically styled to your app.

적응형 카드 SDKAdaptive Cards SDKs

플랫폼Platform 설치Install 빌드Build DocsDocs 상태Status
JavaScriptJavaScript npm 설치npm install 원본Source 문서Docs 빌드 상태
.NET WPF.NET WPF NuGet 설치Nuget install 원본Source 문서Docs 빌드 상태
.NET HTML.NET HTML NuGet 설치Nuget install 원본Source 문서Docs 빌드 상태
Windows UWPWindows UWP NuGet 설치Nuget install 원본Source 문서Docs 빌드 상태
AndroidAndroid Maven CentralMaven Central 원본Source 문서Docs 빌드 상태
iOSiOS CocoaPodsCocoaPods 원본Source 문서Docs 빌드 상태

렌더러 인스턴스 만들기Create an instance of the renderer

다음 단계는 AdaptiveCardRenderer 인스턴스를 만드는 것입니다.The next step is to create an instance of an AdaptiveCardRenderer.

작업 이벤트 연결Hook up action events

기본적으로 작업은 카드에 단추로 렌더링되지만 앱에서 사용자가 원하는 대로 작동하도록 설정할 수 있습니다.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. 각 SDK에는 처리해야 하는 OnAction 이벤트에 해당하는 항목이 있습니다.Each SDK has the equivalent of an OnAction event that you must handle.

  • Action.OpenUrl - 지정된 url을 엽니다.Action.OpenUrl - open the specified url.
  • Action.Submit - 제출 결과를 가져오고 원본으로 보냅니다.Action.Submit - take the result of the submit and send it to the source. 카드 원본으로 보내는 방법은 사용자가 결정할 수 있습니다.How you send it to the source of the card is entirely up to you.
  • Action.ShowCard - 대화 상자를 호출하고 해당 대화 상자에 하위 카드를 렌더링합니다.Action.ShowCard - invokes a dialog and renders the sub-card into that dialog. ShowCardActionModepopup으로 설정되는 경우에만 이 항목을 처리해야 합니다.Note that you only need to handle this if ShowCardActionMode is set to popup.

카드 렌더링Render a card

카드 페이로드를 얻은 후 렌더러를 호출하고 카드에 전달하세요.After you acquire a card payload, simply call the renderer and pass in the card. 그러면 카드 콘텐츠로 구성된 네이티브 UI 개체를 다시 얻게 됩니다.You will to get back a native UI object made up of the card contents. 이제 이 UI를 앱 내에 배치합니다.Now just put this UI somewhere in your app.

사용자 지정Customization

렌더링되는 항목을 사용자 지정할 수 있는 여러 가지 방법이 있습니다.There are several ways you can customize what is rendered.

HostConfigHostConfig

HostConfig는 앱 내에서 카드의 기본 스타일과 동작을 제어하는 플랫폼 간 공유 구성 개체입니다.A HostConfig is a shared, cross-platform configuration object that controls the basic styling and behavior of cards inside your app. 글꼴 크기, 요소 간의 간격, 색, 지원되는 작업 수 등의 항목을 정의합니다.It defines things like font sizes, spacing between elements, colors, number of supported actions, etc.

네이티브 플랫폼 스타일 지정Native platform styling

대부분의 UI 프레임워크에서는 네이티브 UI 프레임워크 스타일을 사용하여 렌더링된 카드의 스타일을 지정할 수 있습니다.Most UI frameworks allow you to style the rendered card by using the native UI framework styling. 예를 들어 HTML에서는 HTML의 CSS 클래스를 지정할 수 있고, XAML에서는 출력을 세밀하게 제어하기 위한 사용자 지정 ResourceDictionary에 전달할 수 있습니다.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.

요소별 렌더링 사용자 지정Customize per-element rendering

각 SDK를 사용하여 요소의 렌더링을 재정의하거나, 사용자가 정의하는 완전히 새로운 요소의 지원을 추가할 수도 있습니다.Each SDK allows you to override the rendering of any element, or even add support for entirely new elements that you define. 예를 들어 렌더러의 나머지 출력을 계속 유지하면서 고유한 사용자 지정 컨트롤을 내보내도록 Input.Date 렌더러를 변경할 수 있습니다.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. 또는 사용자가 정의한 사용자 지정 Rating 요소의 지원을 추가할 수 있습니다.Or you can add support for a custom Rating element that you define.