Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Programmation > Interface Graphique > [Qt] QScintilla > Lecture du tutoriel

[Qt] QScintilla

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avatar
Auteur : Eclyps
Note : 18 / 20 (5 votes)
Visualisations : 2 587

Plus d'informations Plus d'informations
QScintilla

Vous suivez les tutoriels de Qt, vous voulez faire un éditeur de texte, mettre en couleur Zero Class Generator, ou mettre en couleur un texte sans utiliser QSyntaxHighlighter trop compliqué, et avec des bugs de couleur quelquefois ?
QScintilla est là pour vous !

Image utilisateur
Exemple


Image utilisateur
Sommaire du chapitre :
Icône du chapitre

Téléchargement -> installation

Pour télécharger QScintilla (qui est placé sous licence GNU GPL), il faut se rendre sur le site de son créateur : Riverbank.
Dans le menu Software -> QScintilla2 Download.
Prenez le fichier qui convient à votre OS dans Source Packages.

Pour les Linuxiens vous pouvez aussi télécharger le paquet : libqscintilla2-dev (merci à Kycs pour cette information)

Une fois téléchargé, extrayez le fichier.

QScintilla peut s'installer en librairie dynamique (dll pour Windows) ou librairie statique (.a, .lib).
Personnellement je préfère les librairies statiques, car on n'a pas besoin de mettre des fichiers supplémentaires.
Je vais donc vous apprendre à installer QScintilla en librairie statique.

Normalement QScintilla est installé.

QsciScintilla

Avant de commencer à coder : LA DOC !
QScintilla a une documentation aussi bien conçue que celle de Qt.

Ensuite pour mettre de la couleur à un texte, on ne va pas utiliser l'habituel QTextEdit mais un QsciScintilla !
Pour commencer à coder :

L'include :


Code : C++
1
#include <Qsci/qsciscintilla.h>


Puis l'objet :


Code : C++
1
QsciScintilla (QWidget *parent=0)


On peut tester QsciScintilla dans un petit code avec juste un "main".
Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
#include <QApplication>
#include <Qsci/qsciscintilla.h>

int main(int argc, char* argv[])
{
    QApplication app(argc, argv);

    QsciScintilla *scintilla = new QsciScintilla;
    scintilla->show();

    return app.exec();
}

Pas très compliqué à comprendre normalement.

On compile.
Code : Console
qmake -project
qmake
make


Et que voit-on ? Une erreur (fallait même pas s'en douter -_-') !
Il faut linker la librairie QsciScintilla.

Donc on ouvre le .pro et on ajoute avant # Input


On refait :
qmake
make

Pas qmake -project sinon il faudra re-linker QScintilla

