Sintassi

PSBlazor è una sintassi personalizzata basata su Blazor e sulle pagine Razor. È simile a XML o XAML e fornisce un meccanismo per definire in modo dichiarativo un'interfaccia utente.

Componenti

Ogni componente è definito con un nodo XML, come <Button> o <Text>. Ogni componente ha il proprio insieme di attributi che personalizzano il comportamento e l'aspetto del widget. Alcuni componenti supportano contenuto figlio e possono includere componenti annidati.

Definire un componente

Per definire un componente, utilizzerà l'editor di codice PSBlazor per aggiungere i tag XML del componente. Ad esempio, per creare un pulsante, procederebbe come segue.

<Button>Click Me</Button>

Il risultato è una pagina con un pulsante definito.

Pulsante in uno strumento

Impostare gli attributi

Ogni componente dispone di attributi. All'interno dell'editor di codice della pagina PSBlazor, gli attributi verranno elencati automaticamente per il componente che sta modificando.

Componenti attributo PSBlazor

Impostare gli attributi è come impostare qualsiasi attributo XML. Questo esempio cambia il pulsante allo stato danger.

<Row>
    <Button Danger="true">Click Me</Button>
</Row>

Una volta salvato lo strumento, la visualizzazione verrà aggiornata. Con il pulsante nello stato danger, vedrà che ora è rosso.

Pulsante danger

Contenuto figlio

Alcuni componenti offrono la possibilità di definire contenuto figlio. Può usare il nodo <ChildContent> per specificarlo.

<Row>
   <ChildContent>
      <Button>Click Me</Button>
   </ChildContent>
</Row>

Se non vengono specificati altri nodi all'interno del figlio del componente, si presume che si tratti di contenuto figlio. Quanto sopra può essere semplificato in questo modo.

<Row>
    <Button>Click Me</Button>
</Row>

Alcuni componenti forniscono attributi template che possono essere impostati specificando più nodi di contenuto figlio con i nomi di nodo appropriati. Ad esempio, la tabella può avere contenuto figlio costituito da colonne e un template di titolo che definisce come viene visualizzato il titolo. Quando sono definiti più nodi figlio, <ChildContent> è obbligatorio.

<Table DataSource="$Services">
   <ChildContent>
       <PropertyColumn Name="Name" />
   </ChildContent>
   <TitleTemplate>
      <Text>My Services</Text>
   </TitleTemplate>
</Table>

PowerShell

Ogni strumento o componente PSBlazor ha un file PSM1 associato che contiene la logica interattiva. Questa logica può interagire con i moduli, invocare script in PSU o aggiornare l'interfaccia in base ai dati elaborati dallo script.

Callback di eventi

I callback di eventi si verificano quando l'utente interagisce con un componente PSBlazor. Ciò può includere clic del mouse, invii di moduli o input da tastiera. I callback di eventi sono semplicemente funzioni PowerShell. Quanto segue potrebbe essere utilizzato quando un utente fa clic su un pulsante.

function OnClick {
}

Argomenti

La maggior parte dei callback di eventi fornisce un oggetto che contiene informazioni sull'evento. Ad esempio, gli eventi del mouse includono informazioni come le coordinate del clic. Può accedervi fornendo un parametro $EventArgs.

function OnClick {
   param($EventArgs)
}

Contesto

Alcuni componenti sono contestuali. Ad esempio, una riga di tabella o un elemento di un modulo. I valori di contesto vengono passati al callback dell'evento tramite un parametro $Context.

function OnClick {
   param($Context)
}

Variabili

Le variabili possono essere utilizzate per aggiornare i componenti PSBlazor con dati provenienti da PowerShell. Utilizzi il dizionario $Variables per ottenere e impostare le variabili.

$Variables["TestVariable"] = "Not Clicked"

function OnClick {
    $Variables["TestVariable"] = "Clicked"
}

All'interno della sintassi PSBlazor, può fare riferimento alle variabili in modo simile a quanto farebbe in PowerShell.

<Text>$TestVariable</Text>
<Button OnClick="OnClick">Click Me</Button>

Può anche utilizzare le variabili negli attributi.

<Alert Message="$TestVariable"></Alert>
<Button OnClick="OnClick">Click Me</Button>

Le variabili possono anche essere oggetti complessi come PSCustomObject o Hashtable. Se hanno proprietà, può fare riferimento anche a queste nella sintassi PSBlazor.

<Alert Message="$TestVariable.Name"></Alert>
<Button OnClick="OnClick">Click Me</Button>

Data binding

Il data binding fornisce un meccanismo per aggiornare le variabili senza dover chiamare uno script PowerShell. Per definire un'associazione tra un attributo di un componente PSBlazor, utilizzi la sintassi bind-{attribute}.

Ad esempio, potrebbe associare una variabile $test a una casella di input in questo modo.

<Input bind-Value="$TextValue"></Input>

Nel suo modulo PowerShell, potrebbe quindi accedere alla variabile dall'oggetto $Variables.

$Message.Info($Variables["TextValue"])

Ciclo di vita

Le variabili vengono cancellate quando un utente aggiorna la pagina. Non vengono memorizzate nella cache oltre questo ambito. Ogni utente e ogni pagina dello strumento avrà un insieme diverso di variabili.