Skip navigation.

digital-nation

Blog-note d'un informaticien procrastinate...

Posts tagged with "gui"

Interface utilisateur

, , , ...

Il y a peu j’ai twittéune pensée à brut d’une image connue :


La réponse de certain(e)s ne s’est pas fait attendre … Pour en arriver facilement à un futur dialogue.

Mais qu’en est-il en pratique… De ce que nous pouvons parler mais surtout faire.
Reprenons un peu brusquement :
Actuellement nous avons des interfaces utilisateurs qui ressemblent à ceci (comme le démontre l’image première) :


Que pouvons-nous constater ? Enormément de chose :

  • L’espace de la fenêtre est mal utilisé,
  • Les champs ne sont pas alignés,
  • Aucuns champs n’est renseigné comme obligatoire, (est-ce pour autant qu’il n’y a aucun contrôle et qu’au fait qu’on pousse sur Valider, cela nous renvoie la base complète des sociétés ?!!),
  • Les champs sont nombreux et non mis dans l’ordre, est-ce que l’ordre de tabulation est correct ?
  • Certains libellés ne sont pas affichés complètement…
  • Et bien d’autres tel : le nom des boutons n’est pas « significatif », pourquoi autant de bouton dans une fenêtre de recherche ? (peut-être faut-il alors repenser la recherche !)

Voyons maintenant ce que cela donnerait modifié !


Nous prenons en compte l’espace (coté gauche, coté droit, bas et espace des boutons), les champs sont alignés, sauf le premier qui est le requis afin d’attirer l’attention, en information est indiqué les champs optionnels, l’ordre de tabulation a été repensé… etc. etc.
En gros le formulaire est actuellement exploitable.

Mais… Pourquoi afficher les champs optionnels ? Ne peut-on pas les afficher uniquement sur demande ? Voyons cela :
  • Simplifions d’abord la fenêtre de recherche, que nous considérerons comme « normale » :

    Qu’avons-nous fait ? Suppression des champs inutiles, rajout d’un bouton permettant d’accéder à la recherche avancée (bien entendu chaque bouton dispose d’une infobulle !).

  • Par la suite, créons une nouvelle fenêtre de recherche avancée :

    Qu’avons-nous fait ? Simplement rajouté les champs de la fenêtre précédente… Et nous avons supprimé le bouton Annuler. Pourquoi disposer d’un bouton Annuler alors que nous demandons une recherche avancée ? Par contre nous gardons bien le bouton pour accéder à la recherche « normale ».


Est-ce pour autant la meilleure solution ?
Certainement pas, il n’y a pas de solution « standard », il n’y a qu’une approche supposée de l’utilisateur. Tout le monde ne peut pas le partager et tout le monde ne regarde pas l’infobulle par exemple avant de cliquer sur un bouton (et donc on peut se poser la question faut-il un bouton Annuler dans la recherche avancée ?) etc.

En gros l’ergonomie est une chose aussi complexe que la programmation dont elle dépend. Une fausse action ou une fausse idée, ou un bouton de trop ou trop, un changement flagrant dans les habitudes de l’utilisateur ne font pas avancer le schmilblik. Loin de là, il y aura un certain recul envers l’application.

A suivre avec un prochain Twunch.

AutoIt : mise à jour d'une interface graphique

, , , ...

Rare sont les fois où je répond par e-mail ou même que je répond par l'interface de mon blog à un problème de script dans AutoIt (ou même tout autre type de problème !). Toutefois ici la question était intéressant : comment mettre à jour une interface graphique ?

Je dirais simplement en utilisant la combinaison de GUICtrlSetData, GUICtrlRead, GUICtrlSetState ! Et pour pouvoir démontrer cela, pourquoi ne pas le faire :

  • Cacher un contrôle : utilisation de GUICtrlSetState :
    GUICtrlSetState($lbl_LabelInvisible, $GUI_HIDE)
    

  • Lire les données d'un contrôle : utilisation de GUICtrlRead :
    GUICtrlRead($btn_Test) = "M.A.J. Terminée"
    

  • Définir les données d'un contrôle : GUICtrlSetData :
    GUICtrlSetData($btn_Test, "Exit")
    



