Syntax

PSBlazor ist eine benutzerdefinierte Syntax basierend auf Blazor und Razor Pages. Sie ähnelt XML oder XAML und bietet einen Mechanismus, um eine Benutzeroberfläche deklarativ zu definieren.

Komponenten

Jede Komponente wird mit einem XML-Knoten definiert, wie zum Beispiel <Button> oder <Text>. Jede Komponente verfügt über ihren eigenen Satz von Attributen, die das Verhalten sowie das Aussehen und die Bedienung des Widgets anpassen. Einige Komponenten unterstützen untergeordneten Inhalt und können verschachtelte Komponenten enthalten.

Eine Komponente definieren

Um eine Komponente zu definieren, verwenden Sie den PSBlazor-Code-Editor, um die XML-Tags der Komponente hinzuzufügen. Um zum Beispiel eine Schaltfläche zu erstellen, würden Sie Folgendes tun.

<Button>Click Me</Button>

Das Ergebnis ist eine Seite mit einer definierten Schaltfläche.

Schaltfläche in einem Tool

Attribute festlegen

Jede Komponente verfügt über verfügbare Attribute. Innerhalb des Code-Editors für die PSBlazor-Seite werden die Attribute für die Komponente, die Sie gerade bearbeiten, automatisch aufgelistet.

PSBlazor-Attributkomponenten

Das Festlegen von Attributen erfolgt genauso wie das Festlegen eines beliebigen XML-Attributs. Dieses Beispiel ändert die Schaltfläche in den Danger-Status.

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

Sobald Sie das Tool speichern, wird die Anzeige aktualisiert. Mit der Schaltfläche im Danger-Status sehen Sie, dass sie nun rot ist.

Danger-Schaltfläche

Untergeordneter Inhalt

Einige Komponenten bieten die Möglichkeit, untergeordneten Inhalt zu definieren. Sie können den Knoten <ChildContent> verwenden, um anzugeben, dass dies der Fall ist.

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

Wenn keine anderen Knoten innerhalb des untergeordneten Elements der Komponente angegeben sind, wird angenommen, dass es sich um untergeordneten Inhalt handelt. Das Obige kann folgendermaßen vereinfacht werden.

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

Einige Komponenten bieten Vorlagenattribute, die durch die Angabe mehrerer untergeordneter Inhaltsknoten mit den entsprechenden Knotennamen festgelegt werden können. Zum Beispiel kann die Tabelle untergeordneten Inhalt haben, der aus Spalten und einer Titelvorlage besteht, die definiert, wie der Titel angezeigt wird. Wenn mehrere untergeordnete Knoten definiert sind, ist <ChildContent> erforderlich.

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

PowerShell

Jedes PSBlazor-Tool oder jede PSBlazor-Komponente hat eine zugehörige PSM1-Datei, die interaktive Logik enthält. Diese Logik kann mit Modulen interagieren, Skripte in PSU aufrufen oder die Oberfläche basierend auf den vom Skript verarbeiteten Daten aktualisieren.

Ereignis-Callbacks

Ereignis-Callbacks treten auf, wenn der Benutzer mit einer PSBlazor-Komponente interagiert. Dies kann Mausklicks, Formularübermittlungen oder Tastatureingaben umfassen. Ereignis-Callbacks sind einfach PowerShell-Funktionen. Folgendes könnte verwendet werden, wenn ein Benutzer auf eine Schaltfläche klickt.

function OnClick {
}

Argumente

Die meisten Ereignis-Callbacks stellen ein Objekt bereit, das Informationen über das Ereignis enthält. Zum Beispiel enthalten Mausereignisse Informationen wie die Koordinaten des Klicks. Sie können darauf zugreifen, indem Sie einen $EventArgs-Parameter bereitstellen.

function OnClick {
   param($EventArgs)
}

Kontext

Einige Komponenten sind kontextabhängig. Zum Beispiel eine Tabellenzeile oder ein Formularelement. Kontextwerte werden mit einem $Context-Parameter an den Ereignis-Callback übergeben.

function OnClick {
   param($Context)
}

Variablen

Variablen können verwendet werden, um die PSBlazor-Komponenten mit Daten aus PowerShell zu aktualisieren. Verwenden Sie das $Variables-Wörterbuch, um Variablen abzurufen und festzulegen.

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

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

Innerhalb der PSBlazor-Syntax können Sie Variablen ähnlich referenzieren, wie Sie es in PowerShell tun würden.

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

Sie können Variablen auch in Attributen verwenden.

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

Variablen können auch komplexe Objekte wie PSCustomObject oder Hashtable sein. Wenn sie Eigenschaften haben, können Sie diese ebenfalls in der PSBlazor-Syntax referenzieren.

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

Datenbindung

Die Datenbindung bietet einen Mechanismus, um Variablen zu aktualisieren, ohne ein PowerShell-Skript aufrufen zu müssen. Um eine Bindung zwischen einem Attribut einer PSBlazor-Komponente zu definieren, verwenden Sie die Syntax bind-{attribute}.

Zum Beispiel könnten Sie für ein Eingabefeld folgendermaßen an eine $test-Variable binden.

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

In Ihrem PowerShell-Modul könnten Sie dann über das $Variables-Objekt auf die Variable zugreifen.

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

Lebenszyklus

Variablen werden gelöscht, wenn ein Benutzer die Seite aktualisiert. Sie werden über diesen Bereich hinaus nicht zwischengespeichert. Jeder Benutzer und jede Tool-Seite verfügt über einen anderen Satz von Variablen.