Syntaxe

Informations sur la syntaxe PSBlazor.

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 permettant de définir de manière déclarative une interface utilisateur.

Composants

Chaque composant est défini avec un nœud XML, tel que <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 le 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 procéderiez comme suit.

<Button>Click Me</Button>

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

Bouton sur un outil

Définir des attributs

Chaque composant dispose d'attributs disponibles. Dans l'éditeur de code de la page PSBlazor, les attributs seront automatiquement répertoriés pour le composant en cours de modification.

Composants d'attributs PSBlazor

La définition des attributs est identique à celle de tout 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 en état danger, vous verrez qu'il est maintenant rouge.

Bouton danger

Contenu enfant

Certains composants offrent la possibilité de définir un 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 supposé être un contenu enfant. Ce qui précède peut être simplifié comme suit.

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

Certains composants fournissent des attributs de gabarit 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 un contenu enfant composé de colonnes et un gabarit de titre définissant la façon dont le titre est affiché. Lorsque plusieurs nœuds enfants sont définis, <ChildContent> est obligatoire.

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

PowerShell

Chaque outil ou composant PSBlazor est associé à un fichier PSM1 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 des clics de souris, des soumissions de formulaires ou des saisies au clavier. Les rappels d'événements sont simplement des fonctions PowerShell. Ce qui suit peut être utilisé lorsqu'un utilisateur clique sur un bouton.

function OnClick {
}

Arguments

La plupart des rappels d'événements fournissent un objet contenant des informations sur l'événement. Par exemple, les événements de souris incluent des informations telles que 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 des variables de la même manière que vous le feriez dans PowerShell.

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

Vous pouvez également utiliser des variables dans les attributs.

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

Les variables peuvent également être des objets complexes tels que PSCustomObject ou Hashtable. Si elles possèdent 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 d'un composant PSBlazor, utilisez la syntaxe bind-{attribute}.

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

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

Dans votre module PowerShell, vous pourriez ensuite accéder à la variable depuis 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 disposera d'un ensemble différent de variables.