QML : CRÉER UNE ZONE DE RECHERCHE MINGONE AVEC QML

 Bonjour,

Dans ce billet je vais vous montrer comment on peut créer une zone de recherche avec QML.

Avant de commencer voici à quoi ressemble la zone de recherche qu'on va essayer de créer ensemble :

Sans plus tarder on va commencer par ouvrir QtCreator et créer un nouveau projet.

Si vous ne savez pas comment  l'article Créer son premier programme en QML  est là  pour vous servir.

Vous devez récupérer les images qu'on va utiliser à partir d'ici. 

Passant maintenant  aux choses sérieuses.

Pour créer cette zone on va utiliser les éléments QML suivants :

1 - Rectangle  :  conteneur de nos autres éléments QML

2 - Image pour afficher l'image de l'arrière plan.

3 - Text pour qu'on puisse afficher le texte "Rechercher ..." lorsque la zone de texte(TextInput ) est vide

4 - TextInput pour afficher une seule ligne de texte modifiable.

5 - L'élément BorderImage  pour créer des bordures à partir d'images par mise à l'échelle .

 6 - Image qui sert comme bouton qui nous permet de vider la zone de texte.

On va commencer par créer un élément Rectangle qui ne sert de fenêtre où on va créer notre zone de recherche.

 code : QML

import QtQuick 2.0 //Importer les éléments QML  Rectangle{      id : fenetre  //id de l'élément il doit êtres unique      width : 400    //la largeur      height : 400  //longueur      color : 'green' //couleur du rectangle ou du background  }