Pour faire un décompte, il suffit donc d'appliquer ce qui est décrit ci-dessus et de l'inclure dans une boucle :
Dim $i
$i = 5
While $i > 0
GUICtrlSetData($btn_Test, "M.A.J. dans " & $i)
$i = $i - 1
Sleep(1000)
WEnd
If $i = 0 Then 
GUICtrlSetData($btn_Test, "M.A.J. Terminée")
EndIf


Vous pouvez aussi définir un style à un contrôle en utilisant l'apendice des styles étendus (exemple une couleur CUICtrlSetColor(controle,couleur)).

Le script complet :
#include <GUIConstants.au3>
#Region ### START Koda GUI section ### Form=
$fm_MonInterface = GUICreate("Mon interface", 450, 245, -1, -1)
$btn_Test = GUICtrlCreateButton("Test", 320, 195, 120, 40, 0)
GUICtrlSetCursor ($btn_Test, 0)
$gp_MAJGUI = GUICtrlCreateGroup(" Mise à jour d'un interface graphique ", 10, 30, 430, 155)
$lbl_StatusInitial = GUICtrlCreateLabel("Status initial", 25, 55, 250, 20)
$lbl_LabelInvisible = GUICtrlCreateLabel("Label apparut pour la mise à jour. Le bouton Test à un décompte", 25, 105, 350, 20)
GUICtrlSetState($lbl_LabelInvisible, $GUI_HIDE)
GUICtrlCreateGroup("", -99, -99, 1, 1)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###
While 1
$nMsg = GUIGetMsg()
Switch $nMsg
Case $GUI_EVENT_CLOSE
Exit
Case $btn_Test
If GUICtrlRead($btn_Test) = "M.A.J. Terminée" Then
MsgBox(0, "Information", "La mise à jour de l'interface à déjà été effectuée")
GUICtrlSetData($btn_Test, "Exit")
Else 
If GUICtrlRead($btn_Test) = "Exit" Then Exit
_majCtrl()
EndIf
EndSwitch
WEnd

Func _majCtrl()
GUICtrlSetState($lbl_LabelInvisible, $GUI_SHOW)
GUICtrlSetData($lbl_StatusInitial, "Texte mis à jour et mis en rouge")
GUICtrlSetColor($lbl_StatusInitial, 0xff0000)
Dim $i
$i = 5
While $i > 0
GUICtrlSetData($btn_Test, "M.A.J. dans " & $i)
$i = $i - 1
Sleep(1000)
WEnd
If $i = 0 Then 
GUICtrlSetData($btn_Test, "M.A.J. Terminée")
EndIf
EndFunc

AutoIt : créer un sondage

, , , ...

Dans les très petites entreprises, déployer un système de sondage est assez fastidieux... Mais surtout onéreux.

Toutefois, il y a des moyens gratuits et puis il y a le bricolage par le développement d'un petit outil... Regardons comment cela se passe !

Définissons en premier temps les propriétés de l'exécutable
; *********************************************************
; Propriétés de l'exécutable
; *********************************************************
#Region
#AutoIt3Wrapper_Version=dev
#AutoIt3Wrapper_outfile=eiq.exe
#AutoIt3Wrapper_Compression=4
#AutoIt3Wrapper_Res_Description=Logiciel d'enquête
#AutoIt3Wrapper_Res_Fileversion=0.0.1.1
#AutoIt3Wrapper_Res_Fileversion_AutoIncrement=y
#AutoIt3Wrapper_Res_LegalCopyright=© Groumphy 2008
#AutoIt3Wrapper_Res_Language=2060
#AutoIt3Wrapper_Res_Field=Company|Privé
#AutoIt3Wrapper_Icon=monIcone.ico
#EndRegion


Les obligatoires :
#NoTrayIcon
#include <GUIConstants.au3>


Les variables
; *********************************************************
; Déclaration des variables
; ********************************************************* 
Dim $s_fichierINI = "parametres.ini"
Dim $s_fichierResultat = "enquete.txt"
Dim $s_lectureSectionUtilisateur = IniReadSection($s_fichierINI, "UTILISATEURS")
Dim $i


