The Regex Tool

Voici un petit projet qui peut devenir grand et dont je suis assez satisfait.

Partant d’un constat simple sur la difficulté d’utiliser des regex et des patterns, il m’est venu à l’idée de remédier à cela une fois pour toute en créant un petit outil graphique permettant de tester ses propres regex en direct.
Cerise sur le gâteau, ce projet permettra aussi de mettre en lumière l’architecture MVVM.

 

  1. Manipulation des patterns
Pour commencer, créons simplement, un objet qui prend en entrée un texte et un pattern. En sortie nous attendrons un tableau donnant  le résultat du regex.
 class RegexModel
    {
       private String _pattern;
       private String _text;
 
        public RegexModel(String pattern, String text)
        {
            _pattern = pattern ?? String.Empty;
            _text = text ?? String.Empty;
        }
 
        public DataTable GetDataTable()
        {
            try
            {
                Regex regex = new Regex(_pattern);
                MatchCollection matches = regex.Matches(_text);
                DataTable table = new DataTable();
 
                //Contrôle la présence de résultat pour ce pattern
                if (matches.Count > 0)
                {
                    int i = 0;
                    //Ajout des noms de colonnes dans le DataTable
                    foreach (Group g in matches[0].Groups)
                    {
                        table.Columns.Add();
                        table.Columns[i].ColumnName = regex.GetGroupNames()[i];
                        i++;
                    }
 
                    //Insertion dans le DataTable des résultats
                    foreach (Match m in matches)
                    {
                        //Création d'une ligne de résultat
                        DataRow row = table.NewRow();
                        int j = 0;
                        foreach (Group g in m.Groups)
                        {
                            row[j] = g.Value;
                            j++;
                        }
                        //Ajout de la ligne dans le DataTable
                        table.Rows.Add(row);
                    }
                }
                return table;
            }
            catch (Exception)
            {
                return null;
            }
        }

Première étape terminée, notons l’utilisation de l’opérateur ?? qui permet d’effectuer l’ordre suivant:
Pour resultat = A ?? B;
Si la valeur A est différente de null alors resultat=A sinon resultat=B

  1. Interface Graphique
Notre outil (algorithmiquement parlant) étant opérationnel, intéréssons nous à faire une petite interface graphique. Elle est tout à fait perfectible et je vous invite vivement à travailler ici vos styles et dictionnaires de ressources!!!
 
        <!-- ZONE DE TEXTE DU PATTERN -->
 
            <label>Pattern :</label>
 
        <!-- ZONE DU TEXTE-->
        <label>Text:</label>
 
        <!-- ZONE DE RESULTAT DU DATATABLE-->
        <label>Resultat:</label>

Dans cette étape du projet, se trouve toute la puissance de l’architecture MVVM et du Databinding. Nous allons voir les principaux éléments qui la composent. Notre interface possède trois éléments majeurs, les deux TextBox Text, le Pattern et le DataGrid Grille.
Dedans est spécifié de la même façon le fonctionnement du databinding.

 Text="{Binding Path=TEXT,UpdateSourceTrigger=PropertyChanged,Mode=OneWayToSource}"
Path Nom de la variable contenant le texte ou le pattern
UpdateSourceTrigger Mode d’alerte lors d’une modification, ici pour toute modification du texte
OneWayToSource l’événement modification du texte doit se faire dans le sens Interface Graphique -> Objet
ItemsSource="{Binding Path=TABLE,UpdateSourceTrigger=PropertyChanged,Mode=OneWay}"

Pour notre grille, les paramètres sont compréhensibles de la même façon sauf que cette fois-ci le Mode devient OneWay,  l’alerte se fasse dans le sens Objet -> Interface graphique.

Pour résumer cette histoire de sens d’alerte:
L’utilisateur tape un texte ou un pattern dans l’interface, il faut en informer le moteur de notre outil
==> OneWayToSource.
Notre outil crée un nouveau DataTable résultat, il faut en informer notre Interface Graphique
==> OneWay.

  1. Vue-Modèle, l’élément unifiant le projet

Nous avons vu l’interface graphique,  le moteur,  la déclaration de notre databinding mais il faut encore les mettre en oeuvre. Pour cela, deux portions de code restent à venir. Dans un premier temps, notre dernier morceau d’architecture MVVM.
M ==> Modele OK
V ==> Vue OK
VM ==> Vue-Modèle maintenant!!!

Je vous laisse survoler le code juste ci-dessous.

class RegexViewModel : INotifyPropertyChanged
    {
        private String _text;
        private String _pattern;
        private DataTable _table;
 
        public String TEXT
        {
            get
            {
                return this._text;
            }
            set
            {
                if (value != this._text)
                {
                    this._text = value;
                    TABLE = getTable();
                }
            }
        }
        public String PATTERN
        {
            get
            {
                return this._pattern;
            }
            set
            {
                if (value != this._pattern)
                {
                    this._pattern = value;
                    TABLE = getTable();
                }
            }
        }
        public DataTable TABLE
        {
            get
            {
                return this._table;
            }
            set
            {
                if (value != this._table)
                {
                   this._table = value;
                    NotifyPropertyChanged("TABLE");
                }
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
        private DataTable getTable()
        {
            RegexModel rm = new RegexModel(this._pattern, this._text);
            return rm.GetDataTable();
        }
    }

Avec ce Vue-Modèle, nous mettons en place le fonctionnement d’alerte (Mode=OneWay etc…).
Interface Graphique -> Objet
La classe implémente l’interface INotifyPropertyChanged. Cela sert à déclarer un évenement lors de la modification d’une variable. Effectivement, nous avons besoin d’un événement pour prévenir l’interface graphique d’une modification de notre DataTable.
Objet -> Interface Graphique
Dans ce sens de communication, le databinding du code WPF est déjà en place. Il ne reste plus qu’a instancier notre Vue-Modèle pour le fournir comme DataContext à l’interface graphique. Voici une solution qui se place dans l’initialisation de notre Form.

 public partial class MainWindow : Window
    {
        RegexViewModel rvm;
        public MainWindow()
        {
            InitializeComponent();
            rvm = new RegexViewModel();
            this.Pattern.DataContext = rvm;
            this.Text.DataContext = rvm;
            this.Grille.DataContext = rvm;
        }
 
    }

Pour conclure, voici un écran de votre future application!!!

Comments are closed.