El archivo del diseñador

Importante: este documento hace referencia a una versión obsoleta de UiPath Activity Creator para Visual Studio. Consulte la nueva documentación aquí.

Introducción

Se puede crear una actividad completa solo con el archivo de definición de actividad, pero la experiencia del usuario casi siempre se mejora añadiendo un diseñador o IU. Los diseñadores están escritos en XAML, un lenguaje basado en XML (descrito con más detalle aquí), y se utilizan para crear front-end para aplicaciones de Windows Presentation Foundation (WPF).

Ve al archivo ChildActivityDesigner.xaml y repasa sección por sección para entender mejor cómo mejorar tu actividad con una interfaz de usuario.

<sap:ActivityDesigner x:Class="MyCompany.MyProduct.Activities.Design.ChildActivityDesigner"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
             xmlns:converters="clr-namespace:UiPath.Shared.Activities.Design.Converters">
    <a href="sap:ActivityDesigner.Resources">sap:ActivityDesigner.Resources</a>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="..\)\)Themes\)\)Generic.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <converters:ActivityIconConverter x:Key="ActivityIconConverter" />
        </ResourceDictionary>
    </sap:ActivityDesigner.Resources>
    <a href="sap:ActivityDesigner.Icon">sap:ActivityDesigner.Icon</a>
        <DrawingBrush Stretch="Uniform" Drawing="{Binding Path=ModelItem, Converter={StaticResource ActivityIconConverter}, ConverterParameter=pack://application:\)\),\)\),\)\),/MyCompany.MyProduct.Activities.Design;component/themes/icons.xaml}" />
    </sap:ActivityDesigner.Icon>
</sap:ActivityDesigner>

Definición de clase

Todos los diseñadores contienen un componente de nivel superior en el que se declara una clase y se importan los espacios de nombres complementarios. Este ejemplo amplía la clase ActivityDesigner , la clase base para todos estos componentes.

<sap:ActivityDesigner x:Class="MyCompany.MyProduct.Activities.Design.ChildActivityDesigner"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
             xmlns:converters="clr-namespace:UiPath.Shared.Activities.Design.Converters">

Observa que cada uno de los espacios de nombres importados tiene la forma xmlns:<prefix>. Estos prefijos se usarán más adelante en el archivo para hacer referencia a componentes útiles.

Recursos

Los recursos son componentes, estilos o datos reutilizables disponibles para su uso en un archivo XAML a través de un componente ResourceDictionary . En este ejemplo, se proporcionan dos tipos de recursos: un diccionario de estilos (Generic.xaml) y un componente convertidor (ActivityIconConverter).

<a href="sap:ActivityDesigner.Resources">sap:ActivityDesigner.Resources</a>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="..\)\)Themes\)\)Generic.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <converters:ActivityIconConverter x:Key="ActivityIconConverter" />
    </ResourceDictionary>
</sap:ActivityDesigner.Resources>

1. Generic.xaml es otro ResourceDictionary que contiene estilos estándar de UiPath que ayudan a mantener la coherencia de los diseñadores. Al echar un vistazo dentro de este archivo, se ve el siguiente estilo, que establece una altura estándar para todos los objetos ComboBox . Como hemos incluido este diccionario en nuestro archivo XAML, todos los cuadros combinados tendrán una altura predeterminada de 23px.

   <Style TargetType="{x:Type ComboBox}">
       <Setter Property="Height" Value="23" />
   </Style>

2. ActivityIconverter es una clase de utilidad que se proporciona a través de la carpeta compartida y que permite especificar todos los iconos de actividad de forma estándar. Consulta la sección Iconos a continuación para obtener más detalles.

   
   

   

   
   

Iconos

Los iconos, como los que se ven en todas las actividades de UiPath, se pueden agregar directamente a un archivo del Diseñador en formato XAML, pero nuestro método preferido es agregarlos todos en un archivo dedicado y usar el ActivityIconverter mencionado anteriormente para incorporarlos a cada actividad. De esta manera, el archivo principal del diseñador permanece despejado por el código de iconos, a menudo largo.

