Gtk api api in app

Question

I recently studied gtk design patterns and found notifications in the app . There is a description of when to use it, but does not reference the gtk api.

I searched for it but found only GNotification and GApplication.send_notification , but this sends a notification to the desktop environment.

Can someone help find a tutorial or sample code for notification in the app?

Answer 1

The "application notification" widget is a combination of widgets, class and css behavior.

You should use Gtk.Overlay in the window where you plan to use application notifications, and then use Gtk.Frame with the predefined app-notification class. Gtk.Frame must be wrapped in Gtk.Revealer to enable slide transition.

Here is the glade ui file (app-notification.ui) with an example:

 <?xml version="1.0" encoding="UTF-8"?> <!-- Generated with glade 3.20.0 --> <interface> <requires lib="gtk+" version="3.20"/> <object class="GtkWindow" id="window1"> <property name="can_focus">False</property> <property name="default_width">440</property> <property name="default_height">250</property> <child> <object class="GtkOverlay" id="overlay1"> <property name="visible">True</property> <property name="can_focus">False</property> <child> <object class="GtkBox" id="box1"> <property name="visible">True</property> <property name="can_focus">False</property> <property name="orientation">vertical</property> <child> <object class="GtkLabel" id="label1"> <property name="visible">True</property> <property name="can_focus">False</property> <property name="label" translatable="yes">APP-NOTIFICATION EXAMPLE</property> </object> <packing> <property name="expand">True</property> <property name="fill">True</property> <property name="position">0</property> </packing> </child> <child> <object class="GtkButton" id="button1"> <property name="label" translatable="yes">show app-notification</property> <property name="visible">True</property> <property name="can_focus">True</property> <property name="receives_default">True</property> </object> <packing> <property name="expand">False</property> <property name="fill">True</property> <property name="position">1</property> </packing> </child> </object> <packing> <property name="index">-1</property> </packing> </child> <child type="overlay"> <object class="GtkOverlay" id="overlay2"> <property name="visible">True</property> <property name="can_focus">False</property> <property name="valign">start</property> <child> <object class="GtkRevealer" id="revealer2"> <property name="visible">True</property> <property name="can_focus">False</property> <property name="halign">center</property> <child> <object class="GtkFrame" id="frame2"> <property name="visible">True</property> <property name="can_focus">False</property> <property name="label_xalign">0</property> <property name="shadow_type">none</property> <child> <object class="GtkBox" id="box2"> <property name="visible">True</property> <property name="can_focus">False</property> <property name="spacing">20</property> <child> <object class="GtkLabel" id="label2"> <property name="visible">True</property> <property name="can_focus">False</property> <property name="label" translatable="yes">This is an app-notification. Click the button to dismiss</property> </object> <packing> <property name="expand">False</property> <property name="fill">True</property> <property name="position">0</property> </packing> </child> <child> <object class="GtkButton" id="button2"> <property name="visible">True</property> <property name="can_focus">True</property> <property name="receives_default">True</property> <property name="relief">none</property> <child> <object class="GtkImage" id="image2"> <property name="visible">True</property> <property name="can_focus">False</property> <property name="icon_name">window-close-symbolic</property> </object> </child> <style> <class name="image-button"/> </style> </object> <packing> <property name="expand">False</property> <property name="fill">True</property> <property name="position">1</property> </packing> </child> </object> </child> <child type="label_item"> <placeholder/> </child> <style> <class name="app-notification"/> </style> </object> </child> </object> <packing> <property name="pass_through">True</property> <property name="index">-1</property> </packing> </child> </object> </child> </object> </child> </object> </interface> 

Result in Glade:

And here is some python code that uses the previous glade file and gives some dynamic behavior for notification so you can see it in action by clicking buttons. The glade file should be named app-notification.ui, otherwise change the code to reflect this name:

 import gi gi.require_version('Gtk', '3.0') from gi.repository import Gtk def onButtonShow(self): revealer.set_reveal_child(True) def onButtonClose(self): revealer.set_reveal_child(False) builder = Gtk.Builder() builder.add_from_file("app-notification.ui") window = builder.get_object("window1") buttonShow = builder.get_object("button1") buttonClose = builder.get_object ("button2") revealer = builder.get_object("revealer2") buttonShow.connect ("clicked", onButtonShow) buttonClose.connect ("clicked", onButtonClose) window.connect ("destroy", Gtk.main_quit) window.show_all() Gtk.main()