# Γραμμή κατάστασης (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Εμφάνιση ειδοποιήσεων σε μια αφοσιωμένη γραμμή κατάστασης
Ελληνική μεταφραστική ομάδα GNOME
team@gnome.gr 2012-2015
Δημήτρης Σπίγγος
dmtrs32@gmail.com 2012, 2013
Μαρία Θουκιδίδου
marablack3@gmail.com 2014
Θάνος Τρυφωνίδης
tomtryf@gmail.com 2014, 2015

# Γραμμή κατάστασης

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.

Μηνύματα που προωθούνται σε μια γραμμή κατάστασης πηγαίνουν στην κορυφή της στοίβα της και μπορούν να φεύγουν για να εμφανίσουν την επόμενη πιο πρόσφατη. Μπορείτε επίσης να καθαρίσετε κάθε μήνυμα συγκεκριμένου τύπου μονομιάς. Αυτό το παράδειγμα εφαρμογής δείχνει αυτές τις συναρτήσεις.

# Βιβλιοθήκες για εισαγωγή

#!/usr/bin/gjs

const Gio = imports.gi.Gio; const Gtk = imports.gi.Gtk; const Lang = imports.lang;

Αυτές είναι οι βιβλιοθήκες που χρειαζόμαστε να εισάγουμε αυτήν την εφαρμογή για να εκτελεστεί. Να θυμόσαστε ότι η γραμμή που λέει στο GNOME ότι χρησιμοποιούμε Gjs χρειάζεται πάντοτε να πάει στην αρχή.

# Δημιουργία του παραθύρου εφαρμογής

