Rendering delle schede in un'applicazione

  • Articolo

È facile eseguire il rendering di schede adattive in un'applicazione. Sono disponibili SDK per tutte le comuni piattaforme, nonché una specifica dettagliata per la creazione di un renderer di schede adattive personalizzato.

  1. Installa l'SDK di un renderer per la piattaforma di destinazione.
  2. Crea un'istanza del renderer configurata con lo stile, le regole e i gestori eventi di azione dell'app.
  3. Esegui il rendering di una scheda nell'interfaccia utente nativa con l'applicazione automatica dello stile all'app.

SDK di schede adattive

Piattaforma Installare Compilare Docs Stato
JavaScript Installazione di NPM Origine Documentazione Stato compilazione
WPF .NET Installazione di Nuget Origine Documentazione Stato della compilazione
HTML .NET Installazione di Nuget Origine Documentazione Stato della compilazione
Piattaforma UWP di Windows Installazione di Nuget Origine Documentazione Stato compilazione
WinUI 3 Installazione di Nuget Origine Documentazione Stato compilazione
Android Maven Central Origine Documentazione Stato della compilazione
iOS CocoaPods Origine Documentazione Stato della compilazione

Creare un'istanza del renderer

Il passaggio successivo consiste nel creare un'istanza di un oggetto AdaptiveCardRenderer.

Associare eventi azione

Per impostazione predefinita, le azioni verranno sottoposte a rendering come pulsanti nella scheda, ma spetta all'app fare in modo che si comportino come previsto. Ogni SDK dispone dell'equivalente di un evento OnAction da gestire.

  • Action.OpenURL: apre l'oggetto url specificato.
  • Action.Submit: invia all'origine il risultato dell'invio. Spetta a te scegliere come inviarlo all'origine della scheda.
  • Action.ShowCard: richiama una finestra di dialogo ed esegue il rendering della scheda secondaria in tale finestra. Considera che devi gestire questa operazione solo se l'impostazione di ShowCardActionMode è popup.

Eseguire il rendering di una scheda

Dopo aver acquisito il payload di una scheda, chiama semplicemente il renderer e passa la scheda. Verrà restituito un oggetto dell'interfaccia utente nativo costituito dal contenuto della scheda. A questo punto, devi solo inserire questa interfaccia utente in un punto dell'app.

Personalizzazione

Esistono diversi modi per personalizzare gli elementi di cui viene eseguito il rendering.

HostConfig

Hostconfig è un oggetto di configurazione multipiattaforma condiviso che controlla lo stile di base e il comportamento delle schede all'interno dell'app. Definisce elementi come le dimensioni dei caratteri, la spaziatura tra elementi, i colori, il numero di azioni supportate e così via.

Applicazione di stili della piattaforma nativa

La maggior parte dei framework dell'interfaccia utente consente di applicare uno stile alla scheda sottoposta a rendering usando lo stile del framework dell'interfaccia utente nativa. In HTML ad esempio puoi specificare le classi CSS per il codice HTML oppure in XAML puoi passare un oggetto ResourceDictionary personalizzato per un controllo granulare dell'output.

Personalizzare il rendering per elemento

Ogni SDK consente di eseguire l'override del rendering di un elemento o persino di aggiungere il supporto per elementi completamente nuovi che hai definito. Puoi ad esempio modificare il renderer Input.Date in modo da restituire un controllo personalizzato mantenendo comunque il resto dell'output del renderer. In alternativa, puoi aggiungere il supporto di un elemento personalizzato Rating che hai definito.