Champs et formulaires

Qt Quarterly est une revue trimestrielle électronique proposée par Nokia à destination des développeurs et utilisateurs de Qt. Vous pouvez trouver les versions originales.

Nokia, Qt, Qt Quarterly et leurs logos sont des marques déposées de Nokia Corporation en Finlande et/ou dans les autres pays. Les autres marques déposées sont détenues par leurs propriétaires respectifs.

Cet article est une traduction de l'article original écrit par Mark Summerfield paru dans la Qt Quarterly Issue 8.

Cet article est une traduction de l'un des tutoriels en anglais écrits par Nokia Corporation and/or its subsidiary(--ies), inclus dans la documentation de Qt. Les éventuels problèmes résultant d'une mauvaise traduction ne sont pas imputables à Nokia.

Les formulaires avec beaucoup de champs d'édition utilisent souvent une disposition en grille avec les étiquettes dans la première colonne et les champs d'édition dans la deuxième. Ceci apparaît attractif, sauf lorsque les champs n'acceptent qu'une petite quantité de texte - un ou deux caractères - la grille leur donne la même largeur qu'aux champs qui prennent une longue ligne de texte. Ceci prive les utilisateurs d'un repère visuel que des largeurs proportionnelles pourraient donner. Cet article fournit une solution simple à ce problème.

Voici la définition de la classe FixedLineEdit, sous-classe de QLineEdit qui permettra de paramétrer le nombre minimal et maximal de caractères visibles dans un champ d'édition. Ceci a déjà été fourni par Jake Colman, lecteur des Qt Quaterly.

    class FixedLineEdit : public QLineEdit
    {
        Q_OBJECT
        Q_PROPERTY(int minVisibleChars READ minVisibleChars WRITE setMinVisibleChars)
        Q_PROPERTY(int maxVisibleChars READ maxVisibleChars WRITE setMaxVisibleChars)
    
    public:
        FixedLineEdit(QWidget *parent, const char *name = 0)
            : QLineEdit(parent, name) {}
    
        int minVisibleChars() const { return minVisible; }
        int maxVisibleChars() const { return maxVisible; }
    
        void setMinVisibleChars(int count)
        {
            minVisible = count;
            setMinimumWidth(fontMetrics().width('W') * minVisible +
			    ((style().defaultFrameWidth() + 2) * 2));
        }
    
        void setMaxVisibleChars(int count)
        {
            maxVisible = count;
            setMaximumWidth(fontMetrics().width('W') * maxVisible +
			    ((style().defaultFrameWidth() + 2) * 2));
        }
    
    private:
        int minVisible;
        int maxVisible;
    };

Cette classe est définie entièrement dans le fichier d'en-tête fixedlineedit.h. Les fichiers qlineedit.h et qstyle.h doivent également être inclus. Jake utilise la lettre W pour la base de son calcul. Ainsi, la classe FixedLineEdit a un nombre minimal de caractères visibles fixé à deux, ce qui est suffisant pour afficher deux lettres W – et donc assez large pour afficher trois et même quatre caractères, en fonction de la police. Les applications utilisées pour afficher des caractères non latins devront utiliser un caractère plus approprié.

Maintenant que la sous-classe est créée, celle-ci peut être utilisée dans Qt Designer. L'approche la plus simple « Widget personnalisé » va être utilisée plutôt que la création d'un plug-in. Lancer Qt Designer et cliquer sur Tools > Custom > Edit Custom Widgets du menu Options. Cliquer sur le bouton New Widget et changer le nom de la classe en FixedLineEdit. Cliquer sur le bouton représenté par les points de suspension « … » pour lancer le navigateur de fichiers et choisir le fichier flxedlineedit.h. Changer les valeurs de taille à 100 pour la largeur et 25 pour la hauteur. Bien vérifier que la case à cocher Container Widget est décochée. Maintenant cliquer sur l'onglet Properties et ajouter deux nouvelles propriétés, maxVisibleChars et minVisibleChars, toutes deux de type int. Cliquer sur Close et c'est terminé.

Le widget FixedLineEdit apparaîtra maintenant dans la partie Custom Widgets de la barre d'outils. Il peut être ajouté dans un formulaire de la même manière qu'un autre widget et peut aussi modifier les propriétés de QLineEdit dont la classe FixedLineEdit a hérité. Qt Designer affiche une icône à la place de FixedLineEdit. Pour spécifier une icône précise, il faut créer un plugin : cette opération n'est pas difficile et est expliquée dans le manuel de Qt Designer.

La capture d'écran suivante montre l'utilisation de plusieurs widgets QLineEdit, la deuxième utilise plusieurs widgets FixedLineEdit. Les deux formulaires utilisent la même grille de présentation pour leurs étiquettes et champs de texte.

Le formulaire basé sur des widgets QLineEdit contient des widgets QLineEdit qui se sont étendus jusqu'à prendre toute la place disponible dans le formulaire.

Le formulaire basé sur des widgets FixedLineEdit dispose de valeurs identiques à celles du précédent. On a utilisé ici les propriétés de caractères (minVisibleChars-maxVisibleChars) : 30-40 pour le nom (Name), 1-1 pour le sexe (Sex), 10-15 pour la ville (City) et 2-2 pour l'état (State). Le widget FixedLineEdit peut être élargi lorsque le formulaire est agrandi, mais jusqu'à la taille spécifiée par maxVisibleChars. De la même façon, les widgets vont se réduire lorsque le formulaire est réduit, allant jusqu'à la taille spécifiée par minVisibleChars.

Au nom de toute l'équipe Qt, j'aimerais adresser le plus grand remerciement à Nokia pour nous avoir autorisés à traduire cet article !

Je tiens à remercier Thibaut Cuvelier pour ses conseils et Claude Leloup pour sa relecture.