Développer pour le Librem 5 [part 8] – Gestion des hôtes

de | décembre 23, 2019

Plutôt que d’essayer de sortir une version complète dès le début, je vais essayer de sortir une version basique mais fonctionnelle et ajouter des fonctionnalités par la suite. Voici ce qui nous manque niveau interface afin d’avoir une application fonctionnelle.

  • Une interface de contrôle de Kodi (Play, Stop, Sélection, etc…)
  • Une interface de gestion des hôtes (Ajout, suppression, édition)

Liste des hôtes

Cet écran comportera une liste d’hôtes enregistés dans l’application avec un bouton d’action pour chaque entré, un bouton d’ajout et un bouton de retour à l’écran précédent. Nous allons découper cela en deux fichiers UI.

  • ui/hosts/hosts.ui : Contiendra l’ensemble de la liste ainsi que le bouton retour et ajouter.
  • ui/hosts/hosts-item.ui : Permettra de définir un item de la liste des hosts.

hosts.ui

Rien de bien compliqué ici. Nous définissons un GtkBox comme composant parent (Case composite cochée) avec pour nom Hosts. Dedans nous ajoutons un GtkActionBar qui contient nos deux boutons back et addHost. Nous avons ensuite un petit GtkSeparator et enfin nous ajoutons un GtkListBox qui contiendra l’ensemble de nos items.

hosts-item.ui

Ce fichier contiendra la déclaration du composant HdyActionRow. Ces propriétés seront définies dynamiquement dans le code. Nous ajoutons aussi manuellement un bouton d’action, car le composant HdyActionRow n’est pas encore correctement reconnu dans glade. Ce bouton va nous permettre d’avoir accès à la page de configuration d’un hôte. À signaler l’attribut type=action qui à son importance sur le positionnement de ce bouton.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.22.1 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <requires lib="libhandy" version="0.0"/>
  <template class="HostsItem" parent="HdyActionRow">
    <property name="visible">True</property>
    <property name="can_focus">True</property>
    <property name="activatable">False</property>
    <property name="activatable_widget">editHost</property>
    <child type="action">
      <object class="GtkButton" id="editHost">
        <property name="visible">True</property>
        <property name="can_focus">True</property>
        <property name="receives_default">False</property>
        <property name="relief">half</property>
        <child>
          <object class="GtkImage">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="icon_name">gtk-preferences</property>
            <property name="icon_size">5</property>
          </object>
        </child>
      </object>
    </child>
  </template>
</interface>

N’oublions pas de créer les fichiers js correspondant et de déclarer tout ce petit monde dans les fichiers gresource:

hosts.js

#!/usr/bin/gjs
const { GObject, Gtk } = imports.gi;

var Hosts = GObject.registerClass({
    GTypeName: 'Hosts',
    Template: 'resource:///info/scandi/kodimote/ui/hosts/hosts.ui'
}, class Hosts extends Gtk.Box {

  _init(params) {
    super._init(params);
  }
});

hosts-item.js

#!/usr/bin/gjs
const { GObject, Handy, Gtk } = imports.gi;

var HostsItem = GObject.registerClass({
    GTypeName: 'HostsItem',
    Template: 'resource:///info/scandi/kodimote/ui/hosts/hostsItem.ui',
}, class HostsItem extends Handy.ActionRow {

    _init(params) {
        super._init(params);
    }

});

Ajout des hôtes

Testons maintenant l’ajout d’hôtes fictifs pour voir comment notre interface réagit. Pour cela nous allons instancier des HostsItem dans le composant Hosts comme ceci :

const { GObject, Gtk, Handy } = imports.gi;
const { HostsItem } = imports.ui.hosts.hostsItem;

var Hosts = GObject.registerClass({
    GTypeName: 'Hosts',
    Template: 'resource:///info/scandi/kodimote/ui/hosts/hosts.ui',
    InternalChildren: [
        'HostsList'
    ],
}, class Hosts extends Gtk.Box {

    _init(params) {
        super._init(params);

        const item1 = new HostsItem();
        item1.title = "Kodi Home";
        item1.subtitle = "192.168.1.10";

        const item2 = new HostsItem();
        item2.title = "Another Kodi";
        item2.subtitle = "192.168.1.12";

        this._HostsList.add(item1);
        this._HostsList.add(item2);
    }
});

On instancie nos deux HostsItem en leur donnant un titre et un sous-titre. Nous les ajoutons ensuite à notre GtkListBox, référencée sous le nom HostsList ligne 8. La méthode add ajoute automatiquement un composant GtkListBoxRow comme précisé dans la documentation

Although a Gtk.ListBox must have only Gtk.ListBoxRow children you can
add any kind of widget to it via Gtk.Container.add, and a Gtk.ListBoxRow
widget will automatically be inserted between the list and the widget.

Si nous exécutons notre application nous avons maintenant nos hôtes qui s’affichent correctement.

Dans le prochain article, nous verrons comment ajouter un hôte et le sauvegarder dans l’application afin de rendre cette affichage dynamique.

00

Une réflexion au sujet de « Développer pour le Librem 5 [part 8] – Gestion des hôtes »

  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.