Développer pour le Librem 5 [part 5] – Glade – SideBar

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.

00