Icons.xaml

Dentro de tu proyecto de diseño, ve a Temas> Iconos.xaml.

Notará que dentro de este archivo hay dos bloques de código que contienen los iconos del ámbito principal y la actividad secundaria, y que están etiquetados como tales. El contenido de cada icono, obviamente, variará, pero lo que debe permanecer constante es el atributo x:Key , que toma la forma <Activity Name>Icon. El código del icono de la actividad secundaria, por ejemplo, tiene el siguiente formato:

<DrawingBrush x:Key="ChildActivityIcon" Viewbox="0,0,52.706,14.497" ViewboxUnits="Absolute" Stretch="Uniform">
...        
</DrawingBrush>

Archivo del diseñador

Vuelve a tu archivo de diseñador, ChildActivityDesigner.xaml. El siguiente bloque de código es responsable de agregar un icono al diseñador y es constante en todas las actividades del paquete. Funciona buscando en iconos.xaml una clave con el mismo nombre que la actividad en sí y agrega ese código XAML al archivo actual. Observe que ConverterParameter hace referencia a su proyecto de Designer por el nombre.

<a href="sap:ActivityDesigner.Icon">sap:ActivityDesigner.Icon</a>
    <DrawingBrush Stretch="Uniform" Drawing="{Binding Path=ModelItem, Converter={StaticResource ActivityIconConverter}, ConverterParameter=pack://application:\)\),\)\),\)\),/MyCompany.MyProduct.Activities.Design;component/themes/icons.xaml}" />
</sap:ActivityDesigner.Icon>

Adición de componentes

Ahora tiene la base de un diseñador, ¡pero aún está completamente en blanco! Ampliemos esto añadiendo dos campos de texto, uno para cada una de las entradas de la actividad secundaria.

Activity Decorator

Comience por darle a la actividad un aspecto de UiPath. Esto puede hacerse fácilmente añadiendo una ActivityDecoratorControl a tu diseñador inmediatamente debajo de tu código de icono. Visual Studio puede pedirte que importes el espacio de nombres UiPath.Shared.Activities.Design.Controls , pero si no es así, agrégalo también a la definición de clase en la parte superior del archivo.

<sap:ActivityDesigner x:Class="MyCompany.MyProduct.Activities.Design.ChildActivityDesigner"
             ...
             xmlns:controls="clr-namespace:UiPath.Shared.Activities.Design.Controls">
<?comment-start?>
Resources
<?comment-end?>
<?comment-start?>
Icons
<?comment-end?>
    <controls:ActivityDecoratorControl Style="{StaticResource ActivityDecoratorStyle}">
        
    </controls:ActivityDecoratorControl>
</sap:ActivityDesigner>

Todos los componentes de los diseñadores deben estar dentro de una ActivityDecoratorControl, que proporcione comportamientos de actividad estándar como la capacidad de minimizar un diseñador grande y mostrar el mensaje "Doble clic para ver". en su lugar. Detalles como este son pequeños pero se combinan para dar una sensación de UiPath al paquete de actividades general.

Reconstruya su paquete y verá que ahora se ve un poco diferente:

Diseño de cuadrícula

A continuación, establezcamos el diseño de la actividad para que pueda mostrar etiquetas y campos de texto de forma atractiva. WPF tiene 6 diseños principales, pero vamos a utilizar un panel de cuadrícula para mantener nuestros controles. La cuadrícula funciona definiendo primero un número de filas y columnas junto con sus alturas y anchuras respectivamente. Comienza definiendo 2 filas y 2 columnas.

<controls:ActivityDecoratorControl Style="{StaticResource ActivityDecoratorStyle}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
      
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
    </Grid>
</controls:ActivityDecoratorControl>