const StatusbarExample = new Lang.Class({ Name: 'Statusbar Example',

// Δημιουργία της εφαρμογής αυτής καθεαυτής _init: function() { this.application = new Gtk.Application({ application_id: 'org.example.jsstatusbar', flags: Gio.ApplicationFlags.FLAGS_NONE });

// Σύνδεση των σημάτων 'activate' και 'startup' με τις συναρτήσεις επανάκλησης this.application.connect('activate', Lang.bind(this, this._onActivate)); this.application.connect('startup', Lang.bind(this, this._onStartup)); },

// Η συνάρτηση επανάκλησης για το σήμα 'activate' παρουσιάζει ένα παράθυρο όταν είναι ενεργή _onActivate: function() { this._window.present(); },

// Η συνάρτηση επανάκλησης για το σήμα 'startup' δομεί τη διεπαφή χρήστη _onStartup: function() { this._buildUI (); },

Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση StatusbarExample. Ο παραπάνω κώδικας δημιουργεί μια Gtk.Application για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

// Δόμηση της διεπαφής χρήστη της εφαρμογής _buildUI: function() {

// Δημιουργία του παραθύρου της εφαρμογής this._window = new Gtk.ApplicationWindow({ application: this.application, window_position: Gtk.WindowPosition.CENTER, default_height: 120, default_width: 300, title: "Button Clicker"})·

// Δημιουργία μιας φατνωμένης διεπαφής this._panes = new Gtk.Paned ({ orientation: Gtk.Orientation.VERTICAL })·

Η συνάρτηση _buildUI είναι εκεί που βάζουμε όλο τον κώδικα για δημιουργία διεπαφής χρήστη της εφαρμογής. Το πρώτο βήμα είναι η δημιουργία ενός νέου Παράθυρο εφαρμογής Gtk (Gtk.ApplicationWindow) για να μπουν μέσα όλα τα γραφικά στοιχεία. Το επόμενο βήμα είναι η δημιουργία μιας κάθετα προσανατολισμένης διεπαφής Gtk.Paned, για διαίρεση του παραθύρου σε δύο ενότητες. Αυτός ο τρόπος της γραμμής κατάστασης φαίνεται όπως αυτών που χρησιμοποιούνται σε άλλες εφαρμογές και παραμένει στη βάση του παραθύρου, ακόμα κι αν ο χρήστης το αυξομειώσει.

# Δημιουργία κουμπιών

// Δημιουργία του κύριου πλήκτρου this._clickMe = new Gtk.Button ({ label: "Click Me!" }); this._clickMe.connect ("clicked", Lang.bind (this, this._clicked));

// Δημιουργία του πλήκτρου επιστροφής this._backButton = new Gtk.Button ({ label: "gtk-go-back", use_stock: true }); this._backButton.connect ("clicked", Lang.bind (this, this._back));

// Δημιουργία του πλήκτρου καθαρισμού this._clearButton = new Gtk.Button ({ label: "gtk-clear", use_stock: true }); this._clearButton.connect ("clicked", Lang.bind (this, this._clear));

Αυτός ο κώδικας δημιουργεί τα τρία Κουμπιά Gtk (Gtk.Buttons) που θα χρησιμοποιήσουμε για την προώθηση ενός νέου μηνύματος στη γραμμή κατάστασης, κλείνοντας το τελευταίο και καθαρίζοντας όλα τα υπάρχοντα μηνύματα. Τα κουμπιά "πίσω" και "καθαρισμός" είναι κουμπιά παρακαταθήκης, που μεταφράζονται αυτόματα σε οποιαδήποτε γλώσσα υποστηρίζει το GNOME.

// Τοποθέτηση των κουμπιών σε πλέγμα 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);

// Τοποθέτηση του πλέγματος σε ένα μεγάλο πλαίσιο που γεμίζει το περισσότερο παράθυρο this._topFrame = new Gtk.Frame ({ border_width: 20, height_request: 90, width_request: 300}); this._topFrame.add (this._grid);

Αυτός ο κώδικας δημιουργεί το Gtk.Grid που θα χρησιμοποιήσουμε για οργάνωση των κουμπιών και επισυνάπτει τα κουμπιά σε αυτό σε σειρά. Δημιουργεί έπειτα ένα Gtk.Frame που θα καταλάβει το περισσότερο παράθυρο και έχει μεγάλη ποσότητα συμπλήρωσης γύρω από τα κουμπιά και προσθέτει το πλέγμα στο πλαίσιο. Σημειώστε ότι θα χρειαστούμε ακόμα να βάλουμε το πλαίσιο στη φάτνωμα διεπαφή και έπειτα θα το προσθέσουμε στο ApplicationWindow.

# Δημιουργία της γραμμής κατάστασης

// Δημιουργία της γραμμής κατάστασης this._statusbar = new Gtk.Statusbar();

// Παρακολούθηση των αριθμών των φορών που το πλήκτρο πατήθηκε this.Clicks = 0; this.ContextID = this._statusbar.get_context_id ("Number of Clicks");

// Δίνει στη γραμμή κατάστασης ένα αρχικό μήνυμα this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);

// Τοποθέτηση της γραμμής κατάστασης σε δικό της πλαίσιο στο τέλος this._barFrame = new Gtk.Frame ({ height_request: 30 }); this._barFrame.add (this._statusbar);

Εδώ δημιουργούμε τη Gtk.Statusbar, και προωθούμε ένα μήνυμα σε αυτό για ξεκίνημα. Έπειτα του δίνουμε το δικό του στενό πλαίσιο στον πάτο του παραθύρου.

Κάθε μήνυμα χρειάζεται να έχει μια ταυτότητα συμφραζομένων, που είναι μια ακέραιη τιμή που μπορείτε να πάρετε από τη γραμμή κατάστασης με τη συνάρτηση get_context_id(). Η μόνη παράμετρος του είναι η τιμή συμβολοσειράς που χρησιμοποιείτε για περιγραφή αυτής της συγκεκριμένης ταυτότητας συμφραζομένων. Κανονικά, θα πάρετε μια νέα ταυτότητα συμφραζομένων για διαφορετικά είδη μηνυμάτων, έτσι που να μπορείτε να χρησιμοποιήσετε τη συνάρτηση remove() για να αφαιρέσετε ένα συγκεκριμένο μήνυμα και όχι μόνο το πιο πρόσφατο στη στοίβα. Αυτό είναι ένα απλό παράδειγμα με μόνο ένα είδος μηνύματος, αν και, έτσι χρησιμοποιούμε μόνο ένα για καθένα.

Χρησιμοποιούμε τη συνάρτηση push() για την προώθηση ενός νέου μηνύματος στη στοίβα. Η πρώτη της παράμετρος είναι η ταυτότητα συμφραζόμενων και η δεύτερή της είναι το μήνυμα.

// Συγκέντρωση των πλαισίων στη φατνωμένη διεπαφή this._panes.pack1 (this._topFrame, true, false); this._panes.pack2 (this._barFrame, false, false);

// Τοποθέτηση των φατνωμάτων στο παράθυρο this._window.add (this._panes);

// Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων this._window.show_all(); },

Αυτός ο κώδικας τελειώνει δημιουργώντας το παράθυρο, πακετάροντας τα πλαίσια μέσα στο φάτνωμα, το προσθέτει στο παράθυρο και λέει στο παράθυρο να εμφανίσει όλα τα θυγατρικά γραφικά στοιχεία.

# Συναρτήσεις για αλληλεπίδραση με τη γραμμή κατάστασης

_clicked: function() {

// Αύξηση του αριθμού των πατημάτων κατά 1 this.Clicks++;

// Ενημέρωση της γραμμής κατάστασης με τον νέο αριθμό πατημάτων this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);

},

_back: function () {

// Αν υπήρξαν πατήματα, μείωση κατά 1 και αφαίρεση της τελευταίας ενημέρωσης της γραμμής κατάστασης if (this.Clicks > 0 ) { this.Clicks--; this._statusbar.pop (this.ContextID); };

},

_clear: function () {

// Επαναφορά του αριθμού των πατημάτων this.Clicks = 0;

// Εκκαθάριση όλων των μηνυμάτων που προωθήθηκαν στη γραμμή κατάστασης this._statusbar.remove_all (this.ContextID);

// Επαναφορά του μηνύματος της γραμμής κατάστασης this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);

}

});

Εδώ έχουμε συναρτήσεις που δείχνουν προώθηση μηνύματος στη στοίβα, διώχνοντας την κορυφή του από αυτό και καθαρίζοντας όλα τα μηνύματα της συγκεκριμένης ταυτότητας συμφραζομένων. Η συνάρτηση pop() παίρνει μόνο μια παράμετρο, που είναι η ταυτότητα συμφραζομένων για τον τύπο του μηνύματος που θέλετε να διώξετε από το πιο πρόσφατο. Η συνάρτηση remove_all() δουλεύει με τον ίδιο τρόπο, εκτός από την αφαίρεση όλων των μηνυμάτων αυτού του τύπου από τη στοίβα.

// Εκτέλεση της εφαρμογής let app = new StatusbarExample (); app.application.run (ARGV);

Τελικά, δημιουργούμε ένα νέο παράδειγμα της τελειωμένης κλάσης StatusbarExample και εκτελούμε την εφαρμογή.

# Δείγμα πλήρους κώδικα

#!/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