Bonjour,

j'ai migré vers la version gtkmm-4.0 et j'ai une question sur l'utilisation des CSS

un petit programme pour l'exemple

#ifndef GTKMM_EXAMPLEWINDOW_H
#define GTKMM_EXAMPLEWINDOW_H

#include <gtkmm/window.h>
#include <gtkmm/button.h>
#include <gtkmm/cssprovider.h>

class ExampleWindow : public Gtk::Window
{
public:
  ExampleWindow();
  virtual ~ExampleWindow();

protected:
  // Signal handlers:
  void on_button_clicked();
  void on_quit_button_clicked();

  // Child widgets:
  Gtk::Button m_button, m_close;
};

#endif // GTKMM_EXAMPLEWINDOW_H

#include "examplewindow.h"
#include <gtkmm/box.h>
#include <gtkmm/image.h>
#include <gtkmm/label.h>
#include <iostream>

ExampleWindow::ExampleWindow() : m_close("Quitter")
{
  // créer une vbox
  auto vbox = Gtk::make_managed<Gtk::Box>(Gtk::Orientation::VERTICAL, 5);

  // This corresponds to Gtk::Bin::add_pixlabel("info.xpm", "cool button") in
  // gtkmm3. Create Image and Label widgets:
  auto pmap = Gtk::make_managed<Gtk::Image>("info.xpm");
  auto label = Gtk::make_managed<Gtk::Label>("cool button");
  label->set_expand(true);

  // bouton quitter
  auto pimp = Gtk::make_managed<Gtk::Image>("icons/clavier-96.png");
  vbox->append(*pimp);

  // Les met dans la Box:
  auto hbox = Gtk::make_managed<Gtk::Box>(Gtk::Orientation::HORIZONTAL, 5);
  hbox->append(*pmap);
  hbox->append(*label);

  // Dimension par défaut de la window
  set_default_size(300, 200);
  set_title("Gtkmm-4.0 boutons !");

  // Met la Box dans le bouton:
  m_button.set_child(*hbox);

  //CSS style
  Glib::ustring data = "GtkButton {background-color: #00FF00;}";
  auto provider = Gtk::CssProvider::create();
  provider->load_from_data(data);
  auto ctx = m_button.get_style_context();
  ctx->add_provider(provider, GTK_STYLE_PROVIDER_PRIORITY_USER);

  //provider->load_from_data("background: #FF0000;");
  //m_button.get_style_context()->add_provider(provider, GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

  // Signaux
  m_button.signal_clicked().connect(sigc::mem_fun(*this, &ExampleWindow::on_button_clicked));
  m_close.signal_clicked().connect([this]() { on_quit_button_clicked(); });

  m_button.set_margin(10);
  m_close.set_margin(10);

  vbox->append(m_button);
  vbox->append(m_close);
  set_child(*vbox);
}

ExampleWindow::~ExampleWindow() {}

void ExampleWindow::on_button_clicked()
{
  std::cout << "Le bouton a été cliqué." << std::endl;
}
void ExampleWindow::on_quit_button_clicked()
{
  hide();
}

#include "examplewindow.h"
#include <gtkmm/application.h>

int main(int argc, char *argv[])
{
  auto app = Gtk::Application::create("org.gtkmm.example");

  // Shows the window and returns when it is closed.
  return app->make_window_and_run<ExampleWindow>(argc, argv);
}

et ce que j'obtiens

Je pensais avoir un fond vert du premier bouton mais rien ne se passe.

Pas d'erreurs de compilation ni quand je lance le programme.

Une idée ?

-
Edité par Duncan4031 17 août 2022 à 18:31:31

Salut,

J'ai l'impression -- mais n'utilisant pas gtkmm, je ne suis pas le mieux placé pour te répondre -- que le problème vient de la manière dont tu décrit ta CSS.

Essaie peut-être d'utiliser le noeud css button sous une forme proche de button{background-color : #00FF00:}.

Par contre, je ne te promet pas que les deux boutons ne deviendront pas verts :P. Si c'est le cas, essaie peut-être en précisant le nom du bouton que tu veux modifier précédé d'un . (ex: .m_button{background-color : #00FF00}).

Enfin, peut être serais tu bien inspiré de créer un fichier avec ta CSS, car, pour l'instant, tu te limites à un bouton pour ton essai. 

Cependant, dés que tu commencera à faire des applications "un peu plus complexes", le nombre d'éléments de ton IHM risque d'augmenter assez rapidement, et il sera donc sans doute beaucoup plus facile de n'avoir pas à recompiler ton programme uniquement parce que tu veux changer la couleur de fond d'un bouton

En fait il faut ajouter une ligne, ce qui donne

  //CSS style
  Glib::ustring data = ".button {background-color: #101010;color:#FEFEFE;}";
  auto provider = Gtk::CssProvider::create();
  provider->load_from_data(data);
  auto ctx = m_button.get_style_context();
  ctx->add_class("button");
  ctx->add_provider(provider, GTK_STYLE_PROVIDER_PRIORITY_USER);

pour les explications en anglais

Adds a style class to context, so later uses of the style context will make use of this new class for styling. In the CSS file format, a `GtkEntry` defining a “search” class, would be matched by: ```css entry.search { ... } ``` While any widget defining a “search” class would be matched by: ```css .search { ... } ```

Paramètres :
class_name – Class name to use in styling.

Et comme tu le conseilles avec un fichier css, c'est plus facile à programmer

  //CSS style
  //Glib::ustring data = ".button {background-color: #101010;color:#FEFEFE;}";
  auto provider = Gtk::CssProvider::create();
  provider->load_from_path("css/bouton.css");
  auto ctx = m_button.get_style_context();
  ctx->add_class("button");
  ctx->add_provider(provider, GTK_STYLE_PROVIDER_PRIORITY_USER);

Fichier css par exemple

.button{
  background-color: #101010;
  color: blanchedalmond;
  border:solid 2px #ffffff;
  border-radius: 7px;
  border: 7px;
}
.button:hover{
  background-color:lavender;
  color: #252525;
}

-
Edité par Duncan4031 18 août 2022 à 12:46:19