Gnome: Desarrollo de aplicaciones. Pango

Gtk dispone de Pango, que es una librería que nos permite, entre otras cosas, renderizar el HTML, pero no todo y no todos los casos.

Pango está limitado en los tags que puede renderizar y algunos necesitan transformarse en tags que entienda y traducirlos los html entities. Aquí nos topamos con el html del "descrition" en los xml, que aparte de contener html, también puede contener htmlentities. El problema real es que no existe en Vala un vapi que haga esto como puede hacerlo html2Pango de Rust y son funcionalidades muy tediosas de realizar ya que, no solo requieren replaces de textos, sino también de expresiones regulares de búsqueda de tags.

Ahora mismo se me pasan por la cabeza dos preguntas:

¿Merece la pena dedicar tiempo a hacer un parser de html para adaptarlo a Pango para que lo pueda renderizar?

¿Hay alguna alternativa que me permita abordar esto en un futuro si me lo replanteo?

A la primera pregunta respondería que ahora mismo no. Son funcionalidades muy laboriosas de escribir y probar y no aporta nada para el objetivo de esta aplicación. Si el usuario quiere dedicar tiempo a hacer un parser o pedírselo a una IA que se sienta libre de hacerlo.

A la segunda pregunta voy a responder que sí. La solución pasa por cambiar la descripción por la fecha, hacer el título un poco más grande y separar el título de la fecha con una línea y linkamos cada fila con el link del item del rss que se abra en el navegador por defecto. Le añadimos un poco de css para que se vea mejor y listo. 

Lo primero que podemos ver es cómo añadir un css a la aplicación. Hay que decir que las css para Gtk están limitadas y no todo lo que podemos usar para un html va a a funcionar en Gtk. Como siempre, ante la duda, consultad las páginas de la documentación: https://docs.gtk.org/gtk4/css-properties.html. 

No hay mucho que explicar para un archivo css.

data/ui/css/style.css

list row.item-row {
  padding: 4px 0;
}

.item-row {
  border-radius: 12px;
  margin: 4px 8px;
  padding: 8px 12px;
  transition: background-color 150ms ease;
}

.item-row .title-3 {
  font-weight: 600;
}

.item-row separator {
  margin: 6px 0 4px 0;
  opacity: 0.5;
}

.item-row .caption {
  opacity: 0.7;
}

row:hover .item-row {
  background-color: alpha(currentColor, 0.05);
}

row:selected .item-row {
  background-color: alpha(@accent_bg_color, 0.15);
}

Añadimos la css al fichero de recursos.

data/example.gresource.xml

<?xml version="1.0" encoding="UTF-8"?>
<gresources>
  <gresource prefix="/io/github/agustingv/example">
    <file preprocess="xml-stripblanks">ui/main-window.ui</file>
    <file preprocess="xml-stripblanks">ui/item-row.ui</file>
    <file>ui/css/style.css</file>
  </gresource>
</gresources>

Aquí viene la parte interesante el cómo y dónde cargamos la css. Esta css es un recurso global que aplica a toda la aplicación por lo que si recordamos el ciclo de vida de una aplicación en Gnome lo vamos a incluir en el startup que es donde se cargan las hojas de estilo.

src/Application/Application.vala

        protected override void startup ()
        {
            base.startup ();

            var provider = new Gtk.CssProvider ();
            provider.load_from_resource ("/io/github/agustingv/example/ui/css/style.css");
        //TODO: revisar StyleContext deprecated since Gtk 4.10
            Gtk.StyleContext.add_provider_for_display (
                Gdk.Display.get_default (),
                provider,
                Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
            );
        }

Hay que apuntar que hay un problema con Gtk.StyleContext y Vala ya que esta funcionalidad está marcada como deprecated para Gtk 4.10 (https://valadoc.org/gtk4/Gtk.StyleContext.html) por lo que va a salir un aviso en la compilación. Más adelante podemos abordar este tema por ahora y para nuestro objetivo nos va a funcionar. Añadimos un comentario TODO para que no se nos olvide revisarlo.

Ya que tenemos las css cargados vamos a modificar el ItemRow. Quitamos el "description" y añadimos el "pubDate" también hemos quitado algunos atributos y puesto un class name para las css

data/ui/item-row.ui

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <requires lib="gtk" version="4.0"/>

  <template class="ExampleItemRow" parent="GtkBox">
    <property name="orientation">vertical</property>
    <property name="spacing">4</property>
    <style><class name="item-row"/></style>

    <child>
      <object class="GtkLabel" id="title_label">
        <property name="xalign">0</property>
        <property name="ellipsize">end</property>
        <style><class name="title-3"/></style>
        <binding name="label">
          <lookup name="title" type="ExampleItem">
            <lookup name="item">ExampleItemRow</lookup>
          </lookup>
        </binding>
      </object>
    </child>

    <child>
      <object class="GtkSeparator">
        <property name="orientation">horizontal</property>
      </object>
    </child>

    <child>
      <object class="GtkLabel" id="pub_date_label">
        <property name="xalign">0</property>
        <property name="ellipsize">end</property>
        <style><class name="dim-label"/><class name="caption"/></style>
        <binding name="label">
          <lookup name="pubDate" type="ExampleItem">
            <lookup name="item">ExampleItemRow</lookup>
          </lookup>
        </binding>
      </object>
    </child>

  </template>
</interface>

Modificamos la View para añadir la funcionalidad de abrir el enlace en el navegador. Aquí usamos un nuevo objeto de Gtk que es GestureClick (https://docs.gtk.org/gtk4/class.GestureClick.html No hace falta que sea el link de la documentación de Vala, el api en Vala solo es un binding del api de C ) que se encarga del control de clicks del ratón en una zona.

src/View/ItemRow.vala

...
        construct
        {
            if (item.link != "") {
                set_cursor_from_name ("pointer");

                var click = new Gtk.GestureClick ();
                click.released.connect (open_link);
                add_controller (click);
            }
        }

        private void open_link ()
        {
            var launcher = new Gtk.UriLauncher (item.link);
            launcher.launch.begin (get_root () as Gtk.Window, null, (obj, res) => {
                try {
                    launcher.launch.end (res);
                } catch (Error e) {
                    warning ("Failed to open link: %s", e.message);
                }
            });
        }
...

Con esto hemos acabado por ahora. La aplicación ahora se verá de esta forma: 

Con pocas modificaciones y sin quemarnos mucho hemos conseguido mejorar la visualización y la funcionalidad de la aplicación. Ahora sí, nos vemos en el siguiente artículo donde abordaremos la creación de un menú de preferencias y los settings para la aplicación.