Qu’est-ce qu’un splashscreen ?

Sous ce nom un peu barbare se cache tout simplement cette image (ou écran) qui s’affiche au lancement d’un logiciel. Affichant dans la plupart des cas des informations sur les créateurs du logiciels ou sur le chargement en cours.
C’est là que le splashscreen prend tout son intérêt, car on peut ainsi « cacher » à l’utilisateur un temps de chargement très ou trop long ou bien le tenir au courant de l’avancement du chargement (plugins, modules etc…).

Comment ajouter un splashscreen à son application Qt ?

Qt, ce framework que nous aimons tous, possède une classe pour gérer les splashscreen : QSplashScreen.
Partons du principe que vous possédez déjà une application GUI, et que vous souhaitez rajouter un QSplashScreen. Vous devez donc avoir un code dans votre fichier main.cpp qui ressemble à peu près à ceci :

#include <QtGui/QApplication>
#include "mainwindow.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;

    /*
     Une opération longue ...
    */

    w.show();
    return a.exec();
}

C’est ici le code de base généré par QtCreator à la création d’un projet GUI. Voici le code très similaire avec l’ajout du QSplashScreen :

#include <QtGui/QApplication>
#include <QtGui/QSplashScreen>
#include "mainwindow.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;

    QSplashScreen screen;
    screen.setPixmap(QPixmap("images/splash.png"));
    screen.show();

    /*
    On simule une opération longue pour l'exemple
    */
    sleep(10);

    screen.hide();

    w.show();
    return a.exec();
}

On a juste inclus le header « #include <QtGui/QSplashScreen> » et ensuite ajouté une image à afficher.
L’opération longue est ici simulée par un sleep de 10 secondes, mais je mettrai un jour cet exemple en application avec un système de plugins.
Car oui on peut aussi créer des plugins pour son application avec Qt, mais ce sera pour une autre fois !

J’ai déjà présenté ce qu’est QML dans un article passé, ce langage à base de syntaxe Javascript qui permet la création d’interface très simplement.

Il est assez aisé de suivre la documentation pour comprendre le fonctionnement de QML, d’autant plus que plusieurs exemples sont fournis avec la version 4.7 de Qt.

Cependant un petit exemple commenté peut toujours aider :

import Qt 4.7

Item {
    // Taille de la fenêtre
    width: 320; height: 240;

    Rectangle {
        id: rectangle;
        // Dimensions du rectangle pour prendre toute la fenêtre
        width: 320; height: 240;
        // Couleur de fond du rectangle
        color: "lightgray";
        // Les ancres permettent de fixer le rectangle aux coins de l'écran
        anchors.bottom: screen.bottom; anchors.top: screen.top;

        Image {
            // Une image dans le dossier du projet
            id: loading; source: "logo.png"; transformOrigin: "Center";
            rotation: rotationA;
        }
        // Une première transformation : translation de 0 à 180 sur l'axe X et lance la rotation C une fois terminée
        rotation: NumberAnimation {
            target: loading; id: rotationA; property: "x";
            from: 0; to: 180;
            onCompleted: rotationC.start();
        }
        // La même qu'avant mais dans l'autre sens de 180 à 0
        rotation: NumberAnimation {
            target: loading; id: rotationB; property: "x";
            from: 180; to: 0; //running: loading.visible == true;
            onCompleted: rotationD.start();
        }
        // Une rotation avec comme centre, le centre de l'image de 180° à partir de 180
        rotation: RotationAnimation {
            target: loading; id: rotationC; from: 180; to: 360;
            onCompleted: rotationB.start()
        }
        // La même qu'avant mais à partir de 0
        rotation: RotationAnimation {
            target: loading; id: rotationD; from: 0; to: 180;
            onCompleted: rotationA.start()
        }
    }
}

Vous pouvez télécharger l’exemple ci dessous.

  TestQML.zip (4,9 KiB, 52 hits)

Pour l’exécuter, il vous faudra compiler le projet, soit en ligne de commande :

qml chemin_vers_le_fichier_qml

soit avec un IDE comme QtCreator par exemple.

C’est un exemple très basique mais qui peut servir de base pour s’amuser avec QML.

