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

de | décembre 3, 2019

Dans cette partie nous allons créer notre première interface grâce à Glade et la bibliothèque lib handy. Je m’inspire pour cela des exemples fournis par Purism ici :

https://developer.puri.sm/Librem5/Apps/Guides/Design/Adaptive_UI/index.html

https://source.puri.sm/Librem5/purism-gtk-3-examples/blob/adaptive-grid-layout-0-0-4/window.ui

https://developer.puri.sm/Librem5/Apps/Examples/General/Simple_Weather/Features/Adaptive_UI.html

Nous allons pour cela ouvrir le fichier window.ui présent dans le dossier src du projet.

Conteneur

Un conteneur pour notre application est déja créé, ainsi qu’une barre d’entête et un contenu central.

Vue initiale du projet

Top barre

Commençons supprimer le headerBar ainsi que le Label et par ajouter un composant HdyTitleBar qui contiendra un HdyLeaflet afin de rendre le tout adaptatif.

Dedans nous ajoutons deux GtkHeaderBar séparer par un GtkSeparator. Seulement, il y à un problème, LibHandy ne supporte par l’ajout de plusieurs enfants pour l’élément HdyLeaflet via Glade. Le seul moyen d’y arriver est de modifier le fichier .glade du projet en ajoutant les deux composants nécessaire

<child>
     <object class="GtkSeparator" id="separator_header">
          <property name="visible">True</property>
               <style>
                    <class name="sidebar"/>
               </style>
     </object>
     <packing>
          <property name="name">separator</property>
      </packing>
</child>
<child>
      <object class="GtkHeaderBar" id="content_header">
           <property name="hexpand">True</property>
           <property name="show-close-button">True</property>
           <property name="visible">True</property>
       </object>
       <packing>
            <property name="name">content</property>
       </packing>
</child>

Cela nous donne au final l’arborescence suivante :

Dans les options du composant GtkHeaderBar main_header, nous définissons le titre à Kodimote

Un clic droit sur main-window puis sur Apercu de capture permet de visualiser le rendu de ce que nous avons mis en place.

Aperçu de la barre de navigation

On est plutôt pas mal. Ajoutons maintenant un bouton de menu permettant de faire coulisser le panneau de gauche lorsque l’ont cliquera dessus. Pour cela nous allons utiliser un composant GtkRevealer dans lequel nous placerons notre bouton.

Arborescence bouton sidebar

Dans notre main_header, nous avons donc notre composant GtkRevealer avec la valeur Révéler l’enfant activée dans l’onglet Général. Cela est nécessaire pour afficher notre bouton. Nous ajoutons ensuite un GtkButton avec l’id menu-toogle. Enfin un GtkImage nommé menu-toogle-icon. Nous donnons la valeur open-menu-symbolic, comme nom de l’icône dans l’onglet Général pour faire apparaître une icône type “hamburger”

Il nous reste maintenant à rajouter le bouton de contrôle marche/arrêt pour Kodi. Pour cela ajoutons il nous faut d’abord permettre l’ajout d’un second élément dans le composant main_header. Allez dans Général et modifier la valeur du champs Nombre d'éléments à 2.

Vous pouvez remarquer que j’ai aussi ajouté la valeur kodi-state au sous-titre du composant main_header. Voici les valeurs utilisées en cliquant sur l’icone de modification du champs :

Sur cette écran nous définissons une clé qui sera remplacée par la valeur propre à la langue utilisée par l’utilisateur et un contexte de traduction pour aider le traducteur.

Bouton Wake on Lan

Ajoutons maintenant notre bouton à notre composant main_header. Pour cela sélectionner le composant GtkButton dans l’onglet Contrôle :

Ajoutons le à notre composant main_header et donnons lui l’id wol-button. Pour ajouter un icon dans ce boutons nous devons d’abord cocher la cache Ajouter un contenu personnalisé . Ensuite ajoutons un GtkImage dans notre bouton avec comme nom d'icone: system-shutdown-symbolic

Nous devons maintenant avoir l’arborescence suivante :

Générons un apercu avec un clic droit sur l’arborescence du projet et Aperçu de la capture. Nous avons maintenant ceci :

Ceci est pas mal mais le bouton Wake on Lan n’est pas devrait être à droite. Pour cela allons dans les propriétés du bouton, onglet Agencement, et modifions la valeur de la clé Type d'empaquetage à Fin.

Cela est mieux. Nous avons maintenant une barre de menu operationnel.

00

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

  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.