Le fichier Designer

Attention : ce document fait référence à une version obsolète du Créateur d'activités UiPath pour Visual Studio. Veuillez consulter la nouvelle documentation ici.

Introduction

Une activité complète peut être créée avec le fichier de définition d'activité seul, mais l'expérience utilisateur est presque toujours améliorée en ajoutant un concepteur ou une IU. Les concepteurs sont écrits en XAML, un langage basé sur XML (décrit plus en détail ici) et utilisé pour créer des front-ends pour les applications Windows Presentation Foundation (WPF).

Accédez au fichier ChildActivityDesigner.xaml et parcourez section par section pour mieux comprendre comment améliorer votre activité avec une interface utilisateur.

<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>

Définition de classe

Tous les concepteurs contiennent un composant de niveau supérieur dans lequel une classe est déclarée et des espaces de noms supplémentaires sont importés. Cet exemple étend la classe ActivityDesigner , la classe de base pour tous ces composants.

<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">

Notez que chacun des espaces de noms importés prend la forme xmlns:<prefix>. Ces préfixes sont utilisés ultérieurement dans le fichier pour référencer des composants utiles.

Ressources

Les ressources sont des composants, des styles ou des données réutilisables mis à disposition pour une utilisation dans un fichier XAML via un composant ResourceDictionary . Dans cet exemple, deux types de ressources sont fournis : un dictionnaire de styles (Generic.xaml) et un composant de convertisseur (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 est un autre fichier ResourceDictionary contenant des styles UiPath standard qui aident à garder l'apparence des concepteurs cohérente. En regardant à l'intérieur de ce fichier, vous voyez le style suivant, qui définit une hauteur standard pour tous les objets ComboBox . Étant donné que nous avons inclus ce dictionnaire dans notre fichier XAML, toutes les zones de liste déroulante auront une hauteur par défaut de 23 pixels.

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

2. ActivityIconConverter est une classe utilitaire fournie via le dossier Partagé et qui permet de spécifier toutes les icônes d'activité de manière standard. Voir la section Icônes ci-dessous pour plus de détails.

   
   

   

   
   

Icônes

Les icônes, comme celles que l’on voit sur toutes les activités UiPath, peuvent être ajoutées directement à un fichier Designer au format XAML, mais nous préférons les ajouter dans un fichier dédié et d’utiliser le ActivityIconConverter susmentionné pour les intégrer à chaque activité. De cette façon, le fichier principal du concepteur reste épuré par le code d'icônes souvent long.

Icons.xaml

Dans votre projet de conception, accédez à Thèmes > Icons.xaml.

Vous remarquerez que ce fichier contient deux blocs de code qui contiennent les icônes de l’activité parent et enfant et qui sont labellisés comme tels. Le contenu de chaque icône variera évidemment, mais ce qui doit rester constant, c'est l'attribut x:Key , qui prend la forme <Activity Name>Icon. Le code d'icône de l'activité enfant, par exemple, a le format suivant :

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

Fichier concepteur

Revenez à votre fichier de concepteur, ChildActivityDesigner.xaml. Le bloc de code suivant est responsable de l'ajout d'une icône au concepteur et est constant dans toutes les activités du package. Il fonctionne en recherchant dans Icons.xaml une clé portant le même nom que l'activité elle-même et ajoute ce code XAML au fichier actuel. Notez que ConverterParameter fait référence à votre projet Designer par son nom.

<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>

Ajout de composants

Vous disposez désormais des bases d’un concepteur, mais elles sont encore complètement vides ! Développons cela en ajoutant deux champs de texte, un pour chacune des entrées de l’activité enfant.

Activity Decorator

Commencez par donner une apparence UiPath à l'activité. Cela peut être facilement fait en ajoutant un ActivityDecoratorControl à votre concepteur immédiatement en dessous de votre code d'icône. Visual Studio peut vous inviter à importer l'espace de noms UiPath.Shared.Activities.Design.Controls , sinon, ajoutez-le également à la définition de classe en haut du fichier.

<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>

Tous les composants d'un concepteur doivent être encapsulés dans une ActivityDecoratorControl, qui fournit des comportements d'activité standard tels que la possibilité de réduire un grand concepteur et d'afficher le message « Double-cliquez pour afficher. » à sa place. De tels détails sont infimes mais se combinent pour donner une touche UiPath à l'ensemble de l'activité.

Reconstruisez votre package et vous verrez qu'il est maintenant légèrement différent :

Disposition de la grille

Ensuite, définissons la mise en page de l’activité afin qu’elle puisse afficher les libellés et les champs de texte de manière attrayante. WPF a 6 mises en page principales, mais nous allons utiliser un panneau Grille (Grid) pour effectuer nos commandes. La grille fonctionne en définissant d'abord un nombre de lignes et de colonnes avec leurs hauteurs et largeurs respectivement. Commencez par définir 2 lignes et 2 colonnes.

<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>

Notez que les hauteurs et les largeurs ne contiennent pas de valeurs réelles, mais utilisent à la place des caractères génériques (*). Vous êtes libre de spécifier des valeurs numériques exactes, mais cette notation permet à chaque cellule d'être dimensionnée dynamiquement par rapport à celles qui l'entourent. Les hauteurs de RowDefinition sont toutes les deux * , elles consomment donc autant d’espace vertical qu’il y en a. Les largeurs de ColumnDefinition , cependant, sont * et 3*, ce qui signifie que la première colonne consommera 25 % de tous les espaces disponibles le long de la largeur et la deuxième 75 %.

Ajouter une zone de texte

Maintenant que la mise en page est définie, nous allons ajouter deux zones de texte avec lesquelles l'utilisateur peut accéder aux deux propriétés d'entrée de l'activité enfant : Premier nombre et Deuxième nombre. Commencez par ajouter un libellé après les définitions de grille pour le premier nombre.

Trois propriétés sont définies sur ce Label:

• Grid.Row : positionne le libellé dans la première ligne de la grille définie ci-dessus.
• Grille.Colonne : positionne le libellé dans la première colonne de la grille définie ci-dessus.
• Contenu : définit le texte qui apparaît dans le libellé.

Cliquez ici pour obtenir une liste complète des propriétés disponibles pour les éléments WPF.

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

Ensuite, ajoutons une activité ExpressionTextBox pour permettre l'entrée de l'utilisateur. Si Visual Studio ne vous invite pas à le faire, vous devez ajouter manuellement deux espaces de noms supplémentaires à la définition de classe.

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

4 propriétés sont définies sur ce ExpressionTextBox:

• Grid.Row : positionne le libellé dans la première ligne de la grille définie ci-dessus.
• Grille.Colonne : positionne le libellé dans la deuxième colonne de la grille définie ci-dessus.
• HintText : définit le texte d'info-bulle qui apparaît dans la zone de texte lorsqu'elle est vide et également lorsque la souris de l'utilisateur survole ce champ.
• Type d'expression : définit le type de données autorisé dans ce champ. Étant donné que notre propriété est un nombre de type int, elle est définie sur 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>

Reconstruisez votre package et il devrait maintenant ressembler à ceci :

Ajoutez un autre Label et ExpressionTextBox pour la propriété Second Number, en vous rappelant que ces commandes seront désormais dans Grid.Row="1". Le résultat final devrait ressembler à ceci :

Lier le concepteur à l’activité

Essayez de cliquer sur l'une de vos zones de texte et vous constaterez qu'elles ne répondent pas. En effet, ExpressionTextBox fonctionne différemment d'une zone de texte normale. Alors que les zones de texte prennent en charge les entrées String , les Zones de texte d'expression permettent à l'utilisateur de saisir des expressions VB.Net complexes (par ex. Int32.MaxValue, 2+2, SomeUiPathVariable) et peut lier cette valeur à une propriété de votre activité.

Afin de lier vos champs de concepteur aux propriétés de votre activité, ajoutez 2 propriétés supplémentaires à chaque ExpressionTextBox:

• ActivitéPropriétaire : spécifie un modèle d' affichage utilisé par le concepteur pour créer un lien vers le fichier d'activité. Dans le cadre de nos activités, il s'agira toujours de ModelItem.
• Expression : fournit la propriété d'activité à laquelle ce champ sera lié. Il y a 4 composants principaux ici :
• Liaison : spécifie par le nom la propriété d'activité à lier. Si le ModelItem contient le contenu de votre activité, ModelItem.FirstNumber renvoie directement à la propriété Premier nombre.
• Convertisseur : fournit une classe pour convertir entre des objets de différents types. Dans notre cas, le champ du concepteur contient un int, mais la propriété d'activité est de type InArgument<int>, nous ajoutons donc une ArgumentToExpressionConverter standard pour gérer la liaison entre eux.
• ParamètresConvertisseur : spécifie le type d'argument auquel ce champ est lié. Dans ce cas, nous lions les propriétés InArgument<> , la valeur ConvertisseurParameter est donc In, mais InOut et Out sont également des options.
• Mode : indique si les modifications apportées au champ du concepteur déclencheront des mises à jour ou à la propriété de l'activité et vice versa. Définissez-le sur TwoWay pour permettre à l’utilisateur de mettre à jour le panneau Concepteur ou Propriétés. Voir ici pour toutes les autres options.

Importez le ArgumentToExpressionConverter en ajoutant la ligne suivante à votre ResourceDictionary et en important l'espace de noms clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation dans votre définition de classe.

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

Dans l'ensemble, votre concepteur et votre code d'activité enfant doivent apparaître comme ci-dessous. Saisissez des valeurs dans chaque champ et observez la mise à jour des propriétés correspondantes.

<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>