Componentes

Una aplicación de Universal se compone de componentes. Al crear una aplicación, basta con llamar a los cmdlets de PowerShell dentro del script de la aplicación para crear un nuevo componente.

New-UDApp -Title 'Dashboard' -Content {
    New-UDTypography -Text 'Hello, world!'
}

Tipos de componentes

Hay más de 50 componentes que puede utilizar en sus aplicaciones. Algunos de los componentes más utilizados son:

• Visualización de datos

  • Alertas
  • Tablas
  • Cronología
• Representación gráfica de datos

  • Gráficos
  • Mapas
• Comentarios

  • Modal
  • Progreso
• Entradas

  • Botón
  • Formulario
  • Cuadro de texto
  • Conmutador
• Navegación

  • Menú
  • Stepper
  • Pestañas
• Diseño

  • Cuadrícula
  • Pila
• Utilidades

  • Dinámico
  • Elemento
  • HTML
• Superficies

  • Tarjeta
  • Panel de expansión

Controladores de eventos

Muchos componentes ofrecen controladores de eventos para proporcionar funcionalidad interactiva. Puede tratarse de eventos como clics, validación, representación y más. La interactividad de un controlador de eventos se implementa mediante bloques de script de PowerShell.

Por ejemplo, el siguiente ejemplo crea un botón que se puede pulsar y que luego mostrará un toast.

New-UDButton -Text "Click me!" -OnClick {
    Show-UDToast -Message "Clicked!"
}

Dentro de los controladores de eventos, puede ejecutar cualquier script de PowerShell válido. Esto significa que puede interactuar con cmdlets ajenos al módulo de PSU, como ActiveDirectory o Microsoft.Graph.

Datos del evento

Cada controlador de eventos puede proporcionar sus propios datos de evento. Componentes como las tablas, los formularios y los cuadros de texto devuelven los datos correspondientes sobre el estado del componente. Esto podría ser los datos actuales de una fila de la tabla, los valores de un formulario o el texto de un cuadro de texto.

Puede acceder a los datos del evento mediante la variable $EventData. Esta variable será diferente según el tipo de componente que esté utilizando. Por ejemplo, el evento -OnChange de New-UDTextbox devuelve una cadena en $EventData.

New-UDTextbox -OnChange {
    Show-UDToast -Message $EventData
}

Esto será diferente para otros controles. Por ejemplo, un formulario devolverá un objeto que contiene propiedades sobre el estado del formulario.

New-UDForm -Content {
    New-UDTextbox -Id "UserName"
} -OnSubmit {
    Show-UDToast -Message $EventData.UserName
}

También puede acceder a la cadena sin procesar proporcionada al controlador de eventos mediante la variable $Body. Esta contiene una cadena JSON que define el $EventData.

Además de la variable $EventData, también puede utilizar la variable $PSUItem para obtener más información en determinados controles que admiten varios tipos de datos. A continuación encontrará el tipo de datos PSUItem.

public class PsuItem
{
    public string Id { get; set; }
    public string Type { get; set; }
    public string EventId { get; set; }
    public string EventName { get; set; }
    public string EventData { get; set; }
    public string Location { get; set; }
}

Ámbito

Comprender el ámbito de los controladores de eventos es importante para garantizar que sus aplicaciones se comporten como se espera. PowerShell Universal se esfuerza por proporcionar de forma eficaz todas las variables dentro del ámbito a los controladores de eventos.

Por ejemplo, lo siguiente sería un uso natural de una variable en un script de PowerShell estándar y también funciona en los controladores de eventos.

$Variable = 123
New-UDButton -Text "Click Me" -OnClick {
    Show-UDToast -Message $Variable
}

El uso del ámbito $Global: y $Script: no funcionará como se espera, porque cada controlador de eventos funciona en su propio runspace. PSU mueve manualmente las variables durante el procesamiento, pero no cambia las variables de otros ámbitos.

Debe utilizar ámbitos personalizados para acceder a las variables entre controladores de eventos.

Además, debe evitar intentar heredar $EventData dentro de controladores de eventos anidados. Aunque algunos componentes no definen sus propios datos de evento, se debe suponer que los datos del evento se sobrescribirán en el componente anidado.

New-UDTable -Columns @(
    New-UDTableColumn -Property 'Name' -OnRender {
        New-UDButton -Text $EventData.Name -OnClick {
            # $EventData has been replaced by the button and no longer has a name property
            Show-UDToast -Message $EventData.Name
        }
    }
) -Data $Data

Para evitar este problema, debe almacenar los datos en otra variable que se envíe al ámbito del controlador de eventos del componente anidado.

New-UDTable -Columns @(
    New-UDTableColumn -Property 'Name' -OnRender {
        $Name = $EventData.Name
        New-UDButton -Text $EventData.Name -OnClick {
            Show-UDToast -Message $Name
        }
    }
) -Data $Data

Véase también

• Devolutions Academy – Adding data tables