Sintaxis

PSBlazor es una sintaxis personalizada basada en Blazor y las páginas Razor. Es similar a XML o XAML y proporciona un mecanismo para definir de forma declarativa una interfaz de usuario.

Componentes

Cada componente se define con un nodo XML, como <Button> o <Text>. Cada componente tiene su propio conjunto de atributos que personalizan el comportamiento y el aspecto del widget. Algunos componentes admiten contenido secundario y pueden incluir componentes anidados.

Definir un componente

Para definir un componente, utilizará el editor de código de PSBlazor para añadir las etiquetas XML del componente. Por ejemplo, para crear un botón, haría lo siguiente.

<Button>Click Me</Button>

El resultado es una página con un botón definido.

Botón en una herramienta

Establecer atributos

Todos los componentes tienen atributos disponibles. Dentro del editor de código de la página PSBlazor, los atributos se mostrarán automáticamente para el componente que esté editando.

Componentes de atributo de PSBlazor

Establecer atributos es igual que establecer cualquier atributo XML. Este ejemplo cambia el botón al estado de peligro.

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

Una vez que guarde la herramienta, se actualizará la visualización. Con el botón en estado de peligro, verá que ahora es rojo.

Botón de peligro

Contenido secundario

Algunos componentes ofrecen la posibilidad de definir contenido secundario. Puede utilizar el nodo <ChildContent> para especificar que es el caso.

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

Si no se especifica ningún otro nodo dentro del elemento secundario del componente, se asume que es contenido secundario. Lo anterior se puede simplificar así.

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

Algunos componentes proporcionan atributos de plantilla que se pueden establecer especificando varios nodos de contenido secundario con los nombres de nodo adecuados. Por ejemplo, la tabla puede tener contenido secundario formado por columnas y una plantilla de título que define cómo se muestra el título. Cuando se definen varios nodos secundarios, <ChildContent> es obligatorio.

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

PowerShell

Cada herramienta o componente de PSBlazor tiene un fichero PSM1 asociado que contiene la lógica interactiva. Esta lógica puede interactuar con módulos, invocar scripts en PSU o actualizar la interfaz según los datos procesados por el script.

Devoluciones de llamada de eventos

Las devoluciones de llamada de eventos se producen cuando el usuario interactúa con un componente de PSBlazor. Esto puede incluir clics del ratón, envíos de formularios o entradas de teclado. Las devoluciones de llamada de eventos son simplemente funciones de PowerShell. Lo siguiente podría utilizarse para cuando un usuario hace clic en un botón.

function OnClick {
}

Argumentos

La mayoría de las devoluciones de llamada de eventos proporcionan un objeto que contiene información sobre el evento. Por ejemplo, los eventos de ratón incluyen información como las coordenadas del clic. Puede acceder a ellos proporcionando un parámetro $EventArgs.

function OnClick {
   param($EventArgs)
}

Contexto

Algunos componentes son contextuales. Por ejemplo, una fila de tabla o un elemento de formulario. Los valores de contexto se pasan a la devolución de llamada del evento con un parámetro $Context.

function OnClick {
   param($Context)
}

Variables

Las variables se pueden utilizar para actualizar los componentes de PSBlazor con datos de PowerShell. Utilice el diccionario $Variables para obtener y establecer variables.

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

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

Dentro de la sintaxis de PSBlazor, puede hacer referencia a las variables de forma similar a como lo haría en PowerShell.

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

También puede utilizar variables en los atributos.

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

Las variables también pueden ser objetos complejos como PSCustomObject o Hashtable. Si tienen propiedades, también puede hacer referencia a ellas en la sintaxis de PSBlazor.

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

Enlace de datos

El enlace de datos proporciona un mecanismo para actualizar variables sin tener que llamar a un script de PowerShell. Para definir un enlace entre un atributo de un componente de PSBlazor, utilice la sintaxis bind-{attribute}.

Por ejemplo, podría enlazar con una variable $test para un cuadro de entrada de esta manera.

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

En su módulo de PowerShell, podría entonces acceder a la variable desde el objeto $Variables.

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

Ciclo de vida

Las variables se borran cuando un usuario actualiza la página. No se almacenan en caché más allá de este ámbito. Cada usuario y página de herramienta tendrá un conjunto de variables diferente.