Downloaden Sie, um offline zu lesen
![Facebook Message
Templates
{
"type": "template",
"payload": {
"template_type": "airline_itinerary",
"passenger_info": [
{
"name": "Sarah Hum"
}
],
"flight_info": [
{
"flight_number": "KL9123",
"departure_airport": {
"airport_code": "SFO",
},
"arrival_airport": {
"airport_code": "AMS",
}
}
],
"base_price": "12206",
"tax": "200",
"total_price": "14003“
}
}](https://image.slidesharecdn.com/adaptivecards-190303091308/85/Adaptive-Cards-User-Interfaces-with-JSON-11-320.jpg)
![Definition in JSON
{
"type": "AdaptiveCard",
"version": "1.1",
"body": [
{
"type": "TextBlock",
"size": "large",
"text": "Hello, Card!"
},
{
"type": "Image",
"size": "large",
"url": "http://adaptivecards.io/content/cats/1.png"
}
]
}](https://image.slidesharecdn.com/adaptivecards-190303091308/85/Adaptive-Cards-User-Interfaces-with-JSON-19-320.jpg)
Hochgeladen vonChristian Nagel
Adaptive Cards - User Interfaces with JSON
Das Dokument behandelt adaptive Karten als Benutzeroberflächen, die in JSON definiert sind und als flexible UI-Elemente in verschiedenen Technologien wie Social Media, Microsoft Teams und anderen Anwendungen verwendet werden. Es stellt die Hauptmerkmale von adaptiven Karten, deren Vorteile sowie die Elemente und Aktionen vor, die zur Erstellung benutzerdefinierter UI-Lösungen genutzt werden können. Zudem werden Werkzeuge, SDKs und die Möglichkeit zum Rendering in verschiedenen Umgebungen wie WPF und UWP beschrieben.
Adaptive Cards - User Interfaces with JSON
- 1. Adaptive Cards User Interfacesmit JSON Christian Nagel @christiannagel https://csharp.christiannagel.com
- 2. Christian Nagel • Training •Coaching • Consulting • Development • Microsoft MVP • www.cninnovation.com • csharp.christiannagel.com
- 3.
- 4.
- 5. Markup Usages XML • OldSOAP • Old Configuration Files • HTML • XAML JSON • New API Serialization • New Configuration Files • Adaptive Cards
- 6. Enter Cards Kein komplettes UI Kartenmit vielen UI Elementen Reuse mit unterschiedlichen Technologien
- 7. Cards: Start inSocial Media
- 8.
- 9. Twitter Cards <meta name="twitter:card"content="summary_large_image" /> <meta name="twitter:site" content="www.nationalgeographic.com" /> <meta name="twitter:creator" content="@NatGeo" /> <meta name="twitter:title" content="Your Shot: Nepal Trekking Pictures" /> <meta name="twitter:description" content="See Nepal Trekking Adventure Photos from Adventurers Like You" /> <meta name="twitter:image" content="http://something.com/image.jpg" />
- 10. OpenGraph <meta property="og:url" content="article.html"/> <meta property="og:type" content="article" /> <meta property="og:title" content="When Great Minds Don’t Think Alike" /> <meta property="og:description" content= "How much does culture influence creative thinking?" /> <meta property="og:image" content="http://nyt.com/summary-image.jpg" />
- 11. Facebook Message Templates { "type": "template", "payload":{ "template_type": "airline_itinerary", "passenger_info": [ { "name": "Sarah Hum" } ], "flight_info": [ { "flight_number": "KL9123", "departure_airport": { "airport_code": "SFO", }, "arrival_airport": { "airport_code": "AMS", } } ], "base_price": "12206", "tax": "200", "total_price": "14003“ } }
- 12. Vorteile von Templates 3rd PartyInhalt kontrolliert Facebook sieht aus wie Facebook, Twitter wie Twitter Cards müssen nur einmal definiert werden
- 13. Nachteile von Templates •Jedes Template muss für jede Plattform implementiert werden • Welche Templates brauchen wir in der Zukunft? • Inhalte sind limitiert • Keine Möglichkeiten für eigene Definitionen
- 14.
- 15. Nachteile von HTML • Performanceund Security? Unterschiedliche UI Stacks? • Konsistenz kann nicht einfach definiert werden • Design für jeden Host erforderlich
- 16. Wir brauchen etwas zwischen fixen Templates und HTML •Komplette Kontrolle •KeineFlexibilität Fixed Templates •Keine Konsistenz •Keine Kontrolle HTML Canvas
- 17. Adaptive Cards O PE N S O U R C E F R A M E W O R K M U L T I P L E C A N V A S E S Notifications Microsoft Teams Skype Android iOS
- 18.
- 19. Definition in JSON { "type":"AdaptiveCard", "version": "1.1", "body": [ { "type": "TextBlock", "size": "large", "text": "Hello, Card!" }, { "type": "Image", "size": "large", "url": "http://adaptivecards.io/content/cats/1.png" } ] }
- 20. Primary Elements • Card •Card elements • Containers • Actions • Inputs
- 21. Card Elements • TextBlock •Image • Media • MediaSource
- 22. Container • Container • Gruppierenvon Items • ColumnSet / Column • Regionen in Gruppen teilen • FactSet / Fact • Tabular – Name/Wert • ImageSet • Sammlung von Bildern, Gallerie
- 23. Actions • Action.OpenUrl • Starteneines internen oder externen Browsers • Action.Submit • Übernehmen von Inputs • Action.ShowCard • Anzeige einer Adaptive Card
- 24. Inputs • Input.Text • Input.Number •Input.Date • Input.Time • Input.Toggle • Input.ChoiceSet / Input.Choice
- 25. Demo • Create aCard with .NET
- 26.
- 27. Card Designer • https://adaptivecards.io/designer/ •Tool box • Tree view • Property Editor • Preview • JSON
- 28. Tools, SDKs • https://adaptivecards.io/ Intro,Samples • JavaScript • .NET WPF • .NET HTML • Windows UWP • Android • iOS SDKs / Packages
- 29. Using Cards with WPF/ UWP React React to Action events Add Add the rendered card as a FrameworkElement child Render Render the Card Create Create a Renderer Load Load the Adaptive Card
- 30. Demo • Render acard with WPF • Render a card with UWP
- 31. Host Configuration • User Interfacefür die Applikation anpassen • Konfiguration der Renderer • Define Fonts • Sizes • Spacing • Behaviors
- 32. Actions • Submit • OpenUrl •ShowCard
- 33. Styling • Styles fürUWP • https://docs.microsoft.com/en-us/adaptive- cards/sdk/rendering-cards/uwp/native-styling • Styles für WPF • https://docs.microsoft.com/en-us/adaptive- cards/sdk/rendering-cards/net-wpf/native- styling
- 34. Custom Rendering • Eigene Rendererspro Element-Typ setzen • https://docs.microsoft.com/en-us/adaptive- cards/sdk/rendering-cards/net-wpf/extensibility • https://docs.microsoft.com/en-us/adaptive- cards/sdk/rendering-cards/uwp/extensibility
- 35. Features Planned (1.2) •Accessibility Improvements • Better inline text formatting • Input Validation • Action sentiments (primary / destructive) • Mehr container styles • Actions irgendwo in der Card
- 36. Data Binding Planned Template vonden Daten getrennt Functions • String (substr, indexOf, toUpper, toLower) • Number (formatting) • Date (parsing, formatting) • Data manipulation (JSON.parse) • custom Conditional layout ($when)
- 37.
- 38. Windows Timeline • User Engagement •Adaptive Cards Bestandteil der Windows API • ActivityCardBuilder
- 39. Summary • UI nurHTML oder XAML • Cards nicht notwendig • Unterschiedliche Technologien • Web, Bot, WPF, UWP, Android, iOS • Cards für alle • Windows 10 • Windows Timeline • Notifications • API auch mit WPF und .NET Core 3.0 verwendbar
- 40.
- 42. More Information • https://github.com/ProfessionalCSharp •https://github.com/cninnovation • https://csharp.christiannagel.com • https://www.cninnovation.com • Training & Coaching • @christiannagel