Personnalisation des icônes¶
Jusqu'à présent, notre application utilise l'icône par défaut "abeille grise". Configurons l'application pour qu'elle utilise notre propre icône.
Note
Dans BeeWare, le terme icône peut désigner deux choses différentes :
-
Icône d'application - Image qui représente votre application sur le bureau, le dock ou l'écran d'accueil.
-
Icônes d'exécution - Images utilisées dans l'interface de votre application (par exemple, dans les boutons ou les tableaux).
Ajouter une icône¶
Chaque plateforme utilise un format différent pour les icônes d'application - et certaines plateformes ont besoin de multiples icônes de tailles et de formes différentes. Pour tenir compte de cela, Briefcase fournit un moyen abrégé de configurer une icône une fois, puis de faire en sorte que cette définition s'étende à toutes les différentes icônes nécessaires pour chaque plate-forme particulière.
Editez votre pyproject.toml, en ajoutant un nouvel élément de configuration
icon dans la section de configuration [tool.briefcase.app.helloworld], juste
au-dessus de la définition sources :
icon = "icons/helloworld"
Cette définition d'icône ne spécifie pas d'extension de fichier. La valeur sera utilisée comme préfixe ; chaque plateforme ajoutera des éléments supplémentaires à ce préfixe pour créer les fichiers nécessaires à chaque plateforme. Certaines plateformes nécessitent plusieurs fichiers d'icônes ; ce préfixe sera combiné avec des modificateurs de taille de fichier et de variante pour générer la liste des fichiers d'icônes utilisés.
Nous pouvons maintenant exécuter briefcase update à nouveau - mais cette fois,
nous passons le drapeau --update-resources, indiquant à Briefcase que nous
voulons installer les nouvelles ressources de l'application (c'est-à-dire les
icônes) :
(beeware-venv) $ briefcase update --update-resources
[helloworld] Mise à jour du code de l'application...
Installation de src/helloworld... terminée
[helloworld] Mise à jour des ressources de l'application...
Impossible de trouver icons/helloworld.icns pour l'icône de l'application ; utilisation de l'icône par défaut
[helloworld] Suppression du contenu inutile de l'application...
Suppression du contenu inutile du bundle de l'application... terminée
[helloworld] Application mise à jour.
(beeware-venv) $ briefcase update --update-resources
[helloworld] Mise à jour du code de l'application...
Installation de src/helloworld... terminée
[helloworld] Mise à jour des ressources de l'application...
Impossible de trouver icons/helloworld-16.png pour l'icône d'application de 16 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-32.png pour l'icône d'application de 32 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-64.png pour l'icône d'application de 64 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-128.png pour l'icône d'application de 128 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-256.png pour l'icône d'application de 256 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-512.png pour l'icône d'application de 512 px ; utilisation de l'icône par défaut
[helloworld] Suppression du contenu inutile de l'application...
Suppression du contenu inutile du bundle de l'application... terminé
[helloworld] Application mise à jour.
(beeware-venv) C:\...>briefcase update --update-resources
[helloworld] Mise à jour du code de l'application...
Installation de src/helloworld... terminée
[helloworld] Mise à jour des ressources de l'application...
Impossible de trouver icons/helloworld.ico pour l'icône de l'application ; utilisation de l'icône par défaut
[helloworld] Suppression du contenu inutile de l'application...
Suppression du contenu inutile du bundle de l'application... terminée
[helloworld] Application mise à jour.
(beeware-venv) $ briefcase update android --update-resources
[helloworld] Mise à jour du code de l'application...
Installation de src/helloworld... terminée
[helloworld] Mise à jour des ressources de l'application...
Impossible de trouver icons/helloworld-round-48.png pour l'icône d'application ronde de 48 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-round-72.png pour l'icône d'application ronde de 72 px ; utilisation de la valeur par défaut
Impossible de trouver icons/helloworld-round-96.png pour l'icône d'application ronde de 96 px ; utilisation de la valeur par défaut
Impossible de trouver icons/helloworld-round-144.png pour l'icône d'application ronde de 144 px ; utilisation de la valeur par défaut
Impossible de trouver icons/helloworld-round-192.png pour l'icône d'application ronde de 192 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-square-48.png pour l'icône d'application carrée de 48 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-square-72.png pour l'icône d'application carrée de 72 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-square-96.png pour l'icône d'application carrée de 96 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-square-144.png pour l'icône d'application carrée de 144 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-square-192.png pour l'icône d'application carrée de 192 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-square-320.png pour l'icône d'application carrée de 320 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-square-480.png pour l'icône d'application carrée de 480 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-square-640.png pour l'icône d'application carrée de 640 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-square-960.png pour l'icône d'application carrée de 960 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-square-1280.png pour l'icône d'application carrée de 1280 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-adaptive-108.png pour l'icône d'application adaptative de 108 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-adaptive-162.png pour l'icône d'application adaptative de 162 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-adaptive-216.png pour l'icône d'application adaptative de 216 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-adaptive-324.png pour l'icône d'application adaptative de 324 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-adaptive-432.png pour l'icône d'application adaptative de 432 px ; utilisation de l'icône par défaut
[helloworld] Suppression du contenu inutile de l'application...
Suppression du contenu inutile du bundle de l'application... terminé
[helloworld] Application mise à jour.
(beeware-venv) $ briefcase iOS --update-resources
[helloworld] Mise à jour du code de l'application...
Installation de src/helloworld... terminée
[helloworld] Mise à jour des ressources de l'application...
Impossible de trouver icons/helloworld-20.png pour l'icône d'application de 20 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-29.png pour l'icône d'application de 29 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-40.png pour l'icône d'application de 40 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-58.png pour l'icône d'application de 58 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-60.png pour l'icône d'application de 60 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-76.png pour l'icône d'application de 76 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-80.png pour l'icône d'application de 80 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-87.png pour l'icône d'application de 87 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-120.png pour l'icône d'application de 120 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-152.png pour l'icône d'application de 152 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-167.png pour l'icône d'application de 167 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-180.png pour l'icône d'application de 180 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-640.png pour l'icône d'application de 640 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-1024.png pour l'icône d'application de 1024 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-1280.png pour l'icône d'application de 1280 px ; utilisation de l'icône par défaut
Impossible de trouver icons/helloworld-1920.png pour l'icône d'application de 1920 px ; utilisation de l'icône par défaut
[helloworld] Suppression du contenu inutile de l'application...
Suppression du contenu inutile du bundle de l'application... terminé
[helloworld] Application mise à jour.
Cela indique le ou les fichiers d'icônes spécifiques que Briefcase attend. Cependant, comme nous n'avons pas fourni les fichiers d'icônes réels, l'installation échoue et Briefcase revient à la valeur par défaut (la même icône "abeille grise").
Fournissons quelques icônes réelles. Téléchargez ce paquet icons.zip, et décompressez-le à la racine de votre répertoire de projet. Après la décompression, votre répertoire de projet devrait ressembler à quelque chose comme :
beeware-tutorial/
├── beeware-venv/
│ └── ...
└── helloworld/
├── ...
├── icons/
│ ├── helloworld.icns
│ ├── helloworld.ico
│ ├── helloworld.png
│ ├── helloworld-16.png
│ └──...
├── src/
│ └── ...
└── pyproject.toml
Il y a beaucoup d'icônes dans ce dossier, mais la plupart d'entre elles devraient avoir la même apparence : un serpent vert sur un fond bleu clair :
La seule exception sera les icônes avec -adaptive- dans leur nom ; celles-ci
auront un arrière-plan transparent. Cela représente toutes les différentes
tailles et formes d'icônes dont vous avez besoin pour développer une application
sur toutes les plateformes supportées par Briefcase.
Maintenant que nous avons les icônes, nous pouvons à nouveau mettre à jour
l'application. Cependant, briefcase update ne fera que copier les ressources
mises à jour dans le répertoire de construction ; nous voulons aussi
reconstruire l'application pour nous assurer que la nouvelle icône est incluse,
puis démarrer l'application. Nous pouvons raccourcir ce processus en passant
--update-resources à notre appel à run - cela mettra à jour l'application,
mettra à jour les ressources de l'application, et ensuite démarrera
l'application :
(beeware-venv) $ briefcase run --update-resources
[helloworld] Mise à jour du code de l'application...
Installation de src/helloworld... terminée
[helloworld] Mise à jour des ressources de l'application...
Installation de icons/helloworld.icns comme icône de l'application... terminé
[helloworld] Suppression du contenu inutile de l'application...
Suppression du contenu inutile du bundle de l'application... terminé
[helloworld] Application mise à jour.
[helloworld] Signature ad hoc de l'application...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100,0 % • 00:01
[helloworld] Création de build/helloworld/macos/app/Hello World.app
[helloworld] Démarrage de l'application...
(beeware-venv) $ briefcase run --update-resources
[helloworld] Mise à jour du code de l'application...
Installation de src/helloworld... terminée
[helloworld] Mise à jour des ressources de l'application...
Installation de icons/helloworld-16.png comme icône d'application de 16 px... terminée
Installation de icons/helloworld-32.png comme icône d'application de 32 px... terminé
Installation de icons/helloworld-64.png comme icône d'application de 64 px... terminé
Installation de icons/helloworld-128.png comme icône d'application de 128 px... terminé
Installation de icons/helloworld-256.png comme icône d'application de 256 px... terminé
Installation de icons/helloworld-512.png comme icône d'application de 512 px... terminé
[helloworld] Suppression du contenu inutile de l'application...
Suppression du contenu inutile du bundle de l'application... terminé
[helloworld] Application mise à jour.
[helloworld] Compilation de l'application...
Compilation du binaire bootstrap...
...
[helloworld] Compilation terminée : build/helloworld/linux/ubuntu/jammy/helloworld-0.0.1/usr/bin/helloworld
[helloworld] Démarrage de l'application...
(beeware-venv) C:\...>briefcase build --update-resources
[helloworld] Mise à jour du code de l'application...
Installation de src/helloworld... terminée
[helloworld] Mise à jour des ressources de l'application...
Installation de icons/helloworld.ico comme icône de l'application... terminé
[helloworld] Suppression du contenu inutile de l'application...
Suppression du contenu inutile du bundle de l'application... terminé
[helloworld] Application mise à jour.
[helloworld] Création de l'application...
Suppression de toutes les signatures numériques de l'application stub... terminé
Configuration des détails de l'application stub... terminé
[helloworld] Création de build\helloworld\windows\app\src\Hello World.exe
[helloworld] Démarrage de l'application...
(beeware-venv) $ briefcase build android --update-resources
[helloworld] Mise à jour du code de l'application...
Installation de src/helloworld... terminée
[helloworld] Mise à jour des ressources de l'application...
Installation de icons/helloworld-round-48.png en tant qu'icône d'application ronde de 48 px... terminée
Installation de icons/helloworld-round-72.png en tant qu'icône d'application ronde de 72 px... terminé
Installation de icons/helloworld-round-96.png en tant qu'icône d'application ronde de 96 px... terminé
Installation de icons/helloworld-round-144.png en tant qu'icône d'application ronde de 144 px... terminé
Installation de icons/helloworld-round-192.png en tant qu'icône d'application ronde de 192 px... terminé
Installation de icons/helloworld-square-48.png en tant qu'icône d'application carrée de 48 px... terminé
Installation de icons/helloworld-square-72.png en tant qu'icône d'application carrée de 72 px... terminé
Installation de icons/helloworld-square-96.png en tant qu'icône d'application carrée de 96 px... terminé
Installation de icons/helloworld-square-144.png en tant qu'icône d'application carrée de 144 px... terminé
Installation de icons/helloworld-square-192.png en tant qu'icône d'application carrée de 192 px... terminé
Installation de icons/helloworld-square-320.png en tant qu'icône d'application carrée de 320 px... terminé
Installation de icons/helloworld-square-480.png en tant qu'icône d'application carrée de 480 px... terminé
Installation de icons/helloworld-square-640.png en tant qu'icône d'application carrée de 640 px... terminé
Installation de icons/helloworld-square-960.png en tant qu'icône d'application carrée de 960 px... terminé
Installation de icons/helloworld-square-1280.png en tant qu'icône d'application carrée de 1280 px... terminé
Installation de icons/helloworld-adaptive-108.png en tant qu'icône d'application adaptative de 108 px... terminé
Installation de icons/helloworld-adaptive-162.png en tant qu'icône d'application adaptative de 162 px... terminé
Installation de icons/helloworld-adaptive-216.png en tant qu'icône d'application adaptative de 216 px... terminé
Installation de icons/helloworld-adaptive-324.png en tant qu'icône d'application adaptative de 324 px... terminé
Installation de icons/helloworld-adaptive-432.png en tant qu'icône d'application adaptative de 432 px... terminé
[helloworld] Suppression du contenu inutile de l'application...
Suppression du contenu inutile du bundle de l'application... terminé
[helloworld] Application mise à jour.
[helloworld] Démarrage de l'application...
Note
Si vous utilisez une version récente d'Android, vous remarquerez peut-être que l'icône de l'application a été remplacée par un serpent vert, mais que l'arrière-plan de l'icône est blanc, et non bleu clair. Nous allons corriger cela dans l'étape suivante.
(beeware-venv) $ briefcase build iOS --update-resources
[helloworld] Mise à jour du code de l'application...
Installation de src/helloworld... terminée
[helloworld] Mise à jour des ressources de l'application...
Installation de icons/helloworld-20.png en tant qu'icône d'application de 20 px... terminé
Installation de icons/helloworld-29.png en tant qu'icône d'application de 29 px... terminé
Installation de icons/helloworld-40.png en tant qu'icône d'application de 40 px... terminé
Installation de icons/helloworld-58.png en tant qu'icône d'application de 58 px... terminé
Installation de icons/helloworld-60.png en tant qu'icône d'application de 60 px... terminé
Installation de icons/helloworld-76.png en tant qu'icône d'application de 76 px... terminé
Installation de icons/helloworld-80.png en tant qu'icône d'application de 80 px... terminé
Installation de icons/helloworld-87.png en tant qu'icône d'application de 87 px... terminé
Installation de icons/helloworld-120.png en tant qu'icône d'application de 120 px... terminé
Installation de icons/helloworld-152.png comme icône d'application de 152 px... terminé
Installation de icons/helloworld-167.png comme icône d'application de 167 px... terminé
Installation de icons/helloworld-180.png comme icône d'application de 180 px... terminé
Installation de icons/helloworld-640.png comme icône d'application de 640 px... terminé
Installation de icons/helloworld-1024.png comme icône d'application de 1024 px... terminé
Installation de icons/helloworld-1280.png comme icône d'application de 1280 px... terminé
Installation de icons/helloworld-1920.png comme icône d'application de 1920 px... terminé
[helloworld] Suppression du contenu inutile de l'application...
Suppression du contenu inutile du bundle de l'application... terminé
[helloworld] Application mise à jour.
[helloworld] Démarrage de l'application...
Note
Si vous obtenez une trace de pile faisant référence à faker ou httpx lorsque
vous lancez l'application, il est possible que vous n'ayez pas lancé votre
application pendant l'étape 7 ou 8 du tutoriel. Relancez l'application en
ajoutant l'argument -r pour mettre à jour les exigences de l'application.
Lorsque vous exécutez l'application sur iOS ou Android, outre le changement
d'icône, vous devriez également remarquer que l'écran de démarrage intègre la
nouvelle icône. Cependant, l'arrière-plan bleu clair de l'icône semble un peu
déplacé par rapport à l'arrière-plan blanc de l'écran d'accueil. Nous pouvons y
remédier en personnalisant la couleur de fond de l'écran de démarrage. Ajoutez
la définition suivante à votre pyproject.toml, juste après la définition
icon :
splash_background_color = "#D3E6F5"
Malheureusement, Briefcase n'est pas en mesure d'appliquer ce changement à un
projet déjà généré, car il faut modifier l'un des fichiers qui a été généré lors
de l'appel initial à briefcase create. Pour appliquer ce changement, nous
devons recréer l'application en relançant briefcase create. Lorsque nous
faisons cela, on nous demandera de confirmer que nous voulons écraser le projet
existant :
(beeware-venv) $ briefcase create
L'application « helloworld » existe déjà ; souhaitez-vous la remplacer [o/N] ? o
[helloworld] Suppression de l'ancien ensemble d'application...
[helloworld] Génération du modèle d'application...
...
[helloworld] Créé build/helloworld/macos/app
(beeware-venv) $ briefcase create
L'application « helloworld » existe déjà ; souhaitez-vous la remplacer [o/N] ? o
[helloworld] Suppression de l'ancien ensemble d'application...
[helloworld] Génération du modèle d'application...
...
[helloworld] Créé build/helloworld/linux/ubuntu/jammy
(beeware-venv) C:\...>briefcase create
L'application « helloworld » existe déjà ; souhaitez-vous la remplacer [o/N] ? o
[helloworld] Suppression de l'ancien ensemble d'application...
[helloworld] Génération du modèle d'application...
...
[helloworld] Créé build\helloworld\windows\app
(beeware-venv) $ briefcase create android
L'application « helloworld » existe déjà ; souhaitez-vous la remplacer [o/N] ? o
[helloworld] Suppression de l'ancien bundle d'application...
[helloworld] Génération du modèle d'application...
...
[helloworld] Créé build/helloworld/android/gradle
(beeware-venv) $ briefcase create iOS
L'application « helloworld » existe déjà ; souhaitez-vous la remplacer [o/N] ? o
[helloworld] Suppression de l'ancien bundle d'application...
[helloworld] Génération du modèle d'application...
...
[helloworld] Créé build/helloworld/ios/xcode
Vous pouvez alors recompiler et réexécuter l'application en utilisant briefcase
run. Vous ne remarquerez aucun changement dans l'application de bureau, mais
les applications Android ou iOS devraient maintenant avoir un fond d'écran bleu
clair.
Vous devrez recréer l'application de cette façon chaque fois que vous ferez un
changement dans votre pyproject.toml qui ne concerne pas le code source ou les
dépendances. Toute modification des descriptions, des numéros de version, des
couleurs ou des permissions nécessitera une étape de recréation. Pour cette
raison, pendant que vous développez votre projet, vous ne devriez pas faire de
changements manuels au contenu du dossier build, et vous ne devriez pas
ajouter le dossier build à votre système de contrôle de version. Le dossier
build doit être considéré comme entièrement éphémère - un résultat du système
de compilation qui peut être recréé si nécessaire pour refléter la configuration
actuelle de votre projet.
Ajout d'une icône d'exécution¶
Lorsqu'il s'agit d'ajouter une icône à l'interface de l'application, ce type
d'icône doit être stocké dans un répertoire distinct de celui des icônes de
l'application. Faites un clic droit sur Tibère le yak, sauvegardez cette image
au format .png et nommez-la helloworld. Le fichier doit ensuite être
sauvegardé dans le dossier icons/ du paquet source de votre application.
Votre répertoire ressemblera à ce qui suit :
beeware-tutorial/
├── beeware-venv/
│ └── ...
└── helloworld/
├── ...
├── icons/
│ ├── helloworld.icns
│ ├── helloworld.ico
│ ├── helloworld.png
│ ├── helloworld-16.png
│ └──...
├── src/
│ ├── helloworld
│ │ └── icons/
│ │ └── helloworld.png
│ └──...
└── pyproject.toml
Maintenant que l'icône d'exécution est en place, ajoutons une icône à notre bouton. Le widget bouton de Toga n'accepte qu'une icône ou du texte (pas les deux), nous allons donc mettre à jour le code du bouton pour inclure l'icône d'exécution.
helloworld_icon = toga.Icon("icons/helloworld")
button = toga.Button(
icon=helloworld_icon,
on_press=self.say_hello,
margin=5,
)
Comme les icônes d'exécution sont des ressources d'application intégrées à votre
paquetage Python, aucune reconstruction ou mise à jour des ressources n'est
nécessaire. A ce stade, vous pouvez lancer briefcase dev (ou briefcase run)
pour voir l'icône ajoutée au bouton.