Observa que las alturas y los anchos no contienen valores reales, sino que utilizan caracteres comodín (*). Es libre de especificar valores numéricos exactos, pero esta notación permite que cada celda tenga un tamaño dinámico en relación con las que la rodean. Las RowDefinition alturas son ambas * , por lo que consumirán tanto espacio vertical como exista. Los anchos ColumnDefinition , sin embargo, son * y 3*, lo que significa que la primera columna consumirá el 25% de cualquier espacio en blanco disponible a lo largo del ancho y la segunda columna el 75%.

Añadir un cuadro de texto

Ahora que el diseño está configurado, añadiremos dos cuadros de texto con los que el usuario puede acceder a las dos propiedades de entrada de la actividad secundaria: primer número y segundo número. Comienza añadiendo una Etiqueta después de las definiciones de Cuadrícula para el Primer Número.

Hay 3 propiedades establecidas para este Label:

• FilaDeRejilla: coloca la etiqueta en la primera fila de la Cuadrícula definida anteriormente.
• ColumnaDeTrícula: coloca la etiqueta en la primera columna de la Cuadrícula definida anteriormente.
• Contenido: establece el texto que aparece en la etiqueta.

Consulta aquí para obtener una lista completa de las propiedades disponibles para los elementos de WPF.

<Grid>
<?comment-start?>
Grid definitions
<?comment-end?>
    <Label Grid.Row="0" Grid.Column="0" 
           Content="First Number" />
</Grid>

A continuación, vamos a añadir un CuadroDeTextoDeExpresión para permitir la entrada del usuario. Si Visual Studio no te pide que lo hagas, debes añadir manualmente dos espacios de nombres más a la definición de clase.

xmlns:view="http://schemas.microsoft.com/netfx/2009/xaml/activities/presentation"
xmlns:system="clr-namespace:System;assembly=mscorlib"

Hay 4 propiedades establecidas en este ExpressionTextBox:

• FilaDeRejilla: coloca la etiqueta en la primera fila de la Cuadrícula definida anteriormente.
• ColumnaDeTrícula: coloca la etiqueta en la segunda columna de la Cuadrícula definida anteriormente.
• HintText: establece el texto de información sobre herramientas que aparece dentro del cuadro de texto cuando está vacío y también cuando el ratón del usuario se desplaza sobre este campo.
• TipoDeExpresión: establece el tipo de datos que se permite en este campo. Dado que nuestra propiedad es un número de tipo int, se establece en Int32.

  <Grid>
  <?comment-start?>
  Grid definitions
  <?comment-end?>
      <Label Grid.Row="0" Grid.Column="0" 
             Content="First Number" />
      <view:ExpressionTextBox Grid.Row="0" Grid.Column="1" 
                              HintText="The first addend"
                              ExpressionType="system:Int32" />
  </Grid>

Reconstruya su paquete y ahora debería tener este aspecto:

Añade otro Label y ExpressionTextBox para la propiedad Segundo número, recordando que estos controles ahora estarán en Grid.Row="1". El resultado final debería tener este aspecto:

Vincular diseñador a la actividad

Intente hacer clic en cualquiera de sus cuadros de texto y verá que no responden. Esto se debe a que ExpressionTextBox funciona de forma diferente a un Textbox normal. Cuando los cuadros de texto admiten entradas String , los cuadros de texto de expresión permiten al usuario introducir expresiones VB.Net complejas (p. ej. Int32.MaxValue, 2+2, SomeUiPathVariable) y puede vincular este valor a una propiedad en tu actividad.

Para vincular los campos de tu diseñador a las propiedades de tu actividad, añade 2 propiedades más a cada ExpressionTextBox:

