Attaquons-nous maintenant à la création de la sidebar. Pour cela nous allons commencer par rajouter un HdyLeafet
qui contiendra notre sidebar et notre contenu de page. Les deux leaflet (La barre de titre et le contenu) seront ensuite synchronisé

Dans l’onglet Général
, en identifiant nous modifions la valeur à content
et le Mode transition type
et Child transition type
à Slide
. Au début j’étais parti sur un combo GtkStackSidebar
+ GTkStack
. Le composant GtkStack
permet de gérer plusieurs pages en affichant seulement l’une d’entre elle. Le GtkStackSidebar
permettant d’automatiquement changer la page voulue. Le problème c’est que le composant GTKStackSidebar
, est un peu limité pour le moment et ne supporte pas l’ajout d’icône dans les menus. Je vais donc utiliser un GtkBox
en remplacement et gérer les transitions des pages en manuel.
Ajoutons donc un GtkBox
dans notre HdyLeaflet
content
. De la même manière que pour la barre de titre nous ajoutons le GtkSeparator
et le GtkStack
directement dans le code.
<child> <object class="GtkSeparator" id="separator_content"> <property name="visible">True</property> <property name="can_focus">False</property> <style> <class name="sidebar"/> </style> </object> <packing> <property name="name">separator</property> </packing> </child> <child> <object class="GtkStack" id="stack-content"> <property name="visible">True</property> <property name="can_focus">False</property> <property name="transition_type">crossfade</property> </object> </child>
Ce qui nous donne :

Commençons par notre GtkBox. Voici les réglages utilisés:

On renomme le composant en sidebar-menu
, et on indique que l’on accepte 8 enfants dans le champ Nombre d'éléments
. Ceux-ci seront nos entrées de menu. Nous avons plus qu’à ajouter nos boutons faisant office de menu. Je vous donne l’exemple du bouton home
. Seules les valeurs changent pour les autres.

Rien de bien compliqué. On définit l’identifiant à home-menu
. Pour l’icône, on choisit Etiquette avec image optionnelle
. On renseigne une clé pour la traduction et on choisit une icône :

Normalement votre liste est vide. Cliquez sur Nouveau
, pour créer une nouvelle icône pour le bouton. Je vous mets un tableau avec les différentes valeurs utilisées pour les boutons :
Bouton | Identifiant | Icône | clé traduction |
Accueil | home-menu | go-home-symbolic | home |
Films | movie-menu | video-display-symbolic | movie |
Séries | serie-menu | video-joined-displays-symbolic | serie |
Musiques | music-menu | audio-x-generic-symbolic | music |
Télécommande | remote-menu | emoji-objects-symbolic | remote |
Paramètres | settings-menu | applications-system-symbolic | settings |
Aide | help-menu | help-faq-symbolic | help |
Au final, nous avons ceci :

Si l’on affiche l’application actuellement, on obtient ceci :

C’est pas mal, mais il subsiste plusieurs problèmes.
- Notre sidebar ne disparâit pas lors du redimensionnement
- Les séparateurs de notre barre de titre et de notre sidebar ne sont pas synchronisés.
On va résoudre ces deux problèmes en ajoutant deux GtkSizeGroup
. Le premier avec la partie gauche de notre barre de titre et la sidebar. Le second avec la partie droite de notre barre de titre et le contenu (GtkStack
).


On obtient l’arborescence suivante :

Si l’on affiche l’aperçu on remarque que notre application fonctionne correctement.


Notre application commence maintenant à ressembler à quelque chose. Seulement, le fichier window.ui commence à devenir un peu long maintenant. Nous allons donc essayer de découper notre application en plusieurs morceaux.
Ping : Développer pour le Librem 5 [ part 1] – Installation – Le blog de Scandi