Je connais et développe avec Qt depuis un moment maintenant, et le moins qu’on puisse dire c’est que le rachat de TrollTech par Nokia n’a en rien altéré la volonté des développeur de faire évoluer leur bébé.

Il faut bien reconnaître que Nokia y trouve son compte en disposant ainsi d’un framework bien complet pour animer ses appareils mobiles.

Mais que nous réservent donc ces deux produits actuellement en “Technology Preview” que sont Qt 4.7 et Qt Creator 2.0 ?

On commence avec Qt 4.7 et les nouveautés que cette version apporte à la 4.6 :

• De nouvelles classes pour la gestion des medias : gestion des playlists etc…
• Nouvelles classes pour le réseau, gestion des interfaces entre autres
• Mais la plus grosse nouveauté dans cette version c’est l’arrivée de Qt Quick

Qt Quick qu’est-ce que c’est ?

Qt Quick c’est un ensemble de trois produits qui vous permet de créer des interfaces dynamiques facilement, rapidement et compatible avec les technologies Qt déjà en place. Qt Quick comprend :

• QML : un langage déclaratif (sur lequel je reviendrai un jour) semblable au Javascript et qui simplifie la création d’interfaces animées et fluides
• QtDeclarative : un ensemble de classes C++ qui traduisent le QML en objets QGraphicScene, et permettent la connexion entre l’interface QML et l’application en C++.
• Enfin Qt Creator 2.0 : l’IDE made in Qt a été revu pour pleinement supporter le QML et ainsi offrir une interface facile à utiliser via le drag and drop, l’auto-complétion et la détection d’erreurs de syntaxe.

Ci-dessous une petite vidéo de Qt Quick en action sur un N900. On notera la fluidité de l’ensemble.

Une autre vidéo disponible sur la page de Qt 4.7, c’est un exemple de développement en QML avec Qt Creator. Encore une fois la simplicité est au rendez-vous.

Vous pouvez en apprendre plus sur ces deux pages et évidemment télécharger le tout pour vous amuser !

Présentation de Qt 4.7

Snapshot Qt 4.7

Sortie le 1er Décembre,  cette version 4.6 du framework maintenu maintenant par Nokia, apporte son lot de nouveautés intéressantes.

- Un support de Symbian OS
- Un meilleur support de Windows 7 et Mac OS 10.6
- Le support des interfaces tactiles
- Une meilleure gestion des animations grâce au projet Kinetic
- Manipulation du DOM des pages Web
- …

A télécharger d’urgence ici.

QScintilla est un portage de la librairie Scintilla vers le framework Qt permettant l’édition de texte, la coloration syntaxique, repliage du code etc…

Pour l’utiliser il vous faudra installer, si ce n’est déjà fait, le framework Qt : ici.
Puis une fois Qt installé, il faudra télécharger Qscintilla : ici.
Pour l’installer, ouvrez l’invité de commande de Qt (Qt Command Prompt), placez-vous dans le répertoire extrait et allez ensuite dans le répertoire Qt4 :

cd Qt4
qmake
make
make install
Ou sous Windows : qmake & make & make install puis
copy %QTDIR%\lib\qscintilla2.dll %QTDIR%\bin

Ceci fait, vous pouvez commencer à créer votre première application. Voici un exemple créant simplement une fenêtre avec un éditeur :

#include 
#include 
#include 

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

QsciScintilla *scintilla = new QsciScintilla;
QsciLexerHTML *lexer = new QsciLexerHTML;
scintilla->setLexer(lexer);
scintilla->show();
return app.exec();
}

Compilez ce bout de code (n’oubliez pas de rajouter LIBS += -lqscintilla2 à votre .pro) et admirez le résutat^^
Pour colorier le texte QScintilla utilise des lexers, ici nous avons utilisé un QsciLexerHTML qui colore le Cobol HTML et avec le PHP, XML, ASP, Python, VBScript, Javascript et SGML.
QScintilla rassemble ainsi 29 QsciLexer pout tous les langages courants : C++, Java, C#, Perl, SQL, Fortran, D etc…

Mais le fait de seulement colorier du code n’est pas intéressant ni vraiment utile.
Heureusement pour nous QScintilla possède tout un tas de propriétés et de fonctions qui vont nous aider à mettre un place un éditeur de texte complet :