L'appel des fonctions...
_version("DEV")
_verificationFichierResultat()


Les fonctions...

Vérifie que le nom d'utilisateur se trouvant dans le fichier INI est bien de valeur Y (pour yes), si la valeur est bien Y, lance la GUI pour l'enquête...
Func _routineIdentification()
For $i = 1 To $s_lectureSectionUtilisateur[0][0]
If $s_lectureSectionUtilisateur[$i][0] = @UserName Then
If $s_lectureSectionUtilisateur[$i][1] = "Y" Then _GUI()
Else
;MsgBox(0, "", "Ne rien faire")
EndIf
Next
EndFunc


La GUI principale.
Elle affiche deux labels, une combox qui permet un choix, ce choix est récolté et placé dans un fichier texte.
Func _GUI()
MsgBox(0, "", "lancement GUI")
#Region ### START Koda GUI section ### Form=i:\script\en développement\enquete satisfaction it\gui_enqueteinformatique.kxf
GUICreate("Enquête informatique", 272, 219, 246, 115)
GUICtrlCreateLabel("Afin d'optimiser son efficacité, le service informatique ", 10, 10, 254, 17)
GUICtrlCreateLabel("vous demande de répondre à la question suivante :", 10, 30, 256, 17)
GUICtrlCreateGroup(" Qualité du support : ", 25, 55, 225, 105)
GUICtrlCreateLabel("Veuillez choisir dans la liste déroulante.", 35, 75, 185, 17)
GUICtrlCreateLabel("Quelle est la qualité du support donné ?", 35, 95, 190, 17)
$cbx_ChoixListeDeroulante = GUICtrlCreateCombo("Sélectionnez votre choix", 35, 115, 200, 25, -1, -1)
GUICtrlSetData($cbx_ChoixListeDeroulante, "Excellente|Très bonne|Bonne|Médiocre|Très mauvaise")
GUICtrlSetTip($cbx_ChoixListeDeroulante, "Faite votre choix dans la liste déroulante")
GUICtrlSetCursor ($cbx_ChoixListeDeroulante, 0)
GUICtrlCreateGroup("", -99, -99, 1, 1)
$btn_Valider = GUICtrlCreateButton("&Valider", 160, 175, 100, 33, 0)
GUICtrlSetTip($btn_Valider, "Valider l'enquête informatique")
GUICtrlSetCursor ($btn_Valider, 0)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###
While 1
$nMsg = GUIGetMsg()
Switch $nMsg
Case $GUI_EVENT_CLOSE
Exit
;Case $cbx_ChoixListeDeroulante
Case $btn_Valider
$cbx_ChoixListeDeroulante = GUICtrlRead($cbx_ChoixListeDeroulante)
If $cbx_ChoixListeDeroulante = "Sélectionnez votre choix" Then
MsgBox(0 + 32, "Information", "Vous n'avez effectué aucun choix dans la liste déroulante.")
Else
MsgBox(0, "Tracking", "Choix : " & $cbx_ChoixListeDeroulante)
GUISetState(@SW_HIDE)
; Lancer l'écriture dans un fichier texte !!
Dim $s_OuvertureFichier
$s_OuvertureFichier = FileOpen($s_fichierResultat, 1)
FileWriteLine($s_OuvertureFichier, @UserName & @TAB & $cbx_ChoixListeDeroulante)
FileClose($s_OuvertureFichier)
_ChangeValeurINI("N")
MsgBox(0, "", "Valeur changée en N, sortie")
EndIf
EndSwitch
WEnd
EndFunc


Une fonction permettant de changer la valeur du nom d'utilisateur... Le plus simple possible.
Func _ChangeValeurINI($s_Valeur)
IniWrite($s_fichierINI, "UTILISATEURS", @UserName, $s_Valeur)
EndFunc


Fonction vérifiant la présence des fichiers obligatoires...
Func _verificationFichierResultat()
If NOT FileExists($s_fichierResultat) Then 
MsgBox(0, "Erreur", "Pas de fichier résultat !")
Exit
ElseIf NOT FileExists($s_fichierINI) Then
MsgBox(0, "Erreur", "Pas de fichier d'initialisation")
Exit
Else
_routineIdentification()
EndIf
EndFunc


