- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte personlive_helpToutes les questions
Christian Aucane
15 août 2023 - 15 août 2023 à 20:47
checkConversation résolue
4 réponses
Il manque le fichier css dans les sources
Salut, on ne peut pas télécharger le fichier css
00:00:00 :Dans cette partie, on va voir comment charger une feuille de style sur notre application puisquevous avez probablement remarqué que dans la présentation de l'application, on avait uneapplication en mode sombre donc avec un fond d'arrière-plan qui était noir et un boutonun peu bleuté. Donc ça ce n'est pas ce qu'on a eu jusqu'à présent puisque pour l'instant on avait
00:00:18 :le style de macOS qui était mis par défaut. Si vous êtes sur Windows ou sur Linux, vous avezeu un style différent qui est propre à ces systèmes d'exploitation mais on a la possibilitéde modifier la feuille de style qui va nous permettre de, par exemple dans ce cas-ci, donner
00:00:32 :un mode sombre à notre application. Alors on ne va pas écrire la feuille de style ensemble puisquec'est assez long, il y a beaucoup de choses dedans donc je vais vous passer dans les sources de cettesession la feuille de style pour que vous puissiez copier le code. Alors cette feuille de style, on
00:00:44 :va la mettre à l'intérieur d'un dossier qui pour l'instant n'existe pas et on va devoir le créer.Donc le dossier, je vais le créer à l'intérieur de ce dossier main donc je vais faire un clicdroit et sélectionner directory ici. On va appeler ce dossier ressources alors attention avec un seul
00:00:58 :s et c'est bien important qu'il s'appelle comme ceci puisque c'est un dossier qui va être utilisépour FBS et c'est à l'intérieur de ce dossier qu'on va mettre toutes les ressources dont onva avoir besoin. Donc je crée ce dossier ressources avec un seul s et à l'intérieur de ce dossier
00:01:11 :ressources on va créer un autre dossier qu'on va appeler base donc là encore très important del'appeler comme ceci. Donc je crée ce dossier et à l'intérieur de ce dossier on va créer cette fois-ci
00:01:20 :un fichier qu'on va appeler style.css alors là ça n'a pas vraiment d'importance à partl'extension .css le nom du fichier vous pouvez l'appeler comme vous voulez style.css c'est un
00:01:30 :nom de fichier pour les feuilles de style qui est assez courant. Donc moi je vais utiliser cenom de fichier et à l'intérieur de ce fichier je vais coller donc le code complet de ma feuillede style. Donc vous voyez il y a pas mal de choses on n'a pas forcément besoin de tout ça là il y a
00:01:42 :pas mal de choses pour tous les widgets qui sont disponibles avec PySide. Pour l'instant on a justeun QPushButton, un QListWidget et un QTextEdit et ils sont contenus à l'intérieur de cettefeuille de style. On a notamment ici par exemple le QWidget avec le BackgroundColor que vous voyez
00:01:56 :ici qui permet d'avoir une couleur de fond qui va être un peu plus sombre. Donc ça c'est vraimentdu CSS c'est exactement la même chose à quelques différences près. Il y a quelques subtilités dans
00:02:04 :le nom par exemple des propriétés qu'on veut utiliser ici mais de manière générale c'estvraiment la même chose que ce que vous pourriez retrouver pour un site web avec du HTML et duCSS. Donc on a créé notre feuille de style et maintenant il va falloir la charger pour notre
00:02:18 :application. Alors on va avoir besoin pour charger cette feuille de style d'accéder aux ressources etpour ça on va utiliser l'application context qui est défini ici dans notre fichier main. Le problème
00:02:28 :c'est qu'on va devoir charger notre feuille de style à l'intérieur de notre main window quin'est pas dans ce fichier. Donc on va devoir passer cette application context à notre main window ce
00:02:36 :qu'on va pouvoir faire en ajoutant un paramètre ici dans notre méthode init. Donc je vais ajouterun paramètre je vais l'appeler ctx et on va le récupérer dans un attribut de ma classe qu'onva appeler également ctx. Donc maintenant j'ai mon paramètre et il me suffit de le passer lors
00:02:50 :de la création de mon instance ici. Donc je vais dire que ctx est égal à application context donccette variable qu'on a définie ici à partir de notre application context. Donc on va pouvoir
00:03:00 :récupérer comme ça ce contexte à l'intérieur de notre main window. Là en passant je vous redisle petit raccourci clavier si vous voulez rapidement revenir à votre main window vousfaites ctrl b ou pomme b dans PyCharm et ça va vous ramener directement à votre classe mainwindow donc c'est vraiment très pratique si vous voulez aller plus vite. Donc on va avoir notre
00:03:17 :contexte ici et on va pouvoir charger donc notre feuille de style directement dans modify widgetici. Donc la première chose à faire ça va être de récupérer le chemin complet vers cette feuille
00:03:27 :de style. Pour ça on va donc utiliser notre variable self.ctx et on va avoir une fonctionqui s'appelle getResource et on va lui passer uniquement le nom du fichier. Donc c'est pour
00:03:37 :ça qu'on a besoin d'avoir cette structure ici avec des noms bien précis et ça va nous permettrede récupérer le chemin complet vers cette feuille de style uniquement en spécifiant le nom du fichieret comme ça ça va être dynamique c'est à dire que peu importe où se trouve votre application
00:03:51 :automatiquement le chemin va être retrouvé grâce à cette fonction getResource. Là encore faitesbien attention on a un seul s sur le nom de cette fonction. On va ouvrir ensuite cette feuille de
00:04:00 :style donc je vais la récupérer dans une variable que je vais appeler cssFile et on va ouvrir cettefeuille de style tout simplement avec withOpen. On va l'ouvrir en mode lecture donc avec la chaîne
00:04:10 :de caractère R ici dans une variable qu'on va appeler f et on va appliquer cette feuille destyle à notre widget en faisant self.setStyleSheet et on va devoir lire le contenu de cette feuille
00:04:21 :de style donc tout simplement en faisant f.read donc f.read qui me permet de lire le contenu demon fichier que j'ai récupéré dans la variable f ici. Donc normalement ça suffit on va tester
00:04:31 :notre application on va lancer notre configuration launch ici je lance mon application et là vousvoyez qu'on a bien cette feuille de style qui est appliquée avec le mode sombre et le boutonici qui est en bleu. Donc ça fonctionne parfaitement et la dernière chose que je vais changer c'est la
00:04:45 :taille de ma fenêtre puisque pour l'instant vous voyez qu'à chaque fois qu'on lance notreapplication on a une fenêtre qui a une taille un peu bizarre pour une prise de note donc ce qu'onva faire c'est retourner dans main.py. Vous vous rappelez on avait enlevé le window.resize
00:04:58 :tout à l'heure on va le remettre mais avec des valeurs différentes donc je vais mettre par exemple550 par 600 je lance l'application et comme ça on aura voilà une fenêtre qui a meilleur minepour un logiciel de prise de note. Donc là je vais retester avec une note donc ceci est une
folder_zip
Télécharger les fichiers
cloud_download
style.css
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.