Componenti

Un'app Universal è composta da componenti. Quando crea un'app, può semplicemente richiamare i cmdlet PowerShell all'interno dello script dell'app per creare un nuovo componente.

New-UDApp -Title 'Dashboard' -Content {
    New-UDTypography -Text 'Hello, world!'
}

Tipi di componenti

Sono disponibili oltre 50 componenti che può utilizzare nelle sue app. Alcuni dei componenti più comunemente usati includono:

• Visualizzazione dei dati

  • Avvisi
  • Tabelle
  • Timeline
• Visualizzazione grafica dei dati

  • Grafici
  • Mappe
• Feedback

  • Modale
  • Avanzamento
• Input

  • Pulsante
  • Modulo
  • Casella di testo
  • Interruttore
• Navigazione

  • Menu
  • Stepper
  • Schede
• Layout

  • Griglia
  • Stack
• Utilità

  • Dinamico
  • Elemento
  • HTML
• Superfici

  • Scheda
  • Pannello di espansione

Gestori di eventi

Molti componenti offrono gestori di eventi per fornire funzionalità interattive. Può trattarsi di eventi come clic, validazione, rendering e altro ancora. L'interattività di un gestore di eventi viene implementata utilizzando blocchi di script PowerShell.

Ad esempio, l'esempio seguente crea un pulsante che, una volta cliccato, mostrerà un toast.

New-UDButton -Text "Click me!" -OnClick {
    Show-UDToast -Message "Clicked!"
}

All'interno dei gestori di eventi può eseguire qualsiasi script PowerShell valido. Ciò significa che può interagire con cmdlet esterni al modulo PSU, come ActiveDirectory o Microsoft.Graph.

Dati dell'evento

Ogni gestore di eventi può fornire i propri dati dell'evento. Componenti come tabelle, moduli e caselle di testo restituiscono i dati corrispondenti sullo stato del componente. Possono essere i dati correnti di una riga della tabella, i valori di un modulo o il testo di una casella di testo.

Può accedere ai dati dell'evento utilizzando la variabile $EventData. Questa variabile sarà diversa in base al tipo di componente che sta utilizzando. Ad esempio, l'evento -OnChange di New-UDTextbox restituisce una stringa in $EventData.

New-UDTextbox -OnChange {
    Show-UDToast -Message $EventData
}

Questo sarà diverso per altri controlli. Ad esempio, un modulo restituirà un oggetto che contiene proprietà relative allo stato del modulo.

New-UDForm -Content {
    New-UDTextbox -Id "UserName"
} -OnSubmit {
    Show-UDToast -Message $EventData.UserName
}

Può anche accedere alla stringa non elaborata fornita al gestore di eventi utilizzando la variabile $Body. Questa contiene una stringa JSON che definisce $EventData.

Oltre alla variabile $EventData, può anche utilizzare la variabile $PSUItem per ottenere maggiori informazioni in determinati controlli che consentono più tipi di dati. Trova il tipo di dati PSUItem qui sotto.

public class PsuItem
{
    public string Id { get; set; }
    public string Type { get; set; }
    public string EventId { get; set; }
    public string EventName { get; set; }
    public string EventData { get; set; }
    public string Location { get; set; }
}

Ambito

Comprendere l'ambito dei gestori di eventi è importante per garantire che le sue app si comportino come previsto. PowerShell Universal si impegna a fornire in modo efficace tutte le variabili in ambito ai gestori di eventi.

Ad esempio, quanto segue sarebbe un uso naturale di una variabile in uno script PowerShell standard e funziona anche nei gestori di eventi.

$Variable = 123
New-UDButton -Text "Click Me" -OnClick {
    Show-UDToast -Message $Variable
}

L'uso degli ambiti $Global: e $Script: non funzionerà come previsto perché ogni gestore di eventi opera nel proprio runspace. PSU sposta manualmente le variabili durante l'elaborazione, ma non modifica le variabili in altri ambiti.

Dovrebbe utilizzare gli ambiti personalizzati per accedere alle variabili tra i gestori di eventi.

Inoltre, dovrebbe evitare di tentare di ereditare $EventData all'interno di gestori di eventi annidati. Sebbene alcuni componenti non definiscano i propri dati dell'evento, si deve presumere che i dati dell'evento vengano sovrascritti nel componente annidato.

New-UDTable -Columns @(
    New-UDTableColumn -Property 'Name' -OnRender {
        New-UDButton -Text $EventData.Name -OnClick {
            # $EventData has been replaced by the button and no longer has a name property
            Show-UDToast -Message $EventData.Name
        }
    }
) -Data $Data

Per evitare questo problema, dovrebbe memorizzare i dati in un'altra variabile da inviare all'ambito del gestore di eventi del componente annidato.

New-UDTable -Columns @(
    New-UDTableColumn -Property 'Name' -OnRender {
        $Name = $EventData.Name
        New-UDButton -Text $EventData.Name -OnClick {
            Show-UDToast -Message $Name
        }
    }
) -Data $Data

Vedere anche

• Devolutions Academy – Aggiunta di tabelle di dati