added overview and tools section
This commit is contained in:
Родитель
b64f390f26
Коммит
6784a766b5
Двоичный файл не отображается.
После Ширина: | Высота: | Размер: 21 KiB |
Двоичный файл не отображается.
После Ширина: | Высота: | Размер: 14 KiB |
Двоичный файл не отображается.
После Ширина: | Высота: | Размер: 31 KiB |
Двоичный файл не отображается.
После Ширина: | Высота: | Размер: 98 KiB |
Двоичный файл не отображается.
После Ширина: | Высота: | Размер: 104 KiB |
|
@ -29,9 +29,6 @@
|
|||
<a class="w3-bar-item w3-button w3-left-align" onclick="myAccFunc('aboutPage')">About</a>
|
||||
<div id="aboutPage" class="w3-bar-block w3-hide" style="margin-left:10px;">
|
||||
<a id="about-overview-link" href='#about-overview' class="w3-bar-item w3-button navLink">Overview</a>
|
||||
<a id="about-goals-link" href='#about-goals' class="w3-bar-item w3-button navLink">Goals</a>
|
||||
<a id="about-principles-link" href='#about-principles' class="w3-bar-item w3-button navLink">Core principles</a>
|
||||
<a id="about-valueprop-link" href='#about-valueprop' class="w3-bar-item w3-button navLink">Value proposition</a>
|
||||
<a id="about-future-link" href='#about-future' class="w3-bar-item w3-button navLink">Future work</a>
|
||||
</div>
|
||||
<a class="w3-bar-item w3-button w3-left-align" onclick="myAccFunc('create')">Creating a card</a>
|
||||
|
@ -68,6 +65,7 @@
|
|||
</div>
|
||||
<a class="w3-bar-item w3-button w3-left-align" onclick="myAccFunc('resources')">Resources</a>
|
||||
<div id="resources" class="w3-bar-block w3-hide" style="margin-left:10px;">
|
||||
<a id="resources-tools-link" href='#resources-tools' class="w3-bar-item w3-button navLink">Tools and Samples</a>
|
||||
<a id="resources-partners-link" href='#resources-partners' class="w3-bar-item w3-button navLink">Partners</a>
|
||||
<a id="resources-projects-link" href='#resources-projects' class="w3-bar-item w3-button navLink">Related projects</a>
|
||||
<a id="space" href='#resources-projects' class="w3-bar-item w3-button navLink"></a>
|
||||
|
|
|
@ -1,11 +0,0 @@
|
|||
# Goals
|
||||
Adaptive cards goals are to be:
|
||||
|
||||
* **Portable** - to any device and ui framework
|
||||
* **Open** - Libraries and schema are open source and shared.
|
||||
* **Automatically Styled** to the Host application UX and brand guidelines
|
||||
* **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
|
||||
|
||||
|
|
@ -1 +1,64 @@
|
|||
# Overview
|
||||
Adaptive cards are an open common JSON card exchange format which provides an easy way for developers to exchange
|
||||
UI content.
|
||||
|
||||
## How it works
|
||||
|
||||
A developer creates interactive content by creating a simple JSON object and sending it to the target application.
|
||||
The schema is made up of simple building blocks that can be combined in an endless number of combinations.
|
||||
|
||||
An adaptive card aware application uses an open source library for their platform/ui framework to renders the card
|
||||
natively into their application.
|
||||
|
||||
## Content developers
|
||||
If you are a developer of content adaptive cards are great because:
|
||||
* **One card** - You get one format, minimizing the cost of creating a card and maximizing the number of places it can be used.
|
||||
* **Richer Expression** - Your content can more closely align with want you want to say because you have a richer pallete to paint in.
|
||||
* **Broad Reach** - Your content will work across a broader set of applications without you having to learn new schemas.
|
||||
* **Input controls** - Your card can include input controls for gathering information from the user that is viewing the card.
|
||||
* **Better tooling** - Because there is a shared card ecosystem better tooling can be created that is shared by everyone.
|
||||
|
||||
## App developers
|
||||
If you are an app developer which displays content you will love adaptive cards because:
|
||||
* **Consistent user experience** - You get a consistent experience because you own the style of the rendered card
|
||||
* **Native performance** - You get native performance as it targets your ui framework directly
|
||||
* **Safe** - Content is delivered in safe payload, you don't have to open up your ui framework to raw html
|
||||
* **Easy to implement** - You get off the shelf libraries to easily integrate
|
||||
* **Free documentation** - You save time because you don't have invent schema, document schema, creating tooling around it, etc.
|
||||
* **Shared tooling** - You save time because you don't have tooling for your schema
|
||||
|
||||
# Goals
|
||||
The goals for adaptive cards are:
|
||||
|
||||
* **Portable** - to any device and ui framework
|
||||
* **Open** - Libraries and schema are open source and shared.
|
||||
* **Automatically Styled** to the Host application UX and brand guidelines
|
||||
* **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
|
||||
|
||||
## Core Design Principles
|
||||
The design of adaptive cards has been driven by some core principles that have been useful for keeping the
|
||||
design on track.
|
||||
|
||||
### Semantic instead of pixel-perfect
|
||||
As much as possible we have strived for semantic values and concepts as opposed to pure pixel pefect layout.
|
||||
Examples of semantic expression show up in colors, sizes, and in elements like FactSet and ImageSet. These all
|
||||
allow the prod allow the host application to control decisions about the actual look and feel.
|
||||
|
||||
### Card creator owns the content, card displayer owns the look and feel
|
||||
The creator owns what they want to say, but the application which is displaying it owns the look and feel of
|
||||
of the card in the context of their application.
|
||||
|
||||
### Keep it simple, but expressive
|
||||
We want adaptive cards to be expressive and general purpose, but we don't want to build a ui framework. The whole point
|
||||
is to create an intermediate layer which is expressive enough in the same way markdown is expressive enough.
|
||||
|
||||
By focusing on keeping it simple and expressive, markdown created an easy and consistent expression of document content. In the
|
||||
same way we believe that adaptive cards can create a simple, expressive way for card content.
|
||||
|
||||
### When in doubt, keep it out
|
||||
It is easier to add later then it is to live with a mistake. This means that if we find ourselves arguing about whether
|
||||
we should add something or not, we opted to leave it out. It is always easier to add a property then to live with a legacy property we wished we didn't want to support anymore.
|
||||
|
||||
|
||||
|
|
|
@ -1,25 +0,0 @@
|
|||
# Core Design Principles
|
||||
The design of adaptive cards has been driven by some core principles that have been useful for keeping the
|
||||
design on track.
|
||||
|
||||
## Semantic instead of pixel-perfect
|
||||
As much as possible we have strived for semantic values and concepts as opposed to pure pixel pefect layout.
|
||||
Examples of semantic expression show up in colors, sizes, and in elements like FactSet and ImageSet. These all
|
||||
allow the prod allow the host application to control decisions about the actual look and feel.
|
||||
|
||||
## Card producer owns the content, card host owns the look and feel
|
||||
The producer owns what they want to say, but the card host owns the look and feel of how that content is expressed
|
||||
in the context of their application.
|
||||
|
||||
## Keep it simple, but expressive
|
||||
We want adaptive cards to be expressive and general purpose, but we don't want to build a ui framework. The whole point
|
||||
is to create an intermediate layer which is expressive enough in the same way markdown is expressive enough.
|
||||
|
||||
By focusing on keeping it simple and expressive, markdown created an easy and consistent expression of document content. In the
|
||||
same way we believe that adaptive cards can create a simple, expressive way for card content.
|
||||
|
||||
## When in doubt, keep it out
|
||||
It is easier to add later then it is to live with a mistake. This means that if we find ourselves arguing about whether
|
||||
we should add something or not, we opted to leave it out. It is always easier to add a property then to live with a legacy property we wished we didn't want to support anymore.
|
||||
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
# Value proposition for devlopers
|
||||
If you are a developer we think you are going to love adaptive cards.
|
||||
|
||||
## Content producers
|
||||
If you are a developer that wants to create content:
|
||||
* **One card** - You get one format, minimizing the cost of creating a card and maximizing the number of places it can be used.
|
||||
* **Richer Expression** - Your content can more closely align with want you want to say because you have a richer pallete to paint in.
|
||||
* **Broader Reach** - Your content will work across a broader set of applications without you having to learn new schemas.
|
||||
* **Better tooling** - Because there is a shared card ecosystem better tooling can be created that is shared by everyone.
|
||||
|
||||
## Content consumers
|
||||
If you are a developer that owns an application that would like to display cards
|
||||
* **Easy to implement** - You get off the shelf libraries to easily integrate
|
||||
* **Consistent user experience** - You get a consistent experience because you own the style of the rendered card
|
||||
* **Native performance** - You get native performance as it targets your ui framework directly
|
||||
* **Safe** - Content is delivered in safe payload, you don't have to open up your ui framework to raw html
|
||||
* **Free documentation** - You save time because you don't have invent schema, document schema, creating tooling around it, etc.
|
||||
* **Shared tooling** - You save time because you don't have tooling for your schema
|
|
@ -1,5 +1,5 @@
|
|||
# Javascript
|
||||
There is no javascript library, but for completeness
|
||||
There is no javascript library, but javascript is already pretty good at manipulating JSON.
|
||||
|
||||
## Example creating
|
||||
```javascript
|
||||
|
|
|
@ -13,29 +13,38 @@ npm install adaptive-cards
|
|||
```
|
||||
|
||||
## Example creating
|
||||
```javascript
|
||||
TODO
|
||||
var card = new AdaptiveCard();
|
||||
card.Body.Add(new TextBlock()
|
||||
There are interface definitions in schema.d.ts which describe the shape of the schema
|
||||
|
||||
```typescript
|
||||
let card :IAdaptiveCard = {
|
||||
"type": "AdaptiveCard",
|
||||
"version": "1.0",
|
||||
"body": [
|
||||
{
|
||||
"type": "Container",
|
||||
"items": [
|
||||
{
|
||||
"type": "TextBlock",
|
||||
"text": "Meow!"
|
||||
},
|
||||
{
|
||||
"type": "Image",
|
||||
"url": "http://adaptivecards-staging.azurewebsites.net/api/cat"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
There is also an object model for creating cards which can be used
|
||||
|
||||
```typescript
|
||||
let card :IAdaptiveCard = new AdaptiveCard();
|
||||
card.body.add(new TextBlock()
|
||||
{
|
||||
Text = "Hello",
|
||||
Size = TextSizes.ExtraLarge,
|
||||
Color = TextColor.Attention
|
||||
text = "hello world"
|
||||
});
|
||||
card.Body.Add(new Image()
|
||||
{
|
||||
Url = "http://someUrl.com/example.png"
|
||||
});
|
||||
```
|
||||
## Example saving
|
||||
```javascript
|
||||
TODO
|
||||
var json = JsonConvert.SerializeObject(card);
|
||||
|
||||
```
|
||||
|
||||
## Example loading
|
||||
```
|
||||
var card = JsonConvert.DeserializeObject<AdaptiveCard>(json);
|
||||
```
|
||||
|
||||
|
||||
|
|
|
@ -0,0 +1,65 @@
|
|||
# Schema validation
|
||||
Schema validation is a powerful way of making authoring easier and enabling tooling.
|
||||
|
||||
## JSON Schema file
|
||||
We have provided a complete (json schema file)(/schemas/adaptive-cards.json) for editing and validating
|
||||
adaptive cards in json.
|
||||
|
||||
In Visual Studio and Visual Studio Code you can get automatic intellisense by including a $schema reference like this:
|
||||
|
||||
![bad](/content/invalidjson1.png)
|
||||
|
||||
![autocomplete](/content/autocomplete.png)
|
||||
|
||||
Example:
|
||||
```javascript
|
||||
{
|
||||
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
|
||||
"type": "AdaptiveCard",
|
||||
"version": "1.0",
|
||||
"body": []
|
||||
}
|
||||
```
|
||||
|
||||
## Xsd Schema file
|
||||
The Microsoft.AdaptiveCards .NET library has XML annotations so that you can serialize and deserialize XML
|
||||
as well as JSON, making it easy to use with XML based toolsets.
|
||||
|
||||
We have provided a complete (xsd schema file)(/schemas/adaptive-cards.xsd) for editing and validating
|
||||
adaptive cards in xml.
|
||||
|
||||
In Visual Studio and Visual Studio Code you can get automatic intellisense by including a xsd reference like this:
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="utf-16"?>
|
||||
<AdaptiveCard xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
|
||||
xsi:noNamespaceSchemaLocation="http://adaptivecards.io/schemas/adaptive-card.xsd">
|
||||
<TextBlock Text="Hello world" />
|
||||
</AdaptiveCard>
|
||||
```
|
||||
|
||||
|
||||
# Tools & samples
|
||||
There are some tools and samples in the source tree which are useful references as well as being useful tools.
|
||||
|
||||
## Visual Studio Code Extension
|
||||
We have created a visual studio code extension which allows you to visualize the card you are editing in real time
|
||||
inside the editor itself.
|
||||
|
||||
![extension](/content/vscode-extension.png)
|
||||
|
||||
To Install, open Extensions Marketplace and search for **Adapative Card Viewer**
|
||||
|
||||
![marketplace](/content/vscode-extension-marketplace.png)
|
||||
|
||||
|
||||
## WPF Visualizer Sample
|
||||
The WPF visualizer lets you visualize cards using WPF/Xaml on a windows machine. Built into it is a hostconfig
|
||||
editor which allows you to edit and view host config settings and save as a json file so you can then use in rendering
|
||||
in your application.
|
||||
|
||||
![wpf visualizer](/content/wpfvisualizer.png)
|
||||
|
||||
## Render2Image Sample
|
||||
The Render2Image sample turn any card into a PNG from the command line.
|
Загрузка…
Ссылка в новой задаче