Bindings + MĂ©thode de travail:
Notions abordées:
-Les syntaxes pour le Binding
Le code de la présentation: https://github.com/obiwankennedy/Learn-Qt
Le code de l’exercice: 04_exercice_binding
La correction sera dans le prochain Ă©pisode.
Lien youtube: https://youtu.be/A-SMHKkH19U
Supporter le logiciel et la chaîne: https://liberapay.com/Rolisteam/donate
Rolisteam: http://www.rolisteam.org/
Les attributs:
Notions abordées:
-id
-Propriétés
-Signaux
-Gestionnaire de Signaux
-Gestionnaires et propriétés groupés.
-méthodes
-Enumération
Fichier à télécharger: 03_attributs
Le code de la présentation: https://github.com/obiwankennedy/Learn-Qt
Lien youtube: https://youtu.be/tDSVlrsQJU0
Le positionnement:
-Apprenez à positionner vos éléments.
Notions abordées:
-Positionnement absolue
-Ancres
-Les positionneurs
-Les layouts
Le code de la présentation: https://github.com/obiwankennedy/Learn-Qt
Ressources du tutoriel:Â 03_positionnement
Lien youtube: https://youtu.be/QDbn1CDjc14
Supporter le logiciel et la chaîne: https://liberapay.com/Rolisteam/donate
Rolisteam: http://www.rolisteam.org/
Introduction:
-Apprenez Ă installer les outils pour programmer en QML.
-Création d’un projet QML.
-DĂ©couverte du premier programme.
-Introduction des types de base du QML (Item, Rectangle, Image, Text, TextInput, TextArea, MouseArea, Timer, Flickable)
Téléchargez les ressources de l’épisode
Liens Utiles:
Qt: https://www.qt.io/download
RCSE: http://www.rolisteam.org/download.html (Lire attentivement en fonction de vos plate formes)
Le code de la présentation: https://github.com/obiwankennedy/Learn-Qt
Exemple QML:
https://www.youtube.com/results?search_query=qml+example
Lien youtube: https://youtu.be/8moq00ofQPY
Supporter le logiciel et la chaîne: https://liberapay.com/Rolisteam/donate
Rolisteam: http://www.rolisteam.org/
Un petit article pour évoquer la possibilité de faire un webservice, en C++/Qt.
Mon besoin est simple, je veux fournir une interface web pour réaliser des lancer de dés avec le système de lancement de dés DiceParser, issu de Rolisteam.
DiceParser est écrit en C++ avec Qt5. A partir de ce constat, je pouvais soit faire un serveur web en C++, soit faire un site web en python/php/whatever pour lancer une commande système et utiliser dice, le client en ligne de commande de DiceParser.
La deuxième solution est la plus facile mais clairement un peu «sale» et niveau sécurité ce n’est pas idéal. Le «challenge» se trouve dans la première méthode.
Je n’avais pas envie de rĂ©inventer la roue donc j’ai cherchĂ© une solution technique pour satisfaire mon besoin. Un composant C++/Qt qui permet de crĂ©er un serveur http avec possibilitĂ© d’ĂŞtre notifier Ă chaque requĂŞte. J’ai trouvĂ© un composant qui rĂ©alise cela.
Le dépôt git du composant : https://github.com/azadkuh/qhttp.git
[pastacode lang=”cpp” manual=”%20%20m_server%20%3D%20new%20qhttp%3A%3Aserver%3A%3AQHttpServer(this)%3B%0A%20%20%20%20m_server-%3Elisten(%20%2F%2F%20listening%20on%200.0.0.0%3A8080%0A%20%20%20%20%20%20%20%20%20%20%20%20QHostAddress%3A%3AAny%2C%20port%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B%3D%5D(qhttp%3A%3Aserver%3A%3AQHttpRequest*%20req%2C%20qhttp%3A%3Aserver%3A%3AQHttpResponse*%20res)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20req-%3EcollectData(1024)%3B%0A%0A%09%09%2F%2F%20Ici%20mettre%20le%20code%20d’analyse%20de%20la%20requ%C3%AAte%0A%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20if%20(%20!m_server-%3EisListening()%20)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20qDebug()%20%3C%3C%20%22failed%20to%20listen%22%3B%0A%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20else%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20qDebug()%3C%3C%20%22Server%20is%20On!!%22%3B%0A%20%20%20%20%7D” message=”Instancier le serveur web” highlight=”” provider=”manual”/]
Nous crĂ©ons une instance du serveur, nous dĂ©marrons l’Ă©coute sur le port (80 par dĂ©faut pour le protocole http).
L’Ă©coute est rĂ©alisĂ© par une fonction lambda, cela n’a rien d’obligatoire, mais c’est plus minimaliste.
Notre fonction est notifiĂ©e Ă la rĂ©ception d’une requĂŞte http.
[pastacode lang=”cpp” manual=”%2F%2F%20R%C3%A9cup%C3%A8re%20les%20donn%C3%A9es%0Areq-%3EcollectData(1024)%3B%0A%0A%2F%2F%20R%C3%A9cup%C3%A8re%20l’url%20(les%20donn%C3%A9es%20du%20GET)%0AQString%20getArg%20%3D%20req-%3Eurl().toString()%3B%0A%0A%2F%2F%20D%C3%A9coupage%20des%20arguments%0AgetArg%3DgetArg.replace(%22%2F%3F%22%2C%22%22)%3B%0AQStringList%20args%20%3D%20getArg.split(‘%26’)%3B%0AQHash%3CQString%2CQString%3E%20m_hashArgs%3B%0Afor(%20auto%20argument%20%3A%20args)%0A%7B%0A%20%20%20%20QStringList%20keyValue%20%3D%20argument.split(‘%3D’)%3B%0A%20%20%20%20if(keyValue.size()%3D%3D2)%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20m_hashArgs.insert(keyValue%5B0%5D%2CkeyValue%5B1%5D)%3B%0A%20%20%20%20%7D%0A%7D%0A%0A%2F%2F%20recherche%20dans%20la%20table%20des%20arguments%20la%20pr%C3%A9sence%20de%20fonction.%0Aif(m_hashArgs.contains(%22cmd%22))%0A%7B%0A%09%2F%2F%20r%C3%A9pondre%20%C3%A0%20la%20requ%C3%AAte%20reconnue.%0A%7D” message=”DĂ©coupage” highlight=”” provider=”manual”/]
Ici, nous analysons la requête pour identifier les actions à réaliser. Nous cherchons le paramètre cmd, pour trouver la commander à identifier. Le travail préalable est des créer une tableau associatif (dans une QHash) pour conserver les paramètres et leur valeur.
Une fois la commande de dĂ©s identifiĂ©s, il faut l’exĂ©cuter.
[pastacode lang=”cpp” manual=”%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20QString%20result%20%3D%20startDiceParsing(QUrl%3A%3AfromPercentEncoding(m_hashArgs%5B%22cmd%22%5D.toLocal8Bit()))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20res-%3EsetStatusCode(qhttp%3A%3AESTATUS_OK)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20res-%3EaddHeader(%22Access-Control-Allow-Origin%22%2C%20%22*%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20res-%3EaddHeader(%22Access-Control-Allow-Methods%22%2C%20%22POST%2C%20GET%2C%20OPTIONS%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20res-%3EaddHeader(%22Access-Control-Allow-Headers%22%2C%20%22x-requested-with%22)%3B%0A%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20QString%20html(%22%3C!doctype%20html%3E%5Cn%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%3Chtml%3E%5Cn%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%3Chead%3E%5Cn%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%20%20%3Cmeta%20charset%3D%5C%22utf-8%5C%22%3E%5Cn%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%20%20%3Ctitle%3ERolisteam%20Dice%20System%20Webservice%3C%2Ftitle%3E%5Cn%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%20%20%3Cstyle%3E.dice%20%7Bcolor%3A%23FF0000%3Bfont-weight%3A%20bold%3B%7D%3C%2Fstyle%3E%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%3C%2Fhead%3E%5Cn%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%3Cbody%3E%5Cn%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%251%5Cn%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%3C%2Fbody%3E%5Cn%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%3C%2Fhtml%3E%5Cn%22)%3B%0A%0Ares-%3Eend(html.arg(result).toLocal8Bit())%3B” message=”” highlight=”” provider=”manual”/]
La première action est de convertir la commande pour la transformer en données lisibles. Elle est actuellement encodé en mode pourcent. Qt fournit une méthode statique pour faire la conversion. Le resultat de cette conversion est ensuite envoyé à une fonction qui exécute la commande et donne le résultat.
Il faut ensuite générer la réponse. Le premier truc à définir est le code réponse du protocole http. Le module qhttp propose des raccourcis pour cela.
Ensuite, la rĂ©ponse doit contenir 3 paramètres dans les headers afin d’ĂŞtre accessible par des frameworks Ajax/javascript/Web 2.0 (vous ressentez mon dĂ©dain envers ces techno ?).
Après la définition des headers, il faut créer le code html (ou autre) de la réponse.
[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%3Chtml%3E%20%20%20%20%20%20%0A%3Chead%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%3Cmeta%20charset%3D%22utf-8%22%3E%20%0A%3Cmeta%20name%3D%22Author%22%20content%3D%22Renaud%20GUEZENNEC%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%3Ctitle%3ERolisteam%20Dice%20System%20Webservice%3C%2Ftitle%3E%20%20%0A%20%20%3Cstyle%3E.dice%20%7Bcolor%3A%23FF0000%3Bfont-weight%3A%20bold%3B%7D%3C%2Fstyle%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery-3.1.1.min.js%22%20%3E%3C%2Fscript%3E%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%20%0A%20%20%20%20function%20displayResult()%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20var%20request%20%3D%20%24.ajax(%7B%20%20%20%0A%20%20%20%20%20%20%20%20method%3A%20%22get%22%2C%20%20%20%20%0A%20%20%20%20%20%20%20%20url%3A%20%22http%3A%2F%2F127.0.0.1%3A8085%2F%22%2C%20%20%0A%20%20%20%20%20%20%20%20dataType%3A%20%22html%22%2C%20%20%0A%20%20%20%20%20%20%20%20async%3A%20false%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7Bcmd%3A%20%24(‘%23cmd’).val()%7D%20%0A%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20request.done(function(data)%7B%20%20%0A%20%20%20%20%20%20%20%20var%20str%20%3D%22%3Cp%3E%22%20%0A%20%20%20%20%20%20%20%20str%20%3D%20str.concat(data%2C%22%3C%2Fp%3E%22)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%24(‘.diceresult’).prepend(str)%3B%20%20%20%20%0A%20%20%20%20%20%20%7D)%3B%20%0A%20%20%20%20%7D%20%20%20%0A%20%20%3C%2Fscript%3E%20%20%0A%3C%2Fhead%3E%20%20%20%20%20%20%20%0A%3Cbody%3E%20%20%20%20%0A%3Cform%20method%3D%22POST%22%20action%3D%22%22%2F%3E%20%0A%3Cinput%20id%3D%22cmd%22%20name%3D%22cmd%22%2F%3E%20%20%0A%3Cinput%20id%3D%22roll%22%20name%3D%22roll%22%20type%3D%22button%22%20onclick%3D%22javascript%3AdisplayResult()%3B%20return%200%3B%22%20value%3D%22Roll%22%2F%3E%0A%3C%2Fform%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%3Ca%20href%3D%22index.html%22%3EClear%3C%2Fa%3E%20%0A%3Cdiv%20class%3D%22diceresult%22%3E%0A%3C%2Fdiv%3E%20%20%20%20%20%20%0A%3C%2Fbody%3E%20%0A%3C%2Fhtml%3E” message=”Page cliente” highlight=”” provider=”manual”/]
Le travail ici est assez simple. Il faut crĂ©er un formulaire pour permettre Ă l’utilisateur de saisir la commande de dĂ©s. J’ai utilisĂ© JQuery comme framework javascript pour rĂ©cupĂ©rer la commande et envoyer la requĂŞte de mon webservice. Quand la requĂŞte s’est bien passĂ©e, le rĂ©sultat s’affiche dans la page sans recharger la page.
Le lien vers le code source: https://github.com/Rolisteam/DiceParser/tree/master/webserver
Le webservice fait partie de projet DiceParser: https://github.com/Rolisteam/DiceParser
Bonjour,
Si vous suivez ce blog, vous savez que je suis développeur C++/Qt et que je contribue beaucoup à Rolisteam (www.rolisteam.org). C’est un logiciel libre pour faire du jeu de rôle. Il vise un public assez large. Il est donc multi-plateforme. Il fonctionne sous GNU/Linux, windows et Mac Os. Je suis un linuxien convaincu mais je développe sur les autres systèmes pour Rolisteam.
L’aspect développement n’est pas vraiment un problème, grâce à Qt. Cela marche grosso modo bien. La chose devient plus périlleuse quand il s’agit de distribuer le logiciel.
Dans mon activité professionnelle, j’ai constaté, qu’il est assez rare qu’un développeur connaisse les solutions pour distribuer facilement un logiciel. Je vais essayer ici d’expliquer comment faire. Du moins, comment je fais dans rolisteam et si vous avez d’autres astuces. N’hésitez pas à en faire part dans les commentaires.
Vous avez un logiciel écrit en C++/Qt, il est géré par un fichier .pro. Certains systèmes de build propose des systèmes identiques, voir plus puissant mais plus complexe (e.g: cmake). Je me contente d’évoquer les outils Qt.
Pour ma part, j’ai opté pour une distribution source et la création de package Ubuntu. Grâce à Launchpad, il est possible de créer un dépôt pour son projet et de soumettre des versions. Il faut l’admettre, c’est très pratique. Il existe probablement des services pour faire cela pour d’autres distributions.
Des contributeurs ont crĂ©Ă© des package pour d’autres distributions (fedora…). Pour arch-linux, j’ai crĂ©e un script de compilation (Ă tester).
L’ensemble des outils utilisĂ©es ne sont pas des outils Qt. Cela n’est donc pas le propos de cet article. Je me suis mis de cĂ´tĂ© la tâche de jeter un coup d’œil Ă appimage. Cela pourrait ĂŞtre une solution intĂ©ressante.
Une application a des dĂ©pendances. Sous windows, il est courant d’installer l’exĂ©cutable et ses dĂ©pendances dans un mĂŞme dossier. Il est parfois difficile d’identifier les dĂ©pendances. Rassurez-vous un outil magique a Ă©tĂ© crĂ©Ă©e. Il s’agit de “windeployqt.exe“. C’est un outil distribuĂ© avec Qt. Son but est de copier toutes les dĂ©pendances Qt d’un binaire dans un dossier.
[pastacode lang=”bash” manual=”windeployqt%20%20%2Fchemin%2Fvers%2Fmon%2Fexecutable.exe” message=”Commande Windeployqt” highlight=”” provider=”manual”/]
Cette commande va lire le binaire et va copier l’ensemble des dépendances identifiés à côté du binaire.
Par soucis de clarté, je préfère utiliser un répertoire propre et distinct du répertoire de compilation.
[pastacode lang=”bash” manual=”windeployqt%20–dir%20%2Fchemin%2Fvers%2Fun%2Fdossier%2Fpropre%20%2Fchemin%2Fvers%2Fmon%2Fapplication.exe” message=”Dossier sĂ©parĂ©” highlight=”” provider=”manual”/]
L’ajout du l’argument –dir permet de dĂ©finir ce «dossier de destination».
Une autre difficulté entre en jeu quand votre application utilise du QML. En effet, il convient de rajouter un argument à la commande afin de permettre à l’outil d’aller lire votre code QML pour trouver ses dépendances.
[pastacode lang=”bash” manual=”windeployqt%20–qmldir%20%2Fchemin%2Fvers%2Fle%2Fdossier%2Fdes%2Fqml%20–dir%20%2Fdossier%2Fpropre%20application.exe” message=”Distributer du QML” highlight=”” provider=”manual”/]
Une fois cette étape terminée, vous aurez dans votre dossier de destination l’ensemble des dépendances Qt (et QML) de votre projets.
Je vous mets un exemple pour un logiciel utilisant Qt5 et un peu de QML le tout fut compilé avec Visual Studio.
├── accessible/
├── audio/
├── bearer/
├── designer/
├── Enginio.dll
├── iconengines/
├── icudt52.dll
├── icuin52.dll
├── icuuc52.dll
├── imageformats
├── mediaservice
├── msvcp120.dll
├── msvcr120.dll
├── platforms/
│ └── qwindows.dll
├── playlistformats/
├── position/
├── printsupport/
├── qml1tooling/
├── qmltooling/
├── Qt5Core.dll
├── Qt5Declarative.dll
├── Qt5Gui.dll
├── Qt5Network.dll
├── Qt5OpenGL.dll
├── Qt5Qml.dll
├── Qt5Quick.dll
├── Qt5WebKit.dll
├── Qt5Widgets.dll
├── Qt5Xml.dll
├── Qt5XmlPatterns.dll
├── sensorgestures/
├── sensors/
├── sqldrivers/
├── unins000.dat
└── unins000.exe
Si votre projet utilise d’autres bibliothèques (zlib …), il convient de rajouter les .dll correspondantes dans le dossier. La dernière étape est d’inclure le .exe de votre application.
En double-clickant sur le .exe, il devrait se lancer. Si ce n’est pas le cas, une dll est probablement manquante.
Cette procédure est à faire après un changement de version de Qt. Il faut vous assurer que les dll embarquées soient de la bonne version.
A ce stade, il ne reste qu’à mettre en place l’outil de publication de votre application.
Pour cette étape, il y a principalement deux méthodes:
La méthode de l’archive Zip, il suffit d’archiver le dossier de destination dans une archive .zip. Ce fichier peut être extrait sur n’importe quel windows, et cela fonctionnera. Il faudra créer à la main les raccourcis et il n’y pas d’autre moyen pour dés-installer le logiciel que de supprimer le dossier extrait à la main.
L’autre méthode est d’utiliser un outil qui va créer un installeur. Les plus connus sont Inno setup et NSIS.
J’utilise pour ma part: InstallForge (http://installforge.net), il est graphique et simple.
Qu’importe l’outil choisi, il faudra lui dire d’installer tous les fichiers de votre dossier de destination (en respectant la hiérarchie des fichiers) chez vos utilisateurs. Ces outils permettent de créer automatiquement des scripts de désinstallation, ils créent également les raccourcis sur le bureau et la barre de démarrage. Ils permettent aussi d’afficher du contenu à l’utilisateur (licence, logo du logiciel) et cela lui permet de prendre des décisions, au cours de l’installation (si besoin).
Pour finir, après cette étape, vous aurez un installeur soit en mode .zip, soit un .exe. Il ne reste plus qu’à mettre cet installeur accessible à vos utilisateurs et c’est bon.
Pensez Ă le tester quand mĂŞme avant de faire des annonces publiques. On sait jamais !
Pour MacOs, il existe un outil similaire qui s’appelle: macqtdeploy.
Il utilise les mêmes paramètres que la version windows, la seule différence réside dans l’utilisation d’un .app (en lieu et place du .exe).
[pastacode lang=”bash” manual=”macdeploy%20application.app%20-qmldir%3D%2FUser%2Fdossier%2Fvers%2Fcode%2Fqml%20″ message=”sur MacOs X” highlight=”” provider=”manual”/]
Bien sûr, cela peut être intégrer dans QtCreator comme étape de déployement.
Sur MacOs, il est possible de demander à Qt de compiler une application dans un bundle (c’est d’ailleurs la solution par défaut). Un bundle est un dossier se terminant par «.app». Dans l’environnement graphique de MacOs, un double click lance le logiciel qu’il contient. Il est également possible, d’explorer le contenu du bundle en ligne de commande (cela se comporte comme un dossier) ou par un click droit: «afficher le contenu du packet» en graphique.
Dans tous les cas, l’utilisation de la commande va venir placer l’ensemble des dépendances Qt dans le bundle. Pour être précis, les bibliothèques sont placées dans le dossier Contents/Frameworks du bundle. Les modules QML sont dans Resources/qml.
A l’instar de windows, il faut mettre également d’éventuelles autres bibliothèques dans le bundle. C’est une étape un peu technique. Pour rolisteam, j’utilise zlib, voilà le programme bash qui me permet de faire l’ajout et de bien définir les chemins.
[pastacode lang=”bash” manual=”%23!%2Fbin%2Fsh%0A%0A%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%0A%23%20Rolisteam%20%0A%23%20Script%20to%20deploy%20libz%20into%20rolisteam.%0A%23%0A%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%23%0A%0Aecho%20’Display%20dependancies’%0Aotool%20-L%20rolisteam.app%2FContents%2FMacOS%2Frolisteam%0A%0A%0A%0Aecho%20’Create%20directory’%0Amkdir%20rolisteam.app%2FContents%2FFrameworks%2Flibz.framework%2F%0A%0Aecho%20’Copy%20lib%20binary’%0Acp%20%2Fusr%2Flib%2Flibz.1.dylib%20rolisteam.app%2FContents%2FFrameworks%2Flibz.framework%2F%0A%0Aecho%20’Rewrite%20path%20to%20the%20lib’%0Ainstall_name_tool%20-change%20%2Fusr%2Flib%2Flibz.1.dylib%20%40executable_path%2F..%2FFrameworks%2Flibz.framework%2Flibz.1.dylib%20rolisteam.app%2FContents%2FMacOS%2Frolisteam” message=”Ajouter une dĂ©pendances Ă un bundle” highlight=”” provider=”manual”/]
En gros, il y a la copie du fichier en lui même puis, la modification de l’exécutable pour lui dire d’aller chercher zlib dans le bundle et non sur mon poste. Cette étape est très importante car sinon, votre bundle ne sera pas portable sur une autre machine.
Le fichier .app complet suffit pour ĂŞtre installĂ© sur une autre machine. Cependant, il est de coutume de distribuer un logiciel par un dmg. Cela permet de le compresser pour faciliter sa distribution et surtout MacOs permet de rendre graphique l’installation par un dmg.
Pour réaliser cela, j’utilise un petit utilitaire: node-appdmg. Il suffit d’un petit fichier de configuration en json pour définir les paramètres.
[pastacode lang=”javascript” manual=”%7B%0A%20%20%22title%22%3A%20%22Rolisteam%20%20-%20Mac%20Os%20X%22%2C%0A%20%20%22icon%22%3A%20%22rolisteam.icns%22%2C%0A%20%20%22background%22%3A%20%221500-rolisteam.png%22%2C%0A%20%20%22icon-size%22%3A%2080%2C%0A%20%20%22contents%22%3A%20%5B%0A%20%20%20%20%7B%20%22x%22%3A%20448%2C%20%22y%22%3A%20344%2C%20%22type%22%3A%20%22link%22%2C%20%22path%22%3A%20%22%2FApplications%22%20%7D%2C%0A%20%20%20%20%7B%20%22x%22%3A%20192%2C%20%22y%22%3A%20344%2C%20%22type%22%3A%20%22file%22%2C%20%22path%22%3A%20%22rolisteam.app%22%20%7D%0A%20%20%5D%0A%7D” message=”Configuration node-appdmg pour rolisteam” highlight=”” provider=”manual”/]
Vous lancez l’utilitaire avec le fichier de configuration et le nom de votre dmg pour obtenir votre dmg tout beau, tout propre.
node-appdmg dmg.json monapplication.dmg
Il ne reste qu’à distribuer votre dmg.
Nous venons de voir les solutions et les outils mis en place pour rolisteam.
Si vous avez des questions sur les outils, ou si vous voulez en proposer d’autres, les commentaires sont là pour ça.
Pour préparer ma conférence à Pas Sage En Seine [FR], j’ai décidé de faire une présentation QML.
Cela offre un bien meilleur contrôle, bien plus de possibilité graphique (animations, intégration de code, 3D…) et de même de l’interactivité.
Bien sĂ»r, une prĂ©sentation QML demande plus de temps Ă faire. Le but de l’article est ici d’expliquer les astuces que j’ai mises en place. EspĂ©rant gagner du temps la prochaine fois.
Comme vous pouvez le voir, la prĂ©sentation est une application C++ qui affiche du QML. Cette mĂ©thode permet de faciliter le contrĂ´le de la partie QML. Je m’en sers pour enregistrer des captures d’Ă©cran de la prĂ©sentation afin d’en faire un PDF. C’est le meilleur pour distribuer la prĂ©sentation ou dans le cas ou pour Ă©viter l’effet dĂ©mo.
Tout en haut, il y a les classes C++, les fichiers de management du projet et le fichier main.qml. Dans le rĂ©pertoire «pages», vous y trouverez les diffĂ©rentes slides de la prĂ©sentation. Dans rsrc, il y a l’ensemble des images nĂ©cessaire Ă la prĂ©sentation.
├── cpphighlighter.cpp ├── cpphighlighter.h ├── deployment.pri ├── LICENSE ├── main.cpp ├── main.qml ├── pages │ ├── 01_intro.qml │ ├── 02_presentation.qml │ ├── 03_jdr_et_rolisteam.qml │ ├── 043_Exemple_code_1.qml │ ├── 04_jdr_avantages_pb.qml │ ├── 05_avantage_jdr_virtuel.qml │ ├── 06_fonctionnalites_rolisteam.qml │ ├── 07_rolisteam_debut.qml │ ├── 08_Rolistik_a_Rolisteam.qml │ ├── 10_frise_chronologique.qml │ ├── 11_son_usage.qml │ ├── 12_son_fonctionnement.qml │ ├── 13_dice_parser.qml │ ├── 14_themes_audio_3_pistes.qml │ ├── 15_nouveaute_1_8.qml │ ├── 16_projet_avenir.qml │ ├── 17_reussites.qml │ ├── 18_les_lecons.qml │ ├── 19_objectif_rolisteam_libre.qml │ ├── 20_FAQ.qml ├── pasSageEnSeine.pro ├── pasSageEnSeine.pro.user ├── qmlcontroler.cpp ├── qmlcontroler.h ├── qmlcontroler.ui ├── qml.qrc ├── README.md ├── rsrc │ ├── all.png │ ├── cc.png │ └── chat.png
Il peut ĂŞtre utile de connaĂ®tre l’Ă©tat de la prĂ©sentation QML, et de pouvoir lire des notes sur chaque volet. Pour faire cela, j’ai Ă©cris une petite application C++.
Le premier objectif de l’application est d’afficher la prĂ©sentation QML. Il faut donc charger le QML et Ă©tablir des moyens de communication entre le monde QML et le C++. Comme vous pouvez le voir, je passe en paramètre la taille de la prĂ©sentation en paramètre du QML. Ce dernier Ă©lĂ©ment n’est pas obligatoire car par dĂ©faut j’utilise la taille de l’Ă©cran comme rĂ©fĂ©rence.
[pastacode lang=”cpp” manual=”%23include%20%3CQApplication%3E%0A%23include%20%3CQQmlApplicationEngine%3E%0A%23include%20%22qmlcontroler.h%22%0A%23include%20%3CQQmlContext%3E%0A%23include%20%3CQQuickTextDocument%3E%0A%0A%23include%20%22cpphighlighter.h%22%0A%0Aint%20main(int%20argc%2C%20char%20*argv%5B%5D)%0A%7B%0A%20%20%20%20QApplication%20app(argc%2C%20argv)%3B%0A%0A%20%20%20%20QQmlApplicationEngine%20engine%3B%0A%0A%20%20%20%20engine.rootContext()-%3EsetContextProperty(%22ScreenW%22%2C1280)%3B%0A%20%20%20%20engine.rootContext()-%3EsetContextProperty(%22ScreenH%22%2C720)%3B%0A%0A%20%20%20%20engine.load(QUrl(QStringLiteral(%22qrc%3A%2Fmain.qml%22)))%3B%0A%0A%20%20%20%20QmlControler%20ctr%3B%0A%20%20%20%20ctr.setEngine(%26engine)%3B%0A%0A%20%20%20%20return%20app.exec()%3B%0A%7D%0A” message=”main.cpp” highlight=”” provider=”manual”/]
Dans ce projet, la classe QmlControler est l’objet (fenĂŞtre) C++ qui affiche l’aperçu de la prĂ©sentation et les commentaires/notes.
Regardons en détails cet élément:
C’est une simple fenĂŞtre. Elle est dĂ©coupĂ©e en deux parties. Celle de gauche affiche dans un QLabel l’aperçu de la prĂ©sentation QML. La partie de droite affiche les notes et commentaires sur la page courante dans un QTextArea.
[pastacode lang=”cpp” manual=”void%20QmlControler%3A%3AcurrentPageHasChanged(int%20i)%0A%7B%0A%20%20%20%20m_currentScreen%20%3D%20i%3B%0A%20%20%20%20QImage%20img%20%3D%20m_window-%3EgrabWindow()%3B%0A%0A%20%20%20%20if(img.isNull())%0A%20%20%20%20%20%20%20%20return%3B%0A%0A%20%20%20%20static%20int%20count%20%3D%200%3B%0A%0A%0A%20%20%20%20img.save(tr(%22screens%2F%251_screen.png%22).arg(%2B%2Bcount%2C3%2C10%2CQChar(‘0’))%2C%22png%22)%3B%0A%20%20%20%20qDebug()%20%3C%3C%20%22screen%20shot%20save%22%20%3C%3C%20count%3B%0A%0A%20%20%20%20m_ratioImage%20%3D%20(double)img.size().width()%2Fimg.size().height()%3B%0A%20%20%20%20m_ratioImageBis%20%3D%20(double)img.size().height()%2Fimg.size().width()%3B%0A%0A%20%20%20%20m_label-%3EsetPixmap(QPixmap%3A%3AfromImage(img))%3B%0A%0A%20%20%20%20if((i%2B1%3E%3D0)%26%26(i%2B1%3Cm_commentData.size()))%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20ui-%3EtextEdit-%3EsetHtml(m_commentData.at(i%2B1))%3B%0A%20%20%20%20%7D%0A%20%20%20%20resizeLabel()%3B%0A%7D” message=”Current slide has changed” highlight=”” provider=”manual”/]
Quand la page courante change, la fenĂŞtre C++ est informĂ© par l’appel du slot: currentPageHasChanged alors l’application rĂ©cupère une capture de la vue QML, l’affiche Ă l’Ă©cran (dans la partie gauche), affiche les notes Ă propos de la page courante et peut sauvegarder la capture dans un fichier.
Sauvegarder les captures dans des fichiers vous permet de crĂ©er un fichier PDF de votre prĂ©sentation. Il s’agit lĂ d’une solution de secours en cas de problème avec le matĂ©riel de la prĂ©sentation ou une facilitĂ© pour distribuer votre prĂ©sentation.
La commande qui va bien (sous linux) :
$ convert *.png mypresentation.pdf
Par souci de clartĂ©, je prĂ©fère avoir un fichier par page. Cela Ă©vite l’Ă©cueil d’un fichier QML long et complexe. L’application charge les pages en accord avec le modele de donnĂ©es principal dans le mĂŞme ordre. Pour faire cela, j’ai utilisĂ© un ListModel. Une page est dĂ©finie par un titre, un nom de fichier, un temps (non utilisĂ©), et le nom de la page suivante.
Le fichier main.qml affiche toutes les pages comme un «delegate» d’un pathview. Toutes les pages sont chargĂ©s depuis le fichier de ressources de Qt (inclue dans le binaire grâce au système de ressources de Qt).
[pastacode lang=”css” manual=”ListModel%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20id%3A%20panelModel%0A%20%20%20%20%20%20%20%20%20%20%20%20ListElement%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22Intro%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20path%3A%20%2201_intro.qml%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20time%3A%201%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20next%3A%20%22Pr%C3%A9sentation%20de%20Rolisteam%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D” message=”First item of the model.” highlight=”” provider=”manual”/]
La donnée vraiment utile pour le chargement est bien sûr le nom du fichier.
Les autres sont là pour aider la rédaction ou la présentation.
Le loader fait son travail, voici les lignes importantes:
[pastacode lang=”css” manual=”%20%20%20%20PathView%20%7B%0A%20%20%20%20%20%20%20%20id%3A%20view%0A%20%20%20%20%20%20%20%20anchors.fill%3A%20parent%0A%20%20%20%20%20%20%20%20model%3A%20panelModel%0A%20%20%20%20%20%20%20%20highlightRangeMode%3APathView.StrictlyEnforceRange%0A%20%20%20%20%20%20%20%20snapMode%3A%20PathView.SnapOneItem%0A%20%20%20%20%20%20%20%20delegate%3A%20%20Loader%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20source%3A%20%22pages%2F%22%2Bpath%0A%20%20%20%20%20%20%20%20%7D” message=”Path View” highlight=”source: “pages/”+path” provider=”manual”/]
Le temps Ă©tait destinĂ© Ă afficher un compte Ă rebours pour chaque slide mais je n’ai pas eu le temps de l’implĂ©menter.
Il est important de mettre dans le main.qml tous les Ă©lĂ©ments que vous souhaitez avoir sur toutes les pages: le sommaire, l’indication de la page courante sur le total de pages, etc.
Pour rĂ©aliser un sommaire, j’ai ajoutĂ© un ListView avec le modele suivant:
[pastacode lang=”css” manual=”%20%20%20%20ListView%20%7B%0A%20%20%20%20%20%20%20%20id%3A%20listView1%0A%20%20%20%20%20%20%20%20x%3A%20ScreenW*0.02%0A%20%20%20%20%20%20%20%20y%3A%20ScreenH*0.3%0A%20%20%20%20%20%20%20%20width%3A%20ScreenW%2F2%0A%20%20%20%20%20%20%20%20height%3A%20ScreenH*0.2%0A%20%20%20%20%20%20%20%20delegate%3A%20Item%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20ScreenW%2F2%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20listView1.height%2FlistView1.count%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Text%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20view.currentIndex%3E%3Dindex%20%3F%20%22black%22%20%3A%20%22gray%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20name%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font.pointSize%3A%20ScreenH%2F48%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20anchors.verticalCenter%3A%20parent.verticalCenter%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font.bold%3A%20true%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20visible%3A%20view.currentIndex%3E0%20%3F%20true%20%3A%20false%0A%0A%20%20%20%20%20%20%20%20model%3A%20ListModel%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20ListElement%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22Concepts%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20index%3A1%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20ListElement%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22Chroniques%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20index%3A6%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20ListElement%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22Logiciel%22%2F%2Fsyst%C3%A8me%20de%20build%2C%20code%20sp%C3%A9cifique%20par%20OS.%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20index%3A9%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20ListElement%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22Bilan%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20index%3A15%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D” message=”Table of contents in QML ” highlight=”” provider=”manual”/]
Le champs index du modèle permet de connaître la page qui démarre cette section du sommaire.
Quand il y a beaucoup de pages il peut ĂŞtre intĂ©ressant de connaĂ®tre la prochaine page afin de faire une petite transition vers elle. Dans mon cas, j’affiche dans le coin haut-droit le titre de la prochaine page. Ce fut assez utile pour les rĂ©pĂ©titions, je n’en ai presque pas eu besoin pendant la confĂ©rence.
[pastacode lang=”css” manual=”%20%20%20%20Text%20%7B%0A%20%20%20%20%20%20%20%20anchors.top%3A%20parent.top%0A%20%20%20%20%20%20%20%20anchors.right%3A%20parent.right%0A%20%20%20%20%20%20%20%20text%3A%20panelModel.get(view.currentIndex).next%2B%22%3E%22%0A%20%20%20%20%7D” message=”Next slide” highlight=”” provider=”manual”/]
L’autre possibilitĂ© est d’utiliser les notes dans la fenĂŞtre C++.
Chaque page est indĂ©pendante, elles peuvent ĂŞtre totalement diffĂ©rentes cependant pour des raisons de simplicitĂ©, elle utilise une conception identique. Dans mon cas, elles sont constituĂ©es d’une ListView avec un modèle. Chaque Ă©lĂ©ment du modèle est un titre de section Ă Ă©voquer pendant la prĂ©sentation.
Les Ă©lĂ©ments ont un index. Cet index est contrĂ´lĂ© par le clavier (flèche bas pour augmenter l’index, haut pour rĂ©duire l’index). Grâce Ă cet index, il est possible de cacher la liste et d’afficher une image, un schĂ©ma ou une vidĂ©o.
Par exemple, dans ma prĂ©sentation la fonctionnalitĂ© «Alias de dĂ©s» a pour index 10. Quand la index de la page devient 10, l’Ă©lĂ©ment «Alias de dĂ©s» apparaĂ®t avec une petite animation. Puis l’index passe Ă 11, j’affiche une image illustrant la fonctionnalitĂ© des alias de dĂ©s. A 12, l’image disparaĂ®t et le texte revient.
Pour s’assurer de la lisibilitĂ© des Ă©lĂ©ments, je rĂ©alise l’ensemble des calculs en rapport Ă la taille de l’Ă©cran. Le positionnement est assurĂ© par des ancres (anchors en qml).
[pastacode lang=”css” manual=”%20%20%20%20Image%20%7B%0A%20%20%20%20%20%20%20%20id%3A%20image1%0A%20%20%20%20%20%20%20%20anchors.left%3A%20parent.left%0A%20%20%20%20%20%20%20%20anchors.top%3A%20parent.top%0A%20%20%20%20%20%20%20%20anchors.leftMargin%3A%20ScreenW*0.04%0A%20%20%20%20%20%20%20%20fillMode%3A%20Image.PreserveAspectFit%0A%20%20%20%20%20%20%20%20source%3A%20%22qrc%3A%2Frsrc%2FRolisteam.svg%22%0A%20%20%20%20%20%20%20%20width%3A%20ScreenW*0.2%0A%20%20%20%20%7D” message=”Display the logo at the right position and size.” highlight=”” provider=”manual”/]
Il existe un module qui fournit des Ă©lĂ©ments QML pour faciliter la rĂ©alisation d’une prĂ©sentation. Je ne l’ai pas utilisĂ© mais il y a des choses intĂ©ressantes.
Je vous invite Ă cloner ce code : https://github.com/obiwankennedy/pses
Autre exemple avec une image: https://github.com/obiwankennedy/l5rSummary
Exemple de présentation QML