Windows Developer Day, every Day

Windows Developer Day, every Day

Overview

In the Modern Application Experience Section, Windows Developer Day presents a way for developers to display and interact with cards in a more universal and unified manner, that is:Adaptive Cards.

As early as Microsoft Build 2017, Matt Hidinger presented Adaptive Cards.

On the eve of WDD, Adaptive Cards 1.0 was officially released.GitHub Microsoft AdaptiveCards,Official Website documentation is availableMicrosoft Doc Adaptive Cards.

 

Basic Principles

So how does Adaptive Cards work?

• The card producer uses JSON or SDK class construction to describe the card content, including text, buttons, images, links, etc;
• The card content is rendered in the Host Program. The host Program style is also a JSON or SDK class construction method. The style includes the definition of content size and color;
• Because the content preparation and UI rendering of Cards can be completely defined in JSON format, you can use a set of JSON to achieve universal and unified use of the multi-platform SDK Using Adaptive Cards;

This implementation method is consistent with that of Adaptive Cards:

The goals for adaptive cards are:
. Portable - To any app, device, and UI framework
. Open - Libraries and schema are open source and shared
. Low cost - Easy to define, easy to consume
. Expressive - Targeted at the long tail of content that developers want to produce
. Purely declarative - No code is needed or allowed
. Automatically styled - To the Host application UX and brand guidelines

 

Development Experience

Multi-platform SDK support

Because Adaptive Cards is a cross-platform solution, the official website provides five common native sdks, JavaScript, Android, iOS, UWP, And. NET, for integration.

Install Adaptive Cards SDK

Platform	Install	Build	Docs
JavaScript	Npm v1.0.0	Source	Docs
. NET	Nuget v1.0.0	Source	Docs
. NET WPF	Nuget v1.0.0	Source	Docs
. NET HTML	Nuget v1.0.0	Source	Docs
Windows UWP	Nuget v1.0.0	Source	Docs
Android	Maven-central v1.0.0	Source	Docs
IOS	Pod v1.0.0	Source	Docs

 

 

 

 

 

 

 

 

 

Currently, Adaptive Cards supports the following platforms:

• Available online: Bot Framework-WebChat, Cortana Skills, Windows Timeline
• Still in preview status: Skype, Outlook, Microsoft Teams, Windows Notifications, Bot Framework-Other Channels

UWP sample development

1. Use Nuget to add packages to PM:

Install-Package AdaptiveCards.Rendering.Uwp -Version 1.0.0

2. instantiate an Renderer, which is used to render the host configuration information and card content:

using AdaptiveCards.Rendering.Uwp;...var renderer = new AdaptiveCardRenderer();

3. Set host configuration for the card:

In the example, I use a ComboBox to switch the host configuration, read the corresponding JSON string from different text files, deserialize it to HostConfig, and assign it to Renderer.

string configJson = await getCardString(string.Format(@"Assets\{0}", (hostConfigBox.SelectedItem as ComboBoxItem).Content.ToString()));var hostConfig = AdaptiveHostConfig.FromJsonString(configJson);renderer.HostConfig = hostConfig.HostConfig;

4. Set the card content:

In this example, I read the corresponding JSON string from the text file and deserialize it to an AdaptiveCard class instance.

string cardJson = await getCardString(@"Assets\card.txt");var card = AdaptiveCard.FromJsonString(cardJson).AdaptiveCard;RenderedAdaptiveCard renderResult = renderer.RenderAdaptiveCard(card);

5. display the card in the interface:

Display the card content in the Grid of the interface. Each time the card content is displayed, the display content is displayed first.

if (renderResult.FrameworkElement != null){    var uiCard = renderResult.FrameworkElement;    uiCard.HorizontalAlignment = HorizontalAlignment.Left;    cardGrid.Children.Clear();    cardGrid.Children.Add(uiCard);}

To see the running effect:

As you can see, when you use the same card content to switch between different hosts and configure Skype and Microsoft Teams, the corresponding card rendered UI is different and also conforms to the UI style of their respective hosts.

The uwp sdk is easy to use. Let's take a look at two important classes: AdaptiveCard and AdaptiveHostConfig.

AdaptiveCard:

