Windows Developer Day - Adaptive Cards
概述
Windows Developer Day 在 Modern Application Experience 环节展示了一种可以让开发者以更通用和统一的方式来对卡片对展示和交互的方式,那就是:Adaptive Cards.
早在 Microsoft Build 2017,Matt Hidinger 就对 Adaptive Cards 做了展示。
而在 WDD 前夕,Adaptive Cards 1.0 版本正式 Release,开源在 GitHub Microsoft AdaptiveCards, 官网文档在 Microsoft Doc Adaptive Cards.
基本原理
那么 Adaptive Cards 是怎么工作的呢?
- 卡片的制作者使用 JSON 或 SDK 中类构建的方式来描述卡片内容,包括文本,按钮,图片,链接等;
- 卡片内容在宿主程序中完成渲染,宿主程序样式也是 JSON 或 SDK 类构建方式,样式包括内容大小,颜色等的定义;
- 因为卡片的内容准备和 UI 渲染都可以完全通过 JSON 方式定义,所以使用 Adaptive Cards 各平台 SDK,就可以使用一套 JSON 完成多平台的通用和统一;
这种实现方式和 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
开发体验
多平台 SDK 支持
因为 Adaptive Cards 是一种跨平台方案,所以官方提供了 JavaScript,Android,iOS,UWP 和 .NET 五种常用的原生 SDK 来实现集成。
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 |
而目前 Adaptive Cards 支持的平台:
- 已经在线可用的:Bot Framework - WebChat,Cortana Skills,Windows Timeline
- 还在预览状态的:Skype,Outlook,Microsoft Teams,Windows Notifications,Bot Framework - Other Channels
UWP 示例开发
1. 通过 Nuget 方式在 PM 中添加包:
Install-Package AdaptiveCards.Rendering.Uwp -Version ..
2. 实例化一个 Renderer,这个 Renderer 被用来渲染宿主配置信息和卡片内容:
using AdaptiveCards.Rendering.Uwp;
...
var renderer = new AdaptiveCardRenderer();
3. 为卡片设置宿主配置:
示例中我使用一个 ComboBox 来切换宿主配置,从不同的文本文件读取对应的 JSON 字符串,反序列化为 HostConfig 并赋值给 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. 设置卡片内容:
示例中我从文本文件中读取内容对应的 JSON 字符串,反序列化为 AdaptiveCard 类实例。
string cardJson = await getCardString(@"Assets\card.txt");
var card = AdaptiveCard.FromJsonString(cardJson).AdaptiveCard;
RenderedAdaptiveCard renderResult = renderer.RenderAdaptiveCard(card);
5. 在界面中显示卡片:
把卡片内容显示在界面的 Grid 中,每次显示时,先清空前面的显示内容。
if (renderResult.FrameworkElement != null)
{
var uiCard = renderResult.FrameworkElement;
uiCard.HorizontalAlignment = HorizontalAlignment.Left;
cardGrid.Children.Clear();
cardGrid.Children.Add(uiCard);
}
来看看运行的效果:
可以看到,使用同样的卡片内容,在切换不同的宿主配置 Skype 和 Microsoft Teams 时,对应的卡片渲染后的 UI 是不同的,也是符合各自宿主 UI 风格的。
UWP SDK 的使用过程基本就是这样,非常的简单易上手。我们来看一下中间两个重要的类:AdaptiveCard 和 AdaptiveHostConfig.
AdaptiveCard:
这个类里,我们看到了我们用到 FromJson 方法,以及一些主要属性:Version(用于标识更新版本),Speak (表示卡片的朗读内容),FallbackText(后备文本),BackgroundImage(卡片背景图片),Actions(按钮的操作集合)等。
#region 程序集 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
#endregion using System;
using System.Collections.Generic;
using Windows.Data.Json;
using Windows.Foundation.Metadata; namespace AdaptiveCards.Rendering.Uwp
{
[Activatable()]
[Static(typeof(IAdaptiveCardStatics), )]
[Version()]
public sealed class AdaptiveCard : IAdaptiveCard
{
public AdaptiveCard(); public JsonObject ToJson();
[Overload("FromJson")]
public static AdaptiveCardParseResult FromJson(JsonObject adaptiveJson);
[Overload("FromJsonWithParserRegistration")]
public static AdaptiveCardParseResult FromJson(JsonObject adaptiveJson, AdaptiveElementParserRegistration elementRegistration, AdaptiveActionParserRegistration actionRegistration);
[Overload("FromJsonString")]
public static AdaptiveCardParseResult FromJsonString(string adaptiveJson);
[Overload("FromJsonStringWithParserRegistration")]
public static AdaptiveCardParseResult 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 ElementType { get; }
}
}
而针对 AdaptiveCard 的格式, 完整的说明文档可以在官方文档的 Card Schema 中看到:https://docs.microsoft.com/zh-cn/adaptive-cards/create/cardschema
对应上面的示例,我们使用的 JSON 文件大致组成如下:
AdaptiveHostConfig:
这里类里,我们看到了我们用到的 FromJson 方法,以及设置宿主样式的配置信息,如字体,文字大小,按钮操作,文字间距等样式配置。大家也可以再去具体看每个配置都有哪些枚举值可用。
#region 程序集 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
#endregion using Windows.Data.Json;
using Windows.Foundation.Metadata; namespace AdaptiveCards.Rendering.Uwp
{
[Activatable()]
[Static(typeof(IAdaptiveHostConfigStatics), )]
[Version()]
public sealed class AdaptiveHostConfig : IAdaptiveHostConfig
{
public AdaptiveHostConfig(); public static AdaptiveHostConfigParseResult 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; }
}
}
而针对 AdaptiveHostConfig 的字段, 完整的说明文档可以在官方文档的 Card Schema 中看到:https://docs.microsoft.com/zh-cn/adaptive-cards/display/hostconfig
对应上面的示例,我们使用的 JSON 文件大致组成如下:
如果大家想简单体验一下 AdaptiveCard 和 AdaptiveHostConfig 的变化对卡片的影响,不想自己写 Demo,也可以通过它提供的在线体验的方式:http://adaptivecards.io/visualizer/index.html?hostApp=Bot%20Framework%20WebChat
通过这个在线编辑器,可以很直观的看到每个字段的修改对卡片的影响。
对 Adaptive Cards 的简单体验和示例就到这里,后面如果产品代码中实际用到,我会再结合实际场景来具体展开分析,谢谢大家!
Windows Developer Day - Adaptive Cards的更多相关文章
- Windows Developer Day Review
北京时间 3 月 8 日凌晨 1 点钟,今年的第一次 Windows Developer Day 正式召开. 因为时间太晚看不了直播,我也是第二天早上在公司看的重播.整个会议过程有很多值得去研究 ...
- Windows Developer Day - MSIX and Advanced Installer
前面一篇我们介绍了 Adaptive Cards 的基础知识,而在 Windows Developer Day 的 Modern Application Experience 环节,还有一个需要划重点 ...
- Windows Developer Day - Windows AI Platform
本次 Windows Developer Day,最值得期待的莫过于 Windows AI Platform 了,可以说是千呼万唤始出来.观看直播的开发者们,留言最多的也是 Windows AI Pl ...
- About Windows 10 SDK Preview Build 17110
在 Windows Developer Day 活动同时,微软正式 Release 了 Windows 10 SDK Preview Build 17110. Windows 10 SDK Previ ...
- 使用 .NET 平台,如何玩转 Universal Windows 应用?
2015年7月30日 本文作者是 Managed Languages 团队项目经理 Lucian Wischik. 不久前,Visual Studio 2015上新增 Windows 10 应用的开发 ...
- 《Windows IoT 应用开发指南》
物物互联的时代已经到来,智能家居.智慧校园.智慧交通.可穿戴.无人机.全息投影,各种各样的新名词.黑科技层出不穷.当我们为五年前能够通过手机控制家电而欣喜若狂的时候,可曾憧憬过当前使用增强现实设备完成 ...
- Wintel物联网平台-Windows IoT新手入门指南
1. 引言 近期,微软跟进物联网的速度也在不断加速,除了微软手环,.NET MicroFramework,还有一个叫做Windows IoT的项目.该项目早在今年4月份的Build大会上就提出来了,7 ...
- 运用JavaScript构建你的第一个Metro式应用程序(on Windows 8)(一)
原文 http://blog.csdn.net/zhangxin09/article/details/6784547 作者:Chris Sells 译: sp42 原文 包括 HTML.CSS 和 ...
- Tutorial: Create a Windows Machine Learning UWP application (C#)
In this tutorial, we'll build a simple Universal Windows Platform application that uses a trained ma ...
随机推荐
- Spring-mvc 静态资源不拦截
在Spring-mvc.xml文件中加入这个就可以了 <!-- 用于对静态文件进行解析 --> <mvc:annotation-driven /> <mvc:resour ...
- MysqL 主从事务数据安全之sync_binlog
sync_binlog:是MySQL 的二进制日志(binary log)同步到磁盘的频率(刷新二进制日志到磁盘),默认是0,意味着mysql并不刷新,由操作系统自己决定什么时候刷新缓存到持久化设置, ...
- 微博爬虫“免登录”技巧详解及 Java 实现(业余草的博客)
一.微博一定要登录才能抓取? 目前,对于微博的爬虫,大部分是基于模拟微博账号登录的方式实现的,这种方式如果真的运营起来,实际上是一件非常头疼痛苦的事,你可能每天都过得提心吊胆,生怕新浪爸爸把你的那些账 ...
- uva1354 枚举二叉树
这题很难,这几天一直在想这题,最后看了汝佳大哥的代码才明白.贴上代码 // UVa1354 Mobile Computing // Rujia Liu #include<cstdio> # ...
- Python接口测试,Requests模块讲解:GET、POST、Cookies、Session等
文章最下方有对应课程的视频链接哦^_^ 一.安装.GET,公共方法 二.POST 三.Cookies 四.Session 五.认证 六.超时配置.代理.事件钩子 七.错误异常
- Spring / Hibernate 应用性能调优
来源:ImportNew - 陈晓舜 对大部分典型的Spring/Hibernate企业应用来说,应用的性能大部分由持久层的性能决定. 这篇文章会重温一下怎么去确认我们的应用是否是”数据库依赖(dat ...
- 我的Java设计模式-原型模式
"不好意思,我是卧底!哇哈哈哈~"额......自从写了上一篇的观察者模式,就一直沉浸在这个角色当中,无法自拨.昨晚在看<使徒行者2>,有一集说到啊炮仗哥印钞票,我去, ...
- Android开发Toast Notifications
Android开发Toast Notifications 关键类 Toast toast通知是一种在窗口表面弹出的消息.它只占用信息显示所需的空间,用户当前的activity仍保持可见并可交互.该通知 ...
- 关于HC04超声波模块测距的思考(51版)
之前写过一篇HC04的使用文章,当时是使用stm32来实现的,原文链接. 后来又多次使用51来驱动这个模块,有时候有测距需要,使用了几次,总是感觉我上次那个程序不是很好, 所以这次对它进行了改进.虽然 ...
- 解决VC6下调不出MSDN的问题!
原文:http://www.programfan.com/blog/article.asp?id=1524http://blog.programfan.com/trackback.asp?id=15 ...