Syntaxe

PSBlazor est une syntaxe personnalisée basée sur Blazor et les pages Razor. Elle est similaire à XML ou XAML et fournit un mécanisme pour définir de façon déclarative une interface utilisateur.

Composants

Chaque composant est défini avec un nœud XML, comme <Button> ou <Text>. Chaque composant possède son propre ensemble d'attributs qui personnalisent le comportement et l'apparence du widget. Certains composants prennent en charge du contenu enfant et peuvent inclure des composants imbriqués.

Définir un composant

Pour définir un composant, vous utiliserez l'éditeur de code PSBlazor pour ajouter les balises XML du composant. Par exemple, pour créer un bouton, vous feriez ce qui suit.

<Button>Click Me</Button>

Le résultat est une page avec un bouton défini.

Définir les attributs

Chaque composant possède des attributs disponibles. Dans l'éditeur de code de la page PSBlazor, les attributs seront automatiquement listés pour le composant que vous modifiez actuellement.

Définir des attributs revient à définir n'importe quel attribut XML. Cet exemple change le bouton à l'état danger.

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

Une fois l'outil enregistré, l'affichage sera mis à jour. Avec le bouton à l'état danger, vous verrez qu'il est maintenant rouge.

Contenu enfant

Certains composants offrent la possibilité de définir du contenu enfant. Vous pouvez utiliser le nœud <ChildContent> pour indiquer que c'est le cas.

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

Si aucun autre nœud n'est spécifié dans l'enfant du composant, il est présumé être du contenu enfant. Ce qui précède peut être simplifié ainsi.

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

Certains composants fournissent des attributs de modèle qui peuvent être définis en spécifiant plusieurs nœuds de contenu enfant avec les noms de nœuds appropriés. Par exemple, le tableau peut avoir du contenu enfant composé de colonnes et d'un modèle de titre qui définit la façon dont le titre est affiché. Lorsque plusieurs nœuds enfants sont définis, <ChildContent> est requis.

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

PowerShell

Chaque outil ou composant PSBlazor a un fichier PSM1 associé qui contient la logique interactive. Cette logique peut interagir avec des modules, invoquer des scripts dans PSU ou mettre à jour l'interface en fonction des données traitées par le script.

Rappels d'événements

Les rappels d'événements se produisent lorsque l'utilisateur interagit avec un composant PSBlazor. Cela peut inclure les clics de souris, les soumissions de formulaire ou les saisies au clavier. Les rappels d'événements sont simplement des fonctions PowerShell. Ce qui suit pourrait être utilisé lorsqu'un utilisateur clique sur un bouton.

function OnClick {
}

Arguments

La plupart des rappels d'événements fournissent un objet qui contient des informations sur l'événement. Par exemple, les événements de souris incluent des informations comme les coordonnées du clic. Vous pouvez y accéder en fournissant un paramètre $EventArgs.

function OnClick {
   param($EventArgs)
}

Contexte

Certains composants sont contextuels. Par exemple, une ligne de tableau ou un élément de formulaire. Les valeurs de contexte sont transmises au rappel d'événement avec un paramètre $Context.

function OnClick {
   param($Context)
}

Variables

Les variables peuvent être utilisées pour mettre à jour les composants PSBlazor avec des données provenant de PowerShell. Utilisez le dictionnaire $Variables pour obtenir et définir des variables.

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

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

Dans la syntaxe PSBlazor, vous pouvez référencer les variables de façon similaire à ce que vous feriez dans PowerShell.

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

Vous pouvez aussi utiliser des variables dans les attributs.

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

Les variables peuvent aussi être des objets complexes tels que PSCustomObject ou Hashtable. Si elles ont des propriétés, vous pouvez également les référencer dans la syntaxe PSBlazor.

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

Liaison de données

La liaison de données fournit un mécanisme pour mettre à jour les variables sans avoir à appeler un script PowerShell. Pour définir une liaison entre un attribut sur un composant PSBlazor, utilisez la syntaxe bind-{attribute}.

Par exemple, vous pourriez lier une variable $test à une zone de saisie comme ceci.

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

Dans votre module PowerShell, vous pourriez ensuite accéder à la variable à partir de l'objet $Variables.

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

Cycle de vie

Les variables sont effacées lorsqu'un utilisateur actualise la page. Elles ne sont pas mises en cache au-delà de cette portée. Chaque utilisateur et chaque page d'outil auront un ensemble différent de variables.