In this class, we can see that we use the FromJson method, and some main attributes: Version (used to identify the updated Version), Speak (indicating the card's read content), FallbackText (Backup text ), backgroundImage (card background image), Actions (button operation set), and so on.

# Region Assembly AdaptiveCards. rendering. uwp, Version = 255.255.255.255, Culture = neutral, PublicKeyToken = null, ContentType = WindowsRuntime // C: \ Users \ 123 \. nuget \ packages \ AdaptiveCards. rendering. uwp \ 1.0.0 \ lib \ uap10.0 \ AdaptiveCards. rendering. uwp. winmd # endregionusing System; using System. collections. generic; using Windows. data. json; using Windows. foundation. metadata; namespace AdaptiveCards. rendering. uwp {[Activatable (167772162)] [Static (typeof (IAdaptiveCardStatics), 167772162)] [Version (167772162)] public sealed class AdaptiveCard: IAdaptiveCard {public AdaptiveCard (); public JsonObject ToJson (); [Overload ("FromJson")] public static AdaptiveCardParseResult FromJson (JsonObject adaptiveJson); [Overload ("loads")] public static response FromJson (JsonObject adaptiveJson, adaptiveElementParserRegistration elementRegistration, AdaptiveActionParserRegistration actionRegistration); [Overload ("FromJsonString")] public static response FromJsonString (string adaptiveJson); [Overload ("loads")] public static response FromJsonString (string adaptiveJson, adaptiveElementParserRegistration elementRegistration, AdaptiveActionParserRegistration actionRegistration); public string Version {get; set;} public ContainerStyle Style {get; set;} public string Speak {get; set;} public string FallbackText {get; set;} public Uri BackgroundImage {get; set;} public IList <IAdaptiveActionElement> Actions {get;} public IList <IAdaptiveCardElement> Body {get ;} public ElementType {get ;}}}

For the AdaptiveCard format, complete instructions can be seen in the official document Card Schema: https://docs.microsoft.com/zh-cn/adaptive-cards/create/cardschema

Corresponding to the above example, the JSON file we use is roughly composed of the following:

 

AdaptiveHostConfig:

In this class, we can see the FromJson method we use and settings of the host style, such as font, text size, button operations, text spacing, and other style configurations. You can also check which enumeration values are available for each configuration.

# Region Assembly AdaptiveCards. rendering. uwp, Version = 255.255.255.255, Culture = neutral, PublicKeyToken = null, ContentType = WindowsRuntime // C: \ Users \ 123 \. nuget \ packages \ AdaptiveCards. rendering. uwp \ 1.0.0 \ lib \ uap10.0 \ AdaptiveCards. rendering. uwp. winmd # endregionusing Windows. data. json; using Windows. foundation. metadata; namespace AdaptiveCards. rendering. uwp {[Activatable (167772162)] [Static (typeof (IAdaptiveHostConfigStatics), 167772162)] [Version (167772162)] public sealed class AdaptiveHostConfig: IAdaptiveHostConfig {public AdaptiveHostConfig (); public static response FromJsonString (string hostConfigJson); public static AdaptiveHostConfigParseResult FromJson (JsonObject hostConfigJson); public bool SupportsInteractivity {get; set ;} public AdaptiveSpacingConfig Spacing {get; set ;} public AdaptiveSeparatorConfig Separator {get; set;} public AdaptiveImageSizesConfig ImageSizes {get; set;} public AdaptiveImageSetConfig ImageSet {get; set;} public AdaptiveImageConfig Image {get; set ;} public AdaptiveFontWeightsConfig FontWeights {get; set;} public AdaptiveFontSizesConfig FontSizes {get; set;} public string FontFamily {get; set;} public AdaptiveFactSetConfig FactSet {get; set ;} public AdaptiveContainerStylesDefinition ContainerStyles {get; set;} public AdaptiveCardConfig AdaptiveCard {get; set;} public AdaptiveActionsConfig Actions {get; set ;}}}

For the AdaptiveHostConfig field, the complete description of the document can be seen in the official document Card Schema: https://docs.microsoft.com/zh-cn/adaptive-cards/display/hostconfig

Corresponding to the above example, the JSON file we use is roughly composed of the following:

 

 

If you want to simply experience the effect of AdaptiveCard and AdaptiveHostConfig changes on the card, do not want to write your own Demo, you can also provide online experience through it: http://adaptivecards.io/visualizer/index.html? HostApp = Bot % 20 Framework % 20 WebChat

The online editor intuitively shows the effect of each field Modification on the card.

 

The simple experience and examples of Adaptive Cards are here. If the product code is actually used in the future, I will analyze it based on the actual scenario. Thank you!