Une fonction Goonie pour débuter et vérifier l'état d'avancement de la fonction...
Func _version($s_typeVersion)
If $s_typeVersion = "DEV" Then
$s_typeVersion = "Le logiciel lancé est en devélopement et est présenté à titre d'idée. V.DEV"
ElseIf $s_typeVersion = "ALPHA" Then
$s_typeVersion = "Le logiciel lancé est en développement et nécessite encore des améliorations " & @CR & _
"toutefois il est parfaitement exploitable. V.ALPHA"
ElseIf $s_typeVersion = "BETA" Then
$s_typeVersion = "Le logiciel lancé est en version de test et nécessite encore des corrections " & @CR & _
"Merci de faire un feedback à xxxx. V.BETA"
ElseIf $s_typeVersion = "PROD" Then
$s_typeVersion = ""
EndIf
If NOT $s_typeVersion = "" Then
MsgBox(0 + 64, "Information", $s_typeVersion)
EndIf
EndFunc


Simple et efficace. C'était une simple idée. Mais elle est fonctionnelle. C'est le principal.

Mais que contiennent les autres fichiers ?
Le fichier INI :
[UTILISATEURS]
USER1=Y
USER2=Y
# on continue les utilisateurs au fur et à mesure, 
# seul le login compte. La valeur N ne fera aucun effet sur la fonction


Le fichier résultats comportera les valeurs suivantes :
USER1 (espace blanc, tabulation...) CoteDonnées (ici Médiocre, bonne, excellente...)
USER2 Bonne
USER3 Excellente


Les résultats du fichier texte sont utilisables dans un tableur, une base de données, etc.
Pour lancer l'enquête, il faut placer simplement un appel dans le NETLOGON pourquoi pas...

Qu'en pensez-vous ?

AutoIt : interface conviviale

, ,

AutoIt dans sa version 3 permet de faire des interfaces graphiques. Ce n’est un secret pour personne.
Toutefois il y a des leçons à tirer sur les GUI (interface graphique) afin de les rendre conviviales.
Passons en revue quelques méthodes simples.
Créons une feuille.
#include <GUIConstants.au3>
$GUI_NomFeuille = GUICreate("Nom de la feuille", 340, 210, -1, -1)
GUISetState(@SW_SHOW)

Que pouvons-nous constater ?
  1. nous utilisons des valeurs rondes pour la dimension de la feuille ;
  2. nous laissons l’emplacement de la feuille par défaut ;
  3. la feuille est nommée d’un nom compréhensible de l’endroit où elle se trouve ou de l’action qu’elle mène (exemple : Aide si c’est la feuille Aide etc.)

Identiquement à une interface web, nous pouvons rajouter un (des) menu(s).
$mn_Fichier = GUICtrlCreateMenu("&Fichier")
$ssMn_Ouvrir = GUICtrlCreateMenuItem("&Ouvrir", $mn_Fichier)
$ssMn_Quitter = GUICtrlCreateMenuItem("&Quitter", $mn_Fichier)
$MenuItem1 = GUICtrlCreateMenu("&Aide")
$ssMn_APropos = GUICtrlCreateMenuItem("A &propos", $MenuItem1)
$ssMn_Aide = GUICtrlCreateMenuItem("A&ide", $MenuItem1)

Que pouvons-nous remarquer ?
  1. nous utilisons des noms de menu dit « classique » (tel Fichier, A propos) ;
  2. les sous-menus sont eux aussi de noms « classique » ;
  3. chaque menu et sous-menu dispose d’une clé d’accès (éperluette devant la lettre servant de clé d’accès) ;
  4. les menus sont placés dans un ordre logique rappelant les logiciels les plus connus (par exemple Fichier suivis de Editions, suivis de Affichage, suivis de A propos/Aide etc.) ;

Une interface graphique permet la plupart du temps de faire de nombreuses actions. Il est généralement conseillé de grouper les actions similaires ou de séparer les types d’actions.
Cela se fait généralement par un groupe.
Créons en un :
$Gp_GroupeAction = GUICtrlCreateGroup(" Groupe de l'action : ", 10, 10, 320, 65)
GUICtrlCreateGroup("", -99, -99, 1, 1)