// Définit une couleur spécifique pour un élément :
// ici red pour les tags PHPStart ('; ?>)
lexer->setColor(Qt::red, QsciLexerHTML::PHPStart);   

// Active la marge à gauche pour la numérotation des lignes
// et lui assigne une largeur de 4
scintilla->setMarginLineNumbers (1, true);
scintilla->setMarginWidth(1, "----");

// ‘Repliage’ du code (parentheses, crochets,
,  etc…)
scintilla ->setFolding(QsciScintilla::BoxedFoldStyle);

// Mise en surbrillance des parenthèses, crochets correspondants
scintilla->setBraceMatching(QsciScintilla::SloppyBraceMatch);

// Active l'auto-indentation
scintilla->setAutoIndent(true);

// Charge le contenu du fichier (ligne par ligne) comme source d'auto-complétion
// Et assigne cette source à l'éditeur qui déclenchera l'auto-complétion dès que 3 caractères seront tapés
QsciAPIs *api = new QSciAPIs(lexer);
api->load("fichier.txt");

scintilla->setAutoCompletionSource(QsciScintilla::AcsAPIs);
scintilla->setAutoCompletionThreshold(3);

Etc... etc...

Pour la liste complète des méthodes et des classes de QScintilla direction la Doc.

Sachez également qu’une liste de fonctions propres aux éditeurs de texte existe. Vous pouvez donc aussi bien utiliser undo() / redo(), que indent()/ unindent(), cut() / copy() / paste(), insert() / insertAt() etc…

Bon codage !

Une nouvelle bien sympathique, les tutoriels Officiels du SiteDuZéro sont maintenant disponibles sous licence Creative Commons CC-BY-NC-SA.

C’est à dire qu’il peuvent être modifiés par n’importe qui tant que les conditions suivantes sont respectées :

• Condition 1 : respecter le droit de paternité en signalant le nom ou pseudo de l’auteur et en créant un lien vers le site.
• Condition 2 : ne pas faire un usage commercial des tutoriels.
• Condition 3 : rediffuser le tutoriel sous la même licence.

Une très bonne nouvelle donc car ainsi cette base pourra être reprise pour être élargie avec des chapitres plus ciblés : sur telle ou telle librairie, sur la sécurité, sur des points particuliers etc… afin d’en faire un véritable cours complet, car il est vrai que les tutoriels posent les bases (et les posent bien d’ailleurs) mais ne vont pas plus loin.

News officielle : Les tutoriels officiels du Site du Zéro sous licence Creative Commons !.

Qt est un framework multi-plateforme (Windows, Linux, Mac OS) composés de plusieurs bibliothèques (ou modules) qui permettent aussi bien la programmation de GUI que la programmation réseau, l’accès aux bases de données, la manipulation de XML, la 3D avec OpenGL etc… tout cela en C++.
Ses capacités sont énormes, c’est simple : on peut tout faitre avec Qt !

Crée par la société Trolltech, rachetée récemment par Nokia, Qt est disponible sous licence LPGL, ce qui permet la création d’application propriétaires, et également sous une licence commerciale.

Utilisé par de milliers de développeurs dans le monde, de nombreux logiciels plus ou moins ‘connus’ ont été crées avec : Google Earth, KDE, Opera, Skype etc…

Développer avec Qt requiert une bonne connaissance des modules de base du framework, de son architecture, des différentes classes (histoire de ne pas être dans la doc, très bien pensée soit dit en passant, toutes les 5min).

Nokia a pensé aux développeurs avides de certifications puisqu’est disponible depuis le 1er Octobre, une certification Qt !
Comme beaucoup de certifications, on peut la passer dans les centres Person Vue, ceci pour une somme de 149€ (75€ si vous la repassez après l’avoir ratée).

Pour l’instant seule la certification Qt Essentials est disponible. Elle porte principalement sur la connaissance des modules QtCore et QtGui, consiste en un QCM de 50 questions, et est réalisable en 1h.
D’autres certifications viendront et porteront sur les autre modules de Qt.

Pour plus d’informations :

http://qt.nokia.com/developer/learning/certification

http://qt.developpez.com/certification/presentation

Plus de détails quand je l’aurais passée :p