This statusbar keeps track of how many times you've clicked a button. Applications like gedit use statusbars to display information at a glance, and show notifications without interrupting the user.
Messages pushed to a statusbar go on top of its stack, and can be popped off to show the next-most recent one. You can also clear away every message of a specific type all at once. This sample application demonstrates these functions.
These are the libraries we need to import for this application to run. Remember that the line which tells GNOME that we're using Gjs always needs to go at the start.
All the code for this sample goes in the StatusbarExample class. The above code creates a Gtk.Application for our widgets and window to go in.
The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new Gtk.ApplicationWindow to put all our widgets into. The next step is to create a vertically-oriented Gtk.Paned interface, to divide the window up into two sections. This way the statusbar looks like those used in other applications, and it stays at the bottom of the window, even if the user resizes it.
Here we create the Gtk.Statusbar, and push a message to it to start off with. Then we give it its own narrow frame at the bottom of the window.
Every message needs to have a context id, which is an integer value you can get from the statusbar with the get_context_id() function. Its only parameter is the string value you use to describe that particular context id. Normally, you'll get a new context id for different kinds of messages, so that you can use the remove() function to remove a specific message and not just the most recent one on the stack. This is a simple example with only one kind of message, though, so we're just using one for everything.
We use the push() function to push a new message onto the stack. Its first parameter is the context id, and its second is the message.
This code finishes up creating the window, by packing the frames into the pane, adding it to the window, and telling the window to show all child widgets.
0 ) {
this.Clicks--;
this._statusbar.pop (this.ContextID);
};
},
_clear: function () {
// Reset the number of clicks
this.Clicks = 0;
// Wipe out all the messages pushed to the statusbar
this._statusbar.remove_all (this.ContextID);
// Reset the statusbar's message
this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
}
});
]]>
Here we have functions which demonstrate pushing a message onto the stack, popping the top one off of it, and clearing all messages of a particular context id. The pop() function just takes one parameter, which is the context id for the type of message you want to pop off the most recent one of. The remove_all() function works the same way, except it removes all messages of that type from the stack.
Finally, we create a new instance of the finished StatusbarExample class, and set the application running.
#!/usr/bin/gjs
imports.gi.versions.Gtk = '3.0';
const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
class StatusbarExample {
// Create the application itself
constructor() {
this.application = new Gtk.Application({
application_id: 'org.example.jsstatusbar',
flags: Gio.ApplicationFlags.FLAGS_NONE
});
// Connect 'activate' and 'startup' signals to the callback functions
this.application.connect('activate', this._onActivate.bind(this));
this.application.connect('startup', this._onStartup.bind(this));
}
// Callback function for 'activate' signal presents window when active
_onActivate() {
this._window.present();
}
// Callback function for 'startup' signal builds the UI
_onStartup() {
this._buildUI();
}
// Build the application's UI
_buildUI() {
// Create the application window
this._window = new Gtk.ApplicationWindow({
application: this.application,
window_position: Gtk.WindowPosition.CENTER,
default_height: 120,
default_width: 300,
title: "Button Clicker"});
// Create a paned interface
this._panes = new Gtk.Paned ({
orientation: Gtk.Orientation.VERTICAL });
// Create the main button
this._clickMe = new Gtk.Button ({
label: "Click Me!" });
this._clickMe.connect ("clicked", this._clicked.bind(this));
// Create the back button
this._backButton = new Gtk.Button ({
label: "gtk-go-back",
use_stock: true });
this._backButton.connect ("clicked", this._back.bind(this));
// Create the clear button
this._clearButton = new Gtk.Button ({
label: "gtk-clear",
use_stock: true });
this._clearButton.connect ("clicked", this._clear.bind(this));
// Put the buttons in a grid
this._grid = new Gtk.Grid ({
halign: Gtk.Align.CENTER,
valign: Gtk.Align.CENTER });
this._grid.attach (this._backButton, 0, 0, 1, 1);
this._grid.attach_next_to (this._clickMe, this._backButton, Gtk.PositionType.RIGHT, 1, 1);
this._grid.attach_next_to (this._clearButton, this._clickMe, Gtk.PositionType.RIGHT, 1, 1);
// Put the grid in a large frame that fills most of the window
this._topFrame = new Gtk.Frame ({
border_width: 20,
height_request: 90,
width_request: 300});
this._topFrame.add (this._grid);
// Create the statusbar
this._statusbar = new Gtk.Statusbar();
// Keep track of the number of times the button has been clicked
this.Clicks = 0;
this.ContextID = this._statusbar.get_context_id ("Number of Clicks");
// Give the statusbar an initial message
this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
// Put the statusbar in its own frame at the bottom
this._barFrame = new Gtk.Frame ({
height_request: 30 });
this._barFrame.add (this._statusbar);
// Assemble the frames into the paned interface
this._panes.pack1 (this._topFrame, true, false);
this._panes.pack2 (this._barFrame, false, false);
// Put the panes into the window
this._window.add (this._panes);
// Show the window and all child widgets
this._window.show_all();
}
_clicked() {
// Increment the number of clicks by 1
this.Clicks++;
// Update the statusbar with the new number of clicks
this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
}
_back() {
// If there have been any clicks, decrement by 1 and remove last statusbar update
if (this.Clicks > 0 ) {
this.Clicks--;
this._statusbar.pop (this.ContextID);
};
}
_clear() {
// Reset the number of clicks
this.Clicks = 0;
// Wipe out all the messages pushed to the statusbar
this._statusbar.remove_all (this.ContextID);
// Reset the statusbar's message
this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
}
};
// Run the application
let app = new StatusbarExample ();
app.application.run (ARGV);
Gtk.Application
Gtk.ApplicationWindow
Gtk.Button
Gtk.Frame
Gtk.Paned
Gtk.Statusbar