Et on obtient un truc ni très joli ni très beau :
Image utilisateur
(Oui je sais j'aime les noms de fenêtre très beaux.)


On a beau s'acharner à marquer int void ou char rien ne se colorie.
Normal, pour que ce soit encore mieux il y a des classes pour colorier un QsciScintilla !

QsciLexer enfin de la couleur

Ho j'ai fait une rime :-° !
Comme je l'ai dit dans la dernière partie, il y a plusieurs classes pour colorier un QsciScintilla : il y en a un peu pour tous les langages utilisés (je ne parle pas de Ook) :
  1. Bash,
  2. Batch,
  3. CMake,
  4. CPP,
  5. CSharp,
  6. CSS,
  7. D,
  8. Diff,
  9. HTML,
  10. IDL,
  11. Java,
  12. JavaScript,
  13. Lua,
  14. Makefile,
  15. Perl,
  16. POV,
  17. Properties,
  18. Python,
  19. Ruby,
  20. SQL,
  21. TeX,
  22. VHDL.

Dans QScintilla l'objet pour colorier la syntaxe d'un QsciScintilla s'appelle un lexer.

Le lexer de C++ est : QsciLexerCPP .
Le fichier à inclure est donc :
#include<Qsci/qscilexercpp.h> .

Pour le langage Java c'est pareil :
Le lexer est : QsciLexerJava .
Et le fichier à inclure est :
#include<Qsci/qscilexerjava.h> .

Pour tous les autres langages aussi c'est pareil.


Pour attribuer un lexer à un QsciScintilla il faut utiliser la méthode
virtual void QsciScintilla::setLexer (QsciLexer *lexer=0) .

On va tester ça dans un petit code (essayer de le faire tout seuls pour l'entrainement :p ):
Secret (cliquez pour afficher)
Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
#include <QApplication>
#include <Qsci/qsciscintilla.h>
#include <Qsci/qscilexercpp.h>

int main(int argc, char* argv[])
{
    QApplication app(argc, argv);

    QsciScintilla *scintilla = new QsciScintilla;
    QsciLexerCPP *lexerCPP = new QsciLexerCPP;

    scintilla->setLexer(lexerCPP);
    scintilla->show();

    return app.exec();
}


Cette fois-ci on se retrouve avec ça :
Image utilisateur


Il est aussi possible de modifier les couleurs des lexers.
Quand on va sur la documentation de QsciLexerCPP, dans Public Types il y a une énumération :
Code : Autre
1
2
3
4
5
6
7
Default = 0, Comment = 1, CommentLine = 2,
CommentDoc = 3, Number = 4, Keyword = 5,
DoubleQuotedString = 6, SingleQuotedString = 7, UUID = 8,
PreProcessor = 9, Operator = 10, Identifier = 11,
UnclosedString = 12, VerbatimString = 13, Regex = 14,
CommentLineDoc = 15, KeywordSet2 = 16, CommentDocKeyword = 17,
CommentDocKeywordError = 18, GlobalClass = 19


En fait, cette énumération contient tous les mots que l'on peut colorer (je ne mets la traduction que des plus utiles) :

Pour changer la couleur il faut utiliser la méthode :
virtual void setColor (const QColor &c, int style=-1)

On peut prendre du temps pour choisir la couleur avec QColor, mais nous on va faire vite avec les énumération de Qt.
Exemple pour avoir les mots-clés violets :
Code : C++
1
2
QsciLexerCPP lexer;
lexer.setColor(Qt::magenta, QsciLexerCPP::Keyword);


Juste avant de quitter : si on regarde la documentation du lexer de Java, on s'aperçoit qu'il n'y a pas d'énumération, un petit conseil : regardez toujours les classes parentes (Inherits).

Les plus de QsciScintilla

QsciScintilla ressemble beaucoup à QTextEdit, mais il y a quelques différences.

setPlainText n'existe pas dans QsciScintilla, on va utiliser à la place setText .

On peut aussi mettre le numéro de la ligne dans la marge avec :
virtual void setMarginLineNumbers(int margin, bool lnrs) .

margin c'est le numéro de la marge (oui on peut en mettre plusieurs mais ce n'est pas utile).
lnrs c'est si on affiche la marge ou pas.

On va tester ça (une fois de plus essayez de faire le code tout seuls) :
Secret (cliquez pour afficher)
Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
#include <QApplication>
#include <Qsci/qsciscintilla.h>
#include <Qsci/qscilexercpp.h>

int main(int argc, char* argv[])
{
    QApplication app(argc, argv);

    QsciScintilla *scintilla = new QsciScintilla;
    QsciLexerCPP *lexerCPP = new QsciLexerCPP;
    
    scintilla->setLexer(lexerCPP);
    scintilla->setMarginLineNumbers(1,true);
    scintilla->show();

return app.exec();
}

Image utilisateur
Résultat


Par défaut la marge n'est pas très large, on peut à peine entrer 10 lignes.
Heureusement que setMarginWidth existe.
Sur cette méthode il y a une petite surcharge :
virtual void setMarginWidth (int margin, int width)

width c'est la largeur en pixel de la marge.

virtual void setMarginWidth (int margin, const QString &s)

On se dit : "qu'est-ce que fait une chaine dans la largeur d'une marge o_O ?".
En fait c'est la largeur en caractère (il faut toujours mettre un caractère en plus).
Exemple : setMarginWidth(1, "----")

Ce qui se traduit par "je veux que la marge 1 fasse 3 caractères de large" (toujours un caractère en plus).

La 2ème est la meilleure de mon point de vue :p .

On teste ça :
Secret (cliquez pour afficher)
Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
#include <QApplication>
#include <Qsci/qsciscintilla.h>
#include <Qsci/qscilexercpp.h>

int main(int argc, char* argv[])
{
    QApplication app(argc, argv);

    QsciScintilla *scintilla = new QsciScintilla;
    QsciLexerCPP *lexerCPP = new QsciLexerCPP;

    scintilla->setLexer(lexerCPP);
    scintilla->setMarginLineNumbers (1, true);
    scintilla->setMarginWidth(1, "----");
 // scintilla->setMarginWidth(1, 50);
    scintilla->show();

    return app.exec();
}

Image utilisateur
Résultat


Il existe aussi plein de méthodes utiles et inutiles, je ne vais pas toutes vous les montrer mais si vous voulez les connaitre allez sur la doc de QsciScintilla.

Exercice

Énoncé


Vous connaissez le TP ZeroClassGenerator ? Quand on fait la génération on obtient un beau code pas coloré. Vous savez ce qu'il vous reste à faire -_- ?
Mais avec quelque consignes en plus. Je veux que vous coloriez les :


Et que vous fassiez une marge de taille correcte avec le numéro des lignes.

Le résultat devrait être :
Image utilisateur

Correction



Secret (cliquez pour afficher)

Je mets juste le code de FenCodeGenere.cpp et FenCodeGenere.h pour le reste, il n'y a pas besoin de QsciScintilla donc ça sert à rien que je le mette.

FenCodeGenere.h


Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
#ifndef HEADER_FENCODEGENERE
#define HEADER_FENCODEGENERE

#include <QtGui>
#include <Qsci/qsciscintilla.h>
#include<Qsci/qscilexercpp.h>

class FenCodeGenere : public QDialog
{
public:
    FenCodeGenere(QString &code, QWidget *parent);

private:
    QsciScintilla *codeGenere;
    QsciLexerCPP *lexer;
    QPushButton *fermer;
};

#endif

FenCodeGenere.cpp


Code : C++
 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
#include "FenCodeGenere.h"

FenCodeGenere::FenCodeGenere(QString &code, QWidget *parent = 0) : QDialog(parent)
{
    lexer = new QsciLexerCPP;
    lexer->setColor(Qt::darkYellow,QsciLexerCPP::Keyword);
    lexer->setColor(Qt::blue,QsciLexerCPP::PreProcessor);
    lexer->setColor(Qt::darkRed,QsciLexerCPP::Comment);
    lexer->setColor(Qt::darkRed,QsciLexerCPP::CommentLine);

    codeGenere = new QsciScintilla();
    codeGenere->setText(code);
    codeGenere->setReadOnly(true);
    codeGenere->setLexer(lexer);
    codeGenere->setMarginLineNumbers(1,true);
    codeGenere->setMarginWidth(1, "----") ;
	

fermer = new QPushButton("Fermer");

    QVBoxLayout *layoutPrincipal = new QVBoxLayout;
    layoutPrincipal->addWidget(codeGenere);
    layoutPrincipal->addWidget(fermer);

    resize(350, 450);
    setLayout(layoutPrincipal);

    connect(fermer, SIGNAL(clicked()), this, SLOT(accept()));
}


QsciScintilla dans Qt Designer

Devinez le meilleur. Il est possible de mettre QsciScintilla dans Qt Designer !

Pour cela il faut le dossier téléchargé de QScintilla, si vous l'avez supprimé ce n'est pas grave, retéléchargez-le et c'est bon ;) .

Ouvrez Qt Designer cherchez un peu dans les widgets, et magie dans Input Widget il y a QsciScintilla :
Image utilisateur

Pour ajouter des lexers il faut le coder (ce serait trop beau sinon).

C'est la fin de ce tutoriel. J'espère qu'il vous aura plu ;).
À la prochaine.
Merci aux zCorrecteurs pour avoir Image utilisateur ce tutoriel.

PS : si vous avez un problème envoyez-moi un MP ou postez dans les commentaires j'essaierai d'y répondre.
Retour en haut Retour en haut


Créé : le 29/06/2008 à 16:02:48
Modifié : le 22/08/2008 à 16:09:15
Avancement : 100%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | Fil RSS | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 112 Zéros connectés | Requêtes SQL 9 requêtes | Temps de génération de la page : Total (SQL) 0.0304s (0.0202s)