Nous pouvons dire d’emblée les choses suivantes :
  1. le groupe est créé et fermé ;
  2. des valeurs rondes sont utilisées sur le groupes ;
  3. des valeurs logiques sont utilisées pour placer le groupe mais aussi pour déterminer sa largeur (ainsi je place mon groupe à 10 pixels du bord de la feuille mais je sais aussi que sa fin sera « amputée » de 10 pixels du bord droit de la feuille ; ce qui nous fait la largeur de la GUI [340] soustraite des 10 du bord gauche et du bord droit ce qui nous donne 320 en largeur) ;

Dans le groupe nous pouvons placer différents éléments. Notamment des « labels » et des boutons qui permettent de faire des actions.
 $btn_Ouvrir = GUICtrlCreateButton("&Ouvrir", 200, 32, 110, 30, 0)
GUICtrlSetTip($btn_Ouvrir, "Ouvrir un fichier dans la mémoire")
GUICtrlSetCursor ($btn_Ouvrir, 0)
$lbl_BtnOuvrir = GUICtrlCreateLabel("Ouvrir un fichier dans la mémoire", 20, 40, 160, 20)

Ici aussi quelques petits détails doivent nous sauter aux yeux :
  1. nous utilisons toujours des valeurs rondes ;
  2. les contrôles d’actions disposent d’une infobulle ;
  3. les contrôles d’actions disposent d’un autre curseur que celui de l’interface graphique ;
  4. pour déterminer les infobulles et le curseur nous n’utilisons pas la valeur par défaut (égale à -1) mais bien le nom de la variable qui détermine le contrôle ;

Les boutons placés en bas de la GUI, hors de tout groupes, non accompagné de label, etc. seront les boutons généraux (par exemple : Quitter, Aide, etc.) et bien souvent repris dans le menu Fichier.

Comme vous l’aurez compris, pour avoir une interface graphique agréable, l’homogénéité devra être présente, l’accessibilité tout autant (via les clés d’accès) etc.

En parlant d’accessibilité, il est bon de rappeler qu’il est correct de mettre des données incorrectement introduite dans une autre couleur… Toutefois qui ne vous dit pas que la personne qui utilise votre script ne confond pas les couleurs ?

Il serait tout aussi correct (par exemple) d’utiliser la couleur et des astérisques pour informer que les données ne sont pas correctes.

Nous pourrions par exemple utiliser une routine de ce type sur un Input :

Création de l’Input
 $gp_GroupeAction2 = GUICtrlCreateGroup(" Encodage du nom : ", 10, 85, 320, 65)
$btn_Verifier = GUICtrlCreateButton("&Vérifier", 200, 105, 110, 30)
GUICtrlSetTip(-1, "Vérifier les données encodées")
GUICtrlSetCursor (-1, 0)
$ipt_EncoderNom = GUICtrlCreateInput("Encoder votre nom", 20, 110, 170, 20)
GUICtrlSetTip(-1, "Encodez votre nom et poussez par la suite sur le bouton Vérifier")
GUICtrlCreateGroup("", -99, -99, 1, 1)

La routine de contrôle
Case $btn_Verifier
If GUICtrlRead($ipt_EncoderNom) <> "pwouet" Then
Dim $tmp = GUICtrlRead($ipt_EncoderNom)
GUICtrlSetData($ipt_EncoderNom, "***" & $tmp & "***")
GUICtrlSetColor($ipt_EncoderNom, 0xff0000)
GUICtrlSetData($btn_Verifier, " => Revérifier")
GUICtrlSetColor($btn_Verifier, 0xff0000)
Else
MsgBox(0 + 64, "Information", "Données encodées correcte.")
EndIf

Il est bon de retenir que ce qui s’applique sur le web, s’applique sur les GUI… Tous les trucs, astuces, modes sont bons pour pouvoir donner une « consistance » à une interface graphique !

AutoIt : les clés d'accès

, , , ...

