Modifier un tableau dans une interface graphique

 
Il est possible d'importer des tableaux dans une face avant à l'aide de App Designer. On peut ajouter un peu plus de flexibilité en permettant à l'utilisateur de modifier les données de ce tableau importé directement sur la face avant.

A partir de l'exemple précédent, tous les composants crées ne changent pas. Nous allons d'abord préparer le tableau pour qu'il puisse accepter les modifications lorsque l'interface est en cours d'exécution:

Cliquer sur l'objet Tableau de la face avant, puis sélectionner ce bouton:

Ensuite cocher les deux cases ci-après:

Les titres des colonnes peuvent aussi être changés directement sur l'interface graphique. Il suffit de cliquer sur chacun des titres puis modifier le nom.

Dans le code source nous allons effacer tous les callbacks; seule la variable partagée tuto_table restera.

Les callbacks:

Callback du bouton Importer:

Il ne change pas par rapport aux exemples précédents.

Le fichier relevé distance.xlsx est importé dans l'objet tableau UITable.

Callback du bouton Tracer

        % Button pushed function: TracerButton
        function TracerButtonPushed(app, event)
            x = table2array(app.tuto_table(:,"Distance(cm)"));
            y = table2array(app.tuto_table(:,"Tension(V)"));
            plot(app.UIAxes,x,y);
        end 

La première et la deuxième colonne du tableau importé sont stockées respectivement dans la variable x en abscisses, et y en ordonnées.
Puis la représentation graphique est réalisée à l'aide de la fonction prédéfinie plot().

Callback du tableau
Puisque le tableau peut subir des modifications de la part de l'usager de l'interface graphique, un callback est aussi créé pour lui à cet effet.

 % Display data changed function: UITable
        function UITableDisplayDataChanged(app, event)
            app.tuto_table = app.UITable.DisplayData;            
        end

Ce callback exerce une action en cas de chagement des valeurs du tableau; à savoir écrire les données du tableau une fois que celui-ci a été modifié, dans la variable partagée tuto_table.

Il suffit d'éxecuter le programme, changer les valeurs du tableau puis observer les modifications sur le graphique.

La vidéo ci-après résume les étapes mises en oeuvre pour permettre à l'utilisateur de pouvoir modifier le tableau directement dans son interface graphique:

D'autres actions sont aussi possibles; par exemple, on peut après modifications permettre à l'utilisateur d'exporter le tableau modifié vers un fichier tableur Excel par exemple.

Conclusion

Avec une prise en main vraiment aisée, et un comportement interactif App Designer peut servir non seleuement pour la création d'interfaces utilisateurs professionnelles, mais aussi comme outil d'aide pour l'apprentissage à la création d'interfaces graphiques.

JtBB

Ressources : https://www.mathwoks.com

MATLAB, App Designer, ainsi que tous les logos et images publiées dans cet article sont des marques déposées de la société Mathworks.