Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adaptive Cards - User Interfaces with JSON

361 views

Published on

Adaptive cards allow creating cards to be used with different technologies, e.g. Bots, Microsoft Teams, WPF, UWP, Android, iPhone, and more. This presentation gives an introduction about adaptive cards, and explains what can be done with it.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Adaptive Cards - User Interfaces with JSON

  1. 1. Adaptive Cards User Interfaces mit JSON Christian Nagel @christiannagel https://csharp.christiannagel.com
  2. 2. Christian Nagel • Training • Coaching • Consulting • Development • Microsoft MVP • www.cninnovation.com • csharp.christiannagel.com
  3. 3. Agenda Warum? Was? Wie?
  4. 4. Warum?
  5. 5. Markup Usages XML • Old SOAP • Old Configuration Files • HTML • XAML JSON • New API Serialization • New Configuration Files • Adaptive Cards
  6. 6. Enter Cards Kein komplettes UI Karten mit vielen UI Elementen Reuse mit unterschiedlichen Technologien
  7. 7. Cards: Start in Social Media
  8. 8. Und mehr…
  9. 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. 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. 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. 12. Vorteile von Templates 3rd Party Inhalt kontrolliert Facebook sieht aus wie Facebook, Twitter wie Twitter Cards müssen nur einmal definiert werden
  13. 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. 14. Ist HTML die Lösung?
  15. 15. Nachteile von HTML • Performance und Security? Unterschiedliche UI Stacks? • Konsistenz kann nicht einfach definiert werden • Design für jeden Host erforderlich
  16. 16. Wir brauchen etwas zwischen fixen Templates und HTML •Komplette Kontrolle •Keine Flexibilität Fixed Templates •Keine Konsistenz •Keine Kontrolle HTML Canvas
  17. 17. Adaptive Cards O P E 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. 18. Was?
  19. 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. 20. Primary Elements • Card • Card elements • Containers • Actions • Inputs
  21. 21. Card Elements • TextBlock • Image • Media • MediaSource
  22. 22. Container • Container • Gruppieren von Items • ColumnSet / Column • Regionen in Gruppen teilen • FactSet / Fact • Tabular – Name/Wert • ImageSet • Sammlung von Bildern, Gallerie
  23. 23. Actions • Action.OpenUrl • Starten eines internen oder externen Browsers • Action.Submit • Übernehmen von Inputs • Action.ShowCard • Anzeige einer Adaptive Card
  24. 24. Inputs • Input.Text • Input.Number • Input.Date • Input.Time • Input.Toggle • Input.ChoiceSet / Input.Choice
  25. 25. Demo • Create a Card with .NET
  26. 26. Wie?
  27. 27. Card Designer • https://adaptivecards.io/designer/ • Tool box • Tree view • Property Editor • Preview • JSON
  28. 28. Tools, SDKs • https://adaptivecards.io/ Intro, Samples • JavaScript • .NET WPF • .NET HTML • Windows UWP • Android • iOS SDKs / Packages
  29. 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. 30. Demo • Render a card with WPF • Render a card with UWP
  31. 31. Host Configuration • User Interface für die Applikation anpassen • Konfiguration der Renderer • Define Fonts • Sizes • Spacing • Behaviors
  32. 32. Actions • Submit • OpenUrl • ShowCard
  33. 33. Styling • Styles für UWP • 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. 34. Custom Rendering • Eigene Renderers pro 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. 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. 36. Data Binding Planned Template von den Daten getrennt Functions • String (substr, indexOf, toUpper, toLower) • Number (formatting) • Date (parsing, formatting) • Data manipulation (JSON.parse) • custom Conditional layout ($when)
  37. 37. Windows Timeline
  38. 38. Windows Timeline • User Engagement • Adaptive Cards Bestandteil der Windows API • ActivityCardBuilder
  39. 39. Summary • UI nur HTML 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. 40. Questions?
  41. 41. More Information • https://github.com/ProfessionalCSharp • https://github.com/cninnovation • https://csharp.christiannagel.com • https://www.cninnovation.com • Training & Coaching • @christiannagel

×