A l'image d'un site internet, une interface graphique doit pouvoir facilement se manipuler au clavier.
Il existe donc quelques trucs et astuces de pouvoir intégrer dans votre interface graphique des « clés d'accès », des ordres de tabulations etc.

Les différents contrôles permettant d'être activés au clavier sont les suivants : GUICtrlCreateMenu (pour la création d'un menu), GUICtrlCreateMenuItem (pour un élément d'un menu précédemment créé), GUICtrlCreateRadio, GUICtrlCreateTab (pour l'interface contenant les tabulations), GUICtrlCreateTabItem (pour les différents éléments de tabulation), GUICtrlCreateButton et GUICtrlCreateCheckBox.

Par la suite dans l'interface graphique il y a moyen de déterminer un ordre de tabulation sur les contrôles.

Voyons comment faire en détail :
$filemenu = GUICtrlCreateMenu ("&File")
$fileitem = GUICtrlCreateMenuitem ("&Open",$filemenu)


Cela se fait simplement et uniquement via l'esperluette ! En effet, identiquement au Visual Basic, Visual Basic for Application, la clé ou l'entrée d'accès au contrôle se fait de manière identique. Il faudra pour l'avoir (par exemple ci-dessus le menu) pousser sur la touche Alt de votre clavier qui mettra en valeur (soulignement) les lettres permettant l'accès à la touche, au bouton, au menu etc.

Concernant l'ordre de tabulation, il est paramétrable dans le Koda Interface Designer... Lorsque vous éditez les propriétés ou lorsque votre interface utilisateur (GUI) contenant les contrôles est terminée, faîtes-y un simple clic avec le bouton droit de la souris et choisissez l'option Tab Order.

Pourquoi créer une telle opérationnalité ? Comme vous le savez la rapidité du clavier n'est plus à démontrer, cela donnera un gain de rapidité ; mais aussi du professionnalisme à votre interface de script / application. Mais le plus important reste l'utilisabilité ainsi que l'accessibilité de celle-ci... Votre but premier.

AutoIt

, , , ...

Je l'avais promis, voici le « feedback » du pourquoi du comment que j'utilise AutoIt.

Le but initial était d'avoir un langage de script performant et non dépendant de l'éditeur du système d'exploitation Microsoft (sinon j'aurais pris VBS) afin d'automatiser simplement certaines actions sur le PC, le réseau, l'AD.

J'ai bien entendu cherché divers languages (aussi au niveau BATCH), mais je suis rapidement tombé sur le charme de AutoIt car il permettais non seulement d'être son propre language, mais aussi de la combiner avec d'autres (notament le VBS, les DLL et les ActiveX).

Je l'ai donc installé sur un PC portable de type ACER 1700 sous Microsoft Windows XP et l'installation s'est déroulée sans incident particulier. D'ailleur les installeurs sont fait via des logiciels libres (NSIS de NullSoft). Le language se « décompose » en 3 ou 5 paquets selon ce que l'on désire : le language seul (version production et beta) avec son éditeur (SciTE), le language (production et beta), l'éditeur (SciTE), le CVS (CVSWrapper Add-on) accompagné de Tortoise et le dernier package WinMerge qui permet de faire les comparaisons de fichiers.
J'ai choisis en premier temps la « version 3 paquets », et suis passé rapidement à la version 5 paquets car je la trouvais très pratique !

L'éditeur SciTE remplit parfaitement son role avec une aide syntaxique, une aide (fichier CHM) relié à la touche F1, etc. et se montre très (voir trop) complet (mais c'est aussi personnalisable). Bien entendu les autres logiciels sont parfaitement intégré et s'ouvrent en nouvelle fenêtre ; un petit inconvéniant toutefois devant la multitude de fenêtre.

Il a parfaitement remplis ses fonctions jusqu'à maintenant mais les a aussi remarquablement dépassé car dans sa v3 (actuelle) il permet d'avoir des GUI et donc de faire des applications complètes (exécutable etc.).

Je le considère donc autrement qu'un language script mais bien comme un language complet ! Et je ne compte pas m'en séparer de si tôt !
December 2009
M T W T F S S
November 2009January 2010
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31