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

de | décembre 6, 2019

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:

Propriété du GtkBoxe pour la sidebar

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.

Propriété du bouton home

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 :

Liste des icônes disponibles

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 :

BoutonIdentifiantIcôneclé traduction
Accueilhome-menugo-home-symbolichome
Filmsmovie-menuvideo-display-symbolicmovie
Sériesserie-menuvideo-joined-displays-symbolicserie
Musiquesmusic-menuaudio-x-generic-symbolicmusic
Télécommanderemote-menuemoji-objects-symbolicremote
Paramètressettings-menuapplications-system-symbolicsettings
Aidehelp-menuhelp-faq-symbolichelp

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).

Groupe sidebar
Groupe contenu

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

Une réflexion au sujet de « Développer pour le Librem 5 [part 5] – Glade – SideBar »

  1. Ping : Développer pour le Librem 5 [ part 1] – Installation – Le blog de Scandi

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.