• OwnerActivity: especifica un ViewModel utilizado por el diseñador para vincular al archivo de actividad. Para nuestros propósitos, siempre será ModelItem.
• Expresión: proporciona la propiedad de actividad a la que se vinculará este campo. Hay 4 componentes principales:
• Vinculación: especifica por nombre la propiedad de actividad a la que se vinculará. Si ModelItem contiene el contenido de tu actividad, ModelItem.FirstNumber se vincula directamente a la propiedad Primer número.
• Convertidor: proporciona una clase para convertir entre objetos de diferentes tipos. En nuestro caso, el campo del diseñador contiene un int, pero la propiedad de actividad es del tipo InArgument<int>, por lo que añadimos un ArgumentToExpressionConverter estándar para manejar la vinculación entre ellos.
• ConvertidorParameter: especifica el tipo de argumento al que está vinculado este campo. En este caso, estamos vinculados a las propiedades de InArgument<> , por lo que ConvertidorParameter es In, pero InOut y Out también son opciones.
• Modo: indica si los cambios en el campo del diseñador desencadenarán actualizaciones o la propiedad de la actividad y viceversa. Establece esto como TwoWay para permitir al usuario actualizar el diseñador o el panel de propiedades. Consulta aquí todas las demás opciones.

Importa ArgumentToExpressionConverter agregando la siguiente línea a tu ResourceDictionary e importando el espacio de nombres clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation en tu definición de clase.

<converters1:ArgumentToExpressionConverter x:Key="ArgumentToExpressionConverter" />

Todos juntos, el diseñador de actividades secundarias y el código deben aparecer como se muestra a continuación. Introduce valores en cada campo y observa cómo se actualizan las propiedades correspondientes.

<sap:ActivityDesigner x:Class="MyCompany.MyProduct.Activities.Design.ChildActivityDesigner"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
             xmlns:converters="clr-namespace:UiPath.Shared.Activities.Design.Converters"
             xmlns:converters1="clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation"
             xmlns:controls="clr-namespace:UiPath.Shared.Activities.Design.Controls"
             xmlns:view="http://schemas.microsoft.com/netfx/2009/xaml/activities/presentation"
             xmlns:system="clr-namespace:System;assembly=mscorlib">
    <a href="sap:ActivityDesigner.Resources">sap:ActivityDesigner.Resources</a>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="..\)\)Themes\)\)Generic.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <converters1:ArgumentToExpressionConverter x:Key="ArgumentToExpressionConverter" />
            <converters:ActivityIconConverter x:Key="ActivityIconConverter" />
        </ResourceDictionary>
    </sap:ActivityDesigner.Resources>
    <a href="sap:ActivityDesigner.Icon">sap:ActivityDesigner.Icon</a>
        <DrawingBrush Stretch="Uniform" Drawing="{Binding Path=ModelItem, Converter={StaticResource ActivityIconConverter}, ConverterParameter=pack://application:\)\),\)\),\)\),/MyCompany.MyProduct.Activities.Design;component/themes/icons.xaml}" />
    </sap:ActivityDesigner.Icon>
    <controls:ActivityDecoratorControl Style="{StaticResource ActivityDecoratorStyle}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="3*"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Row="0" Grid.Column="0" 
                   Content="First Number" />
            <view:ExpressionTextBox Grid.Row="0"  Grid.Column="1" 
                                    OwnerActivity="{Binding Path=ModelItem}" 
                                    ExpressionType="system:Int32" 
                                    HintText="The first addend" 
                                    Expression="{Binding Path=ModelItem.FirstNumber,Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In, Mode=TwoWay}" />
            <Label Grid.Row="1" Grid.Column="0" 
                   Content="Second Number" />
            <view:ExpressionTextBox Grid.Row="1"  Grid.Column="1" 
                                    OwnerActivity="{Binding Path=ModelItem}" 
                                    ExpressionType="system:Int32" 
                                    HintText="The second addend" 
                                    Expression="{Binding Path=ModelItem.SecondNumber,Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In, Mode=TwoWay}" />
        </Grid>
    </controls:ActivityDecoratorControl>
</sap:ActivityDesigner>