<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" xmlns:xi="http://www.w3.org/2001/XInclude" type="guide" style="task" id="statusbar.js" xml:lang="el">

  <info>

  <title type="text">Γραμμή κατάστασης (JavaScript)</title>

    <link type="guide" xref="beginner.js#display-widgets"/>

    <revision version="0.1" date="2012-06-10" status="draft"/>

    <credit type="author copyright">

      <name>Taryn Fox</name>

      <email its:translate="no">jewelfox@fursona.net</email>

      <years>2012</years>

    </credit>

    <desc>Εμφάνιση ειδοποιήσεων σε μια αφοσιωμένη γραμμή κατάστασης</desc>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Ελληνική μεταφραστική ομάδα GNOME</mal:name>

      <mal:email>team@gnome.gr</mal:email>

      <mal:years>2012-2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Δημήτρης Σπίγγος</mal:name>

      <mal:email>dmtrs32@gmail.com</mal:email>

      <mal:years>2012, 2013</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Μαρία Θουκιδίδου</mal:name>

      <mal:email>marablack3@gmail.com</mal:email>

      <mal:years>2014</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Θάνος Τρυφωνίδης</mal:name>

      <mal:email>tomtryf@gmail.com</mal:email>

      <mal:years>2014, 2015</mal:years>

    </mal:credit>

  </info>

  <title>Γραμμή κατάστασης</title>

  <media type="image" mime="image/png" src="media/statusbar2.png"/>

  
Αυτή η γραμμή κατάστασης κρατά ίχνη του αριθμού των φορών που πατήσατε ένα κουμπί. Εφαρμογές όπως <link href="http://projects.gnome.org/gedit/">gedit</link> χρησιμοποιούν τις γραμμές κατάστασης για εμφάνιση πληροφοριών με μια ματιά, και εμφάνιση ειδοποιήσεων χωρίς διακοπή του χρήστη.

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

    <links type="section"/>

  <section id="imports">

    <title>Βιβλιοθήκες για εισαγωγή</title>

#!/usr/bin/gjs

const Gio = imports.gi.Gio;

const Gtk = imports.gi.Gtk;

const Lang = imports.lang;

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

    </section>

  <section id="applicationwindow">

    <title>Δημιουργία του παραθύρου εφαρμογής</title>

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. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

    // Δόμηση της διεπαφής χρήστη της εφαρμογής

    _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 είναι εκεί που βάζουμε όλο τον κώδικα για δημιουργία διεπαφής χρήστη της εφαρμογής. Το πρώτο βήμα είναι η δημιουργία ενός νέου <link href="GtkApplicationWindow.js.page">Παράθυρο εφαρμογής Gtk (Gtk.ApplicationWindow)</link> για να μπουν μέσα όλα τα γραφικά στοιχεία. Το επόμενο βήμα είναι η δημιουργία μιας κάθετα προσανατολισμένης διεπαφής Gtk.Paned, για διαίρεση του παραθύρου σε δύο ενότητες. Αυτός ο τρόπος της γραμμής κατάστασης φαίνεται όπως αυτών που χρησιμοποιούνται σε άλλες εφαρμογές και παραμένει στη βάση του παραθύρου, ακόμα κι αν ο χρήστης το αυξομειώσει.

  </section>

  <section id="buttons">

    <title>Δημιουργία κουμπιών</title>

        // Δημιουργία του κύριου πλήκτρου

        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));

    
Αυτός ο κώδικας δημιουργεί τα τρία <link href="button.js.page">Κουμπιά Gtk (Gtk.Buttons)</link> που θα χρησιμοποιήσουμε για την προώθηση ενός νέου μηνύματος στη γραμμή κατάστασης, κλείνοντας το τελευταίο και καθαρίζοντας όλα τα υπάρχοντα μηνύματα. Τα κουμπιά "πίσω" και "καθαρισμός" είναι <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">κουμπιά παρακαταθήκης</link>, που μεταφράζονται αυτόματα σε οποιαδήποτε γλώσσα υποστηρίζει το 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);

    
Αυτός ο κώδικας δημιουργεί το <link href="grid.js.page">Gtk.Grid</link> που θα χρησιμοποιήσουμε για οργάνωση των κουμπιών και επισυνάπτει τα κουμπιά σε αυτό σε σειρά. Δημιουργεί έπειτα ένα <link href="paned.js.page">Gtk.Frame</link> που θα καταλάβει το περισσότερο παράθυρο και έχει μεγάλη ποσότητα συμπλήρωσης γύρω από τα κουμπιά και προσθέτει το πλέγμα στο πλαίσιο. Σημειώστε ότι θα χρειαστούμε ακόμα να βάλουμε το πλαίσιο στη φάτνωμα διεπαφή και έπειτα θα το προσθέσουμε στο ApplicationWindow.

  </section>

  <section id="statusbar">

    <title>Δημιουργία της γραμμής κατάστασης</title>

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

        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();

    },

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

  </section>

  <section id="functions">

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

    _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 και εκτελούμε την εφαρμογή.

  </section>

  <section id="complete">

    <title>Δείγμα πλήρους κώδικα</title>

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

  </section>

  <section id="in-depth">

    <title>Τεκμηρίωση σε βάθος</title>

<list>

  <item>
<link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>
</item>

  <item>
<link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Button.html">Gtk.Button</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Frame.html">Gtk.Frame</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Paned.html">Gtk.Paned</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Statusbar.html">Gtk.Statusbar</link>
</item>

</list>

  </section>

</page>