On a créé  un rectangle vert très mouche :( , on peut ajouter une image comme background

pour régler ce problème :

Code : QML

import QtQuick 2.0 //Importer les éléments QML Rectangle{     id : fenetre  //id de l'élément il doit êtres unique     width : 400    //la largeur     height : 400  //longueur     color : 'green' //couleur du rectangle ou du background      Image{        id : background        source : 'images/background.jpg'     } }

On peut maintenant créer l’arrière plan de notre zone de recherche pour cela on va utiliser 

L’élément Rectangle comme suit :

Code : QML

import QtQuick 2.0 Rectangle{     id : fenetre  //id de l'élément il doit êtres unique     width : 400    //la largeur     height : 400  //longueur     color : 'green' //couleur du rectangle ou du background     Image{        id : background        source : 'images/background.jpg'     }     Rectangle {        id : backgroundText //id de l'élément        anchors.centerIn : parent //on centre notre zone de texte        width: 250        height: 30        color : "#CCCCCC";  //couleur du background de notre zone de texte        opacity : 0.7       //opacité du rectangle        radius : 4         //arrondis        z : 100     } }

Si vous exécutez ce code vous devrez avoir ce résultat :

Figure 1 : Fenêtre avec la zone de base

Rien de complet pour l'instant mais il ne reste pas beaucoup pour finir notre zone de recherche alors si vous voulez bien on va passer à l'étape suivante.

On va créer un élément "Text" pou pouvoir afficher "Rechercher ..." lorsque la zone de recherche est vide .

Voici le code complet depuis le début :

Code : QML

import QtQuick 2.0 //Importer les éléments QML Rectangle{     id : fenetre  //id de l'élément il doit êtres unique     width : 400    //la largeur     height : 400  //longueur     color : 'green' //couleur du rectangle ou du background     Image{        id : background        source : 'images/background.jpg'     }     Rectangle {        id : backgroundText //id de l'élément        anchors.centerIn : parent //on centre notre zone de texte        width: 250        height: 30        color : "#CCCCCC";  //couleur du background de notre zone de texte        opacity : 0.7       //opacité du rectangle        radius : 4         //arrondis        z : 100        Text {          id: texteArriere          /*           on positionne notre zone de texte par rapport           à son parent "backgroundText"          */          anchors {            left : parent.left; top : parent.top;            topMargin :5 ; leftMargin : 5          }          font.italic : true //on mit le texte en italic          font.pointSize : 11          color : "#666666" //couleur de texte          height :30          text: "Rechercher ..." //notre text          opacity: {            if(zoneText.text == "") // si l'input est vide on affiche              return 1;            else //sinon on afiche rien              return 0;          }        }     } }

Dans ce code j'ai ajouté un élément "Text" qu'on va utiliser pour afficher le texte "Rechercher..." lorsque le "TextInput" est vide.

Si vous exécuter ce code vous aurez une erreur  "ReferenceError: Can't find variable: zoneText" , parce que on 'a pas encore ajouté cet élément.

Pour afficher "Rechercher ..." on joue sur l'opacité de l'élément "Text".

Si le "TextInput" est vide on met l'opacité à 1 donc le texte  "Rechercher ..." sera affiché

sinon on met l’opacité à 0 et cette fois le texte  "Rechercher ..." disparaît .

C'est le temps pour ajouter notre élément "TextInput".

Code : QML

/*  cet élément nous permet d' affiche  une seule ligne de texte modifiable.  */  TextInput{    id: zoneText  //l'id de l'élément    anchors {      left : parent.left; top : parent.top;      topMargin :5 ; leftMargin : 5    }    width: parent.width //- clear.width - 12    height: 30    font.pointSize : 11  }

Ce code crée un élément de type  "TextInput" de largeur égale à la largeur de son parent  puis à l'aide de la propriété anchors on positionne l'élément à l'intérieur de l'élément "Rectangle" dont l'id est : "backgroundText".

Vous devez insérer ce code juste après l’élément 'texteArriere'.

Maintenant on peux mettre l'élément "Image" pour afficher une image cliquable ,cet élément nous permet de vider la zone du texte ,à l'aide de l'élément "MouseArea" qu'on doit insérer à l'intérieur de l’élément "Image" pour qu'on peut exécuter certains instructions lorsque l'utilisateur clique sur l'image , puis je dois vous dire une dernière chose c'est que l'image doit s'afficher lorsque la zone de texte ou le "TextInput" n'est pas vide et l’inverse dans le cas contraire, donc, on gère l'opacité de l'image dans ces cas.

Voici le code.

Code : QML

Image{    id :  clear  //l'id    source: "images/clear.png" //le chemin de l'image    anchors {      right:   parent.right; top : parent.top;      topMargin :7 ; rightMargin : 5    }    opacity: {      if(zoneText.text == "") // si l'input est vide        return 0;       //on change l'opacité à 0      else //sinon on doit afficher l'image        return 1;     }     MouseArea{  //on crée l'élément Zone de sourie pour          //qu'on puisse gérer l’évènement clique        anchors.fill : parent          // si on clique on ecrase le contenu de l'élément TextInput        onClicked: zoneText.text = "";     } }

Vous devez insérer ce code juste après  l'élément "zoneText ".

On doit modifier l'élément "zoneText " pour que la zone de l'écriture ne dépasse pas la positionne de l'image donc on doit réduire la taille de la zone :

Code : QML 

TextInput{    id: zoneText  //l'id de l'élément    anchors {      left : parent.left; top : parent.top;      topMargin :5 ; leftMargin : 5      }      width: parent.width - clear.width - 12      height: 30      font.pointSize : 11    }

Si exécutez votre code vous devez avoir ce resultat :

 Figure 2 : Zone de recherche vide  

Figure 3 : Zone de recherche avec du texte

Comme vous voyez lorsque la zone du texte est vide le texte 'Rechercher ... " est affiché et dans le cas contraire le bouton effacer(l’élément clear).

Il nous reste un seul problème c'est qu'on ne vois pas la différence entre la zone de recherche lorsqu'elle est active ou non.

pour régler cela on peut  utiliser l'élément "BorderImage" , on dois l'ajouter deux fois :

1- Pour afficher un border à partir d'une image lorsque la zone du texte n'est pas active.

2- Pour afficher un border à partir d'une image lorsque la zone du texte aura le focus.

Code : QML 

BorderImage {    source: "images/lineedit-bg.png"    width: parent.width; height: parent.height    border { left: 4; top: 4; right: 4; bottom: 4 }    opacity: 0.9  }  BorderImage {    source: "images/lineedit-bg-focus.png"    width: parent.width; height: parent.height    border { left: 4; top: 4; right: 4; bottom: 4 }    //visible seulement lorsque la zone du texte possède le focus    visible: zoneText.activeFocus    opacity: 0.9  }

Insérer ce code après l’élément 'texteArriere',exécutez votre code vous devez avoir ce résultat :

Figure 4 : Zone de recherche   

Figure 5 : Zone de recherche active

On a terminé la création de notre zone de recherche , vous pouvez récupérer le code à partir d'ici .