gnome-devel-docs master - en to el translation catalogue (2201 entries)

note: (itstool) path: info/desc
en: Learn how to lay out UI components, like Images and Labels.
el: Μάθετε πώς να τακτοποιήσετε στοιχεία διεπαφής χρήστη όπως εικόνες και ετικέτες.

note: (itstool) path: page/title
en: 2. Welcome to the Grid
el: 2. Καλώς ήλθατε στο πλέγμα

note: (itstool) path: synopsis/p
en: This tutorial will show you how to create basic widgets, or parts of the GNOME user interface, like Images and Labels. You'll then learn how to arrange them all in a Grid, which lets you put widgets exactly where you want them.
el: Αυτό το μάθημα θα σας δείξει πώς να δημιουργήσετε βασικά γραφικά στοιχεία, ή μέρη της διεπαφής χρήστη του GNOME, όπως εικόνες και ετικέτες. Θα μάθετε έπειτα πώς να τα τακτοποιήσετε όλα σε ένα πλέγμα, που σας επιτρέπει να βάλετε τα γραφικά στοιχεία ακριβώς όπου τα θέλετε.

note: (itstool) path: note/p
en: Have you taken <link xref="hellognome.js">the first tutorial in this series</link> already? You'll want to do so before continuing.
el: Έχετε δει <link xref="hellognome.js">το πρώτο μάθημα σε αυτή τη σειρά</link> ήδη; Θα θέλετε να το κάνετε πριν να συνεχίσετε.

note: (itstool) path: section/title
en: Going native
el: Πηγαίνοντας εγγενώς

note: (itstool) path: section/p
en: In the last tutorial, we created what was basically a GNOME window frame for a web app. All the GNOME-specific code we needed to learn revolved around putting the WebView -- the widget containing our application -- into an ApplicationWindow, and telling it to display. The application itself was written in HTML and JavaScript, just like most pages on the web.
el: Στο τελευταίο μάθημα, δημιουργήσαμε βασικά ένα πλαίσιο παραθύρου GNOME για μια εφαρμογή ιστού. Ο συγκεκριμένος κώδικας GNOME που χρειαζόμαστε να μάθουμε περιστρέφεται γύρω από την τοποθέτηση της WebView -- το γραφικό στοιχείο που περιέχει την εφαρμογή μας -- σε ένα ApplicationWindow και την εμφάνιση του. Η ίδια η εφαρμογή γράφτηκε σε HTML και JavaScript, ακριβώς όπως οι περισσότερες σελίδες στον ιστό.

note: (itstool) path: section/p
en: This time, we're going to use only native GNOME widgets. A widget is just a thing, like a checkbox or picture, and GNOME has a wide variety of them to choose from. We call them "native" widgets to distinguish them from things like the button and header in the web app we wrote. Because instead of using web code, these are going to be 100 percent GNOME, using GTK+.
el: Αυτήν τη φορά, πρόκειται να χρησιμοποιήσουμε μόνο τα εγγενή γραφικά στοιχεία του GNOME. Ένα γραφικό στοιχείο είναι μόνο ένα πράγμα, όπως ένα πλαίσιο ελέγχου ή εικόνα και το GNOME έχει μια πλατιά ποικιλία για επιλογή. Τα λέμε "εγγενή" γραφικά στοιχεία για να τα διακρίνουμε από πράγματα όπως το κουμπί και η κεφαλίδα στην εφαρμογή ιστού που γράψαμε. Αντί να χρησιμοποιήσουμε κώδικα ιστού, αυτά πρόκειται να είναι 100% GNOME, χρησιμοποιώντας Gtk+.

note: (itstool) path: note/p
en: GTK+ stands for "GIMP Toolkit". It's like a toolbox of widgets that you can reach into, while building your applications. It was originally written for <link href="http://www.gimp.org/">the GIMP</link>, which is a free software image editor.
el: Το Gtk+ σημαίνει "GIMP Toolkit". Είναι σαν μια εργαλειοθήκη γραφικών στοιχείων που μπορείτε να προσπελάσετε, ενώ δομείτε τις εφαρμογές σας. Γράφτηκε αρχικά για το <link href="http://www.gimp.org/">GIMP</link>, που είναι ένας επεξεργαστής εικόνας ελεύθερου λογισμικού.

note: (itstool) path: section/title
en: Setting up our application
el: Εγκατάσταση της εφαρμογής μας

note: (itstool) path: section/p
en: Before we dig out any widgets from the GTK+ toolbox, we first need to write the basic boilerplate code that our application requires.
el: Πριν να ψάξουμε οποιαδήποτε γραφικά στοιχεία από την εργαλειοθήκη Gtk+, χρειαζόμαστε πρώτα να γράψουμε το βασικό κώδικα στερεότυπου που η εφαρμογή μας απαιτεί.

note: (itstool) path: section/p
en: This part always goes at the start of your code. Depending on what you'll be doing with it, you may want to declare more imports here. What we're writing today is pretty basic, so these are all we need; Gtk for the widgets, and Lang so we can use Lang.bind to connect our application's activate and startup signals to the requisite functions.
el: Αυτό το μέρος πηγαίνει πάντα στην αρχή του κώδικά σας. Ανάλογα με το τι θα κάνετε με αυτό, μπορεί να θέλετε να δηλώσετε περισσότερες εισαγωγές εδώ. Αυτό που γράφουμε σήμερα είναι αρκετά βασικό, έτσι αυτά είναι που χρειαζόμαστε· Gtk για γραφικά στοιχεία και Lang ώστε να μπορούμε να χρησιμοποιήσουμε Lang.bind για να συνδέσουμε τα σήματα ενεργοποίησης και εκκίνησης της εφαρμογής στις αναγκαίες συναρτήσεις.

note: (itstool) path: section/p
en: Speaking of which:
el: Μιλώντας για:

note: (itstool) path: section/code
en: 
    const WelcomeToTheGrid = new Lang.Class({
        Name: 'Welcome to the Grid',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application();
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
el: 
    const WelcomeToTheGrid = new Lang.Class({
        Name: 'Welcome to the Grid',
    
        // Δημιουργία αυτής καθεαυτής της εφαρμογής
        _init: function() {
            this.application = new Gtk.Application()·
    
            // Σύνδεση σημάτων '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 ()·
        },

note: (itstool) path: section/p
en: This is the start of the application itself, and the _init function which creates it. It tells _buildUI to create an ApplicationWindow, which we're going to call _window, and it tells our window to present itself whenever needed.
el: Αυτή είναι η αρχή της ίδιας της εφαρμογής και η συνάρτηση _init που τη δημιουργεί. Λέει στη _buildUI να δημιουργήσει μια ApplicationWindow, που πρόκειται να καλέσει το _window και λέει στο παράθυρό μας να εμφανίζει τον εαυτό του όποτε απαιτείται.

note: (itstool) path: section/p
en: This part, again, is pretty much copy-and-paste, but you always want to give your application a unique name.
el: Αυτό το μέρος, πάλι, είναι αρκετά αντιγραφή και επικόλληση, αλλά θέλετε πάντα να δώσετε στην εφαρμογή σας ένα μοναδικό όνομα.

note: (itstool) path: section/p
en: Finally, we start off the _buildUI function by creating a new ApplicationWindow. We specify that it goes with this application, that it should appear in the center of the screen, and that there should be at least 10 pixels between the outside edge and any widgets inside of it. We also give it a title, which will appear at the top of the window.
el: Τελικά, ξεκινάμε τη συνάρτηση _buildUI δημιουργώντας ένα νέο ApplicationWindow. Ορίζουμε ότι πηγαίνει με αυτήν την εφαρμογή, που θα πρέπει να εμφανιστεί στο κέντρο της οθόνης και εκεί θα πρέπει να είναι τουλάχιστον 10 εικονοστοιχεία μεταξύ της εξωτερικής άκρης και όλων των γραφικών στοιχείων της. Επίσης της δίνουμε έναν τίτλο, που θα εμφανιστεί στην κορυφή του παραθύρου.

note: (itstool) path: section/title
en: Reaching into the GTK+ toolbox
el: Φτάνοντας στην εργαλειοθήκη Gtk+

note: (itstool) path: section/p
en: What widgets should we use? Well, let's say we want to write an application that looks like this:
el: Ποια γραφικά στοιχεία πρέπει να χρησιμοποιήσουμε; Λοιπόν, ας πούμε ότι θέλουμε να γράψουμε μια εφαρμογή που φαίνεται σαν αυτή:

note: (itstool) path: section/p
en: We're going to need, at the very least, a picture and a text label to go with it. Let's start with the picture:
el: Πρόκειται να χρειαστούμε, τουλάχιστον, μια εικόνα και μια ετικέτα κειμένου να πάει μαζί της. Ας αρχίσουμε με την εικόνα:

note: (itstool) path: section/p
en: You can download the image file used in this example <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=gnome-image.png">here</link>. Be sure to put it in the same directory as the code you're writing.
el: Μπορείτε να κατεβάσετε το χρησιμοποιούμενο αρχείο εικόνας σε αυτό το παράδειγμα <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=gnome-image.png">εδώ</link>. Βεβαιωθείτε να το βάλετε στον ίδιο κατάλογο με τον κώδικα που γράφετε.

note: (itstool) path: section/p
en: That code adds in the label beneath. You can see how we create widgets, here; each one is a part of Gtk, and we can give it properties that customize how it behaves. In this case, we set the Image's file property to be the filename of the picture we want, and the Label's label property to be the sentence that we want beneath the picture.
el: Αυτός ο κώδικας προσθέτει κάτω από την ετικέτα. Μπορείτε να δείτε πώς δημιουργούμε γραφικά στοιχεία, εδώ· καθένα είναι μέρος του Gtk και μπορούμε να του δώσουμε ιδιότητες που προσαρμόζουν τη συμπεριφορά του. Σε αυτήν την περίπτωση, ορίζουμε την ιδιότητα αρχείο της εικόνας να είναι το όνομα αρχείου της εικόνας που θέλουμε και η ιδιότητα ετικέτα της ετικέτας να είναι η πρόταση που θέλουμε κάτω από την εικόνα.

note: (itstool) path: note/p
en: Yes, it sounds redundant for a Label to have a label property, but it's not. Other widgets that contain text have a label property, so it's <em>consistent</em> for the Label widget to have one too.
el: Ναι, ακούγεται περιττό για μια ετικέτα να έχει μια ιδιότητα ετικέτας, αλλά δεν ισχύει. Άλλα γραφικά στοιχεία που περιέχουν κείμενο έχουν μια ιδιότητα ετικέτας, έτσι είναι <em>συνεπές</em> για το γραφικό στοιχείο ετικέτας να έχει επίσης μία.

note: (itstool) path: section/p
en: We can't just add these widgets to our window in order, though, the same way HTML elements appear in the order you write them. That's because an ApplicationWindow can only contain one widget.
el: Δεν μπορούμε απλά να προσθέσουμε αυτά τα γραφικά στοιχεία στο παράθυρό μας στη σειρά, όμως, με τον ίδιο τρόπο που τα στοιχεία HTML εμφανίζονται στη σειρά που τα γράφετε. Αυτό συμβαίνει επειδή ένα ApplicationWindow μπορεί να περιέχει μόνο ένα γραφικό στοιχείο.

note: (itstool) path: section/p
en: How do we get around that? By making that one widget a container widget, which can hold more than one widget and organize them inside it. Behold: The Grid.
el: Πώς το παρακάμπτουμε; Κάνοντας αυτό το γραφικό στοιχείο έναν αποδέκτη γραφικού στοιχείου, που μπορεί να κρατά περισσότερα από ένα γραφικό στοιχείο και να τα οργανώσουμε μέσα του. Ιδού: το πλέγμα.

note: (itstool) path: section/p
en: We're not giving it any properties yet. Those will come later, as we learn how to use the Grid's powers. First, let's attach the Image and Label we made to our Grid.
el: Δεν του δίνουμε ακόμα ιδιότητες. Αυτές θα έρθουν αργότερα, καθώς μαθαίνουμε πώς να χρησιμοποιούμε τις δυνάμεις του πλέγματος. Πρώτα, ας προσαρτήσουμε την εικόνα και την ετικέτα που κάναμε στο πλέγμα μας.

note: (itstool) path: section/p
en: This code looks awfully complicated, but it's not. Here's what those numbers mean:
el: Αυτός ο κώδικας φαίνεται πολύ περίπλοκος, αλλά δεν είναι. Να τι σημαίνουν αυτοί οι αριθμοί:

note: (itstool) path: item/p
en: The <em>first</em> number is what left-to-right position to put things in, starting from 0. Any widget that uses a 0 here goes all the way to the left.
el: Ο <em>πρώτος</em> αριθμός είναι σε ποια θέση από αριστερά προς τα δεξιά θα τοποθετηθούν πράγματα, αρχίζοντας από 0. Κάθε γραφικό στοιχείο που χρησιμοποιεί ένα 0 εδώ πηγαίνει όλο αριστερά.

note: (itstool) path: item/p
en: The <em>second</em> number is what top-to-bottom position to put a given widget in, starting from 0. The Label goes beneath the Image, so we give the Image a 0 and the Label a 1 here.
el: Ο <em>δεύτερος</em> αριθμός είναι σε ποια θέση από πάνω προς τα κάτω θα μπει το δεδομένο γραφικό στοιχείο, ξεκινώντας από 0. Η ετικέτα πηγαίνει κάτω από την εικόνα, έτσι δίνουμε στην εικόνα ένα 0 και στην ετικέτα ένα 1 εδώ.

note: (itstool) path: item/p
en: The <em>third</em> and <em>fourth</em> numbers are how many columns and rows a widget should take up. We'll see how these work in a minute.
el: Ο <em>τρίτος</em> και ο <em>τέταρτος</em> αριθμός είναι πόσες στήλες και γραμμές πρέπει να καταλάβει ένα γραφικό στοιχείο. Θα δούμε πώς αυτά δουλεύουν σε ένα λεπτό.

note: (itstool) path: section/p
en: Now that we've created the Grid and attached all our widgets to it, we add it to the window and tell the window to show itself, as the last part of the _buildUI function. As always, to finish up we create a new instance of the application's class and tell it to run.
el: Τώρα που έχουμε δημιουργήσει το πλέγμα και προσαρτήσαμε σε αυτό όλα τα γραφικά στοιχεία μας, το προσθέτουμε στο παράθυρο και λέμε στο παράθυρο να εμφανίσει τον εαυτόν του, όπως το τελευταίο μέρος της συνάρτησης _buildUI. Όπως πάντα, για να τελειώσουμε δημιουργούμε ένα νέο στιγμιότυπο της κλάσης της εφαρμογής και του λέμε να εκτελεστεί.

note: (itstool) path: section/p
en: Save your application as welcome_to_the_grid.js. Then, to run your application just open a terminal, go to the directory where your application is at, and type
el: Αποθηκεύστε την εφαρμογή σας ως welcome_to_the_grid.js. Έπειτα, για να εκτελέσετε την εφαρμογή σας ανοίξτε απλά έναν τερματικό, πηγαίνετε στον κατάλογο όπου η εφαρμογή σας είναι και πληκτρολογήστε

note: (itstool) path: section/p
en: There we go! But wait. That doesn't look right. Why is the Label crammed up next to the Image like that? That doesn't look as nice, and it makes it harder to read. What can we do about this?
el: Να! Αλλά περιμένετε. Αυτό δεν φαίνεται σωστό. Γιατί στριμώχνεται η ετικέτα δίπλα στην εικόνα έτσι; Αυτό δεν φαίνεται ωραίο και δυσκολεύει την ανάγνωση. Τι μπορούμε να κάνουμε για αυτό;

note: (itstool) path: section/title
en: Tweaking the Grid
el: Μικρορύθμιση του πλέγματος

note: (itstool) path: section/p
en: One thing we can do, is we can give the Label a margin_top property when we create it. This works sort of like setting a margin for an HTML element using inline CSS styling.
el: Ένα πράγμα που μπορούμε να κάνουμε, είναι να δώσουμε στην ετικέτα μια ιδιότητα margin_top όταν τη δημιουργούμε. Αυτό δουλεύει όπως η ρύθμιση ενός περιθωρίου για ένα στοιχείο HTML χρησιμοποιώντας ενσωματωμένη μορφή CSS.

note: (itstool) path: section/p
en: Of course, if we do that then if we replace the Label with something else -- or add in another widget -- then we have to repeat the margin_top on it too. Otherwise we end up with something like this:
el: Φυσικά, εάν κάνουμε αυτό τότε εάν αντικαταστήσουμε την ετικέτα με κάτι άλλο -- ή προσθέτοντας σε ένα άλλο γραφικό στοιχείο -- τότε πρέπει να επαναλάβουμε το margin_top σε αυτό ξανά. Αλλιώς τελειώνουμε μα κάτι σαν αυτό:

note: (itstool) path: section/p
en: We could give the Image a margin_bottom property, but that won't work when the new Label is in a separate column. So how about we try this instead:
el: Μπορούμε να δώσουμε στην εικόνα μια ιδιότητα margin_bottom, αλλά δεν θα δουλέψει όταν η νέα ετικέτα είναι σε μια ξεχωριστή στήλη. Έτσι ας δοκιμάσουμε αυτό:

note: (itstool) path: section/p
en: That makes it so that there are always 20 pixels of space in between each horizontal row.
el: Αυτό το κάνει έτσι ώστε να υπάρχουν πάντα 20 εικονοστοιχεία χώρου μεταξύ κάθε οριζόντιας γραμμής.

note: (itstool) path: note/p
en: Yes, you can also set the column_spacing property on a Grid, or the margin_left and margin_right properties on any widget. Try them out, if you like!
el: Ναι, μπορείτε επίσης να ορίσετε την ιδιότητα column_spacing σε ένα πλέγμα, ή τις ιδιότητες margin_left και margin_right σε κάθε γραφικό στοιχείο. Δοκιμάστε τες εάν θέλετε!

note: (itstool) path: section/title
en: Adding more widgets
el: Προσθήκη περισσότερων γραφικών στοιχείων

note: (itstool) path: section/p
en: If we did want to add a second Label, how would we do it so that it actually looked like it belonged there? One way is to center the Image on top, so that it's above both Labels instead of just the one on the left. That's where those other numbers in the Grid's attach method come in:
el: Εάν θέλουμε να προσθέσουμε μια δεύτερη ετικέτα, πώς θα μπορούσαμε να κάνουμε έτσι ώστε να φαίνεται πράγματι ότι ανήκε εκεί; Ένας τρόπος είναι να κεντράρετε την εικόνα στην κορυφή, έτσι ώστε να είναι πάνω και από τις δύο ετικέτες αντί για τη μία μόνο στα αριστερά. Εδώ είναι που αυτοί οι άλλοι αριθμοί στη μέθοδο προσάρτησης του πλέγματος έρχονται:

note: (itstool) path: section/p
en: After we create the second Label, we attach it to the Grid to the right of the first Label. Remember, the first two numbers count columns and rows from left to right and top to bottom, starting with 0. So if the first Label is in column 0 and row 1, we can put the second in column 1 and row 1 to put it to the right of the first Label.
el: Μετά τη δημιουργία της δεύτερης ετικέτας, την προσκολλάμε στο πλέγμα στα δεξιά της πρώτης ετικέτας. Να θυμάστε, οι πρώτοι δύο αριθμοί υπολογίζουν στήλες και γραμμές από αριστερά προς τα δεξιά και από πάνω προς τα κάτω, ξεκινώντας από 0. Έτσι εάν η πρώτη ετικέτα είναι στη στήλη 0 και στη γραμμή 1, μπορούμε να βάλουμε τη δεύτερη στη στήλη 1 και στη γραμμή 1 για να τη βάλουμε στα δεξιά της πρώτης ετικέτας.

note: (itstool) path: section/p
en: Note the number 2 in the attach statement for the Image. That's what does the trick here. That number is how many columns the Image spans, remember? So when we put it together, we get something like this:
el: Σημειώστε τον αριθμό 2 στη δήλωση προσάρτησης για την εικόνα. Αυτό κάνει εδώ. Αυτός ο αριθμός είναι πόσες στήλες καλύπτει η εικόνα, θυμάστε; Έτσι όταν το βάζουμε μαζί, πάρουμε κάτι σαν αυτό:

note: (itstool) path: section/p
en: There are two things you should take note of, here.
el: Υπάρχουν δύο πράγματα που θα πρέπει να σημειώσετε, εδώ.

note: (itstool) path: item/p
en: Setting the Image to span two columns doesn't stretch the picture itself horizontally. Instead, it stretches the invisible box taken up by the Image widget to fill both columns, then places the Image in the center of that box.
el: Ο ορισμός της εικόνας να καλύψει δύο στήλες δεν τεντώνει την ίδια την εικόνα οριζόντια. Αντίθετα, τεντώνει το αόρατο πλαίσιο που πάρθηκε από το γραφικό στοιχείο της εικόνας για να γεμίσει και τις δύο στήλες, έπειτα βάζει την εικόνα στο κέντρο αυτού του πλαισίου.

note: (itstool) path: item/p
en: Even though we've set the Grid's row_spacing and the ApplicationWindow's border_width properties, we haven't yet set anything that puts a border in between the two Labels. They were separate earlier when the Image was in only one column, but now that it spans both GNOME doesn't see a reason to keep them apart.
el: Αν και έχουμε ορίσει τη row_spacing του πλέγματος και τις ιδιότητες border_width του ApplicationWindow, δεν έχουμε ορίσει ακόμα οτιδήποτε βάζει ένα περίγραμμα μεταξύ των δύο ετικετών. Ήταν ξεχωριστές νωρίτερα όταν η εικόνα ήταν μόνο μια στήλη, αλλά τώρα που καλύπτει και τις δύο το GNOME δεν βλέπει λόγο να τις κρατήσει ξέχωρα.

note: (itstool) path: section/p
en: There are at least three ways we can get around that last one. First, we can set a margin_left or margin_right on one of the Labels:
el: Υπάρχουν τουλάχιστον τρεις τρόποι που μπορούμε να παρακάμψουμε την τελευταία. Πρώτα, μπορούμε να ορίσουμε ένα margin_left ή margin_right σε μία από τις ετικέτες:

note: (itstool) path: section/p
en: Second, we can set the Grid's column_homogeneous property to true.
el: Δεύτερο, μπορούμε να ορίσουμε την ιδιότητα πλέγμετος column_homogenous σε αληθή.

note: (itstool) path: section/p
en: That makes it look something like this:
el: Αυτό το κάνει να μοιάζει σαν αυτό:

note: (itstool) path: section/p
en: And third, we can set the Grid's column_spacing property, the same way we set its row_spacing.
el: Και τρίτο, μπορούμε να ορίσουμε την ιδιότητα column_spacing του πλέγματος, με τον ίδιο τρόπο που ορίζουμε το row_spacing του.

note: (itstool) path: section/p
en: That makes it look like this:
el: Αυτό το κάνει να μοιάζει σαν αυτό:

note: (itstool) path: section/title
en: Using stock images
el: Χρήση εικόνων παρακαταθήκης

note: (itstool) path: section/p
en: GNOME has a lot of stock images on hand already, that we can use if we don't feel like creating our own or if we want a universally-recognized icon. Here's how we create a stock image, compared to how we create a normal one:
el: Το GNOME έχει πολλές εικόνες παρακαταθήκης ήδη, που μπορούμε να χρησιμοποιήσουμε εάν δεν θέλουμε να δημιουργήσουμε τις δικές μας ή εάν θέλουμε ένα γενικά αναγνωρισμένο εικονίδιο. Να πώς δημιουργούμε μια εικόνα παρακαταθήκης, συγκρινόμενη με το πώς δημιουργούμε μια κανονική:

note: (itstool) path: section/p
en: After that, we attach it to the Grid to the left of the first Label. (We aren't using the second one for this example.)
el: Μετά από αυτό, το προσκολλάμε στο πλέγμα στα αριστερά της πρώτης ετικέτας. (Δεν χρησιμοποιούμε τη δεύτερη για αυτό το παράδειγμα.)

note: (itstool) path: section/p
en: That gives us this, when we run it:
el: Αυτά μας δίνει αυτό, όταν το εκτελούμε:

note: (itstool) path: section/p
en: That's what the stock "About" icon looks like. You can see a list of all the stock items starting with gtk-about in <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-ABOUT:CAPS">GNOME's developer documentation</link>. It was written for C programmers, but you don't need to know C to use it; just look at the part in quotation marks, like "gtk-about", and copy that part to use the icon next to it.
el: Αυτό είναι πώς το εικονίδιο παρακαταθήκης "About" μοιάζει. Μπορείτε να δείτε μια λίστα όλων των στοιχείων παρακαταθήκης ξεκινώντας με το gtk-about στο <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-ABOUT:CAPS">τεκμηρίωση ανάπτυξης του GNOME</link>. Γράφτηκε για προγραμματιστές C, αλλά δεν χρειάζεστε να ξέρετε C για να το χρησιμοποιήσετε· απλά κοιτάξτε το μέρος σε εισαγωγικά, όπως "gtk-about" και αντιγράψτε αυτό το μέρος για να χρησιμοποιήσετε το εικονίδιο δίπλα του.

note: (itstool) path: note/p
en: We put single quotes around 'gtk-about' here because, unlike text strings that have double quotes around them, that part will never need to be translated into another language. In fact, if it <em>were</em> translated it'd break the icon, because its name is still "gtk-about" no matter which language you speak.
el: Βάζουμε μονά εισαγωγικά γύρω από το 'gtk-about' εδώ επειδή, αντίθετα με τις συμβολοσειρές κειμένου που έχουν διπλά εισαγωγικά γύρω τους, αυτό το μέρος δεν θα χρειαστεί να μεταφραστεί ποτέ σε άλλη γλώσσα. Πράγματι, εάν <em>μεταφραζότανε</em> θα έσπαγε το εικονίδιο, επειδή το όνομά του είναι ακόμα "gtk-about" ανεξάρτητα από την ομιλούμενη γλώσσα.

note: (itstool) path: section/title
en: What's next?
el: Ποιο είναι το επόμενο;

note: (itstool) path: section/p
en: Before we go on to the next tutorial, let's try something a little different:
el: Πριν πάμε στο επόμενο μάθημα, ας δοκιμάσουμε κάτι λίγο διαφορετικό:

note: (itstool) path: section/p
en: That's right, we turned the Label into a Button just by changing the name! If you run the application and click on it, though, you'll find that it doesn't do anything. How do we make our Button do something? That's what we'll find out, in <link xref="03_getting_the_signal.js">our next tutorial</link>.
el: Ακριβώς, μετατρέπουμε την ετικέτα σε ένα κουμπί αλλάζοντας απλά το όνομα! Εάν εκτελείτε την εφαρμογή και πατήστε πάνω της, όμως, θα δείτε ότι δεν κάνει τίποτα. Πώς κάνουμε το κουμπί μας να κάνει κάτι; Αυτό θα μάθουμε στο <link xref="03_getting_the_signal.js">επόμενο μάθημά μας</link>.

note: (itstool) path: section/p
en: If you like, feel free to spend some time experimenting with Grids, Labels, and Images, including stock images.
el: Εάν θέλετε, μπορείτε ελεύθερα να ξοδέψετε κάποιο χρόνο πειραματιζόμενοι με πλέγματα, ετικέτες και εικόνες συμπεριλαμβανομένων των εικόνων παρακαταθήκης.

note: (itstool) path: note/p
en: One trick you can use to make more complex layouts is to nest Grids inside of each other. This lets you group together related widgets, and rearrange them easily. Take a look at the <link xref="radiobutton.js">RadioButton</link> code sample if you'd like to see how this is done.
el: Ένα κόλπο που μπορείτε να χρησιμοποιήσετε για να κάνετε πιο σύνθετες διατάξεις είναι η ένθεση πλεγμάτων το ένα μέσα στο άλλο. Αυτό σας επιτρέπει να ομαδοποιήσετε μαζί σχετικά γραφικά στοιχεία και να τα αναδιατάξετε εύκολα. Ρίξτε μια ματιά στο δείγμα κώδικα <link xref="radiobutton.js">RadioButton</link> εάν θα θέλατε να δείτε πώς γίνεται αυτό.

note: (itstool) path: section/title
en: Complete code sample
el: Δείγμα πλήρους κώδικα

note: (itstool) path: info/desc
en: Create Buttons and other widgets that do things when you click on them.
el: Δημιουργία κουμπιών και άλλων γραφικών στοιχείων που κάνουν πράγματα όταν πατάτε πάνω τους.

note: (itstool) path: page/title
en: 3. Getting the Signal
el: 3. Λήψη του σήματος

note: (itstool) path: synopsis/p
en: In the last tutorial, we learned how to create widgets like Labels, Images, and Buttons. Here, we'll learn how to make Buttons and other input widgets actually do things, by writing functions which handle the signals they send when they are clicked on or interacted with.
el: Στο τελευταίο μάθημα, μάθαμε πώς να δημιουργήσουμε γραφικά στοιχεία όπως ετικέτες, εικόνες και κουμπιά. Εδώ, θα μάθουμε πώς να κάνουμε κουμπιά και άλλα γραφικά στοιχεία εισόδου να κάνουν πράγματι πράγματα, γράφοντας συναρτήσεις που χειρίζονται τα σήματα που στέλνουν όταν πατιούνται ή αλληλεπιδρούν.

note: (itstool) path: section/title
en: A basic application
el: Μια βασική εφαρμογή

note: (itstool) path: section/p
en: In GNOME, widgets that you can interact with, like Buttons and Switches, send out signals when they are clicked on or activated. A Button, for instance, sends out the "clicked" signal when somebody clicks on it. When this happens, GNOME looks for the part in your code that says what to do.
el: Στο GNOME, τα γραφικά στοιχεία με τα οποία μπορείτε να αλληλεπιδράτε, όπως κουμπιά και διακόπτες, στέλνουν σήματα όταν πατιούνται ή ενεργοποιούνται. Ένα κουμπί, για παράδειγμα, στέλνει το σήμα "clicked" όταν κάποιος το πατά. Όταν αυτό συμβαίνει, το GNOME ψάχνει για το μέρος στον κώδικά σας που λέει τι να κάνει.

note: (itstool) path: section/p
en: How do we write that code? By connecting that Button's "clicked" signal to a callback function, which is a function you write just to handle that signal. So whenever it gives off that signal, the function connected to that signal is run.
el: Πώς γράφουμε αυτόν τον κώδικα; Συνδέοντας το "clicked" σήμα αυτού του κουμπιού σε μια συνάρτηση επανάκλησης, που είναι μια συνάρτηση που γράψατε απλά για να χειριστείτε αυτό το σήμα. Έτσι όποτε εκπέμπει αυτό το σήμα, η συνδεμένη συνάρτηση με αυτό το σήμα εκτελείται.

note: (itstool) path: section/p
en: Here is an extremely basic example:
el: Να ένα πολύ βασικό παράδειγμα:

note: (itstool) path: section/p
en: This ApplicationWindow has a Button and a Label inside it, arranged in a Grid. Whenever the Button is clicked, a variable that holds the number of cookies is increased by 1, and the Label that shows how many cookies there are is updated.
el: Αυτό το ApplicationWindow έχει ένα κουμπί και μια ετικέτα μέσα του, τακτοποιημένη σε ένα πλέγμα. Όποτε πατιέται το κουμπί, μια μεταβλητή που κρατά τον αριθμό των μπισκότων αυξάνεται κατά 1 και η ετικέτα δείχνει πόσα cookies ενημερώθηκαν.

note: (itstool) path: note/p
en: The cookies in this example are not the same as the cookies that you get from websites, which store your login information and may keep track of which sites you've visited. They're just imaginary treats. You may bake some real ones if you like.
el: Τα cookies σε αυτό το παράδειγμα δεν είναι το ίδιο όπως τα μπισκότα που παίρνετε από τους ιστότοπους που αποθηκεύουν τις πληροφορίες σύνδεσή σας και μπορούν να παρακολουθούν τους τόπους που έχετε επισκεφτεί. Είναι απλά φανταστικές συμπεριφορές. Μπορείτε να κάνετε μερικές πραγματικές εάν θέλετε.

note: (itstool) path: section/p
en: Here is the basic, boilerplate code that goes at the start of the application, before we start creating the window and widgets. Besides the application having a unique name, the biggest change from the usual boilerplate is that we create a global variable right near the beginning, to hold the number of cookies.
el: Να ο βασικός στερεότυπος κώδικας που πηγαίνει στην αρχή της εφαρμογής, πριν αρχίσουμε τη δημιουργία του παραθύρου και των γραφικών στοιχείων. Εκτός από το να έχει η εφαρμογή ένα μοναδικό όνομα, η μεγαλύτερη αλλαγή από το σύνηθες στερεότυπο είναι ότι δημιουργούμε μια καθολική μεταβλητή πολύ κοντά στην αρχή, για να κρατήσουμε τον αριθμό των cookies.

note: (itstool) path: section/p
en: Take a look at the part that uses our application's connect method and Lang.bind, to connect its activate and startup signals to the functions that present the window and build the UI. We're going to do the same thing with our Button when we get to it, except that we're going to connect its "clicked" signal instead.
el: Ρίξτε μια ματιά στο μέρος που χρησιμοποιεί τη μέθοδο σύνδεσης της εφαρμογής μας και Lang.bind, για σύνδεση των ενεργών και αρχικών σημάτων στις συναρτήσεις που εμφανίζουν το παράθυρο και δομούν τη UI. Πρόκειται να κάνουμε το ίδιο πράγμα με το κουμπί μας όταν το πάρουμε, εκτός από το ότι πρόκειται να συνδέσουμε στη θέση του το σήμα "clicked".

note: (itstool) path: section/title
en: Click the button
el: Πάτημα του κουμπιού

note: (itstool) path: section/p
en: As usual, we'll put all the code to create our Button and other widgets inside the _buildUI function, which is called when the application starts up.
el: Ως συνήθως, θα βάλουμε όλον τον κώδικα για να δημιουργήσουμε το κουμπί μας και άλλα γραφικά στοιχεία μέσα στη συνάρτηση _buildUI, που καλείται όταν ξεκινά η εφαρμογή.

note: (itstool) path: section/p
en: First, we create the window itself:
el: Πρώτα, δημιουργούμε το ίδιο το παράθυρο:

note: (itstool) path: section/p
en: Note that we've set its default_height and default_width properties. These let us control how tall and wide the ApplicationWindow will be, in pixels.
el: Σημειώστε ότι έχουμε ορίσει τις ιδιότητες του default_height και default_width. Αυτά μας επιτρέπουν να ελέγξουμε πόσο υψηλό και πλατύ θα είναι το ApplicationWindow, σε εικονοστοιχεία.

note: (itstool) path: section/p
en: Next, we'll create the Label that shows us the number of cookies. We can use the cookies variable as part of the Label's label property.
el: Ύστερα, θα δημιουργήσουμε την ετικέτα που μας εμφανίζει τον αριθμό των cookies. Μπορούμε να χρησιμοποιήσουμε τη μεταβλητή των μπισκότων ως μέρος της ιδιότητας ετικέτας της ετικέτας.

note: (itstool) path: section/p
en: Now we'll create the Button. We set its label property to show the text that we want on the Button, and we connect its "clicked" signal to a function called _getACookie, which we'll write after we're done building our application's UI.
el: Τώρα θα δημιουργήσουμε to κουμπί. Ορίζουμε την ιδιότητα του ετικέτα για να εμφανίσουμε το κείμενο που θέλουμε στο κουμπί και συνδέουμε το σήμα του "clicked" σε μια συνάρτηση που λέγεται _getACookie, που θα γράψουμε αφού έχουμε δομήσει την UI της δόμησής μας.

note: (itstool) path: section/p
en: Finally, we create a Grid, attach the Label and Button to it, add it to the window and tell the window to show itself and its contents. That's all we need inside the _buildUI function, so we close it with a bracket, as well as a comma that tells GNOME to go on to the next function. Note that even though we wrote the code for the Label first, we can still attach it to the Grid in a way that will put it on the bottom.
el: Τελικά, δημιουργούμε ένα πλέγμα, προσαρτήστε την ετικέτα και το κουμπί σε αυτό, προσθέστε το στο παράθυρο και πείτε στο παράθυρο να εμφανίσει τον εαυτό του και τα περιεχόμενά του. Αυτό χρειαζόμαστε μέσα στη συνάρτηση _buildUI, έτσι το κλείνουμε με μια παρένθεση, καθώς και ένα κόμμα που λέει στο GNOME να συνεχίσει στην επόμενη συνάρτηση. Σημειώστε ότι ακόμα κι αν γράψαμε τον κώδικα για την ετικέτα πρώτα, μπορούμε ακόμα να την προσαρτήσουμε στο πλέγμα με τρόπο που θα την βάλει στο τέλος.

note: (itstool) path: section/p
en: Now, we write the _getACookie function. Whenever our Button sends out its "clicked" signal, the code in this function will run. In this case, all it does is increase the number of cookies by 1, and update the Label to show the new number of cookies. We do this using the Label's set_label method.
el: Τώρα, γράφουμε τη συνάρτηση _getACookie. Όποτε το κουμπί μας στέλνει το σήμα του "clicked", ο κώδικας σε αυτή τη συνάρτηση θα εκτελεστεί. Σε αυτήν την περίπτωση, αυτό που κάνει είναι να αυξήσει τον αριθμό των μπισκότων κατά 1 και να ενημερώσει την ετικέτα να εμφανίσει τον νέο αριθμό των μπισκότων. Το κάνουμε αυτό χρησιμοποιώντας τη μέθοδο set_label της ετικέτας.

note: (itstool) path: note/p
en: Many widgets have the same properties and methods. Both Labels and Buttons, for instance, have a label property that says what text is inside them, and get_label and set_label methods that let you check what that text is and change it, respectively. So if you learn how one widget works, you'll also know how others like it work.
el: Πολλά γραφικά στοιχεία έχουν τις ίδιες ιδιότητες και μεθόδους. Και οι ετικέτες και τα κουμπιά, για παράδειγμα, έχουν μια ιδιότητα ετικέτας που λέει ποιο κείμενο είναι μέσα τους και τις μεθόδους et_label και set_label που σας επιτρέπουν να ελέγξετε ποιο είναι αυτό το κείμενο και να το αλλάξετε, αντίστοιχα. Έτσι εάν μαθαίνετε πώς ένα γραφικό στοιχείο δουλεύει, θα ξέρετε επίσης πώς άλλα σαν κι αυτό δουλεύουν.

note: (itstool) path: section/p
en: Finally, we run the application, using the same kind of code as in our last tutorial.
el: Τελικά, εκτελούμε την εφαρμογή, χρησιμοποιώντας το ίδιο είδος κώδικα όπως στο τελευταίο μας μάθημα.

note: (itstool) path: section/title
en: Flip the switch
el: Αναστροφή του διακόπτη

note: (itstool) path: section/p
en: Buttons aren't the only input widgets in our GTK+ toolbox. We can also use switches, like the one in this example. Switches don't have a label property, so we have to create a separate Label that says what it does to go next to it.
el: Τα κουμπιά δεν είναι τα μόνα γραφικά στοιχεία εισόδου στην εργαλειοθήκη μας Gtk+. Μπορούμε επίσης να χρησιμοποιήσουμε διακόπτες, όπως αυτόν σε αυτό το παράδειγμα. Οι διακόπτες δεν έχουν μια ιδιότητα ετικέτας, έτσι πρέπει να δημιουργήσουμε μια ξεχωριστή ετικέτα που λέει τι κάνει για να πάει δίπλα του.

note: (itstool) path: section/p
en: A Switch has two positions, Off and On. When a Switch is turned on, its text and background color change, so you can tell which position it's in.
el: Ένας διακόπτης έχει δύο θέσεις, ανενεργό και ενεργό. Όταν ένας διακόπτης ενεργοποιείται το κείμενο του και το χρώμα παρασκηνίου αλλάζουν και μπορείτε να πείτε σε ποια θέση είναι.

note: (itstool) path: section/p
en: You may have seen Switches like these in GNOME's accessibility menu, which let you turn features like large text and the on-screen keyboard on and off. In this case, the Switch controls our imaginary cookie dispenser. If the Switch is turned on, you can get cookies by clicking the "Get a cookie" Button. If it's turned off, clicking the Button won't do anything.
el: Μπορείτε να έχετε δει διακόπτες όπως αυτούς στο μενού πρόσβασης του GNOME, που σας επιτρέπει να αλλάξετε γνωρίσματα όπως μεγάλο κείμενο και το πληκτρολόγιο οθόνης ενεργό και ανενεργό. Σε αυτήν την περίπτωση, ο διακόπτης ελέγχει το φανταστικό μας δοχείο cookie. Εάν ο διακόπτης είναι ενεργός, μπορείτε να πάρετε cookies πατώντας στο κουμπί "Get a cookie". Εάν είναι ανενεργός, πατώντας το κουμπί δεν θα κάνει τίποτα.

note: (itstool) path: note/p
en: You can get to the accessibility menu by clicking on the outline of a human, near your name in the upper-right corner of the screen.
el: Μπορείτε να πάρετε το μενού πρόσβασης πατώντας στο περίγραμμα ενός ανθρώπου, κοντά στο όνομά σας στην πάνω δεξιά γωνία της οθόνης.

note: (itstool) path: section/p
en: Here's how we create the Switch:
el: Να πώς δημιουργούμε τον διακόπτη:

note: (itstool) path: section/p
en: We don't actually need to connect the Switch to anything. All we need to do is write an if statement in our _getACookie function, to check to see if the Switch is turned on. If we wanted to make something happen as soon as you flip the Switch, though, we would connect its notify::active signal, like so:
el: Δεν χρειαζόμαστε πράγματι να συνδέσουμε τον διακόπτη με κάτι. Αυτό που χρειαζόμαστε να κάνουμε είναι να γράψουμε μια πρόταση if στη συνάρτηση μας _getACookie, για να ελέγξουμε να δούμε εάν ο διακόπτης είναι ενεργός. Εάν θα θέλαμε να κάνουμε κάτι να συμβεί μόλις αντιστρέψετε τον διακόπτη, όμως, θα συνδέαμε το σήμα του notify::active, ως εξής:

note: (itstool) path: section/p
en: A Switch is set to the off position by default. If we wanted the Switch to start out turned on, we would set the value of its active property to true when we create it.
el: Ένας διακόπτης ορίζεται στην ανενεργή θέση από προεπιλογή. Εάν θέλουμε ο διακόπτης να ξεκινά ενεργός, θα ορίζαμε την τιμή της ενεργής ιδιότητας σε αληθή όταν τη δημιουργούμε.

note: (itstool) path: section/p
en: Let's just create it normally, though, and then create the Label that goes with it. We want the Switch and the Label to be kept right next to each other, so we'll create a Grid just for them, then put that Grid in our larger Grid that holds all the widgets inside it. Here's what the code looks like to create all that:
el: Ας τον δημιουργήσουμε κανονικά, όμως, και έπειτα ας δημιουργήσουμε την ετικέτα που πηγαίνει μαζί του. Θέλουμε ο διακόπτης και η ετικέτα να κρατιούνται ακριβώς δίπλα μεταξύ τους, έτσι θα δημιουργήσουμε ένα πλέγμα μόνο για αυτούς, έπειτα θα βάλουμε αυτό το πλέγμα στο μεγαλύτερό μας πλέγμα που κρατά όλα τα γραφικά στοιχεία μέσα του. Να πώς θα φαίνεται ο κώδικας για τη δημιουργία του:

note: (itstool) path: section/p
en: And now we arrange everything in the larger Grid like so.
el: Και τώρα τακτοποιούμε το καθετί στο μεγαλύτερο πλέγμα έτσι.

note: (itstool) path: section/p
en: Now we change the _getACookie function so that it checks to see if the cookie dispenser is turned on. We do that by using the Switch's get_active method. It returns true if the Switch is turned on, and false if the Switch is turned off.
el: Τώρα αλλάζουμε τη συνάρτηση _getACookie έτσι ώστε να ελέγχει εάν ο περιέκτης του μπισκότου είναι ενεργός. Το κάνουμε χρησιμοποιώντας τη μέθοδο του διακόπτη get_active. Επιστρέφει αληθές εάν ο διακόπτης είναι ενεργός και ψευδές εάν ο διακόπτης είναι ανενεργός.

note: (itstool) path: note/p
en: When a method is used in an if statement like this, the code inside the if statement is executed if the method returns true.
el: Όταν μια μέθοδος χρησιμοποιείται σε μια δήλωση if όπως αυτή, ο κώδικας μέσα στην πρόταση if εκτελείται εάν η μέθοδος επιστρέφει αληθές.

note: (itstool) path: section/title
en: Tuning the radio
el: Ρύθμιση του ραδιοκουμπιού

note: (itstool) path: section/p
en: Another type of input widget we can use is called the RadioButton. You create them in groups, and then only one RadioButton in a group can be selected at a time. They're called RadioButtons because they work like the channel preset button in old-style car radios. The radio could only be tuned to one station at a time, so whenever you pressed one button in, another would pop back out.
el: Ένας άλλος τύπος γραφικού στοιχείου εισόδου που μπορούμε να χρησιμοποιήσουμε λέγεται το RadioButton. Τα δημιουργείτε σε ομάδες και έπειτα μόνο ένα RadioButton σε μια ομάδα μπορεί να επιλεγεί τη φορά. Λέγονται RadioButtons επειδή δουλεύουν όπως το κουμπί προεπιλογής καναλιού σε παλιά ραδιόφωνα αυτοκινήτου. Το ραδιοπλήκτρο μπορεί να ρυθμιστεί μόνο σε ένα σταθμό τη φορά, έτσι όποτε πατάτε ένα κουμπί, ένα άλλο πετάγεται έξω.

note: (itstool) path: section/p
en: First off, let's change our ApplicationWindow's name and increase its border_width property, so that our widgets aren't packed in too tightly. The border_width is the number of pixels between any widget and the edge of the window.
el: Πρώτα, ας αλλάξουμε το όνομα του ApplicationWindow μας και ας αυξήσουμε την ιδιότητά του border_width, έτσι ώστε τα γραφικά στοιχεία μας να μην πακετάρονται υπερβολικά σφικτά. Το border_width είναι ο αριθμός των εικονοστοιχείων μεταξύ κάθε γραφικού στοιχείου και της άκρης του παραθύρου.

note: (itstool) path: section/p
en: After that, we create the RadioButtons. Remember how they're created in groups? The way we do that, is we set each new RadioButton's group property to the name of another RadioButton.
el: Μετά από αυτό, δημιουργούμε τα RadioButtons. Θυμάστε πώς δημιουργήθηκαν σε ομάδες; Ο τρόπος που το κάνουμε, είναι ορίζοντας κάθε νέα ιδιότητα ομάδας RadioButton στο όνομα ενός άλλου RadioButton.

note: (itstool) path: section/p
en: Next, we create a Grid for the RadioButtons. Remember, we don't have to arrange things in Grids in the same order that we create them in.
el: Ύστερα, δημιουργούμε ένα πλέγμα για τα RadioButtons. Να θυμάστε, δεν είμαστε υποχρεωμένοι να τακτοποιήσουμε τα πράγματα σε πλέγματα με την ίδια σειρά που τα δημιουργούμε.

note: (itstool) path: section/p
en: Normally, the RadioButton that's selected by default is the one that's the name of the group. We want the first "Not cookie" button to be selected by default, though, so we use its set_active method.
el: Κανονικά, το RadioButton που επιλέχτηκε από προεπιλογή είναι αυτό του ονόματος της ομάδας. Θέλουμε το πρώτο κουμπί "Not cookie" να επιλέγεται από προεπιλογή, όμως, έτσι χρησιμοποιούμε τη μέθοδό του set_active.

note: (itstool) path: note/p
en: We could also set its active property to true when we create it.
el: Θα μπορούσαμε επίσης να ορίσουμε την ενεργή του ιδιότητα σε αληθές όταν το δημιουργούμε.

note: (itstool) path: section/p
en: Now we arrange everything in our main Grid like usual ...
el: Τώρα τακτοποιούμε καθετί στο δικό μας κύριο πλέγμα όπως συνήθως ...

note: (itstool) path: section/p
en: And then we change our _getACookie function to test to see if the cookie button is the one that's selected.
el: Και έπειτα αλλάζουμε τη συνάρτησή μας _getACookie για να ελέγξουμε εάν το κουμπί μπισκότο είναι αυτό που επιλέχτηκε.

note: (itstool) path: section/title
en: Can you spell "cookie"?
el: Μπορείτε να συλλαβίσετε "cookie";

note: (itstool) path: section/p
en: The last input widget we're going to cover is the Entry widget, which is used for single-line text entry.
el: Στο τελευταίο γραφικό στοιχείο εισόδου που πρόκειται να καλύψουμε είναι το γραφικό στοιχείο καταχώρισης, που χρησιμοποιείται για εισαγωγή κειμένου μονής γραμμής.

note: (itstool) path: note/p
en: If you need to be able to enter in a whole paragraph or more, like if you are building a text editor, you'll want to look at the much more customizable <link xref="textview.js">TextView</link> widget.
el: Εάν χρειάζεστε να μπορείτε να εισάγετε σε μια πλήρη παράγραφο ή περισσότερο, όπως εάν δομείτε έναν επεξεργαστή κειμένου, θα θέλετε να φαίνεται στο πολύ περισσότερο προσαρμόσιμο γραφικό στοιχείο <link xref="textview.js">TextView</link>.

note: (itstool) path: section/p
en: After we change the window's name, we create the Entry widget.
el: Αφού αλλάξουμε το όνομα του παραθύρου, δημιουργούμε το γραφικό στοιχείο καταχώρισης.

note: (itstool) path: section/p
en: Next, we arrange everything in the Grid ...
el: Ύστερα, τακτοποιούμε καθετί στο πλέγμα ...

note: (itstool) path: section/p
en: And now we modify _getACookie's if statement again, using the Entry's get_text method to retrieve the text that you entered into it and see if you spelled "cookie" right. We don't care whether you capitalize "cookie" or not, so we use JavaScript's built-in toLowerCase method to change the Entry's text to all lower case inside the if statement.
el: Και τώρα τροποποιούμε την δήλωση if ξανά του _getACookie, χρησιμοποιώντας τη μέθοδο get_text της καταχώρισης για ανάκτηση του κειμένου που βάλατε μέσα του και δείτε εάν συλλαβίστηκε σωστά το "cookie". Δεν μας ενδιαφέρει εάν κάνετε κεφαλαίο το "cookie" ή όχι, έτσι χρησιμοποιούμε την ενσωματωμένη μέθοδο toLowerCase της JavaScript για αλλαγή του κειμένου καταχώρισης σε όλα τα πεζά γράμματα στη δήλωση if.

note: (itstool) path: note/p
en: An Entry widget doesn't have a label property, which is a set text string that the user can't change. (You can't normally change the label on a Button, for instance.) Instead, it has a text property, which changes to match what the user types in.
el: Ένα γραφικό στοιχείο καταχώρισης δεν έχει μια ιδιότητα ετικέτας, που είναι ένα σύνολο συμβολοσειράς κειμένου όπου ο χρήστης δεν μπορεί να αλλάξει. (Δεν μπορείτε κανονικά να αλλάξετε την ετικέτα σε ένα κουμπί, για παράδειγμα.) Στη θέση του έχει μια ιδιότητα κειμένου, που αλλάζει για να συμφωνεί με ότι ο χρήστης πληκτρολογεί.

note: (itstool) path: section/p
en: Keep reading, if you'd like to see the complete code for each version of our cookie maker application.
el: Συνεχίστε την ανάγνωση, εάν θα θέλατε να δείτε τον πλήρη κώδικα για κάθε έκδοση της εφαρμογής δημιουργίας cookie.

note: (itstool) path: note/p
en: The main JavaScript tutorials page has <link xref="beginner.js#buttons">more detailed code samples</link> for each input widget, including several not covered here.
el: Η κύρια σελίδα μαθημάτων JavaScript έχει <link xref="beginner.js#buttons">πιο λεπτομερή δείγματα κώδικα</link> για κάθε γραφικό στοιχείο εισόδου, συμπεριλαμβανομένων αρκετών που δεν καλύπτονται εδώ.

note: (itstool) path: section/title
en: Complete code samples
el: Δείγματα πλήρους κώδικα

note: (itstool) path: section/title
en: Code sample with Button
el: Δείγμα κώδικα με κουμπί

note: (itstool) path: section/title
en: Code sample with Switch
el: Δείγμα κώδικα με διακόπτη

note: (itstool) path: section/title
en: Code sample with RadioButton
el: Δείγμα κώδικα με RadioButton

note: (itstool) path: section/title
en: Code sample with Entry
el: Δείγμα κώδικα με καταχώριση

note: (itstool) path: info/desc
en: Display information about an application
el: Εμφάνιση πληροφοριών για μια εφαρμογή

note: (itstool) path: page/p
en: An AboutDialog example using Gtk.ApplicationWindow and Menu
el: Ένα παράδειγμα AboutDialog χρησιμοποιώντας Gtk.ApplicationWindow και μενού

note: (itstool) path: page/p (itstool) path: section/p
en: In this sample we used the following:
el: Σε αυτό το παράδειγμα χρησιμοποιήσαμε τα παρακάτω:

note: (itstool) path: page/p
en: A modal dialog window which shows information about an application and its creators. This one is triggered by clicking "About" in the application's menu, which is normally a good place to put it.
el: Ένα παράθυρο αναγκαστικού διαλόγου που εμφανίζει πληροφορίες για μια εφαρμογή και τους δημιουργούς της. Αυτό εμφανίζεται με κλικ στο "Περί" στο μενού της εφαρμογής, που είναι κανονικά μια καλή θέση για να το βάλετε.

note: (itstool) path: info/desc
en: A window that displays information about an application
el: Ένα παράθυρο που εμφανίζει πληροφορίες για μια εφαρμογή

note: (itstool) path: page/p
en: An AboutDialog example using Gtk.ApplicationWindow and Menu (the "about" is displayed if "About" in the menu is selected).
el: Ένα παράδειγμα AboutDialog χρησιμοποιώντας Gtk.ApplicationWindow και μενού (το "περί" εμφανίζεται εάν επιλεγεί το "Περί" στο μενού).

note: (itstool) path: section/title
en: Code used to generate this example
el: Ο χρησιμοποιούμενος κώδικας για παραγωγή αυτού παραδείγματος

note: (itstool) path: section/title
en: Useful methods for an AboutDialog widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο AboutDialog

note: (itstool) path: section/p
en: In line 15 the signal <code>"activate"</code> is connected to the callback function <code>about_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 15 το σήμα <code>"activate"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>about_cb()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: section/title
en: API References
el: Αναφορές API

note: (itstool) path: info/desc
en: Coming soon...
el: Έρχεται σύντομα...

note: (itstool) path: credit/name
en: GNOME Documentation Project
el: Έργο τεκμηρίωσης GNOME

note: (itstool) path: page/title
en: Audio player
el: Αναπαραγωγός ήχου

note: (itstool) path: info/desc
en: A beginner's guide to writing GNOME applications in JavaScript, including code samples and practice exercises.
el: Ένας οδηγός αρχαρίων στη συγγραφή εφαρμογών GNOME σε JavaScript, συμπεριλαμβάνοντας δείγματα κώδικα και πρακτικές ασκήσεις.

note: (itstool) path: page/title
en: Tutorial for beginners and code samples
el: Μάθημα για αρχάριους και δείγματα κώδικα

note: (itstool) path: synopsis/p
en: JavaScript is one of the most popular programming languages on the web. It's not just for the web, though. If you have even a basic understanding of JavaScript, you can write full-fledged applications for GNOME. <link href="https://wiki.gnome.org/Apps/Documents">GNOME Documents</link> is written in JavaScript, and so is <link href="https://live.gnome.org/GnomeShell/Tour">GNOME Shell</link>, the most basic part of GNOME.
el: Η JavaScript είναι μία από τις πιο δημοφιλής γλώσσες προγραμματισμού για το διαδίκτυο. Δεν είναι όμως μόνο για αυτό. Αν έχετε μια βασική κατανόηση της JavaScript, τότε μπορείτε να γράψετε μια πλήρη εφαρμογή για το GNOME. Η εφαρμογή <link href="https://wiki.gnome.org/Apps/Documents">Έγγραφα GNOME</link> είναι γραμμένη σε JavaScript, το ίδιο και το <link href="https://live.gnome.org/GnomeShell/Tour">GNOME Shell</link>, το σημαντικότερο κομμάτι του GNOME.

note: (itstool) path: note/p
en: GNOME Shell is what you see when you click on "Activities" in the top-left corner of your screen. It also controls the clock and the rest of the top panel. Besides showing how you to write GNOME applications, these tutorials will also show you how to use JavaScript to write GNOME Shell extensions, which give it new features or change the way it does things.
el: Το κέλυφος GNOME είναι αυτό που βλέπετε όταν πατάτε στις "Activities" στην επάνω αριστερή γωνία της οθόνης σας. Ελέγχει επίσης το ρολόι και το υπόλοιπο του πάνω πλαισίου. Επιπλέον δείχνοντας σας πώς να γράψετε εφαρμογές GNOME, αυτά τα μαθήματα θα σας δείξουν επίσης πώς να χρησιμοποιήσετε JavaScript για να γράψετε επεκτάσεις κελύφους GNOME, που του δίνουν νέα γνωρίσματα ή αλλάζουν τον τρόπο που κάνει πράγματα.

note: (itstool) path: section/title
en: Getting Started
el: Ξεκίνημα

note: (itstool) path: section/p
en: These tutorials are designed for people who already know how to write in JavaScript, and who have GNOME installed on their computers already, but who are new to developing GNOME applications. If you don't already know JavaScript, or if you need help getting GNOME set up, take a look at these resources first:
el: Αυτά τα μαθήματα σχεδιάστηκαν για άτομα που ήδη ξέρουν πώς να γράψουν σε JavaScript, και έχουν ήδη εγκατεστημένο το GNOME στους υπολογιστές τους, αλλά είναι νέοι στην ανάπτυξη εφαρμογών GNOME. Εάν δεν ξέρετε ήδη JavaScript, ή εάν χρειαζόσαστε βοήθεια για εγκατάσταση του GNOME, ρίξτε μια ματιά πρώτα σε αυτές τις πηγές πρώτα:

note: (itstool) path: item/p
en: <link href="http://eloquentjavascript.net/contents.html">Eloquent JavaScript</link> is a free, Creative Commons-licensed book, which explains the basics of JavaScript programming. Since you won't be writing JavaScript for the web, you only need to read up to chapter 10 or so.
el: <link href="http://eloquentjavascript.net/contents.html">εύγλωττο JavaScript</link> είναι ένα ελεύθερο, βιβλίο με την άδεια Creative Commons, που εξηγεί τα βασικά του προγραμματισμού JavaScript. Αφού δεν θα γράψετε JavaScript για τον ιστό, χρειάζεται να διαβάσετε μέχρι το κεφάλαιο 10 περίπου.

note: (itstool) path: item/p
en: <link href="http://www.gnome.org/getting-gnome/">Download GNOME</link> as part of a distribution, like Fedora, openSUSE, or Ubuntu. Each distribution has its own instructions for how to get GNOME.
el: Η <link href="http://www.gnome.org/getting-gnome/">λήψη του GNOME</link> είναι μέρος μιας διανομής, όπως Fedora, openSUSE, ή Ubuntu. Κάθε διανομή έχει τις δικές της οδηγίες για το πώς να πάρετε το GNOME.

note: (itstool) path: item/p
en: <link xref="set-up-gedit.js">Set up gedit</link> for writing applications. GNOME's text editor, gedit, is sometimes just called "text editor".
el: <link xref="set-up-gedit.js">Εγκατάσταση gedit</link> για συγγραφή εφαρμογών. Ο επεξεργαστής κειμένου του GNOME, gedit, αποκαλείται μερικές φορές απλά "επεξεργασία κειμένου".

note: (itstool) path: section/title
en: Tutorials
el: Μαθήματα

note: (itstool) path: section/title
en: Code samples
el: Δείγματα κώδικα

note: (itstool) path: section/p
en: These samples show how to use widgets in your GNOME applications. Each one demonstrates a complete application which showcases the featured widget. At the end of each sample, you will find links to more detailed reference material.
el: Αυτά τα δείγματα εμφανίζουν τη χρήση γραφικών στοιχείων στις εφαρμογές σας του GNOME. Κάθε μια δείχνει μια πλήρη εφαρμογή που δείχνει περιπτώσεις με χαρακτηριστικά γραφικά στοιχείο. Στο τέλος κάθε δείγματος, θα βρείτε συνδέσμους σε πιο λεπτομερή υλικά αναφοράς.

note: (itstool) path: section/p
en: To run the code samples:
el: Για να εκτελέσετε τα δείγματα κώδικα:

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.js
el: Αντιγραφή και επικόλληση του κώδικα στο <var>filename</var>.js

note: (itstool) path: item/p
en: In the terminal, type:
el: Στον τερματικό, πληκτρολογήστε:

note: (itstool) path: section/title
en: Windows
el: Παράθυρα

note: (itstool) path: section/title
en: Display widgets
el: Εμφάνιση γραφικών στοιχείων

note: (itstool) path: section/title
en: Buttons and toggles
el: Κουμπιά και εναλλαγές

note: (itstool) path: section/title
en: Numeric and text data entry
el: Καταχώριση δεδομένων αριθμητικών και κειμένου

note: (itstool) path: section/title
en: Multiline text editor
el: Επεξεργαστής κειμένου πολλαπλών γραμμών

note: (itstool) path: section/title
en: Menu, combo box and toolbar widgets
el: Μενού, σύνθετο πλαίσιο και γραφικά στοιχεία εργαλειοθήκης

note: (itstool) path: section/title
en: TreeView widget
el: Γραφικό στοιχείο TreeView

note: (itstool) path: section/title (itstool) path: steps/title
en: Selectors
el: Επιλογείς

note: (itstool) path: section/title
en: File selectors
el: Επιλογείς αρχείων

note: (itstool) path: section/title
en: Font selectors
el: Επιλογείς γραμματοσειρών

note: (itstool) path: section/title
en: Color Selectors
el: Επιλογείς χρώματος

note: (itstool) path: section/title
en: Layout containers
el: Περιέκτες διάταξης

note: (itstool) path: section/title
en: Ornaments
el: Διακοσμητικά

note: (itstool) path: section/title
en: Scrolling
el: Κύλιση

note: (itstool) path: section/title
en: Miscellaneous
el: Διάφορα

note: (itstool) path: section/title
en: Exercises
el: Ασκήσεις

[ctx: text]
note: (itstool) path: info/title
en: GTK+ widgets sample code (Python)
el: Δείγμα κώδικα γραφικών στοιχείων GTK+ (Python)

note: (itstool) path: info/desc
en: A guide to GUI programming using GTK+, including code samples and practice exercises.
el: Ένας οδηγός για την ανάπτυξη διεπαφών χρήστη (GUI) χρησιμοποιώντας GTK+, συμπεριλαμβάνοντας δείγματα κώδικα και πρακτικές ασκήσεις.

note: (itstool) path: page/title
en: GTK+ widgets sample code
el: Κώδικας δείγματος γραφικών στοιχείων GTK+

note: (itstool) path: synopsis/p
en: If you are a beginner and you would like a tutorial to guide you step by step in an exploration of what you can do with GTK+ 3, you should go to the <link xref="tutorial.py"/> page. If you are looking for a specific widget, you can find it in the sections below.
el: Εάν είσαστε αρχάριος και θα θέλατε ένα μάθημα να σας καθοδηγήσει βήμα-βήμα σε μια εξερεύνηση του τι μπορείτε να κάνετε με το GTK+ 3, θα πρέπει να πάτε στη σελίδα <link xref="tutorial.py"/>. Εάν ψάχνετε για ένα συγκεκριμένο γραφικό στοιχείο, μπορείτε να το βρείτε στις παρακάτω ενότητες.

note: (itstool) path: section/title
en: Theory pages
el: Σελίδες θεωρίας

[ctx: text]
note: (itstool) path: info/title
en: Tutorial for beginners (Vala)
el: Μάθημα για αρχάριους (Vala)

note: (itstool) path: info/desc
en: A beginner's guide to GUI programming using GTK+, including code samples and practice exercises.
el: Ένας οδηγός αρχαρίων στην ανάπτυξη διεπαφών χρήστη (GUI) χρησιμοποιώντας GTK+, συμπεριλαμβάνει δείγματα κώδικα και πρακτικές ασκήσεις.

note: (itstool) path: synopsis/p
en: Although these tutorials are designed for beginners, we can't cover all the basics. Before attempting to follow these tutorials, you are expected to be familiar with the following concepts:
el: Αν και αυτά τα μαθήματα σχεδιάστηκαν για αρχαρίους, δεν μπορούμε να καλύψουμε όλα τα βασικά. Πριν να προσπαθήσετε να παρακολουθήσετε αυτά τα μαθήματα, πρέπει να εξοικειωθείτε με τις παρακάτω έννοιες:

note: (itstool) path: item/p
en: Object oriented programming
el: Αντικειμενοστραφής προγραμματισμός

note: (itstool) path: item/p
en: The Vala programming language:
el: Η γλώσσα προγραμματισμού Vala:

note: (itstool) path: item/p
en: <link href="https://live.gnome.org/Vala/Tutorial">The Vala Tutorial</link>
el: <link href="https://live.gnome.org/Vala/Tutorial">Μαθήματα Vala</link>

note: (itstool) path: item/p
en: <link href="https://live.gnome.org/Vala/Documentation#Sample_Code">Sample Vala code</link>
el: <link href="https://live.gnome.org/Vala/Documentation#Sample_Code">Δείγμα κώδικα Vala</link>

note: (itstool) path: synopsis/p
en: By following these tutorials you will learn the basics of GUI programming using GTK+.
el: Παρακολουθώντας αυτά τα μαθήματα θα μάθετε τα βασικά του προγραμματισμού GUI χρησιμοποιώντας GTK+.

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.vala
el: Αντιγραφή και επικόλληση του κώδικα στο <var>filename</var>.vala

note: (itstool) path: item/p
en: In the terminal type:
el: Πληκτρολογήστε στο τερματικό:

[ctx: text]
note: (itstool) path: info/title
en: Button (C)
el: Κουμπί (C)

note: (itstool) path: info/desc
en: A button widget which emits a signal when clicked
el: Ένα κουμπί γραφικού στοιχείου που εκπέμπει σήμα όταν πατηθεί

note: (itstool) path: page/title
en: Button
el: Κουμπί

note: (itstool) path: page/p
en: A button widget connected to a callback function that reverses its label when clicked.
el: Ένα γραφικό στοιχείο κουμπιού συνδεμένο με μια απλή συνάρτηση επανάκλησης που αντιστρέφει την ετικέτα της όταν πατηθεί.

[ctx: text]
note: (itstool) path: info/title
en: Button (JavaScript)
el: Κουμπί (JavaScript)

note: (itstool) path: info/desc
en: A button which can be connected to other widgets
el: Ένα κουμπί που μπορεί να συνδεθεί με άλλα γραφικά στοιχεία

note: (itstool) path: page/p
en: A button widget that changes its label when you click it.
el: Ένα γραφικό στοιχείο κουμπιού που αλλάζει την ετικέτα του όταν το πατάτε.

[ctx: text]
note: (itstool) path: info/title
en: Button (Python)
el: Κουμπί (Python)

note: (itstool) path: page/p
en: A button widget connected to a simple callback function.
el: Ένα γραφικό στοιχείο κουμπιού συνδεμένο με μια απλή συνάρτηση επανάκλησης.

note: (itstool) path: section/title
en: Useful methods for a Button widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο κουμπιού

note: (itstool) path: section/p
en: In line 16 the <code>"clicked"</code> signal from the button is connected to the callback function <code>do_clicked()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 16 το σήμα <code>"clicked"</code> από το κουμπί συνδέεται με τη συνάρτηση επανάκλησης <code>do_clicked()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: item/p
en: <code>set_relief(Gtk.ReliefStyle.NONE)</code> sets to none the relief style of the edges of the Gtk.Button - as opposed to <code>Gtk.ReliefStyle.NORMAL</code>.
el: Ο <code>set_relief(Gtk.ReliefStyle.NONE)</code> ορίζει σε κανένα τον τύπο αναγλύφου των άκρων του Gtk.Button - καθώς αντιτίθεται στο <code>Gtk.ReliefStyle.NORMAL</code>.

note: (itstool) path: item/p
en: If the label of the button is a <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">stock icon</link>, <code>set_use_stock(True)</code> sets the label as the name of the corresponding stock icon.
el: Εάν η ετικέτα του κουμπιού είναι ένα <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">εικονίδιο παρακαταθήκης</link>, ο <code>set_use_stock(True)</code> ορίζει την ετικέτα ως το όνομα του αντίστοιχου εικονιδίου παρακαταθήκης.

note: (itstool) path: item/p
en: To set an image (e.g. a stock image) for the button <code>button</code>:
el: Για ορισμό μιας εικόνας (π.χ. μια εικόνα παρακαταθήκης) για το κουμπί <code>button</code>:

note: (itstool) path: item/p
en: You should not set a label for the button after this, otherwise it will show the label and not the image.
el: Θα πρέπει να μην ορίσετε μια ετικέτα για το κουμπί μετά από αυτό, αλλιώς θα εμφανίσει την ετικέτα και όχι την εικόνα.

note: (itstool) path: item/p
en: If we use <code>set_focus_on_click(False)</code> the button will not grab focus when it is clicked by the mouse. This could be useful in places like toolbars, so that the keyboard focus is not removed from the main area of the application.
el: Εάν χρησιμοποιήσουμε <code>set_focus_on_click(False)</code> το κουμπί δεν θα εστιάσει όταν πατηθεί από το ποντίκι. Αυτό μπορεί να είναι χρήσιμο σε θέσεις όπως εργαλειοθήκες, έτσι ώστε η εστίαση του πληκτρολογίου να μην αφαιρεθεί από την κύρια περιοχή της εφαρμογής.

[ctx: text]
note: (itstool) path: info/title
en: Button (Vala)
el: Κουμπί (Vala)

note: (itstool) path: page/title
en: Button widget
el: Γραφικό στοιχείο κουμπιού

note: (itstool) path: page/p
en: In this sample we used the following: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Button.html">Gtk.Button</link>
el: Σε αυτό το παράδειγμα χρησιμοποιούμε το παρακάτω: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Button.html">Gtk.Button</link>

[ctx: text]
note: (itstool) path: info/title
en: ButtonBox (JavaScript)
el: Πλαίσιο κουμπιού (JavaScript)

note: (itstool) path: info/desc
en: A container for arranging buttons
el: Ένας περιέκτης για διευθέτηση κουμπιών

note: (itstool) path: page/p
en: A calculator - the buttons are enclosed in horizontal ButtonBoxes.
el: Μια αριθμομηχανή - τα κουμπιά περικλείονται σε οριζόντια ButtonBoxes.

note: (itstool) path: section/title
en: Useful methods for a ButtonBox widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο ButtonBox

note: (itstool) path: item/p
en: The layout of the ButtonBox are set with <code>set_layout(layout)</code>, where <code>layout</code> can be <code>Gtk.ButtonBoxStyle.SPREAD</code> (buttons are evenly spread across the box), <code>Gtk.ButtonBoxStyle.EDGE</code> (buttons are placed at the edges of the box), <code>Gtk.ButtonBoxStyle.START</code> (buttons are grouped towards the start of the box), <code>Gtk.ButtonBoxStyle.END</code> (buttons are grouped towards the end of the box), <code>Gtk.ButtonBoxStyle.CENTER</code> (buttons are centered in the box).
el: Η διάταξη του ButtonBox ορίζεται με <code>set_layout(layout)</code>, όπου <code>layout</code> μπορεί να είναι <code>Gtk.ButtonBoxStyle.SPREAD</code> (τα κουμπιά διασπείρονται εξίσου κατά μήκος του πλαισίου), <code>Gtk.ButtonBoxStyle.EDGE</code> (τα κουμπιά τοποθετούνται στις άκρες του πλαισίου), <code>Gtk.ButtonBoxStyle.START</code> (τα κουμπιά ομαδοποιούνται προς την αρχή του πλαισίου), <code>Gtk.ButtonBoxStyle.END</code> (τα κουμπιά ομαδοποιούνται προς το τέλος του πλαισίου), <code>Gtk.ButtonBoxStyle.CENTER</code> (τα κουμπιά κεντράρονται στο πλαίσιο).

note: (itstool) path: item/p
en: <code>set_child_secondary(button, is_secondary)</code> sets whether <code>button</code> should appear in a secondary group of children. A typical use of a secondary child is the help button in a dialog. This group appears after the other children if the style is <code>START</code>, <code>SPREAD</code> or <code>EDGE</code>, and before the other children if the style is <code>END</code>. If the style is <code>START</code> or <code>END</code>, then the secondary children are aligned at the other end of the button box from the main children. For the other styles, they appear immediately next to the main children.
el: Ο <code>set_child_secondary(button, is_secondary)</code> ορίζει εάν το <code>button</code> πρέπει να εμφανιστεί σε μια δευτερεύουσα ομάδα θυγατρικών. Μια τυπική χρήση ενός δευτερεύοντος θυγατρικού είναι το βοηθητικό κουμπί σε ένα διάλογο. Αυτή η ομάδα εμφανίζεται μετά τα άλλα θυγατρικά εάν ο τύπος είναι <code>START</code>, <code>SPREAD</code> ή <code>EDGE</code> και πριν τα άλλα θυγατρικά εάν ο τύπος είναι <code>END</code>. Εάν ο τύπος είναι <code>START</code> ή <code>END</code>, τότε τα δευτερεύοντα θυγατρικά στοιχίζονται στην άλλη άκρη του πλαισίου κουμπιού από τα κύρια θυγατρικά. Για τους άλλους τύπους, εμφανίζονται αμέσως δίπλα στα κύρια θυγατρικά.

note: (itstool) path: item/p
en: <code>set_child_non_homogeneous(button, is_non_homogeneous)</code> sets whether the child is exempted from homogeneous sizing. Default value is <code>False</code>.
el: Το <code>set_child_non_homogeneous(button, is_non_homogeneous)</code> ορίζει εάν το θυγατρικό εξαιρείται από το ομογενές μέγεθος. Προεπιλεγμένη τιμή είναι <code>False</code>.

note: (itstool) path: item/p
en: <code>set_spacing(spacing)</code> sets the spacing, in pixels, between the buttons of the box.
el: <code>set_spacing(spacing)</code> ορίζει το διάκενο, σε εικονοστοιχεία, μεταξύ των κουμπιών του πλαισίου.

note: (itstool) path: info/desc
en: Tutorials and code samples in C.
el: Μάθημα και δείγματα κώδικα σε C.

note: (itstool) path: page/title
en: Platform Demos in C
el: Παραδείγματα πλατφόρμας σε C

note: (itstool) path: section/title
en: Prerequisites
el: Προαπαιτούμενα

note: (itstool) path: section/p
en: To compile these platform demos you will need a C compiler, for example <link href="https://gcc.gnu.org/">gcc</link>. You will also need GTK+ 3 including headers and pkg-config files. Linux distributions usually abstract GTK+ 3 headers and pkg-config files into separate packages called <em>gtk3-devel</em>, <em>gtk3-dev</em> or similar.
el: Για να μεταγλωττιστούν τα παραδείγματα αυτά θα χρειαστείτε έναν μεταγλωττιστή της C, για παράδειγμα το <link href="https://gcc.gnu.org/">gcc</link>. Θα χρειαστείτε επίσης τις κεφαλίδες και τα αρχεία pkg-config του GTK+ 3. Συνήθως οι διανομές Linux χωρίζουν αυτά τα αρχεία σε διαφορετικά πακέτα με ονόματα <em>gtk3-devel</em>, <em>gtk3-dev</em> ή κάτι παρόμοιο.

note: (itstool) path: section/title
en: Guidelines for new developers
el: Οδηγοί για νέους προγραμματιστές

note: (itstool) path: section/p
en: Beyond the prerequisites mentioned above, several tools has been developed to assist you further in developing your GNOME application. GNOME also recommends a specific coding style and conventions which this section will elaborate further upon.
el: Εκτός από τα προαπαιτούμενα που αναφέρθηκαν, αρκετά εργαλεία έχουν αναπτυχθεί για να σας βοηθήσουν στην ανάπτυξη μιας εφαρμογής για το GNOME. Το GNOME συνιστά επίσης ένα συγκεκριμένο πρότυπο και στυλ για την εγγραφή κώδικα το οποίο θα αναλυθεί και παρακάτω.

note: (itstool) path: section/title
en: Recommended tools
el: Προτεινόμενα εργαλεία

note: (itstool) path: item/p
en: <link href="https://wiki.gnome.org/Apps/Devhelp">DevHelp</link>: An API documentation browser for GNOME.
el: <link href="https://wiki.gnome.org/Apps/Devhelp">DevHelp</link>: Ένας περιηγητής τεκμηρίωσης API για το GNOME.

note: (itstool) path: item/p
en: A GNOME IDE (Integrated Development Environment). An IDE can assist you in writing and debugging C code, for example <link href="https://wiki.gnome.org/Apps/Builder">Builder</link> or <link href="https://wiki.gnome.org/Apps/Anjuta">Anjuta</link>.
el: GNOME IDE (Ολοκληρωμένο περιβάλλον ανάπτυξης). Ένα IDE σας βοηθάει στην εγγραφή και αποσφαλμάτωση κώδικα C, όπως για παράδειγμα το <link href="https://wiki.gnome.org/Apps/Builder">Builder</link> ή το <link href="https://wiki.gnome.org/Apps/Anjuta">Anjuta</link>.

note: (itstool) path: item/p
en: <link href="http://glade.gnome.org/">Glade</link>: A user interface designer for GTK+ Applications.
el: <link href="http://glade.gnome.org/">Glade</link>:  Ένας σχεδιαστής γραφικών διεπαφών για εφαρμογές GTK+.

note: (itstool) path: item/p
en: An IRC Client, for example <link href="https://wiki.gnome.org/Apps/Polari">Polari</link> or <link href="https://wiki.gnome.org/Apps/Empathy">Empathy</link>. If you run into problems while following the beginner tutorials, join #gnome on <em>irc.gnome.org</em>.
el: Ένας πελάτης IRC, για παράδειγμα το <link href="https://wiki.gnome.org/Apps/Polari">Polari</link> ή το <link href="https://wiki.gnome.org/Apps/Empathy">Empathy</link>. Αν αντιμετωπίσετε προβλήματα με την ανάγνωση των οδηγών, συνδεθείτε στο κανάλι #gnome στο <em>irc.gnome.org</em>.

note: (itstool) path: section/title
en: Coding Style
el: Στυλ κώδικα

note: (itstool) path: section/p
en: Most applications in the GNOME project is written in the <link href="http://en.wikipedia.org/wiki/Indent_style#GNU_style">GNU style</link> of indentation. The tutorials and code examples presented are following this convention and you are recommended to do so too.
el: Οι περισσότερες εφαρμογές του έργου GNOME έχουν γραφεί σύμφωνα με τα <link href="http://en.wikipedia.org/wiki/Indent_style#GNU_style">πρότυπα του GNU</link>. Τα μαθήματα και τα παραδείγματα κώδικα αυτού του οδηγού, ακολουθούν τα πρότυτα αυτά και καλό είναι να το κάνετε και εσείς.

note: (itstool) path: section/title
en: Executing Code
el: Εκτέλεση κώδικα

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.c
el: Αντιγράψτε και επικολλήστε τον κώδικα στο <var>filename</var>.c

note: (itstool) path: note/p
en: For more information about compiling GTK+ programs see <link href="http://developer.gnome.org/gtk3/3.4/gtk-compiling.html">Compiling GTK+ Applications on UNIX</link>.
el: Για περισσότερες πληροφορίες σχετικά με τη μεταγλώττιση των προγραμμάτων GTK+ δείτε <link href="http://developer.gnome.org/gtk3/3.4/gtk-compiling.html">Μεταγλωττίζοντας εφαρμογές GTK+ στο UNIX</link>.

note: (itstool) path: section/title
en: Widget Code Examples
el: Δείγματα κώδικα γραφικών στοιχείων

note: (itstool) path: info/desc
en: Create widgets with a discrete ToggleButton
el: Δημιουργία γραφικών στοιχείων με ένα διακριτό ToggleButton

note: (itstool) path: page/p
en: This CheckButton toggles the title.
el: Αυτό το CheckButton εναλλάσσει τον τίτλο.

note: (itstool) path: info/desc
en: A box which can be checked or unchecked
el: Ένα κουμπί που μπορεί να σημειωθεί ή να αποσημειωθεί

note: (itstool) path: page/p
en: This application has a CheckButton. Whether the box is checked dictates whether the window's title bar shows anything.
el: Αυτή η εφαρμογή έχει ένα CheckButton. Εάν το πλαίσιο είναι σημειωμένο υπαγορεύει εάν η γραμμή τίτλου του παραθύρου εμφανίζει οτιδήποτε.

note: (itstool) path: page/p
en: A CheckButton sends the "toggled" signal when it's checked or unchecked. While it's checked, the "active" property is true. While it's not, "active" tests as false.
el: Ένα CheckButton στέλνει το σήμα "εναλλαγής" όταν σημειώνεται ή αποσημειώνεται. Ενώ είναι σημειωμένο, η ιδιότητα "ενεργή" είναι αληθής. Ενώ εάν δεν είναι, το "ενεργή" ελέγχεται ως ψευδής.

note: (itstool) path: section/title
en: Libraries to import
el: Βιβλιοθήκες για εισαγωγή

note: (itstool) path: section/p
en: 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.
el: Αυτές είναι οι βιβλιοθήκες που χρειαζόμαστε να εισάγουμε αυτήν την εφαρμογή για να εκτελεστεί. Να θυμόσαστε ότι η γραμμή που λέει στο GNOME ότι χρησιμοποιούμε Gjs χρειάζεται πάντοτε να πάει στην αρχή.

note: (itstool) path: section/title
en: Creating the application window
el: Δημιουργία του παραθύρου εφαρμογής

note: (itstool) path: section/p
en: All the code for this sample goes in the CheckButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
el: Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση CheckButtonExample. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> to put all our widgets into.
el: Η συνάρτηση _buildUI είναι εκεί που βάζουμε όλον τον κώδικα για να δημιουργήσουμε τη διεπαφή χρήστη της εφαρμογής. Το πρώτο βήμα δημιουργεί ένα νέο <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> για να βάλουμε μέσα τα γραφικά στοιχεία μας.

note: (itstool) path: section/title
en: Creating the checkbutton
el: Δημιουργία του πλήκτρου ελέγχου

note: (itstool) path: section/p
en: This code creates the checkbutton itself. The label next to the checkbutton is created by giving the checkbutton the "label" property and assigning a string value to it. Since this checkbutton toggles whether the window title is on or off, and the window title will be on to start with, we want the box to be checked by default. Whenever the user checks or unchecks the box, we call the _toggledCB function.
el: Αυτός ο κώδικας δημιουργεί το ίδιο το πλήκτρο ελέγχου. Η ετικέτα δίπλα στο πλήκτρο ελέγχου δημιουργείται δίνοντας στο πλήκτρο ελέγχου την ιδιότητα "label" και αποδίδοντας την τιμή μιας συμβολοσειράς σε αυτή. Επειδή αυτό το πλήκτρο ελέγχου εναλλάσσεται εάν ο τίτλος παραθύρου είναι ενεργός ή όχι και ο τίτλος παραθύρου θα είναι ενεργός στην εκκίνηση, θέλουμε το πλαίσιο να σημειωθεί από προεπιλογή. Όταν ο χρήστης σημειώνει ή ξεσημειώνει το πλαίσιο, καλούμε τη συνάρτηση _toggledCB.

note: (itstool) path: section/p
en: This code finishes up creating the UI, by telling the window to show itself and all child widgets (which is just the checkbutton in this case).
el: Αυτός ο κώδικας τελειώνει δημιουργώντας τη γραφική διεπαφή, λέγοντας στο παράθυρο να εμφανίσει τον εαυτό του και όλα τα θυγατρικά γραφικά στοιχεία (που είναι μόνο το πλήκτρο ελέγχου σε αυτήν την περίπτωση).

note: (itstool) path: section/title
en: Function which handles the checkbutton's toggling
el: Η συνάρτηση που χειρίζεται την εναλλαγή του πλαισίου ελέγχου

note: (itstool) path: section/p
en: If the checkbutton is toggled from on to off, we want the window title to disappear. If it's toggled from off to on, we want it to reappear. We can tell which way it was toggled by testing to see whether it's active (checked) or not afterwards. A simple if / else statement which calls the checkbutton's get_active() method will work for this.
el: Εάν το πλήκτρο ελέγχου εναλλάσσεται από ενεργό σε ανενεργό, θέλουμε ο τίτλος του παραθύρου να εξαφανιστεί. Εάν εναλλάσσεται από ανενεργό σε ενεργό, το θέλουμε να επανεμφανίζεται. Μπορούμε να πούμε με ποιο τρόπο εναλλάχτηκε δοκιμάζοντας να δούμε εάν είναι ενεργό (σημειωμένο) ή όχι κατόπιν. Μια απλή πρόταση if / else που καλεί τη μέθοδο get_active() του πλήκτρου ελέγχου θα δουλέψει για αυτό.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished CheckButtonExample class, and set the application running.
el: Τελικά, δημιουργούμε ένα νέο παράδειγμα της τελειωμένης κλάσης CheckButtonExample και εκτελούμε την εφαρμογή.

note: (itstool) path: section/title
en: In-depth documentation
el: Τεκμηρίωση σε βάθος

note: (itstool) path: info/desc
en: A toggle button in a window
el: Ένα κουμπί εναλλαγής σε παράθυρο

note: (itstool) path: section/title
en: Useful methods for a CheckButton widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο CheckButton

note: (itstool) path: section/p
en: In line 17 the <code>"toggled"</code> signal is connected to the callback function <code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 17 το σήμα <code>"toggled"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>toggled_cb()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: info/desc
en: Create widgets with a discrete toggle button
el: Δημιουργία γραφικών στοιχείων με ένα διακριτό κουμπί εναλλαγής

[ctx: text]
note: (itstool) path: info/title
en: ColorButton (JavaScript)
el: Κουμπί χρώματος (JavaScript)

note: (itstool) path: info/desc
en: A button to launch a color selection dialog
el: Ένα κουμπί για εκκίνηση του διαλόγου επιλογής χρώματος

note: (itstool) path: page/title
en: ColorButton
el: Κουμπί χρώματος (ColorButton)

note: (itstool) path: page/p
en: This ColorButton launches a color selection dialog and prints in the terminal the RGB values of the color selected.
el: Αυτό το ColorButton ξεκινά τον διάλογο επιλογής χρωμάτων και τυπώνει στον τερματικό τις τιμές RGB του επιλεγμένου χρώματος.

note: (itstool) path: section/title
en: Useful methods for a ColorButton widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο ColorButton

note: (itstool) path: section/p
en: <code>set_color(color)</code>, where the <code>color</code> is defined as in the example, sets the color of the ColorButton, which by default is black. <code>get_color()</code> returns the color.
el: <code>set_color(color)</code>, όπου το <code>color</code> ορίζεται όπως στο παράδειγμα, ορίζει το χρώμα του ColorButton, που από προεπιλογή είναι μαύρο. <code>get_color()</code> επιστρέφει το χρώμα.

note: (itstool) path: section/p
en: In line 23 the <code>"color-set"</code> signal is connected to the callback function <code>on_color_chosen()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 23 το σήμα <code>"color-set"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>on_color_chosen()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: page/p
en: RGB values of the selected color are shown in the label.
el: Τιμές RGB του επιλεγμένου χρώματος εμφανίζονται στην ετικέτα.

note: (itstool) path: info/desc
en: A text-only drop-down menu
el: Ένα πτυσσόμενο μενού μόνο για κείμενο

note: (itstool) path: page/p
en: A ComboBox is a drop-down menu. The difference between a <link xref="combobox.js">ComboBox</link> and a ComboBoxText is that a ComboBoxText just has basic text options, while a full ComboBox uses a ListStore or TreeStore (which are basically spreadsheets) to show things like branching options, or pictures to go alongside each choice.
el: Ένα σύνθετο πλαίσιο (ComboBox) είναι ένα πτυσσόμενο μενού. Η διαφορά μεταξύ ενός <link xref="combobox.js">ComboBox</link> και ενός κειμένου σύνθετου πλαισίου (ComboBoxText) είναι ότι ένα κείμενο σύνθετου πλαισίου έχει μόνο επιλογές βασικού κειμένου, ενώ ένα πλήρες σύνθετο πλαίσιο χρησιμοποιεί μια αποθήκη λιστών ή αποθήκη δένδρου (που είναι βασικά υπολογιστικά φύλλα) για την εμφάνιση πραγμάτων όπως επιλογές διακλάδωσης ή εικόνες που πηγαίνουν δίπλα σε κάθε επιλογή.

note: (itstool) path: note/p
en: Unless you need the added features of a full ComboBox, or are comfortable working with ListStores and TreeStores, you may find it a lot simpler to use a ComboBoxText whenever possible.
el: Εκτός και χρειάζεστε τα πρόσθετα γνωρίσματα ενός πλήρους σύνθετου πλαισίου (ComboBox), ή είναι άνετη η εργασία με αποθήκες λιστών (ListStores) και αποθήκες δένδρου (TreeStores), μπορεί να το βρείτε πολύ απλούστερο να χρησιμοποιήσετε ένα κείμενο σύνθετου πλαισίου (ComboBoxText) όποτε είναι δυνατό.

note: (itstool) path: section/p
en: All the code for this sample goes in the MessageDialogExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
el: Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση MessageDialogExample. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our widgets into.
el: Η συνάρτηση _buildUI είναι εκεί που βάζουμε όλον τον κώδικα για να δημιουργήσουμε τη διεπαφή χρήστη της εφαρμογής. Το πρώτο βήμα δημιουργεί ένα νέο <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> για να βάλουμε μέσα τα γραφικά στοιχεία μας.

note: (itstool) path: section/title
en: Creating the ComboBoxText
el: Δημιουργία των ComboBoxText

note: (itstool) path: section/p
en: After we create the ComboBoxText, we use its <file>append_text</file> method to add text strings to it. Like the entries in an array, they each have a number for an ID, starting with 0. To make things simpler, you can actually create an array for your ComboBoxText entries, then use a for loop to append them in order, like we did here.
el: Μετά τη δημιουργία του ComboBoxText, χρησιμοποιούμε τη μέθοδό του <file>append_text</file> για να προσθέσουμε συμβολοσειρές κειμένου σε αυτό. Όπως οι καταχωρίσεις σε έναν πίνακα, έχει καθεμιά έναν αριθμό για ταυτότητα, αρχίζοντας με 0. Για απλοποίηση, μπορείτε πράγματι να δημιουργήσετε έναν πίνακα για τις καταχωρίσεις ComboBoxText, έπειτα να χρησιμοποιήσετε έναν βρόχο for για να τα προσαρτήσετε σε σειρά, όπως κάναμε εδώ.

note: (itstool) path: section/p
en: After we populate the ComboBoxText, we set its first entry to be active, so that we'll see the "Select distribution" line before we click on it. Then we connect its <file>changed</file> signal to the _onComboChanged function, so that it's called whenever you make a new selection from the drop-down menu.
el: Μετά το γέμισμα του ComboBoxText, ορίζουμε την πρώτη του καταχώριση να είναι ενεργή, έτσι ώστε θα δούμε τη γραμμή "Select distribution" πριν την πατήσουμε. Έπειτα συνδέουμε το σήμα του <file>changed</file> στη συνάρτηση _onComboChanged, έτσι ώστε να καλείται όποτε κάνετε μια νέα επιλογή από το πτυσσόμενο μενού.

note: (itstool) path: note/p
en: If you'd like to add an entry to a ComboBoxText, you can use the <file>insert_text</file> method. And if you'd rather use a text string as an ID for each entry than rely on numbers alone, you can use the <file>append</file> and <file>insert</file> methods. See the links at the bottom of this tutorial for the details of how to use them.
el: Εάν θα θέλατε να προσθέσετε μια καταχώριση σε ένα ComboBoxText, μπορείτε να χρησιμοποιήσετε τη μέθοδο <file>insert_text</file>. Εάν προτιμάτε να χρησιμοποιήσετε μια συμβολοσειρά κειμένου ως μια ταυτότητα για κάθε καταχώριση αντί να βασίζεστε σε αριθμούς μόνο, μπορείτε να χρησιμοποιήσετε τις μεθόδους <file>append</file> και <file>insert</file>. Δείτε τους συνδέσμους στο τέλος αυτού του μαθήματος για τις λεπτομέρειες χρήσης τους.

note: (itstool) path: section/p
en: Finally, we add the ComboBoxText to the window, and tell the window to show itself and the widget inside it.
el: Τελικά, προσθέτουμε το ComboBoxText στο παράθυρο, έπειτα λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και το γραφικό στοιχείο μέσα του.

note: (itstool) path: section/title
en: Function which handles your selection
el: Η συνάρτηση που χειρίζεται την επιλογή σας

note: (itstool) path: section/p
en: We're going to create a pop-up <link xref="messagedialog.js">MessageDialog</link>, which shows you a message based on which distro you select. First, we create the array of responses to use. Since the first string in our ComboBoxText is just the "Select distribution" message, we make the first string in our array blank.
el: Πρόκειται να δημιουργήσουμε ένα αναδυόμενο <link xref="messagedialog.js">MessageDialog</link>, που σας εμφανίζει ένα μήνυμα με βάση ποια διανομή επιλέγετε. Πρώτα, δημιουργούμε τον πίνακα των απαντήσεων για χρήση. Αφού η πρώτη συμβολοσειρά στο ComboBoxText μας είναι μόνο το μήνυμα "Select distribution", κάνουμε την πρώτη συμβολοσειρά στον πίνακά μας κενή.

note: (itstool) path: section/p
en: Before showing a MessageDialog, we first test to make sure you didn't choose the "Select distribution" message. After that, we set its text to be the entry in the array that corresponds to the active entry in our ComboBoxText. We do that using the <file>get_active</file> method, which returns the number ID of your selection.
el: Πριν την προβολή ενός MessageDialog, δοκιμάζουμε πρώτα για να βεβαιωθούμε ότι δεν επιλέξατε το μήνυμα "Select distribution". Μετά από αυτό, ορίζουμε το κείμενο του να είναι στην καταχώριση στον πίνακα που αντιστοιχεί στην ενεργή καταχώριση στο ComboBoxText μας. Το κάνουμε χρησιμοποιώντας τη μέθοδο <file>get_active</file>, που επιστρέφει τον αριθμό ταυτότητας της επιλογής σας.

note: (itstool) path: note/p
en: Other methods you can use include <file>get_active_id,</file> which returns the text ID assigned by <file>append,</file> and <file>get_active_text,</file> which returns the full text of the string you selected.
el: Άλλες μέθοδοι που μπορείτε να χρησιμοποιήσετε περιλαμβάνουν το <file>get_active_id,</file> που επιστρέφει την ταυτότητα του κειμένου που αποδόθηκε από το <file>append,</file> και <file>get_active_text</file>, τα οποία επιστρέφουν το πλήρες κείμενο της επιλεγμένης συμβολοσειράς.

note: (itstool) path: section/p
en: After we create the MessageDialog, we connect its response signal to the _onDialogResponse function, then tell it to show itself.
el: Μετά τη δημιουργία του MessageDialog, συνδέουμε το σήμα της απάντησής του στη συνάρτηση _onDialogResponse, έπειτα του λέμε να εμφανίσει τον εαυτόν του.

note: (itstool) path: section/p
en: Since the only button the MessageDialog has is an OK button, we don't need to test its response_id to see which button was clicked. All we do here is destroy the popup.
el: Αφού το μόνο κουμπί που ο MessageDialog έχει είναι ένα κουμπί εντάξει, δεν χρειαζόμαστε να ελέγξουμε το response_id του για να δούμε ποιο κουμπί πατήθηκε. Αυτό που κάνουμε εδώ είναι η καταστροφή του αναδυόμενου.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ComboBoxTextExample class, and set the application running.
el: Τελικά, δημιουργούμε ένα νέο στιγμιότυπο της ολοκληρωμένης κλάσης ComboBoxTextExample και εκτελούμε την εφαρμογή.

[ctx: text]
note: (itstool) path: info/title
en: ComboBox (C)
el: Σύνθετο πλαίσιο (ComboBox) (C)

note: (itstool) path: info/desc
en: A widget used to choose from a list of items
el: Ένα γραφικό στοιχείο χρησιμοποιείται για επιλογή από μια λίστα στοιχείων

note: (itstool) path: page/p
en: This ComboBox prints to the terminal when you change your selection.
el: Αυτό το ComboBox τυπώνει στον τερματικό όταν αλλάζετε την επιλογή σας.

note: (itstool) path: info/desc
en: A customizable drop-down menu
el: Ένα προσαρμόσιμο πτυσσόμενο μενού

note: (itstool) path: page/p
en: A ComboBox is an extremely customizable drop-down menu. It holds the equivalent of a <link xref="treeview_simple_liststore.js">TreeView</link> widget that appears when you click on it, complete with a ListStore (basically a spreadsheet) that says what's in the rows and columns. In this example, our ListStore has the name of each option in one column, and the name of a stock icon in the other, which the ComboBox then turns into an icon for each option.
el: Ένα ComboBox είναι ένα άκρως προσαρμόσιμο πτυσσόμενο μενού. Κρατά το ισοδύναμο ενός γραφικού στοιχείου <link xref="treeview_simple_liststore.js">TreeView</link> που εμφανίζεται όταν το πατάτε πάνω του, πλήρες με μια αποθήκη λιστών (ListStore) (βασικά ένα υπολογιστικό φύλλο) που λέει τι είναι στις γραμμές και στις στήλες. Σε αυτό το παράδειγμα, η αποθήκη λιστών μας έχει το όνομα κάθε επιλογής σε μια στήλη και το όνομα ενός εικονιδίου παρακαταθήκης στην άλλη, που το σύνθετο πλαίσιο έπειτα μετατρέπει σε ένα εικονίδιο για κάθε επιλογή.

note: (itstool) path: page/p
en: You select a whole horizontal row at a time, so the icons aren't treated as separate options. They and the text beside them make up each option you can click on.
el: Επιλέγετε μια πλήρως οριζόντια γραμμή τη φορά, έτσι τα εικονίδια δεν συμπεριφέρονται ως ξεχωριστές επιλογές. Αυτές και το κείμενο δίπλα τους κατασκευάζουν κάθε επιλογή που μπορείτε να πατήσετε.

note: (itstool) path: note/p
en: Working with a ListStore can be time-consuming. If you just want a simple text-only drop-down menu, take a look at the <link xref="comboboxtext.js">ComboBoxText</link>. It doesn't take as much time to set up, and is easier to work with.
el: Η εργασία με μια αποθήκη λιστών μπορεί να είναι χρονοβόρα. Εάν θέλετε μόνο ένα απλό πτυσσόμενο μενού μόνο για κείμενο, ρίξτε μια ματιά στο <link xref="comboboxtext.js">ComboBoxText</link>. Δεν παίρνει πολύ χρόνο για εγκατάσταση και δουλεύετε πιο εύκολα.

note: (itstool) path: section/p
en: All the code for this sample goes in the ComboBoxExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
el: Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση ComboBoxExample. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

note: (itstool) path: section/title
en: Creating the ListStore
el: Δημιουργία της αποθήκης λιστών (ListStore)

note: (itstool) path: section/p
en: This ListStore works like the one used in the <link xref="treeview_simple_liststore.js">TreeView</link> example. We're giving it two columns, both strings, because one of them will contain the names of <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">stock Gtk icons</link>.
el: Αυτή η αποθήκη λιστών (ListStore) δουλεύει όπως αυτή που χρησιμοποιήθηκε στο παράδειγμα <link xref="treeview_simple_liststore.js">TreeView</link>. Του δίνουμε δύο στήλες, αμφότερες συμβολοσειρές, επειδή η μια τους θα περιέχει τα ονόματα των <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">εικονιδίων παρακαταθήκης Gtk</link>.

note: (itstool) path: section/p
en: If we'd wanted to use our own icons that weren't already built in to GNOME, we'd have needed to use the <file>gtk.gdk.Pixbuf</file> type instead. Here are a few other types you can use:
el: Εάν θα θέλαμε να χρησιμοποιήσουμε τα δικά μας εικονίδια που δεν ήταν ήδη ενσωματωμένα στο GNOME, θα χρειαζόμασταν να χρησιμοποιήσουμε τον τύπο <file>gtk.gdk.Pixbuf</file>. Να μερικοί άλλοι τύποι που μπορείτε να χρησιμοποιήσετε:

note: (itstool) path: item/p
en: <file>GObject.TYPE_BOOLEAN</file> -- True or false
el: <file>GObject.TYPE_BOOLEAN</file> -- αληθές ή ψευδές

note: (itstool) path: item/p
en: <file>GObject.TYPE_FLOAT</file> -- A floating point number (one with a decimal point)
el: <file>GObject.TYPE_FLOAT</file> -- Ένας αριθμός κινητής υποδιαστολής (ένας με δεκαδική υποδιαστολή)

note: (itstool) path: item/p
en: <file>GObject.TYPE_STRING</file> -- A string of letters and numbers
el: <file>GObject.TYPE_STRING</file> -- Μια συμβολοσειρά γραμμάτων και αριθμών

note: (itstool) path: note/p
en: You need to put the line <file>const GObject = imports.gi.GObject;</file> at the start of your application's code, like we did in this example, if you want to be able to use GObject types.
el: Χρειάζεται να βάλετε τη γραμμή <file>const GObject = imports.gi.GObject;</file> στην αρχή του κώδικα της εφαρμογή σας, όπως κάναμε σε αυτό το παράδειγμα, εάν θέλετε να μπορείτε να χρησιμοποιήσετε τύπους GObject.

note: (itstool) path: section/p
en: Here we create an array of the text options and their corresponding icons, then put them into the ListStore in much the same way we would for a <link xref="treeview_simple_liststore.js">TreeView's</link> ListStore. We only want to put an icon in if there's actually an icon in the options array, so we make sure to check for that first.
el: Εδώ δημιουργούμε έναν πίνακα των επιλογών κειμένου και τα αντίστοιχα τους εικονίδια, έπειτα τα βάζουμε στην αποθήκη λιστών (ListStore) με τον ίδιο χοντρικά τρόπο που θα κάναμε για μία αποθήκη λιστών <link xref="treeview_simple_liststore.js">της προβολής δένδρου</link>. Θέλουμε μόνο να βάλουμε ένα εικονίδιο εάν υπάρχει πράγματι ένα εικονίδιο στον πίνακα επιλογών, έτσι βεβαιωνόμαστε για να ελεγχθεί αυτό πρώτο.

note: (itstool) path: note/p
en: "Select" isn't really an option so much as an invitation to click on our ComboBox, so it doesn't need an icon.
el: Η "Select" δεν είναι πραγματικά μια επιλογή όσο μια πρόσκληση να πατήσουμε στο ComboBox μας, έτσι δεν χρειάζεται ένα εικονίδιο.

note: (itstool) path: section/title
en: Creating the ComboBox
el: Δημιουργία των ComboBox

note: (itstool) path: section/p
en: Each ComboBox has an underlying "model" it takes all its options from. You can use a TreeStore if you want to have a ComboBox with branching options. In this case, we're just using the ListStore we already created.
el: Κάθε σύνθετο πλαίσιο έχει ένα υποκείμενο "model" από όπου παίρνει όλες τις επιλογές του. Μπορείτε να χρησιμοποιήσετε μια αποθήκη δένδρου εάν θέλετε να έχετε ένα σύνθετο πλαίσιο με επιλογές διακλάδωσης. Σε αυτήν την περίπτωση, χρησιμοποιούμε απλά τη αποθήκη λιστών που ήδη δημιουργήσαμε.

note: (itstool) path: section/p
en: This part, again, works much like creating CellRenderers and packing them into the columns of a <link xref="treeview_simple_liststore.js">TreeView</link>. The biggest difference is that we don't need to create the ComboBox's columns as separate objects. We just pack the CellRenderers into it in the order we want them to show up, then tell them to pull information from the ListStore (and what type of information we want them to expect).
el: Αυτό το μέρος, πάλι, δουλεύει παρόμοια με τη δημιουργία απεικονιστών κελιών (CellRenderers) και πακετάρισμα τους στις στήλες μιας <link xref="treeview_simple_liststore.js">TreeView</link>. Η μεγαλύτερη διαφορά είναι ότι δεν χρειαζόμαστε να δημιουργήσουμε τις στήλες του σύνθετου πλαισίου (ComboBox) ως ξεχωριστά αντικείμενα. Απλά πακετάρουμε τους απεικονιστές κελιών σε αυτό με τη σειρά που τα θέλουμε να εμφανιστούν, έπειτα τους λέμε να πάρουν πληροφορίες από τη αποθήκη λιστών (ListStore) (και τι τύπο πληροφορίας θέλουμε να τους περιμένει).

note: (itstool) path: section/p
en: We use a CellRendererText to show the text, and a CellRendererPixbuf to show the icons. We can store the names of the icons' stock types as strings, but when we display them we need a CellRenderer that's designed for pictures.
el: Χρησιμοποιούμε ένα κείμενο απεικονιστή κελιού (CellRendererText) για να εμφανίσουμε το κείμενο και έναν απεικονιστή κελιού Pixbuf (CellRendererPixbuf) για να προβάλουμε τα εικονίδια. Μπορούμε να αποθηκεύσουμε τα ονόματα τύπων παρακαταθήκης των εικονιδίων ως συμβολοσειρές, αλλά όταν τα εμφανίζουμε χρειαζόμαστε έναν απεικονιστή κελιού (CellRenderer) που σχεδιάστηκε για εικόνες.

note: (itstool) path: note/p
en: Just like with a TreeView, the "model" (in this case a ListStore) and the "view" (in this case our ComboBox) are separate. Because of that, we can do things like have the columns in one order in the ListStore, and then pack the CellRenderers that correspond to those columns into the ComboBox in a different order. We can even create a TreeView or other widget that shows the information in the ListStore in a different way, without it affecting our ComboBox.
el: Ακριβώς όπως με μια προβολή δένδρου (TreeView), το "model" (σε αυτήν την περίπτωση μια αποθήκη λιστών (ListStore)) και η "view" (σε αυτήν την περίπτωση το σύνθετο πλαίσιο (ComboBox) μας) είναι ξεχωριστά. Λόγω αυτού, μπορούμε να κάνουμε πράγματα όπως να έχουμε τις στήλες σε μια σειρά στην αποθήκη λιστών και έπειτα πακετάρουμε τους απεικονιστές κελιών (CellRenderers) που αντιστοιχούν σε αυτές τις στήλες στο σύνθετο πλαίσιο με διαφορετική σειρά. Μπορούμε ακόμα να δημιουργήσουμε μια προβολή δένδρου ή άλλο γραφικό στοιχείο που εμφανίζει την πληροφορία στην αποθήκη λίστας με διαφορετικό τρόπο, χωρίς αυτό να επηρεάζει το σύνθετο πλαίσιο.

note: (itstool) path: section/p
en: We want the "Select" text to be the part people see at first, that gets them to click on the ComboBox. So we set it to be the active entry. We also connect the ComboBox's <file>changed</file> signal to a callback function, so that any time someone clicks on a new option something happens. In this case, we're just going to show a popup with a little haiku.
el: Θέλουμε το κείμενο "Select" να είναι το τμήμα που βλέπεται πρώτα, αυτό που τα δέχεται στο πάτημα του ComboBox. Έτσι το ορίζουμε να είναι η ενεργή καταχώριση. Επίσης συνδέουμε το σήμα <file>changed</file> του ComboBox σε μια συνάρτηση επανάκλησης, έτσι ώστε οποτεδήποτε κάποιος πατά σε μια νέα επιλογή κάτι να συμβαίνει. Σε αυτήν την περίπτωση, πρόκειται απλά να εμφανίσουμε ένα αναδυόμενο με ένα μικρό ποίημα.

note: (itstool) path: section/p
en: Finally, we add the ComboBox to the window, and tell the window to show itself and everything inside it.
el: Τελικά, προσθέτουμε το ComboBox στο παράθυρο, έπειτα λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και όλα μέσα του.

note: (itstool) path: section/p
en: We're going to create a pop-up <link xref="messagedialog.js">MessageDialog</link>, which shows you a silly haiku based on which distro you select. First, we create the array of haiku to use. Since the first string in our ComboBox is just the "Select" message, we make the first string in our array blank.
el: Πρόκειται να δημιουργήσουμε ένα αναδυόμενο <link xref="messagedialog.js">MessageDialog</link>, που σας εμφανίζει ένα χαζό ποίημα με βάση ποια διανομή επιλέγετε. Πρώτα, δημιουργούμε τον πίνακα του ποιήματος για χρήση. Αφού η πρώτη συμβολοσειρά στο ComboBox μας είναι μόνο το μήνυμα "Select", κάνουμε την πρώτη συμβολοσειρά στον πίνακά μας κενή.

note: (itstool) path: section/p
en: Before showing a MessageDialog, we first test to make sure you didn't choose the "Select" message. After that, we set its text to be the haiku in the array that corresponds to the active entry in our ComboBoxText. We do that using the <file>get_active</file> method, which returns the number ID of your selection.
el: Πριν την προβολή ενός MessageDialog, δοκιμάζουμε πρώτα για να βεβαιωθούμε ότι δεν επιλέξατε το μήνυμα "Select". Μετά από αυτό, ορίζουμε το κείμενο του να είναι στο ποίημα στον πίνακα που αντιστοιχεί στην ενεργή καταχώριση στο ComboBoxText μας. Το κάνουμε χρησιμοποιώντας τη μέθοδο <file>get_active</file>, που επιστρέφει τον αριθμό ταυτότητας της επιλογής σας.

note: (itstool) path: note/p
en: Other methods you can use include <file>get_active_id</file>, which returns the text ID assigned by <file>append</file>, and <file>get_active_text</file>, which returns the full text of the string you selected.
el: Άλλες μέθοδοι που μπορείτε να χρησιμοποιήσετε περιλαμβάνουν <file>get_active_id,</file> που επιστρέφει το αναγνωριστικό κειμένου που αποδόθηκε από <file>append</file> και <file>get_active_text,</file> που επιστρέφει το πλήρες κείμενο της επιλεγμένης συμβολοσειράς.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ComboBoxExample class, and set the application running.
el: Τελικά, δημιουργούμε ένα νέο στιγμιότυπο της ολοκληρωμένης κλάσης ComboBoxExample και εκτελούμε την εφαρμογή.

note: (itstool) path: page/title
en: ComboBox (one column)
el: ComboBox (μία στήλη)

note: (itstool) path: page/p
en: This ComboBox prints to the terminal your selection when you change it.
el: Αυτό το ComboBox τυπώνει στον τερματικό την επιλογή σας όταν την αλλάζετε.

note: (itstool) path: section/title
en: Useful methods for a ComboBox widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο σύνθετουπλαισίου

note: (itstool) path: section/p
en: The ComboBox widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em> stores the data; the <em>View</em> gets change notifications and displays the content of the model; the <em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more information and for a list of useful methods for ComboBox see <link xref="model-view-controller.py"/>.
el: Το γραφικό στοιχείο ComboBox σχεδιάστηκε γύρω από ένα σχέδιο <em>προτύπου/προβολής/ελεγκτή</em>: το <em>πρότυπο</em> αποθηκεύει τα δεδομένα· το <em>Προβολή</em> παίρνει ειδοποιήσεις αλλαγής και εμφανίζει το περιεχόμενο του προτύπου· ο <em>ελεγκτής</em>, τελικά, αλλάζει την κατάσταση του προτύπου και ειδοποιεί την προβολή για αυτές τις αλλαγές. Για περισσότερες πληροφορίες και για μια λίστα χρήσιμων μεθόδων για ComboBox, δείτε <link xref="model-view-controller.py"/>.

note: (itstool) path: section/p
en: In line 35 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 35 το σήμα <code>"changed"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>on_changed()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: item/p
en: <link href="http://git.gnome.org/browse/pygobject/tree/gi/overrides/Gtk.py">pygobject - Python bindings for GObject Introspection</link>
el: <link href="http://git.gnome.org/browse/pygobject/tree/gi/overrides/Gtk.py">pygobject - δεσμεύσεις Python για αυτοέλεγχο GObject</link>

note: (itstool) path: page/title
en: ComboBox (two columns)
el: ComboBox (δύο στήλες)

note: (itstool) path: section/p
en: In line 45 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 45 το σήμα <code>"changed"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>on_changed()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: page/title
en: Code samples and platform demos in C++
el: Δείγματα κώδικα και παρουσιάσεις πλατφόρμας σε C++

note: (itstool) path: section/title
en: Examples of applications
el: Παραδείγματα εφαρμογών

[ctx: text]
note: (itstool) path: info/title
en: Dialog (C)
el: Διάλογος (C)

note: (itstool) path: info/desc
en: A popup window
el: Ένα αναδυόμενο παράθυρο

note: (itstool) path: page/title
en: Dialog
el: Διάλογος

note: (itstool) path: page/p
en: A dialog window that pops up when a button is pressed.
el: Ένα παράθυρο διαλόγου που αναδύεται όταν ένα κουμπί πατιέται.

[ctx: text]
note: (itstool) path: info/title
en: Dialog (JavaScript)
el: Διάλογος (JavaScript)

note: (itstool) path: page/p
en: A customizable popup window, which has a content area and an action area. This example dialog's content area contains a short message, and its action area contains a button which dismisses the dialog.
el: Ένα προσαρμόσιμο αναδυόμενο παράθυρο, που έχει μια περιοχή περιεχομένου και μια περιοχή ενέργειας. Αυτό το παράδειγμα περιοχής περιεχομένου διαλόγου περιέχει ένα σύντομο μήνυμα και η περιοχή ενέργειας περιέχει ένα κουμπί που απορρίπτει το διάλογο.

[ctx: text]
note: (itstool) path: info/title
en: Dialog (Python)
el: Διάλογος (Python)

note: (itstool) path: page/p
en: A dialog with the response signal connected to a callback function.
el: Ένας διάλογος με το σήμα απάντησης συνδεμένο σε μια συνάρτηση επανάκλησης.

note: (itstool) path: section/title
en: Useful methods for a Dialog widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο διαλόγου

note: (itstool) path: section/p
en: In line 16 the signal <code>"clicked"</code> is connected to the callback function <code>on_button_click()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 16 το σήμα <code>"clicked"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>on_button_click()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: item/p
en: Instead of <code>set_modal(True)</code> we could have <code>set_modal(False)</code> followed by <code>set_destroy_with_parent(True)</code> that would destroy the dialog window if the main window is closed.
el: Αντί για <code>set_modal(True)</code> μπορούμε <code>set_modal(False)</code> ακολουθούμενο από <code>set_destroy_with_parent(True)</code> που μπορεί να καταστρέψει το παράθυρο διαλόγου εάν το κύριο παράθυρο κλείσει.

note: (itstool) path: item/p
en: <code>add_button(button_text="The Answer", response_id=42)</code>, where <code>42</code> is any integer, is an alternative to <code>add_button(button_text="text", response_id=Gtk.ResponseType.RESPONSE)</code>, where <code>RESPONSE</code> could be one of <code>OK, CANCEL, CLOSE, YES, NO, APPLY, HELP</code>, which in turn correspond to the integers <code>-5, -6,..., -11</code>.
el: <code>add_button(button_text="The Answer", response_id=42)</code>, όπου <code>42</code> είναι οποιοσδήποτε ακέραιος, είναι μια εναλλακτική στο <code>add_button(button_text="text", response_id=Gtk.ResponseType.RESPONSE)</code>, όπου <code>RESPONSE</code> μπορεί να είναι ένα από τα <code>OK, CANCEL, CLOSE, YES, NO, APPLY, HELP</code>, που με τη σειρά του αντιστοιχεί σε ακέραιους <code>-5, -6,..., -11</code>.

[ctx: text]
note: (itstool) path: info/title
en: Dialog (Vala)
el: Διάλογος (Vala)

note: (itstool) path: page/p
en: A dialog with the response signal hooked up to a callback function.
el: Ένας διάλογος με το σήμα απάντησης συνδεμένο σε μια συνάρτηση επανάκλησης.

[ctx: text]
note: (itstool) path: info/title
en: Entry (C)
el: Καταχώριση (C)

note: (itstool) path: info/desc
en: A single line text entry field
el: Ένα πεδίο καταχώρισης κειμένου μοναδικής γραμμής

note: (itstool) path: page/title
en: Entry
el: Καταχώριση

note: (itstool) path: page/p
en: This application greets you in the terminal.
el: Αυτή η εφαρμογή σας υποδέχεται στο τερματικό.

[ctx: text]
note: (itstool) path: info/title
en: Entry (JavaScript)
el: Καταχώριση (JavaScript)

note: (itstool) path: info/desc
en: A single-line text entry field
el: Ένα πεδίο καταχώρισης κειμένου μονής γραμμής

note: (itstool) path: page/p
en: This application greets you by name through a pop-up window.
el: Αυτή η εφαρμογή σας χαιρετά με το όνομα μέσα από αναδυόμενο παράθυρο.

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const EntryExample = new Lang.Class({
        Name: 'Entry Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsentry',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
    
    
    
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 100,
                default_width: 300,
                border_width: 10,
                title: "What is your name?"});
    
            // Create the text entry box
            this.entry = new Gtk.Entry ();
            this._window.add(this.entry);
    
            // Connect the text entry box to a function that responds to what you type in
            this.entry.connect("activate", Lang.bind (this, this._hello));
    
            // Show the window and all child widgets
            this._window.show_all();
        },
    
    
    
        _hello: function() {
    
            // Create a popup dialog to greet the person who types in their name
            this._greeter = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                text: "Hello, " + this.entry.get_text() + "!",
                message_type: Gtk.MessageType.OTHER,
                buttons: Gtk.ButtonsType.OK,
            });
    
            // Show the popup dialog
            this._greeter.show();
    
            // Bind the OK button to the function that closes the popup
            this._greeter.connect ("response", Lang.bind(this, this._okClicked));
        },
    
        _okClicked: function () {
            this._greeter.destroy();
        }
    
    });
    
    // Run the application
    let app = new EntryExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const EntryExample = new Lang.Class({
        Name: 'Entry Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsentry',
                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 ();
        },
    
    
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 100,
                default_width: 300,
                border_width: 10,
                title: "What is your name?"});
    
            // Δημιουργία του πλαισίου καταχώρισης κειμένου
            this.entry = new Gtk.Entry ();
            this._window.add(this.entry);
    
            // Σύνδεση του πλαισίου καταχώρισης κειμένου σε μια συνάρτηση που απαντά σε ό,τι πληκτρολογείτε
            this.entry.connect("activate", Lang.bind (this, this._hello));
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
    
    
        _hello: function() {
    
            // Δημιουργία αναδυόμενου διαλόγου για χαιρετισμό του προσώπου που πληκτρολογεί στο όνομά τους
            this._greeter = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                text: "Hello, " + this.entry.get_text() + "!",
                message_type: Gtk.MessageType.OTHER,
                buttons: Gtk.ButtonsType.OK,
            });
    
            // Εμφάνιση του αναδυόμενου διαλόγου
            this._greeter.show();
    
            // Σύνδεση του κουμπιού ΕΝΤΑΞΕΙ στη συνάρτηση που κλείνει το αναδυόμενο
            this._greeter.connect ("response", Lang.bind(this, this._okClicked));
        },
    
        _okClicked: function () {
            this._greeter.destroy();
        }
    
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new EntryExample ();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: Entry (Python)
el: Καταχώριση (Python)

note: (itstool) path: page/p
en: This application greets you in the terminal with the name you provide.
el: Αυτή η εφαρμογή σας χαιρετά στον τερματικό με το όνομα που δώσατε.

note: (itstool) path: section/title
en: Useful methods for an Entry widget
el: Χρήσιμες μέθοδοι για γραφικό στοιχείο εισαγωγής

note: (itstool) path: section/p
en: In line 14 the signal <code>"activate"</code> is connected to the callback function <code>cb_activate()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation. Some of the signals that a Gtk.Entry widget can emit are: <code>"activate"</code> (emitted when the user activates the Entry key); <code>"backspace"</code> (emitted when the user activates the Backspace or Shift-Backspace keys); <code>"copy-clipboard"</code> (Ctrl-c and Ctrl-Insert); <code>"paste-clipboard"</code> (Ctrl-v and Shift-Insert); <code>"delete-from-cursor"</code> (Delete, for deleting a character; Ctrl-Delete, for deleting a word); <code>"icon-press"</code> (emitted when the user clicks an activatable icon); <code>"icon-release"</code> (emitted on the button release from a mouse click over an activatable icon); <code>"insert-at-cursor"</code> (emitted when the user initiates the insertion of a fixed string at the cursor); <code>"move-cursor"</code> (emitted when the user initiates a cursor movement); <code>"populate-popup"</code> (emitted before showing the context menu of the entry; it can be used to add items to it).
el: Στη γραμμή 14 το σήμα <code>"activate"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>cb_activate()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση. Μερικά από τα σήματα που το γραφικό στοιχείο Gtk.Entry μπορεί να εκπέμψει είναι: <code>"activate"</code> (εκπεμπόμενο όταν ο χρήστης ενεργοποιεί το πλήκτρο εισαγωγής)· <code>"backspace"</code> (εκπεμπόμενο όταν ο χρήστης ενεργοποιεί την οπισθοδιαγραφή ή τα πλήκτρα Shift-οπισθοδιαγραφή)· <code>"copy-clipboard"</code> (Ctrl-c και Ctrl-Insert); <code>"paste-clipboard"</code> (Ctrl-v και Shift-Insert); <code>"delete-from-cursor"</code> (διαγραφή, για να διαγραφτεί ένας χαρακτήρας· Ctrl-διαγραφή, για να διαγραφτεί μια λέξη)· <code>"icon-press"</code> (εκπεμπόμενο όταν ο χρήστης πατά ένα ενεργοποιήσιμο εικονίδιο)· <code>"icon-release"</code> (εκπεμπόμενο με την απελευθέρωση του κουμπιού από ένα πάτημα του ποντικιού πάνω από ένα ενεργοποιήσιμο εικονίδιο)· <code>"insert-at-cursor"</code> (εκπεμπόμενο όταν ο χρήστης αρχικοποιεί την εισαγωγή μιας σταθερής συμβολοσειράς στον δρομέα)· <code>"move-cursor"</code> (εκπεμπόμενο όταν ο χρήστης αρχικοποιεί μια μετακίνηση δρομέα)· <code>"populate-popup"</code> (εκπεμπόμενο πριν την προβολή του μενού περιεχομένου της εισαγωγής· μπορεί να χρησιμοποιηθεί για προσθήκη στοιχείων σε αυτή).

note: (itstool) path: item/p
en: <code>get_buffer()</code> and <code>set_buffer(buffer)</code>, where <code>buffer</code> is a Gtk.EntryBuffer object, can be used to get and set the buffer for the entry.
el: <code>get_buffer()</code> και <code>set_buffer(buffer)</code>, όπου <code>buffer</code> είναι ένα αντικείμενο Gtk.EntryBuffer, μπορούν να χρησιμοποιηθούν για λήψη και ορισμό της ενδιάμεσης μνήμης για την εισαγωγή.

note: (itstool) path: item/p
en: <code>get_text()</code> and <code>set_text("some text")</code> can be used to get and set the content for the entry.
el: <code>get_text()</code> και <code>set_text("some text")</code> μπορούν να χρησιμοποιηθούν για λήψη και ορισμό του περιεχομένου για την εισαγωγή.

note: (itstool) path: item/p
en: <code>get_text_length()</code> is self-explanatory.
el: <code>get_text_length()</code> είναι αυτονόητο.

note: (itstool) path: item/p
en: <code>get_text_area()</code> gets the area where the entry's text is drawn.
el: <code>get_text_area()</code> δέχεται την περιοχή όπου το κείμενο εισαγωγής σύρεται.

note: (itstool) path: item/p
en: If we set <code>set_visibility(False)</code> the characters in the entry are displayed as the invisible char. This is the best available in the current font, but it can be changed with <code>set_invisible_char(ch)</code>, where <code>ch</code> is a Unicode charcater. The latter method is reversed by <code>unset_invisbile_char()</code>.
el: Εάν ορίζουμε <code>set_visibility(False)</code> οι χαρακτήρες στην καταχώριση εμφανίζονται ως ο αόρατος χαρακτήρας. Αυτό είναι καλύτερα διαθέσιμο στην τρέχουσα γραμματοσειρά, αλλά μπορεί να αλλαχθεί με <code>set_invisible_char(ch)</code>, όπου <code>ch</code> είναι ένας χαρακτήρας Unicode. Η τελευταία μέθοδος αντιστρέφεται με τον <code>unset_invisbile_char()</code>.

note: (itstool) path: item/p
en: <code>set_max_length(int)</code>, where <code>int</code> is an integer, truncates every entry longer than <code>int</code> to have the desired maximum length.
el: <code>set_max_length(int)</code>, όπου <code>int</code> είναι ένας ακέραιος, που περικόπτει κάθε καταχώριση μεγαλύτερη από <code>int</code> για να έχει το επιθυμητό μέγιστο μήκος.

note: (itstool) path: item/p
en: By default, if you press the Entry key the Gtk.Entry emits the signal <code>"activate"</code>. If you would like to activate the default widget for the window (set using <code>set_default(widget)</code> on the window), then use <code>set_activates_default(True)</code>.
el: Από προεπιλογή, εάν πατήσετε το πλήκτρο καταχώρισης η Gtk.Entry εκπέμπει το σήμα <code>"activate"</code>. Εάν θα θέλατε να ενεργοποιήσετε το προεπιλεγμένο γραφικό στοιχείο για το παράθυρο (ορίστε χρησιμοποιώντας τον <code>set_default(widget)</code> στο παράθυρο), έπειτα χρησιμοποιήστε <code>set_activates_default(True)</code>.

note: (itstool) path: item/p
en: To set a frame around the entry: <code>set_has_frame(True)</code>.
el: Για τον ορισμό ενός πλαισίου γύρω από την καταχώριση: <code>set_has_frame(True)</code>.

note: (itstool) path: item/p
en: <code>set_placeholder_text("some text")</code> sets the text to be displayed in the entry when it is empty and unfocused.
el: Ο <code>set_placeholder_text("some text")</code> ορίζει το εμφανιζόμενο κείμενο στην καταχώριση όταν είναι κενό και χωρίς εστίαση.

note: (itstool) path: item/p
en: <code>set_overwrite_mode(True)</code> and <code>set_overwrite_mode(False)</code> are self-explanatory.
el: <code>set_overwrite_mode(True)</code> και <code>set_overwrite_mode(False)</code> είναι αυτονόητα.

note: (itstool) path: item/p
en: If we have <code>set_editable(False)</code> the user cannot edit the text in the widget.
el: Εάν έχουμε <code>set_editable(False)</code> ο χρήστης δεν μπορεί να επεξεργαστεί το κείμενο στο γραφικό στοιχείο.

note: (itstool) path: item/p
en: <code>set_completion(completion)</code>, where <code>completion</code> is a <link href="http://developer.gnome.org/gtk3/unstable/GtkEntryCompletion.html"><code>Gtk.EntryCompletion</code></link>, sets completion - or disables it if <code>completion</code> is <code>None</code>.
el: <code>set_completion(completion)</code>, όπου <code>completion</code> είναι ένας <link href="http://developer.gnome.org/gtk3/unstable/GtkEntryCompletion.html"><code>Gtk.EntryCompletion</code></link>, ορίζει την ολοκλήρωση - ή το απενεργοποιεί εάν η <code>completion</code> είναι <code>None</code>.

note: (itstool) path: item/p
en: An Entry widget can display progress or activity information behind the text. We use <code>set_progress_fraction(fraction)</code>, where <code>fraction</code> is a <code>float</code> between <code>0.0</code> and <code>1.0</code> inclusive, to fill in the given fraction of the bar. We use <code>set_progress_pulse_step()</code> to set the fraction of total entry width to move the progress bouncing block for each call to <code>progress_pulse()</code>. The latter method indicates that some progress is made, and causes the progress indicator of the entry to enter "activity mode", where a block bounces back and forth. Each call to <code>progress_pulse()</code> causes the block to move by a little bit (the amount of movement per pulse is determined, as said before, by <code>set_progress_pulse_step()</code>).
el: Ένα γραφικό στοιχείο καταχώρισης μπορεί να εμφανίσει πρόοδο ή πληροφορίες δραστηριότητας πίσω από το κείμενο. Χρησιμοποιούμε <code>set_progress_fraction(fraction)</code>, όπου <code>fraction</code> είναι ένας <code>float</code> between <code>0.0</code> και <code>1.0</code> συμπεριλαμβανόμενου, για να συμπληρώσει τη δεδομένο κλάσμα της γραμμής. Χρησιμοποιούμε <code>set_progress_pulse_step()</code> για τον ορισμό του κλάσματος του συνολικού πλάτους καταχώρισης για να μετακινήσουμε την ομάδα αναπήδησης προόδου για κάθε κλήση στον <code>progress_pulse()</code>. Η τελευταία μέθοδος δείχνει ότι κάποια πρόοδος έχει γίνει και προκαλεί τον δείκτη προόδου της καταχώρισης να μπει στην "activity mode", όπου μια ομάδα αναπηδά πίσω και μπρος. Κάθε κλήση στον <code>progress_pulse()</code> προκαλεί την μετακίνηση της ομάδας λιγο (η ποσότητα της μετακίνησης ανά παλμό καθορίζεται, όπως ειπώθηκε πριν, κατά <code>set_progress_pulse_step()</code>).

note: (itstool) path: item/p
en: An Entry widget can also show icons. These icons can be activatable by clicking, can be set up as drag source and can have tooltips. To add an icon, use <code>set_icon_from_stock(icon_position, stock_id)</code>, or one of <code>set_icon_from_pixbuf(icon_position, pixbuf)</code>, <code>set_icon_from_icon_name(icon_position, icon_name)</code>, where <code>icon_position</code> is one of <code>Gtk.EntryIconPosition.PRIMARY</code> (to set the icon at the beginning of the entry) <code>Gtk.EntryIconPosition.SECONDARY</code> (to set the icon at the end of the entry). To set a tooltip on an icon, use <code>set_icon_tooltip_text("tooltip text")</code> or <code>set_icon_tooltip_markup("tooltip text in Pango markup language")</code>.
el: Ένα γραφικό στοιχείο καταχώρισης μπορεί επίσης να εμφανίσει εικονίδια. Αυτά τα εικονίδια που μπορούν να ενεργοποιηθούν με κλικ, μπορούν να οριστούν ως πηγή μεταφοράς και μπορούν να έχουν συμβουλές οθόνης. Για την προσθήκη ενός εικονιδίου, χρησιμοποιήστε <code>set_icon_from_stock(icon_position, stock_id)</code>, ή ένα από τα <code>set_icon_from_pixbuf(icon_position, pixbuf)</code>, <code>set_icon_from_icon_name(icon_position, icon_name)</code>, όπου <code>icon_position</code> είναι ένα από <code>Gtk.EntryIconPosition.PRIMARY</code> (για τον ορισμό του εικονιδίου στην αρχή της καταχώρισης) <code>Gtk.EntryIconPosition.SECONDARY</code> (για τον ορισμό του εικονιδίου στο τέλος της καταχώρισης). Για τον ορισμό μιας συμβουλής οθόνης σε ένα εικονίδιο, χρησιμοποιήστε <code>set_icon_tooltip_text("tooltip text")</code> ή <code>set_icon_tooltip_markup("tooltip text in Pango markup language")</code>.

[ctx: text]
note: (itstool) path: info/title
en: Entry (Vala)
el: Καταχώριση (Vala)

note: (itstool) path: info/desc
en: A dialog suitable for "Open" and "Save" commands
el: Ένας διάλογος κατάλληλος για τις εντολές "Open" και "Save"

note: (itstool) path: page/p
en: This FileChooserDialog saves a text document, which can be opened or written from scratch in a TextView (see below).
el: Αυτός ο FileChooserDialog αποθηκεύει ένα έγγραφο κειμένου, που μπορεί να ανοιχτεί ή να γραφτεί από την αρχή σε μια TextView (δείτε παρακάτω).

note: (itstool) path: page/p
en: It is also possible to call a FileChooserDialog to open a new document.
el: Είναι επίσης πιθανό να καλείτε έναν FileChooserDialog για να ανοίξετε ένα νέο έγγραφο.

note: (itstool) path: section/title
en: Steps to recreate the example
el: Βήματα για αναδημιουργία του παραδείγματος

note: (itstool) path: item/p
en: Create a file .ui to describe an app-menu with items "New", "Open", "Save", "Save as", and "Quit". This can be done with Glade or in a text editor. See <link xref="#xml"/>
el: Δημιουργήστε ένα αρχείο .ui για να περιγράψετε ένα μενού εφαρμογών με στοιχεία "New", "Open", "Save", "Save as" και "Quit". Αυτό μπορεί να γίνει με Glade ή έναν επεξεργαστή κειμένου. Δείτε <link xref="#xml"/>

note: (itstool) path: item/p
en: Create a Python program for a Gtk.TextView with a Gtk.Buffer <code>self.buffer</code>, and a <code>self.file</code> which will be a Gio.File and we set initially as <code>None</code>.
el: Δημιουργήστε ένα πρόγραμμα Python για μία Gtk.TextView με μια Gtk.Buffer <code>self.buffer</code> και ένα <code>self.file</code> που θα είναι ένα Gio.File και το ορίζουμε αρχικά ως <code>None</code>.

note: (itstool) path: item/p
en: In this program, create also the actions corresponding to the items in the app-menu, connect them to callback functions, and import the menu in the <code>do_startup()</code> method with a Gtk.Builder.
el: Σε αυτό το πρόγραμμα, δημιουργήστε επίσης τις ενέργειες που αντιστοιχούν στα στοιχεία στο μενού εφαρμογών, συνδέστε τα στις συναρτήσεις επανάκλησης και εισάγετε το μενού στη μέθοδο <code>do_startup()</code> με ένα Gtk.Builder.

note: (itstool) path: item/p
en: "New" and "Quit" actions and callback functions are quite straightforward, see <link xref="#code"/>. See <link xref="signals-callbacks.py"/> for a more detailed explanation of signals and callback functions.
el: Οι ενέργειες "New" και "Quit" και οι συναρτήσεις επανάκλησης είναι αρκετά απλές, δείτε <link xref="#code"/>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση των σημάτων και των συναρτήσεων επανάκλησης.

note: (itstool) path: item/p
en: "Open" callback should create and open a Gtk.FileChooserDialog for "Open", connected with another callback function for each of the two "Open" and "Cancel" buttons of the FileChooserDialog.
el: Η επανάκληση "Open" πρέπει να δημιουργεί και να ανοίγει έναν Gtk.FileChooserDialog για "Open", συνδεμένο με μια άλλη συνάρτηση επανάκλησης για κάθε κουμπί από τα δύο "Open" και "Cancel" του FileChooserDialog.

note: (itstool) path: item/p
en: "Save as" works basically as "Open", but the callback function of the "Save" button depends on a more complex method <code>save_to_file()</code>.
el: Η "Save as" δουλεύει βασικά ως "Open", αλλά η συνάρτηση επανάκλησης του κουμπιού "Save" εξαρτάται από μια πιο σύνθετη μέθοδο <code>save_to_file()</code>.

note: (itstool) path: item/p
en: "Save" can be reduced to the case where the file is <code>None</code>, that is the case where <code>self.file</code> is a new file, which in turn is the case "Save as"; and to the case where the file is not <code>None</code>, which in turn is reduced to <code>save_to_file()</code>.
el: Η "Save" μπορεί να αναχθεί σε περίπτωση όπου το αρχείο είναι <code>None</code>, δηλαδή η περίπτωση όπου <code>self.file</code> είναι ένα νέο αρχείο, που με τη σειρά του είναι η περίπτωση "Save as"· και στην περίπτωση όπου το αρχείο δεν είναι <code>None</code>, που με τη σειρά του ανάγεται σε to <code>save_to_file()</code>.

note: (itstool) path: item/p
en: Finally, the method <code>save_to_file()</code>: see <link xref="#code"/>, lines 146 - 175.
el: Τελικά, η μέθοδος <code>save_to_file()</code>: δείτε <link xref="#code"/>, γραμμές 146 - 175.

note: (itstool) path: section/title
en: XML file which creates the app-menu
el: Το αρχείο XML που δημιουργεί το μενού εφαρμογών

note: (itstool) path: section/title
en: Useful methods for a FileChooserDialog
el: Χρήσιμες μέθοδοι για ένα FileChooserDialog

note: (itstool) path: section/p
en: Note that the action of the FileChooserDialog can be one of the following: <code>Gtk.FileChooserAction.OPEN</code> (the file chooser will only let the user pick an existing file) <code>Gtk.FileChooserAction.SAVE</code> (the file chooser will let the user pick an existing file, or type in a new filename), <code>Gtk.FileChooserAction.SELECT_FOLDER</code> (the file chooser will let the user pick an existing folder), <code>Gtk.FileChooserAction.CREATE_FOLDER</code> (the file chooser will let the user name an existing or new folder).
el: Σημειώστε ότι η ενέργεια του FileChooserDialog μπορεί να είναι μία από τις ακόλουθες: <code>Gtk.FileChooserAction.OPEN</code> (ο επιλογέας αρχείου θα επιτρέψει μόνο ο χρήστης να επιλέξει ένα υπάρχον αρχείο) <code>Gtk.FileChooserAction.SAVE</code> (ο επιλογέας αρχείου θα επιτρέψει στον χρήστη να επιλέξει ένα υπάρχον αρχείο, ή τύπο σε ένα νέο όνομα αρχείου), <code>Gtk.FileChooserAction.SELECT_FOLDER</code> (ο επιλογέας αρχείου θα επιτρέψει στον χρήστη να επιλέξει έναν υπάρχοντα φάκελο), <code>Gtk.FileChooserAction.CREATE_FOLDER</code> (ο επιλογέας αρχείου θα επιτρέψει στον χρήστη να ονομάσει έναν υπάρχοντα ή νέο φάκελο).

note: (itstool) path: section/p
en: Besides the methods used in the <link xref="#code"/>, we have:
el: Εκτός από τις χρησιμοποιούμενες μεθόδους στο <link xref="#code"/>, έχουμε:

note: (itstool) path: item/p
en: <code>set_show_hidden(True)</code> is used to display hidden files and folders.
el: <code>set_show_hidden(True)</code> χρησιμοποιείται για προβολή κρυφών αρχείων και φακέλων.

note: (itstool) path: item/p
en: <code>set_select_multiple(True)</code> sets that multiple files can be selected. This is only relevant if the mode is <code>Gtk.FileChooserAction.OPEN</code> or <code>Gtk.FileChooserAction.SELECT_FOLDER</code>.
el: Ο <code>set_select_multiple(True)</code> ορίζει ότι πολλά αρχεία μπορούν να επιλεγούν. Αυτό είναι κατάλληλο μόνο εάν η κατάσταση είναι <code>Gtk.FileChooserAction.OPEN</code> ή <code>Gtk.FileChooserAction.SELECT_FOLDER</code>.

note: (itstool) path: item/p
en: In a "Save as" dialog, <code>set_current_name(current_name)</code> sets <code>current_name</code> in the file selector, as if entered by the user; <code>current_name</code> can be something like <em>Untitled.txt</em>. This method should not be used except in a "Save as" dialog.
el: Σε έναν διάλογο "Save as", ο <code>set_current_name(current_name)</code> ορίζει το <code>current_name</code> στον επιλογέα αρχείου, σαν να εισαγόταν από τον χρήστη· το <code>current_name</code> μπορεί να είναι κάτι σαν <em>άτιτλο.txt</em>. Αυτή η μέθοδος δεν πρέπει να χρησιμοποιηθεί εκτός από έναν διάλογο "Save as".

note: (itstool) path: item/p
en: The default current folder is "recent items". To set another folder use <code>set_current_folder_uri(uri)</code>; but note you should use this method and cause the file chooser to show a specific folder only when you are doing a "Save as" command and you already have a file saved somewhere.
el: Ο προεπιλεγμένος τρέχον φάκελος είναι "recent items". Για τον ορισμό άλλου φακέλου χρησιμοποιήστε <code>set_current_folder_uri(uri)</code>· αλλά σημειώστε ότι θα πρέπει να χρησιμοποιήσετε αυτήν τη μέθοδο και να προκαλέσετε τον επιλογέα αρχείου να εμφανίσει έναν συγκεκριμένο φάκελο μόνο όταν εκτελείτε μια εντολή "Save as" και έχετε ήδη ένα αρχείο αποθηκευμένο κάπου.

note: (itstool) path: info/desc
en: A dialog suitable for "Open" and "Save" commands.
el: Ένας διάλογος κατάλληλος για τις εντολές "Open" και "Save".

note: (itstool) path: section/title
en: Overview of the example
el: Επισκόπηση του παραδείγματος

note: (itstool) path: section/p
en: This example demonstrates how the FileChooserDialog can be used. It is incorporated into a very simple text editor application. All the <link xref="menubar.vala#win-app">actions</link>, including the "open", "save" and "save-as" commands can be found in the <link xref="gmenu.vala">app-menu</link>. Here, the app-menu is created using an XML UI file, which is then imported into the application using Gtk.Builder.
el: Αυτό το παράδειγμα δείχνει πώς μπορεί να χρησιμοποιηθεί ο FileChooserDialog. Είναι ενσωματωμένος σε μια πολλή απλή εφαρμογή επεξεργαστή κειμένου. Όλες οι <link xref="menubar.vala#win-app">ενέργειες</link>, συμπεριλαμβάνοντας τις εντολές "open", "save" και "save-as" μπορούν να βρεθούν στο <link xref="gmenu.vala">app-menu</link>. Εδώ, το μενού εφαρμογών δημιουργήθηκε χρησιμοποιώντας ένα αρχείο UI XML, που έπειτα εισήχθη στην εφαρμογή χρησιμοποιώντας Gtk.Builder.

note: (itstool) path: section/title
en: XML UI file which creates the app-menu
el: Το αρχείο UI XML που δημιουργεί το μενού εφαρμογών

note: (itstool) path: section/title
en: Vala Code
el: Κώδικας Vala

note: (itstool) path: section/title
en: Relevant API documentation
el: Σχετική τεκμηρίωση API

[ctx: text]
note: (itstool) path: info/title
en: FontChooserWidget (JavaScript)
el: Γραφικό στοιχείο επιλογής γραμματοσειράς (FontChooserWidget) (JavaScript)

note: (itstool) path: info/desc
en: A widget to choose a font
el: Ένα γραφικό στοιχείο για επιλογή μιας γραμματοσειράς

note: (itstool) path: page/p
en: A FontChooserWidget with a callback function.
el: Ένα FontChooserWidget με μια συνάρτηση επανάκλησης.

note: (itstool) path: section/code
en: //!/usr/bin/gjs
    
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const FontChooserWidgetExample = new Lang.Class ({
        Name: 'Font Chooser Widget Example',
    
        // Create the application itthis
        _init: function () {
            this.application = new Gtk.Application({ application_id: 'org.example.fontchooserwidget' });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function() {
            this.window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
    
        // Build the application's UI
        _buildUI: function() {
            // Create the application window
            this.window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                        window_position: Gtk.WindowPosition.CENTER,
                                                        title: "FontChooserWidget",
                                                        default_width: 200,
                                                        default_height: 200,
                                                        border_width: 10 });
    
            this.fontChooser = new Gtk.FontChooserWidget();
            // a default font
            this.fontChooser.set_font("Sans");
            // a text to preview the font
            this.fontChooser.set_preview_text("This is an example of preview text!");
    
            // connect signal from the font chooser to the callback function
            this.fontChooser.connect("notify::font", Lang.bind(this, this._fontCb));
    
            // add the font chooser to the window
            this.window.add(this.fontChooser);
            this.window.show_all();
       },
    
         // callback function:
         _fontCb: function() {
            // print in the terminal
            print("You chose the font " + this.fontChooser.get_font());
        }
    });
    
    // Run the application
    let app = new FontChooserWidgetExample();
    app.application.run (ARGV);
el: //!/usr/bin/gjs
    
    const Gtk = imports.gi.Gtk·
    const Lang = imports.lang·
    
    const FontChooserWidgetExample = new Lang.Class ({
        Name: 'Font Chooser Widget Example',
    
        // Δημιουργία της εφαρμογής itthis
        _init: function () {
            this.application = new Gtk.Application({ application_id: 'org.example.fontchooserwidget' })·
    
            // Σύνδεση σημάτων '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 ()·
        },
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
            // Δημιουργία του παραθύρου της εφαρμογής
            this.window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                        window_position: Gtk.WindowPosition.CENTER,
                                                        title: "FontChooserWidget",
                                                        default_width: 200,
                                                        default_height: 200,
                                                        border_width: 10 })·
    
            this.fontChooser = new Gtk.FontChooserWidget()·
            // Μια προεπιλεγμένη γραμματοσειρά
            this.fontChooser.set_font("Sans")·
            // Κείμενο για προεπισκόπηση της γραμματοσειράς
            this.fontChooser.set_preview_text("This is an example of preview text!")·
    
            // Σύνδεση σήματος από τον επιλογέα γραμματοσειράς στη συνάρτηση επανάκλησης
            this.fontChooser.connect("notify::font", Lang.bind(this, this._fontCb))·
    
            // Προσθήκη του επιλογέα γραμματοσειράς στο παράθυρο
            this.window.add(this.fontChooser)·
            this.window.show_all()·
       },
    
         // Συνάρτηση επανάκλησης:
         _fontCb: function() {
            // Εκτύπωση στο τερματικό
            print("You chose the font " + this.fontChooser.get_font())·
        }
    })·
    
    // Εκτέλεση της εφαρμογής
    let app = new FontChooserWidgetExample()·
    app.application.run (ARGV)·

note: (itstool) path: section/title
en: Useful methods for a FontChooserWidget
el: Χρήσιμες μέθοδοι για ένα FontChooserWidget

note: (itstool) path: section/p
en: In line 16 the <code>"notify::font"</code> signal from the widget is connected to the callback function <code>font_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 16 το σήμα <code>"notify::font"</code> από το γραφικό στοιχείο συνδέεται με τη συνάρτηση επανάκλησης <code>font_cb()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: item/p
en: To set the font which is initially selected, use <code>set_font(font)</code> (where <code>font</code> is the font name) or <code>set_font_desc(font)</code> (where <code>font</code> is the PangoFontDescription).
el: Για ορισμό της γραμματοσειράς που αρχικά επιλέχτηκε, χρησιμοποιήστε <code>set_font(font)</code> (όπου <code>font</code> είναι το όνομα της γραμματοσειράς) ή <code>set_font_desc(font)</code> (όπου <code>font</code> είναι η PangoFontDescription).

note: (itstool) path: item/p
en: To get the selected font use <code>get_font()</code> or <code>get_font_desc()</code>.
el: Για τη λήψη της επιλεγμένης γραμματοσειράς χρησιμοποιήστε <code>get_font()</code> ή <code>get_font_desc()</code>.

note: (itstool) path: item/p
en: To change the text which is shown in the preview area, use <code>set_preview_text()</code>.
el: Για αλλαγή του κειμένου που προβάλλεται στην περιοχή προεπισκόπησης, χρησιμοποιήστε <code>set_preview_text()</code>.

[ctx: text]
note: (itstool) path: info/title
en: FontChooserWidget (Vala)
el: Γραφικό στοιχείο επιλογής γραμματοσειράς (FontChooserWidget) (Vala)

note: (itstool) path: credit/name
en: Tiffany Antpoolski
el: Tiffany Antopolski

note: (itstool) path: page/p
en: A FontChooserWidget with a lambda callback function.
el: Ένα γραφικό στοιχείο επιλογής γραμματοσειράς (FontChooserWidget) με μια συνάρτηση επανάκλησης λάμδα.

note: (itstool) path: section/code
en: public class MyWindow : Gtk.ApplicationWindow {
            internal MyWindow (MyApplication app) {
                    Object (application: app, title: "FontChooserWidget");
    
    		var font_chooser = new Gtk.FontChooserWidget ();
    		font_chooser.set_font ("Sans");
    		font_chooser.set_preview_text ("This is an example of preview text!");
    		this.add (font_chooser);
    
    		font_chooser.notify["font"].connect (() =&gt; {
    			print ("font: %s\n", font_chooser.get_font ().to_string ());
    			print ("desc: %s\n", font_chooser.get_font_desc ().to_string ());
    			print ("face: %s\n", font_chooser.get_font_face ().get_face_name ());
    			print ("size: %d\n", font_chooser.get_font_size ());
    			print ("family: %s\n", font_chooser.get_font_family ().get_name ());
    			print ("monospace: %s\n\n", font_chooser.get_font_family ().is_monospace ().to_string ());
    		});
    
                    this.show_all ();
            }
    }
    
    public class MyApplication : Gtk.Application {
            protected override void activate () {
                    new MyWindow (this).show ();
            }
    }
    
    public int main (string[] args) {
            return new MyApplication ().run (args);
    }
el: public class MyWindow : Gtk.ApplicationWindow {
            internal MyWindow (MyApplication app) {
                    Object (application: app, title: "FontChooserWidget")·
    
    		var font_chooser = new Gtk.FontChooserWidget ()·
    		font_chooser.set_font ("Sans")·
    		font_chooser.set_preview_text ("This is an example of preview text!")·
    		this.add (font_chooser)·
    
    		font_chooser.notify["font"].connect (() =&gt; {
    			print ("font: %s\n", font_chooser.get_font ().to_string ())·
    			print ("desc: %s\n", font_chooser.get_font_desc ().to_string ())·
    			print ("face: %s\n", font_chooser.get_font_face ().get_face_name ())·
    			print ("size: %d\n", font_chooser.get_font_size ())·
    			print ("family: %s\n", font_chooser.get_font_family ().get_name ())·
    			print ("monospace: %s\n\n", font_chooser.get_font_family ().is_monospace ().to_string ())·
    		})·
    
                    this.show_all ()·
            }
    }
    
    public class MyApplication : Gtk.Application {
            protected override void activate () {
                    new MyWindow (this).show ()·
            }
    }
    
    public int main (string[] args) {
            return new MyApplication ().run (args)·
    }

note: (itstool) path: info/desc
en: A simple implementation of GMenuModel
el: Μια απλή υλοποίηση του GMenuModel

note: (itstool) path: page/p
en: A GtkApplication with a simple GMenu and SimpleActions
el: Μια GtkApplication με ένα απλό GMenu και SimpleActions

note: (itstool) path: info/desc
en: A simple implementation of GMenu
el: Μια απλή εφαρμογή του GMenuModel

note: (itstool) path: section/title
en: Useful methods for a GSimpleAction and a GMenu
el: Χρήσιμες μέθοδοι για μια GSimpleAction και ένα GMenu

note: (itstool) path: section/p
en: In line 33 the signal <code>"activate"</code> from the action <code>new_action</code> (not the menu!) is connected to the callback function <code>new_cb()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 33 το σήμα <code>"activate"</code> από την ενέργεια <code>new_action</code> (όχι το μενού!) συνδέεται με τη συνάρτηση επανάκλησης <code>new_cb()</code> χρησιμοποιώντας <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: section/p
en: Useful methods for a GSimpleAction:
el: Χρήσιμες μέθοδοι για μια GSimpleAction:

note: (itstool) path: item/p
en: To create a new action that is <em>stateless</em>, that is, an action that do not retain or depend on a state given by the action itself, use
el: Για τη δημιουργία μιας νέας ενέργειας που είναι <em>χωρίς κατάσταση</em>, δηλαδή, μια ενέργεια που δεν κρατά ή εξαρτάται από τη δεδομένη κατάσταση από την ίδια την ενέργεια, χρησιμοποιήστε

note: (itstool) path: item/p
en: where <code>"name"</code> is the name of the action and <code>parameter_type</code> is the type of the parameters that the action receives when being activated. This can be <code>None</code>, or <code>GLib.VariantType.new('s')</code> if the parameter is of type <code>str</code>, or instead of <code>'s'</code> a character as described <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">here</link>. To create a new <em>stateful</em> (i.e. not stateless) action, use
el: όπου <code>"name"</code> είναι το όνομα της ενέργειας και <code>parameter_type</code> είναι ο τύπος των παραμέτρων που δέχεται η ενέργεια όταν ενεργοποιείται. Αυτό μπορεί να είναι <code>None</code>, ή <code>GLib.VariantType.new('s')</code> εάν η παράμετρος είναι ο τύπος <code>str</code>, ή στη θέση του <code>'s'</code> ένας χαρακτήρας όπως περιγράφεται <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">εδώ</link>. Για τη δημιουργία μιας νέας ενέργειας <em>με κατάσταση</em> (δηλαδή όχι χωρίς κατάσταση), χρησιμοποιήστε

note: (itstool) path: item/p
en: where <code>initial_state</code> is defined as a GVariant - for instance <code>Glib.Variant.new_string('start')</code>; for a list of possibilities see <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">here</link>.
el: όπου <code>initial_state</code> ορίζεται ως μια GVariant - για παράδειγμα <code>Glib.Variant.new_string('start')</code>; για μια λίστα δυνατοτήτων δείτε <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">εδώ</link>.

note: (itstool) path: item/p
en: <code>set_enabled(True)</code> sets the action as enabled; an action must be enabled in order to be activated or in order to have its state changed from outside callers. This should only be called by the implementor of the action. Users of the action should not attempt to modify its enabled flag.
el: <code>set_enabled(True)</code> ορίζει την ενέργεια ως ενεργή· μια ενέργεια πρέπει να είναι ενεργή για να ενεργοποιηθεί ή για να έχει την κατάσταση της αλλαγμένη από εξωτερικές κλήσεις . Αυτό πρέπει να καλείται μόνο από την εφαρμογή της ενέργειας. Οι χρήστες της ενέργειας δεν πρέπει να προσπαθούν να τροποποιήσουν την ενεργή σημαία του.

note: (itstool) path: item/p
en: <code>set_state(state)</code>, where <code>state</code> is a GVariant, sets the state of the action, updating the 'state' property to the given value. This should only be called by the implementor of the action; users of the action should instead call <code>change_state(state)</code> (where <code>state</code> is as above) to request the change.
el: <code>set_state(state)</code>, όπου <code>state</code> είναι μια GVariant, που ορίζει την κατάσταση της ενέργειας, ενημερώνοντας την ιδιότητα 'state' στη δεδομένη τιμή. Αυτή πρέπει να καλείται μόνο από τον εκτελεστή της ενέργειας· Οι χρήστες της ενέργειας πρέπει να καλούν <code>change_state(state)</code> (όπου <code>state</code> είναι όπως πιο πάνω) για να ζητούν την αλλαγή.

note: (itstool) path: section/p
en: Useful methods for a GMenu:
el: Χρήσιμες μέθοδοι για ένα GMenu:

note: (itstool) path: item/p
en: To insert an item in the menu in position <code>position</code>, use <code>insert(position, label, detailed_action)</code>, where <code>label</code> is the label that will appear in the menu and <code>detailed_action</code> is a string composed of the name of the action to which we prepend the prefix <code>app.</code>. A more detailed discussion of this can be found in <link xref="menubar.py#win-app"/>.
el: Για εισαγωγή ενός στοιχείου στο μενού στη θέση <code>position</code>, χρησιμοποιήστε <code>insert(position, label, detailed_action)</code>, όπου <code>label</code> είναι η ετικέτα που θα εμφανιστεί στο μενού και <code>detailed_action</code> είναι μια συμβολοσειρά αποτελούμενη από το όνομα της ενέργειας στην οποία προτάσσουμε το πρόθεμα <code>app.</code>. Μια πιο λεπτομερής συζήτηση αυτού μπορεί να βρεθεί στο <link xref="menubar.py#win-app"/>.

note: (itstool) path: item/p
en: To append or prepend an item in the menu use respectively <code>append(label, detailed_action)</code> and <code>prepend(label, detailed_action)</code>.
el: Για προσάρτηση ή πρόταξη ενός στοιχείου στο μενού χρησιμοποιήστε αντίστοιχα <code>append(label, detailed_action)</code> και <code>prepend(label, detailed_action)</code>.

note: (itstool) path: item/p
en: Another way of adding items to the menu is to create them as <code>GMenuItem</code>s and use <code>insert_item(position, item)</code>, <code>append_item(item)</code>, or <code>prepend_item(item)</code>; so for instance we might have:
el: Ένας άλλος τρόπος προσθήκης στοιχείων στο μενού είναι η δημιουργία τους ως <code>GMenuItem</code> και η χρήση <code>insert_item(position, item)</code>, <code>append_item(item)</code>, ή <code>prepend_item(item)</code>; έτσι για παράδειγμα πρέπει να έχουμε:

note: (itstool) path: item/p
en: We can also add a whole subsection in a menu using <code>insert_section(position, label, section)</code>, <code>append_section(label, section)</code>, or <code>prepend_section(label, section)</code>, where <code>label</code> is the title of the subsection.
el: Μπορούμε επίσης να προσθέσουμε μια ολόκληρη υποενότητα σε ένα μενού χρησιμοποιώντας <code>insert_section(position, label, section)</code>, <code>append_section(label, section)</code>, ή <code>prepend_section(label, section)</code>, όπου <code>label</code> είναι ο τίτλος της υποενότητας.

note: (itstool) path: item/p
en: To add a submenu that will expand and collapse, use <code>insert_submenu(position, label, section)</code>, <code>append_submenu(label, section)</code>, or <code>prepend_submenu(label, section)</code>, where <code>label</code> is the title of the subsection.
el: Για να προσθέσουμε ένα υπομενού που θα επεκταθεί και θα συμπτυχθεί, χρησιμοποιήστε <code>insert_submenu(position, label, section)</code>, <code>append_submenu(label, section)</code>, ή <code>prepend_submenu(label, section)</code>, όπου <code>label</code> είναι ο τίτλος της υποενότητας.

note: (itstool) path: item/p
en: To remove an item from the menu, use <code>remove(position)</code>.
el: Για την αφαίρεση ενός στοιχείου από το μενού, χρησιμοποιήστε <code>remove(position)</code>.

note: (itstool) path: item/p
en: To set a label for the menu, use <code>set_label(label)</code>.
el: Για ορισμό μιας ετικέτας για το μενού, χρησιμοποιήστε <code>set_label(label)</code>.

note: (itstool) path: note/p
en: <em style="strong">You need to be running GTK+-3.4 or later for this to work</em>
el: <em style="strong">Χρειάζεται να τρέξετε το Gtk+-3.4 ή μεταγενέστερο για να δουλέψει αυτό</em>

[ctx: text]
note: (itstool) path: info/title
en: Grid (C)
el: Πλέγμα (C)

note: (itstool) path: info/desc
en: Pack widgets in rows and columns
el: Πακετάρισμα γραφικών στοιχείων σε γραμμές και στήλες

note: (itstool) path: page/title
en: Grid
el: Πλέγμα

note: (itstool) path: page/p
en: A button widget connected to a progress bar.
el: Ένα γραφικό στοιχείο κουμπιού συνδεμένο με μια γραμμή προόδου.

[ctx: text]
note: (itstool) path: info/title
en: Grid (JavaScript)
el: Πλέγμα (JavaScript)

note: (itstool) path: page/p
en: A button widget connected to a progress bar, inside of a grid which handles the layout.
el: Ένα γραφικό στοιχείο κουμπιού συνδεμένο με μια γραμμή προόδου, μέσα σε ένα πλέγμα που χειρίζεται τη διάταξη.

[ctx: text]
note: (itstool) path: info/title
en: Grid (Python)
el: Πλέγμα (Python)

note: (itstool) path: page/p
en: Some labels in a grid.
el: Μερικές ετικέτες σε ένα πλέγμα.

note: (itstool) path: section/title
en: Useful methods for a Grid widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο πλέγματος

note: (itstool) path: item/p
en: To attach a widget <code>child</code> in position <code>left, top</code> in a slot of given <code>width, height</code> use <code>attach(child, top, left, width, height)</code>. If a widget <code>sibling</code> is already in place, we can also use <code>attach_next_to(child, sibling, side, width, height)</code>, where <code>side</code> is one of <code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>.
el: Για να προσαρτήσετε ένα <code>child</code> γραφικό στοιχείο σε θέση <code>left, top</code> σε μια υποδοχή του δοσμένου <code>width, height</code> χρησιμοποιήστε <code>attach(child, top, left, width, height)</code>. Εάν ένα <code>sibling</code> γραφικό στοιχείο είναι ήδη στη θέση, μπορούμε να χρησιμοποιήσουμε επίσης <code>attach_next_to(child, sibling, side, width, height)</code>, όπου <code>side</code> είναι ένα από τα <code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>.

note: (itstool) path: item/p
en: <code>insert_row(position)</code> and <code>insert_column(position)</code> do exactly what they say; children which are attached at or below this position are moved one row down, and children which span across this position are grown to span the new row. <code>insert_next_to(sibling, side)</code> inserts a row or column at the specified position. The new row or column is placed next to <code>sibling</code>, on the side determined by <code>side</code>; if side is <code>Gtk.PositionType.TOP</code> or <code>Gtk.PositionType.BOTTOM</code>, a row is inserted, if side is <code>Gtk.PositionType.LEFT</code> or <code>Gtk.PositionType.RIGHT</code>, a column is inserted.
el: <code>insert_row(position)</code> και <code>insert_column(position)</code> κάνουν ακριβώς ότι λένε· τα θυγατρικά που προσαρτώνται σε αυτή τη θέση ή από κάτω της μετακινούνται μια γραμμή κάτω και τα θυγατρικά που καλύπτουν κατά μήκος αυτή τη θέση επεκτείνονται για να καλύψουν τη νέα γραμμή. <code>insert_next_to(sibling, side)</code> εισάγει μια γραμμή ή στήλη στη συγκεκριμένη θέση. Η νέα γραμμή ή στήλη τοποθετείται δίπλα στο <code>sibling</code>, στην πλευρά που ορίστηκε από <code>side</code>; εάν η πλευρά είναι <code>Gtk.PositionType.TOP</code> ή <code>Gtk.PositionType.BOTTOM</code>, εισάγεται μια γραμμή, εάν η πλευρά είναι <code>Gtk.PositionType.LEFT</code> του <code>Gtk.PositionType.RIGHT</code>, εισάγεται μια στήλη.

note: (itstool) path: item/p
en: <code>set_row_homogeneous(True)</code> and <code>set_column_homogeneous(True)</code> ensure that (respectively) every row or every column has the same width or height.
el: <code>set_row_homogeneous(True)</code> και <code>set_column_homogeneous(True)</code> βεβαιώνουν ότι (αντίστοιχα) κάθε γραμμή ή στήλη έχει το ίδιο πλάτος ή ύψος.

note: (itstool) path: item/p
en: <code>set_row_spacing(spacing)</code> and <code>set_column_spacing(spacing)</code> force a spacing between (respectively) rows or columns. The value of <code>spacing</code> can be between <code>0</code>, which is the default value, and <code>32767</code>.
el: <code>set_row_spacing(spacing)</code> και <code>set_column_spacing(spacing)</code> εξαναγκάζουν ένα διάκενο μεταξύ (αντίστοιχα) γραμμών ή στηλών. Η τιμή του <code>spacing</code> μπορεί να είναι μεταξύ <code>0</code>, που είναι η προεπιλεγμένη τιμή και <code>32767</code>.

[ctx: text]
note: (itstool) path: info/title
en: Grid (Vala)
el: Πλέγμα (Vala)

note: (itstool) path: page/title
en: Grid widget
el: Γραφικό στοιχείο πλέγματος

note: (itstool) path: info/desc
en: A toplevel window which can contain other widgets, and support GMenu
el: Ένα παράθυρο ανώτατου επιπέδου που μπορεί να περιέχει άλλα γραφικά στοιχεία και υποστηρίζει το GMenu

note: (itstool) path: page/p
en: A minimal GtkApplication with a GtkApplicationWindow
el: Μια ελάχιστη GtkApplication με ένα GtkApplicationWindow

note: (itstool) path: info/desc
en: GtkWindow subclass with GtkApplication support
el: Η υποκλάση GtkWindow με υποστήριξη GtkApplication

note: (itstool) path: page/p
en: A simple GtkApplicationWindow which can support Menus.
el: Ένα απλό GtkApplicationWindow που μπορεί να υποστηρίξει μενού.

note: (itstool) path: page/p
en: The simplest GtkApplication Window which can support <link xref="gmenu.py"/>.
el: Το απλούστερο παράθυρο GtkApplication που μπορεί να υποστηρίξει <link xref="gmenu.py"/>.

note: (itstool) path: section/title
en: Useful methods for a Gtk.ApplicationWindow widget
el: Χρήσιμες μέθοδοι για γραφικό στοιχείο Gtk.ApplicationWindow

note: (itstool) path: item/p
en: <code>set_default_size(200, 100)</code> sets the default size of the window to a width of <code>200</code> and a height of <code>100</code>; if instead of a positive number we pass <code>-1</code> we have the default size.
el: <code>set_default_size(200, 100)</code> ορίζει το προεπιλεγμένο μέγεθος του παραθύρου σε πλάτος <code>200</code> και ύψος <code>100</code>· εάν αντί για ένα θετικό αριθμό περνάμε το <code>-1</code> έχουμε το προεπιλεγμένο μέγεθος.

note: (itstool) path: item/p
en: <code>set_position(Gtk.WindowPosition.CENTER)</code> centers the window. Other options are <code>Gtk.WindowPosition.NONE, Gtk.WindowPosition.MOUSE, Gtk.WindowPosition.CENTER_ALWAYS, Gtk.WindowPosition.CENTER_ON_PARENT</code>.
el: <code>set_position(Gtk.WindowPosition.CENTER)</code> κεντράρει το παράθυρο. Άλλες επιλογές είναι <code>Gtk.WindowPosition.NONE, Gtk.WindowPosition.MOUSE, Gtk.WindowPosition.CENTER_ALWAYS, Gtk.WindowPosition.CENTER_ON_PARENT</code>.

note: (itstool) path: page/p
en: The simplest GtkApplication Window which can support Menus.
el: Το απλούστερο παράθυρο GtkApplication που μπορεί να υποστηρίξει μενού.

[ctx: text]
note: (itstool) path: info/title
en: Guitar tuner (C)
el: Συντονιστής κιθάρας (C)

note: (itstool) path: info/desc
en: Use GTK+ and GStreamer to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
el: Χρησιμοποιήστε GTK+ και GStreamer για να φτιάξετε ένα απλό πρόγραμμα συντονιστή κιθάρας για το GNOME. Αναδεικνύει πώς να χρησιμοποιήσετε τον σχεδιαστή διεπαφών.

note: (itstool) path: page/title
en: Guitar tuner
el: Συντονιστής κιθάρας

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to make a program which plays tones that you can use to tune a guitar. You will learn how to:
el: Σε αυτόν τον οδηγό, θα φτιάξουμε ένα πρόγραμμα που παίζει μουσικούς τόνους και μπορεί να συντονίσει μια κιθάρα. Θα μάθετε να:

note: (itstool) path: item/p
en: Set up a basic project in Anjuta
el: Ρυθμίζετε το κύριο έργο στο Anjuta

note: (itstool) path: item/p
en: Create a simple GUI with Anjuta's UI designer
el: Δημιουργείτε απλό GUI με τον σχεδιαστή UI του Anjuta

note: (itstool) path: item/p
en: Use GStreamer to play sounds
el: Χρησιμοποιείτε το GStreamer για να παίζετε ήχους

note: (itstool) path: synopsis/p
en: You'll need the following to be able to follow this tutorial:
el: Θα χρειαστείτε τα παρακάτω για να μπορέσετε να ακολουθήσετε αυτό το μάθημα:

note: (itstool) path: item/p
en: An installed copy of the <link xref="getting-ready">Anjuta IDE</link>
el: Ένα εγκατεστημένο αντίγραφο του <link xref="getting-ready">Anjuta IDE</link>

note: (itstool) path: item/p
en: Basic knowledge of the C programming language
el: Βασική γνώση της γλώσσας προγραμματισμού C

note: (itstool) path: section/title
en: Create a project in Anjuta
el: Δημιουργία έργου με το Anjuta

note: (itstool) path: section/p
en: Before you start coding, you'll need to set up a new project in Anjuta. This will create all of the files you need to build and run the code later on. It's also useful for keeping everything together.
el: Πριν ξεκινήσετε να προγραμματίζετε, πρέπει να δημιουργήσετε ένα καινούργιο έργο στο Anjuta. Έτσι θα δημιουργηθούν όλα τα απαραίτητα αρχεία που χρειάζονται για την εκτέλεση του κώδικα αργότερα. Επίσης θα ήταν χρήσιμο να τα κρατάτε όλα μαζί.

note: (itstool) path: item/p
en: Start Anjuta and click <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.
el: Ξεκινήστε το Anjuta και πατήστε <guiseq><gui>αρχείο</gui><gui>νέο</gui><gui>έργο</gui></guiseq> για να ανοίξετε τον οδηγό του έργου.

note: (itstool) path: item/p
en: Choose <gui>GTK+ (Simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
el: Επιλέξτε <gui>GTK+ (απλό)</gui> από την καρτέλα <gui>C</gui>, πατήστε <gui>συνέχεια</gui>, και συμπληρώστε τις λεπτομέρειές σας στις επόμενες λίγες σελίδες. Χρησιμοποιήστε το <file>guitar-tuner</file> ως όνομα του έργου και του καταλόγου.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is switched <gui>ON</gui>. On the next page, select <em>gstreamer-0.10</em> from the list to include the GStreamer library in your project.
el: Βεβαιωθείτε ότι το <gui>ρύθμιση εξωτερικών πακέτων</gui> είναι <gui>ενεργό</gui>. Στην επόμενη σελίδα, επιλέξτε <em>gstreamer-0.10</em> από τη λίστα για συμπερίληψη της βιβλιοθήκης GStreamer στο έργο σας.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.c</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
el: Πατήστε <gui>εφαρμογή</gui> και το έργο θα δημιουργηθεί για σας. Ανοίξτε το <file>src/main.c</file> από τις καρτέλες <gui>έργο</gui> ή <gui>αρχείο</gui>. Θα πρέπει να δείτε κάποιο κώδικα που ξεκινάει με τις γραμμές:

note: (itstool) path: section/title
en: Build the code for the first time
el: Κατασκευάστε τον κώδικα για πρώτη φορά

note: (itstool) path: section/p
en: C is a rather verbose language, so don't be surprised that the file contains quite a lot of code. Most of it is template code. It loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:
el: Η C είναι μια μάλλον αναλυτική γλώσσα, έτσι μην εκπλαγείτε που το αρχείο περιέχει πολύ κώδικα. Ο περισσότερος κώδικας είναι πρότυπο κώδικα. Φορτώνει ένα (κενό) παράθυρο από την περιγραφή διεπαφής χρήστη και το εμφανίζει. Περισσότερες λεπτομέρειες δίνονται πιο κάτω· προσπεράστε αυτή τη λίστα αν καταλαβαίνετε τα βασικά:

note: (itstool) path: item/p
en: The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtk</code> (user interface) and <code>gi18n</code> (internationalization) libraries. Functions from these libraries are used in the rest of the code.
el: Οι τρεις γραμμές <code>#include</code> στην κορυφή περιλαμβάνουν τον <code>config</code> (ορίζει χρήσιμη κατασκευή του autoconf), <code>gtk</code> (διεπαφή χρήστη) και βιβλιοθήκες <code>gi18n</code> (διεθνοποίηση). Συναρτήσεις από αυτές τις βιβλιοθήκες χρησιμοποιούνται στον υπόλοιπο κώδικα.

note: (itstool) path: item/p
en: The <code>create_window</code> function creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above), connecting its signals and then displaying it in a window. The GtkBuilder file contains a description of a user interface and all of its elements. You can use Anjuta's editor to design GtkBuilder user interfaces.
el: Ο συνάρτηση <code>create_window</code> δημιουργεί ένα νέο παράθυρο ανοίγοντας ένα αρχείο GtkBuilder (<file>src/guitar-tuner.ui</file>, που ορίζεται λίγες γραμμές παραπάνω), συνδέοντας τα σήματά του και έπειτα εμφανίζοντας τα σε παράθυρο. Αυτό το αρχείο GtkBuilder περιέχει μια περιγραφή μιας διεπαφής χρήστη και όλων των στοιχείων του. Μπορείτε να χρησιμοποιήσετε τον επεξεργαστή του Anjuta για σχεδίαση διεπαφών χρήστη GtkBuilder.

note: (itstool) path: item/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>destroy</code> function is called (and quits the app) when you close the window.
el: Σύνδεση σημάτων είναι πώς καθορίζετε τι συμβαίνει όταν πατάτε ένα κουμπί, ή όταν συμβεί κάποιο άλλο συμβάν. Εδώ, καλείται η συνάρτηση <code>destroy</code> (και τερματίζει την εφαρμογή) όταν κλείνετε το παράθυρο.

note: (itstool) path: item/p
en: The <code>main</code> function is run by default when you start a C application. It calls a few functions which set up and then run the application. The <code>gtk_main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).
el: Η συνάρτηση <code>main</code> τρέχει από προεπιλογή όταν ξεκινάτε μια εφαρμογή C. Καλεί λίγες συναρτήσεις που ρυθμίζουν και έπειτα εκτελούν την εφαρμογή. Η συνάρτηση <code>gtk_main</code> ξεκινά τον κύριο βρόχο του GTK, που εκτελεί τη διεπαφή χρήστη και ξεκινά την απάντηση για συμβάντα (όπως κλικ και πατήματα κουμπιών).

note: (itstool) path: item/p
en: The <code>ENABLE_NLS</code> conditional definition sets up <code>gettext</code>, which is a framework for translating applications. These functions specify how translation tools should handle your app when you run them.
el: Ο υπό όρους ορισμός <code>ENABLE_NLS</code> εγκαθιστά <code>gettext</code>, που είναι ο σκελετός για μετάφραση εφαρμογών. Αυτές οι συναρτήσεις ορίζουν πώς τα εργαλεία μετάφρασης θα χειριστούν την εφαρμογή σας όταν τις εκτελείτε.

note: (itstool) path: section/p
en: This code is ready to be used, so you can compile it by clicking <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> (or press <keyseq><key>Shift</key><key>F7</key></keyseq>).
el: Αυτός ο κώδικας είναι έτοιμος να χρησιμοποιηθεί, οπότε μπορείτε να τον μεταγλωττίσετε με κλικ <guiseq><gui>κατασκευή</gui><gui>κατασκευή έργου</gui></guiseq> (ή πιέζοντας <keyseq><key>Shift</key><key>F7</key></keyseq>).

note: (itstool) path: section/p
en: Press <gui>Execute</gui> on the next window that appears to configure a debug build. You only need to do this once, for the first build.
el: Πατήστε <gui>Execute</gui> στο επόμενο παράθυρο που εμφανίζεται για ρύθμιση κατασκευής αποσφαλμάτωσης. Χρειάζεται να το κάνετε αυτό μόνο μια φορά, για την πρώτη κατασκευή.

note: (itstool) path: section/title
en: Create the user interface
el: Δημιουργία της διεπαφής χρήστη

note: (itstool) path: section/p
en: A description of the user interface (UI) is contained in the GtkBuilder file. To edit the user interface, open <file>src/guitar_tuner.ui</file>. This will switch to the interface designer. The design window is in the center; widgets and widgets' properties are on the left, and the palette of available widgets is on the right.
el: Μια περιγραφή της διεπαφής χρήστη (UI) περιέχεται στο αρχείο GtkBuilder. Για να επεξεργαστείτε τη διεπαφή χρήστη, ανοίξτε το <file>src/guitar_tuner.ui</file>. Θα βρεθείτε στο σχεδιαστή διεπαφής. Το παράθυρο σχεδίασης είναι στο κέντρο· τα γραφικά στοιχεία και οι ρυθμίσεις τους είναι στα αριστερά, η παλέτα με τα διαθέσιμα γραφικά στοιχεία στα δεξιά.

note: (itstool) path: section/p
en: The layout of every UI in GTK+ is organized using boxes and tables. Let's use a vertical <gui>GtkButtonBox</gui> here to assign six <gui>GtkButtons</gui>, one for each of the six guitar strings.
el: Η διάταξη κάθε διεπαφής χρήστη σε Gtk+ οργανώνεται σε κουτιά και πίνακες. Ας χρησιμοποιήσουμε εδώ ένα κάθετο <gui>GtkButtonBox</gui> για να τοποθετήσουμε έξι <gui>GtkButtons</gui>, ένα για κάθε μία από τις χορδές της κιθάρας.

note: (itstool) path: item/p
en: Select a <gui>GtkButtonBox</gui> from the <gui>Container</gui> section of the <gui>Palette</gui> on the right and put it into the window. In the <gui>Properties</gui> pane, set the number of elements to 6 (for the six strings) and the orientation to vertical.
el: Διαλέξτε ένα <gui>GtkButtonBox</gui> από το τμήμα <gui>Container</gui> στην <gui>Παλέτα</gui> στο δεξιά και προσθέστε το στο παράθυρο. Στο φάτνωμα <gui>Ιδιότητες</gui> καθορίστε τον αριθμό των στοιχείων σε 6 (για τις έξι χορδές της κιθάρας) και τον προσανατολισμό σε κάθετο.

note: (itstool) path: item/p
en: Now, choose a <gui>GtkButton</gui> from the palette and put it into the first part of the box.
el: Τώρα, διαλέξτε ένα <gui>GtkButton</gui> από την παλέτα και βάλτε το στο πρώτο μέρος του κουτιού.

note: (itstool) path: item/p
en: While the button is still selected, change the <gui>Label</gui> property in the <gui>Widgets</gui> tab to <gui>E</gui>. This will be the low E string.
el: Έχοντας το κουμπί ακόμα επιλεγμένο, αλλάξτε την <gui>Ετικέτα</gui> στην καρτέλα <gui>Γραφικά στοιχεία</gui> σε <gui>E</gui>. Αυτή θα είναι η χαμηλή χορδή Ε.

note: (itstool) path: item/p
en: Switch to the <gui>Signals</gui> tab (inside the <gui>Widgets</gui> tab) and look for the <code>clicked</code> signal of the button. You can use this to connect a signal handler that will be called when the button is clicked by the user. To do this, click on the signal and type <code>on_button_clicked</code> in the <gui>Handler</gui> column and press <key>Return</key>.
el: Πηγαίνετε στην καρτέλα <gui>Σήματα</gui> (μέσα στην καρτέλα <gui>Γραφικά στοιχεία</gui>) και βρείτε το σήμα <code>clicked</code> του κουμπιού. Μπορείτε να το χρησιμοποιήσετε για να συνδέσετε έναν χειριστή σημάτων που θα καλείται όταν πατηθεί το κουμπί από τον χρήστη. Για να το κάνετε αυτό, πατήστε πάνω στο σήμα και πληκτρολογήστε <code>on_button_clicked</code> στη στήλη <gui>χειριστής</gui> και πατήστε <key>Επιστροφή</key>.

note: (itstool) path: item/p
en: Repeat the above steps for the other buttons, adding the next 5 strings with the names <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, and <em>e</em>.
el: Επαναλάβετε τα παραπάνω βήματα για τα υπόλοιπα κουμπιά, προσθέστε τις επόμενες 5 χορδές με τα ονόματα <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, και <em>e</em>.

note: (itstool) path: item/p
en: Save the UI design (by clicking <guiseq><gui>File</gui><gui>Save</gui></guiseq>) and keep it open.
el: Αποθηκεύστε τη σχεδίαση UI (πατώντας <guiseq><gui>αρχείο</gui><gui>αποθήκευση</gui></guiseq>) και κρατήστε το ανοιχτό.

note: (itstool) path: section/title
en: Creating the signal handler
el: Δημιουργία χειριστή σημάτων

note: (itstool) path: section/p
en: In the UI designer, you made it so that all of the buttons will call the same function, <gui>on_button_clicked</gui>, when they are clicked. We need to add that function in the source file.
el: Στον σχεδιαστή διεπαφών χρήστη, κάνατε όλα τα κουμπιά να καλούν την ίδια συνάρτηση, <gui>on_button_clicked</gui>, όταν πατηθούν. Πρέπει να προσθέσουμε αυτή την συνάρτηση στο πηγαίο κώδικα.

note: (itstool) path: section/p
en: To do this, open <file>main.c</file> while the user interface file is still open. Switch to the <gui>Signals</gui> tab, which you already used to set the signal name. Now take the row where you set the <gui>clicked</gui> signal and drag it into to the source file at a position that is outside any function. The following code will be added to your source file:
el: Για να το κάνετε αυτό, ανοίξτε το <file>main.c</file>, έχοντας ανοιχτό και το αρχείο της διεπαφής χρήστη. Πηγαίνετε στην καρτέλα <gui>σήματα</gui> που ήδη χρησιμοποιήσατε για να ορίσετε το όνομα του σήματος. Τώρα πάρτε τη γραμμή όπου είχατε ορίσει το σήμα <gui>πατημένο</gui> και σύρετε την στο πηγαίο αρχείο σε μια θέση που είναι έξω από κάθε συνάρτηση. Ο ακόλουθος κώδικας θα προστεθεί στο πηγαίο αρχείο:

note: (itstool) path: section/p
en: This signal handler has two arguments: a pointer to the <code>GtkWidget</code> that called the function (in our case, always a <code>GtkButton</code>), and a pointer to some "user data" that you can define, but which we won't be using here. (You can set the user data by calling <code>gtk_builder_connect_signals</code>; it is normally used to pass a pointer to a data structure that you might need to access inside the signal handler.)
el: Αυτός ο χειριστής σήματος έχει δύο ορίσματα: ένα δείκτη στο <code>GtkWidget</code> που κάλεσε τη συνάρτηση (στην περίπτωση μας, πάντοτε ένα <code>GtkButton</code>) και ένα δείκτη στο κάποια "δεδομένα χρήστη" που μπορείτε να ορίσετε, αλλά τα οποία δεν θα χρησιμοποιήσουμε εδώ. (Μπορείτε να ορίσετε τα δεδομένα χρήστη καλώντας <code>gtk_builder_connect_signals</code>; χρησιμοποιείται κανονικά για το πέρασμα ενός δείκτη σε μια δομή δεδομένων που ίσως χρειαστείτε να προσπελάσετε στο χειριστή σήματος.)

note: (itstool) path: section/p
en: For now, we'll leave the signal handler empty while we work on writing the code to produce sounds.
el: Για την ώρα, θα αφήσουμε το χειριστή σημάτων άδειο καθώς θα ασχοληθούμε με το γράψιμο του κώδικα που θα παράγει τους ήχους.

note: (itstool) path: section/title
en: GStreamer pipelines
el: Διοχετεύσεις GStreamer

note: (itstool) path: section/p
en: GStreamer is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones.
el: Το Gtreamer είναι ο σκελετός πολυμέσων του GNOME — μπορείτε να το χρησιμοποιήσετε για να αναπαράγετε, ηχογραφήσετε, και να επεξεργαστείτε βίντεο, ήχο, ροές βίντεο και τα λοιπά. Εδώ, θα το χρησιμοποιήσουμε για να παράγουμε μονές-συχνότητες τόνων.

note: (itstool) path: section/p
en: Conceptually, GStreamer works as follows: You create a <em>pipeline</em> containing several processing elements going from the <em>source</em> to the <em>sink</em> (output). The source can be an image file, a video, or a music file, for example, and the output could be a widget or the soundcard.
el: Εννοιολογικά, το GStreamer λειτουργεί ως εξής: δημιουργείς μια <em>διοχέτευση</em> που περιέχει διάφορα επεξεργαζόμενα στοιχεία που πηγαίνουν από την <em>πηγή</em> στην <em>έξοδο</em>. Η πηγή μπορεί να είναι ένα αρχείο εικόνας, βίντεο, ή και μουσικής, για παράδειγμα, και η έξοδος μπορεί να είναι ένα γραφικό στοιχείο ή η κάρτα ήχου.

note: (itstool) path: section/p
en: Between source and sink, you can apply various filters and converters to handle effects, format conversions and so on. Each element of the pipeline has properties which can be used to change its behaviour.
el: Ανάμεσα στην πηγή και στην έξοδο, μπορείτε να εφαρμόσετε διάφορα φίλτρα και οι μετατροπείς να χειριστούν εφέ, μετατροπές μορφών και λοιπά. Κάθε στοιχείο της διοχέτευσης έχει ιδιότητες που μπορούν να χρησιμοποιηθούν για να αλλάξουν τη συμπεριφορά τους.

note: (itstool) path: media/p
en: An example GStreamer pipeline.
el: Ένα παράδειγμα διοχέτευσης GStreamer.

note: (itstool) path: section/title
en: Set up the pipeline
el: Ρύθμιση της διοχέτευσης

note: (itstool) path: section/p
en: In this simple example we will use a tone generator source called <code>audiotestsrc</code> and send the output to the default system sound device, <code>autoaudiosink</code>. We only need to configure the frequency of the tone generator; this is accessible through the <code>freq</code> property of <code>audiotestsrc</code>.
el: Σε αυτό το απλό παράδειγμα θα χρησιμοποιήσουμε μια πηγή παραγωγής τόνων, την <code>audiotestsrc</code> και θα στείλουμε την έξοδο στην προεπιλεγμένη συσκευή ήχου του συστήματος, <code>autoaudiosink</code>. Πρέπει μόνο να ρυθμίσουμε την συχνότητα της παραγωγής τόνου· αυτό είναι εφικτό μέσα από την ρύθμιση <code>freq</code> του <code>audiotestsrc</code>.

note: (itstool) path: section/p
en: Insert the following line into <file>main.c</file>, just below the <code>#include &lt;gtk/gtk.h&gt;</code> line:
el: Εισάγετε την παρακάτω γραμμή στο <file>main.c</file>, ακριβώς κάτω από τη γραμμή <code>#include &lt;gtk/gtk.h&gt;</code>:

note: (itstool) path: section/p
en: This includes the GStreamer library. You also need to add a line to initialize GStreamer; put the following code on the line above the <code>gtk_init</code> call in the <code>main</code> function:
el: Αυτό περιλαμβάνει τη βιβλιοθήκη του GStreamer. Χρειάζεται επίσης να προσθέσουμε μια γραμμή για αρχικοποίηση του GStreamer· βάλτε τον παρακάτω κώδικα στην γραμμή πάνω από την κλήση <code>gtk_init</code> στη συνάρτηση <code>main</code>:

note: (itstool) path: section/p
en: Then, copy the following function into <file>main.c</file> above the empty <code>on_button_clicked</code> function:
el: Μετά, αντιγράψτε την ακόλουθη συνάρτηση στην <file>main.c</file> πάνω από την κενή συνάρτηση <code>on_button_clicked</code>:

note: (itstool) path: item/p
en: The first five lines create source and sink GStreamer elements (<code>GstElement</code>), and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).
el: Οι τρεις πέντε γραμμές δημιουργούν τα στοιχεία πηγή και έξοδος του GStreamer (<code>GstElement</code>) και ένα στοιχείο διοχέτευσης (το οποίο θα χρησιμοποιηθεί ως περιέκτης για τα δυο άλλα στοιχεία). Δίνουμε το όνομα "note" στη διοχέτευση· ονομάζουμε την πηγή "source" και το ρυθμίζετε στην πηγή <code>audiotestsrc</code>· και ονομάζουμε την έξοδο "output" και την ρυθμίζετε στην έξοδο <code>autoaudiosink</code> (προεπιλεγμένη έξοδος κάρτας ήχου).

note: (itstool) path: item/p
en: The call to <code>g_object_set</code> sets the <code>freq</code> property of the source element to <code>frequency</code>, which is passed as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.
el: Το κάλεσμα του <code>g_object_set</code> ορίζει την ιδιότητα <code>freq</code> του στοιχείου πηγή σε <code>frequency</code>, η οποία έχει περαστεί ως όρισμα στη συνάρτηση <code>play_sound</code>. Αυτή είναι μόνο η συχνότητα της νότας σε Hertz· μερικές χρήσιμες συχνότητες θα οριστούν αργότερα.

note: (itstool) path: item/p
en: <code>gst_bin_add_many</code> puts the source and sink into the pipeline. The pipeline is a <code>GstBin</code>, which is just an element that can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by adding more arguments to <code>gst_bin_add_many</code>.
el: Ο <code>gst_bin_add_many</code> βάζει την πηγή και την έξοδο στη διοχέτευση. Η διοχέτευση είναι ένας <code>GstBin</code>, που είναι μόλις ένα στοιχείο που μπορεί να περιέχει πολλαπλά άλλα στοιχεία GStreamer. Γενικά, μπορείτε να προσθέσετε όσα στοιχεία θέλετε στη διοχέτευση προσθέτοντας περισσότερα ορίσματα στον <code>gst_bin_add_many</code>.

note: (itstool) path: item/p
en: Next, <code>gst_element_link</code> is used to connect the elements together, so the output of <code>source</code> (a tone) goes into the input of <code>sink</code> (which is then output to the sound card). <code>gst_element_set_state</code> is then used to start playback, by setting the state of the pipeline to playing (<code>GST_STATE_PLAYING</code>).
el: Κατόπιν, ο <code>gst_element_link</code> χρησιμοποιείται για σύνδεση των στοιχείων μαζί, έτσι η έξοδος του <code>source</code> (ένας τόνος) πηγαίνει στην είσοδο της <code>sink</code> (που είναι έπειτα έξοδος στην κάρτα ήχου). Το <code>gst_element_set_state</code> χρησιμοποιείται έπειτα για έναρξη αναπαραγωγής, ορίζοντας την κατάσταση της διοχέτευσης να παίξει (<code>GST_STATE_PLAYING</code>).

note: (itstool) path: section/title
en: Stopping playback
el: Διακοπή αναπαραγωγής

note: (itstool) path: section/p
en: We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to call <code>g_timeout_add</code>. This sets a timeout for stopping the sound; it waits for <code>LENGTH</code> milliseconds before calling the function <code>pipeline_stop</code>, and will keep calling it until <code>pipeline_stop</code> returns <code>FALSE</code>.
el: Δεν θέλουμε να παίζουμε έναν ενοχλητικό ήχο για πάντα, οπότε το τελευταίο πράγμα που κάνει η <code>play_sound</code> είναι να καλεί το <code>g_timeout_add</code>. Αυτό ορίζει ένα χρονικό περιθώριο που θα σταματήσει τον ήχο· περιμένει για <code>LENGTH</code> ms πριν καλέσει τη συνάρτηση <code>pipeline_stop</code>, και θα συνεχίσει να την καλεί μέχρι η <code>pipeline_stop</code> να επιστρέψει <code>False</code>.

note: (itstool) path: section/p
en: Now, we'll write the <code>pipeline_stop</code> function which is called by <code>g_timeout_add</code>. Insert the following code <em>above</em> the <code>play_sound</code> function:
el: Τώρα θα γράψουμε τη συνάρτηση <code>pipeline_stop</code>, η οποία καλείται από το <code>g_timeout_add</code>. Προσθέστε τον ακόλουθο κώδικα <em>πάνω</em> από τη συνάρτηση <code>play_sound</code>:

note: (itstool) path: section/p
en: The call to <code>gst_element_set_state</code> stops the playback of the pipeline and <code>g_object_unref</code> unreferences the pipeline, destroying it and freeing its memory.
el: Η κλήση σε <code>gst_element_set_state</code> σταματά την αναπαραγωγή της διοχέτευσης και ο <code>g_object_unref</code> σταματά την αναφορά στη διοχέτευση, καταστρέφοντας την και ελευθερώνοντας τη μνήμη της.

note: (itstool) path: section/title
en: Define the tones
el: Ορισμός των τόνων

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. First of all, we need to know the frequencies for the six guitar strings, which are defined (at the top of <file>main.c</file>) as follows:
el: Θέλουμε να παίζουμε το σωστό ήχο όταν ο χρήστης πατά ένα κουμπί. Πρώτα από όλα, θέλουμε να ξέρουμε τις συχνότητες για τις έξι χορδές της κιθάρας, οι οποίες ορίζονται (στην αρχή του <file>main.c</file>) ως ακολούθως:

note: (itstool) path: section/p
en: Now to flesh out the signal handler that we defined earlier, <code>on_button_clicked</code>. We could have connected every button to a different signal handler, but that would lead to a lot of code duplication. Instead, we can use the label of the button to figure out which button was clicked:
el: Για να δούμε τον χειριστή σημάτων που ορίσαμε πριν, <code>on_button_clicked</code>. Θα μπορούσαμε να είχαμε συνδέσει όλα τα κουμπιά σε διαφορετικό χειριστή σημάτων, αλλά αυτό θα οδηγούσε σε πολλές επαναλήψεις του κώδικα. Αντί αυτού, μπορούμε να χρησιμοποιήσουμε τις ετικέτες στα κουμπιά για να δούμε ποιο πατήθηκε:

note: (itstool) path: section/p
en: A pointer to the <code>GtkButton</code> that was clicked is passed as an argument (<code>button</code>) to <code>on_button_clicked</code>. We can get the text of that button using <code>gtk_button_get_label</code>.
el: Ο δείκτης στο <code>Gtk.Button</code> που πατήθηκε περνά ως όρισμα (<code>button</code>) στο <code>on_button_clicked</code>. Μπορούμε να πάρουμε το κείμενο αυτού του κουμπιού χρησιμοποιώντας <code>gtk_button_get_label</code>.

note: (itstool) path: section/p
en: The text is then compared to the notes that we have using <code>g_str_equal</code>, and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!
el: Το κείμενο έπειτα συγκρίνεται με τις νότες που έχουμε χρησιμοποιήσει <code>g_str_equal</code> και <code>play_sound</code> καλείται με την κατάλληλη συχνότητα για αυτήν την νότα. Αυτό παίζει τον τόνο· ο συντονιστής κιθάρας είναι έτοιμος!

note: (itstool) path: section/title
en: Build and run the application
el: Κατασκευή και εκτέλεση της εφαρμογής

note: (itstool) path: section/p
en: All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and then <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application.
el: Όλος ο κώδικας πρέπει να είναι έτοιμος τώρα. Κλικ <guiseq><gui>κατασκευή</gui><gui>κατασκευή έργου</gui></guiseq> για ανακατασκευή των πάντων και έπειτα <guiseq><gui>τρέξιμο</gui><gui>εκτέλεση</gui></guiseq> για έναρξη της εφαρμογής.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>Debug/src/guitar-tuner</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
el: Εάν δεν το έχετε ήδη κάνει, επιλέξτε την εφαρμογή <file>Debug/src/guitar-tuner</file> στον διάλογο που εμφανίζεται. Τελικά, πατήστε <gui>τρέξιμο</gui> και απολαύστε!

note: (itstool) path: section/title
en: Reference Implementation
el: Υλοποίηση αναφοράς

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.c">reference code</link>.
el: Αν αντιμετωπίσετε προβλήματα με το μάθημα, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="guitar-tuner/guitar-tuner.c">κώδικα αναφοράς</link>.

note: (itstool) path: section/title
en: Next steps
el: Επόμενα βήματα

note: (itstool) path: section/p
en: Here are some ideas for how you can extend this simple demonstration:
el: Εδώ είναι κάποιες ιδέες για το πώς μπορείτε να επεκτείνετε αυτή την απλή παρουσίαση:

note: (itstool) path: item/p
en: Have the program automatically cycle through the notes.
el: Βάλτε το πρόγραμμα να περνάει αυτόματα μέσα από τις νότες.

note: (itstool) path: item/p
en: Make the program play recordings of real guitar strings being plucked.
el: Κάντε το πρόγραμμα να αναπαράγει ηχογραφήσεις από αληθινές χορδές κιθάρας που έχουν εισαχθεί.

note: (itstool) path: item/p
en: To do this, you would need to set up a more complicated GStreamer pipeline which allows you to load and play back music files. You'll have to choose <link href="http://gstreamer.freedesktop.org/documentation/plugins.html">decoder and demuxer</link> GStreamer elements based on the file format of your recorded sounds — MP3s use different elements to Ogg Vorbis files, for example.
el: Για να το κάνετε αυτό, πρέπει να ρυθμίσετε μια πιο περίπλοκη διοχέτευση GStreamer που θα σας επιτρέπει να φορτώνετε και να αναπαράγετε αρχεία ήχου. Θα πρέπει να διαλέξετε τα στοιχεία GStreamer <link href="http://gstreamer.freedesktop.org/documentation/plugins.html">decoder και demuxer</link> με βάση τον τύπο του αρχείου των ηχογραφημένων ήχων — για παράδειγμα το MP3 χρησιμοποιεί διαφορετικά στοιχεία από το Ogg Vorbis.

note: (itstool) path: item/p
en: You might need to connect the elements in more complicated ways too. This could involve using <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/chapter-intro-basics.html">GStreamer concepts</link> that we didn't cover in this tutorial, such as <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-pads.html">pads</link>. You may also find the <cmd>gst-inspect</cmd> command useful.
el: Ίσως χρειαστεί να συνδέσετε τα στοιχεία με πιο περίπλοκους τρόπους. Αυτό μπορεί να συμπεριλαμβάνει τη χρήση <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/chapter-intro-basics.html">Εννοιών GStreamer</link> που δεν καλύπτουμε σε αυτόν τον οδηγό, όπως και <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-pads.html">pad</link>. Ίσως βρείτε χρήσιμη και την εντολή <cmd>gst-inspect</cmd>.

note: (itstool) path: item/p
en: Automatically analyze notes that the user plays.
el: Αυτόματη ανάλυση νότων που παίζει ο χρήστης.

note: (itstool) path: item/p
en: You could connect a microphone and record sounds from it using an <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-autoaudiosrc.html">input source</link>. Perhaps some form of <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-spectrum.html">spectrum analysis</link> would allow you to figure out what notes are being played?
el: Μπορείτε να συνδέσετε μικρόφωνο και να ηχογραφήσετε από αυτό χρησιμοποιώντας την <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-autoaudiosrc.html">πηγή εισόδου</link>. Ίσως κάποια μορφή της <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-spectrum.html">ανάλυσης φάσματος</link> θα σας βοηθούσε να καταλάβετε ποια νότα παίζει;

note: (itstool) path: info/desc
en: Use GTKmm and GStreamermm to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
el: Χρησιμοποιήστε Gtk+ και GStreamer για να κατασκευάσετε μια απλή εφαρμογή συντονιστή κιθάρας για το GNOME. Αναδεικνύοντας τη χρήση του σχεδιαστή διεπαφών.

note: (itstool) path: item/p
en: Basic knowledge of the C++ programming language
el: Βασική γνώση της γλώσσας προγραμματισμού C++

note: (itstool) path: item/p
en: Choose <gui>GTKmm (Simple)</gui> from the <gui>C++</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
el: Επιλέξτε <gui>GTKmm (απλό)</gui> από την καρτέλα <gui>C++</gui>, κλικ <gui>μπροστά</gui> και συμπληρώστε τις λεπτομέρειές σας στις επόμενες λίγες σελίδες. Χρησιμοποιήστε ως όνομα του έργου και του καταλόγου το <file>guitar-tuner</file>.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is selected. On the next page, select <em>gstreamermm-0.10</em> from the list to include the GStreamermm library in your project.
el: Βεβαιωθείτε ότι το <gui>ρύθμιση εξωτερικών πακέτων</gui> επιλέχτηκε. Στην επόμενη σελίδα, επιλέξτε <em>gstreamer-0.10</em> από τη λίστα για συμπερίληψη της βιβλιοθήκης GStreamermm στο έργο σας.

note: (itstool) path: item/p
en: Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.cc</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
el: Πατήστε <gui>τέλος</gui> και το έργο θα δημιουργηθεί για σας. Ανοίξτε <file>src/main.cc</file> από τις καρτέλες <gui>έργο</gui> ή <gui>αρχείο</gui>. Θα πρέπει να δείτε κάποιο κώδικα που ξεκινάει με τις γραμμές:

note: (itstool) path: section/p
en: This is a very basic C++ code setting up GTKmm. More details are given below; skip this list if you understand the basics:
el: Αυτός είναι ένας πολύ βασικός κώδικας C++ εγκατάστασης GTKmm. Περισσότερες λεπτομέρειες δίνονται παρακάτω· προσπεράστε αυτή τη λίστα αν καταλαβαίνετε τα βασικά:

note: (itstool) path: item/p
en: The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtkmm</code> (user interface) and <code>iostream</code> (STL). Functions from these libraries are used in the rest of the code.
el: Οι τρεις γραμμές <code>#include</code> στην κορυφή περιλαμβάνουν τον <code>config</code> (ορίζει χρήσιμη κατασκευή του autoconf), <code>gtkmm</code> (διεπαφή χρήστη) και <code>iostream</code> (STL). Συναρτήσεις από αυτές τις βιβλιοθήκες χρησιμοποιούνται στον υπόλοιπο κώδικα.

note: (itstool) path: item/p
en: The <code>main</code> function creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above) and then displaying it in a window. The GtkBuilder file contains a description of a user interface and all of its elements. You can use Anjuta's editor to design GtkBuilder user interfaces.
el: Η συνάρτηση <code>Main</code> δημιουργεί ένα νέο παράθυρο ανοίγοντας ένα αρχείο GtkBuilder (<file>src/guitar-tuner.ui</file>, που ορίζεται λίγες γραμμές παραπάνω), και έπειτα εμφανίζοντας το σε παράθυρο. Το αρχείο GtkBuilder περιέχει μια περιγραφή μιας διεπαφής χρήστη και όλων των στοιχείων του. Μπορείτε να χρησιμοποιήσετε τον επεξεργαστή του Anjuta για σχεδίαση διεπαφών χρήστη GtkBuilder.

note: (itstool) path: item/p
en: Afterwards it calls a few functions which set up and then run the application. The <code>kit.run</code> function starts the GTKmm main loop, which runs the user interface and starts listening for events (like clicks and key presses).
el: Κατόπιν καλεί λίγες συναρτήσεις που ρυθμίζουν και έπειτα εκτελούν την εφαρμογή. Η συνάρτηση <code>kit.run</code> ξεκινά τον κύριο βρόχο του GTK, που εκτελεί τη διεπαφή χρήστη και ξεκινά την απάντηση για συμβάντα (όπως κλικ και πατήματα κουμπιών).

note: (itstool) path: item/p
en: While the button is still selected, change the <gui>Label</gui> property in the <gui>Widgets</gui> tab to <gui>E</gui>. This will be the low E string. Also change the <gui>Name</gui> property to <gui>button_E</gui>. This is the name we will refer to the widget later in code.
el: Έχοντας το κουμπί ακόμα επιλεγμένο, αλλάξτε την ιδιότητα <gui>ετικέτα</gui> στην καρτέλα <gui>γραφικά στοιχεία</gui> σε <gui>E</gui>. Αυτή θα είναι η χαμηλή χορδή Ε. Επίσης αλλάξτε την ιδιότητα <gui>όνομα</gui> σε <gui>button_E</gui>. Με αυτό το όνομα θα αναφερθούμε στο γραφικό στοιχείο αργότερα στον κώδικα.

note: (itstool) path: item/p
en: Repeat the above steps for the other buttons, adding the next 5 strings with the labels <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, and <em>e</em> and the names <em>button_A</em>, etc.
el: Επαναλάβετε τα παραπάνω βήματα για τα υπόλοιπα κουμπιά, προσθέστε τις επόμενες 5 χορδές με τις ετικέτες <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, και <em>e</em> και τα ονόματα <em>button_A</em>, κλπ.

note: (itstool) path: item/p
en: Save the UI design (by clicking <guiseq><gui>File</gui><gui>Save</gui></guiseq>) and close the file.
el: Αποθηκεύστε τη σχεδίαση UI (πατώντας <guiseq><gui>αρχείο</gui><gui>αποθήκευση</gui></guiseq>) και κλείστε το αρχείο.

note: (itstool) path: section/p
en: GStreamer is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones. GStreamermm is the C++ binding to GStreamer which we will use here.
el: Το Gtreamer είναι ο σκελετός πολυμέσων του GNOME — μπορείτε να το χρησιμοποιήσετε για να αναπαραγωγή ηχογράφηση και επεξεργασία βίντεο, ήχου, ροών ιστοκάμερας και τα παρόμοια. Εδώ, θα το χρησιμοποιήσουμε για να παράξουμε μονές συχνότητες τόνων. Το GStreamermm είναι ένας σύνδεσμος C++ στο GStreamer που θα χρησιμοποιήσουμε εδώ.

note: (itstool) path: section/title
en: Using GStreamermm
el: Χρήση GStreamermm

note: (itstool) path: section/p
en: To use GStreamermm, it has to be initialised. We do that by adding the following line of code next to the <code>Gtk::Main kit(argc, argv);</code> line in <file>main.cc</file>:
el: Για να χρησιμοποιήσετε το GStreamermm, πρέπει να αρχικοποιηθεί. Το κάνουμε αυτό προσθέτοντας την παρακάτω γραμμή του κώδικα δίπλα στη γραμμή <code>Gtk::Main kit(argc, argv);</code> στο <file>main.cc</file>:

note: (itstool) path: section/p
en: While we are on it, also make sure that the <file>gstreamermm.h</file> is included in <file>main.cc</file> properly.
el: Ενώ είμαστε σε αυτό, βεβαιωθείτε επίσης ότι το <file>gstreamermm.h</file> περιέχεται κατάλληλα στο <file>main.cc</file>.

note: (itstool) path: section/p
en: To simplify the handling of the pipeline we will define a helper class <code>Sound</code>. We do that in <file>main.cc</file> in order to keep this example simple, whereas you might usually want to use a separate file:
el: Για απλοποίηση του χειρισμού της διοχέτευσης θα ορίσουμε μια βοηθητική κλάση <code>Sound</code>. Το κάνουμε στο <file>main.cc</file> για να κρατήσουμε αυτό το παράδειγμα απλό, ενώ ίσως συνήθως να θέλατε να το χρησιμοποιήσετε σε ξεχωριστό αρχείο:

note: (itstool) path: section/p
en: The code has the following purpose:
el: Ο κώδικας έχει τον παρακάτω σκοπό:

note: (itstool) path: item/p
en: In the constructor, source and sink GStreamer elements (<code>Gst::Element</code>) are created, and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output). After the elements have been added to the pipeline and linked together, the pipeline is ready to run.
el: Στον κατασκευαστή, τα στοιχεία πηγής και εξόδου του GStreamer (<code>Gst::Element</code>)δημιουργούνται και ένα στοιχείο διοχέτευσης (το οποίο θα χρησιμοποιηθεί ως περιέκτης για τα δυο άλλα στοιχεία). Δίνουμε το όνομα "note" στη διοχέτευση· ονομάζουμε την πηγή "source" και ρυθμίζεται στην πηγή <code>audiotestsrc</code>· και ονομάζουμε την έξοδο "output" και την ρυθμίζετε στην έξοδο <code>autoaudiosink</code> (προεπιλεγμένη έξοδος κάρτας ήχου). Αφού τα στοιχεία προστεθούν στη διοχέτευση και συνδεθούν μαζί, η σωλήνωση είναι έτοιμη να τρέξει.

note: (itstool) path: item/p
en: <code>start_playing</code> sets the source element to play a particular frequency and then starts the pipeline so the sound actually starts playing. As we don't want to have the annoying sound for ages, a timeout is set up to stop the pipeline after 200 ms by calling <code>stop_playing</code>.
el: Ο <code>start_playing</code> ορίζει το στοιχείο πηγής να αναπαράγει μια συγκεκριμένη συχνότητα και έπειτα ξεκινά τη διοχέτευση ώστε ο ήχος στην πραγματικότητα να ξεκινήσει αναπαραγωγή. Καθώς δεν θέλουμε να έχουμε τον ενοχλητικό ήχο για πολύ, ορίζεται μια λήξη χρόνου για να σταματήσει τη διοχέτευση μετά από 200 ms καλώντας <code>stop_playing</code>.

note: (itstool) path: item/p
en: In <code>stop_playing</code> which is called when the timeout has elapsed, the pipeline is stopped and as such there isn't any sound output anymore. As GStreamermm uses reference counting through the <code>Glib::RefPtr</code> object, the memory is automatically freed once the <code>Sound</code> class is destroyed.
el: Στον <code>stop_playing</code> που καλείται όταν η λήξη χρόνου περάσει, η διοχέτευση σταματά και έτσι δεν υπάρχει κανένας ήχος εξόδου πια. Καθώς το GStreamermm χρησιμοποιεί μετρητή αναφοράς μέσα από το αντικείμενο <code>Glib::RefPtr</code>, η μνήμη αυτόματα ελευθερώνεται μόλις η κλάση <code>Sound</code> καταστραφεί.

note: (itstool) path: section/title
en: Connecting the signals
el: Σύνδεση σημάτων

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. That means that we have to connect to the signal that is fired when the user clicks the button. We also want to provide information to the called function which tone to play. GTKmm makes that quite easy as we can easily bind information with the <em>sigc</em> library.
el: Θέλουμε να παίξουμε τον σωστό ήχο, όταν ο χρήστης πατά ένα κουμπί. Αυτό σημαίνει ότι πρέπει να συνδεθούμε στο σήμα που ξεκινά όταν ο χρήστης πατά το κουμπί. Θέλουμε επίσης να δώσουμε πληροφορίες στην καλούμενη συνάρτηση ποιο τόνο να παίξει. Το GTKmm το κάνει αρκετά απλό καθώς μπορούμε εύκολα να συνδέσουμε πληροφορίες με τη βιβλιοθήκη <em>sigc</em>.

note: (itstool) path: section/p
en: The function that is called when the user clicks a button can be pretty simple, as all the interesting stuff is done in the helper class now:
el: Η συνάρτηση που καλείται όταν ο χρήστης πατά ένα κουμπί μπορεί να είναι αρκετά απλή, καθώς όλο το ενδιαφέρον υλικό γίνεται τώρα στη βοηθητική κλάση:

note: (itstool) path: section/p
en: It only calls the helper class we defined before to play the correct frequencies. With some more clever code we would also have been able to directly connect to the class without using the function but we will leave that to use as an exercise.
el: Καλεί μόνο τη βοηθητική κλάση που ορίσαμε πριν να παίξει τις σωστές συχνότητες. Με κάποια επιπλέον κώδικα θα μπορούσαμε επίσης να μπορέσουμε την άμεση σύνδεση στην κλάση χωρίς χρήση της συνάρτησης, αλλά θα το αφήσουμε να χρησιμοποιηθεί ως άσκηση.

note: (itstool) path: section/p
en: The code to set up the signals should be added to the <code>main()</code> function just after the <code>builder-&gt;get_widget("main_window", main_win);</code> line:
el: Ο κώδικας για ρύθμιση των σημάτων πρέπει να προστεθεί στη συνάρτηση <code>main()</code> αμέσως μετά τη γραμμή <code>builder-&gt;get_widget("main_window", main_win);</code>:

note: (itstool) path: item/p
en: At first we create an instance of our helper class that we want to use now and declare a variable for the button we want to connect to.
el: Πρώτα δημιουργούμε ένα στιγμιότυπο της βοηθητικής μας κλάσης που θέλουμε να χρησιμοποιήσουμε τώρα και δηλώνουμε μια μεταβλητή για το κουμπί στο οποίο θέλουμε να συνδεθούμε.

note: (itstool) path: item/p
en: Next, we receive the button object from the user interface that was created out of the user interface file. Remember that <em>button_E</em> is the name we gave to the first button.
el: Κατόπιν, δεχόμαστε το αντικείμενο κουμπιού από τη διεπαφή χρήστη που δημιουργήθηκε από το αρχείο διεπαφής χρήστη. Να θυμάστε ότι <em>button_E</em> είναι το όνομα που δώσαμε στο πρώτο κουμπί.

note: (itstool) path: item/p
en: Finally we connect the <em>clicked</em> signal. This isn't fully straightforward because this is done in a fully type-safe way and we actually want to pass the frequency and our helper class to the signal handler. <code>sigc::ptr_fun(&amp;on_button_clicked)</code> creates a <em>slot</em> for the <code>on_button_clicked</code> method we defined above. With <code>sigc::bind</code> we are able to pass additional arguments to the slot and in this case we pass the frequency (as double) and our helper class.
el: Τελικά συνδέουμε το σήμα <em>πατημένο</em>. Αυτό δεν είναι πλήρως κατανοητό επειδή αυτό γίνεται με έναν πλήρη τρόπο ασφαλούς τύπου και στην πραγματικότητα θέλουμε να περάσουμε τη συχνότητα και τη βοηθητική μας κλάση στο χειριστή σήματος. Ο <code>sigc::ptr_fun(&amp;on_button_clicked)</code> δημιουργεί μια <em>υποδοχή</em> για τη μέθοδο <code>on_button_clicked</code> που ορίσαμε παραπάνω. Με τον <code>sigc::bind</code> μπορούμε να περάσουμε πρόσθετα ορίσματα στην υποδοχή και σε αυτήν την περίπτωση περνάμε τη συχνότητα (ως διπλή) και τη βοηθητική μας κλάση.

note: (itstool) path: section/p
en: Now that we have set up the <em>E</em> button we also need to connect the other buttons according to their frequencies: 440 for A, 587.33 for D, 783.99 for G, 987.77 for B and 1318.5 for the high E. This is done in the same way, just passing a different frequency to the handler.
el: Τώρα που ρυθμίσαμε το κουμπί <em>E</em> θα χρειαστούμε επίσης να συνδέσουμε τα άλλα κουμπιά σύμφωνα με τις συχνότητές τους: 440 για A, 587.33 για D, 783.99 για G, 987.77 για B και 1318.5 για την υψηλή Ε. Αυτό γίνεται με τον ίδιο τρόπο, απλά περνώντας μια διαφορετική συχνότητα στον χειριστή.

note: (itstool) path: section/p
en: All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and then <guiseq><gui>Run</gui><gui>Run</gui></guiseq> to start the application.
el: Όλος ο κώδικας πρέπει να είναι έτοιμος τώρα. Κλικ <guiseq><gui>κατασκευή</gui><gui>κατασκευή έργου</gui></guiseq> για ανακατασκευή των πάντων και έπειτα <guiseq><gui>τρέξιμο</gui><gui>τρέξιμο</gui></guiseq> για έναρξη της εφαρμογής.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.cc">reference code</link>.
el: Αν αντιμετωπίσετε προβλήματα με το μάθημα, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="guitar-tuner/guitar-tuner.cc">κώδικα αναφοράς</link>.

note: (itstool) path: section/title
en: Further Reading
el: Περαιτέρω ανάγνωση

note: (itstool) path: section/p
en: Many of the things shown above are explained in detail in the <link href="http://library.gnome.org/devel/gtkmm-tutorial/stable/">GTKmm book</link> which also covers a lot more key concept for using the full power of GTKmm. You might also be interested in the <link href="http://library.gnome.org/devel/gstreamermm/">GStreamermm reference documentation</link>.
el: Πολλά από τα πράγματα που εμφανίστηκαν παραπάνω εξηγούνται με λεπτομέρεια στο <link href="http://library.gnome.org/devel/gtkmm-tutorial/stable/">βιβλίο GTKmm</link> που επίσης καλύπτει πολύ περισσότερες βασικές έννοιες χρήσης όλης της δύναμης του GTKmm. Ίσως επίσης ενδιαφέρεστε για την <link href="http://library.gnome.org/devel/gstreamermm/">τεκμηρίωση αναφοράς GStreamermm</link>.

[ctx: text]
note: (itstool) path: info/title
en: Guitar tuner (JavaScript)
el: Συντονιστής κιθάρας (JavaScript)

note: (itstool) path: info/desc
en: Use GTK+ and GStreamer to build a simple guitar tuner application for GNOME.
el: Χρησιμοποιήστε GTK+ και GStreamer για να κατασκευάσετε μια απλή εφαρμογή ρυθμιστή κιθάρας για το GNOME.

note: (itstool) path: synopsis/p
en: In this tutorial we'll construct a small application, Guitar Tuner, using JavaScript and GTK+ and GStreamer. To do and run all the code examples yourself, you need an editor to write code in, terminal and GNOME 3. or higher installed into your computer.
el: Σε αυτό το μάθημα θα κατασκευάσουμε μια μικρή εφαρμογή, Guitar Tuner, χρησιμοποιώντας JavaScript, GTK+ και GStreamer. Για να κάνετε και να τρέξετε όλα τα παραδείγματα κώδικα οι ίδιοι, χρειαζόσαστε έναν επεξεργαστή για το γράψιμο του κώδικα, τερματικό και GNOME 3 ή μεταγενέστερο εγκατεστημένο στον υπολογιστή σας.

note: (itstool) path: item/p
en: <link xref="#gstreamer">GStreamer pipelines</link>
el: <link xref="#gstreamer">Διοχετεύσεις GStreamer</link>

note: (itstool) path: item/p
en: <link xref="#script">Script for running the application</link>
el: <link xref="#script">Σενάριο για εκτέλεση της εφαρμογής</link>

note: (itstool) path: item/p
en: <link xref="#imports">Libraries to import</link>
el: <link xref="#imports">Βιβλιοθήκες για εισαγωγή</link>

note: (itstool) path: item/p
en: <link xref="#mainwindow">Creating the main window for the application</link>
el: <link xref="#mainwindow">Δημιουργία του κύριου παραθύρου για την εφαρμογή</link>

note: (itstool) path: item/p
en: <link xref="#buttons">Buttons for the tunes</link>
el: <link xref="#buttons">Κουμπιά για τις μελωδίες</link>

note: (itstool) path: item/p
en: <link xref="#playSound">Making the sounds with GStreamer</link>
el: <link xref="#playSound">Κάνοντας τους ήχους με GStreamer</link>

note: (itstool) path: item/p
en: <link xref="#connecting">Connecting buttons to playSound</link>
el: <link xref="#connecting">Συνδέοντας κουμπιά στο playSound</link>

note: (itstool) path: item/p
en: <link xref="#guitarjs">The whole program</link>
el: <link xref="#guitarjs">Ολόκληρο το προόγραμμα</link>

note: (itstool) path: item/p
en: <link xref="#terminal">Running the application form Terminal</link>
el: <link xref="#terminal">Εκτέλεση της εφαρμογής από τερματικό</link>

note: (itstool) path: page/p
en: After reading this tutorial, you should see this in your screen:
el: Μετά την ανάγνωση αυτού του μαθήματος, θα πρέπει να δείτε αυτό στην οθόνη σας:

note: (itstool) path: section/title
en: Script for running the application
el: Σενάριο για εκτέλεση της εφαρμογής

note: (itstool) path: section/p
en: This line tells how to run the script. It needs to be the first line of the code and it needs to be executable. To get the execution rights go to terminal and run in right folder: chmod +x scriptname. Or you can use the graphical filemanager. Just go to the right folder where your code is, right click you code file, choose properties, click the permissions tab and check the box for allow executing file as a program
el: Αυτή η γραμμή λέει πώς θα εκτελεστεί το σενάριο. Πρέπει να είναι η πρώτη γραμμή του κώδικα και να είναι εκτελέσιμη. Για λήψη των δικαιωμάτων εκτέλεσης πηγαίνετε στον τερματικό και εκτελέστε στον σωστό φάκελο: chmod +x όνομα σεναρίου. Ή μπορείτε να χρησιμοποιήσετε τον διαχειριστή αρχείου γραφικών. Απλά πηγαίνετε στον σωστό φάκελο όπου είναι ο κώδικας σας δεξί κλικ στο αρχείο του κώδικα σας, επιλέξτε ιδιότητες, κλικ στην καρτέλα δικαιωμάτων και σημειώστε το πλαίσιο για να επιτραπεί η εκτέλεση του αρχείου ως πρόγραμμα

note: (itstool) path: section/p
en: In order to have a working program we need to import a few GObject Introspection -libraries to our use. For working UI, we need Gtk and for Gstreamer to work we need Gst. These are imported in the beginning so we have them at use everywhere. Also in the beginning we import a construct Mainloop to handle the timeout to be used with the tuning sounds.
el: Για να υπάρχει ένα λειτουργικό πρόγραμμα χρειάζεται να εισαχθούν λίγα GObject αυτοελέγχου - βιβλιοθήκες για τη χρήση μας. Για λειτουργικό UI, χρειάζεται Gtk και για Gstreamer χρειάζεται Gst. Αυτά εισάγονται στην αρχή για να τα έχουμε για χρήση παντού. Επίσης στην αρχή εισάγουμε έναν κύριο βρόχο κατασκευής για χειρισμό του χρόνου λήξης στη χρήση του με ήχους μελωδίας.

note: (itstool) path: section/title
en: Creating the main window for the application
el: Δημιουργία του κύριου παραθύρου για την εφαρμογή

note: (itstool) path: section/p
en: Importing Gtk and Gst is not enough, we need to initialize them in order to get them working. When Gtk and Gst are up and running we need to create the window for the application. Later we are going to put all the buttons for making sounds inside this window. In order to get the window showing, we need to tell it to show and we need also to run the code with the Gtk.main()
el: Η εισαγωγή των Gtk και Gst δεν είναι αρκετή, χρειάζεται η αρχικοποίησή τους για να δουλέψουν. Όταν τα Gtk και Gst εκτελούνται χρειάζεται να δημιουργήσουμε το παράθυρο για την εφαρμογή. Αργότερα πρόκειται να βάλουμε όλα τα κουμπιά να παράγουν ήχους μέσα σε αυτό το παράθυρο. Για την εμφάνιση του παραθύρου, χρειαζόμαστε να του πούμε να εμφανιστεί και χρειαζόμαστε επίσης να τρέξει ο κώδικας με το Gtk.main()

note: (itstool) path: section/title
en: Buttons for the tunes
el: Κουμπιά για τις μελωδίες

note: (itstool) path: section/p
en: Because Gtk.Window can only contain a single widget, we need to create something under it to be able to add all the necessary buttons inside it. In this example we use Buttonbox. After creating the Buttonbox we create buttons with necessary labels. After we have the buttons we need to add them to the Buttonbox and the Buttonbox must be added to the Gtk.Window and everything in the Buttonbox must be shown.
el: Επειδή το Gtk.Window μπορεί να περιέχει μόνο ένα γραφικό στοιχείο, χρειάζεται να δημιουργηθεί κάτι από κάτω του για να μπορεί να προσθέσει όλα τα απαραίτητα κουμπιά μέσα του. Σε αυτό το παράδειγμα χρησιμοποιούμε πλαίσιο κουμπιού. Μετά τη δημιουργία του πλαισίου κουμπιού δημιουργούμε κουμπιά με αναγκαίες ετικέτες. Αφού έχουμε τα κουμπιά πρέπει να τα προσθέσουμε στο πλαίσιο κουμπιού και το πλαίσιο κουμπιού πρέπει να προστεθεί στο Gtk.Window και όλα στο πλαίσιο κουμπιού πρέπει να εμφανίζονται.

note: (itstool) path: section/p
en: After this stage you should have a window appearing to your screen showing 6 buttons. Right now the buttons don't do anything and we shall address that issue later. Before we can connect the button signals to something we need to code that something first.
el: Μετά από αυτό το στάδιο πρέπει να έχετε ένα εμφανιζόμενο παράθυρο στην οθόνη σας που να δείχνει 6 κουμπιά. Τώρα τα κουμπιά δεν κάνουν τίποτα και θα αντιμετωπίσουμε αυτό το θέμα αργότερα. Πριν να μπορέσουμε να συνδέσουμε τα σήματα του κουμπιού με κάτι χρειάζεται να κωδικοποιήσουμε αυτό το κάτι πρώτα.

note: (itstool) path: section/title
en: Making the sounds with GStreamer
el: Κάνοντας τους ήχους με GStreamer

note: (itstool) path: section/p
en: The first thing we need to do is decide what tunes we want to make when we push a button. The frequencies list takes care of that. After that we get to actually making the sounds with the function playSound. For function playSound we give as an input a frequency (that we just defined in the frequencies variable). First thing we need to construct is a pipeline, a source and a sink. For the source we set the frequency. To the pipeline we add both the source and the sink and then we tell it to keep playing. As a last thing we use the const Mainloop to get the pipeline to stop after a 500ms.
el: Το πρώτο πράγμα που χρειαζόμαστε είναι να αποφασίσουμε τι μελωδίες θέλουμε να κάνουμε όταν πατάμε ένα κουμπί. Η λίστα συχνοτήτων το φροντίζει. Μετά από αυτό φροντίζουμε να κάνει στην πραγματικότητα τους ήχους με τη συνάρτηση playSound. Για τη συνάρτηση playSound δίνουμε ως είσοδο μια συχνότητα (που μόλις ορίσαμε στη μεταβλητή συχνοτήτων). Το πρώτο πράγμα που χρειαζόμαστε να κατασκευάσουμε είναι μια διοχέτευση, μια πηγή και μια έξοδο. Για την πηγή ορίζουμε τη συχνότητα. Στη διοχέτευση προσθέτουμε και την πηγή και την έξοδο και έπειτα της λέμε να συνεχίσει να παίζει. Ως τελευταίο πράγμα χρησιμοποιούμε τη σταθερά κύριου βρόχου για να κάνει τη διοχέτευση να σταματήσει μετά από 500ms.

note: (itstool) path: section/p
en: Now we have the method of playing a tune when clicking a button. Next well make the connections between pushing a button and playing the correct sound from that button.
el: Τώρα έχουμε τη μέθοδο αναπαραγωγής μιας μελωδίας πατώντας ένα κουμπί. Μετά γίνονται οι συνδέσεις μεταξύ πατήματος ενός κουμπιού και αναπαραγωγής του σωστού ήχου από αυτό το κουμπί.

note: (itstool) path: section/title
en: Connecting buttons to playSound
el: Συνδέοντας κουμπιά στο playSound

note: (itstool) path: section/p
en: The method of connecting button clicks to playSound with the correct tune is by using the connect method of the button widget. So we choose a button to be connected and type <code>E.connect("clicked", function(){playSound(frequencies.E);});</code> The <code>connect</code> tells that when pushing E, something should happen. The <code>clicked</code> tells the type of the signal happening to E and then in the <code>function(){};</code> we call playSound with the correct note that should be associated with the button.
el: Η μέθοδος σύνδεσης κουμπιού πατά το playSound με τη σωστή μελωδία γίνεται χρησιμοποιώντας τη μέθοδο σύνδεσης του γραφικού στοιχείου κουμπιού. Έτσι επιλέγουμε ένα κουμπί να συνδεθεί και πληκτρολογούμε <code>E.connect("clicked", function(){playSound(frequencies.E);});</code> Το <code>connect</code> λέει ότι όταν πατάμε Ε, κάτι θα συμβεί. Το <code>clicked</code> λέει τον τύπο του σήματος που κάτι συμβαίνει στο Ε και έπειτα στη <code>function(){};</code> καλούμε το playSound με τη σωστή μελωδία που μπορεί να συσχετιστεί με το κουμπί.

note: (itstool) path: section/title
en: The whole program
el: Όλο το πρόγραμμα

note: (itstool) path: section/p
en: So this is what all the parts combined looks like. When running this code, you should be able to tune your guitar (if you have correctly calibrated speakers).
el: Έτσι αυτό είναι πώς δείχνουν όλα τα ενωμένα τμήματα. Όταν τρέχει αυτός ο κώδικας, θα μπορούσατε να συντονίσετε την κιθάρα σας (εάν έχετε σωστά βαθμονομημένα ηχεία).

note: (itstool) path: section/title
en: Running the application form Terminal
el: Εκτέλεση της εφαρμογής από τερματικό

note: (itstool) path: section/p
en: To run this application open Terminal, go to the folder where your application is stored and then run
el: Για να τρέξετε αυτήν την εφαρμογή ανοίξτε τον τερματικό, πηγαίνετε στον φάκελο όπου είναι αποθηκευμένη η εφαρμογή σας και μετά τρέξτε την

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.js">reference code</link>.
el: Αν αντιμετωπίσετε προβλήματα με το μάθημα, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="guitar-tuner/guitar-tuner.js">κώδικα αναφοράς</link>.

[ctx: text]
note: (itstool) path: info/title
en: Guitar tuner (Python)
el: Συντονιστής κιθάρας (Python)

note: (itstool) path: item/p
en: Basic knowledge of the Python programming language
el: Βασική γνώση της γλώσσας προγραμματισμού Python

note: (itstool) path: item/p
en: Choose <gui>PyGTK (automake)</gui> from the <gui>Python</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
el: Επιλέξτε <gui>PyGTK (automake)</gui> από την καρτέλα <gui>Python</gui>, πατήστε <gui>συνέχεια</gui> και συμπληρώστε τις λεπτομέρειές σας στις επόμενες λίγες σελίδες. Χρησιμοποιήστε ως όνομα του έργου και του καταλόγου το <file>guitar-tuner</file>.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/guitar_tuner.py</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
el: Πατήστε <gui>Εφαρμογή</gui> και το έργο θα δημιουργηθεί. Ανοίξτε <file>src/guitar_tuner.py</file> από τις καρτέλες <gui>έργο</gui> ή <gui>αρχείο</gui>. Θα πρέπει να δείτε κάποιο κώδικα που ξεκινάει με τις γραμμές:

note: (itstool) path: section/title
en: Run the code for the first time
el: Εκτέλεση του κώδικα για πρώτη φορά

note: (itstool) path: section/p
en: Most of the code in the file is template code. It loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:
el: Ο περισσότερος κώδικας στο αρχείο είναι πρότυπο κώδικα. Φορτώνει ένα (κενό) παράθυρο από το αρχείο περιγραφής της διεπαφής χρήστη και το εμφανίζει. Περισσότερες πληροφορίες υπάρχουν πιο κάτω· προσπεράστε αυτή τη λίστα αν καταλαβαίνετε τα βασικά:

note: (itstool) path: item/p
en: The <code>import</code> lines at the top include the tell Python to load the user interface and system libraries needed.
el: Οι γραμμές <code>import</code> στην αρχή λένε στην Python να φορτώσει τις βιβλιοθήκες του συστήματος και της διεπαφής χρήστη που χρειάζονται.

note: (itstool) path: item/p
en: A class is declared that will be the main class for our application. In the <code>__init__</code> method the main window is loaded from the GtkBuilder file (<file>src/guitar-tuner.ui</file>) and the signals are connected.
el: Μια κλάση δηλώνεται ότι θα είναι η κύρια κλάση για το πρόγραμμά μας. Στην μέθοδο <code>__init__</code> το κύριο παράθυρο φορτώνεται από το αρχείο GtkBuilder (<file>src/guitar-tuner.ui</file>) και τα σήματα συνδέονται.

note: (itstool) path: item/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>destroy</code> method is called (and quits the app) when you close the window.
el: Συνδέοντας σήματα είστε σε θέση να καθορίζετε τι θα συμβεί όταν ένα κουμπί πατηθεί, ή όταν συμβεί κάποιο άλλο σήμα. Εδώ, καλείται η μέθοδος <code>destroy</code> όταν κλείνετε το παράθυρο (και τερματίζει την εφαρμογή).

note: (itstool) path: item/p
en: The <code>main</code> function is run by default when you start a Python application. It just creates an instance of the main class and starts the main loop to bring up the window.
el: Η συνάρτηση <code>main</code> εκτελείται προκαθορισμένα μόλις τρέξετε ένα πρόγραμμα σε Python. Δημιουργεί ένα στιγμιότυπο της κύριας κλάσης και ξεκινάει τον κύριο βρόχο για να εμφανίσει το παράθυρο.

note: (itstool) path: section/p
en: This code is ready to be used, so you can run it by clicking <guiseq><gui>Run</gui><gui>Execute</gui></guiseq>.
el: Ο κώδικας είναι έτοιμος να χρησιμοποιηθεί, οπότε μπορείτε να τον εκτελέσετε πηγαίνοντας <guiseq><gui>Εκτέλεση</gui><gui>Εκτέλεση</gui></guiseq>.

note: (itstool) path: section/p
en: A description of the user interface (UI) is contained in the GtkBuilder file. To edit the user interface, open <file>src/guitar_tuner.ui</file>. This will switch to the interface designer. The design window is in the center; widgets and widgets' properties are on the right, and the palette of available widgets is on the left.
el: Μια περιγραφή της διεπαφής χρήστη (UI) περιέχεται στο αρχείο GtkBuilder. Για να επεξεργαστείτε τη διεπαφή χρήστη, ανοίξτε το <file>src/guitar_tuner.ui</file>. Θα βρεθείτε στο σχεδιαστή διεπαφής. Το παράθυρο σχεδίασης είναι στο κέντρο· τα γραφικά στοιχεία και οι ιδιότητες τους είναι στα δεξιά και η παλέτα των διαθέσιμων γραφικών στοιχείων στα αριστερά.

note: (itstool) path: section/title
en: Write the signal handler
el: Εγγραφή του χειριστή σημάτων

note: (itstool) path: section/p
en: To do this, open <file>guitar_tuner.py</file> while the user interface file is still open. Switch to the <gui>Signals</gui> tab, which you already used to set the signal name. Now take the row where you set the <gui>clicked</gui> signal and drag it into to the source file inside the class. The following code will be added to your source file:
el: Για να το κάνετε αυτό, ανοίξτε το <file>guitar_tuner.py</file>, έχοντας ανοιχτό και το αρχείο της διεπαφής χρήστη. Πηγαίνετε στην καρτέλα <gui>σήματα</gui> που είχατε χρησιμοποιήσει για να ορίσετε το όνομα του σήματος. Τώρα πάρτε την γραμμή όπου ορίσατε το σήμα <gui>clicked</gui> και σύρετε την στον πηγαίο κώδικα μέσα στην κλάση. Ο ακόλουθος κώδικας θα προστεθεί στον πηγαίο σας αρχείο:

note: (itstool) path: section/p
en: This signal handler has two arguments: the usual Python class pointer, and the <code>Gtk.Button</code> that called the function.
el: Ο χειριστής σημάτων έχει δυο παράμετρους: τον τυπικό δείκτη κλάσης της Python και το <code>Gtk.Button</code> που καλεί την συνάρτηση.

note: (itstool) path: section/p
en: Change the import line in <file>guitar_tuner.py</file>, just at the beginning to :
el: Αλλάξτε τη γραμμή import στο αρχείο <file>guitar_tuner.py</file>, μόνο στην αρχή σε :

note: (itstool) path: section/p
en: The <code>Gst</code> includes the GStreamer library. You also need to initialise GStreamer properly which is done in the <code>main()</code> method with this call added above the <code>app = GUI()</code> line:
el: Το <code>Gst</code> περιέχει τη βιβλιοθήκη GStreamer. Επίσης πρέπει να αρχικοποιήσετε σωστά το GStreamer το οποίο γίνεται στη μέθοδο <code>main()</code> με την προσθήκη αυτής γραμμής πάνω από την γραμμή <code>app = GUI()</code>:

note: (itstool) path: section/p
en: Then, copy the following function into the class in <file>guitar_tuner.py</file> somewhere:
el: Μετά, αντιγράψτε την ακόλουθη συνάρτηση κάπου στην κλάση στο <file>guitar_tuner.py</file>:

note: (itstool) path: item/p
en: The first three lines create source and sink GStreamer elements and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).
el: Οι τρεις πρώτες γραμμές δημιουργούν τα στοιχεία πηγή, έξοδος και διοχέτευση (το οποίο θα χρησιμοποιηθεί σαν υποδοχέας για τα δυο άλλα στοιχεία). Δίνουμε το όνομα "note" στη διοχέτευση· ονομάζουμε την πηγή "source" και το ρυθμίζετε στην πηγή <code>audiotestsrc</code>· και ονομάζουμε την έξοδο "output" και την ρυθμίζετε στην έξοδο <code>autoaudiosink</code> (προεπιλεγμένη κάρτα ήχου).

note: (itstool) path: item/p
en: The call to <code>source.set_property</code> sets the <code>freq</code> property of the source element to <code>frequency</code>, which was passed as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.
el: Το κάλεσμα της <code>source.set_property</code> ορίζει την ιδιότητα <code>freq</code> του στοιχείου πηγή σε <code>frequency</code>, η οποία έχει περαστεί σαν παράμετρος στη συνάρτηση <code>play_sound</code>. Αυτή είναι η συχνότητα της νότας σε Hertz· πολλές χρήσιμες συχνότητες θα οριστούν αργότερα.

note: (itstool) path: item/p
en: The next two lines call <code>pipeline.add</code>, putting the source and sink into the pipeline. The pipeline can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by calling its <code>add</code> method repeatedly.
el: Οι επόμενες δύο γραμμές καλούν το <code>pipeline.add</code>, βάζοντας την πηγή και την έξοδο στη διοχέτευση. Η διοχέτευση μπορεί να περιέχει διάφορα στοιχεία του GStreamer. Γενικά, μπορείτε να προσθέσετε όσα στοιχεία θέλετε στη διοχέτευση καλώντας συνεχόμενα τη μέθοδο <code>add</code>.

note: (itstool) path: item/p
en: Next <code>pipeline.set_state</code> is used to start playback, by setting the state of the pipeline to playing (<code>Gst.State.PLAYING</code>).
el: Μετά η <code>pipeline.set_state</code> χρησιμοποιείται για να ξεκινήσει η αναπαραγωγή, αλλάζοντας την κατάσταση της διοχέτευσης σε αναπαραγωγή (<code>Gst.State.PLAYING</code>).

note: (itstool) path: section/p
en: We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to call <code>GObject.timeout_add</code>. This sets a timeout for stopping the sound; it waits for <code>LENGTH</code> milliseconds before calling the function <code>pipeline_stop</code>, and will keep calling it until <code>pipeline_stop</code> returns <code>False</code>.
el: Δεν θέλουμε να παίζουμε έναν ενοχλητικό ήχο για πάντα, οπότε το τελευταίο πράγμα που κάνει η <code>play_sound</code> είναι να καλεί το <code>GObject.timeout_add</code>. Αυτό ορίζει ένα χρονικό περιθώριο που θα σταματήσει τον ήχο· περιμένει για <code>LENGTH</code> χιλιοστά του δευτερολέπτου πριν καλέσει τη συνάρτηση <code>pipeline_stop</code>, και θα συνεχίσει να την καλεί μέχρι η <code>pipeline_stop</code> να επιστρέψει <code>False</code>.

note: (itstool) path: section/p
en: Now, we'll write the <code>pipeline_stop</code> function which is called by <code>GObject.timeout_add</code>. Insert the following code <em>above</em> the <code>play_sound</code> function:
el: Τώρα θα γράψουμε τη συνάρτηση <code>pipeline_stop</code>, η οποία καλείται από το <code>GObject.timeout_add</code>. Προσθέστε τον ακόλουθο κώδικα <em>πάνω</em> από τη συνάρτηση <code>play_sound</code>:

note: (itstool) path: section/p
en: You need to define the <code>LENGTH</code> constant inside the class, so add this code at the beginning of the main class:
el: Πρέπει να ορίσετε τη σταθερά <code>LENGTH</code> μέσα στην κλάση, οπότε προσθέστε αυτόν τον κώδικα στην αρχή της κύριας κλάσης:

note: (itstool) path: section/p
en: The call to <code>pipeline.set_state</code> stops the playback of the pipeline.
el: Η κλήση στη <code>pipeline.set_state</code> σταματά την αναπαραγωγή της διοχέτευσης.

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. First of all, we need to know the frequencies for the six guitar strings, which are defined (at the beginning of the main class) inside a dictionary so we can easily map them to the names of the strings:
el: Θέλουμε να παίζουμε το σωστό ήχο όταν ο χρήστης πατάει ένα κουμπί. Πρώτα από όλα, χρειαζόμαστε να ξέρουμε τις συχνότητες για τις έξι χορδές της κιθάρας, οι οποίες είναι ορισμένες (στην αρχή της κύριας κλάσης) μέσα σε ένα λεξικό ώστε να μπορούμε εύκολα να τις απεικονίσουμε στα ονόματα των χορδών:

note: (itstool) path: section/p
en: The button that was clicked is passed as an argument (<code>button</code>) to <code>on_button_clicked</code>. We can get the label of that button by using <code>button.get_child</code>, and then get the text from that label using <code>label.get_label</code>.
el: Το κουμπί που πατήθηκε περνάει σαν παράμετρος (<code>button</code>) στο <code>on_button_clicked</code>. Μπορούμε να πάρουμε την ετικέτα του κουμπιού χρησιμοποιώντας το <code>button.get_child</code>, και το κείμενο από την ετικέτα χρησιμοποιώντας το <code>label.get_label</code>.

note: (itstool) path: section/p
en: The label text is then used as a key for the dictionary and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!
el: Το κείμενο της ετικέτας χρησιμοποιείται σαν κλειδί για το λεξικό και καλείται η <code>play_sound</code> με την κατάλληλη συχνότητα από την νότα. Αυτό παίζει τον τόνο· ο συντονιστής κιθάρας είναι έτοιμος!

note: (itstool) path: section/title
en: Run the application
el: Τρέξτε την εφαρμογή

note: (itstool) path: section/p
en: All of the code should now be ready to go. Click <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application. Enjoy!
el: Το πρόγραμμα πρέπει να είναι έτοιμο τώρα. Για να ξεκινήσετε το πρόγραμμα πατήστε <guiseq><gui>Εκτέλεση</gui><gui>Εκτέλεση</gui></guiseq>. Απολαύστε το!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.py">reference code</link>.
el: Αν αντιμετωπίσετε προβλήματα με το μάθημα, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="guitar-tuner/guitar-tuner.py">κώδικα αναφοράς</link>.

note: (itstool) path: info/desc
en: Use <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link> and <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
el: Χρησιμοποιήστε <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link> και <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> για να φτιάξετε ένα απλό πρόγραμμα ρυθμιστή κιθάρας για το GNOME. Αναδεικνύει πώς να χρησιμοποιήσετε το σχεδιαστή διεπαφής.

note: (itstool) path: synopsis/p
en: In this tutorial you will create an application which plays tones that you can use to tune a guitar. You will learn how to:
el: Σε αυτό το μάθημα, θα δημιουργήσουμε μια εφαρμογή που παίζει τόνους και μπορεί να συντονίσει μια κιθάρα. Θα μάθετε πώς να:

note: (itstool) path: item/p
en: Set up a basic project using the <link xref="getting-ready">Anjuta IDE</link>.
el: Εγκαταστήσετε ένα βασικό έργο χρησιμοποιώντας το <link xref="getting-ready">Anjuta IDE</link>.

note: (itstool) path: item/p
en: Create a simple GUI with <app>Anjuta</app>'s UI designer.
el: Δημιουργήσετε ένα απλό GUI με τον σχεδιαστή UI του <app>Anjuta</app>.

note: (itstool) path: item/p
en: Use the <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> library to play sounds.
el: Χρησιμοποιήσετε τη βιβλιοθήκη <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> για να παίξει ήχους.

note: (itstool) path: item/p
en: Basic knowledge of the <link href="https://live.gnome.org/Vala/Tutorial">Vala</link> programming language.
el: Βασική γνώση της γλώσσας προγραμματισμού <link href="https://live.gnome.org/Vala/Tutorial">Vala</link>.

note: (itstool) path: item/p
en: An installed copy of <app>Anjuta</app>.
el: Ένα εγκατεστημένο αντίγραφο του <app>Anjuta</app>.

note: (itstool) path: section/title
en: Create a project in <app>Anjuta</app>
el: Δημιουργήστε ένα έργο με το <app>Anjuta</app>

note: (itstool) path: item/p
en: Start <app>Anjuta</app> and click <gui>Create a new project</gui> or <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.
el: Ξεκινήστε το <app>Anjuta</app> και πατήστε <gui>δημιουργία νέου έργου</gui> ή <guiseq><gui>αρχείο</gui><gui>νέο</gui><gui>έργο</gui></guiseq> για να ανοίξετε τον οδηγό του έργου.

note: (itstool) path: item/p
en: Click on the <gui>Vala</gui> tab and select <gui>GTK+ (Simple)</gui>. Click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
el: Πατήστε στην καρτέλα <gui>Vala</gui> και επιλέξτε <gui>GTK+ (απλό)</gui>. Πατήστε <gui>συνέχεια</gui> και συμπληρώστε τις λεπτομέρειές σας στις επόμενες λίγες σελίδες. Χρησιμοποιήστε ως όνομα του έργου και του καταλόγου το <file>guitar-tuner</file>.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is switched <gui>ON</gui>. On the next page, select <link href="http://valadoc.org/gstreamer-0.10/index.htm"><em>gstreamer-0.10</em></link> from the list to include the GStreamer library in your project. Click <gui>Continue</gui>
el: Βεβαιωθείτε ότι η <gui>ρύθμιση εξωτερικών πακέτων</gui> είναι <gui>ενεργή</gui>. Στην επόμενη σελίδα, επιλέξτε <link href="http://valadoc.org/gstreamer-0.10/index.htm"><em>gstreamer-0.10</em></link> από τη λίστα για συμπερίληψη της βιβλιοθήκης GStreamer στο έργο σας. Κάντε κλικ στη <gui>συνέχεια</gui>

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. From the <gui>Project</gui> or <gui>Files</gui> tab, open <file>src/guitar_tuner.vala</file> by double-clicking on it. You should see some code which starts with the lines:
el: Κλικ στην <gui>εφαρμογή</gui> και το έργο θα δημιουργηθεί για σας. Από τις καρτέλες <gui>έργο</gui> ή <gui>αρχεία</gui>, ανοίξτε το <file>src/guitar_tuner.vala</file> με διπλό κλικ πάνω του. Θα πρέπει να δείτε κάποιο κώδικα που ξεκινάει με τις γραμμές:

note: (itstool) path: section/p
en: The code loads an (empty) window from the user interface description file and displays it. More details are given below; you may choose to skip this list if you understand the basics:
el: Ο κώδικας φορτώνει ένα (κενό) παράθυρο από το αρχείο περιγραφής διεπαφής χρήστη και το εμφανίζει. Περισσότερες λεπτομέρειες δίνονται παρακάτω· μπορεί να επιλέξετε να προσπεράστε αυτή τη λίστα αν καταλαβαίνετε τα βασικά:

note: (itstool) path: item/p
en: The two <code>using</code> lines import namespaces so we don't have to name them explicitly.
el: Οι δύο γραμμές <code>using</code> εισάγουν χώρους ονομάτων έτσι ώστε να μην τους ονομάσουμε ρητά.

note: (itstool) path: item/p
en: The constructor of the <code>Main</code> class creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above), connecting its signals and then displaying it in a window. This GtkBuilder file contains a description of a user interface and all of its elements. You can use Anjuta's editor to design GtkBuilder user interfaces.
el: Ο κατασκευαστής της κλάσης <code>Main</code> δημιουργεί ένα νέο παράθυρο ανοίγοντας ένα αρχείο GtkBuilder (<file>src/guitar-tuner.ui</file>, που ορίζεται λίγες γραμμές παραπάνω), συνδέοντας τα σήματά του και έπειτα εμφανίζοντας τα σε παράθυρο. Αυτό το αρχείο GtkBuilder περιέχει μια περιγραφή μιας διεπαφής χρήστη και όλων των στοιχείων του. Μπορείτε να χρησιμοποιήσετε τον επεξεργαστή του Anjuta για σχεδίαση διεπαφών χρήστη GtkBuilder.

note: (itstool) path: note/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>on_destroy</code> function is called (and quits the app) when you close the window.
el: Η σύνδεση σημάτων είναι πώς ορίζετε τι συμβαίνει όταν πατάτε ένα κουμπί, ή όταν συμβεί κάποιο άλλο συμβάν. Εδώ, καλείται η συνάρτηση <code>on_destroy</code> (και τερματίζει την εφαρμογή) όταν κλείνετε το παράθυρο.

note: (itstool) path: item/p
en: The static <code>main</code> function is run by default when you start a Vala application. It calls a few functions which create the Main class, set up and then run the application. The <code>Gtk.main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).
el: Η στατική συνάρτηση <code>main</code> τρέχει από προεπιλογή όταν ξεκινάτε μια εφαρμογή Vala. Καλεί λίγες συναρτήσεις που δημιουργούν την κύρια κλάση, ρυθμίζουν και έπειτα εκτελούν την εφαρμογή. Η συνάρτηση <code>Gtk.main</code> ξεκινά τον κύριο βρόχο του GTK, που εκτελεί τη διεπαφή χρήστη και ξεκινά την απάντηση για συμβάντα (όπως κλικ και πατήματα πλήκτρου).

note: (itstool) path: section/p
en: This code is ready to be used, so you can compile it by clicking <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> (or press <keyseq><key>Shift</key><key>F7</key></keyseq>). When you do this, a dialog will appear. Change the <gui>Configuration</gui> to <gui>Default</gui> and then click <gui>Execute</gui> to configure the build directory. You only need to do this once, for the first build.
el: Αυτός ο κώδικας είναι έτοιμος να χρησιμοποιηθεί. έτσι μπορείτε να τον μεταγλωττίσετε με κλικ <guiseq><gui>κατασκευή</gui><gui>κατασκευή έργου</gui></guiseq> (ή πατώντας <keyseq><key>Shift</key><key>F7</key></keyseq>). Όταν το κάνετε αυτό, θα εμφανιστεί ένας διάλογος. Αλλάξτε τη <gui>ρύθμιση</gui> σε <gui>προεπιλογή</gui> και έπειτα κλικ <gui>εκτέλεση</gui> για ρύθμιση του καταλόγου κατασκευής. Χρειάζεστε να το κάνετε αυτό μόνο μια φορά, για την πρώτη κατασκευή.

note: (itstool) path: section/p
en: A description of the user interface (UI) is contained in the GtkBuilder file <file>src/guitar_tuner.ui</file> defined at the top of the class. To edit the user interface, open <file>src/guitar_tuner.ui</file> by double-clicking on it in the <gui>Project</gui> or <gui>Files</gui> section. This will switch to the interface designer. The design window is in the center; <gui>Widgets</gui> and the widget properties are on the right, and the <gui>Palette</gui> of available widgets is on the left.
el: Μια περιγραφή της διεπαφής χρήστη (UI) περιέχεται στο αρχείο του GtkBuilder <file>src/guitar_tuner.ui</file> που ορίστηκε στην κορυφή της κλάσης. Για να επεξεργαστείτε τη διεπαφή χρήστη, ανοίξτε το <file>src/guitar_tuner.ui</file> με διπλό κλικ πάνω του στην ενότητα <gui>έργο</gui> ή <gui>αρχεία</gui>. Θα βρεθείτε στο σχεδιαστή διεπαφής. Το παράθυρο σχεδίασης είναι στο κέντρο· τα <gui>γραφικά στοιχεία</gui> και οι ιδιότητες γραφικού στοιχείου είναι στα δεξιά και η <gui>παλέτα</gui> με τα διαθέσιμα γραφικά στοιχεία είναι στα αριστερά.

note: (itstool) path: section/p
en: The layout of every UI in GTK+ is organized using boxes and tables. Let's use a vertical GtkButtonBox here to assign six GtkButtons, one for each of the six guitar strings.
el: Η διάταξη κάθε διεπαφής χρήστη στο Gtk+ οργανώνεται σε πλαίσια και πίνακες. Ας χρησιμοποιήσουμε εδώ ένα κάθετο GtkButtonBox για να αποδώσουμε έξι GtkButtons, ένα για κάθε μία από τις έξι χορδές της κιθάρας.

note: (itstool) path: item/p
en: In the <gui>Palette</gui> tab, from the <gui>Containers</gui> section, select a <gui>Button Box</gui> (GtkButtonBox) by clicking on the icon. Then click on the design window in the center to place it into the window. A dialog will display where you can set the <gui>Number of items</gui> to <input>6</input>. Then click <gui>Create</gui>.
el: Στην καρτέλα <gui>παλέτα</gui>, από την ενότητα <gui>περιέκτες</gui>, επιλέξτε ένα <gui>πλαίσιο κουμπιού</gui> (GtkButtonBox) με κλικ στο εικονίδιο. Έπειτα κλικ στο παράθυρο σχεδίασης στο κέντρο για τοποθέτηση του στο παράθυρο. Ένας διάλογος θα εμφανίσει που μπορείτε να ορίσετε τον <gui>αριθμό των στοιχείων</gui> σε <input>6</input>. Έπειτα κλικ στο <gui>δημιουργία</gui>.

note: (itstool) path: note/p
en: You can also change the <gui>Number of elements</gui> and the <gui>Orientation</gui> in the <gui>General</gui> tab on the right.
el: Μπορείτε επίσης να αλλάξετε τον <gui>αριθμό των στοιχείων</gui> και τον <gui>προσανατολισμό</gui> στην καρτέλα <gui>γενικά</gui> στα δεξιά.

note: (itstool) path: item/p
en: Now, from the <gui>Control and Display</gui> section of the <gui>Palette</gui> choose a <gui>Button</gui> (GtkButton) by clicking on it. Place it into the first section of the GtkButtonBox by clicking in the first section.
el: Τώρα, από την ενότητα <gui>έλεγχος και εμφάνιση</gui> της <gui>παλέτας</gui> επιλέξτε ένα <gui>κουμπί</gui> (GtkButton) με κλικ πάνω του. Τοποθετήστε το στην πρώτη ενότητα του GtkButtonBox με κλικ στην πρώτη ενότητα.

note: (itstool) path: item/p
en: While the button is still selected, scroll down in the <gui>General</gui> tab on the right to the <gui>Label</gui> property, and change it to <gui>E</gui>. This will be the low E guitar string.
el: Έχοντας το κουμπί ακόμα επιλεγμένο, κυλήστε κάτω στην καρτέλα <gui>γενικά</gui> στα δεξιά της ιδιότητας <gui>ετικέτα</gui> και αλλάξτε την σε <gui>E</gui>. Αυτή θα είναι η χαμηλή χορδή της κιθάρας Ε.

note: (itstool) path: note/p
en: The <gui>General</gui> tab is located in the <gui>Widgets</gui> section on the right.
el: Η καρτέλα <gui>γενικά</gui> εντοπίζεται στην ενότητα <gui>γραφικά στοιχεία</gui> στα δεξιά.

note: (itstool) path: item/p
en: Click on the <gui>Signals</gui> tab in the <gui>Widgets</gui> section on the right, and look for the <code>clicked</code> signal of the button. You can use this to connect a signal handler that will be called when the button is clicked by the user. To do this, click on the signal and type <code>main_on_button_clicked</code> in the <gui>Handler</gui> column and press the <key>Enter</key>.
el: Πηγαίνετε στην καρτέλα <gui>σήματα</gui> στην ενότητα <gui>γραφικά στοιχεία</gui> στα δεξιά και βρείτε το σήμα <code>clicked</code> του κουμπιού. Μπορείτε να το χρησιμοποιήσετε για να συνδέσετε έναν χειριστή σημάτων που θα καλείται όταν πατηθεί το κουμπί από τον χρήστη. Για να το κάνετε αυτό, κλικ στο σήμα και πληκτρολογήστε <code>main_on_button_clicked</code> στη στήλη <gui>χειριστής</gui> και πατήστε <key>Enter</key>.

note: (itstool) path: section/p
en: This section will show you how to create the code to produce sounds. <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones.
el: Αυτή η ενότητα θα δείξει πώς να παράξει ο κώδικας ήχους. <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> είναι ο σκελετός πολυμέσων του GNOME - μπορείτε να τον χρησιμοποιήσετε για παίξιμο, εγγραφή και επεξεργασία βίντεο, ήχου, ροών ιστοκάμερας και τα παρόμοια. Εδώ, θα το χρησιμοποιήσουμε για να παράξουμε τόνους μιας συχνότητας.

note: (itstool) path: section/p
en: Conceptually, GStreamer works as follows: You create a <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-bins.html"><em>pipeline</em></link> containing several processing elements going from the <em>source</em> to the <em>sink</em> (output). The source can be an image file, a video, or a music file, for example, and the output could be a widget or the soundcard.
el: Εννοιολογικά, το GStreamer λειτουργεί ως εξής: δημιουργείτε μια<link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-bins.html"> <em>διοχέτευση</em></link> που περιέχει διάφορα στοιχεία επεξεργασίας που πηγαίνουν από την <em>πηγή</em> στο <em>ταμιευτήρα</em> (έξοδο). Η πηγή μπορεί να είναι ένα αρχείο εικόνας, βίντεο, ή μουσικής, για παράδειγμα, και η έξοδος μπορεί να είναι γραφικό στοιχείο ή κάρτα ήχου.

note: (itstool) path: section/p
en: In this example we will use a tone generator source called <code>audiotestsrc</code> and send the output to the default system sound device, <code>autoaudiosink</code>. We only need to configure the frequency of the tone generator; this is accessible through the <code>freq</code> property of <code>audiotestsrc</code>.
el: Σε αυτό το παράδειγμα θα χρησιμοποιήσουμε μια πηγή παραγωγής τόνων που λέγεται <code>audiotestsrc</code> και θα στείλουμε την έξοδο στην προεπιλεγμένη συσκευή ήχου του συστήματος, <code>autoaudiosink</code>. Πρέπει μόνο να ρυθμίσουμε την συχνότητα της παραγωγής τόνου· αυτό είναι διαθέσιμο μέσα από την ιδιότητα <code>freq</code> του <code>audiotestsrc</code>.

note: (itstool) path: section/p
en: We need to add a line to initialize GStreamer; put the following code on the line above the <code>Gtk.init</code> call in the <code>main</code> function:
el: Χρειάζεται να προσθέσουμε μια γραμμή για αρχικοποίηση του GStreamer· βάλτε τον παρακάτω κώδικα στην γραμμή πάνω από την κλήση <code>Gtk.init</code> στη συνάρτηση <code>main</code>:

note: (itstool) path: section/p
en: Then, copy the following function into <file>guitar_tuner.vala</file> inside our <code>Main</code> class:
el: Μετά, αντιγράψτε την ακόλουθη συνάρτηση στο <file>guitar_tuner.vala</file> μέσα στην κλάση μας <code>Main</code>:

note: (itstool) path: item/p
en: The first three lines create source and sink GStreamer elements (<link href="http://valadoc.org/gstreamer-0.10/Gst.Element.html"><code>Gst.Element</code></link>), and a <link href="http://valadoc.org/gstreamer-0.10/Gst.Pipeline.html">pipeline element</link> (which will be used as a container for the other two elements). Those are class variables so they are defined outside the method. The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).
el: Οι τρεις πρώτες γραμμές δημιουργούν τα στοιχεία πηγή και έξοδο του GStreamer (<link href="http://valadoc.org/gstreamer-0.10/Gst.Element.html"><code>Gst.Element</code></link>), και ένα <link href="http://valadoc.org/gstreamer-0.10/Gst.Pipeline.html">στοιχείο διοχέτευσης</link> (το οποίο θα χρησιμοποιηθεί σαν περιέκτης για τα δυο άλλα στοιχεία). Αυτά είναι μεταβλητές κλάσεων, έτσι ορίζονται έξω από τη μέθοδο. Δίνουμε το όνομα "note" στη διοχέτευση· ονομάζουμε την πηγή "source" και ρυθμίζεται στην πηγή <code>audiotestsrc</code>· και ονομάζουμε την έξοδο "output" και ρυθμίζεται στην έξοδο <code>autoaudiosink</code> (προεπιλεγμένη έξοδος κάρτας ήχου).

note: (itstool) path: item/p
en: The call to <link href="http://valadoc.org/gobject-2.0/GLib.Object.set.html"><code>source.set</code></link> sets the <code>freq</code> property of the source element to <code>frequency</code>, which is passed in as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.
el: Η κλήση στο <link href="http://valadoc.org/gobject-2.0/GLib.Object.set.html"><code>source.set</code></link> ορίζει την ιδιότητα <code>freq</code> του στοιχείου πηγής σε <code>frequency</code>, η οποία έχει περαστεί ως όρισμα στη συνάρτηση <code>play_sound</code>. Αυτή είναι η συχνότητα της νότας σε Hertz· πολλές χρήσιμες συχνότητες θα οριστούν αργότερα.

note: (itstool) path: item/p
en: <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.add.html"><code>pipeline.add</code></link> puts the source and sink into the pipeline. The pipeline is a <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.html"><code>Gst.Bin</code></link>, which is just an element that can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by adding more calls to <code>pipeline.add</code>.
el: Το <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.add.html"><code>pipeline.add</code></link> βάζει την πηγή και την έξοδο στη διοχέτευση. Η διοχέτευση είναι ένα <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.html"><code>Gst.Bin</code></link>,που είναι απλά ένα στοιχείο που μπορεί να περιέχει πολλαπλά άλλα στοιχεία GStreamer. Γενικά, μπορείτε να προσθέσετε όσα στοιχεία θέλετε στη διοχέτευση προσθέτοντας περισσότερες κλήσεις στο <code>pipeline.add</code>.

note: (itstool) path: item/p
en: Next, <link href="http://valadoc.org/gstreamer-0.10/Gst.Element.link.html"><code>sink.link</code></link> is used to connect the elements together, so the output of source (a tone) goes into the input of sink (which is then output to the sound card). <link href="http://www.valadoc.org/gstreamer-0.10/Gst.Element.set_state.html"><code>pipeline.set_state</code></link> is then used to start playback, by setting the <link href="http://www.valadoc.org/gstreamer-0.10/Gst.State.html">state of the pipeline</link> to playing (<code>Gst.State.PLAYING</code>).
el: Κατόπιν, το <link href="http://valadoc.org/gstreamer-0.10/Gst.Element.link.html"><code>sink.link</code></link> χρησιμοποιείται για σύνδεση των στοιχείων μαζί, έτσι ώστε η έξοδος της πηγής (ένας τόνος) να πηγαίνει στην είσοδο της εξόδου (η οποία μετά είναι έξοδος στην κάρτα ήχου). Το <link href="http://www.valadoc.org/gstreamer-0.10/Gst.Element.set_state.html"><code>pipeline.set_state</code></link> χρησιμοποιείται έπειτα για την εκκίνηση της αναπαραγωγής, ρυθμίζοντας την <link href="http://www.valadoc.org/gstreamer-0.10/Gst.State.html">κατάσταση της σωλήνωσης</link> να παίξει (<code>Gst.State.PLAYING</code>).

note: (itstool) path: item/p
en: We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to add a <link href="http://www.valadoc.org/glib-2.0/GLib.TimeoutSource.html"><code>TimeoutSource</code></link>. This sets a timeout for stopping the sound; it waits for 200 milliseconds before calling a signal handler defined inline that stops and destroys the pipeline. It returns <code>false</code> to remove itself from the timeout, otherwise it would continue to be called every 200 ms.
el: Δεν θέλουμε να παίζουμε έναν ενοχλητικό ήχο για πάντα, οπότε το τελευταίο πράγμα που κάνει ο <code>play_sound</code> είναι να προσθέσει έναν <link href="http://www.valadoc.org/glib-2.0/GLib.TimeoutSource.html"><code>TimeoutSource</code></link>. Αυτό ορίζει ένα χρονικό όριο που θα σταματήσει τον ήχο· περιμένει για 200 ms πριν καλέσει τον χειριστή σήματος που ορίστηκε στη γραμμή που σταματά και καταστρέφει τη διοχέτευση. Επιστρέφει <code>false</code> για να αφαιρέσει την ίδια από το χρονικό όριο, αλλιώς θα συνέχιζε να καλείται κάθε 200 ms.

note: (itstool) path: section/p
en: In the UI designer, you made it so that all of the buttons will call the same function, <gui>on_button_clicked</gui>, when they are clicked. Actually we type <gui>main_on_button_clicked</gui> which tells the UI designer that this method is part of our <code>Main</code>. We need to add that function in the source file.
el: Στον σχεδιαστή διεπαφών χρήστη, κάνατε όλα τα κουμπιά να καλούν την ίδια συνάρτηση, <gui>on_button_clicked</gui>, όταν πατηθούν. Στην πραγματικότητα, πληκτρολογούμε <gui>main_on_button_clicked</gui> που λέει στον σχεδιαστή UI ότι αυτή η μέθοδος είναι τμήμα του <code>Main</code> μας. Πρέπει να προσθέσουμε αυτή την συνάρτηση στο πηγαίο αρχείο.

note: (itstool) path: section/p
en: To do this, in the user interface file (guitar_tuner.ui) select one of the buttons by clicking on it, then open <file>guitar_tuner.vala</file> (by clicking on the tab in the center). Switch to the <gui>Signals</gui> tab on the right, which you used to set the signal name. Now take the row where you set the <gui>clicked</gui> signal and drag and drop it into to the source file at the beginning of the class. The following code will be added to your source file:
el: Για να το κάνετε αυτό, στο αρχείο διεπαφής χρήστη (guitar_tuner.ui), επιλέξτε ένα από τα κουμπιά με κλικ πάνω του, έπειτα ανοίξτε <file>guitar_tuner.vala</file> (με κλικ στην καρτέλα στο κέντρο). Εναλλαγή στην καρτέλα <gui>σήματα</gui> στα δεξιά, που χρησιμοποιήσατε για τον ορισμό του ονόματος αρχείου. Τώρα, πάρτε τη γραμμή όπου ορίσατε το σήμα <gui>πατημένο</gui> και σύρσιμο και απόθεσή του στο πηγαίο αρχείο στην αρχή της κλάσης. Ο παρακάτω κώδικας θα προστεθεί στο πηγαίο σας αρχείο:

note: (itstool) path: note/p
en: You can also just type the code at the beginning of the class instead of using the drag and drop.
el: Μπορείτε επίσης να πληκτρολογήσετε απλά των κώδικα στην αρχή της κλάσης αντί της χρήσης συρσίματος και απόθεσης.

note: (itstool) path: section/p
en: This signal handler has only one argument: the <link href="http://valadoc.org/gtk+-3.0/Gtk.Widget.html"><code>Gtk.Widget</code></link> that called the function (in our case, always a <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html"><code>Gtk.Button</code></link>).
el: Αυτός ο χειριστής σήματος έχει μόνο ένα όρισμα: το <link href="http://valadoc.org/gtk+-3.0/Gtk.Widget.html"><code>Gtk.Widget</code></link> που κάλεσε η συνάρτηση (στην περίπτωσή μας, πάντοτε ένα <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html"><code>Gtk.Button</code></link>).

note: (itstool) path: section/title
en: Define the signal handler
el: Ορισμός του χειριστή σημάτων

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. For this, we flesh out the signal handler which we defined above, <code>on_button_clicked</code>. We could have connected every button to a different signal handler, but that would lead to a lot of code duplication. Instead, we can use the label of the button to figure out which button was clicked:
el: Θέλουμε να παίξουμε τον σωστό ήχο όταν ο χρήστης πατά ένα κουμπί. Για αυτό, ζωντανεύουμε τον χειριστή σήματος που ορίσαμε παραπάνω, <code>on_button_clicked</code>. Θα μπορούσαμε να έχουμε συνδέσει κάθε κουμπί σε διαφορετικό χειριστή σήματος, αλλά αυτό θα μπορούσε να οδηγήσει σε εκτεταμένο διπλασιασμό του κώδικα. Αντίθετα, μπορούμε να χρησιμοποιήσουμε την ετικέτα του κουμπιού για να καταλάβουμε ποιο κουμπί πατήθηκε:

note: (itstool) path: section/p
en: The <code>Gtk.Button</code> that was clicked is passed as an argument (<code>sender</code>) to <code>on_button_clicked</code>. We can get the label of that button by using <code>get_child</code>, and then get the text from that label using <code>get_label</code>.
el: Το <code>Gtk.Button</code> που πατήθηκε περνά ως όρισμα (<code>sender</code>) στο <code>on_button_clicked</code>. Μπορούμε να πάρουμε την ετικέτα αυτού του κουμπιού χρησιμοποιώντας τον <code>get_child</code> και έπειτα να πάρουμε το κείμενο από αυτήν την ετικέτα χρησιμοποιώντας <code>get_label</code>.

note: (itstool) path: section/p
en: The switch statement compares the label text to the notes that we can play, and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!
el: Η πρόταση διακόπτη συγκρίνει το κείμενο ετικέτας με τις νότες που μπορούμε να παίξουμε και καλείται ο <code>play_sound</code> με την κατάλληλη συχνότητα για αυτήν την νότα. Αυτό παίζει τον τόνο· ο ρυθμιστής κιθάρας είναι έτοιμος!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.vala">reference code</link>.
el: Αν αντιμετωπίσετε προβλήματα με το μάθημα, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="guitar-tuner/guitar-tuner.vala">κώδικα αναφοράς</link>.

note: (itstool) path: section/title
en: Further reading
el: Περαιτέρω ανάγνωση

note: (itstool) path: section/p
en: To find out more about the Vala programming language you might want to check out the <link href="http://live.gnome.org/Vala/Tutorial">Vala Tutorial</link> and the <link href="http://valadoc.org/">Vala API Documentation</link>
el: Για να βρείτε περισσότερα για τη γλώσσα προγραμματισμού Vala ίσως θελήσετε να κοιτάξετε το <link href="http://live.gnome.org/Vala/Tutorial">μάθημα Vala</link> και το <link href="http://valadoc.org/">τεκμηρίωση API Vala</link>

note: (itstool) path: info/desc
en: Your first GNOME application!
el: Η πρώτη σας εφαρμογή σε GNOME!

note: (itstool) path: synopsis/p
en: This tutorial will show you how to write your first GNOME application in JavaScript. You will use JavaScript to write for GNOME the same way you would for the web. Afterwards, you will learn how to use "native" widgets, to write applications that look and feel like other GNOME apps.
el: Αυτό το μάθημα θα σας δείξει πώς να γράψετε την πρώτη σας εφαρμογή GNOME σε JavaScript. Θα χρησιμοποιήσετε JavaScript για να γράψετε για GNOME με τον ίδιο τρόπο που θα έπρεπε για τον ιστό. Κατόπιν, θα μάθετε πώς να χρησιμοποιήσετε "native" γραφικά στοιχεία, για να γράψετε εφαρμογές που δείχνουν και αισθάνονται σαν άλλες εφαρμογές GNOME.

note: (itstool) path: note/p
en: Have you gotten GNOME installed on your computer, and <link xref="set-up-gedit.js">gedit</link> set up to write code with? You'll want to do these things first.
el: Έχετε πάρει τον υπολογιστή σας με εγκατεστημένο το GNOME και <link xref="set-up-gedit.js">gedit</link> ρυθμισμένο να γράφει κώδικα με ?. Θα θέλετε να κάνετε αυτά τα πράγματα πρώτα.

note: (itstool) path: section/title
en: Let's start with a web page
el: Ας αρχίσουμε με μια ιστοσελίδα

note: (itstool) path: section/p
en: Here's some basic HTML, CSS, and JavaScript code. Does this look familiar?
el: Ιδού κάποιος βασικός κώδικας HTML, CSS και JavaScript. Σας φαίνεται αυτός οικείος;

note: (itstool) path: section/p
en: Let's save this as <file>hellognome.html</file>, and see what it looks like when we run it!
el: Ας το αποθηκεύσουμε ως <file>hellognome.html</file> και να δούμε πώς φαίνεται όταν τον εκτελούμε!

note: (itstool) path: section/p
en: You <em>can</em> run the above code by opening <file>hellognome.html</file> in a web browser. But here, we're going to create a GNOME application that runs our web app inside of it, just like you see in the screenshot. You'll be able to resize and maximize the window, and click the X in the corner to close it, just like you'd expect from any other GNOME app. The difference is that this one will run our web code inside of it.
el: <em>Μπορείτε</em> να εκτελέσετε τον παραπάνω κώδικα ανοίγοντας το <file>hellognome.html</file> σε έναν περιηγητή ιστού. Αλλά εδώ, πρόκειται να δημιουργήσουμε μια εφαρμογή GNOME που τρέχει την εφαρμογή ιστού μας μέσα του, ακριβώς όπως βλέπετε στο στιγμιότυπο. Θα μπορέσετε να αυξομειώσετε και να μεγιστοποιήσετε το παράθυρο και πατώντας το Χ στη γωνία να το κλείσετε, ακριβώς όπως θα περιμένατε από κάθε άλλη εφαρμογή GNOME. Η διαφορά είναι ότι αυτό θα εκτελέσει τον κώδικα του ιστού μέσα του.

note: (itstool) path: section/p
en: The best part? We're going to continue to use JavaScript, to write all the parts that make our app work with GNOME. Let's look at the code, and see how it's done!
el: Το άριστο μέρος; Πρόκειται να συνεχίσουμε να χρησιμοποιούμε JavaScript, να γράψουμε όλα τα μέρη που κάνουν την εφαρμογή μας να δουλεύει με GNOME. Ας κοιτάξουμε τον κώδικα και ας δούμε πώς τελειώνει!

note: (itstool) path: section/title
en: Creating a GNOME window to frame our web app
el: Δημιουργία ενός παραθύρου GNOME ως πλαισίου για την εφαρμογή μας

note: (itstool) path: section/p
en: First, we need to tell GNOME that this is a JavaScript application, which uses gjs. Gjs is GNOME's way of turning your JavaScript code into instructions it understands, so this line always has to go at the start of your applications.
el: Πρώτα, χρειαζόμαστε να πούμε στο GNOME ότι αυτή είναι μια εφαρμογή JavaScript, που χρησιμοποιεί gjs. Gjs είναι ένας τρόπος του GNOME να μετατρέπει τον κώδικα σας JavaScript σε οδηγίες που καταλαβαίνει, έτσι αυτή η γραμμή πρέπει πάντα να πηγαίνει στην αρχή των εφαρμογών σας.

note: (itstool) path: section/p
en: After that, we need to tell GNOME which libraries we want to import.
el: Μετά από αυτό, χρειαζόμαστε να πούμε στο GNOME ποιες βιβλιοθήκες θέλουμε να εισάγουμε.

note: (itstool) path: section/p
en: Just like how add-on libraries like jQuery let us do extra things with JavaScript, each of these libraries gives us new capabilities for our GNOME apps:
el: Πώς πρόσθετες βιβλιοθήκες όπως η jQuery μας επιτρέπουν να κάνουμε πρόσθετα πράγματα με την JavaScript, καθεμιά από αυτές τις βιβλιοθήκες μας δίνει νέες δυνατότητες για τις εφαρμογές μας στο GNOME:

note: (itstool) path: item/p
en: <file>Gtk</file> and <file>Lang</file> are basic parts of any GNOME application, which let you create windows and widgets and tie them together.
el: <file>Gtk</file> και <file>Lang</file> είναι βασικά μέρη κάθε εφαρμογής GNOME, που σας επιτρέπει να δημιουργήσετε παράθυρα και γραφικά στοιχεία και να τα συνδέσετε μαζί.

note: (itstool) path: item/p
en: <file>GLib</file> is a helper library, which lets us do things like tell GNOME where the <file>hellognome.html</file> file we created is.
el: Η <file>GLib</file> είναι μια βοηθητική βιβλιοθήκη, που επιτρέπει να κάνετε πράγματα όπως να πείτε στο GNOME πού είναι το αρχείο <file>hellognome.html</file>που δημιουργήσαμε.

note: (itstool) path: item/p
en: And <file>Webkit</file> is a web rendering engine, which we'll use to basically create a browser window to open our HTML file with.
el: Και το <file>Webkit</file> είναι μια μηχανή απόδοσης ιστού, που θα χρησιμοποιήσουμε για να δημιουργήσουμε βασικά ένα παράθυρο περιηγητή για να ανοίξουμε το αρχείο μας HTML.

note: (itstool) path: section/p
en: Now we create the application itself:
el: Τώρα δημιουργούμε την ίδια την εφαρμογή:

note: (itstool) path: section/p
en: This will look familiar to you if you've worked with object-oriented JavaScript before. That's right; our whole application is a class called HelloGNOME. And as you can see, we've given it a property that says what its name is.
el: Αυτό θα δείχνει οικείο σε σας εάν έχετε δουλέψει με αντικειμενοστραφή JavaScript πριν. Αυτό είναι σωστό· όλη μας η εφαρμογή είναι μια κλάση που λέγεται HelloGNOME. Και όπως μπορείτε να δείτε, της δώσαμε μια ιδιότητα που λέει ποιο είναι το όνομά της.

note: (itstool) path: section/code
en: 
        // Create the application itself
        _init: function () {
            this.application = new Gtk.Application ();
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function () {
            this._window.present ();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function () {
            this._buildUI ();
        },
el: 
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function () {
            this.application = new Gtk.Application ();
    
            // Σύνδεση των σημάτων '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 ();
        },

note: (itstool) path: section/p
en: Here's some code you will more or less copy-and-paste for every JavaScript application you build. It creates a new Application, and then binds its activate and startup signals to functions that make the window show itself and build its user interface, respectively.
el: Ιδού μερικός κώδικας που περισσότερο ή λιγότερο θα αντιγράψετε και θα επικολλήσετε για κάθε εφαρμογή JavaScript που κατασκευάζετε. Δημιουργεί μια νέα εφαρμογή και έπειτα συνδέει τα ενεργοποιημένα και αρχικά σήματα της με συναρτήσεις που κάνουν το παράθυρο να εμφανίζεται το ίδιο και να κατασκευάζει τη διεπαφή χρήστη της αντίστοιχα.

note: (itstool) path: section/p
en: What does that mean? Well, everything in a GNOME application sends out a signal when something important happens. A button might send out the clicked signal when you click on it, for instance. Our job is to connect the signals to functions which handle them, and make the things that we want to have happen occur. We do this using each object's connect method, which takes two arguments: The signal we want to handle, and the Lang.bind function, which we have to use to tell connect which function we want to have handle the signal.
el: Τι σημαίνει αυτό; Λοιπόν, το καθετί σε μια εφαρμογή GNOME στέλνει ένα σήμα όταν κάτι σημαντικό συμβαίνει. Ένα κουμπί μπορεί να στέλνει το πατημένο σήμα όταν το πατάτε, για παράδειγμα. Η δουλειά μας είναι να συνδέσουμε τα σήματα με τις συναρτήσεις που τις χειρίζονται και να κάνουμε τα πράγματα που θέλουμε να έχουν συμβεί να γίνουν. Το κάνουμε χρησιμοποιώντας τη μέθοδο σύνδεσης κάθε αντικειμένου, που παίρνει δύο ορίσματα: Το σήμα που θέλουμε να χειριστούμε και τη συνάρτηση Lang.bind, που πρέπει να χρησιμοποιήσουμε για να πούμε στη σύνδεση ποια συνάρτηση θέλουμε να χειριστεί το σήμα.

note: (itstool) path: section/p
en: In this case, we want _onActivate to handle the activate signal, and _onStartup to handle the startup signal. _onActivate just tells the window to present itself; so basically, whenever you <keyseq><key>Alt</key> <key>Tab</key></keyseq> to the application it appears, like you would expect it to. _onStartup calls _buildUI, which is the function that creates our user interface and is the next part that we will look at.
el: Σε αυτήν την περίπτωση, θέλουμε την _onActivate να χειριστεί το ενεργοποιημένο σήμα και το _onStartup να χειριστεί το αρχικό σήμα. Η _onActivate απλά λέει στο παράθυρο να παρουσιάσει τον εαυτόν του· έτσι βασικά, όποτε πατάτε <keyseq><key>Alt</key> <key>Tab</key></keyseq> στην εφαρμογή φαίνεται, όπως θα το περιμένατε. Η _onStartup καλεί _buildUI, που είναι η συνάρτηση που δημιουργεί τη διεπαφή χρήστη μας και είναι το επόμενο μέρος που θα κοιτάξουμε.

note: (itstool) path: note/p
en: When you copy and paste the above code for your own applications, be sure to change the name to a unique one each time.
el: Όταν αντιγράφετε και επικολλάτε τον παραπάνω κώδικα για τις δικές σας εφαρμογές, βεβαιωθείτε να αλλάξετε το όνομα σε ένα μοναδικό κάθε φορά.

note: (itstool) path: section/title
en: Designing our window's UI
el: Σχεδίαση της UI του παραθύρου μας

note: (itstool) path: section/p
en: In the _buildUI function, we're going to tell GNOME about our window and the things inside it, one at a time. After that, we're going to connect everything together and put it all on display.
el: Στη συνάρτηση _buildUI, πρόκειται να πούμε στο GNOME για το παράθυρό μας και τα πράγματα μέσα του, ένα τη φορά. Μετά από αυτό, πρόκειται να συνδέσουμε το καθετί μαζί και να το βάλουμε όλο σε προβολή.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function () {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                title: "Welcome to GNOME",
                default_height: 200,
                default_width: 400,
                window_position: Gtk.WindowPosition.CENTER });
el: 
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function () {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                title: "Welcome to GNOME",
                default_height: 200,
                default_width: 400,
                window_position: Gtk.WindowPosition.CENTER });

note: (itstool) path: section/p
en: The first object we create is an ApplicationWindow. It needs a title to go in the title bar, and its application property needs to be the application that we created, above. Beyond that, there are various ways of customizing how it looks, which the <link xref="GtkApplicationWindow.js">ApplicationWindow</link> reference page will go into more detail about. As you can see here, we gave it a default height and width (measured in pixels), and told GNOME we want our window to appear in the center of the screen.
el: Το πρώτο αντικείμενο που δημιουργούμε είναι ένα ApplicationWindow. Χρειάζεται έναν τίτλο να μπει στη γραμμή τίτλου και η ιδιότητα εφαρμογής του χρειάζεται να είναι η εφαρμογή που δημιουργήσαμε, παραπάνω. Πέρα από αυτό, υπάρχουν ποικίλοι τρόποι προσαρμογής της εμφάνισης του, που η σελίδα αναφοράς <link xref="GtkApplicationWindow.js">ApplicationWindow</link> θα μπει σε περισσότερες λεπτομέρειες. Όπως μπορείτε να δείτε εδώ, του δίνουμε ένα προεπιλεγμένο ύψος και πλάτος (μετρημένο σε εικονοστοιχεία) και λέμε στο GNOME ότι θέλουμε το παράθυρο μας να εμφανιστεί στο κέντρο της οθόνης.

note: (itstool) path: section/code
en: 
            // Create a webview to show the web app
            this._webView = new Webkit.WebView ();
    
            // Put the web app into the webview
            this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
                "/hellognome.html", null));
el: 
            // Δημιουργία μιας προβολής ιστού για προβολή της εφαρμογής ιστού
            this._webView = new Webkit.WebView ();
    
            // Τοποθέτηση της εφαρμογής ιστού στην προβολή ιστού
            this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
                "/hellognome.html", null));

note: (itstool) path: section/p
en: Remember how we imported Webkit right at the start? Here we're creating a new instance of a Webkit class called a WebView, which is more or less a browser window you can put inside of your app. After that, we then give it the URI that we want it to load when the application starts up.
el: Να θυμάστε πώς εισάγαμε το Webkit δεξιά στην αρχή. Εδώ δημιουργούμε ένα νέο στιγμιότυπο της κλάσης Webkit που λέγεται μια WebView, που είναι περισσότερο ή λιγότερο ένα παράθυρο περιηγητή όπου μπορείτε να βάλετε μέσα την εφαρμογή σας. Μετά από αυτό, του δίνουμε έπειτα την URI που θέλουμε να φορτώσει όταν η εφαρμογή ξεκινά.

note: (itstool) path: section/p
en: We <em>could</em> just give it a web URI, like <link href="http://gnome.org">http://gnome.org</link>. Instead, here we use a couple of GLib helper functions to tell the WebView where our <file>hellognome.html</file> file is. GLib.get_current_dir returns the directory that our app's running in, and GLib.filename_to_uri turns our file's path and filename into a URI that the WebView's load_uri function understands. (filename_to_uri's second parameter should be null unless you know what it's used for and have a reason for changing it.)
el: Θα <em>μπορούσαμε</em> να του δώσουμε μόνο μια URI ιστού, όπως <link href="http://gnome.org">http://gnome.org</link>. Αντίθετα, εδώ χρησιμοποιούμε λίγες βοηθητικές συναρτήσεις του GLib για να πούμε στο WebView που είναι το αρχείο μας <file>hellognome.html</file>. Ο GLib.get_current_dir επιστρέφει τον κατάλογο που εκτελείται η εφαρμογή μας και το GLib.filename_to_uri επιστρέφει τη διαδρομή του αρχείου μας και το όνομα αρχείου σε μια URI που η συνάρτηση load_uri της WebView καταλαβαίνει. (η δεύτερη παράμετρος filename_to_uri's πρέπει να είναι μηδέν εκτός και ξέρετε τι χρησιμοποιείται και έχετε έναν λόγο να το αλλάξετε.)

note: (itstool) path: section/code
en: 
            // Put the webview into the window
            this._window.add (this._webView);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
    
    });
el: 
            // Τοποθέτηση της προβολής ιστού στο παράθυρο
            this._window.add (this._webView);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
    });

note: (itstool) path: section/p
en: Each window can hold one, and only one, widget. Normally, we'd use a container widget like a <link xref="grid.js">Grid</link> to put multiple widgets into, then use the window's add function to add the Grid to it. Here, we just need the WebView, so that's all we add to the window. After that, as the last part of the _buildUI function that creates our window, we tell the window to show itself and its contents.
el: Κάθε παράθυρο μπορεί να κρατήσει ένα και μόνο ένα γραφικό στοιχείο. Κανονικά, θα πρέπει να χρησιμοποιήσουμε έναν περιέκτη γραφικού στοιχείου όπως ένα <link xref="grid.js">πλέγμα</link> για να βάλουμε πολλαπλά γραφικά στοιχεία σε αυτό, έπειτα χρησιμοποιήστε τη συνάρτηση προσθήκης παραθύρου για να προσθέσετε το πλέγμα σε αυτό. Εδώ, προσθέτουμε απλά την WebView, έτσι ώστε να είναι ότι προσθέτουμε στο παράθυρο. Μετά από αυτό, ως το τελευταίο μέρος της συνάρτησης _buildUI που δημιουργεί το παράθυρο μας, λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και τα περιεχόμενά του.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new HelloGNOME ();
    app.application.run (ARGV);
el: 
    // Εκτέλεση της εφαρμογής
    let app = new HelloGNOME ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of our HelloGNOME class, and tell GNOME to run it.
el: Τελικά, δημιουργούμε ένα νέο στιγμιότυπο της κλάσης HelloGNOME και λέμε στο GNOME να εκτελέσει την εφαρμογή.

note: (itstool) path: section/title
en: Running your GNOME application
el: Εκτέλεση της εφαρμογής σας GNOME

note: (itstool) path: section/p
en: Now that we've created our first GNOME application, it's time to test it out! You don't need to compile your app or install any special software for this; GNOME has gjs built in, to let it run GNOME Shell. Just save <file>hellognome.html</file> and our actual application, <file>hellognome.js</file>, to a directory you can get to with the terminal. (They usually open onto your home directory, the one that's called by your username.) After that, open a terminal, go there, and type:
el: Τώρα που έχουμε δημιουργήσει την πρώτη μας εφαρμογή GNOME, είναι καιρός να τη δοκιμάσουμε! Δεν χρειάζεται να μεταγλωττίσετε την εφαρμογή σας ή να εγκαταστήσετε οποιοδήποτε ειδικό λογισμικό για αυτό· το GNOME έχει ενσωματωμένο το gjs για να μπορέσετε να εκτελέσετε το κέλυφος GNOME. Απλά αποθηκεύστε το <file>hellognome.html</file> και την ενεργή μας εφαρμογή, <file>hellognome.js</file>, σε έναν κατάλογο που μπορείτε να πάρετε με το τερματικό. (Συνήθως ανοίγουν στον προσωπικό σας κατάλογο, αυτόν που ονομάζεται με το όνομα σας του χρήστη.) Μετά από αυτό, ανοίξτε ένα τερματικό, πηγαίνετε εκεί και πληκτρολογήστε:

note: (itstool) path: section/p
en: You should see more or less the same screenshot as before, with a button that you can click to make a short message appear.
el: Θα πρέπει να δείτε πάνω κάτω το ίδιο στιγμιότυπο όπως πριν, με ένα κουμπί όπου μπορείτε να πατήσετε για να προκαλέσετε την εμφάνιση ενός σύντομου μηνύματος.

note: (itstool) path: note/p
en: You can use the terminal command
el: Μπορείτε να χρησιμοποιήσετε την εντολή τερματικού

note: (itstool) path: note/p
en: to navigate between directories inside the Terminal, in order to get to where you saved the files. There is also an extension for Nautilus, GNOME's file manager, which lets you right-click anywhere inside it to open a terminal window right there. Check the app you use to install new software (like Add/Remove Programs or the Software Center) for it.
el: για να περιηγηθείτε μεταξύ καταλόγων μες τον τερματικό, για να δείτε πού αποθηκεύσατε τα αρχεία. Υπάρχει επίσης μια επέκταση για τον Ναυτίλο, τον διαχειριστή αρχείων του GNOME, που σας επιτρέπει με δεξί κλικ οπουδήποτε μέσα του να ανοίξετε ένα τερματικό παράθυρο ακριβώς εκεί. Ελέγξτε την εφαρμογή που χρησιμοποιείτε για την εγκατάσταση νέου λογισμικού (όπως προσθήκη/αφαίρεση προγραμμάτων στο κέντρο λογισμικού) για αυτό.

note: (itstool) path: section/p
en: <link xref="02_welcome_to_the_grid.js">Continue on to the next tutorial</link> to learn how to build "native" GNOME applications that look and feel like the others, instead of a webview with HTML code inside. Or take a look at some <link xref="beginner.js#samples">code samples</link>, if you'd like to see example code for each Gtk widget.
el: <link xref="02_welcome_to_the_grid.js">Συνεχίστε με το επόμενο μάθημα</link> για να μάθετε πώς να δομήσετε "native" εφαρμογές GNOME που φαίνονται και αισθάνονται όπως οι άλλες, αντίθετα από μια προβολή ιστού με κώδικα HTML μέσα της. Ή ρίξτε μια ματιά σε κάποια <link xref="beginner.js#samples">δείγματα κώδικα</link>, εάν θα θέλατε να δείτε τον κώδικα του παραδείγματος για κάθε γραφικό στοιχείο Gtk.

note: (itstool) path: section/p
en: Finally, if you want to just build GNOME applications using JavaScript libraries designed for the web, you can basically stop here and go do that! Check out <link xref="beginner.js#tutorials">the later tutorials</link> if you'd like to see how to create a .desktop file for your application, which will let it appear in your desktop's Activities menu with all your other apps.
el: Τελικά, εάν θέλετε να κατασκευάσετε απλά εφαρμογές GNOME χρησιμοποιώντας βιβλιοθήκες JavaScript που σχεδιάστηκαν για τον ιστό, μπορείτε βασικά να σταματήσετε εδώ και να πάτε να το κάνετε! Ελέγξετε <link xref="beginner.js#tutorials">τα τελευταία μαθήματα</link> εάν θα θέλατε να δείτε τη δημιουργία ενός αρχείου .desktop για την εφαρμογή σας, που θα επιτρέψει την εμφάνισή του στο μενού ενεργειών της επιφάνειας εργασίας σας με όλες τις άλλες εφαρμογές σας.

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    const Webkit = imports.gi.WebKit;
    
    const HelloGNOME = new Lang.Class ({
        Name: 'Hello GNOME',
    
        // Create the application itself
        _init: function () {
            this.application = new Gtk.Application ();
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function () {
            this._window.present ();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function () {
            this._buildUI ();
        },
    
        // Build the application's UI
        _buildUI: function () {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                title: "Welcome to GNOME",
                default_height: 200,
                default_width: 400,
                window_position: Gtk.WindowPosition.CENTER });
    
            // Create a webview to show the web app
            this._webView = new Webkit.WebView ();
    
            // Put the web app into the webview
            this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
                "/hellognome.html", null));
    
            // Put the webview into the window
            this._window.add (this._webView);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
    
    });
    
    // Run the application
    let app = new HelloGNOME ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    const Webkit = imports.gi.WebKit;
    
    const HelloGNOME = new Lang.Class ({
        Name: 'Hello GNOME',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function () {
            this.application = new Gtk.Application ();
    
            // Σύνδεση των σημάτων '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 ();
        },
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function () {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                title: "Welcome to GNOME",
                default_height: 200,
                default_width: 400,
                window_position: Gtk.WindowPosition.CENTER });
    
            // Δημιουργία μιας προβολής ιστού για προβολή της εφαρμογής  ιστού
            this._webView = new Webkit.WebView ();
    
            // Το ποθέτηση της εφαρμογής ιστού στην προβολή ιστού
            this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
                "/hellognome.html", null));
    
            // Τοποθέτηση της προβολής ιστού στο παράθυρο
            this._window.add (this._webView);
    
            // Εμφάνιση του παραθύρου κι όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new HelloGNOME ();
    app.application.run (ARGV);

note: (itstool) path: info/desc
en: Creating a small "Hello, World" application using GTK+.
el: Δημιουργώντας μια μικρή εφαρμογή "Hello, World" χρησιμοποιώντας GTK+.

note: (itstool) path: note/p
en: For a detailed walk-through of creating a GTK+ dialog in C, see <link href="https://developer.gnome.org/gtk3/stable/gtk-getting-started.html">Getting Started with GTK+</link>
el: Μια μια λεπτομερή αναφορά στην δημιουργία διαλόγων GTK+ σε C, δείτε το <link href="https://developer.gnome.org/gtk3/stable/gtk-getting-started.html">Getting Started with GTK+</link>

note: (itstool) path: page/p
en: Writing a hello world GTK+ dialog in C can be done as seen in the code sample below:
el: Ένας διάλογος GTK+ με το μήνυμα «Γεια σου κόσμε» μπορεί να δημιουργηθεί σε C με τον παρακάτω κώδικα:

note: (itstool) path: page/p
en: GtkApplication initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal. We can start building our first window. We do this by creating a variable called <var>window</var> and assigning it a gtk_application_window_new. The window title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding. The code above will create a dialog window similar to what can be seen below:
el: Το GtkApplication αρχικοποιεί το GTK+. Συνδέει επίσης του κουμπί <gui>x</gui>, το οποίο δημιουργείται αυτόματα μαζί με το παράθυρο, με το σήμα"destroy". Πλέον μπορούμε να δημιουργήσουμε το πρώτο μας παράθυρο. Αυτό γίνεται δημιουργώντας μια μεταβλητή με όνομα <var>window</var> και την καταχωρούμε στο gtk_application_window_new. Ο τίτλος του παραθύρου μπορεί να είναι οποιοδήποτε κείμενο επιθυμείτε. Για να είστε σίγουροι, καλό είναι να χρησιμοποιήσετε ένα σε κωδικοποίηση UTF-8. Ο παραπάνω κώδικας θα δημιουργήσει ένα παράθυρου διαλόγουμ ίδιο με το παρακάτω:

note: (itstool) path: info/desc
en: A basic "hello, world" application
el: Μια βασική εφαρμογή "hello, world"

note: (itstool) path: page/title
en: How to build, install and create a <file>tar.xz</file> of a Hello World program
el: Πώς να κατασκευάσετε, να εγκαταστήσετε και να δημιουργήσετε ένα <file>tar.xz</file> ενός προγράμματος Hello World

note: (itstool) path: synopsis/p
en: This tutorial will demonstrate how to:
el: Αυτό το μάθημα θα δείξει πώς να:

note: (itstool) path: item/p
en: create a small "Hello, World" application using JavaScript and GTK+
el: δημιουργήσετε μια μικρή εφαρμογή "Hello, World" χρησιμοποιώντας JavaScript και GTK+

note: (itstool) path: item/p
en: make the <file>.desktop</file> file
el: κάνετε το αρχείο <file>.desktop</file>

note: (itstool) path: item/p
en: how to set up the build system
el: ρυθμίσετε το σύστημα δόμησης

note: (itstool) path: section/title
en: Create the program
el: Δημιουργήστε το πρόγραμμα

note: (itstool) path: section/p
en: This needs to be the first line of your script:
el: Αυτό χρειάζεται να είναι η πρώτη γραμμή του σεναρίου σας:

note: (itstool) path: section/p
en: It tells the script to use <link href="https://live.gnome.org/Gjs/">Gjs</link>. Gjs is a JavaScript binding for GNOME.
el: Λέει στο σενάριο να χρησιμοποιήσετε <link href="https://live.gnome.org/Gjs/">Gjs</link>. Gjs είναι ένας σύνδεσμος JavaScript για GNOME.

note: (itstool) path: section/p
en: In order for our script to work with GNOME, we need to import GNOME libraries via GObject Introspection. Here we import the language bindings and GTK+, the library which contains the graphical widgets used to make GNOME applications.
el: Για να δουλέψει το σενάριό μας με GNOME, χρειαζόμαστε να εισάγουμε τις βιβλιοθήκες GNOME μέσα από τον αυτοέλεγχο GObject. Εδώ εισάγουμε τους συνδέσμους γλώσσας και GTK+, την βιβλιοθήκη που περιέχει τα χρησιμοποιούμενα γραφικά στοιχεία για την δόμηση εφαρμογών GNOME.

note: (itstool) path: section/code
en: const Application = new Lang.Class({
        //A Class requires an explicit Name parameter. This is the Class Name.
        Name: 'Application',
    
        //create the application
        _init: function() {
            this.application = new Gtk.Application();
    
           //connect to 'activate' and 'startup' signals to handlers.
           this.application.connect('activate', Lang.bind(this, this._onActivate));
           this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        //create the UI
        _buildUI: function() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       title: "Hello World!" });
        },
    
        //handler for 'activate' signal
        _onActivate: function() {
            //show the window and all child widgets
            this._window.show_all();
        },
    
        //handler for 'startup' signal
        _onStartup: function() {
            this._buildUI();
        }
    });
el: const Application = new Lang.Class({
        //Μια κλάση απαιτεί μια ρητή παράμετρο ονόματος. Αυτή είναι η κλάση ονόματος.
        Name: 'Application',
    
        //Δημιουργία της εφαρμογής
        _init: function() {
            this.application = new Gtk.Application();
    
           //Σ,υνδεση των σημάτων 'activate' και 'startup' με τους χειριστές.
           this.application.connect('activate', Lang.bind(this, this._onActivate));
           this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        //Δημιουργία της διεπαφής χρήστη
        _buildUI: function() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       title: "Hello World!" });
        },
    
        //Ο χεριριστής για το σήμα 'activate'
        _onActivate: function() {
            //Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
        //Ο χειριστής του σήματος 'startup'
        _onStartup: function() {
            this._buildUI();
        }
    });

note: (itstool) path: section/p
en: GtkApplication initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal.
el: Η GtkApplication αρχικοποιεί το GTK+. Επίσης συνδέει το κουμπί <gui>x</gui> που δημιουργείται αυτόματα μαζί με το παράθυρο στο σήμα "destroy".

note: (itstool) path: section/p
en: We can start building our first window. We do this by creating a variable called <var>_window</var> and assigning it a new Gtk.ApplicationWindow.
el: Μπορούμε να αρχίσουμε να κατασκευάζουμε το πρώτο μας παράθυρο. Αυτό το κάνουμε δημιουργώντας μια μεταβλητή που λέγεται <var>_window</var> και της αποδίδουμε ένα νέο Gtk.ApplicationWindow.

note: (itstool) path: section/p
en: We give the window a property called <var>title</var>. The title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding.
el: Δίνουμε στο παράθυρο μια ιδιότητα που λέγεται <var>title</var>. Ο τίτλος μπορεί να είναι οποιαδήποτε επιθυμητή συμβολοσειρά. Για να είσαστε ασφαλείς, είναι καλύτερο να επιλέξετε την κωδικοποίηση UTF-8.

note: (itstool) path: section/p
en: Now we have a window which has a title and a working "close" button. Let's add the actual "Hello World" text.
el: Τώρα έχουμε ένα παράθυρο που έχει τίτλο και ένα λειτουργικό κουμπί "close". Ας προσθέσουμε το ενεργό κείμενο "Hello world".

note: (itstool) path: section/title
en: Label for the window
el: Ετικέτα για το παράθυρο

note: (itstool) path: section/code
en: // Add a label widget to your window
    this.label = new Gtk.Label({ label: "Hello World" });
    this._window.add(this.label);
    this._window.set_default_size(200, 200);
el: // Προσθήκη γραφικού στοιχείου ετικέτας στο παράθυρό σας
    this.label = new Gtk.Label({ label: "Hello World" });
    this._window.add(this.label);
    this._window.set_default_size(200, 200);

note: (itstool) path: section/p
en: A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. To use it, we create a new variable called label, and assign it a new Gtk.Label. Then we give it properties inside the curly braces {}. In this case, we're setting the text that the label will hold. Finally, we create and run the application:
el: Μια ετικέτα κειμένου είναι ένα από τα γραφικά στοιχεία του GTK+ που μπορούμε να χρησιμοποιήσουμε, λόγω της εισαγωγής της βιβλιοθήκης GTK+. Για τη χρήση του, δημιουργούμε μια νέα μεταβλητή που ονομάζουμε ετικέτα και της αποδίδουμε μια νέα Gtk.Label. Έπειτα της δίνουμε ιδιότητες μέσα σε αγκύλες {}. Σε αυτήν την περίπτωση, ορίζουμε το κείμενο που θα κρατήσει η ετικέτα. Τελικά, δημιουργούμε και τρέχουμε την εφαρμογή:

note: (itstool) path: section/code
en: //run the application
    let app = new Application();
    app.application.run(ARGV);
el: //Εκτέλεση της εφαρμογής
    let app = new Application();
    app.application.run(ARGV);

note: (itstool) path: section/p
en: Gtk.ApplicationWindow can only hold one widget at a time. To construct more elaborate programs you need to create a holder widget like Gtk.Grid inside the window, and then add all the other widgets to it.
el: Το Gtk.Window μπορεί να κρατήσει μόνο ένα γραφικό στοιχείο τη φορά. Για κατασκευή πιο περίπλοκων προγραμμάτων χρειαζόσαστε τη δημιουργία ενός χειριστή γραφικού στοιχείου όπως Gtk.Grid μέσα στο παράθυρο και έπειτα να προσθέσετε όλα τα άλλα γραφικά στοιχεία σε αυτό.

note: (itstool) path: section/p
en: The complete file:
el: Το πλήρες αρχείο:

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const Lang = imports.lang;
    const Gtk = imports.gi.Gtk;
    
    const Application = new Lang.Class({
        //A Class requires an explicit Name parameter. This is the Class Name.
        Name: 'Application',
    
        //create the application
        _init: function() {
            this.application = new Gtk.Application();
    
           //connect to 'activate' and 'startup' signals to handlers.
           this.application.connect('activate', Lang.bind(this, this._onActivate));
           this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        //create the UI
        _buildUI: function() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       title: "Hello World!" });
            this._window.set_default_size(200, 200);
            this.label = new Gtk.Label({ label: "Hello World" });
            this._window.add(this.label);
        },
    
        //handler for 'activate' signal
        _onActivate: function() {
            //show the window and all child widgets
            this._window.show_all();
        },
    
        //handler for 'startup' signal
        _onStartup: function() {
            this._buildUI();
        }
    });
    
    //run the application
    let app = new Application();
    app.application.run(ARGV);
el: #!/usr/bin/gjs
    
    const Lang = imports.lang;
    const Gtk = imports.gi.Gtk;
    
    const Application = new Lang.Class({
        //Μια κλάση απαιτεί μια ρητή παράμετρο ονόματος.  Αυτή είναι το όνομα κλάσης.
        Name: 'Application',
    
        //Δημιουργία της εφαρμογής
        _init: function() {
            this.application = new Gtk.Application();
    
           //Σύνδεση των σημάτων  'activate' και 'startup' στους χειριστές.
           this.application.connect('activate', Lang.bind(this, this._onActivate));
           this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        //Δημιουργία της διεπαφής χρήστη
        _buildUI: function() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       title: "Hello World!" });
            this._window.set_default_size(200, 200);
            this.label = new Gtk.Label({ label: "Hello World" });
            this._window.add(this.label);
        },
    
        //Χειριστής για το σήμα  'activate'
        _onActivate: function() {
            //Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
        //Χειριστής για το σήμα 'startup'
        _onStartup: function() {
            this._buildUI();
        }
    });
    
    //Εκτέλεση της εφαρμογής
    let app = new Application();
    app.application.run(ARGV);

note: (itstool) path: section/title
en: Running the application from terminal
el: Εκτελέστε την εφαρμογή από τερματικό

note: (itstool) path: section/p
en: To run this application, first save it as hello-world.js. Then open Terminal, go to the folder where your application is stored and run:
el: Για να τρέξετε αυτήν την εφαρμογή, πρώτα αποθηκεύστε την ως hello-world.js. Έπειτα ανοίξτε το τερματικό, πηγαίνετε στον φάκελο όπου η εφαρμογή σας αποθηκεύεται και τρέξτε:

note: (itstool) path: section/title
en: The <file>.desktop.in</file> file
el: Το αρχείο <file>.desktop.in</file>

note: (itstool) path: section/p
en: Running applications from the Terminal is useful at the beginning of the application making process. To have fully working <link href="https://developer.gnome.org/integration-guide/stable/mime.html.en">application integration</link> in GNOME 3 requires a desktop launcher. For this you need to create a <file>.desktop</file> file. The <file>.desktop</file> file describes the application name, the used icon and various integration bits. A deeper insight into the <file>.desktop</file> file can be found <link href="http://developer.gnome.org/desktop-entry-spec/">here</link>. The <file>.desktop.in</file> file will create the <file>.desktop</file>.
el: Τρέχοντας εφαρμογές από το τερματικό είναι χρήσιμο στην αρχή της διεργασίας κατασκευής της εφαρμογής. Για να έχετε μια πλήρως λειτουργική <link href="https://developer.gnome.org/integration-guide/stable/mime.html.en">ολοκληρωμένη εφαρμογή</link> στο GNOME 3 απαιτείται ένας εκκινητής επιφάνεια εργασίας. Για αυτό χρειάζεται να δημιουργήσετε ένα αρχείο <file>.desktop</file>. Το αρχείο <file>.desktop</file> περιγράφει το όνομα της εφαρμογής, το χρησιμοποιούμενο εικονίδιο και ποικίλα δυαδικά ολοκλήρωσης. Μια βαθύτερη ματιά στο αρχείο <file>.desktop</file> μπορεί να βρεθεί <link href="http://developer.gnome.org/desktop-entry-spec/">εδώ</link>. Το αρχείο <file>.desktop.in</file> θα δημιουργήσει το <file>.desktop</file>.

note: (itstool) path: note/p
en: Before continuing, resave <file>hello-world.js</file> as <file>hello-world</file>. Then run this in the command line:
el: Πριν συνεχίσετε, ξανααποθηκεύστε το <file>hello-world.js</file> ως <file>hello-world</file>. Έπειτα εκτελέστε το στη γραμμή εντολών:

note: (itstool) path: section/p
en: The example shows you the minimum requirements for a <code>.desktop.in</code> file.
el: Το παράδειγμα εμφανίζει τις ελάχιστες απαιτήσεις για ένα αρχείο<code>.desktop.in</code>.

note: (itstool) path: section/code
en: [Desktop Entry]
    Version=1.0
    Encoding=UTF-8
    Name=Hello World
    Comment=Say Hello
    Exec=@prefix@/bin/hello-world
    Icon=application-default-icon
    Terminal=false
    Type=Application
    StartupNotify=true
    Categories=GNOME;GTK;Utility;
el: [Desktop Entry]
    Version=1.0
    Encoding=UTF-8
    Name=Hello World
    Comment=Say Hello
    Exec=@prefix@/bin/hello-world
    Icon=application-default-icon
    Terminal=false
    Type=Application
    StartupNotify=true
    Categories=GNOME·GTK·Utility·

note: (itstool) path: section/p
en: Now let's go through some parts of the <code>.desktop.in</code> file.
el: Τώρα, ας εξετάσουμε μερικά μέρη του αρχείου <code>.desktop.in</code>.

note: (itstool) path: item/title (itstool) path: td/p
en: Name
el: Όνομα

note: (itstool) path: item/p
en: The application name.
el: Το όνομα της εφαρμογής.

note: (itstool) path: item/title
en: Comment
el: Σχόλιο

note: (itstool) path: item/p
en: A short description of the application.
el: Μια σύντομη περιγραφή της εφαρμογής.

note: (itstool) path: item/p
en: Specifies a command to execute when you choose the application from the menu. In this example exec just tells where to find the <file>hello-world</file> file and the file takes care of the rest.
el: Ορίζει μια εντολή για εκτέλεση όταν επιλέξετε την εφαρμογή από το μενού. Σε αυτό το παράδειγμα το exec απλά λέει πού να βρείτε το αρχείο <file>hello-world</file> και το αρχείο φροντίζει για τα υπόλοιπα.

note: (itstool) path: item/title
en: Terminal
el: Τερματικός

note: (itstool) path: item/p
en: Specifies whether the command in the Exec key runs in a terminal window.
el: Ορίζει εάν η εντολή στο κλειδί Exec τρέχει σε ένα παράθυρο τερματικού.

note: (itstool) path: section/p
en: To put your application into the appropriate category, you need to add the necessary categories to the Categories line. More information on the different categories can be found in the <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">menu specification</link>.
el: Για να βάλετε την εφαρμογή σας στη σωστή κατηγορία χρειάζεται να προσθέσετε τις απαραίτητες κατηγορίες στη γραμμή κατηγοριών. Περισσότερες πληροφορίες για τις διαφορετικές κατηγορίες μπορούν να βρεθούν στο <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">προδιαγραφές μενού</link>.

note: (itstool) path: section/p
en: In this example we use an existing icon. For a custom icon you need to have a .svg file of your icon, stored in <file>/usr/share/icons/hicolor/scalable/apps</file>. Write the name of your icon file to the .desktop.in file, on line 7. More information on icons in: <link href="https://live.gnome.org/GnomeGoals/AppIcon">Installing Icons for Themes</link> and <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">on freedesktop.org: Specifications/icon-theme-spec</link>.
el: Σε αυτό το παράδειγμα χρησιμοποιήσαμε ένα υπάρχον εικονίδιο. Για ένα προσαρμοσμένο εικονίδιο χρειάζεται να έχετε ένα αρχείο .svg του εικονιδίου σας, αποθηκευμένο στο <file>/usr/share/icons/hicolor/scalable/apps</file>. Γράψτε το όνομα του αρχείου του εικονιδίου σας στο αρχείο .desktop.in, στη γραμμή 7. Περισσότερες πληροφορίες για εικονίδια στο: <link href="https://live.gnome.org/GnomeGoals/AppIcon">Εγκατάσταση εικονιδίων για θέματα</link>, και <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">on freedesktop.org: Specifications/icon-theme-spec</link>.

note: (itstool) path: section/title
en: The build system
el: Το σύστημα δόμησης

note: (itstool) path: section/p
en: To make your application truly a part of the GNOME 3 system you need to install it with the help of autotools. The autotools build will install all the necessary files to all the right places.
el: Για να κάνετε την εφαρμογή σας πραγματικά τμήμα του συστήματος GNOME 3 χρειαζόσαστε την εγκατάσταση του με τη βοήθεια των autotools. Η κατασκευή των autotools θα εγκαταστήσει όλα τα απαραίτητα αρχεία σε όλες τις σωστές θέσεις.

note: (itstool) path: section/p
en: For this you need to have the following files:
el: Για αυτό χρειαζόσαστε να έχετε τα παρακάτω αρχεία:

note: (itstool) path: section/code
en: #!/bin/sh
    
    set -e
    
    test -n "$srcdir" || srcdir=`dirname "$0"`
    test -n "$srcdir" || srcdir=.
    
    olddir=`pwd`
    cd "$srcdir"
    
    # This will run autoconf, automake, etc. for us
    autoreconf --force --install
    
    cd "$olddir"
    
    if test -z "$NOCONFIGURE"; then
      "$srcdir"/configure "$@"
    fi
el: #!/bin/sh
    
    set -e
    
    test -n "$srcdir" || srcdir=`dirname "$0"`
    test -n "$srcdir" || srcdir=.
    
    olddir=`pwd`
    cd "$srcdir"
    
    # Αυτό θα εκτελέσει autoconf, automake, κλπ. για μας
    autoreconf --force --install
    
    cd "$olddir"
    
    if test -z "$NOCONFIGURE"; then
      "$srcdir"/configure "$@"
    fi

note: (itstool) path: section/p
en: After the <file>autogen.sh</file> file is ready and saved, run:
el: Αφού το αρχείο <file>autogen.sh</file> είναι έτοιμο και αποθηκευμένο, εκτελέστε:

note: (itstool) path: section/code
en: # The actual runnable program is set to the SCRIPTS primitive.
    # # Prefix bin_ tells where to copy this
    bin_SCRIPTS = hello-world
    # # List of files to be distributed
    EXTRA_DIST =  \
    	$(bin_SCRIPTS)
    #
    #     # The desktop files
    desktopdir = $(datadir)/applications
    desktop_DATA = \
    	hello-world.desktop
el: # Το τρέχον εκτελέσιμο πρόγραμμα ορίζεται στα θεμελιακά SCRIPTS.
    # # Το πρόθεμα bin_ λέει που να το αντιγράψετε
    bin_SCRIPTS = hello-world
    # # Η λίστα των αρχείων που θα διανεμηθούν
    EXTRA_DIST =  \
    	$(bin_SCRIPTS)
    #
    #     # Τα αρχεία της επιφάνειας εργασίας
    desktopdir = $(datadir)/applications
    desktop_DATA = \
    	hello-world.desktop

note: (itstool) path: section/code
en: # This file is processed by autoconf to create a configure script
    AC_INIT([Hello World], 1.0)
    AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip])
    AC_CONFIG_FILES([Makefile hello-world.desktop])
    AC_OUTPUT
el: # Αυτό το αρχείο επεξεργάζεται από το autoconf για τη δημιουργία ενός σεναρίου διαμόρφωσης
    AC_INIT([Hello World], 1.0)
    AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip])
    AC_CONFIG_FILES([Makefile hello-world.desktop])
    AC_OUTPUT

note: (itstool) path: section/p
en: Information users should read first. This file can be blank.
el: Οι πληροφορίες χρηστών πρέπει να διαβαστούν πρώτα. Αυτό το αρχείο μπορεί να είναι κενό.

note: (itstool) path: section/p
en: When you have the <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct information and rights, the <file>README</file> file can include the following instructions:
el: Όταν έχετε τα αρχεία <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> και <file>autogen.sh</file> με σωστές πληροφορίες και δικαιώματα, το αρχείο <file>README</file> μπορεί να συμπεριλάβει τις ακόλουθες οδηγίες:

note: (itstool) path: section/code
en: To build and install this program:
    
    ./autogen.sh --prefix=/home/your_username/.local
    make install
    
    -------------
    Running the first line above creates the following files:
    
    aclocal.m4
    autom4te.cache
    config.log
    config.status
    configure
    hello-world.desktop
    install-sh
    missing
    Makefile.in
    Makefile
    
    Running "make install", installs the application in /home/your_username/.local/bin
    and installs the hello-world.desktop file in /home/your_username/.local/share/applications
    
    You can now run the application by typing "Hello World" in the Overview.
    
    ----------------
    To uninstall, type:
    
    make uninstall
    
    ----------------
    To create a tarball type:
    
    make distcheck
    
    This will create hello-world-1.0.tar.xz
el: Για να δομήσετε και να εγκαταστήσετε αυτό το πρόγραμμα:
    
    ./autogen.sh --prefix=/home/your_username/.local
    make install
    
    -------------
    Η εκτέλεση της πρώτης παραπάνω γραμμής δημιουργεί τα ακόλουθα αρχεία:
    
    aclocal.m4
    autom4te.cache
    config.log
    config.status
    configure
    hello-world.desktop
    install-sh
    missing
    Makefile.in
    Makefile
    
    Η εκτέλεση "make install", εγκαθιστά την εφαρμογή στο /home/your_username/.local/bin
    και εγκαθιστά το αρχείο hello-world.desktop στο /home/your_username/.local/share/applications
    
    Μπορείτε τώρα να εκτελέσετε την εφαρμογή πληκτρολογώντας "Hello World" στην επισκόπηση.
    
    ----------------
    Για απεγκατάσταση, πληκτρολογήστε:
    
    make uninstall
    
    ----------------
    Για δημιουργία tarball, πληκτρολογήστε:
    
    make distcheck
    
    Αυτό θα δημιουργήσει hello-world-1.0.tar.xz

note: (itstool) path: item/p
en: create a small "Hello, World" application using Python and GTK+
el: δημιουργήσετε μια μικρή εφαρμογή "Hello, World" χρησιμοποιώντας Python και GTK+

note: (itstool) path: section/code
en: class MyWindow(Gtk.ApplicationWindow):
    
        # constructor for a Gtk.ApplicationWindow
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Hello World!", application=app)
            self.set_default_size(200, 100)
    
    class MyApplication(Gtk.Application):
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
el: class MyWindow(Gtk.ApplicationWindow):
    
        # Κατασκευαστής για μια Gtk.ApplicationWindow
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Hello World!", application=app)
            self.set_default_size(200, 100)
    
    class MyApplication(Gtk.Application):
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)

note: (itstool) path: section/p
en: Gtk.Application initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal.
el: Η Gtk.Application αρχικοποιεί το GTK+. Επίσης συνδέει το κουμπί <gui>x</gui> που δημιουργείται αυτόματα μαζί με το παράθυρο στο σήμα "destroy".

note: (itstool) path: section/p
en: We can start building our first window. We do this by creating a class called <var>MyWindow</var> and assigning it a Gtk.ApplicationWindow.
el: Μπορούμε να αρχίσουμε να κατασκευάζουμε το πρώτο μας παράθυρο. Αυτό το κάνουμε δημιουργώντας μια κλάση που λέγεται <var>MyWindow</var> και της αποδίδουμε ένα Gtk.ApplicationWindow.

note: (itstool) path: section/code
en: # Add a label widget to your window
    
            # create a label
            label = Gtk.Label()
    
            # set the text of the label
            label.set_text("Hello GNOME!")
    
            # add the label to the window
            self.add(label)
el: # Προσθήκη ενός γραφικού στοιχείου ετικέτας στο παράθυρό σας
    
            # δημιουργία ετικέτας
            label = Gtk.Label()
    
            # ορισμός του κειμένου της ετικέτας
            label.set_text("Hello GNOME!")
    
            # προσθήκη της ετικέτας στο παράθυρο
            self.add(label)

note: (itstool) path: section/p
en: A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. To use it, we create a variable called <var>label</var> and set the text that the label will hold. Finally, we create and run the application:
el: Μια ετικέτα κειμένου είναι ένα από τα γραφικά στοιχεία του GTK+ που μπορούμε να χρησιμοποιήσουμε, λόγω της εισαγωγής της βιβλιοθήκης GTK+. Για τη χρήση του, δημιουργούμε μια νέα μεταβλητή που ονομάζουμε <var>ετικέτα</var> και ορίζουμε το κείμενο που η ετικέτα θα κρατά. Τελικά, δημιουργούμε και τρέχουμε την εφαρμογή:

note: (itstool) path: section/code
en: #run the application
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
el: #εκτέλεση της εφαρμογής
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/p
en: To run this application, first save it as hello-world.py. Then open Terminal, go to the folder where your application is stored and run:
el: Για να τρέξετε αυτήν την εφαρμογή, πρώτα αποθηκεύστε την ως helloWorld.py. Έπειτα ανοίξτε το τερματικό, πηγαίνετε στον φάκελο όπου η εφαρμογή σας αποθηκεύεται και τρέξτε:

note: (itstool) path: section/code
en: # The actual runnable program is set to the SCRIPTS primitive.
    # # Prefix bin_ tells where to copy this
    bin_SCRIPTS = hello-world.py
    # # List of files to be distributed
    EXTRA_DIST=  \
    	$(bin_SCRIPTS)
    #
    #     # The desktop files
    desktopdir = $(datadir)/applications
    desktop_DATA = \
    	hello-world.desktop
el: # Το ενεργό εκτελέσιμο πρόγραμμα ορίζεται στα θεμελιακά SCRIPTS.
    # # Το πρόθεμα bin_ λέει που να αντιγραφεί αυτό
    bin_SCRIPTS = hello-world.py
    # # Λίστα των αρχείων που θα διανεμηθούν
    EXTRA_DIST=  \
    	$(bin_SCRIPTS)
    #
    #     # Τα αρχεία επιφάνειας εργασίας
    desktopdir = $(datadir)/applications
    desktop_DATA = \
    	hello-world.desktop

note: (itstool) path: item/p
en: create a small "Hello, World" application using GTK+
el: δημιουργήσετε μια μικρή εφαρμογή "Hello, World" χρησιμοποιώντας GTK+

note: (itstool) path: section/p
en: We can start building our first window. We do this by creating a variable called <var>window</var> and assigning it a new Gtk.ApplicationWindow.
el: Μπορούμε να αρχίσουμε να κατασκευάζουμε το πρώτο μας παράθυρο. Αυτό το κάνουμε δημιουργώντας μια μεταβλητή που λέγεται <var>window</var> και της αποδίδουμε ένα νέο Gtk.ApplicationWindow.

note: (itstool) path: section/p
en: We give the window a title using <code>set_title</code>. The title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding.
el: Δίνουμε στο παράθυρο έναν τίτλο χρησιμοποιώντας <code>set_title</code>. Ο τίτλος μπορεί να είναι οποιαδήποτε επιθυμητή συμβολοσειρά. Για να είσαστε ασφαλείς, είναι καλύτερο να επιλέξετε την κωδικοποίηση UTF-8.

note: (itstool) path: section/p
en: Finally, we create and run the application:
el: Τελικά, δημιουργούμε και εκτελούμε την εφαρμογή:

note: (itstool) path: section/p
en: To run this application, first save it as hello-world.vala. Then open Terminal, go to the folder where your application is stored.
el: Για να τρέξετε αυτήν την εφαρμογή, πρώτα αποθηκεύστε την ως helloWorld.vala. Έπειτα ανοίξτε το τερματικό, πηγαίνετε στον φάκελο όπου η εφαρμογή σας αποθηκεύεται.

note: (itstool) path: section/p
en: Compile the program:
el: Μεταγλωττίστε το πρόγραμμα:

note: (itstool) path: section/p
en: Run the program:
el: Εκτελέστε το πρόγραμμα:

note: (itstool) path: section/code
en: # The actual runnable program is set to the SCRIPTS primitive.
    # # Prefix bin_ tells where to copy this
    bin_PROGRAMS = hello-world
    hello_world_CFLAGS = $(gtk_CFLAGS)
    hello_world_LDADD = $(gtk_LIBS)
    hello_world_VALAFLAGS = --pkg gtk+-3.0
    hello_world_SOURCES = hello-world.vala
    
    desktopdir = $(datadir)/applications
    desktop_DATA = \
    	hello-world.desktop
el: # Το ενεργό εκτελέσιμο πρόγραμμα ορίζεται στα θεμελιακά SCRIPTS.
    # # Το πρόθεμα bin_ λέει πού να το αντιγράψετε αυτό
    bin_PROGRAMS = hello-world
    hello_world_CFLAGS = $(gtk_CFLAGS)
    hello_world_LDADD = $(gtk_LIBS)
    hello_world_VALAFLAGS = --pkg gtk+-3.0
    hello_world_SOURCES = hello-world.vala
    
    desktopdir = $(datadir)/applications
    desktop_DATA = \
    	hello-world.desktop

note: (itstool) path: section/code
en: # This file is processed by autoconf to create a configure script
    AC_INIT([Hello World], 1.0)
    AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip])
    AC_PROG_CC
    AM_PROG_VALAC([0.16])
    PKG_CHECK_MODULES(gtk, gtk+-3.0)
    AC_CONFIG_FILES([Makefile hello-world.desktop])
    
    AC_OUTPUT
el: # Αυτό το αρχείο επεξεργάζεται από autoconf για τη δημιουργία ενός σεναρίου ρυθμίσεων
    AC_INIT([Hello World], 1.0)
    AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip])
    AC_PROG_CC
    AM_PROG_VALAC([0.16])
    PKG_CHECK_MODULES(gtk, gtk+-3.0)
    AC_CONFIG_FILES([Makefile hello-world.desktop])
    
    AC_OUTPUT

note: (itstool) path: section/p
en: When you have the <file>hello-world.c</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct information and rights, the <file>README</file> file can include the following instructions:
el: Όταν έχετε τα αρχεία <file>hello-world.c</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> και <file>autogen.sh</file> με σωστές πληροφορίες και δικαιώματα, το αρχείο <file>README</file> μπορεί να συμπεριλάβει τις ακόλουθες οδηγίες:

note: (itstool) path: section/code
en: To build and install this program:
    
    ./autogen.sh --prefix=/home/your_username/.local
    make
    make install
    
    -------------
    Running the first line above creates the following files:
    
    aclocal.m4
    autom4te.cache
    config.log
    config.status
    configure
    depcomp
    hello-world
    hello-world.c
    hello-world.desktop
    hello_world-hello-world.o
    hello_world_vala.stamp
    install-sh
    missing
    Makefile.in
    Makefile
    
    Running "make" links all the appropriate libraries.
    
    Running "make install", installs the application in /home/your_username/.local/bin
    and installs the hello-world.desktop file in /home/your_username/.local/share/applications
    
    You can now run the application by typing "Hello World" in the Overview.
    
    ----------------
    To uninstall, type:
    
    make uninstall
    
    ----------------
    To create a tarball type:
    
    make distcheck
    
    This will create hello-world-1.0.tar.xz
el: Για να κατασκευάσετε και να εγκαταστήσετε αυτό το πρόγραμμα:
    
    ./autogen.sh --prefix=/home/your_username/.local
    make
    make install
    
    -------------
    Η εκτέλεση της πρώτης παραπάνω γραμμής δημιουργεί τα παρακάτω αρχεία:
    
    aclocal.m4
    autom4te.cache
    config.log
    config.status
    configure
    depcomp
    hello-world
    hello-world.c
    hello-world.desktop
    hello_world-hello-world.o
    hello_world_vala.stamp
    install-sh
    missing
    Makefile.in
    Makefile
    
    Η εκτέλεση του "make" συνδέει όλες τις κατάλληλες βιβλιοθήκες.
    
    Η εκτέλεση "make install", εγκαθιστά την εφαρμογή στο /home/your_username/.local/bin
    και εγκαθιστά το αρχείο hello-world.desktop στο /home/your_username/.local/share/applications
    
    Μπορείτε τώρα να εκτελέσετε την εφαρμογή πληκτρολογώντας "Hello World" στην επισκόπηση.
    
    ----------------
    Για απεγκατάσταση, πληκτρολογήστε:
    
    make uninstall
    
    ----------------
    Για δημιουργία τύπου tarball πληκτρολογήστε:
    
    make distcheck
    
    Αυτό θα δημιουργήσει hello-world-1.0.tar.xz

[ctx: text]
note: (itstool) path: info/title
en: Image (C)
el: Εικόνα (C)

note: (itstool) path: info/desc
en: A widget displaying an image
el: Ένα γραφικό στοιχείο που εμφανίζει μια εικόνα

note: (itstool) path: page/title
en: Image
el: Εικόνα

note: (itstool) path: page/p
en: This GtkApplication displays an image file from the current directory.
el: Αυτή η GtkApplication εμφανίζει ένα αρχείο εικόνας από τον τρέχοντα κατάλογο.

note: (itstool) path: note/p
en: If the image file isn't loaded successfully, the image will contain a "broken image" icon. The <file>filename.png</file> needs to be in the current directory for this code to work. Use your favorite picture!
el: Εάν το αρχείο εικόνας δεν φορτωθεί επιτυχώς, η εικόνα θα περιέχει ένα εικονίδιο "σπασμένης εικόνας". Το <file>filename.png</file> χρειάζεται να είναι στον τρέχοντα κατάλογο για να δουλέψει αυτός ο κώδικας. Χρησιμοποιήστε την αγαπημένη σας εικόνα!

note: (itstool) path: page/code
en: #include &lt;gtk/gtk.h&gt;
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *image;
    
      /*Create a window with a title and a default size*/
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Welcome to GNOME");
      gtk_window_set_default_size (GTK_WINDOW (window), 300, 300);
    
      image = gtk_image_new_from_file ("gnome-image.png");
    
      gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (image));
    
      gtk_widget_show_all (GTK_WIDGET (window));
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example",G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }
el: #include &lt;gtk/gtk.h&gt;
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *image;
    
      /*Δημιουργία παραθύρου με τίτλο και προεπιλεγμένο μέγεθος*/
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Welcome to GNOME");
      gtk_window_set_default_size (GTK_WINDOW (window), 300, 300);
    
      image = gtk_image_new_from_file ("gnome-image.png");
    
      gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (image));
    
      gtk_widget_show_all (GTK_WIDGET (window));
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example",G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: Image (JavaScript)
el: Εικόνα (JavaScript)

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const ImageExample = new Lang.Class ({
    	Name: 'Image Example',
    
    	/* Create the application itself
    	   This boilerplate code is needed to build any GTK+ application. */
            _init: function () {
       	     this.application = new Gtk.Application ({
      	          application_id: 'org.example.jsimage',
      	          flags: Gio.ApplicationFlags.FLAGS_NONE
       	     });
    
    	// Connect 'activate' and 'startup' signals to the callback functions
    	this.application.connect('activate', Lang.bind(this, this._onActivate));
    	this.application.connect('startup', Lang.bind(this, this._onStartup));
    	},
    
    	// Callback function for 'activate' signal presents windows when active
    	_onActivate: function () {
    		this._window.present ();
    	},
    
    	// Callback function for 'startup' signal initializes menus and builds the UI
    	_onStartup: function () {
    		this._buildUI ();
    	},
    
    
    
    
    	// Build the application's UI
    	_buildUI: function () {
    
    		// Create the application window
            	this._window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                         	     window_position: Gtk.WindowPosition.CENTER,
                                                         	     title: "Welcome to GNOME",
                                                         	     default_height: 300,
                                                         	     default_width: 300 });
    
    		// Create the label
    		this.jsimage = new Gtk.Image ({file: "gnome-image.png"});
    		this._window.add (this.jsimage);
    
           	 	// Show the window and all child widgets
           	 	this._window.show_all();
    	}
    
    
    });
    
    // Run the application
    let app = new ImageExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const ImageExample = new Lang.Class ({
    	Name: 'Image Example',
    
    	/* Δημιουργία της εφαρμογής αυτής καθεαυτής
    	   Αυτός ο κώδικας χρειάζεται για τη δόμηση οποιασδήποτε εφαρμογής  GTK+. */
            _init: function () {
       	     this.application = new Gtk.Application ({
      	          application_id: 'org.example.jsimage',
      	          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 ();
    	},
    
    
    
    
    	// Δόμηση της διεπαφής χρήστη της εφαρμογής
    	_buildUI: function () {
    
    		// Δημιουργία παραθυύρου της εφαρμογής
            	this._window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                         	     window_position: Gtk.WindowPosition.CENTER,
                                                         	     title: "Welcome to GNOME",
                                                         	     default_height: 300,
                                                         	     default_width: 300 });
    
    		// Δημιουργία της ετικέτας
    		this.jsimage = new Gtk.Image ({file: "gnome-image.png"});
    		this._window.add (this.jsimage);
    
           	 	// Εμφάνιση του παραθύρου και όλων των θυγατικών γραφικών στοιχείων
           	 	this._window.show_all();
    	}
    
    
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new ImageExample ();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: Image (Python)
el: Εικόνα (Python)

note: (itstool) path: note/p
en: If the image file is not loaded successfully, the image will contain a "broken image" icon. <file>filename.png</file> needs to be in the current directory for this code to work.
el: Εάν το αρχείο εικόνας δεν φορτωθεί επιτυχώς, η εικόνα θα περιέχει ένα εικονίδιο "σπασμένης εικόνας". Το <file>filename.png</file> χρειάζεται να είναι στον τρέχοντα κατάλογο για να δουλέψει αυτός ο κώδικας.

note: (itstool) path: section/p
en: Another way to obtain what we have in the example is to create the image as an instance of another class and add it to the instance of <code>MyWindow</code> in the <code>do_activate(self)</code> method:
el: Ένας άλλος τρόπος για να πάρετε ότι έχουμε στο παράδειγμα είναι η δημιουργία της εικόνας ως ένα στιγμιότυπο μιας άλλης κλάσης και προσθήκη του στο στιγμιότυπο του <code>MyWindow</code> στη μέθοδο <code>do_activate(self)</code>:

note: (itstool) path: note/p
en: To use this code snippet, you will need to add the code that imports <code>Gtk</code> and <code>GdkPixbuf</code> from <code>gi.repository</code> and lines that instantiate the <code>MyApplication</code> window.
el: Για να χρησιμοποιήσετε αυτό το τμήμα κώδικα, θα χρειαστεί να προσθέσετε τον κώδικα που εισάγει τα <code>Gtk</code> και <code>GdkPixbuf</code> από το <code>gi.repository</code> και τις γραμμές που αντιπροσωπεύουν το παράθυρο <code>MyApplication</code>.

note: (itstool) path: section/title
en: Useful methods for an Image widget
el: Χρήσιμες μέθοδοι για γραφικό στοιχείο εικόνας

note: (itstool) path: item/p
en: To load an image over a network use <code>set_from_pixbuf(pixbuf)</code>, where <code>pixbuf</code> is a <link href="https://developer.gnome.org/gdk-pixbuf/unstable/index.html"> GdkPixbuf</link>.
el: Για φόρτωση εικόνας μέσω δικτύου χρησιμοποιήστε <code>set_from_pixbuf(pixbuf)</code>, όπου <code>pixbuf</code> είναι <link href="https://developer.gnome.org/gdk-pixbuf/unstable/index.html"> GdkPixbuf</link>.

note: (itstool) path: item/p
en: If <code>preserve_aspect_ratio=True</code> we can use <code>new_from_file_at_size(filename, width, height)</code>. If <code>width</code> or <code>height</code> is <code>-1</code>, it is not constrained.
el: Εάν <code>preserve_aspect_ratio=True</code> μπορούμε να χρησιμοποιήσουμε <code>new_from_file_at_size(filename, width, height)</code>. Εάν <code>width</code> ή <code>height</code> είναι <code>-1</code>, δεν περιορίζεται.

note: (itstool) path: item/p
en: For loading from an input stream, see <code>new_from_stream()</code> and <code>new_from_stream_at_scale()</code> in the documentation.
el: Για φόρτωση από ροή εισόδου, δείτε <code>new_from_stream()</code> και <code>new_from_stream_at_scale()</code> στην τεκμηρίωση

[ctx: text]
note: (itstool) path: info/title
en: Image (Vala)
el: Εικόνα (Vala)

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (C)
el: Προβολέας εικόνων (C)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" Gtk application.
el: Κάτι περισσότερο από απλή εφαρμογή Gtk όπως το "Γεια σου κόσμε".

note: (itstool) path: page/title
en: Image viewer
el: Προβολή εικόνων

note: (itstool) path: synopsis/p
en: In this tutorial, you will learn:
el: Σε αυτό το μάθημα, θα μάθετε:

note: (itstool) path: item/p
en: Some basic concepts of C/GObject programming
el: Μερικές βασικές έννοιες του προγραμματισμού C/GObject

note: (itstool) path: item/p
en: How to write a Gtk application in C
el: Πώς να γράψετε μια εφαρμογή Gtk σε C

note: (itstool) path: item/p
en: Choose <gui>GTK+ (Simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
el: Επιλέξτε <gui>GTK+ (απλό)</gui> από την καρτέλα <gui>C</gui>, πατήστε <gui>συνέχεια</gui>, και συμπληρώστε τις λεπτομέρειές σας στις επόμενες λίγες σελίδες. Χρησιμοποιήστε το <file>image-viewer</file> ως όνομα του έργου και του καταλόγου.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.c">Guitar-Tuner</link> tutorial if you want to learn how to use the interface builder.
el: Βεβαιωθείτε ότι απενεργοποιήσατε το <gui>χρήση του GtkBuilder για διεπαφή χρήση</gui> επειδή θα φτιάξουμε τη διεπαφή χρήστη χειροκίνητα σε αυτό το μάθημα. Σημειώστε το μάθημα <link xref="guitar-tuner.c">ρυθμιστής κιθάρας</link> εάν θέλετε να μάθετε τη χρήση του κατασκευαστή διεπαφής.

note: (itstool) path: section/p
en: C is a rather verbose language, so don't be surprised that the file contains quite a lot of code. Most of it is template code. It loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:
el: Η C είναι μια μάλλον περιγραφική γλώσσα, έτσι μην εκπλαγείτε που το αρχείο περιέχει πολύ κώδικα. Ο περισσότερος κώδικας είναι πρότυπο κώδικα. Φορτώνει ένα (κενό) παράθυρο και το εμφανίζει. Περισσότερες λεπτομέρειες υπάρχουν πιο κάτω· προσπεράστε αυτή τη λίστα αν καταλαβαίνετε τα βασικά:

note: (itstool) path: item/p
en: The <code>create_window</code> function creates a new (empty) window and connects a signal to exit the application when that window is closed.
el: Η συνάρτηση <code>create_window</code> δημιουργεί ένα νέο (άδειο) παράθυρο και συνδέει ένα σήμα για έξοδο της εφαρμογής όταν το παράθυρο κλείνει.

note: (itstool) path: section/title
en: Creating the user interface
el: Δημιουργία της διεπαφής χρήστη

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTK organizes the user interface with <code>GtkContainer</code>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <code>GtkBox</code>:
el: Τώρα δίνουμε ζωή στο άδειο παράθυρο. Το GTK οργανώνει τη διεπαφή χρήστη με το <code>GtkContainer</code> που μπορεί να περιέχει άλλα γραφικά στοιχεία και ακόμα άλλους περιέκτες. Εδώ θα χρησιμοποιήσουμε τον απλούστερο διαθέσιμο περιέκτη, έναν <code>GtkBox</code>:

note: (itstool) path: section/code
en: 
    static GtkWidget*
    create_window (void)
    {
    	GtkWidget *window;
    	GtkWidget *button;
    	GtkWidget *image;
    	GtkWidget *box;
    
    	/* Set up the UI */
    	window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    	gtk_window_set_title (GTK_WINDOW (window), "image-viewer-c");
    
    	box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 5);
    	button = gtk_button_new_with_label (_("Open image"));
    	image = gtk_image_new ();
    
    	gtk_box_pack_start (GTK_BOX (box), image, TRUE, TRUE, 0);
    	gtk_box_pack_start (GTK_BOX (box), button, FALSE, FALSE, 0);
    
    	gtk_container_add (GTK_CONTAINER (window), box);
    
    	/* Connect signals */
    
    	/* Show open dialog when opening a file */
    	g_signal_connect (button, "clicked", G_CALLBACK (on_open_image), image);
    
    	/* Exit when the window is closed */
    	g_signal_connect (window, "destroy", G_CALLBACK (gtk_main_quit), NULL);
    
    	return window;
    }
el: 
    static GtkWidget*
    create_window (void)
    {
    	GtkWidget *window;
    	GtkWidget *button;
    	GtkWidget *image;
    	GtkWidget *box;
    
    	/* Ρύθμιση της διεπαφής χρήστη */
    	window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    	gtk_window_set_title (GTK_WINDOW (window), "image-viewer-c");
    
    	box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 5);
    	button = gtk_button_new_with_label (_("Open image"));
    	image = gtk_image_new ();
    
    	gtk_box_pack_start (GTK_BOX (box), image, TRUE, TRUE, 0);
    	gtk_box_pack_start (GTK_BOX (box), button, FALSE, FALSE, 0);
    
    	gtk_container_add (GTK_CONTAINER (window), box);
    
    	/* Σήματα σύνδεσης */
    
    	/* Εμφάνιση ανοικτού διαλόγου κατά το άνοιγμα αρχείου */
    	g_signal_connect (button, "clicked", G_CALLBACK (on_open_image), image);
    
    	/* Έξοδος όταν το παράθυρο κλείνει */
    	g_signal_connect (window, "destroy", G_CALLBACK (gtk_main_quit), NULL);
    
    	return window;
    }

note: (itstool) path: item/p
en: The first lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container. The macros like <code>GTK_BOX</code> are used for dynamic type checking and casting which is needed as C doesn't support object-orientation out-of-the-box.
el: Οι πρώτες γραμμές δημιουργούν τα επιθυμητά γραφικά στοιχεία για χρήση: ένα κουμπί για άνοιγμα μιας εικόνας, το ίδιο το γραφικό στοιχείο προβολής της εικόνας και το πλαίσιο που θα χρησιμοποιήσουμε ως περιέκτη. Οι μακροεντολές όπως <code>GTK_BOX</code> χρησιμοποιούνται για έλεγχο δυναμικού τύπου και αλλαγές που απαιτούνται καθώς η C δεν υποστηρίζει προσανατολισμό αντικειμένου εκτός πλαισίου.

note: (itstool) path: item/p
en: The calls to <code>gtk_box_pack_start</code> add the two widgets to the box and define their behaviour. The image will expand into any available space while the button will just be as big as needed. You will notice that we don't set explicit sizes on the widgets. In GTK this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes. Next, the box is added to the window.
el: Οι κλήσεις στο <code>gtk_box_pack_start</code> προσθέτουν τα δύο γραφικά στοιχεία στο πλαίσιο και ορίζουν τη συμπεριφορά τους. Η εικόνα θα επεκταθεί σε κάθε διαθέσιμο χώρο, ενώ το κουμπί θα είναι απλά τόσο μεγάλο όσο χρειάζεται. Θα παρατηρήσετε ότι δεν ορίζουμε ρητά μεγέθη στα γραφικά στοιχεία. Στο GTK αυτό συνήθως δεν χρειάζεται επειδή είναι πιο απλό να έχετε μια διάταξη που φαίνεται καλή με διαφορετικά μεγέθη παραθύρων. Στη συνέχεια, το πλαίσιο προστίθεται στο παράθυρο.

note: (itstool) path: item/p
en: We need to define what happens when the user clicks on the button. GTK uses the concept of <em>signals</em>. When the button is clicked, it fires the <em>clicked</em> signal, which we can connect to some action. This is done using the <code>g_signal_connect</code> function which tells GTK to call the <code>on_image_open</code> function when the button is clicked and to pass the image as an additional argument to that function. We will define the <em>callback</em> in the next section.
el: Χρειαζόμαστε να ορίσουμε τι συμβαίνει όταν ο χρήστης πατά σε ένα πλήκτρο. Το GTK χρησιμοποιεί την έννοια των <em>σημάτων</em>. Όταν το κουμπί πατιέται, ξεκινά το σήμα <em>πατημένο</em>, που μπορούμε να συνδέσουμε με κάποια ενέργεια. Αυτό γίνεται χρησιμοποιώντας τη συνάρτηση <code>g_signal_connect</code> που λέει στο GTK να καλέσει τη συνάρτηση <code>on_open_image</code> όταν το κουμπί πατιέται και να περάσει την εικόνα ως πρόσθετο όρισμα σε αυτή τη συνάρτηση. Θα ορίσουμε την <em>επανάκληση</em> στην επόμενη ενότητα.

note: (itstool) path: item/p
en: The last <code>g_signal_connect()</code> makes sure that the application exits when the window is closed.
el: Ο τελευταίος <code>g_signal_connect()</code> επιβεβαιώνει ότι η εφαρμογή φεύγει όταν το παράθυρο κλείνει.

note: (itstool) path: item/p
en: As a last step, make sure to replace the <code>gtk_widget_show</code> call in the <code>main()</code> function by <code>gtk_widget_show_all()</code> to show the window and all the widgets it contains.
el: Ως τελευταίο βήμα, βεβαιωθείτε να αντικαταστήσετε την κλήση <code>gtk_widget_show</code> στη συνάρτηση <code>main()</code> από <code>gtk_widget_show_all()</code> για να εμφανιστεί το παράθυρο και όλα τα γραφικά στοιχεία που περιέχει.

note: (itstool) path: section/title
en: Showing the image
el: Εμφάνιση της εικόνας

note: (itstool) path: section/p
en: We will now define the signal handler for the <em>clicked</em> signal or the button we mentioned before. Add this code before the <code>create_window()</code> method.
el: Θα ορίσουμε τώρα τον χειριστή σήματος για το σήμα <em>πατημένο</em> ή για το κουμπί που αναφέραμε πριν. Προσθέστε αυτόν τον κώδικα πριν τη μέθοδο <code>create_window()</code>.

note: (itstool) path: section/p
en: This is a bit more complicated than anything we've attempted so far, so let's break it down:
el: Αυτό είναι λίγο πιο περίπλοκο από όσα έχουμε κάνει μέχρι τώρα, για αυτό θα το χωρίσουμε σε κομμάτια:

note: (itstool) path: item/p
en: The first argument of the signal is always the widget that sent the signal. Sometimes other arguments related to the signal come after that, but <em>clicked</em> doesn't have any. Next is the <code>user_data</code> argument which is a pointer to the data we passed when connecting the signal. In this case it is our <code>GtkImage</code> object.
el: Το πρώτο όρισμα του σήματος είναι πάντοτε το γραφικό στοιχείο που έστειλε το σήμα. Μερικές φορές άλλα ορίσματα σχετικά με το σήμα έρχονται μετά από αυτό, αλλά το <em>πατημένο</em> δεν έχει. Επόμενο όρισμα είναι το <code>user_data</code> που είναι ένας δείκτης στα δεδομένα που περάσαμε όταν συνδέσαμε το σήμα. Σε αυτήν την περίπτωση είναι το αντικείμενό μας <code>GtkImage</code>.

note: (itstool) path: item/p
en: The next interesting line is where the dialog for choosing the file is created using <code>gtk_file_chooser_dialog_new</code>. The function takes the title of the dialog, the parent window of the dialog and several options like the number of buttons and their corresponding values.
el: Η επόμενη ενδιαφέρουσα γραμμή είναι όταν ο διάλογος επιλογής του αρχείου δημιουργείται χρησιμοποιώντας το <code>gtk_file_chooser_dialog_new</code>. Η συνάρτηση παίρνει τον τίτλο του διαλόγου, το ανιόν παράθυρο του διαλόγου και πολλές επιλογές όπως ο αριθμός των κουμπιών και οι αντίστοιχες τιμές τους.

note: (itstool) path: item/p
en: Notice that we are using <em>stock</em> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.
el: Σημειώστε όταν χρησιμοποιούμε τα <em>προκαθορισμένα</em> ονόματα κουμπιών που υπάρχουν στο Gtk, αντί να γράψουμε οι ίδιοι "Ακύρωση" ή "Άνοιγμα". Το πλεονέκτημα στη χρήση των προκαθορισμένων ονομάτων είναι ότι οι ετικέτες των κουμπιών θα έχουν ήδη μεταφραστεί στη γλώσσα του χρήστη.

note: (itstool) path: item/p
en: The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by GtkImage. A filter object is created first; we then add all kinds of files supported by <code>GdkPixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
el: Οι επόμενες δύο γραμμές περιορίζουν το διάλογο <gui>άνοιγμα</gui> να εμφανίζει μόνο αρχεία που μπορούν να ανοιχθούν από το GtkImage. Ένα αντικείμενο φίλτρου δημιουργείται πρώτα· έπειτα προσθέτουμε όλα τα είδη των αρχείων που υποστηρίζονται από <code>GdkPixbuf</code> (που περιλαμβάνει τις περισσότερες μορφές όπως PNG και JPEG) στο φίλτρο. Τέλος, ορίζουμε αυτό το φίλτρο να είναι το φίλτρο του διαλόγου <gui>άνοιγμα</gui>.

note: (itstool) path: item/p
en: <code>gtk_dialog_run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>gtk_dialog_run</code> will return the value <code>GTK_RESPONSE_ACCEPT</code> (it would return <code>GTK_RESPONSE_CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.
el: Ο <code>gtk_dialog_run</code> εμφανίζει το διάλογο <gui>άνοιγμα</gui>. Ο διάλογος θα περιμένει τον χρήστη να διαλέξει μια εικόνα· όταν διαλέξει, ο <code>gtk_dialog_run</code> θα επιστρέψει την τιμή <code>GTK_RESPONSE_ACCEPT</code> (θα επιστρέψει <code>GTK_RESPONSE_CANCEL</code> αν ο χρήστης πατήσει <gui>ακύρωση</gui>). Η πρόταση <code>switch</code> ελέγχει για αυτό.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next line sets the <code>file</code> property of the GtkImage to the filename of the image selected by the user. The GtkImage will then load and display the chosen image.
el: Αν υποθέσουμε ότι ο χρήστης πάτησε το <gui>άνοιγμα</gui>, η επόμενη γραμμή ορίζει την ιδιότητα <code>file</code> του GtkImage στο όνομα του αρχείου εικόνας που επέλεξε ο χρήστης. Το GtkImage θα φορτώσει τότε και θα εμφανίσει την επιλεγμένη εικόνα.

note: (itstool) path: item/p
en: In the final line of this method, we destroy the <gui>Open</gui> dialog because we don't need it any more. Destroying automatically hides the dialog.
el: Στην τελευταία γραμμή αυτής της μεθόδου, καταστρέφουμε τον διάλογο <gui>άνοιγμα</gui> γιατί δεν τον χρειαζόμαστε πια. Καταστρέφοντας τον αυτόματα κρύβεται ο διάλογος.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>Debug/src/image-viewer</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
el: Εάν δεν το έχετε ήδη κάνει, επιλέξτε την εφαρμογή <file>Debug/src/image-viewer</file> στον διάλογο που εμφανίζεται. Τελικά, πατήστε <gui>τρέξιμο</gui> και απολαύστε!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.c">reference code</link>.
el: Αν αντιμετωπίσετε πρόβλημα με το μάθημα, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="image-viewer/image-viewer.c">κώδικα αναφοράς</link>.

note: (itstool) path: item/p
en: Have the user select a directory rather than a file, and provide controls to cycle through all of the images in a directory.
el: Βάλτε τον χρήστη να επιλέξει ένα κατάλογο αντί για αρχείο και δώστε ελέγχους να γυρίζουν όλες τις εικόνες σε έναν κατάλογο.

note: (itstool) path: item/p
en: Apply random filters and effects to the image when it is loaded and allow the user to save the modified image.
el: Εφαρμόστε τυχαία φίλτρα και εφέ στην εικόνα όταν αυτή φορτωθεί και επιτρέψτε στον χρήστη να αποθηκεύσει την επεξεργασμένη εικόνα.

note: (itstool) path: item/p
en: <link href="http://www.gegl.org/api.html">GEGL</link> provides powerful image manipulation capabilities.
el: Το <link href="http://www.gegl.org/api.html">GEGL</link> παρέχει ισχυρές δυνατότητες επεξεργασίας εικόνας.

note: (itstool) path: item/p
en: Allow the user to load images from network shares, scanners, and other more complicated sources.
el: Επιτρέψτε στον χρήστη να φορτώνει εικόνες από μερισμό δικτύου, από σαρωτές και από άλλες περίπλοκες πηγές.

note: (itstool) path: item/p
en: You can use <link href="http://library.gnome.org/devel/gio/unstable/">GIO</link> to handle network file tranfers and the like, and <link href="http://library.gnome.org/devel/gnome-scan/unstable/">GNOME Scan</link> to handle scanning.
el: Μπορείτε να χρησιμοποιήσετε το <link href="http://library.gnome.org/devel/gio/unstable/">GIO</link> για χειρισμό μεταφορών αρχείων δικτύου και τα παρόμοια, και τη <link href="http://library.gnome.org/devel/gnome-scan/unstable/">Σάρωση του GNOME</link> για χειρισμό σάρωσης.

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" GTKmm application.
el: Μια λίγο περισσότερο από απλή εφαρμογή GTKmm σαν το "Hello, world!".

note: (itstool) path: item/p
en: Some basic concepts of C++/GObject programming
el: Μερικές βασικές έννοιες του προγραμματισμού C++/GObject

note: (itstool) path: item/p
en: How to write a Gtk application in C++
el: Πώς να γράψετε μια εφαρμογή Gtk σε C++

note: (itstool) path: item/p
en: Choose <gui>GTKmm (Simple)</gui> from the <gui>C++</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
el: Επιλέξτε <gui>GTKmm (απλό)</gui> από την καρτέλα <gui>C++</gui>, πατήστε <gui>μπροστά</gui> και συμπληρώστε τις λεπτομέρειές σας στις επόμενες λίγες σελίδες. Χρησιμοποιήστε το <file>image-viewer</file> ως όνομα του έργου και του καταλόγου.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.cpp">Guitar-Tuner</link> tutorial if you want to learn how to use the interface builder.
el: Σιγουρευτείτε ότι απενεργοποιήσατε το <gui>Χρήση του GtkBuilder για διεπαφή χρήση</gui> επειδή θα φτιάξουμε τη διεπαφή χρήστη χειροκίνητα σε αυτό το μάθημα. Σημειώστε το μάθημα <link xref="guitar-tuner.cpp">ρυθμιστής κιθάρας</link> εάν θέλετε να μάθετε τη χρήση του κατασκευαστή διεπαφής.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.cc</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
el: Πατήστε <gui>εφαρμογή</gui> και το έργο θα δημιουργηθεί για σας. Ανοίξτε <file>src/main.cc</file> από τις καρτέλες <gui>έργο</gui> ή <gui>αρχείο</gui>. Θα πρέπει να δείτε κάποιο κώδικα που ξεκινά με τις γραμμές:

note: (itstool) path: item/p
en: The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtkmm</code> (user interface) and <code>iostream</code> (C++-STL) libraries. Functions from these libraries are used in the rest of the code.
el: Οι τρεις γραμμές <code>#include</code> στην κορυφή περιλαμβάνουν τον <code>config</code> (ορίζει χρήσιμη κατασκευή του autoconf), <code>gtkmm</code> (διεπαφή χρήστη) και βιβλιοθήκες <code>iostream</code> (C++-STL). Συναρτήσεις από αυτές τις βιβλιοθήκες χρησιμοποιούνται στον υπόλοιπο κώδικα.

note: (itstool) path: item/p
en: The <code>main</code> function creates a new (empty) window and sets the window title.
el: Η συνάρτηση <code>main</code> δημιουργεί ένα νέο (άδειο) παράθυρο και ορίζει τον τίτλο του παραθύρου.

note: (itstool) path: item/p
en: The <code>kit::run()</code> call starts the GTKmm main loop, which runs the user interface and starts listening for events (like clicks and key presses). As we give the window as an argument to that function, the application will automatically exit when that window is closed.
el: Η κλήση <code>kit::run()</code> αρχίζει τον κύριο βρόχο GTKmm, που εκτελεί τη διεπαφή χρήστη και αρχίζει την απάντηση για συμβάντα (όπως κλικ και πατήματα πλήκτρου). Καθώς δίνουμε το παράθυρο ως όρισμα σε αυτήν τη συνάρτηση, η εφαρμογή θα εγκαταλείψει αυτόματα όταν το παράθυρο κλείσει.

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTKmm organizes the user interface with <code>Gtk::Container</code>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <code>Gtk::Box</code>:
el: Τώρα δίνουμε ζωή στο άδειο παράθυρο. Το GTKmm οργανώνει τη διεπαφή χρήστη με το <code>Gtk::Container</code> που μπορεί να περιέχει άλλα γραφικά στοιχεία και ακόμα άλλους περιέκτες. Εδώ θα χρησιμοποιήσουμε τον απλούστερο διαθέσιμο περιέκτη, έναν <code>Gtk::Box</code>:

note: (itstool) path: item/p
en: The first lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container.
el: Οι πρώτες γραμμές δημιουργούν τα επιθυμητά γραφικά στοιχεία για χρήση. ένα κουμπί για άνοιγμα μιας εικόνας, το ίδιο το γραφικό στοιχείο προβολής της εικόνας και το πλαίσιο που θα χρησιμοποιήσουμε ως περιέκτη.

note: (itstool) path: item/p
en: The calls to <code>pack_start</code> add the two widgets to the box and define their behaviour. The image will expand into any available space while the button will just be as big as needed. You will notice that we don't set explicit sizes on the widgets. In GTKmm this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes. Next, the box is added to the window.
el: Οι κλήσεις στο <code>pack_start</code> προσθέτουν τα δύο γραφικά στοιχεία στο πλαίσιο και ορίζουν τη συμπεριφορά τους. Η εικόνα θα επεκταθεί σε κάθε διαθέσιμο χώρο, ενώ το κουμπί θα είναι απλά τόσο μεγάλο όσο χρειάζεται. Θα παρατηρήσετε ότι δεν ορίζουμε ρητά μεγέθη στα γραφικά στοιχεία. Στο GTKmm αυτό συνήθως δεν χρειάζεται επειδή είναι πιο απλό να έχετε μια διάταξη που φαίνεται καλή με διαφορετικά μεγέθη παραθύρων. Στη συνέχεια, το πλαίσιο προστίθεται στο παράθυρο.

note: (itstool) path: item/p
en: We need to define what happens when the user clicks on the button. GTKmm uses the concept of <em>signals</em>. When the button is clicked, it fires the <em>clicked</em> signal, which we can connect to some action. This is done using the <code>signal_clicked().connect</code> method which tells GTKmm to call the <code>on_open_image</code> function when the button is clicked. We will define the <em>callback</em> in the next section.
el: Χρειαζόμαστε να ορίσουμε τι συμβαίνει όταν ο χρήστης πατά σε ένα πλήκτρο. Το GTKmm χρησιμοποιεί την έννοια των <em>σημάτων</em>. Όταν το κουμπί πατιέται, ξεκινά το σήμα <em>πατημένο</em>, που μπορούμε να συνδέσουμε με κάποια ενέργεια. Αυτό γίνεται χρησιμοποιώντας τη μέθοδο <code>signal_clicked().connect</code> που λέει στο GTKmm να καλέσει τη συνάρτηση <code>on_open_image</code> όταν το κουμπί πατιέται. Θα ορίσουμε την <em>επανάκληση</em> στην επόμενη ενότητα.

note: (itstool) path: item/p
en: The last step is to show all widgets in the window using <code>show_all_children()</code>. This is equivalent to using the <code>show()</code> method on all our child widgets.
el: Το τελευταίο βήμα είναι η εμφάνιση όλων των γραφικών στοιχείων στο παράθυρο χρησιμοποιώντας <code>show_all_children()</code>. Αυτό είναι ισοδύναμο μς τη χρήση της μεθόδου <code>show()</code> σε όλα τα θυγατρικά γραφικά στοιχεία.

note: (itstool) path: section/p
en: We will now define the signal handler for the <em>clicked</em> signal or the button we mentioned before. Add this code before the <code>main</code> method.
el: Θα ορίσουμε τώρα τον χειριστή σήματος για το σήμα <em>πατημένο</em> ή για το κουμπί που αναφέραμε πριν. Προσθέστε αυτόν τον κώδικα πριν τη μέθοδο <code>main</code>.

note: (itstool) path: item/p
en: The dialog for choosing the file is created using the <code>Gtk::FileChooserDialog</code> constructor. This takes the title and type of the dialog. In our case, it is an <em>Open</em> dialog.
el: Ο διάλογος επιλογής του αρχείου δημιουργήθηκε χρησιμοποιώντας τον κατασκευαστή <code>Gtk::FileChooserDialog</code>. Αυτό παίρνει τον τίτλο και τύπο του διαλόγου. Στην περίπτωσή μας, είναι ένας διάλογος <em>ανοίγματος</em>.

note: (itstool) path: item/p
en: The next two lines add an <em>Open</em> and a <em>Close</em> button to the dialog.
el: Οι επόμενες δυο γραμμές προσθέτουν ένα κουμπί <em>ανοίγματος</em> και ένα <em>κλεισίματος</em> στο διάλογο.

note: (itstool) path: item/p
en: The second argument to the <code>add_button()</code> method is a value to identify the clicked button. We use predefined values provided by GTKmm here, too.
el: Το δεύτερο όρισμα στη μέθοδο <code>add_button()</code> είναι μια τιμή καθορισμού του πατημένου κουμπιού. Χρησιμοποιούμε προκαθορισμένες τιμές που παρέχονται από το GTKmm εδώ, επίσης.

note: (itstool) path: item/p
en: The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <code>Gtk::Image</code>. A filter object is created first; we then add all kinds of files supported by <code>Gdk::Pixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
el: Οι επόμενες δύο γραμμές περιορίζουν το διάλογο <gui>άνοιγμα</gui> να εμφανίζει μόνο αρχεία που μπορούν να ανοιχθούν από το <code>Gtk::Image</code>. Ένα αντικείμενο φίλτρου δημιουργείται πρώτα· έπειτα προσθέτουμε όλα τα είδη των αρχείων που υποστηρίζονται από στο φίλτρο όλων των ειδών αρχεία που υποστηρίζονται από το <code>Gdk::Pixbuf</code> (που περιλαμβάνει τις περισσότερες μορφές εικόνων όπως PNG και JPEG) στο φίλτρο. Τέλος, ορίζουμε αυτό το φίλτρο να είναι το φίλτρο του διαλόγου <gui>άνοιγμα</gui>.

note: (itstool) path: item/p
en: <code>Glib::RefPtr</code> is a smart pointer used here, that makes sure that the filter is destroyed when there is no reference to it anymore.
el: Ο <code>Glib::RefPtr</code> είναι ένας έξυπνος δείκτης που χρησιμοποιείται εδώ, αυτό επιβεβαιώνει ότι το φίλτρο καταστρέφεται όταν δεν υπάρχει αναφορά για αυτό πια.

note: (itstool) path: item/p
en: <code>dialog.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the value <code>Gtk::RESPONSE_ACCEPT</code> (it would return <code>Gtk::RESPONSE_CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.
el: Ο <code>dialog.run</code> εμφανίζει το διάλογο <gui>άνοιγμα</gui>. Ο διάλογος θα περιμένει τον χρήστη να διαλέξει μια εικόνα· όταν διαλέξει, ο <code>dialog.run</code> θα επιστρέψει την τιμή <code>Gtk::RESPONSE_ACCEPT</code> (θα επιστρέψει <code>Gtk::RESPONSE_CANCEL</code> αν ο χρήστης πατήσει <gui>ακύρωση</gui>). Η πρόταση <code>switch</code> ελέγχει για αυτό.

note: (itstool) path: item/p
en: We hide the <gui>Open</gui> dialog because we don't need it any more. The dialog would be hidden later anyway, as it is only a local variable and is destroyed (and therefore hidden) when the scope ends.
el: Κρύβουμε το διάλογο <gui>άνοιγμα</gui> επειδή δεν τον χρειαζόμαστε πια. Ο διάλογος θα κρυφτεί αργότερα σε κάθε περίπτωση, καθώς είναι μια τοπική μεταβλητή μόνο και καταστρέφεται (και συνεπώς κρύβεται) όταν η εμβέλεια τελειώνει.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next line loads the file into the <code>Gtk::Image</code> so that it is displayed.
el: Αν υποθέσουμε ότι ο χρήστης πάτησε το <gui>άνοιγμα</gui>, η επόμενη γραμμή φορτώνει το αρχείο στο <code>Gtk::Image</code>, έτσι ώστε να εμφανίζεται.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.cc">reference code</link>.
el: Αν αντιμετωπίσετε πρόβλημα με το μάθημα, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="image-viewer/image-viewer.cc">κώδικα αναφοράς</link>.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (JavaScript)
el: Προβολέας εικόνων (JavaScript)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" application - write an image viewer in GTK+. Includes an introduction to the JavaScript language.
el: Μια λίγο περισσότερο από απλή εφαρμογή σαν το "Hello world"- συγγραφή ενός προβολέα εικόνων σε GTK+. Περιλαμβάνει μια εισαγωγή στη γλώσσα JavaScript.

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to write a very simple GTK application that loads and displays an image file. You will learn how to:
el: Σε αυτόν το μάθημα θα γράψουμε μια πολύ απλή εφαρμογή σε GTK που φορτώνει και εμφανίζει ένα αρχείο εικόνας. Θα μάθετε πώς να:

note: (itstool) path: item/p
en: Write a basic GTK user interface in JavaScript
el: Γράψε μια βασικά διεπαφή χρήστη GTK σε JavaScript

note: (itstool) path: item/p
en: Deal with events by connecting signals to signal handlers
el: Να αντιμετωπίζετε συμβάντα συνδέοντας σήματα με τους χειριστές σημάτων

note: (itstool) path: item/p
en: Lay out GTK user interfaces using containers
el: Σχεδιάζετε διεπαφές χρήστη GTK χρησιμοποιώντας περιέκτες

note: (itstool) path: item/p
en: Load and display image files
el: Φορτώνετε και να εμφανίζετε αρχεία εικόνων

note: (itstool) path: item/p
en: An installed copy of the <em>gjs</em> interpreter
el: Ένα εγκατεστημένο αντίγραφο του διερμηνευτή <em>gjs</em>

note: (itstool) path: item/p
en: Basic knowledge of any object-orientated programming language
el: Βασική γνώση οποιασδήποτε αντικειμενοστραφούς γλώσσας προγραμματισμού

note: (itstool) path: item/p
en: Choose <gui>Generic Javascript</gui> from the <gui>JS</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
el: Επιλέξτε <gui>Γενική Javascript</gui> από την καρτέλα <gui>JS</gui>, πατήστε <gui>Μπροστά</gui>, και συμπληρώστε τις λεπτομέρειές σας στις επόμενες λίγες σελίδες. Χρησιμοποιήστε το <file>image-viewer</file> ως όνομα έργου και καταλόγου.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.js</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
el: Πατήστε <gui>Εφαρμογή</gui> και το έργο θα δημιουργηθεί για εσάς. Ανοίξτε το <file>src/main.js</file> από τις καρτέλες <gui>έργο</gui> ή <gui>αρχείο</gui>. Περιλαμβάνει πολύ βασικό παράδειγμα κώδικα.

note: (itstool) path: section/title
en: JavaScript basics: Hello World
el: Βασικά JavaScript: Hello World

note: (itstool) path: section/p
en: Before we start writing the image viewer, let's find out more about the way JavaScript is used in GNOME. Of course, your very first contact with any programming language should be the Hello World program which can already be found in <file>main.js</file>:
el: Πριν να ξεκινήσουμε την σύνταξη του προβολέα εικόνας, ας εξετάσουμε περισσότερα για τον τρόπο χρήσης του JavaScript στο GNOME. Φυσικά, η πρώτη σας με οποιαδήποτε γλώσσα προγραμματισμού πρέπει να είναι το πρόγραμμα Hello World που μπορεί να βρεθεί ήδη στο <file>main.js</file>:

note: (itstool) path: section/code
en: print ("Hello world!");
el: εκτύπωση ("Hello world!")·

note: (itstool) path: section/p
en: This should look quite natural if you're familiar with almost any other programming language. The function <code>print</code> is called with the argument <code>"Hello world!"</code>, which will be printed on the screen. Note that each line of code ends with a semicolon.
el: Αυτό θα φαίνεται ολότελα φυσικό, εάν είστε εξοικειωμένος με σχεδόν οποιαδήποτε άλλη γλώσσα προγραμματισμού. Η συνάρτηση <code>print</code> καλείται με το όρισμα <code>"Hello world!"</code>, που θα εκτυπωθεί στην οθόνη. Σημειώστε ότι κάθε γραμμή κώδικα τελειώνει με ;.

note: (itstool) path: section/title
en: Classes in JavaScript
el: Κλάσεις στη JavaScript

note: (itstool) path: section/p
en: This is the standard way to define a class in JavaScript:
el: Αυτός είναι ο τυπικός τρόπος ορισμού μιας κλάσης στη JavaScript:

note: (itstool) path: section/p
en: This defines a class called <code>MyClass</code>. Let's go through each part of the class definition:
el: Αυτό ορίζει μια κλάση που λέγεται <code>MyClass</code>. Ας δούμε κάθε τμήμα του ορισμού της κλάσης:

note: (itstool) path: item/p
en: <code>function MyClass</code> is the constructor of the class — its name must match the class's name. You can access any member of the class by using the <code>this</code> object; here, the constructor calls the class's <code>_init</code> method.
el: <code>function MyClass</code> είναι ο κατασκευαστής της κλάσης — το όνομά του πρέπει να ταιριάζει με το όνομα της κλάσης. Μπορείτε να προσπελάσετε οποιοδήποτε μέλος της κλάσης χρησιμοποιώντας το αντικείμενο <code>this</code>· εδώ, ο κατασκευαστής καλεί τη μέθοδο της κλάσης <code>_init</code>.

note: (itstool) path: item/p
en: The <code>MyClass.prototype</code> block is where you define the <em>structure</em> of the class. Each class is made up of methods (functions) and fields (variables); there are three methods and two fields in this example.
el: Η ομάδα <code>MyClass.prototype</code> είναι εκεί που ορίζετε τη <em>δομή</em> της κλάσης. Κάθε κλάση αποτελείται από μεθόδους (συναρτήσεις) και πεδία (μεταβλητές)· υπάρχουν τρεις μέθοδοι και δύο πεδία σε αυτό το παράδειγμα.

note: (itstool) path: item/p
en: The first method defined here is called <code>_init</code>, and we specify that it is a function with no arguments:
el: Η πρώτη μέθοδος που καθορίστηκε εδώ λέγεται <code>_init</code> και καθορίζουμε ότι είναι μια συνάρτηση χωρίς ορίσματα:

note: (itstool) path: item/p
en: We write the function inside some curly braces. Two fields are defined here, <code>propertyA</code> and <code>propertyB</code>. The first is set to a string and the second is set to an integer (10). The function doesn't return any value.
el: Γράφουμε τη συνάρτηση μέσα σε μερικές αγκύλες. Δύο πεδία ορίζονται εδώ, <code>propertyA</code> και <code>propertyB</code>. Το πρώτο ορίζεται σε μια συμβολοσειρά και το δεύτερο ορίζεται σε έναν ακέραιο (10). Η συνάρτηση δεν επιστρέφει καμία τιμή.

note: (itstool) path: item/p
en: The next method is called <code>aMethod</code> and has two arguments, which it prints out when you call it. The final method is <code>dumpProperties</code>, and prints the fields <code>propertyA</code> and <code>propertyB</code>.
el: Η επόμενη μέθοδος λέγεται <code>aMethod</code> και έχει δύο ορίσματα, που εκτυπώνεται όταν την καλείτε. Η τελική μέθοδος είναι <code>dumpProperties</code> και τυπώνει τα πεδία <code>propertyA</code> και <code>propertyB</code>.

note: (itstool) path: item/p
en: Note how the class definition (prototype) is arranged; each function definition is separated by a comma.
el: Σημειώστε πώς τακτοποιείται ο ορισμός κλάσης (πρωτότυπο)· κάθε ορισμός συνάρτησης ξεχωρίζεται με κόμμα.

note: (itstool) path: section/p
en: Now that MyClass has been defined, we can play with it:
el: Τώρα που η MyClass ορίστηκε, μπορούμε να παίξουμε μαζί της:

note: (itstool) path: section/p
en: This code creates a new instance of the class called <code>o</code>, runs <code>aMethod</code>, changes <code>propertyA</code> to a different string, and then calls <code>dumpProperties</code> (which outputs the fields).
el: Αυτός ο κώδικας δημιουργεί ένα νέο στιγμιότυπο της κλάσης που λέγεται <code>o</code>, τρέχει τη <code>aMethod</code>, αλλάζει την <code>propertyA</code> σε διαφορετική συμβολοσειρά και έπειτα καλεί <code>dumpProperties</code> (που εξάγει τα πεδία).

note: (itstool) path: section/p
en: Save the code in the <file>main.js</file> and then run it by using <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> from the menu or using the toolbar.
el: Αποθηκεύστε τον κώδικα στο <file>main.js</file> και έπειτα τρέξτε τον χρησιμοποιώντας <guiseq><gui>τρέξιμο</gui><gui>εκτέλεση</gui></guiseq> από το μενού ή χρησιμοποιώντας την εργαλειοθήκη.

note: (itstool) path: section/title
en: A first Gtk application
el: Μια πρώτη εφαρμογή σε Gtk

note: (itstool) path: section/p
en: Let's see what a very basic Gtk application looks like in JavaScript:
el: Για να δούμε πώς μια πολύ βασική εφαρμογή Gtk φαίνεται σε JavaScript:

note: (itstool) path: section/p
en: Let's take a look at what's happening:
el: Ας ρίξουμε μια ματιά στο τι γίνεται:

note: (itstool) path: item/p
en: The first line imports the Gtk namespace (that is, it includes the Gtk library). The libraries are provided by GObject Introspection (gi), which provides language bindings for many GNOME libraries.
el: Η πρώτη γραμμή εισάγει το όνομα χώρου Gtk (αυτό είναι που περιέχει την βιβλιοθήκη του Gtk). Οι βιβλιοθήκες παρέχονται από το GObject Introspection (gi), που παρέχει γλωσσικές συσχετίσεις για πολλές βιβλιοθήκες του GNOME.

note: (itstool) path: item/p
en: <code>Gtk.init</code> initializes the Gtk library; this statement is mandatory for all Gtk programs.
el: Το <code>Gtk.init</code> αρχικοποιεί τη βιβλιοθήκη Gtk· αυτή η πρόταση είναι υποχρεωτική για όλα τα προγράμματα Gtk.

note: (itstool) path: item/p
en: The next line creates the main window by creating a new <code>Gtk.Window</code> object. You can pass several properties to the window's constructor by using the syntax <code>{property: value, property: value, ...}</code>. In this case we are setting the title of the window.
el: Η επόμενη γραμμή δημιουργεί το κύριο παράθυρο δημιουργώντας ένα νέο αντικείμενο <code>Gtk.Window</code>. Μπορείτε να περάσετε αρκετές ιδιότητες στον κατασκευαστή παραθύρου χρησιμοποιώντας τη σύνταξη <code>{property: value, property: value, ...}</code>. Σε αυτήν την περίπτωση ορίζουμε τον τίτλο του παραθύρου.

note: (itstool) path: item/p
en: The next line explicitly shows the window. In Gtk, every widget is hidden by default.
el: Η επόμενη γραμμή ρητά εμφανίζει το παράθυρο. Στο Gtk, κάθε γραφικό στοιχείο κρύβεται από προεπιλογή.

note: (itstool) path: item/p
en: Finally, <code>Gtk.main</code> runs the main loop — in other words, it executes the program. The main loop listens for events (signals) from the user interface and then calls a signal handler which will do something useful. We'll learn more about signals shortly.
el: Τελικά, το <code>Gtk.main</code> τρέχει τον κύριο βρόχο — με άλλα λόγια, εκτελεί το πρόγραμμα. Ο κύριος βρόχος απαντά σε συμβάντα (σήματα) από τη διεπαφή χρήστη και έπειτα καλεί έναν χειριστή σήματος που θα κάνει κάτι χρήσιμο. Θα μάθουμε περισσότερα για τα σήματα σύντομα.

note: (itstool) path: section/p
en: Save the code in <file>main.js</file> and run it. You will notice that the application does not quit when you close the window. This is because we haven't set up a signal handler to deal with the window's <code>destroy</code> (close) signal yet. We'll do this shortly, but for now you can just hit <keyseq><key>Ctrl</key><key>C</key></keyseq> in the terminal window to quit the program.
el: Αποθήκευση του κώδικα στο <file>main.js</file> και εκτέλεσή του. Θα σημειώσετε ότι η εφαρμογή δεν εγκαταλείπει όταν κλείνετε το παράθυρο. Αυτό συμβαίνει επειδή δεν εγκαταστήσαμε έναν χειριστή σήματος για ασχοληθεί με το σήμα του παραθύρου <code>destroy</code> (κλείσιμο) ακόμα. Θα το κάνουμε σύντομα, αλλά για τώρα μπορείτε απλά να πατήσετε <keyseq><key>Ctrl</key><key>C</key></keyseq> στο παράθυρο τερματικού για να αφήσετε το πρόγραμμα.

note: (itstool) path: section/title
en: Adding classes
el: Προσθήκη κλάσεων

note: (itstool) path: section/p
en: The proper way of doing Gtk programming is by using classes. Let's rewrite the simple code you just wrote using classes:
el: Ο κατάλληλος τρόπος για να γίνει προγραμματισμός Gtk είναι χρησιμοποιώντας κλάσεις. Ας ξαναγράψουμε τον απλό κώδικα που μόλις γράψατε χρησιμοποιώντας κλάσεις:

note: (itstool) path: section/p
en: Notice that the program is the same; we just moved the window creation code to our own <code>ImageViewer</code> class. The class's constructor calls the <code>_init</code> method, which creates and shows the window. We then create an instance of the class before running the main loop (<code>Gtk.main</code>).
el: σημειώστε ότι το πρόγραμμα είναι το ίδιο· μόλις μετακινήσαμε τον κώδικα δημιουργίας παραθύρου στη δική μας κλάση <code>ImageViewer</code>. Ο κατασκευαστής κλάσης καλεί τη μέθοδο <code>_init</code>, που δημιουργεί και εμφανίζει το παράθυρο. Έπειτα δημιουργούμε ένα στιγμιότυπο της κλάσης πριν το τρέξιμο του κύριου βρόχου (<code>Gtk.main</code>).

note: (itstool) path: section/p
en: This code is modular and can be split into multiple files easily. This makes it cleaner and easier to read.
el: Αυτός ο κώδικας είναι αρθρωτός και μπορεί να σπάσει σε πολλαπλά αρχεία εύκολα. Αυτό τον κάνει καθαρότερο και πιο εύκολα αναγνώσιμο.

note: (itstool) path: section/title
en: Signals
el: Σήματα

note: (itstool) path: section/p
en: Signals are one of the key concepts in Gtk programming. Whenever something happens to an object, it emits a signal; for example, when a button is clicked it gives off the <code>clicked</code> signal. If you want your program to do something when that event occurs, you must connect a function (a "signal handler") to that signal. Here's an example:
el: Τα σήματα είναι μια από τις έννοιες κλειδιά για τον προγραμματισμό Gtk. Όποτε κάτι συμβαίνει σε ένα αντικείμενο, εκπέμπει ένα σήμα· για παράδειγμα, όταν πατιέται ένα κουμπί εκπέμπει το σήμα <code>clicked</code>. Άμα θέλετε το πρόγραμμά σας να κάνει κάτι όταν αυτό συμβαίνει, πρέπει να συνδέσετε μια συνάρτηση (έναν "χειριστή σημάτων") σε αυτό το σήμα. Ορίστε ένα παράδειγμα:

note: (itstool) path: section/p
en: The last two lines create a <code>Gtk.Button</code> called <code>b</code> and connect its <code>clicked</code> signal to the <code>button_clicked</code> function, which is defined above. Every time the button is clicked, the code in the <code>button_clicked</code> function will be executed. It just prints a message here.
el: Οι τελευταίες δύο γραμμές δημιουργούν ένα <code>Gtk.Button</code> που ονομάζεται <code>b</code> και συνδέει το σήμα το <code>clicked</code> στην συνάρτηση <code>button_clicked</code>, η οποία ορίζεται πιο πάνω. Κάθε φορά που πατιέται ένα κουμπί, ο κώδικας στη συνάρτηση <code>button_clicked</code> θα εκτελείται. Εδώ απλά τυπώνει ένα μήνυμα.

note: (itstool) path: section/p
en: The syntax for connecting any signal to a function is:
el: Η σύνταξη για σύνδεση οποιουδήποτε σήματος σε μια συνάρτηση είναι:

note: (itstool) path: section/p
en: You can find signal definitions for any object in the <link href="https://developer.gnome.org/gtk3/stable/gtkobjects.html">GTK class reference</link>.
el: Μπορείτε να βρείτε ορισμούς σήματος για κάθε αντικείμενο στο <link href="https://developer.gnome.org/gtk3/stable/gtkobjects.html">αναφορά κλάσης GTK</link>.

note: (itstool) path: note/p
en: You can simplify the code by making use of an inline function definition:
el: Μπορείτε να απλοποιήσετε τον κώδικα χρησιμοποιώντας έναν ενσωματωμένο ορισμό συνάρτησης:

note: (itstool) path: section/title
en: Closing the window
el: Κλείσιμο του παραθύρου

note: (itstool) path: section/p
en: When you close a Gtk window it's not really closed, it's hidden. This allows you to keep the window around (which is useful if you want to ask the user if they really want to close the window, for example).
el: Όταν κλείνεται ένα παράθυρο Gtk δεν κλείνει πραγματικά, κρύβεται. Αυτό επιτρέπει τη διατήρηση του παραθύρου τριγύρω (που είναι χρήσιμο εάν θέλετε να ζητήσετε από τον χρήστη εάν θέλει πραγματικά να κλείσει το παράθυρο, για παράδειγμα).

note: (itstool) path: section/p
en: In our case, we really do just want to close the window. The simplest way of doing this is by connecting the <code>hide</code> signal of the GtkWindow object to a function that closes the application. Go back to the <file>image-viewer.js</file> file and add the following code to the <code>_init</code> method, on the line above <code>this.window.show</code>:
el: Στην περίπτωσή μας, θέλουμε πραγματικά να κλείσουμε το παράθυρο. Ο απλούστερος τρόπος είναι συνδέοντας το σήμα <code>hide</code> του αντικειμένου GtkWindow με μια συνάρτηση που κλείνει την εφαρμογή. Επιστρέψτε στο αρχείο <file>image-viewer.js</file> και προσθέστε τον παρακάτω κώδικα στη μέθοδο <code>_init</code>, στην παραπάνω γραμμή <code>this.window.show</code>:

note: (itstool) path: section/code
en: this.window.connect ("hide", Gtk.main_quit);
el: this.window.connect ("hide", Gtk.main_quit)·

note: (itstool) path: section/p
en: This connects the <code>hide</code> signal of the window to Gtk's <code>main_quit</code> function, which ends the execution of the Gtk main loop. Once the main loop finishes, the function <code>Gtk.main</code> returns. Our program would continue to run any code written after the <code>Gtk.main ();</code> line, but since we don't have any code after that point, the program just ends.
el: Αυτό συνδέει το σήμα <code>hide</code> του παραθύρου στη συνάρτηση του Gtk <code>main_quit</code>, που τελειώνει την εκτέλεση του κύριου βρόχου Gtk. Μόλις ο κύριος βρόχος τελειώσει, η συνάρτηση <code>Gtk.main</code> επιστρέφει. Το πρόγραμμά μας συνεχίζει να τρέχει οποιοδήποτε κώδικα γραμμένο μετά τη γραμμή <code>Gtk.main ();</code>, αλλά αφού δεν έχουμε οποιοδήποτε κώδικα μετά από αυτό το σημείο, το πρόγραμμα απλά τελειώνει.

note: (itstool) path: section/title
en: Containers: Laying-out the user interface
el: Περιέκτες: Σχεδίαση διεπαφής χρήστη

note: (itstool) path: section/p
en: Widgets (controls, such as buttons and labels) can be arranged in the window by making use of <em>containers</em>. You can organize the layout by mixing different types of containers, like boxes and grids.
el: Γραφικά στοιχεία (έλεγχοι, όπως τα κουμπιά και οι ετικέτες) μπορούν να τοποθετηθούν στο παράθυρο κάνοντας χρήση των <em>περιεκτών</em>. Μπορείτε να οργανώσετε την διάταξη συνδυάζοντας διαφορετικών ειδών περιέκτες, όπως πλαίσια και πλέγματα.

note: (itstool) path: section/p
en: A <code>Gtk.Window</code> is itself a type of container, but you can only put one widget directly into it. We would like to have two widgets, an image and a button, so we must put a "higher-capacity" container inside the window to hold the other widgets. A number of <link href="http://library.gnome.org/devel/gtk/stable/GtkContainer.html">container types</link> are available, but we will use a <code>Gtk.Box</code> here. A <code>Gtk.Box</code> can hold several widgets, organized horizontally or vertically. You can do more complicated layouts by putting several boxes inside another box and so on.
el: Ένα <code>Gtk.Window</code> είναι από μόνο του ένα είδος περιέκτη, αλλά μπορείτε να τοποθετήσετε μόνο ένα γραφικό στοιχείο άμεσα πάνω του. Θα θέλαμε να είχαμε δύο γραφικά στοιχεία, μια εικόνα και ένα κουμπί, άρα θα πρέπει να τοποθετήσουμε έναν υποδοχέα "υψηλότερης χωρητικότητας" μέσα στο παράθυρο για να κρατάει τα άλλα γραφικά στοιχεία. Ένας αριθμός από <link href="http://library.gnome.org/devel/gtk/stable/GtkContainer.html">τύπους περιεκτών</link> είναι διαθέσιμοι, αλλά θα χρησιμοποιήσουμε εδώ ένα <code>Gtk.Box</code>. Ένα <code>Gtk.Box</code> μπορεί να κρατήσει πολλά γραφικά στοιχεία, οργανωμένα οριζόντια ή κάθετα. Μπορείτε να κάνετε και πιο περίπλοκες διατάξεις βάζοντας πολλά πλαίσια το ένα μέσα στο άλλο κ.ο.κ.

note: (itstool) path: note/p
en: There is a graphical user interface designer called <app>Glade</app> integrated in <app>Anjuta</app> which makes UI design really easy. For this simple example, however, we will code everything manually.
el: Υπάρχει ένας γραφικός σχεδιαστής διεπαφής χρήστη με όνομα <app>Glade</app> ενσωματωμένος στο <app>Anjuta</app> που κάνει τη σχεδίαση γραφικού περιβάλλοντος πολύ εύκολη. Για αυτό το απλό παράδειγμα, όμως, θα κωδικοποιήσουμε τα πάντα χειροκίνητα.

note: (itstool) path: section/p
en: Let's add the box and widgets to the window. Insert the following code into the <code>_init</code> method, immediately above the <code>this.window.show</code> line:
el: Ας προσθέσουμε ένα πλαίσιο και γραφικά στοιχεία στο παράθυρο. Προσθέστε τον παρακάτω κώδικα στη μέθοδο <code>_init</code>, αμέσως πάνω από τη γραμμή <code>this.window.show</code> line:

note: (itstool) path: section/p
en: The first line creates a <code>Gtk.Box</code> called <code>main_box</code> and sets two of its properties: the <code>orientation</code> is set to vertical (so widgets are arranged in a column), and the <code>spacing</code> between the widgets is set to 0 pixels. The next line then adds the newly-created <code>Gtk.Box</code> to the window.
el: Η πρώτη γραμμή δημιουργεί ένα <code>Gtk.Box</code> που ονομάζεται <code>main_box</code> και ορίζει δύο από τις ιδιότητες του: την <code>orientation</code> που ρυθμίζεται στο κάθετο (οπότε τα γραφικά στοιχεία τακτοποιούνται σε στήλη), και το <code>spacing</code> ανάμεσα στα γραφικά στοιχεία που έχει ρυθμιστεί στα 0 εικονοστοιχεία. Η επόμενη γραμμή έπειτα προσθέτει στο παράθυρο το νεοδημιουργημένο <code>Gtk.Box</code>.

note: (itstool) path: section/p
en: So far the window only contains an empty <code>Gtk.Box</code>, and if you run the program now you will see no changes at all (the <code>Gtk.Box</code> is a transparent container, so you can't see that it's there).
el: Μέχρι στιγμής το παράθυρο περιέχει μόνο ένα άδειο <code>Gtk.Box</code> και άμα εκτελέσετε τώρα το πρόγραμμα δε θα δείτε καμία απολύτως αλλαγή (το <code>Gtk.Box</code> είναι ένας διαφανής περιέκτης, οπότε δεν μπορείτε να δείτε ότι είναι εκεί).

note: (itstool) path: section/title
en: Packing: Adding widgets to the container
el: Συσκευασία: Πρόσθεση γραφικών στοιχείων στον περιέκτη

note: (itstool) path: section/p
en: To add some widgets to the <code>Gtk.Box</code>, insert the following code directly below the <code>this.window.add (main_box)</code> line:
el: Για να προσθέσετε κάποια γραφικά στοιχεία στο <code>Gtk.Box</code>, εισάγετε τον ακόλουθο κώδικα ακριβώς κάτω από την γραμμή <code>this.window.add (main_box)</code>:

note: (itstool) path: section/p
en: The first line creates a new <code>Gtk.Image</code> called <code>image</code>, which will be used to display an image file. Then, the image widget is added (<em>packed</em>) into the <code>main_box</code> container using <code>Gtk.Box</code>'s <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> method.
el: Η πρώτη γραμμή δημιουργεί ένα καινούργιο <code>Gtk.Image</code> που ονομάζεται <code>image</code>, το οποίο θα εμφανίζει ένα αρχείο εικόνας. Έπειτα, το γραφικό στοιχείο εικόνας προστίθεται (<em>πακεταρισμένο</em>) στον περιέκτη <code>main_box</code> χρησιμοποιώντας τη μέθοδο του <code>Gtk.Box</code> <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link>.

note: (itstool) path: section/p
en: <code>pack_start</code> takes 4 arguments: the widget that is to be added to the <code>Gtk.Box</code> (<code>child</code>); whether the <code>Gtk.Box</code> should grow larger when the new widget is added (<code>expand</code>); whether the new widget should take up all of the extra space created if the <code>Gtk.Box</code> gets bigger (<code>fill</code>); and how much space there should be, in pixels, between the widget and its neighbors inside the <code>Gtk.Box</code> (<code>padding</code>).
el: Το <code>pack_start</code> παίρνει 4 ορίσματα: το γραφικό στοιχείο που προστίθεται στο <code>Gtk.Box</code> (<code>child</code>)· αν το <code>Gtk.Box</code> πρέπει να μεγαλώσει όταν προστεθεί νέο γραφικό στοιχείο (<code>expand</code>)· αν το νέο γραφικό στοιχείο θα έπρεπε να καλύψει όλο τον διαθέσιμο χώρο αν μεγαλώσει το <code>Gtk.Box</code> (<code>fill</code>)· και πόσος χώρος πρέπει να υπάρχει, σε εικονοστοιχεία, ανάμεσα στο γραφικό στοιχείο και στους γείτονές του μέσα στο <code>Gtk.Box</code>, (<code>padding</code>).

note: (itstool) path: section/p
en: Gtk containers (and widgets) dynamically expand to fill the available space, if you let them. You don't position widgets by giving them a precise x,y-coordinate location in the window; rather, they are positioned relative to one another. This makes handling window resizing much easier, and widgets should automatically take a sensible size in most situations.
el: Οι περιέκτες (και τα γραφικά στοιχεία) του Gtk επεκτείνονται δυναμικά για να καλύψουν τον διαθέσιμο χώρο, αν τα αφήσετε. Δεν τοποθετείτε τα γραφικά στοιχεία δίνοντας τους ακριβείς θέσεις x, y-συντεταγμένων στο παράθυρο· αλλά, τοποθετούνται σχετικά μεταξύ τους. Αυτό κάνει το χειρισμό της αλλαγής του μεγέθους του παραθύρου πιο εύκολη και τα γραφικά στοιχεία πρέπει να πάρουν αυτόματα ένα λογικό μέγεθος στις περισσότερες περιπτώσεις.

note: (itstool) path: section/p
en: Also note how the widgets are organized in a hierarchy. Once packed in the <code>Gtk.Box</code>, the <code>Gtk.Image</code> is considered a <em>child</em> of the <code>Gtk.Box</code>. This allows you to treat all of the children of a widget as a group; for example, you could hide the <code>Gtk.Box</code>, which would also hide all of its children at the same time.
el: Επίσης σημειώστε πώς τα γραφικά στοιχεία οργανώνονται σε μια ιεραρχία. Μόλις πακεταριστούν μέσα στο <code>Gtk.Box</code>, το <code>Gtk.Image</code> θεωρείται <em>θυγατρικό</em> του <code>Gtk.Box</code>. Αυτό επιτρέπει να συμπεριφερθούμε σε όλα τα θυγατρικά ενός γραφικού στοιχείου ως μια ομάδα· για παράδειγμα, μπορείτε να κρύψετε το <code>Gtk.Box</code>, που θα κρύψει επίσης όλα τα θυγατρικά του ταυτόχρονα.

note: (itstool) path: section/p
en: Now insert these two lines, below the two you just added:
el: Τώρα προσθέστε αυτές τις δύο γραμμές, κάτω από αυτές που μόλις προσθέσατε:

note: (itstool) path: section/p
en: These lines are similar to the first two, but this time they create a <code>Gtk.Button</code> and add it to <code>main_box</code>. Notice that we are setting the <code>expand</code> argument (the second one) to <code>false</code> here, whereas it was set to <code>true</code> for the <code>Gtk.Image</code>. This will cause the image to take up all available space and the button to take only the space it needs. When you maximize the window, the button size will remain the same, but the image size will increase, taking up all of the rest of the window.
el: Αυτές οι γραμμές είναι παρόμοιες με τις δυο πρώτες, αλλά αυτή τη φορά δημιουργούν ένα <code>Gtk.Button</code> και το προσθέτουν στο <code>main_box</code>. Σημειώστε ότι ορίζουμε το όρισμα <code>expand</code> (το δεύτερο) στο <code>false</code> εδώ, ενώ είχε οριστεί σε <code>true</code> για το <code>Gtk.Image</code>. Αυτό θα προκαλέσει στην εικόνα να καλύψει όλο το διαθέσιμο χώρο και το κουμπί να πάρει μόνο όσο χρειάζεται. Όταν μεγιστοποιήσετε το παράθυρο, το μέγεθος των κουμπιών θα παραμείνει το ίδιο, ενώ το μέγεθος της εικόνας θα αυξηθεί, καταλαμβάνοντας όλο το υπόλοιπο παράθυρο.

note: (itstool) path: section/p
en: Finally, we must change the <code>this.window.show ();</code> line to read:
el: Τελικά, πρέπει να αλλάξουμε τη γραμμή <code>this.window.show ();</code> για να διαβάσει:

note: (itstool) path: section/code
en: this.window.show_all ();
el: this.window.show_all ()·

note: (itstool) path: section/p
en: This will show the child of the Gtk window, and all of its children, and its children's children, and so on. (Remember that Gtk widgets are all hidden by default.)
el: Αυτό θα εμφανίσει το θυγατρικό του παραθύρου Gtk και όλα τα θυγατρικά του και τα θυγατρικά των θυγατρικών του κ.ο.κ. (Να θυμάστε ότι τα γραφικά στοιχεία Gtk κρύβονται όλα από προεπιλογή)

note: (itstool) path: section/title
en: Loading the image: Connecting to the button's <code>clicked</code> signal
el: Φόρτωση της εικόνας: Σύνδεση στο σήμα του κουμπιού <code>clicked</code>

note: (itstool) path: section/p
en: When the user clicks on the <gui>Open</gui> button, a dialog should appear so that the user can choose a picture. Once chosen, the picture should be loaded and shown in the image widget.
el: Όταν ο χρήστης πατήσει στο κουμπί <gui>άνοιγμα</gui>, ένας διάλογος θα εμφανιστεί έτσι ώστε ο χρήστης να διαλέξει μια εικόνα. Μόλις διαλέξει, η εικόνα θα φορτωθεί και θα εμφανιστεί στο γραφικό στοιχείο της εικόνας.

note: (itstool) path: section/p
en: The first step is to connect the <code>clicked</code> signal of the button to a signal handler function, which we call <code>_openClicked</code>. Put this code immediately after the <code>var open_button = new Gtk.Button</code> line where the button was created:
el: Το πρώτο βήμα είναι να συνδέσουμε το σήμα <code>clicked</code> του κουμπιού με μια συνάρτηση χειριστή σημάτων, την οποία καλούμε με <code>_openClicked</code>. Βάλτε αυτόν τον κώδικα αμέσως μετά την γραμμή <code>var open_button = new Gtk.Button</code> όπου το κουμπί δημιουργήθηκε:

note: (itstool) path: section/p
en: We are using the <em>Lang</em> JavaScript helper here. It allows us to connect a <em>class method</em> to the signal, rather than a plain function (without a class) which we had used before for the window's <code>hide</code> signal. Don't worry about this for now, it's just a technical detail. For it to work, you also need to put the following line at the top of the file:
el: Χρησιμοποιούμε τον βοηθό <em>Lang</em> JavaScript εδώ. Επιτρέπει τη σύνδεση μιας <em>μεθόδου κλάσης</em> με το σήμα, αντί για απλή συνάρτηση (χωρίς κλάση) που χρησιμοποιήσαμε πριν για το σήμα του παραθύρου <code>hide</code>. Μην ανησυχείτε για αυτό για τώρα, είναι απλά μια τεχνική λεπτομέρεια. Για να δουλέψει χρειαζόσαστε επίσης να βάλετε την παρακάτω γραμμή στην κορυφή του αρχείου:

note: (itstool) path: section/code
en: const Lang = imports.lang;
el: const Lang = imports.lang·

note: (itstool) path: section/title
en: Loading the image: Writing the signal's callback
el: Φόρτωση της εικόνας: Γράφοντας την επανάκληση του σήματος

note: (itstool) path: section/p
en: Now we can create the <code>_openClicked()</code> method. Insert the following into the <code>ImageViewer.prototype</code> code block, after the <code>_init</code> method (and not forgetting the comma):
el: Τώρα μπορούμε να δημιουργήσουμε τη μέθοδο <code>_openClicked()</code>. Εισάγετε τα ακόλουθα στην ομάδα κώδικα <code>ImageViewer.prototype</code>, μετά τη μέθοδο <code>_init</code> (και μη ξεχάσετε το κόμμα):

note: (itstool) path: item/p
en: The line beginning with <code>var chooser</code> creates an <gui>Open</gui> dialog, which the user can use to choose files. We set four properties: the title of the dialog; the action (type) of the dialog (it's an "open" dialog, but we could have used <code>SAVE</code> if the intention was to save a file; <code>transient_for</code>, which sets the parent window of the dialog; and <code>modal</code> which, if set to <code>true</code>, prevents the user from clicking on another area of the application until the dialog is closed.
el: Η γραμμή που ξεκινάει με <code>var chooser</code> δημιουργεί έναν διάλογο <gui>ανοίγματος</gui>, τον οποίο ο χρήστης μπορεί να χρησιμοποιήσει για επιλογή αρχείων. Ορίζουμε τέσσερις ιδιότητες: τον τίτλο του διαλόγου· την ενέργεια (τύπο) του διαλόγου (είναι διάλογος "open", αλλά θα μπορούσαμε να χρησιμοποιήσουμε <code>SAVE</code> αν η πρόθεση ήταν να αποθηκεύσουμε ένα αρχείο· <code>transient_for</code>, που ορίζει το ανιόν παράθυρο του διαλόγου· και <code>modal</code> που, εάν οριστεί <code>true</code>, αποτρέπει το χρήστη από κλικ σε μια άλλη περιοχή της εφαρμογής μέχρι το κλείσιμο του διαλόγου.

note: (itstool) path: item/p
en: The next two lines add <gui>Cancel</gui> and <gui>Open</gui> buttons to the dialog. The second argument of the <code>add_button</code> method is the (integer) value that is returned when the button is pressed: 0 for <gui>Cancel</gui> and 1 for <gui>Open</gui>.
el: Οι επόμενες δύο γραμμές προσθέτουν τα κουμπιά <gui>Cancel</gui> και <gui>Open</gui> στο διάλογο. Το δεύτερο όρισμα της μεθόδου του <code>add_button</code> είναι η (ακέραιη) τιμή που επιστρέφει όταν πατιέται το κουμπί: 0 για το <gui>Ακύρωση</gui> και 1 για το <gui>Άνοιγμα</gui>.

note: (itstool) path: item/p
en: <code>set_default_response</code> determines the button that will be activated if the user double-clicks a file or presses <key>Enter</key>. In our case, we are using the <gui>Open</gui> button as default (which has the value 1).
el: To <code>set_default_response</code> καθορίζει ποιο κουμπί θα ενεργοποιηθεί όταν ο χρήστης επιλέξει ένα αρχείο με διπλό κλικ ή πατήσει <key>Enter</key>. Στην περίπτωση μας, χρησιμοποιούμε το κουμπί <gui>Άνοιγμα</gui> σαν προεπιλεγμένο (το οποίο έχει τιμή 1).

note: (itstool) path: item/p
en: The next three lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <code>Gtk.Image</code>. A filter object is created first; we then add all kinds of files supported by <code>Gdk.Pixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
el: Οι επόμενες τρεις γραμμές περιορίζουν το διάλογο <gui>Άνοιγμα</gui> να εμφανίζει μόνο αρχεία που μπορούν να ανοιχθούν από το <code>Gtk.Image</code>. Δημιουργούμε πρώτα ένα αντικείμενο φίλτρου· προσθέτουμε στο φίλτρο όλων των ειδών αρχεία που υποστηρίζονται από το <code>Gdk.Pixbuf</code> (το οποίο περιέχει τα περισσότερα είδη εικόνων όπως PNG και JPEG). Τέλος, καθορίζουμε το φίλτρο να είναι το φίλτρο του διαλόγου <gui>Άνοιγμα</gui>.

note: (itstool) path: item/p
en: <code>chooser.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>chooser.run</code> will return the value <output>1</output> (it would return <output>0</output> if the user clicked <gui>Cancel</gui>). The <code>if</code> statement tests for this.
el: Το <code>dialog.run</code> εμφανίζει το διάλογο <gui>άνοιγμα</gui>. Ο διάλογος θα περιμένει τον χρήστη να διαλέξει μια εικόνα· όταν διαλέξει, το <code>chooser.run</code> θα επιστρέψει την τιμή <output>1</output> (θα επιστρέψει <output>0</output> αν ο χρήστης πατήσει <gui>ακύρωση</gui>). Η πρόταση <code>if</code> το ελέγχει.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next line sets the <code>file</code> property of the <code>Gtk.Image</code> to the filename of the image selected by the user. The <code>Gtk.Image</code> will then load and display the chosen image.
el: Αν υποθέσουμε ότι ο χρήστης πάτησε το <gui>Άνοιγμα</gui>, η επόμενη γραμμή ορίζει την ιδιότητα <code>file</code> του <code>Gtk.Image</code> στο όνομα του αρχείου εικόνας που επέλεξε ο χρήστης. Το <code>Gtk.Image</code> θα φορτώσει και θα εμφανίσει την επιλεγμένη εικόνα.

note: (itstool) path: item/p
en: In the final line of this method, we destroy the <gui>Open</gui> dialog because we don't need it any more.
el: Στην τελευταία γραμμή αυτής της μεθόδου, καταστρέφουμε τον διάλογο <gui>άνοιγμα</gui> γιατί δεν τον χρειαζόμαστε πια.

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. That should be it; a fully-functioning image viewer (and a whistlestop tour of JavaScript and Gtk) in not much time at all!
el: Όλος ο κώδικας που χρειάζεστε πρέπει να είναι τώρα στη θέση του, οπότε δοκιμάστε την εκτέλεση του κώδικα. Αυτό ήτανε· ένας πλήρως λειτουργικός προβολέας εικόνων (και μια περιήγηση του JavaScript και Gtk) σε ελάχιστο χρόνο!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.js">reference code</link>.
el: Αν αντιμετωπίσετε πρόβλημα με το μάθημα, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="image-viewer/image-viewer.js">κώδικα αναφοράς</link>.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (Python)
el: Προβολέας εικόνων (Python)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" application - write an image viewer in GTK.
el: Μια λίγο περισσότερο από απλή εφαρμογή σαν το "Γεια σου κόσμε" - γράψτε έναν προβολέα εικόνων σε GTK.

note: (itstool) path: item/p
en: Write a basic GTK user interface in Python
el: Γράψετε μια βασική διεπαφή χρήστη GTK σε Python

note: (itstool) path: item/p
en: Basic knowledge of the python programming language
el: Βασική γνώση της γλώσσας προγραμματισμού Python

note: (itstool) path: item/p
en: Choose <gui>PyGTK (automake)</gui> from the <gui>Python</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
el: Επιλέξτε <gui>PyGTK (automake)</gui> από την καρτέλα <gui>Python</gui>, πατήστε <gui>συνέχεια</gui>, και συμπληρώστε τις λεπτομέρειες σας στις επόμενες λίγες σελίδες. Χρησιμοποιήστε το <file>image-viewer</file> ως όνομα του έργου και του καταλόγου.

note: (itstool) path: item/p
en: Be sure to disable <gui>Use GtkBuilder for user interface</gui> as we will build the user interface manually in this example. For an example of using the interface designer, check the <link xref="guitar-tuner.py">Guitar-Tuner demo</link>.
el: Βεβαιωθείτε ότι απενεργοποιήσατε το <gui>χρήση του GtkBuilder για διεπαφή χρήση</gui> επειδή θα φτιάξουμε τη διεπαφή χρήστη χειροκίνητα σε αυτό το παράδειγμα. Για ένα παράδειγμα χρήσης του σχεδιαστή διεπαφής, δείτε το <link xref="guitar-tuner.py">επίδειξη ρυθμιστή κιθάρας</link>.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/image_viewer.py</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
el: Πατήστε <gui>εφαρμογή</gui> και το έργο θα δημιουργηθεί για εσάς. Ανοίξτε το <file>src/image_viewer.py</file> από τις καρτέλες <gui>έργο</gui> ή <gui>αρχείο</gui>. Περιλαμβάνει πολύ βασικό παράδειγμα κώδικα.

note: (itstool) path: section/p
en: Let's see what a very basic Gtk application looks like in Python:
el: Για να δούμε πως φαίνεται μια πολύ βασική εφαρμογή Gtk σε Python:

note: (itstool) path: item/p
en: In the <code>__init__</code> method of the <code>GUI</code> class creates an (empty) <code>Gtk.Window</code>, sets its title and then connects a signal to quit the application once the window is closed. That's pretty simple overall, more on signals later.
el: Η μέθοδος <code>__init__</code> της κλάσης <code>GUI</code> δημιουργεί ένα (άδειο) <code>Gtk.Window</code>, ορίζει τον τίτλο του και μετά συνδέει ένα σήμα να τερματίζει την εφαρμογή όταν το παράθυρο κλείσει. Είναι πολύ απλό, περισσότερα για τα σήματα αργότερα.

note: (itstool) path: item/p
en: Next, <code>destroy</code> is defined which just quits the application. It is called by the <code>destroy</code> signal connected above.
el: Μετά, ορίζουμε το <code>destroy</code> το οποίο απλά θα τερματίσει την εφαρμογή. Καλείται από το σήμα <code>destroy</code> που συνδέσατε παραπάνω.

note: (itstool) path: item/p
en: The rest of the file does initialisation for Gtk and displays the GUI.
el: Το υπόλοιπο του αρχείου κάνει αρχικοποίηση για το Gtk και εμφανίζει το GUI.

note: (itstool) path: section/p
en: This code is ready to run, so try it using <guiseq><gui>Run</gui><gui>Execute</gui></guiseq>. It should show you an empty window.
el: Ο κώδικας είναι έτοιμος να εκτελεστεί, οπότε δοκιμάστε το πατώντας <guiseq><gui>τρέξιμο</gui><gui>Εκτέλεση</gui></guiseq>. Θα πρέπει να εμφανίσει ένα άδειο παράθυρο.

note: (itstool) path: section/p
en: Let's add the box and widgets to the window. Insert the following code into the <code>__init__</code> method, immediately after the <code>window.connect_after</code> line:
el: Ας προσθέσουμε ένα πλαίσιο και γραφικά στοιχεία στο παράθυρο. Προσθέστε τον παρακάτω κώδικα στη μέθοδο <code>__init__</code>, αμέσως μετά τη γραμμή <code>window.connect_after</code>:

note: (itstool) path: section/p
en: The first line creates a <code>Gtk.Box</code> called <code>box</code> and the following lines set two of its properties: the <code>orientation</code> is set to vertical (so the widgets are arranged in a column), and the <code>spacing</code> between the widgets is set to 5 pixels. The next line then adds the newly-created <code>Gtk.Box</code> to the window.
el: Η πρώτη γραμμή δημιουργεί ένα <code>Gtk.Box</code> που ονομάζεται <code>box</code> και οι επόμενες γραμμές ρυθμίζουν δύο από τις ιδιότητες του: το <code>orientation</code> ρυθμίζεται σε κάθετο (οπότε τα γραφικά στοιχεία τοποθετούνται σε στήλη) και το <code>spacing</code> ανάμεσα στα γραφικά στοιχεία έχει ρυθμιστεί στα 5 εικονοστοιχεία. Η επόμενη γραμμή έπειτα προσθέτει στο παράθυρο το νεοδημιουργημένο <code>Gtk.Box</code>.

note: (itstool) path: section/p
en: To add some widgets to the <code>Gtk.Box</code>, insert the following code directly below the <code>window.add (box)</code> line:
el: Για να προσθέσετε κάποια γραφικά στοιχεία στο <code>Gtk.Box</code>, εισάγετε τον ακόλουθο κώδικα ακριβώς κάτω από την γραμμή <code>window.add (box)</code>:

note: (itstool) path: section/p
en: The first line creates a new <code>Gtk.Image</code> called <code>image</code>, which will be used to display an image file. As we need that later on in the signal handler, we will define it as a class-wide variable. You need to add <code>image = 0</code> to the beginning of the <code>GUI</code> class. Then, the image widget is added (<em>packed</em>) into the <code>box</code> container using GtkBox's <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> method.
el: Η πρώτη γραμμή δημιουργεί ένα καινούργιο <code>Gtk.Image</code> που ονομάζεται <code>image</code>, που θα εμφανίζει ένα αρχείο εικόνας. Καθώς το χρειαζόμαστε αργότερα στο χειριστή σημάτων, θα το ορίσουμε ως μεταβλητή ευρείας κλάσης. Πρέπει να προσθέσετε το <code>image = 0</code> στην αρχή της κλάσης <code>GUI</code>. Έπειτα, το γραφικό στοιχείο της εικόνας προστίθεται (<em>πακετάρεται</em>) στον περιέκτη <code>box</code> χρησιμοποιώντας τη μέθοδο <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> του GtkBox.

note: (itstool) path: section/p
en: <code>pack_start</code> takes 4 arguments: the widget that is to be added to the GtkBox (<code>child</code>); whether the <code>Gtk.Box</code> should grow larger when the new widget is added (<code>expand</code>); whether the new widget should take up all of the extra space created if the <code>Gtk.Box</code> gets bigger (<code>fill</code>); and how much space there should be, in pixels, between the widget and its neighbors inside the <code>Gtk.Box</code> (<code>padding</code>).
el: Το <code>pack_start</code> παίρνει 4 παραμέτρους: το γραφικό στοιχείο που θα προστεθεί στο GtkBox (<code>child</code>)· αν το <code>Gtk.Box</code> πρέπει να μεγαλώσει όταν προστεθεί νέο γραφικό στοιχείο (<code>expand</code>)· αν το νέο γραφικό στοιχείο θα έπρεπε να καλύψει όλο τον δημιουργημένο επιπλέον χώρο αν μεγαλώσει το <code>Gtk.Box</code> (<code>fill</code>)· και πόσος χώρος πρέπει να υπάρχει, σε εικονοστοιχεία, ανάμεσα στο γραφικό στοιχείο και στους γείτονές του μέσα στο <code>Gtk.Box</code>, (<code>padding</code>).

note: (itstool) path: section/p
en: These lines are similar to the first two, but this time they create a <code>Gtk.Button</code> and add it to <code>box</code>. Notice that we are setting the <code>expand</code> argument (the second one) to <code>False</code> here, whereas it was set to <code>True</code> for the <code>Gtk.Image</code>. This will cause the image to take up all available space and the button to take only the space it needs. When you maximize the window, the button size will remain the same, but the image size will increase, taking up all of the rest of the window.
el: Αυτές οι γραμμές είναι παρόμοιες με τις δυο πρώτες, αλλά αυτή τη φορά δημιουργούν ένα <code>Gtk.Button</code> και το προσθέτουν στο <code>box</code>. Σημειώστε ότι ορίζουμε την (δεύτερη) παράμετρο, την <code>expand</code> σε <code>False</code>, ενώ είχε οριστεί <code>True</code> για το <code>Gtk.Image</code>. Έτσι η εικόνα θα πάρει όλο το διαθέσιμο χώρο και τα κουμπιά μόνο όσο χρειάζονται. Όταν μεγιστοποιήσεις το παράθυρο, το μέγεθος των κουμπιών θα παραμείνει το ίδιο, ενώ της εικόνας θα αυξηθεί, χρησιμοποιώντας όλο το υπόλοιπο παράθυρο.

note: (itstool) path: section/p
en: When the user clicks on the <gui>Open Image...</gui> button, a dialog should appear so that the user can choose a picture. Once chosen, the picture should be loaded and shown in the image widget.
el: Όταν ο χρήστης πατήσει πάνω στο κουμπί <gui>Άνοιγμα εικόνας…</gui>, ένας διάλογος θα εμφανιστεί ώστε ο χρήστης να διαλέξει μια εικόνα. Μόλις διαλέξει, η εικόνα θα φορτωθεί και θα εμφανιστεί στο αντίστοιχο γραφικό στοιχείο.

note: (itstool) path: section/p
en: The first step is to connect the <code>clicked</code> signal of the button to a signal handler function, which we call <code>on_open_clicked</code>. Put this code immediately after the <code>button = Gtk.Button()</code> line where the button was created:
el: Το πρώτο βήμα είναι να συνδέσουμε το σήμα <code>clicked</code> του κουμπιού με μια συνάρτηση χειριστή σημάτων, την οποία ονομάζουμε <code>on_open_clicked</code>. Βάλτε αυτόν τον κώδικα αμέσως μετά την γραμμή που το κουμπί δημιουργείται <code>button = Gtk.Button()</code>:

note: (itstool) path: section/p
en: This will connect the <code>clicked</code> signal to <code>on_open_clicked</code> method that we will define below.
el: Αυτό θα συνδέσει το σήμα <code>clicked</code> στη μέθοδο <code>on_open_clicked</code> η οποία θα οριστεί παρακάτω.

note: (itstool) path: section/p
en: Now we can create the <code>on_open_clicked</code> method. Insert the following into the <code>GUI</code> class code block, after the <code>__init__</code> method:
el: Τώρα μπορούμε να δημιουργήσουμε τη μέθοδο <code>on_open_clicked</code>. Εισάγετε τα ακόλουθα στη κλάση <code>GUI</code>, μετά τη μέθοδο <code>__init__</code>:

note: (itstool) path: item/p
en: The line beginning with <code>dialog</code> creates an <gui>Open</gui> dialog, which the user can use to choose files. We set three properties: the title of the dialog; the action (type) of the dialog (it's an "open" dialog, but we could have used <code>SAVE</code> if the intention was to save a file; and <code>transient_for</code>, which sets the parent window of the dialog.
el: Η γραμμή που ξεκινάει με <code>dialog</code> δημιουργεί έναν διάλογο <gui>Open</gui>, τον οποίο ο χρήστης χρησιμοποιεί για να διαλέξει αρχεία. Ορίζουμε τρεις ιδιότητες: τον τίτλο του διαλόγου, την ενέργεια (type) του διαλόγου (είναι διάλογος "open", αλλά θα μπορούσαμε να χρησιμοποιήσουμε <code>SAVE</code> αν θέλαμε να αποθηκεύσουμε ένα αρχείο)· και <code>transient_for</code>, όπου ορίζει το γονικό παράθυρο του διαλόγου.

note: (itstool) path: item/p
en: <code>dialog.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the value <output>1</output> (it would return <output>0</output> if the user clicked <gui>Cancel</gui>). The <code>if</code> statement tests for this.
el: Το <code>dialog.run</code> εμφανίζει το διάλογο <gui>Άνοιγμα</gui>. Ο διάλογος θα περιμένει τον χρήστη να διαλέξει μια εικόνα· όταν διαλέξει, το <code>dialog.run</code> θα επιστρέψει την τιμή <output>1</output> (θα επιστρέψει <output>0</output> αν ο χρήστης πατήσει <gui>Ακύρωση</gui>). Ο έλεγχος ροής <code>if</code> ελέγχει για αυτό.

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. That should be it; a fully-functioning image viewer (and a whistlestop tour of Python and Gtk) in not much time at all!
el: Θα πρέπει να έχετε όλον τον κώδικα που χρειάζεστε, οπότε δοκιμάστε να τον εκτελέσετε. Εδώ είναι το τέλος· ένα πλήρες και λειτουργικό πρόγραμμα προβολής εικόνων (και ένας μικρός οδηγός σε Python και Gtk) σε ελάχιστο χρόνο!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.py">reference code</link>.
el: Αν αντιμετωπίσετε πρόβλημα με τον οδηγό, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="image-viewer/image-viewer.py">κώδικα αναφοράς</link>.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (Vala)
el: Προβολέας εικόνων (Vala)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" GTK+ application.
el: Μια λίγο περισσότερο από απλή εφαρμογή GTK+ "Hello world".

note: (itstool) path: synopsis/p
en: In this tutorial you will create an application which opens and displays an image file. You will learn:
el: Σε αυτόν το μάθημα θα φτιάξετε μια εφαρμογή που ανοίγει και εμφανίζει ένα αρχείο εικόνας. Θα μάθετε:

note: (itstool) path: item/p
en: How to set up a basic project using the <link xref="getting-ready">Anjuta IDE</link>.
el: Πώς θα εγκαταστήσετε ένα βασικό έργο χρησιμοποιώντας το <link xref="getting-ready">Anjuta IDE</link>.

note: (itstool) path: item/p
en: How to write a <link href="http://developer.gnome.org/platform-overview/stable/gtk">Gtk application</link> in Vala
el: Πώς θα γράψετε μια <link href="http://developer.gnome.org/platform-overview/stable/gtk">εφαρμογή Gtk</link> στο Vala

note: (itstool) path: item/p
en: Some basic concepts of <link href="http://developer.gnome.org/gobject/stable/">GObject</link> programming
el: Μερικές βασικές έννοιες του προγραμματισμού <link href="http://developer.gnome.org/gobject/stable/">GObject</link>

note: (itstool) path: item/p
en: You may find the <link href="http://valadoc.org/gtk+-3.0/">gtk+-3.0</link> API Reference useful, although it is not necessary to follow the tutorial.
el: Ίσως βρείτε την αναφορά API <link href="http://valadoc.org/gtk+-3.0/">gtk+-3.0</link> χρήσιμη, αν και δεν είναι απαραίτητη η παρακολούθηση του μαθήματος.

note: (itstool) path: item/p
en: From the <gui>Vala</gui> tab choose <gui>GTK+ (Simple)</gui>, click <gui>Continue</gui>, and fill out your details on the next page. Use <file>image-viewer</file> as project name and directory.
el: Από την καρτέλα <gui>Vala</gui> επιλέξτε <gui>GTK+ (απλό)</gui>, πατήστε <gui>συνέχεια</gui> και συμπληρώστε τις λεπτομέρειές σας στην επόμενη σελίδα. Χρησιμοποιήστε το <file>image-viewer</file> ως όνομα του έργου και του καταλόγου.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is unchecked as we will create the UI manually in this tutorial.
el: Βεβαιωθείτε ότι το <gui>χρήση του GtkBuilder για διεπαφή χρήστη</gui> είναι ασημείωτο επειδή θα δημιουργήσουμε την UI χειροκίνητα σε αυτό το μάθημα.

note: (itstool) path: note/p
en: You will learn how to use the interface builder in the <link xref="guitar-tuner.vala">Guitar-Tuner</link> tutorial.
el: Θα μάθετε πώς να χρησιμοποιήσετε τον κατασκευαστή διεπαφής στο μάθημα <link xref="guitar-tuner.vala">ρυθμιστής κιθάρας</link>.

note: (itstool) path: item/p
en: Click <gui>Continue</gui> then <gui>Apply</gui> and the project will be created for you. Open <file>src/image_viewer.vala</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You will see this code:
el: Πατήστε <gui>συνέχεια</gui>, έπειτα <gui>εφαρμογή</gui> και το έργο θα δημιουργηθεί για εσάς. Ανοίξτε το <file>src/image_viewer.vala</file> από τις καρτέλες <gui>έργο</gui> ή <gui>αρχείο</gui>. Θα δείτε αυτόν τον κώδικα:

note: (itstool) path: section/p
en: The code loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:
el: Ο κώδικας φορτώνει ένα (κενό) παράθυρο από το αρχείο περιγραφής διεπαφής χρήστη και το εμφανίζει. Περισσότερες πληροφορίες υπάρχουν πιο κάτω· προσπεράστε αυτή τη λίστα αν καταλαβαίνετε τα βασικά:

note: (itstool) path: item/p
en: The two <code>using</code> lines at the top import namespaces so we don't have to name them explicitly.
el: Οι δύο γραμμές <code>using</code> στην κορυφή εισάγουν τους χώρους ονομάτων, έτσι ώστε να μην έχουμε να ονομαστούν ρητά.

note: (itstool) path: item/p
en: The constructor of the <code>Main</code> class creates a new (empty) window and connects a <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">signal</link> to exit the application when that window is closed.
el: Ο κατασκευαστής της κλάσης <code>Main</code> δημιουργεί ένα νέο (κενό) παράθυρο και συνδέει ένα <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">σήμα</link> για έξοδο από την εφαρμογή, όταν το παράθυρο κλείσει.

note: (itstool) path: item/p
en: The <code>static main</code> function is run by default when you start a Vala application. It calls a few functions which create the <code>Main</code> class, set up and then run the application. The <link href="http://valadoc.org/gtk+-3.0/Gtk.main.html"><code>Gtk.main</code></link> function starts the GTK <link href="http://en.wikipedia.org/wiki/Event_loop">main loop</link>, which runs the user interface and starts listening for events (like clicks and key presses).
el: Η συνάρτηση <code>static main</code> τρέχει από προεπιλογή όταν ξεκινάτε μια εφαρμογή Vala. Καλεί λίγες συναρτήσεις που δημιουργούν την κλάση <code>Main</code>, ρυθμίζουν και μετά τρέχουν την εφαρμογή. Η συνάρτηση <link href="http://valadoc.org/gtk+-3.0/Gtk.main.html"><code>Gtk.main</code></link> ξεκινά την GTK <link href="http://en.wikipedia.org/wiki/Event_loop">κύριος βρόχος</link>, που τρέχει τη διεπαφή χρήστη και ξεκινά ακρόαση των συμβάντων (όπως κλικ και πατήματα πλήκτρου).

note: (itstool) path: section/p
en: Change the <gui>Configuration</gui> to <gui>Default</gui> and then press <gui>Execute</gui> to configure the build directory. You only need to do this once, for the first build.
el: Αλλαγή της <gui>ρύθμισης</gui> σε <gui>προεπιλογή</gui> και τότε πάτημα <gui>εκτέλεση</gui> για ρύθμιση του καταλόγου κατασκευής. Χρειάζεται να το κάνετε μόνο μια φορά, για την πρώτη κατασκευή.

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTK organizes the user interface with <link href="http://www.valadoc.org/gtk+-2.0/Gtk.Container.html"><code>Gtk.Container</code></link>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.html"><code>Gtk.Box</code></link>.
el: Τώρα θα δώσουμε ζωή σε ένα άδειο παράθυρο. Το GTK οργανώνει τη διεπαφή χρήστη με το <link href="http://www.valadoc.org/gtk+-2.0/Gtk.Container.html"><code>Gtk.Container</code></link> που μπορούν να περιέχουν άλλα γραφικά στοιχεία και ακόμα άλλους περιέκτες. Εδώ θα χρησιμοποιήσουμε τον απλούστερο διαθέσιμο περιέκτη, ένα <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.html"><code>Gtk.Box</code></link>.

note: (itstool) path: section/p
en: Add the following lines to the top of the <code>Main</code> class:
el: Προσθέστε τις επόμενες γραμμές στην κορυφή της κλάσης <code>Main</code>:

note: (itstool) path: section/p
en: Now replace the current constructor with the one below:
el: Τώρα αντικαταστήστε τον τρέχοντα κατασκευαστή με τον παρακάτω:

note: (itstool) path: section/code
en: 
    
    public Main () {
    
    	window = new Window ();
    	window.set_title ("Image Viewer in Vala");
    
    	// Set up the UI
    	var box = new Box (Orientation.VERTICAL, 5);
    	var button = new Button.with_label ("Open image");
    	image = new Image ();
    
    	box.pack_start (image, true, true, 0);
    	box.pack_start (button, false, false, 0);
    	window.add (box);
    
    	// Show open dialog when opening a file
    	button.clicked.connect (on_open_image);
    
    	window.show_all ();
    	window.destroy.connect (main_quit);
    }
el: 
    
    public Main () {
    
    	window = new Window ();
    	window.set_title ("Image Viewer in Vala");
    
    	//Ρύθμιση της διεπαφής χρήστη
    	var box = new Box (Orientation.VERTICAL, 5);
    	var button = new Button.with_label ("Open image");
    	image = new Image ();
    
    	box.pack_start (image, true, true, 0);
    	box.pack_start (button, false, false, 0);
    	window.add (box);
    
    	// Εμφάνιση ανοικτού διαλόγου κατά το άνοιγμα αρχείου
    	button.clicked.connect (on_open_image);
    
    	window.show_all ();
    	window.destroy.connect (main_quit);
    }

note: (itstool) path: item/p
en: The first two lines are the parts of the GUI that we will need to access from more than one method. We declare them up here so that they are accessible throughout the class instead of only in the method where they are created.
el: Οι πρώτες δύο γραμμές είναι μέρη του GUI που θα χρειαστούν πρόσβαση από περισσότερες από μία μεθόδους. Τις δηλώνουμε εδώ έτσι ώστε να είναι προσβάσιμες μέσα από την κλάση αντί μόνο από τη μέθοδο όπου δημιουργούνται.

note: (itstool) path: item/p
en: The first lines of the constructor create the empty window. The next lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container.
el: Οι πρώτες γραμμές του κατασκευαστή δημιουργούν το άδειο παράθυρο. Οι επόμενες γραμμές δημιουργούν τα γραφικά στοιχεία που θέλουμε να χρησιμοποιήσουμε: ένα κουμπί για άνοιγμα μιας εικόνας, το ίδιο το γραφικό στοιχείο προβολής της εικόνας και το πλαίσιο που θα χρησιμοποιήσουμε ως περιέκτη.

note: (itstool) path: item/p
en: The calls to <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.pack_start.html"><code>pack_start</code></link> add the two widgets to the box and define their behaviour. The image will expand into any available space whereas the button will just be as big as needed. You will notice that we don't set explicit sizes on the widgets. In GTK this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes. Next, the box is added to the window.
el: Οι κλήσεις στο <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.pack_start.html"><code>pack_start</code></link> προσθέτουν τα δύο γραφικά στοιχεία στο πλαίσιο και ορίζουν τη συμπεριφορά τους. Η εικόνα θα επεκταθεί σε κάθε διαθέσιμο χώρο ενώ το κουμπί θα είναι απλά τόσο μεγάλο όσο χρειάζεται. Θα παρατηρήσετε ότι δεν ορίζουμε ρητά μεγέθη στα γραφικά στοιχεία. Στο GTK αυτό συνήθως δεν χρειάζεται επειδή είναι πιο απλό να έχετε μια διάταξη που φαίνεται καλή με διαφορετικά μεγέθη παραθύρων. Στη συνέχεια, το πλαίσιο προστίθεται στο παράθυρο.

note: (itstool) path: item/p
en: We need to define what happens when the user clicks on the button. GTK uses the concept of <em>signals</em>.
el: Χρειάζεται να ορίσουμε τι συμβαίνει όταν ο χρήστης πατά το κουμπί. Το GTK χρησιμοποιεί την έννοια των <em>σημάτων</em>.

note: (itstool) path: item/p
en: When the <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html">button</link> is clicked, it fires the <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.clicked.html"><code>clicked</code></link> signal, which we can connect to some action (defined in a <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">callback</link> method).
el: Όταν το <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html">κουμπί</link> πατιέται προκαλεί το σήμα <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.clicked.html"><code>clicked</code></link>, που μπορούμε να συνδέσουμε με κάποια ενέργεια (ορισμένη σε μια μέθοδο <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">επανάκλησης</link>).

note: (itstool) path: item/p
en: This is done using the <code>connect</code> method of the button's <code>clicked</code> signal, which in this case tells GTK to call the (yet undefined) <code>on_image_open</code> callback method when the button is clicked. We will define the <em>callback</em> in the next section.
el: Αυτό γίνεται χρησιμοποιώντας τη μέθοδο <code>connect</code> του σήματος του κουμπιού <code>clicked</code>, που σε αυτήν την περίπτωση λέει στο GTK να καλέσει την μέθοδο επανάκλησης (αόριστη ακόμα) <code>on_image_open</code> όταν το κουμπί πατιέται. Θα ορίσουμε την <em>επανάκληση</em> στην επόμενη ενότητα.

note: (itstool) path: item/p
en: In the callback, we need to access the <code>window</code> and <code>image</code> widgets, which is why we defined them as private members at the top of our class.
el: Στην επανάκληση, χρειαζόμαστε να προσπελάσουμε τα γραφικά στοιχεία <code>window</code> και <code>image</code>, γι' αυτό τα ορίζουμε ως ιδιωτικά μέλη στην κορυφή των κλάσεων μας.

note: (itstool) path: item/p
en: The last <code>connect</code> call makes sure that the application exits when the window is closed. The code generated by Anjuta called an <code>on_destroy</code> callback method which called <link href="http://www.valadoc.org/gtk+-2.0/Gtk.main_quit.html"><code>Gtk.main_quit</code></link>, but just connecting our signal to <code>main_quit</code> directly is easier. You can delete the <code>on_destroy</code> method.
el: Η τελευταία κλήση <code>connect</code> βεβαιώνεται ότι η εφαρμογή εξέρχεται όταν το παράθυρο κλείνει. Ο δημιουργούμενος κώδικας από το Anjuta κάλεσε μια μέθοδο επανάκλησης <code>on_destroy</code> που κάλεσε <link href="http://www.valadoc.org/gtk+-2.0/Gtk.main_quit.html"><code>Gtk.main_quit</code></link>, αλλά η σύνδεση του σήματος μας στο <code>main_quit</code> άμεσα είναι ευκολότερη. Μπορείτε να διαγράψετε τη μέθοδο <code>on_destroy</code>.

note: (itstool) path: section/p
en: We will now define the signal handler for the <code>clicked</code> signal for the button we mentioned before. Add this code after the constructor:
el: Θα ορίσουμε τώρα τον χειριστή σήματος για το σήμα <code>clicked</code> για το κουμπί που αναφέραμε πριν. Προσθέστε αυτόν τον κώδικα μετά τον κατασκευαστή:

note: (itstool) path: section/p
en: This is a bit complicated, so let's break it down:
el: Αυτό είναι λίγο πιο περίπλοκο, γιαυτό ας το χωρίσουμε:

note: (itstool) path: note/p
en: A signal handler is a type of callback method that is called when a signal is emitted. Here the terms are used interchangeably.
el: Ένας χειριστής σήματος είναι ένας τύπος της μεθόδου επανάκλησης που καλείται όταν ένα σήμα εκπέμπεται. Εδώ οι όροι χρησιμοποιούνται εναλλακτικά.

note: (itstool) path: item/p
en: The first argument of the callback method is always the widget that sent the signal. Sometimes other arguments related to the signal come after that, but <em>clicked</em> doesn't have any.
el: Το πρώτο όρισμα της μεθόδου επανάκλησης είναι πάντοτε το γραφικό στοιχείο που έστειλε το σήμα. Μερικές φορές άλλα ορίσματα που συνδέονται με το σήμα έρχονται μετά από αυτό, αλλά <em>πατημένο</em> δεν έχει κανένα.

note: (itstool) path: item/p
en: In this case the <code>button</code> sent the <code>clicked</code> signal, which is connected to the <code>on_open_image</code> callback method:
el: Σε αυτήν την περίπτωση το <code>button</code> έστειλε το σήμα <code>clicked</code>, που συνδέεται με τη μέθοδο επανάκλησης <code>on_open_image</code>:

note: (itstool) path: item/p
en: The <code>on_open_image</code> method takes the button that emitted the signal as an argument:
el: Η μέθοδος <code>on_open_image</code> παίρνει το κουμπί που εξέπεμψε το σήμα ως όρισμα:

note: (itstool) path: item/p
en: The next interesting line is where the dialog for choosing the file is created. <link href="http://www.valadoc.org/gtk+-3.0/Gtk.FileChooserDialog.html"><code>FileChooserDialog</code></link>'s constructor takes the title of the dialog, the parent window of the dialog and several options like the number of buttons and their corresponding values.
el: Η επόμενη ενδιαφέρουσα γραμμή είναι όταν ο διάλογος επιλογής του αρχείου δημιουργείται. Το <link href="http://www.valadoc.org/gtk+-3.0/Gtk.FileChooserDialog.html"><code>FileChooserDialog</code></link> του κατασκευαστή παίρνει τον τίτλο του διαλόγου, το ανιόν παράθυρο του διαλόγου και πολλές επιλογές όπως ο αριθμός των κουμπιών και οι αντίστοιχες τιμές τους.

note: (itstool) path: item/p
en: Notice that we are using <link href="http://unstable.valadoc.org/gtk+-3.0/Gtk.Stock.html"><em>stock</em></link> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.
el: Σημειώστε όταν χρησιμοποιούμε τα ονόματα κουμπιών <link href="http://unstable.valadoc.org/gtk+-3.0/Gtk.Stock.html"><em>αποθέματος</em></link> από το Gtk, αντί να γράψουμε χειροκίνητα "ακύρωση" ή "άνοιγμα". Το πλεονέκτημα της χρήσης των ονομάτων αποθέματος είναι ότι οι ετικέτες των κουμπιών θα έχουν ήδη μεταφραστεί στη γλώσσα του χρήστη.

note: (itstool) path: item/p
en: The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <em>GtkImage</em>. GtkImage is a widget which displays an image. A filter object is created first; we then add all kinds of files supported by <link href="http://www.valadoc.org/gdk-pixbuf-2.0/Gdk.Pixbuf.html"><code>Gdk.Pixbuf</code></link> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
el: Οι επόμενες δύο γραμμές περιορίζουν το διάλογο <gui>άνοιγμα</gui> να εμφανίζει μόνο αρχεία που μπορούν να ανοιχθούν από το <em>GtkImage</em>. Το GtkImage είναι ένα γραφικό στοιχείο που εμφανίζει μια εικόνα. Ένα αντικείμενο φίλτρου δημιουργείται πρώτα· έπειτα προσθέτουμε όλα τα είδη των αρχείων που υποστηρίζονται από <link href="http://www.valadoc.org/gdk-pixbuf-2.0/Gdk.Pixbuf.html"><code>Gdk.Pixbuf</code></link>(το οποίο περιλαμβάνει τις περισσότερες μορφές εικόνων όπως PNG και JPEG) στο φίλτρο. Τέλος, ορίζουμε αυτό το φίλτρο να είναι το φίλτρο του διαλόγου <gui>άνοιγμα</gui>.

note: (itstool) path: item/p
en: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.run.html"><code>dialog.run</code></link> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the <link href="http://www.valadoc.org/gtk+-3.0/Gtk.ResponseType.html">ResponseType</link> value <code>ResponseType.ACCEPT</code> (it would return <code>ResponseType.CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.
el: Το <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.run.html"><code>dialog.run</code></link> εμφανίζει το διάλογο <gui>άνοιγμα</gui>. Ο διάλογος θα περιμένει να επιλέξει ο χρήστης μια εικόνα· όταν γίνει το <code>dialog.run</code> θα επιστρέψει την τιμή <link href="http://www.valadoc.org/gtk+-3.0/Gtk.ResponseType.html">ResponseType</link> <code>ResponseType.ACCEPT</code> (θα μπορούσε να επιστρέψει το <code>ResponseType.CANCEL</code> εάν ο χρήστης πατούσε <gui>ακύρωση</gui>). Η πρόταση <code>switch</code> το ελέγχει.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next lines get the filename of the image selected by the user, and tell the <code>GtkImage</code> widget to load and display the selected image.
el: Αν υποθέσουμε ότι ο χρήστης πάτησε το <gui>άνοιγμα</gui>, οι επόμενες γραμμές παίρνουν το όνομα του αρχείου της επιλεγμένης εικόνας από τον χρήστη και λέει στο γραφικό στοιχείο <code>GtkImage</code> να φορτώσει και να εμφανίσει την επιλεγμένη εικόνα.

note: (itstool) path: item/p
en: Destroying automatically hides the dialog.
el: Η αυτόματη καταστροφή κρύβει το διάλογο.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>src/image-viewer</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
el: Εάν δεν το έχετε ήδη κάνει, επιλέξτε την εφαρμογή <file>src/image-viewer</file> στον διάλογο που εμφανίζεται. Τελικά, πατήστε <gui>τρέξιμο</gui> και απολαύστε το!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.vala">reference code</link>.
el: Αν αντιμετωπίσετε πρόβλημα με το μάθημα, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="image-viewer/image-viewer.vala">κώδικα αναφοράς</link>.

note: (itstool) path: item/p
en: Set it up so that when the window opens it is of a specific size to start off with. For example, 200 X 200 pixels.
el: Εγκαταστήστε την έτσι ώστε όταν το παράθυρο ανοίγει να είναι συγκεκριμένου μεγέθους για εκκίνηση. Για παράδειγμα, 200 Χ 200 εικονοστοιχεία.

note: (itstool) path: credit/name
en: GNOME Documentation Team
el: Ομάδα τεκμηρίωσης GNOME

note: (itstool) path: page/title
en: GNOME Developer Platform Demos
el: Παραδείγματα ανάπτυξης πλατφόρμας GNOME

note: (itstool) path: page/p
en: This guide includes a variety of coding examples, such writing an image viewer or weather application. Each demo comes with code that you can try, and explains how each example works. They are a great way to get started with the GNOME developer platform.
el: Αυτός ο οδηγός περιλαμβάνει μια ποικιλία από παραδείγματα κώδικα, όπως η εγγραφή ενός προβολέα εικόνων ή μια εφαρμογή για τον καιρό. Κάθε παράδειγμα διαθέτει κώδικα όπου μπορείτε να τον δοκιμάσετε, και σας επεξηγεί πως λειτουργεί το κάθε παράδειγμα. Αυτά τα παραδείγματα είναι ένας εξαιρετικός τρόπος για να ξεκινήσετε με την πλατφόρμα ανάπτυξης του GNOME.

note: (itstool) path: section/title
en: Pick a Language
el: Επιλέξτε μια γλώσσα

note: (itstool) path: section/p
en: These developer demos are available in a range of programming languages. Pick one to get started:
el: Αυτά τα παραδείγμα είναι διαθέσιμα για μια σειρά από γλώσσες προγραμματισμού. Επιλέξτε μία για να ξεκινήσετε:

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in JavaScript
el: Μαθήματα, δείγματα κώδικα και παραδείγματα πλατφόρμας σε JavaScript

note: (itstool) path: section/title
en: Code samples and tutorials
el: Δείγματα κώδικα και μαθήματα

[ctx: text]
note: (itstool) path: info/title
en: Label (C)
el: Ετικέτα (C)

note: (itstool) path: info/desc
en: A widget which displays text
el: Ένα γραφικό στοιχείο που εμφανίζει κείμενο

note: (itstool) path: page/title (itstool) path: td/p
en: Label
el: Ετικέτα

note: (itstool) path: td/p (itstool) path: page/p
en: A simple label
el: Μια απλή ετικέτα

[ctx: text]
note: (itstool) path: info/title
en: Label (JavaScript)
el: Ετικέτα (JavaScript)

note: (itstool) path: info/desc
en: A label which can contain text
el: Μια ετικέτα που μπορεί να περιέχει κείμενο

note: (itstool) path: page/p
en: A label displaying a friendly message.
el: Μια ετικέτα που εμφανίζει ένα φιλικό μήνυμα.

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const LabelExample = new Lang.Class ({
        Name: 'Label Example',
    
        /* Create the application itself
           This boilerplate code is needed to build any GTK+ application. */
            _init: function () {
                this.application = new Gtk.Application ({
                    application_id: 'org.example.jslabel',
                    flags: Gio.ApplicationFlags.FLAGS_NONE
                });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function () {
            this._window.present ();
        },
    
        // Callback function for 'startup' signal initializes menus and builds the UI
        _onStartup: function () {
            this._buildUI ();
        },
    
    
    
    
        // Build the application's UI
        _buildUI: function () {
    
            // Create the application window
                this._window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                                  window_position: Gtk.WindowPosition.CENTER,
                                                                  title: "Welcome to GNOME",
                                                                  default_height: 100,
                                                                  default_width: 200 });
    
            // Create the label
            this.label = new Gtk.Label ({label: "Hello GNOME!"});
            this._window.add (this.label);
    
                    // Show the window and all child widgets
                    this._window.show_all();
        }
    
    
    });
    
    // Run the application
    let app = new LabelExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const LabelExample = new Lang.Class ({
        Name: 'Label Example',
    
        /* Δημιουργία της εφαρμογής αυτής καθεαυτής
           Αυτός ο κώδικας απαιτείται για τη δόμηση οποιασδήποτε εφαρμογής  GTK+. */
            _init: function () {
                this.application = new Gtk.Application ({
                    application_id: 'org.example.jslabel',
                    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 ();
        },
    
    
    
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function () {
    
            // Δημιουργία του παραθύρου της εφαρμογής
                this._window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                                  window_position: Gtk.WindowPosition.CENTER,
                                                                  title: "Welcome to GNOME",
                                                                  default_height: 100,
                                                                  default_width: 200 });
    
            // Δημιουργία της ετικέτας
            this.label = new Gtk.Label ({label: "Hello GNOME!"});
            this._window.add (this.label);
    
                    // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
                    this._window.show_all();
        }
    
    
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new LabelExample ();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: Label (Python)
el: Ετικέτα (Python)

note: (itstool) path: info/desc
en: A widget that displays a small to medium amount of text
el: Ένα γραφικό στοιχείο που εμφανίζει μια μικρή έως μεσαία ποσότητα κειμένου

note: (itstool) path: section/p
en: Another way to obtain what we have in the example is to create the label as an instance of another class and add it to the instance of <code>MyWindow</code> in the <code>do_activate(self)</code> method:
el: Ένας άλλος τρόπος για να πάρετε ότι έχουμε στο παράδειγμα είναι η δημιουργία της ετικέτας ως ένα στιγμιότυπο μιας άλλης κλάσης και προσθήκη του στο στιγμιότυπο του <code>MyWindow</code> στη μέθοδο <code>do_activate(self)</code>:

note: (itstool) path: note/p
en: The highlighted lines indicate code that is different from the previous snippet.
el: Οι γραμμές που έχουν επισημανθεί υποδεικνύουν των κώδικα που είναι διαφορετικός από το προηγούμενο απόσπασμα κώδικα

note: (itstool) path: section/title
en: Useful methods for a Label widget
el: Χρήσιμες μέθοδοι για γραφικά στοιχεία ετικέτας

note: (itstool) path: note/p
en: An explanation of how to work with strings in GTK+ can be found in <link xref="strings.py"/>.
el: Μια εξήγηση πώς να δουλέψετε με τις συμβολοσειρές σε GTK+ μπορεί να βρεθεί στο <link xref="strings.py"/>.

note: (itstool) path: item/p
en: <code>set_line_wrap(True)</code> breaks lines if the text of the label exceeds the size of the widget.
el: Το <code>set_line_wrap(True)</code> σπάει τις γραμμές εάν το κείμενο της ετικέτας υπερβαίνει το μέγεθος του γραφικού στοιχείου.

note: (itstool) path: item/p
en: <code>set_justify(Gtk.Justification.LEFT)</code> (or <code>Gtk.Justification.RIGHT, Gtk.Justification.CENTER, Gtk.Justification.FILL</code>) sets the alignment of the lines in the text of the label relative to each other. The method has no effect on a single-line label.
el: Το <code>set_justify(Gtk.Justification.LEFT)</code> (ή <code>Gtk.Justification.RIGHT, Gtk.Justification.CENTER, Gtk.Justification.FILL</code>) ορίζει τη στοίχιση των γραμμών στο κείμενο της ετικέτας συγκρινόμενες μεταξύ τους. Η μέθοδος δεν έχει αποτέλεσμα σε ετικέτα μοναδικής γραμμής.

note: (itstool) path: item/p
en: For decorated text we can use <code>set_markup("text")</code>, where <code>"text"</code> is a text in the <link href="http://developer.gnome.org/pango/stable/PangoMarkupFormat.html">Pango Markup Language</link>. An example:
el: Για διακοσμημένο κείμενο μπορούμε να χρησιμοποιήσουμε το <code>set_markup("text")</code>, where <code>"text"</code> που είναι κείμενο στη <link href="http://developer.gnome.org/pango/stable/PangoMarkupFormat.html">γλώσσα σήμανσης Pango</link>. Ένα παράδειγμα:

[ctx: text]
note: (itstool) path: info/title
en: Label (Vala)
el: Ετικέτα (Vala)

note: (itstool) path: license/p
en: This work is licensed under a <_:link-1/>. As a special exception, the copyright holders give you permission to copy, modify, and distribute the example code contained in this documentation under the terms of your choosing, without restriction.
el: Αυτό το έργο έχει αδειοδοτηθεί υπό την <_:link-1/>. Ως ειδική εξαίρεση, οι πνευματικοί ιδιοκτήτες σας επιτρέπουν να αντιγράψετε, να τροποποιήσετε και να διανείμετε τα παραδείγματα κώδικα που περιλαμβάνονται σ' αυτήν την τεκμηρίωση υπό τους όρους της επιλογής σας, χωρίς περιορισμό.

note: (itstool) path: info/desc
en: Legal information.
el: Νομικές πληροφορίες.

note: (itstool) path: page/title
en: License
el: Άδεια

note: (itstool) path: page/p
en: This work is distributed under a CreativeCommons Attribution-Share Alike 3.0 Unported license.
el: Το έργο αυτό διανέμεται υπό την άδεια CreativeCommons Attribution-Share Alike 3.0 Unported.

note: (itstool) path: page/p
en: You are free:
el: Είσαστε ελεύθεροι:

note: (itstool) path: item/title
en: <em>To share</em>
el: <em>Να μοιραστείτε</em>

note: (itstool) path: item/p
en: To copy, distribute and transmit the work.
el: Να αντιγράψετε, να διανείμετε και να μεταφέρετε την εργασία.

note: (itstool) path: item/title
en: <em>To remix</em>
el: <em>Να τροποποιήσετε</em>

note: (itstool) path: item/p
en: To adapt the work.
el: Να προσαρμόσετε την εργασία.

note: (itstool) path: page/p
en: Under the following conditions:
el: Κάτω από τους ακόλουθους όρους:

note: (itstool) path: item/title
en: <em>Attribution</em>
el: <em>Απόδοση</em>

note: (itstool) path: item/p
en: You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
el: Πρέπει να αποδώσετε την εργασία κατά τον καθορισμένο τρόπο από τον συγγραφέα ή αδειοδότη (αλλά όχι με οποιοδήποτε τρόπο που προτείνει ότι υποστηρίζουν εσάς ή τη χρήση της εργασίας).

note: (itstool) path: item/title
en: <em>Share Alike</em>
el: <em>Παρόμοια διανομή</em>

note: (itstool) path: item/p
en: If you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license.
el: Εάν αλλάξετε, μετασχηματίσετε ή δημιουργήσετε με βάση αυτήν την εργασία, μπορείτε να διανείμετε την τελική εργασία κάτω από την ίδια, παρόμοια ή συμβατή άδεια.

note: (itstool) path: page/p
en: For the full text of the license, see the <link href="http://creativecommons.org/licenses/by-sa/3.0/legalcode">CreativeCommons website</link>, or read the full <link href="http://creativecommons.org/licenses/by-sa/3.0/">Commons Deed</link>.
el: Για το πλήρες κείμενο της άδειας, δείτε τον <link href="http://creativecommons.org/licenses/by-sa/3.0/legalcode">ιστότοπο CreativeCommons</link>, ή διαβάστε όλη την <link href="http://creativecommons.org/licenses/by-sa/3.0/">Πράξη Commons</link>.

note: (itstool) path: note/p
en: As a special exception, the copyright holders give you permission to copy, modify, and distribute the example code contained in this documentation under the terms of your choosing, without restriction.
el: Ως ειδική εξαίρεση, οι πνευματικοί ιδιοκτήτες σας επιτρέπουν να αντιγράψετε, να τροποποιήσετε και να διανείμετε τα παραδείγματα κώδικα που περιλαμβάνονται σ' αυτήν την τεκμηρίωση υπό τους όρους της επιλογής σας, χωρίς περιορισμό.

note: (itstool) path: info/desc
en: Create buttons bound to a URL
el: Δημιουργία κουμπιών δεσμευμένων σε μια URL

note: (itstool) path: page/p
en: This button links to the GNOME live webpage.
el: Αυτό το κουμπί συνδέει με την ιστοσελίδα του GNOME.

note: (itstool) path: info/desc
en: A button that links to a web page
el: Ένα κουμπί που συνδέει σε ιστοσελίδα

note: (itstool) path: page/p
en: A button that links to live.gnome.org.
el: Ένα κουμπί που συνδέει με το live.gnome.org.

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const LinkButtonExample = new Lang.Class ({
        Name: 'LinkButton Example',
    
        // Create the application itself
            _init: function () {
            this.application = new Gtk.Application ({
                  application_id: 'org.example.jslinkbutton',
                  flags: Gio.ApplicationFlags.FLAGS_NONE
             });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function () {
            this._window.present ();
        },
    
        // Callback function for 'startup' signal initializes menus and builds the UI
        _onStartup: function () {
            this._buildUI ();
        },
    
        // Build the application's UI
        _buildUI: function () {
    
            // Create the application window
        this._window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                     window_position: Gtk.WindowPosition.CENTER,
                                                     title: "GNOME LinkButton",
                                                     default_height: 50,
                                                     default_width: 250 });
    
            // Create the LinkButton and have it link to live.gnome.org
            this.LinkButton = new Gtk.LinkButton ({label: "Link to GNOME live!",
                                   uri: "http://live.gnome.org"});
            this._window.add (this.LinkButton);
    
        // Show the window and all child widgets
        this._window.show_all();
        },
    });
    
    // Run the application
    let app = new LinkButtonExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const LinkButtonExample = new Lang.Class ({
        Name: 'LinkButton Example',
    
        // Δημιουργία αυτής καθεαυτής της εφαρμογής
            _init: function () {
            this.application = new Gtk.Application ({
                  application_id: 'org.example.jslinkbutton',
                  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 ();
        },
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function () {
    
            // Δημιουργία του παραθύρου της εφαρμογής
        this._window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                     window_position: Gtk.WindowPosition.CENTER,
                                                     title: "GNOME LinkButton",
                                                     default_height: 50,
                                                     default_width: 250 });
    
            // Δημιουργία του κουμπιού συνδέσμου και σύνδεσή του με το live.gnome.org
            this.LinkButton = new Gtk.LinkButton ({label: "Link to GNOME live!",
                                   uri: "http://live.gnome.org"});
            this._window.add (this.LinkButton);
    
        // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
        this._window.show_all();
        },
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new LinkButtonExample ();
    app.application.run (ARGV);

note: (itstool) path: info/desc
en: A button bound to an URL
el: Ένα κουμπί δεσμευμένο σε μια διεύθυνση (URL)

note: (itstool) path: page/p
en: A button that links to a web page.
el: Ένα κουμπί που συνδέει σε ιστοσελίδα.

note: (itstool) path: section/title
en: Useful methods for a LinkButton widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο LinkButton

note: (itstool) path: item/p
en: <code>get_visited()</code> returns the 'visited' state (<code>True</code> or <code>False</code>) of the URI where the LinkButton points. The button becomes visited when it is clicked.
el: <code>get_visited()</code> επιστρέφει την κατάσταση 'visited' (<code>True</code> ή <code>False</code>) του URI όπου τα σημεία LinkButton. Το κουμπί γίνεται αναγνωσμένο όταν πατιέται.

note: (itstool) path: item/p
en: <code>set_visited(True)</code> sets the 'visited' state of the URI where the LinkButton points as <code>True</code> (analogously for <code>False</code>).
el: <code>set_visited(True)</code> ορίζει την κατάσταση 'visited' του URI όπου τα σημεία LinkButton ως <code>True</code> (ανάλογα για <code>False</code>).

note: (itstool) path: item/p
en: Each time the button is clicked, the signal <code>"activate-link"</code> is emitted. For an explanation of signals and callback functions, see <link xref="signals-callbacks.py"/>.
el: Κάθε φορά που το κουμπί πατιέται, το σήμα <code>"activate-link"</code> εκπέμπεται. Για μια εξήγηση των σημάτων και των συναρτήσεων επανάκλησης, δείτε <link xref="signals-callbacks.py"/>.

note: (itstool) path: page/p
en: This button links to GNOME live.
el: Αυτό το κουμπί συνδέει με το ζωντανό GNOME.

note: (itstool) path: page/code
en: /* This is the application. */
    public class MyApplication : Gtk.Application {
    	/* Override the 'activate' signal of GLib.Application. */
    	protected override void activate () {
    
    		/* Create the window of this application and child widget and show all the things. */
    		var window = new Gtk.ApplicationWindow (this);
    		window.set_default_size (250, 50);
    		window.title = "GNOME LinkButton";
    
    		var linkbutton = new Gtk.LinkButton.with_label ("http://live.gnome.org", "Link to GNOME live!");
    
    		window.add (linkbutton);
    		window.show_all ();
    	}
    }
    
    /* main creates and runs the application. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
el: /* Αυτή είναι η εφαρμογή. */
    public class MyApplication : Gtk.Application {
    	/* Αντικατάσταση τιυ σήματος 'activate' της GLib.Application. */
    	protected override void activate () {
    
    		/* Δημιουργία του παραθύρου αυτής της εφαρμογής  και των θυγατρικών γραφικών στοιχείων και εμφάνιση όλων. */
    		var window = new Gtk.ApplicationWindow (this);
    		window.set_default_size (250, 50);
    		window.title = "GNOME LinkButton";
    
    		var linkbutton = new Gtk.LinkButton.with_label ("http://live.gnome.org", "Link to GNOME live!");
    
    		window.add (linkbutton);
    		window.show_all ();
    	}
    }
    
    /* Η κύρια δημιουργεί και εκτελεί την εφαρμογή . */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

[ctx: text]
note: (itstool) path: info/title
en: Magic mirror (Vala)
el: Μαγικός καθρέπτης (Vala)

note: (itstool) path: info/desc
en: Use your webcam as a mirror using the GStreamer framework and GTK+
el: Χρήση της κάμερας σας ως καθρέφτη χρησιμοποιώντας τον σκελετό GStreamer και GTK+

note: (itstool) path: page/title
en: Magic mirror
el: Μαγικός καθρέπτης

note: (itstool) path: synopsis/p
en: <em>Your mirror just fell off the wall and broke into a thousand pieces — but you need a mirror to shave your beard off or add some makeup! You only have 15 minutes left before catching the bus to work. So what can you do?</em>
el: <em>Ο καθρέφτης σας μόλις έπεσε από τον τοίχο και έσπασε σε χίλια κομμάτια - αλλά χρειάζεται ένας καθρέπτης να ξυρίσετε τη γενειάδα σας και να προσθέσετε κάποια καλλυντικά! Σας απομένουν 15 λεπτά πριν να προλάβετε το λεωφορείο για τη δουλειά. Τι μπορείτε να κάνετε;</em>

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to make a program which lets you use your webcam as a mirror. You will learn how to:
el: Σε αυτόν τον οδηγό, θα φτιάξουμε ένα πρόγραμμα που επιτρέπει τη χρήση της ιστοκάμεράς σας ως καθρέπτη. Θα μάθετε πώς να:

note: (itstool) path: item/p
en: Create a GTK+ application
el: Δημιουργήσετε μια εφαρμογή σε GTK+

note: (itstool) path: item/p
en: Access your webcam using GStreamer and embed the result into a window
el: Έχετε πρόσβαση στην ιστοκάμερά σας χρησιμοποιώντας GStreamer και πως να ενσωματώνετε το αποτέλεσμα σε ένα παράθυρο

note: (itstool) path: item/p
en: Grab photos off your webcam
el: Πάρετε φωτογραφίες με την ιστοκάμεράς σας

note: (itstool) path: item/p
en: Installed copies of GTK, GStreamer, and a Vala compiler
el: Εγκατεστημένα αντίγραφα του GTK, GStreamer και ένα μεταγλωττιστή Vala

note: (itstool) path: item/p
en: Basic knowledge of an object-oriented programming language
el: Βασική γνώση μιας αντικειμενοστραφούς γλώσσας προγραμματισμού

note: (itstool) path: item/p
en: Choose <gui>GTK+ (simple)</gui> from the <gui>Vala</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>magic-mirror</file> as project name and directory.
el: Επιλέξτε <gui>GTK+ (απλό)</gui> από την καρτέλα <gui>Vala</gui>, πατήστε <gui>μπροστά</gui> και συμπληρώστε τις λεπτομέρειές σας στις επόμενες σελίδες. Χρησιμοποιήστε ως όνομα του έργου και του καταλόγου το <file>magic-mirror</file>.

note: (itstool) path: item/p
en: Disable <gui>Use GtkBuilder for user interface</gui> as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.vala">Guitar-Tuner</link> tutorial using the interface builder.
el: Απενεργοποιήστε το <gui>Χρήση του GtkBuilder για διεπαφή χρήση</gui> επειδή θα φτιάξουμε τη διεπαφή χρήστη χειροκίνητα σε αυτό το παράδειγμα. Σημειώστε το μάθημα <link xref="guitar-tuner.vala">ρυθμιστής κιθάρας</link> χρησιμοποιώντας τον κατασκευαστή διεπαφής.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is selected. On the next page, select <em>gstreamer-0.10</em> from the list to include the <app>GStreamer</app> library into your project.
el: Βεβαιωθείτε ότι το <gui>ρύθμιση εξωτερικών πακέτων</gui> επιλέχτηκε. Στην επόμενη σελίδα, επιλέξτε <em>gstreamer-0.10</em> από τη λίστα για συμπερίληψη της βιβλιοθήκης <app>GStreamer</app> στο έργο σας.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/magic_mirror.vala</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
el: Πατήστε <gui>εφαρμογή</gui> και το έργο θα δημιουργηθεί. Ανοίξτε <file>src/magic_mirror.vala</file> από τις καρτέλες <gui>έργο</gui> ή <gui>αρχείο</gui>. Θα πρέπει να δείτε κάποιο κώδικα που ξεκινά με τις γραμμές:

note: (itstool) path: section/p
en: The code loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:
el: Ο κώδικας φορτώνει ένα (κενό) παράθυρο και το εμφανίζει. Περισσότερες πληροφορίες υπάρχουν πιο κάτω· προσπεράστε αυτή τη λίστα αν καταλαβαίνετε τα βασικά:

note: (itstool) path: item/p
en: The constructor of the <code>Main</code> class creates a new window and sets its title. Afterwards the window is shown and a signal is connected which quits the application if the window is closed. More on signals later on.
el: Ο κατασκευαστής της κλάσης <code>Main</code> δημιουργεί ένα νέο παράθυρο και ορίζει τον τίτλο του. Κατόπιν εμφανίζεται το παράθυρο και ένα σήμα συνδέεται που εγκαταλείπει την εφαρμογή, εάν το παράθυρο κλείσει. Περισσότερα για τα σήματα αργότερα.

note: (itstool) path: item/p
en: The static <code>main</code> function is run by default when you start a Vala application. It calls a few functions which create the Main class, set up and then run the application. The <code>Gtk.Main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).
el: Η στατική συνάρτηση <code>main</code> τρέχει από προεπιλογή όταν ξεκινάτε μια εφαρμογή Vala. Καλεί λίγες συναρτήσεις που δημιουργούν την κύρια κλάση, ρυθμίζουν και έπειτα εκτελούν την εφαρμογή. Η συνάρτηση <code>Gtk.Main</code> ξεκινά τον κύριο βρόχο του GTK, που εκτελεί τη διεπαφή χρήστη και ξεκινά την ακρόαση για συμβάντα (όπως κλικ και πατήματα πλήκτρου).

note: (itstool) path: section/title
en: Access the webcam video stream with GStreamer
el: Πρόσβαση στη ροή βίντεο της κάμερας web με το GStreamer

note: (itstool) path: section/p
en: The GStreamer multimedia framework is able to handle video from webcams. Let's add GStreamer to our application and so we can access the video stream.
el: Ο σκελετός πολυμέσων GStreamer είναι ικανός στο χειρισμό βίντεο από ιστοκάμερες. Ας προσθέσουμε το GStreamer στην εφαρμογή μας και έτσι μπορούμε να προσπελάσουμε το ρεύμα βίντεο.

note: (itstool) path: item/p
en: First we remove the window we created before because GStreamer will take care of showing the picture on screen.
el: Πρώτα ας αφαιρέσουμε το παράθυρο που δημιουργήσαμε πριν επειδή το GStreamer θα φροντίσει την εμφάνιση της εικόνας στην οθόνη.

note: (itstool) path: item/p
en: Now we are creating a GStreamer element which accesses our webcam. We are using the Camerabin element, which is an all-in-one camera element and is capable of taking photos, videos, applying effects and much more. Perfect for our use case! With <code>this.camerabin.set_state (Gst.State.PLAYING)</code> we tell the GStreamer pipeline we just created to start playing. Easy, no?
el: Τώρα δημιουργούμε ένα στοιχείο GStreamer που προσπελάζει την ιστοκάμερά μας. Χρησιμοποιούμε το στοιχείο Camerabin, που είναι ένα στοιχείο κάμερας όλα σε ένα και μπορεί να παίρνει φωτογραφίες, βίντεο να εφαρμόζει εφέ και πολύ περισσότερα. Τέλειο για την περίπτωση χρήσης μας! Με τον <code>this.camerabin.set_state (Gst.State.PLAYING)</code> λέμε στη διοχέτευση GStreamer που μόλις δημιουργήσαμε να ξεκινήσει το παίξιμο. Δεν είναι εύκολο;

note: (itstool) path: item/p
en: Of course it is also possible to integrate the video more tighly into other windows but that is an advanced topic that includes some details of the X Window System we will omit here.
el: Φυσικά είναι επίσης δυνατό να ενσωματώσουμε το βίντεο πιο σφικτά στα άλλα παράθυρα, αλλά αυτό είναι προχωρημένο θέμα που περιλαμβάνει μερικές λεπτομέρειες του συστήματος παραθύρου Χ που θα παραλείψουμε εδώ.

note: (itstool) path: item/p
en: Compile and run it again. You will end up with two windows. In the next step we will integrate the video into the GTK+ window.
el: Μεταγλώττιση και τρέξιμο του πάλι. Θα καταλήξετε με δύο παράθυρα. Στο επόμενο βήμα θα ενσωματώσουμε το βίντεο στο παράθυρο GTK+.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="magic-mirror/magic-mirror.vala">reference code</link>. There is also a more <link href="magic-mirror/magic-mirror-advanced.vala">extensive implementation</link> that embeds the window into a regular Gtk.Window which involves some advanced techniques, and adds buttons to start/stop the picture.
el: Εάν έχετε προβλήματα με το μάθημα, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="magic-mirror/magic-mirror.vala">κώδικα αναφοράς</link>. Υπάρχει επίσης μια πιο <link href="magic-mirror/magic-mirror-advanced.vala">εκτεταμένη υλοποίηση</link> που ενσωματώνει το παράθυρο σε ένα κανονικό Gtk.Window που εμπεριέχει μερικές προχωρημένες τεχνικές και προσθέτει κουμπιά για έναρξη/σταμάτημα της εικόνας.

note: (itstool) path: section/p
en: To find out more about the Vala programming language you might want to check out the <link href="http://live.gnome.org/Vala/Tutorial">Vala Tutorial</link>.
el: Για να βρείτε περισσότερα για τη γλώσσα προγραμματισμού Vala ίσως θέλετε να ελέγξετε το <link href="http://live.gnome.org/Vala/Tutorial">μάθημα Vala</link>.

note: (itstool) path: section/title
en: Conclusion
el: Συμπέρασμα

note: (itstool) path: section/p
en: That's it, you have managed to create a full-featured webcam photo application in 15 minutes. Now you can shave your beard off or add some makeup to your beautiful face, right before having a beautiful day at your workplace, where you can impress your friends and colleagues with an awesome application you just made in 15 minutes.
el: Αυτό είναι, κατορθώσατε να δημιουργήσετε μια πλήρη εφαρμογή φωτογραφίας ιστοκάμερας σε 15 λεπτά. Τώρα μπορείτε να ξυριστείτε ή να προσθέσετε καλλυντικά στο όμορφό σας πρόσωπο, ακριβώς πριν να έχετε μια όμορφη ημέρα στη δουλειά σας, όπου μπορείτε να εντυπωσιάσετε τους φίλους σας και συναδέλφους σας με μια φοβερή εφαρμογή που μόλις κάνατε σε 15 λεπτά.

[ctx: text]
note: (itstool) path: info/title
en: MenuBar (C)
el: Γραμμή μενού (C)

note: (itstool) path: info/desc
en: A widget which holds GtkMenuItem widgets
el: Ένα γραφικό στοιχείο που κρατά γραφικά στοιχεία GtkMenuItem

note: (itstool) path: page/p
en: A MenuBar created using XML and GtkBuilder.
el: Μια γραμμή εργαλείων δημιουργήθηκε χρησιμοποιώντας XML και GtkBuilder.

note: (itstool) path: note/p
en: For a more in-depth look at this sample, please do not hesitate to check out the <link xref="menubar.vala">Vala MenuBar</link> and/or <link xref="menubar.py">Python MenuBar</link> tutorials.
el: Για μια πιο βαθιά ματιά σε αυτό το δείγμα, παρακαλώ μην διστάσετε να κοιτάξετε το <link xref="menubar.vala">γραμμή μενού Vala</link> και/ή τα μαθήματα <link xref="menubar.py">γραμμή μενού Python</link>.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/glib/stable/glib-GVariantType.html">GtkVariantType</link>
el: <link href="http://developer.gnome.org/glib/stable/glib-GVariantType.html">GVariantType</link>

note: (itstool) path: page/title
en: MenuBar created using XML and GtkBuilder
el: Μια γραμμή μενού δημιουργήθηκε χρησιμοποιώντας XML και GtkBuilder

note: (itstool) path: section/title
en: Create a MenuBar using XML
el: Δημιουργήστε μια γραμμή μενού χρησιμοποιώντας XML

note: (itstool) path: section/p
en: To create the menubar using XML:
el: Για να δημιουργήσετε μια γραμμή μενού χρησιμοποιώντας XML:

note: (itstool) path: item/p
en: Create <file>menubar.ui</file> using your favorite text editor.
el: Δημιουργήστε <file>menubar.ui</file> χρησιμοποιώντας τον αγαπημένο σας επεξεργαστή κειμένου.

note: (itstool) path: item/p
en: Enter the following line at the top of the file:
el: Εισάγετε την επόμενη γραμμή στην κορυφή του αρχείου:

note: (itstool) path: item/p
en: We want to create the interface which will contain our menubar and its submenus. Our menubar will contain <gui>File</gui>, <gui>Edit</gui>, <gui>Choices</gui> and <gui>Help</gui> submenus. We add the following XML code to the file:
el: Θέλουμε να δημιουργήσουμε τη διεπαφή που θα περιέχει τη γραμμή μενού μας και τα υπομενού της. Η γραμμή μενού μας θα περιέχει τα υπομενού <gui>Αρχείο</gui>, <gui>Επεξεργασία</gui>, <gui>Επιλογές</gui> και <gui>Βοήθεια</gui>. Προσθέτουμε τον ακόλουθο κώδικα XML στο αρχείο:

note: (itstool) path: item/p
en: Now we will create the .py file and use GtkBuilder to import the <file>menubar.ui</file> we just created.
el: Τώρα θα δημιουργήσουμε το αρχείο .py και θα χρησιμοποιήσουμε GtkBuilder για εισαγωγή του <file>menubar.ui</file> που μόλις δημιουργήσαμε.

note: (itstool) path: section/title
en: Add the MenuBar to the window using GtkBuilder
el: Προσθέστε τη MenuBar στο παράθυρο χρησιμοποιώντας GtkBuilder

note: (itstool) path: section/p
en: Now run the python application. It should look like the picture at the top of this page.
el: Τώρα εκτελέστε την εφαρμογή python. Θα πρέπει να μοιάζει με την εικόνα στην κορυφή αυτής της σελίδας.

note: (itstool) path: section/title
en: Add items to the menus
el: Προσθήκη στοιχείων στα μενού

note: (itstool) path: section/p
en: We start off by adding 2 menuitems to the <gui>File</gui> menu: <gui>New</gui> and <gui>Quit</gui>. We do this by adding a <code>section</code> to the the <code>File</code> submenu with these items. The <file>menubar.ui</file> should look like this (lines 6 to 13 inclusive comprise the newly added section):
el: Ξεκινάμε προσθέτοντας 2 στοιχεία μενού στο μενού <gui>αρχείο</gui>: <gui>νέο</gui> και <gui>κλείσιμο</gui>. Τι κάνουμε αυτό προσθέτοντας μια <code>section</code> στο υπομενού <code>File</code> με αυτά τα στοιχεία. Το <file>menubar.ui</file> πρέπει να φαίνεται σαν αυτό (γραμμές 6 έως 13 συμπεριλαμβανόμενης αποτελούν τη νέα ενότητα που προστέθηκε):

note: (itstool) path: section/p
en: Following this pattern, you can now add a <code>Copy</code> and a <code>Paste</code> item to the <code>Edit</code> submenu, and an <code>About</code> item to the <code>Help</code> submenu.
el: Ακολουθώντας αυτό το μοτίβο, μπορείτε τώρα να προσθέσετε ένα στοιχείο <code>Copy</code> και ένα <code>Paste</code> στο υπομενού <code>Edit</code> και ένα στοιχείο <code>About</code> στο υπομενού <code>Help</code>.

note: (itstool) path: section/title
en: Setup actions
el: Εγκατάσταση ενεργειών

note: (itstool) path: section/p
en: We now create the actions for "New" and "Quit" connected to a callback function in the Python file; for instance we create "new" as:
el: Τώρα δημιουργούμε τις ενέργειες για "New" και "Quit" συνδεμένες σε μια συνάρτηση επανάκλησης στο αρχείο Python· για παράδειγμα δημιουργούμε το "new" ως:

note: (itstool) path: section/p
en: And we create the callback function of "new" as
el: Και δημιουργούμε τη συνάρτηση επανάκλησης του "new" ως

note: (itstool) path: section/p
en: Now, in the XML file, we connect the menu items to the actions in the XML file by adding the "action" attribute:
el: Τώρα, στο αρχείο XML, συνδέουμε τα στοιχεία του μενού στις ενέργειες του αρχείου XML προσθέτοντας το γνώρισμα "action":

note: (itstool) path: section/p
en: Note that for an action that is relative to the application, we use the prefix <code>app.</code>; for actions that are relative to the window we use the prefix <code>win.</code>.
el: Σημειώστε ότι για μια ενέργεια που είναι σχετική με την εφαρμογή, χρησιμοποιούμε το πρόθεμα <code>app.</code>· για ενέργειες που είναι σχετικές με το παράθυρο χρησιμοποιούμε το πρόθεμα <code>win.</code>.

note: (itstool) path: section/p
en: Finally, in the Python file, we add the action to the application or to the window - so for instance <code>app.new</code> will be added to the application in the method <code>do_startup(self)</code> as
el: Τελικά, στο αρχείο Python, προσθέτουμε την ενέργεια στην εφαρμογή ή στο παράθυρο - έτσι για παράδειγμα <code>app.new</code> θα προστεθεί στην εφαρμογή στη μέθοδο <code>do_startup(self)</code> ως

note: (itstool) path: section/p
en: See <link xref="signals-callbacks.py"/> for a more detailed explanation of signals and callbacks.
el: Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση των σημάτων και επανακλήσεων.

note: (itstool) path: section/title
en: Actions: Application or Window?
el: Ενέργειες: εφαρμογή ή παράθυρο;

note: (itstool) path: section/p
en: Above, we created the "new" and "open" actions as part of the MyApplication class. Actions which control the application itself, such as "quit" should be created similarly.
el: Πιο πάνω, δημιουργήσαμε τις ενέργειες "new" και "open" ως μέρος της κλάσης MyApplication. Οι ενέργειες που ελέγχουν την ίδια την εφαρμογή, όπως "quit" πρέπει να δημιουργηθούν παρόμοια.

note: (itstool) path: section/p
en: Some actions, such as "copy" and "paste" deal with the window, not the application. Window actions should be created as part of the window class.
el: Μερικές ενέργειες, όπως "copy" και "paste" αντιμετωπίζουν το παράθυρο, όχι την εφαρμογή. Οι ενέργειες παραθύρου πρέπει να δημιουργηθούν ως μέρος της κλάσης παραθύρου.

note: (itstool) path: section/p
en: The complete example files contain both application actions and window actions. The window actions are the ones usually included in the <link xref="gmenu.py">application menu</link> also. It is not good practice to include window actions in the application menu. For demonstration purposes, the complete example files which follow include XML in the UI file which creates the application menu which includes a "New" and "Open" item, and these are hooked up to the same actions as the menubar items of the same name.
el: Τα πλήρη αρχεία του παραδείγματος περιέχουν και τις ενέργειες εφαρμογής και παραθύρου. Οι ενέργειες παραθύρου είναι αυτές που συνήθως συμπεριλαμβάνονται στο <link xref="gmenu.py">μενού εφαρμογής</link>. Δεν είναι καλή πρακτική να συμπεριλαμβάνετε ενέργειες παραθύρου στο μενού της εφαρμογής. Για σκοπούς επίδειξης, τα πλήρη αρχεία του παραδείγματος που ακολουθεί περιέχουν XML στο αρχείο UI που δημιουργεί το μενού εφαρμογής που περιλαμβάνει τα στοιχεία "New" και "Open" και αυτά συνδέονται με τις ίδιες ενέργειες όπως τα στοιχεία της γραμμής μενού του ίδιου ονόματος.

note: (itstool) path: section/title
en: Choices submenu and items with state
el: Επιλογές υπομενού και στοιχείων με κατάσταση

note: (itstool) path: section/p
en: Lines 30 to 80 inclusive of the <link xref="menubar.py#xml-code"/> demonstrate the XML code used to create the UI for <gui>Choices</gui> menu.
el: Οι γραμμές 30 έως 80 συμπεριλαμβανόμενης της εμφάνισης <link xref="menubar.py#xml-code"/> του χρησιμοποιούμενου κώδικα XML για δημιουργία της UI για το μενού <gui>επιλογές</gui>.

note: (itstool) path: section/p
en: The actions created so far are <em>stateless</em>, that is they do not retain or depend on a state given by the action itself. The actions we need to create for the Choices submenu, on the other hand, are <em>stateful</em>. An example of creation of a stateful action is:
el: Οι δημιουργημένες ενέργειες μέχρι εδώ είναι <em>χωρίς κατάσταση</em>, δηλαδή δεν κρατούν ή εξαρτώνται από μια δεδομένη κατάσταση από την ίδια την ενέργεια. Οι ενέργειες που χρειαζόμαστε να δημιουργήσουμε για το υπομενού επιλογών, από την άλλη μεριά, είναι <em>με κατάσταση</em>. Ένα παράδειγμα δημιουργίας μιας ενέργειας με κατάσταση είναι:

note: (itstool) path: section/p
en: where the variables of the method are: name, parameter type (in this case, a string - see <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">here</link> for a complete list of character meanings), initial state (in this case, 'line' - in case of a <code>True</code> boolean value it should be <code>Glib.Variant.new_boolean(True)</code>, and so on, see <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">here</link> for a complete list)
el: όπου οι μεταβλητές της μεθόδου είναι: όνομα, τύπος παραμέτρου (σε αυτήν την περίπτωση, μια συμβολοσειρά - δείτε <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">εδώ</link> για μια πλήρη λίστα σημασιών χαρακτήρα), αρχικής κατάστασης (σε αυτήν την περίπτωση, 'line' - σε περίπτωση μιας <code>True</code> τιμής Μπουλ θα πρέπει να είναι <code>Glib.Variant.new_boolean(True)</code>, κ.ο.κ, δείτε <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">εδώ</link> για μια πλήρη λίστα)

note: (itstool) path: section/p
en: After creating the stateful SimpleAction we connect it to the callback function and we add it to the window (or the application, if it is the case), as before:
el: Μετά τη δημιουργία της SimpleAction με κατάσταση τη συνδέουμε στη συνάρτηση επανάκλησης και την προσθέτουμε στο παράθυρο (ή την εφαρμογή, εάν είναι η περίπτωση), όπως πριν:

note: (itstool) path: section/title
en: Complete XML UI file for this example
el: Πλήρες αρχείο UI XML για αυτό το παράδειγμα

note: (itstool) path: section/title
en: Complete Python file for this example
el: Το πλήρες αρχείο Python για αυτό το παράδειγμα

note: (itstool) path: section/title
en: Mnemonics and Accelerators
el: Μνημονικές και επιταχυντές

note: (itstool) path: section/p
en: Labels may contain mnemonics. Mnemonics are underlined characters in the label, used for keyboard navigation. Mnemonics are created by placing an underscore before the mnemonic character. For example "_File" instead of just "File" in the menubar.ui label attribute.
el: Οι ετικέτες μπορεί να περιέχουν μνημονικούς κανόνες. Οι μνημονικοί είναι υπογραμμισμένοι χαρακτήρες στην ετικέτα, χρησιμοποιούμενοι για περιήγηση πληκτρολογίου. Οι μνημονικοί δημιουργούνται τοποθετώντας μια υπογράμμιση πριν τον μνημονικό χαρακτήρα. Για παράδειγμα "_File" αντί για απλά "File" στο γνώρισμα ετικέτας menubar.ui.

note: (itstool) path: section/p
en: The mnemonics are visible when you press the <key>Alt</key> key. Pressing <keyseq><key>Alt</key><key>F</key></keyseq> will open the <gui>File</gui> menu.
el: Οι μνημονικοί είναι ορατοί όταν πατάτε το πλήκτρο <key>Alt</key>. Πατώντας <keyseq><key>Alt</key><key>F</key></keyseq> θα ανοίξει το μενού <gui>αρχείο</gui>.

note: (itstool) path: section/p
en: Accelerators can be explicitly added in the UI definitions. For example, it is common to be able to quit an application by pressing <keyseq><key>Ctrl</key><key>Q</key></keyseq> or to save a file by pressing <keyseq><key>Ctrl</key><key>S</key></keyseq>. To add an accelerator to the UI definition, you simply need add an "accel" attribute to the item.
el: Οι επιταχυντές μπορούν να προστεθούν ρητά στους ορισμούς UI. Για παράδειγμα, είναι κοινό να μπορείτε να κλείσετε μια εφαρμογή πατώντας <keyseq><key>Ctrl</key><key>Q</key></keyseq> ή να αποθηκεύσετε ένα αρχείο πατώντας <keyseq><key>Ctrl</key><key>S</key></keyseq>. Για την προσθήκη ενός επιταχυντή στον ορισμό της UI, χρειάζεστε απλά να προσθέσετε ένα γνώρισμα "accel" στο στοιχείο.

note: (itstool) path: section/p
en: <code mime="application/xml">&lt;attribute name="accel"&gt;&amp;lt;Primary&amp;gt;q&lt;/attribute&gt;</code> will create the <keyseq><key>Ctrl</key><key>Q</key></keyseq> sequence when added to the <code>Quit</code> label item. Here, "Primary" refers to the <key>Ctrl</key> key on a PC or the <key>⌘</key> key on a Mac.
el: Το <code mime="application/xml">&lt;attribute name="accel"&gt;&amp;lt;Primary&amp;gt;q&lt;/attribute&gt;</code> θα δημιουργήσει την αλληλουχία <keyseq><key>Ctrl</key><key>Q</key></keyseq> όταν προστίθεται στο στοιχείο ετικέτας <code>'Εξοδος</code>. Εδώ, το "Primary" αναφέρεται στο πλήκτρο <key>Ctrl</key> σε ένα προσωπικό υπολογιστή ή στο πλήκτρο <key>⌘</key> σε ένα Mac.

note: (itstool) path: section/title
en: Translatable strings
el: Μεταφράσιμες συμβολοσειρές

note: (itstool) path: section/p
en: Since GNOME applications are being translated into <link href="http://l10n.gnome.org/languages/">many languages</link>, it is important that the strings in your application are translatable. To make a label translatable, simple set <code>translatable="yes"</code>:
el: Επειδή οι εφαρμογές GNOME μεταφράζονται σε <link href="http://l10n.gnome.org/languages/">πολλές γλώσσες</link>, είναι σημαντικό ότι οι συμβολοσειρές στην εφαρμογή σας είναι μεταφράσιμες. Για να κάνετε μια ετικέτα μεταφράσιμη, απλά βάλτε <code>translatable="yes"</code>:

note: (itstool) path: item/p
en: Now we will create the .vala file and use GtkBuilder to import the <file>menubar.ui</file> we just created.
el: Τώρα θα δημιουργήσουμε το αρχείο .vala και θα χρησιμοποιήσουμε GtkBuilder για εισαγωγή του <file>menubar.ui</file> που μόλις δημιουργήσαμε.

note: (itstool) path: section/p
en: Now, compile the vala file, and run it. The application should look like the picture at the top of this page.
el: Τώρα, μεταγλωττίστε το αρχείο vala και εκτελέστε το. Η εφαρμογή θα πρέπει να φαίνεται σαν την εικόνα στην κορυφή αυτής της σελίδας.

note: (itstool) path: section/p
en: Following this pattern, you can now add a <code>Copy</code> and a <code>Paste</code> item to the <code>Edit</code> submenu, and an <code>About</code> item to the <code>Help</code> submenu. We will hold off on adding items to the <link xref="menubar.vala#choices">Choices submenu</link> until further in the tutorial.
el: Ακολουθώντας αυτό το μοτίβο, μπορείτε τώρα να προσθέσετε ένα στοιχείο <code>Copy</code> and μια <code>Paste</code> στο υπομενού <code>Edit</code> και ένα στοιχείο <code>About</code> στο υπομενού <code>Help</code>. Θα καθυστερήσουμε την προσθήκη στοιχείων στο <link xref="menubar.vala#choices">υπομενού επιλογές</link> μέχρι παραπέρα στο μάθημα.

note: (itstool) path: note/p
en: You do not need to recompile the vala program if you only made changes to the UI file. Just run your previously compiled application, and the UI changes will be reflected.
el: Δεν χρειάζεστε ξαναμεταγλώττιση του προγράμματος vala εάν κάνετε αλλαγές μόνο στο αρχείο UI. Απλά εκτελέστε την προηγουμένως μεταγλωττισμένη εφαρμογή και οι αλλαγές UI θα ανακλαστούν.

note: (itstool) path: section/p
en: This is a three step process.
el: Αυτή είναι μια διεργασία τριών βημάτων.

note: (itstool) path: item/p
en: First we create the ActionEntry array in the MyApplication class. An ActionEntry consists of:
el: Πρώτα δημιουργούμε τον πίνακα ActionEntry στην κλάση MyApplication. Μια ActionEntry αποτελείται από:

note: (itstool) path: item/p
en: the "action name" (mandatory)
el: το "action name" (υποχρεωτικό)

note: (itstool) path: item/p
en: the callback function to connect to the "activate" signal of the action (if applicable)
el: τη συνάρτηση επανάκλησης για να συνδέσετε το σήμα "activate" της ενέργειας (εάν γίνεται)

note: (itstool) path: item/p
en: the type of the parameter that must be passed to the activate function for the action (if applicable)
el: τον τύπο της παραμέτρου που πρέπει να περαστεί στην ενεργοποιημένη συνάρτηση για την ενέργεια (εάν γίνεται)

note: (itstool) path: item/p
en: the initial state for this action (if applicable)
el: την αρχική κατάσταση για αυτήν την ενέργεια (εάν γίνεται)

note: (itstool) path: item/p
en: the callback to connect to "change-state" signal (if applicable)
el: την επανάκληση σύνδεσης με το σήμα "change-state" (εάν γίνεται)

note: (itstool) path: item/code
en: 
    const ActionEntry[] actions = {
        { "new", new_cb }, // {"action name", callback_function}
        { "quit", quit_cb }
    };
el: 
    const ActionEntry[] actions = {
        { "new", new_cb }, // {"action name", callback_function}
        { "quit", quit_cb }
    }·

note: (itstool) path: item/p
en: Second, we create the callback functions the actions are connected to.
el: Δεύτερο, δημιουργούμε στις συναρτήσεις επανάκλησης τις ενέργειες που σχετίζονται.

note: (itstool) path: item/p
en: And lastly, we connect the menu items to the actions in the XML file by adding the "action" attribute:
el: Και τελευταία, συνδέουμε τα στοιχεία μενού στις ενέργειες στο αρχείο XML προσθέτοντας το γνώρισμα "action":

note: (itstool) path: section/p
en: Lines 30 to 80 inclusive of the <link xref="menubar.vala#xml-code"/> demonstrate the XML code used to create the UI for <gui>Choices</gui> menu.
el: Γραμμές 30 έως 80 συμπεριλαμβανόμενης της εμφάνισης <link xref="menubar.vala#xml-code"/> του χρησιμοποιούμενου κώδικα XML για δημιουργία της UI για το μενού <gui>επιλογές</gui>.

note: (itstool) path: section/p
en: The complete example files contain both application actions and window applications. The window actions are the ones usually included in the <link xref="gmenu.vala">application menu</link> also. It is not good practice to include window actions in the application menu. For demonstration purposes, the complete example files which follow include XML in the UI file which creates the application menu which includes a "New" and "Open" item, and these are hooked up to the same actions as the menubar items of the same name.
el: Τα πλήρη αρχεία παραδείγματος περιέχουν αμφότερες τις ενέργειες εφαρμογής και παραθύρου. Οι ενέργειες παραθύρου είναι αυτές που συνήθως συμπεριλαμβάνονται στο <link xref="gmenu.vala">μενού εφαρμογής</link>. Δεν είναι καλή πρακτική να συμπεριλαμβάνετε ενέργειες παραθύρου στο μενού της εφαρμογής. Για σκοπούς επίδειξης, τα πλήρη αρχεία του παραδείγματος που ακολουθεί περιέχουν XML στο αρχείο UI που δημιουργεί το μενού εφαρμογής που περιλαμβάνει τα στοιχεία "New" και "Open" και αυτά συνδέονται με τις ίδιες ενέργειες όπως τα στοιχεία της γραμμής μενού του ίδιου ονόματος.

note: (itstool) path: section/title
en: Complete Vala file for this example
el: Πλήρες αρχείο Vala για αυτό το παράδειγμα

note: (itstool) path: section/title
en: Mnemonics
el: Μνημονικά

note: (itstool) path: section/title
en: Accelerators
el: Επιταχυντές

note: (itstool) path: info/desc
en: A widget that shows a menu when clicked on
el: Ένα γραφικό στοιχείο που εμφανίζει ένα μενού όταν πατηθεί

note: (itstool) path: page/p
en: The GtkMenuButton widget is used to display a menu when clicked on. This menu can be provided either as a GtkMenu, or an abstract GMenuModel. The GtkMenuButton widget can hold any valid child widget. That is, it can hold almost any other standard GtkWidget. The most commonly used child is the provided GtkArrow.
el: Το γραφικό στοιχείο GtkMenuButton χρησιμοποιείται για την εμφάνιση ενός μενού όταν πατιέται. Αυτό το μενού μπορεί να δοθεί είτε ως GtkMenu, ή ως ένα αποσπασμένο GMenuModel. Το γραφικό στοιχείο GtkMenuButton μπορεί να κρατήσει οποιοδήποτε θυγατρικό γραφικό στοιχείο. Δηλαδή, μπορεί να κρατήσει σχεδόν κάθε άλλο τυπικό GtkWidget. Το πιο συχνά χρησιμοποιούμενο θυγατρικό είναι το παρεχόμενο GtkArrow.

note: (itstool) path: note/p
en: You need to be running GNOME 3.6 or later for the MenuButton to work.
el: Χρειάζεται να τρέξετε το GNOME 3.6 ή μεταγενέστερο για να δουλέψει το MenuButton.

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const Application = new Lang.Class ({
        Name: 'Application',
    
        //create the application
        _init: function() {
            this.application = new Gtk.Application ({ application_id: 'org.example.myapp',
                                                      flags: Gio.ApplicationFlags.FLAGS_NONE });
    
           //connect to 'activate' and 'startup' signals to the callback functions
           this.application.connect('activate', Lang.bind(this, this._onActivate));
           this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        //create the UI (in this case it's just the ApplicationWindow)
        _buildUI: function() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       window_position: Gtk.WindowPosition.CENTER,
                                                       title: "MenuButton Example" });
            this._window.set_default_size(600, 400);
            this.grid = new Gtk.Grid();
            this._window.add(this.grid);
    
    
            this._menuButton = new Gtk.MenuButton();
            this.grid.attach(this._menuButton, 0, 0, 1, 1 );
            this.menu = new Gtk.Menu.new_from_model(this.menuModel);
    
            this.menu.show();
            this._menuButton.set_menu_model (this.menuModel);
            this._menuButton.set_size_request(80, 35);
            this._menuButton.show();
    
            this._window.show_all();
        },
    
        _showNew: function() {
        print("You clicked \"New\"");
        },
    
        _showAbout: function() {
            print("You clicked \"About\"");
        },
    
        //create the menu items and connect the signals to the callback functions.
        _initMenus: function() {
            let newAction = new Gio.SimpleAction({ name: 'new' });
            newAction.connect('activate', Lang.bind(this,
                function() {
                    this._showNew();
                }));
            this.application.add_action(newAction);
    
            let aboutAction = new Gio.SimpleAction({ name: 'about' });
            aboutAction.connect('activate', Lang.bind(this,
                function() {
                    this._showAbout();
                }));
            this.application.add_action(aboutAction);
    
            let quitAction = new Gio.SimpleAction({ name: 'quit' });
            quitAction.connect('activate', Lang.bind(this,
                function() {
                    this._window.destroy();
                }));
             this.application.add_action(quitAction);
    
            this.menuModel = new Gio.Menu();
    
            this.menuItemNew = Gio.MenuItem.new("New", 'app.new');
            this.menuItemAbout = Gio.MenuItem.new("About", 'app.about');
            this.fileMenuItem = Gio.MenuItem.new("Other", null);
    
            this.menuModel.append_item(this.menuItemNew);
            this.menuModel.append_item(this.menuItemAbout);
    
            //submenu
            this.subMenu = new Gio.Menu();
            this.fileMenuItem.set_submenu(this.subMenu);
            this.menuItemQuit = Gio.MenuItem.new("Quit", 'app.quit');
            this.subMenu.append_item(this.menuItemQuit);
            this.menuModel.append_item(this.fileMenuItem);
        },
    
        //callback function for 'activate' signal
        _onActivate: function() {
            this._window.present();
        },
    
        //callback function for 'startup' signal
        _onStartup: function() {
            //You must call _initMenus() before calling _buildUI().
            this._initMenus();
            this._buildUI();
        }
    });
    
    //run the application
    let app = new Application();
    app.application.run(ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const Application = new Lang.Class ({
        Name: 'Application',
    
        //δημιουργία της εφαρμογής
        _init: function() {
            this.application = new Gtk.Application ({ application_id: 'org.example.myapp',
                                                      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));
        },
    
        //δημιουργία της γραφικής διεπαφής (σε αυτήν την περίπτωση είναι απλά το ApplicationWindow)
        _buildUI: function() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       window_position: Gtk.WindowPosition.CENTER,
                                                       title: "MenuButton Example" });
            this._window.set_default_size(600, 400);
            this.grid = new Gtk.Grid();
            this._window.add(this.grid);
    
    
            this._menuButton = new Gtk.MenuButton();
            this.grid.attach(this._menuButton, 0, 0, 1, 1 );
            this.menu = new Gtk.Menu.new_from_model(this.menuModel);
    
            this.menu.show();
            this._menuButton.set_menu_model (this.menuModel);
            this._menuButton.set_size_request(80, 35);
            this._menuButton.show();
    
            this._window.show_all();
        },
    
        _showNew: function() {
        print("You clicked \"New\"");
        },
    
        _showAbout: function() {
            print("You clicked \"About\"");
        },
    
        //δημιουργία των στοιχείων μενού και σύνδεση των σημάτων με τις συναρτήσεις επανάκλησης.
        _initMenus: function() {
            let newAction = new Gio.SimpleAction({ name: 'new' });
            newAction.connect('activate', Lang.bind(this,
                function() {
                    this._showNew();
                }));
            this.application.add_action(newAction);
    
            let aboutAction = new Gio.SimpleAction({ name: 'about' });
            aboutAction.connect('activate', Lang.bind(this,
                function() {
                    this._showAbout();
                }));
            this.application.add_action(aboutAction);
    
            let quitAction = new Gio.SimpleAction({ name: 'quit' });
            quitAction.connect('activate', Lang.bind(this,
                function() {
                    this._window.destroy();
                }));
             this.application.add_action(quitAction);
    
            this.menuModel = new Gio.Menu();
    
            this.menuItemNew = Gio.MenuItem.new("New", 'app.new');
            this.menuItemAbout = Gio.MenuItem.new("About", 'app.about');
            this.fileMenuItem = Gio.MenuItem.new("Other", null);
    
            this.menuModel.append_item(this.menuItemNew);
            this.menuModel.append_item(this.menuItemAbout);
    
            //submenu
            this.subMenu = new Gio.Menu();
            this.fileMenuItem.set_submenu(this.subMenu);
            this.menuItemQuit = Gio.MenuItem.new("Quit", 'app.quit');
            this.subMenu.append_item(this.menuItemQuit);
            this.menuModel.append_item(this.fileMenuItem);
        },
    
        //συνάρτηση επανάκλησης για το σήμα 'activate'
        _onActivate: function() {
            this._window.present();
        },
    
        //συνάρτηση επανάκλησης για το σήμα 'startup'
        _onStartup: function() {
            //You must call _initMenus() before calling _buildUI().
            this._initMenus();
            this._buildUI();
        }
    });
    
    //εκτέλεση της εφαρμογής
    let app = new Application();
    app.application.run(ARGV);

note: (itstool) path: note/p
en: You need to be running GNOME 3.6 for the MenuButton to work.
el: Χρειάζεται να τρέξετε το GNOME 3.6 για να δουλέψει το MenuButton.

note: (itstool) path: section/title
en: Useful methods for a MenuButton widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο MenuButton

note: (itstool) path: section/p
en: In line 33 the signal <code>"activate"</code> from the action <code>about_action</code> is connected to the callback function <code>about_callback()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 33 το σήμα <code>"activate"</code> από την ενέργεια <code>about_action</code> συνδέεται με τη συνάρτηση επανάκλησης <code>about_callback()</code> χρησιμοποιώντας <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: section/p
en: The positioning of the menu is determined by the "direction" property of the menu button and the "halign" or "valign" properties of the menu. For example, when the direction is <code>Gtk.ArrowType.DOWN</code> (other option: <code>UP</code>) and the horizontal alignment is <code>Gtk.Align.START</code> (other options: <code>CENTER</code> and <code>END</code>), the menu will be positioned below the button, with the starting edge (depending on the text direction) of the menu aligned with the starting edge of the button. If there is not enough space below the button, the menu is popped up above the button instead. If the alignment would move part of the menu offscreen, it is 'pushed in'.
el: Η τοποθέτηση ενός μενού καθορίζεται από την ιδιότητα "direction" του κουμπιού μενού και τις ιδιότητες του μενού "halign" ή "valign". Για παράδειγμα, όταν η κατεύθυνση είναι <code>Gtk.ArrowType.DOWN</code> (άλλη επιλογή: <code>UP</code>) και η οριζόντια στοίχιση είναι <code>Gtk.Align.START</code> (άλλες επιλογές: <code>CENTER</code> και <code>END</code>), το μενού θα τοποθετηθεί κάτω από το κουμπί, με το αρχικό άκρο (ανάλογα με την κατεύθυνση του κειμένου) του μενού στοιχισμένο με το αρχικό άκρο του κουμπιού. Εάν δεν υπάρχει αρκετός χώρος κάτω από το κουμπί, το μενού αναδύεται πάνω από το κουμπί. Εάν η στοίχιση μπορεί να μετακινήσει μέρος του μενού εκτός οθόνης, είναι 'pushed in'.

note: (itstool) path: section/p
en: In the case of vertical alignment, the possible ArrowType directions are <code>LEFT</code> and <code>RIGHT</code> and the vertical alignment is again <code>START</code>, <code>CENTER</code> or <code>END</code>.
el: Στην περίπτωση μιας κάθετης στοίχισης, οι δυνατές κατευθύνσεις είναι <code>LEFT</code> και <code>RIGHT</code> και η κάθετη στοίχιση είναι ξανά <code>START</code>, <code>CENTER</code> ή <code>END</code>.

note: (itstool) path: section/p
en: <code>set_align_widget(alignment)</code> and <code>set_direction(direction)</code> can be used to set these properties.
el: Οι <code>set_align_widget(alignment)</code> and <code>set_direction(direction)</code> μπορούν να χρησιμοποιηθούν για να οριστούν αυτές οι ιδιότητες.

[ctx: text]
note: (itstool) path: info/title
en: Message board (C)
el: Πίνακας μηνύματος (C)

note: (itstool) path: info/desc
en: A simple program using WebKitGTK+ and the DOM.
el: Ένα απλό πρόγραμμα που χρησιμοποιεί WebKitGTK+ και DOM.

note: (itstool) path: page/title
en: Message board
el: Πίνακας μηνύματος

note: (itstool) path: item/p
en: How to display a web page with WebKit.
el: Πώς να εμφανίσετε μια ιστοσελίδα με WebKit.

note: (itstool) path: item/p
en: How to manipulate the contents of a web page using WebKit's DOM functions.
el: Πώς να χειριστείτε τα περιεχόμενα μιας ιστοσελίδας χρησιμοποιώντας τις συναρτήσεις DOM του WebKit.

note: (itstool) path: synopsis/p
en: This tutorial assumes you are familiar with the C programming language and have a basic understanding of GTK+, including how to create and place widgets and how to connect callback functions to signals. See <link xref="image-viewer.c"/> to learn the basics of GTK+.
el: Αυτό το μάθημα υποθέτει εξοικείωση με τη γλώσσα προγραμματισμού C και βασική κατανόηση της GTK+, συμπεριλαμβανόμενης της δημιουργίας και τοποθέτησης γραφικών στοιχείων και της σύνδεσης συναρτήσεων επανάκλησης σε σήματα. Δείτε <link xref="image-viewer.c"/> για να μάθετε τα βασικά του GTK+.

note: (itstool) path: section/p
en: The GNOME platform includes WebKitGTK+, built on top of the powerful WebKit HTML framework. WebKit is used throughout GNOME, not just to view web pages on the Internet, but also to create rich user interfaces that can be easily styled with CSS.
el: Το GNOME περιέχει το WebKitGTK+, κατασκευασμένο πάνω στον ισχυρό σκελετό του WebKit HTML. Το WebKit χρησιμοποιείται μέσα από το GNOME, όχι μόνο για προβολή ιστοσελίδων στο διαδίκτυο, αλλά επίσης για δημιουργία πλούσιων διεπαφών χρήστη που μπορούν εύκολα να μορφοποιηθούν με CSS.

note: (itstool) path: section/p
en: In this tutorial, you will create a simple message board using WebKit. The message board will allow you to enter some text and have it added to a list of messages in HTML. Before you begin, you need to set up a project in Anjuta.
el: Σε αυτό το μάθημα, θα δημιουργήσετε ένα απλό πίνακα μηνύματος χρησιμοποιώντας WebKit. Ο πίνακας μηνύματος θα επιτρέψει την εισαγωγή κάποιου κειμένου και την προσθήκη του σε μια λίστα μηνυμάτων σε HTML. Πριν την εκκίνηση, χρειαζόσαστε να ρυθμίσετε ένα έργο στο Anjuta.

note: (itstool) path: item/p
en: In Anjuta, click <guiseq><gui>File</gui><gui>New</gui> <gui>Project</gui></guiseq> to open the new project assistant.
el: Στο Anjuta, κάντε κλικ στο <guiseq><gui>Αρχείο</gui><gui>Νέο</gui> <gui>Έργο</gui></guiseq> για να ανοίξετε τον νέο βοηθό έργου.

note: (itstool) path: item/p
en: Select <gui>GTK+ (simple)</gui> on the <gui>C</gui> tab, and click <gui>Continue</gui>.
el: Επιλέξτε <gui>GTK+ (απλό)</gui> στην καρτέλα <gui>C</gui> και κλικ <gui>συνέχεια</gui>.

note: (itstool) path: item/p
en: Fill out your details on the <gui>Basic information</gui> page. Use <input>message-board</input> for the project name. Click <gui>Continue</gui>.
el: Συμπληρώστε τις λεπτομέρειές σας στη σελίδα <gui>βασικές πληροφορίες</gui>. Χρησιμοποιήστε <input>πίνακα μηνύματος</input> για το όνομα του έργου. Κλικ <gui>συνέχεια</gui>.

note: (itstool) path: item/p
en: Disable the <gui>Use GtkBuilder for user interface</gui> option as this tutorial builds the user-interface manually.
el: Απενεργοποιήστε την επιλογή <gui>χρήση GtkBuilder για διεπαφή χρήστη</gui> καθώς αυτό το μάθημα κατασκευάζει τη διεπαφή χρήστη χειροκίνητα.

note: (itstool) path: item/p
en: You need to tell Anjuta you're using WebKitGTK+ on this project. On the <gui>Project options</gui> page, select <gui>Configure external packages</gui>. Click <gui>Continue</gui>. On the <gui>Configure external packages</gui> page, check <gui>webkitgtk-3.0</gui>.
el: Πρέπει να πείτε στο Anjuta ότι χρησιμοποιείτε WebKitGTK+ για αυτό το έργο. Στη σελίδα <gui>επιλογές έργου</gui>, επιλέξτε <gui>ρύθμιση εξωτερικών πακέτων</gui>. Κλικ <gui>συνέχεια</gui>. Στη σελίδα <gui>ρύθμιση εξωτερικών πακέτων</gui>, σημειώστε <gui>webkitgtk-3.0</gui>.

note: (itstool) path: section/p
en: After you finish the new project assistant, open the file <file>src/main.c</file> from either the <gui>Project</gui> or the <gui>File</gui> tab. Anjuta will have filled this in with some basic GTK+ code from its templates. Since you are creating a WebKit project, you first need to include the WebKit headers. After the line that includes <code>gtk/gtk.h</code>, add the following line:
el: Αφού τελειώσετε με τον βοηθό του νέου έργου, ανοίξτε το αρχείο <file>src/main.c</file> είτε από το <gui>έργο</gui> ή από την καρτέλα <gui>αρχείο</gui>. Το Anjuta θα το γεμίσει με κάποιο βασικό κώδικα GTK+ από τα πρότυπά του. Αφού δημιουργείτε ένα έργο WebKit, χρειάζεστε πρώτα να συμπεριλάβετε τις κεφαλίδες WebKit. Μετά τη γραμμή που περιέχει <code>gtk/gtk.h</code>, προσθέστε την παρακάτω γραμμή:

note: (itstool) path: section/p
en: Verify that everything works by building what you have so far. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> or just press <keyseq><key>Shift</key><key>F7</key></keyseq>. The first time you build, you will be asked for some configure options. Just accept the defaults and click <gui>Execute</gui>.
el: Επιβεβαιώστε ότι όλα δουλεύουν με την κατασκευή που έχετε κάνει μέχρι τώρα. Κλικ <guiseq><gui>κατασκευή</gui><gui>έργο κατασκευής</gui></guiseq> ή απλά πατήστε <keyseq><key>Shift</key><key>F7</key></keyseq>. Την πρώτη φορά που κατασκευάζετε, θα σας ζητηθεί για κάποιες επιλογές ρύθμισης. Απλά αποδεχτείτε τις προεπιλογές και κλικ <gui>εκτέλεση</gui>.

note: (itstool) path: section/p
en: You should now be able to run the program. Click <guiseq> <gui>Run</gui><gui>Execute</gui></guiseq> or just press <key>F3</key>. You should see an empty window appear.
el: Τώρα θα μπορείτε να τρέξετε το πρόγραμμα. Κάντε κλικ στο <guiseq> <gui>Τρέξιμο</gui><gui>Εκτέλεση</gui></guiseq> ή απλά πατήστε <key>F3</key>. Θα πρέπει να δείτε ένα άδειο παράθυρο.

note: (itstool) path: section/title
en: Lay out your window and web view
el: Διευθέτηση του παραθύρου σας και προβολή ιστού

note: (itstool) path: section/p
en: Now that you can show a window, it's time to start working with WebKit. For this tutorial, you'll create a text entry and a web view and pack them both into a window. Find the function <code>create_window</code> and replace it with the following:
el: Τώρα που μπορείτε να δείτε ένα παράθυρο, είναι καιρός να ξεκινήσετε δουλειά με το WebKit. Για αυτό το μάθημα, θα δημιουργηθεί μια καταχώριση κειμένου και μια προβολή ιστού και πακετάρισμα τους σε ένα παράθυρο. Βρείτε τη συνάρτηση <code>create_window</code> και αντικαταστήστε την με την παρακάτω:

note: (itstool) path: section/p
en: You first create a <code>GtkWindow</code> object and set its title and default size. You also connect the <code>gtk_main_quit</code> function to the <code>delete-event</code> signal. The <code>delete-event</code> signal is emitted when the window is closed. The <code>gtk_main_quit</code> function is part of GTK, and it quits the application.
el: Δημιουργήστε πρώτα ένα αντικείμενο <code>GtkWindow</code> και ορίστε τον τίτλο το προεπιλεγμένο μέγεθος του. Συνδέστε επίσης τη συνάρτηση <code>gtk_main_quit</code> με το σήμα <code>delete-event</code>. Το σήμα <code>delete-event</code> εκπέμπεται όταν το παράθυρο κλείνει. Η συνάρτηση <code>gtk_main_quit</code> είναι τμήμα του GTK και εγκαταλείπει την εφαρμογή.

note: (itstool) path: section/p
en: You then create a vertical box and add it to the window. A window can only hold a single child widget, so you need to use a box to add multiple widgets. The second argument to <code>gtk_box_new</code> sets the amount of padding (in pixels) between each child, and the next line puts a six-pixel border around the entire thing.
el: Έπειτα δημιουργήστε ένα κάθετο πλαίσιο και προσθέστε το στο παράθυρο. Ένα παράθυρο μπορεί να κρατά μόνο ένα μοναδικό θυγατρικό γραφικό στοιχείο, έτσι χρειαζόσαστε τη χρήση ενός πλαισίου για προσθήκη πολλαπλών γραφικών στοιχείων. Το δεύτερο όρισμα στο <code>gtk_box_new</code> ορίζει την ποσότητα συμπλήρωσης (σε εικονοστοιχεία) μεταξύ κάθε θυγατρικού και η επόμενη γραμμή βάζει ένα περίγραμμα έξη εικονοστοιχείων γύρω από όλο το αντικείμενο.

note: (itstool) path: section/p
en: You next create a <code>GtkEntry</code> object and pack it into the box. The third and fourth arguments to <code>gtk_box_pack_start</code> specify that the entry shouldn't take up any extra space the box has available. The fourth argument is the amount of padding you want around the entry. In this case, you set the padding to zero, because you're allowing the box to handle all the padding.
el: Έπειτα δημιουργείστε ένα αντικείμενο <code>GtkEntry</code> και πακετάρετε το στο πλαίσιο. Το τρίτο και τέταρτο όρισμα στο <code>gtk_box_pack_start</code> καθορίζει ότι η καταχώριση δεν θα πρέπει να πάρει επιπλέον χώρο που το πλαίσιο έχει διαθέσιμο. Το τέταρτο όρισμα είναι η ποσότητα συμπλήρωσης που θέλετε γύρω από την καταχώριση. Σε αυτή την περίπτωση, ορίζετε τη συμπλήρωση σε μηδέν, επειδή επιτρέπετε στο πλαίσιο να χειριστεί όλη τη συμπλήρωση.

note: (itstool) path: section/p
en: Before you add a web view, you have to create a scrolled window to put it inside of. The scrolled window will place scrollbars on the right and bottom when necessary, and prevent your web view from filling your entire screen. This time, you pass <code>TRUE</code> and <code>TRUE</code> to <code>gtk_box_pack_start</code> to allow the scrolled window (and thus, the web view) to use any extra space available in the box.
el: Πριν την προσθήκη μιας προβολής ιστού, πρέπει να δημιουργήσετε ένα κυλιόμενο παράθυρο για να μπει μέσα του. Το κυλιόμενο παράθυρο θα τοποθετήσει γραμμές κύλισης στα δεξιά και κάτω όταν χρειάζεται και θα αποτρέψει την προβολή σας ιστού από το γέμισμα όλης της οθόνης. Αυτή τη φορά, περνάτε <code>TRUE</code> και <code>TRUE</code> στο <code>gtk_box_pack_start</code> για να επιτρέψετε στο κυλιόμενο παράθυρο (και συνεπώς στην προβολή ιστού) να χρησιμοποιήσει οποιοδήποτε διαθέσιμο χώρο στο πλαίσιο.

note: (itstool) path: section/p
en: Finally, you create a <code>WebKitWebView</code> and add it to the scrolled window. Then load a very basic HTML page into the web view by calling <code>webkit_web_view_load_string</code> with the following arguments:
el: Τελικά, δημιουργείτε ένα <code>WebKitWebView</code> και το προσθέτετε στο κυλιόμενο παράθυρο. Έπειτα φορτώνετε μια πολύ βασική σελίδα HTML στην προβολή ιστού καλώντας <code>webkit_web_view_load_string</code> με τα παρακάτω ορίσματα:

note: (itstool) path: item/p
en: The view itself. Because <code>view</code> is typed as a <code>GtkWidget*</code>, you have to use <code>WEBKIT_WEB_VIEW</code> to safely cast the object.
el: Η ίδια η προβολή. Επειδή η <code>view</code> πληκτρολογείτε ως <code>GtkWidget</code>, πρέπει να χρησιμοποιήσετε <code>WEBKIT_WEB_VIEW</code> για ασφαλή αλλαγή του αντικειμένου.

note: (itstool) path: item/p
en: The simplest HTML file you could possibly write.
el: Το απλούστερο αρχείο HTML που θα μπορούσατε να γράψετε.

note: (itstool) path: item/p
en: The MIME type of the content you provided. In this case, you're using plain HTML.
el: Ο τύπος MIME του περιεχομένου που δίνετε. Σε αυτήν την περίπτωση, χρησιμοποιείτε απλό HTML.

note: (itstool) path: item/p
en: The character encoding of the content you provided. Although you only used ASCII characters, it's a good idea to specify UTF-8. UTF-8 is used as the default encoding throughout the GNOME platform.
el: Η κωδικοποίηση χαρακτήρα του παρεχόμενου περιεχομένου. Αν και χρησιμοποιείτε μόνο ASCII χαρακτήρες, είναι καλή ο καθορισμός UTF-8. Το UTF-8 χρησιμοποιείται ως η προεπιλεγμένη κωδικοποίηση ολοκληρωτικά στο GNOME.

note: (itstool) path: item/p
en: The base URI. You don't need it in this simple example, but you might want to provide a <sys>file:</sys> URI if you add images or other features where you want to use relative URI references.
el: Η βάση URI. Δεν την χρειαζόσαστε σε αυτό το απλό παράδειγμα, αλλά ίσως θελήσετε να δώσετε ένα <sys>file:</sys> URI εάν προσθέσετε εικόνες ή άλλα χαρακτηριστικά που θέλετε να χρησιμοποιήσετε σχετικές αναφορές URI.

note: (itstool) path: note/p
en: Every time you add a widget, you have to call <code>gtk_widget_show</code> on it for it to be visible. If you call <code>gtk_widget_show_all</code> on a container widget like a <code>GtkBox</code>, GTK+ will automatically show all the widgets inside the container, to any depth. Sometimes you don't want to call <code>gtk_widget_show_all</code>, such as when you want to dynamically hide and show some widgets in response to events.
el: Κάθε φορά που προσθέτετε ένα γραφικό στοιχείο, πρέπει να καλέσετε <code>gtk_widget_show</code> για να γίνει ορατό. Εάν καλέσετε <code>gtk_widget_show_all</code> σε ένα περιέκτη γραφικού στοιχείου όπως <code>GtkBox</code>, το GTK+ θα εμφανίσει αυτόματα όλα τα γραφικά στοιχεία μέσα στον περιέκτη, σε οποιοδήποτε βάθος. Μερικές φορές δεν θέλετε να καλέσετε <code>gtk_widget_show_all</code>, όπως όταν θέλετε να κρύψετε δυναμικά και να εμφανίσετε μερικά γραφικά στοιχεία σε απάντηση συμβάντων.

note: (itstool) path: section/p
en: Finally, you have to call <code>gtk_widget_show_all</code> on the box. Otherwise, none of the widgets you created will be visible. (The window is shown in the <code>main</code> function with <code>gtk_widget_show</code>.)
el: Τελικά, πρέπει να καλέσετε <code>gtk_widget_show_all</code> στο πλαίσιο. Αλλιώς, κανένα από τα γραφικά στοιχεία που δημιουργήσατε δεν θα είναι ορατό. (Το παράθυρο εμφανίζεται στη συνάρτηση <code>main</code> με <code>gtk_widget_show</code>.)

note: (itstool) path: section/p
en: Build and run the message board again. You should see a window with a text entry and a web view. It doesn't do anything yet because the text entry and the web view don't know anything about each other.
el: Αναπτύξτε και εκτελέστε ξανά τον πίνακα μηνύματος. Πρέπει να δείτε ένα παράθυρο με μια καταχώριση κειμένου και μια προβολή ιστού. Δεν κάνει τίποτα ακόμα, επειδή η καταχώριση κειμένου και η προβολή ιστού δεν ξέρουν τίποτα μεταξύ τους.

note: (itstool) path: section/title
en: Hook up signals
el: Σύνδεση σημάτων

note: (itstool) path: section/p
en: Now you want to make the message board actually <em>do</em> something when you enter text into the text entry. To do this, connect a callback function to the <code>activate</code> signal of <code>entry</code>. GTK+ emits the <code>activate</code> signal whenever the user presses <key>Enter</key> in the entry. Add the following into <code>create_window</code>, anywhere after both <code>entry</code> and <code>view</code> have been defined:
el: Τώρα, θέλετε να κάνετε τον πίνακα μηνύματος στην πραγματικότητα <em>να κάνει</em> κάτι όταν εισάγετε κείμενο στην καταχώριση κειμένου. Για να το κάνετε αυτό, συνδέστε μια συνάρτηση επανάκλησης στο σήμα <code>activate</code> του <code>entry</code>. Το GTK+ εκπέμπει το σήμα <code>activate</code> όταν ο χρήστης πατά <key>Enter</key> στην καταχώριση. Προσθέστε το παρακάτω στο <code>create_window</code>, οπουδήποτε αφού και <code>entry</code> και <code>view</code> οριστούν:

note: (itstool) path: section/p
en: You then have to actually define <code>entry_activate_cb</code>. Define it as follows, anywhere above <code>create_window</code>:
el: Τότε πρέπει στην πραγματικότητα να ορίσετε το <code>entry_activate_cb</code>. Ορίστε το όπως ακολουθεί, οπουδήποτε πάνω από το <code>create_window</code>:

note: (itstool) path: section/p
en: The first thing you do is get a <code>WebKitDOMDocument</code> object that represents the HTML document displayed in <code>view</code>. The DOM classes and methods in WebKit allow you to inspect and manipulate the HTML document, and work very similarly to the DOM APIs you might already know from JavaScript.
el: Το πρώτο πράγμα είναι να πάρετε ένα αντικείμενο <code>WebKitDOMDocument</code> που αντιπροσωπεύει το εμφανιζόμενο έγγραφο στο <code>view</code>. Οι κλάσεις DOM και οι μέθοδοι στο WebKit επιτρέπουν την επιθεώρηση και χειρισμό του εγγράφου HTML και δουλεύουν πολύ παρόμοια με τα APIs DOM που ήδη μπορεί να ξέρετε από το JavaScript.

note: (itstool) path: section/p
en: Once you have the document, you want to get the <code>body</code> element so that you can add <code>div</code> elements to it. The <code>webkit_dom_document_query_selector</code> function lets you find an element in the document using CSS selectors. This keeps you from having to write tedious loops to traverse the document.
el: Μόλις έχετε το έγγραφο, παίρνετε το στοιχείο <code>body</code>, έτσι ώστε να μπορείτε να προσθέσετε τα στοιχεία <code>div</code> σε αυτό. Η συνάρτηση <code>webkit_dom_document_query_selector</code> επιτρέπει την εύρεση ενός στοιχείου στο έγγραφο χρησιμοποιώντας επιλογείς CSS. Αυτό σας γλυτώνει από το γράψιμο κουραστικών βρόχων για πέρασμα του εγγράφου.

note: (itstool) path: section/p
en: Next, you create a new <code>div</code> element to hold the message. Every element you create has to be attached to a document, so the function to create an element takes the <code>WebKitDOMDocument</code> as its first arguments. You then set the text content of the element to the contents of the text entry. Because <code>gtk_entry_get_text</code> returns a <code>const gchar*</code>, you don't have to free the result.
el: Μετά, δημιουργείτε ένα νέο στοιχείο <code>div</code> για κράτημα του μηνύματος. Κάθε στοιχείο που δημιουργείτε πρέπει να προσαρτηθεί σε ένα έγγραφo, έτσι η συνάρτηση στη δημιουργία ενός στοιχείου παίρνει το <code>WebKitDOMDocument</code> ως τα πρώτα της ορίσματα. Έπειτα ορίζετε το περιεχόμενο κειμένου του στοιχείου στα περιεχόμενα της καταχώρισης κειμένου. Επειδή το <code>gtk_entry_get_text</code> επιστρέφει το <code>const gchar*</code>, δεν πρέπει να απελευθερώσετε το αποτέλεσμα.

note: (itstool) path: section/p
en: Finally, you append the new <code>div</code> element to the body and clear out the text entry so you can type something new. Build and run the program again and test it for yourself.
el: Τελικά, προσαρτάτε το νέο στοιχείο <code>div</code> στο σώμα και καθαρίστε την καταχώριση κειμένου, έτσι ώστε να μπορείτε να τυπώσετε κάτι νέο. Κατασκευή και εκτέλεση του προγράμματος ξανά και έλεγχος του για σας.

note: (itstool) path: section/title
en: Make it look better with CSS
el: Κάντε το να φαίνεται καλύτερα με CSS

note: (itstool) path: section/p
en: At this point, your program is completely functional, but not very pretty. You can style the message display with CSS, just like you can with any other HTML page. There are many ways you could attach some CSS to the page: You could add it in the initial HTML document. You could inline it in the <code>style</code> attribute of the <code>div</code> elements. You could even programmatically construct it using the DOM APIs.
el: Σε αυτό το σημείο, το πρόγραμμά σας είναι ολότελα λειτουργικό, αλλά όχι πολύ όμορφο. Μπορείτε να μορφοποιήσετε την εμφάνιση μηνύματος με CSS, απλά όπως μπορείτε με κάθε άλλη σελίδα HTML. Υπάρχουν πολλοί τρόποι που θα μπορούσατε να προσαρτήσετε μερικά CSS στη σελίδα: Μπορείτε να τα προσθέσετε στο αρχικό έγγραφο HTML. Θα μπορούσατε να το ενσωματώσετε στο γνώρισμα <code>style</code> των στοιχείων <code>div</code>. Θα μπορούσατε ακόμα να το κατασκευάσετε προγραμματιστικά χρησιμοποιώντας τα APIs DOM.

note: (itstool) path: section/p
en: In this tutorial, you'll attach the CSS using the <code>user-stylesheet-uri</code> property of the <code>WebKitWebSetting</code> object attached to your web view. In a more complete application, you would want to save and load your HTML file. Keeping the style information outside the actual HTML means that you can change the styling completely within your application, without having to change users' files. You would normally just install a file along with your application, but just to keep everything in one file for this demo, we'll use a trick called a data URI. First, define the CSS as a static string near the top of your file.
el: Σε αυτό το μάθημα, θα επισυνάψετε το CSS χρησιμοποιώντας την ιδιότητα <code>user-stylesheet-uri</code> του προσαρτημένου αντικειμένου <code>WebKitWebSetting</code> στην προβολή σας ιστού. Σε μια πιο πλήρη εφαρμογή, θα θέλατε να αποθηκεύσετε και να φορτώσετε το αρχείο HTML. Διατηρώντας τις πληροφορίες μορφοποίησης έξω από το ενεργό HTML σημαίνει ότι μπορείτε να αλλάξετε ολότελα τη μορφοποίηση μες την εφαρμογή σας, χωρίς να χρειαστεί να αλλάξετε τα αρχεία χρήστη. Κανονικά θα εγκαταστήσετε απλά ένα αρχείο μαζί με την εφαρμογή σας, αλλά για να διατηρήσετε απλά κάθε τι σε ένα αρχείο για αυτή την παρουσίαση, θα χρησιμοποιήσουμε ένα κόλπο που λέγεται δεδομένα URI. Πρώτα, ορίστε το CSS ως στατική συμβολοσειρά κοντά στην κορυφή του αρχείου σας.

note: (itstool) path: section/p
en: All you have in this example are <code>div</code> elements inside a <code>body</code> element. If you created more complicated HTML, you could use whatever CSS is necessary. In fact, if you're comfortable with CSS, you should trying changing this to something you like better.
el: Ό,τι έχετε σε αυτό το παράδειγμα είναι στοιχεία <code>div</code> μέσα σε ένα στοιχείο <code>body</code>. Εάν δημιουργήσατε πιο περίπλοκα HTML, θα μπορούσατε να χρησιμοποιήσετε οποιοδήποτε CSS είναι απαραίτητο. Στην πραγματικότητα, εάν είσαστε άνετα με CSS, θα πρέπει να προσπαθήσετε να το αλλάξετε με κάτι που σας αρέσει καλύτερα.

note: (itstool) path: section/p
en: To apply the CSS, you set the <code>user-stylesheet-uri</code> in the <code>create_window</code> function, anywhere after <code>view</code> has already been defined.
el: Για εφαρμογή του CSS, ορίζετε τον <code>user-stylesheet-uri</code> στην συνάρτηση <code>create_window</code>, οπουδήποτε μετά τον ορισμό του <code>view</code>.

note: (itstool) path: section/p
en: Also, make sure to add variable declarations for <code>tmp</code> and <code>css</code> to the top of <code>create_window</code>.
el: Επίσης, βεβαιωθείτε να προσθέσετε δηλώσεις μεταβλητής για <code>tmp</code> και <code>css</code> στην κορυφή του <code>create_window</code>.

note: (itstool) path: section/code
en: 
    gchar *tmp, *css;
el: 
    gchar *tmp, *css·

note: (itstool) path: section/p
en: A data URI starts with <sys>data:</sys> and some information about the content type and how the data is encoded. The actual data follows after a comma, in this case encoded in Base64. Unlike other URI schemes like <sys>http:</sys>, <sys>ftp:</sys>, and <sys>file:</sys>, the <sys>data:</sys> URI scheme doesn't specify where to find a file to load. Rather, it gives the entire contents of the file.
el: Δεδομένα URI ξεκινούν με <sys>data:</sys> και μερικές πληροφορίες για τον τύπο περιεχομένου και την κωδικοποίηση δεδομένων. Τα ενεργά δεδομένα ακολουθούν μετά το κόμμα, σε αυτήν την περίπτωση κωδικοποιημένα σε Base64. Αντίθετα με άλλα σχήματα URI όπως <sys>http:</sys>, <sys>ftp:</sys> και <sys>file:</sys>, το σχήμα <sys>data:</sys> URI δεν καθορίζει πού να βρείτε ένα αρχείο για φόρτωση. Μάλλον, δίνει τα συνολικά περιεχόμενα του αρχείου.

note: (itstool) path: section/p
en: The code above first encodes your CSS definitions in Base64, then combines that with a fixed string to create a data URI. The <code>g_strconcat</code> function can take any number of string arguments and concatenate them all together, so you have to pass <code>NULL</code> as the final argument so it knows when to stop. And don't forget to free those temporary strings after you set the stylesheet property.
el: Ο παραπάνω κώδικας πρώτα κωδικοποιεί τους ορισμούς σας CSS σε Base64, έπειτα συνδυάζει αυτό με σταθερή συμβολοσειρά για δημιουργία δεδομένων URI. Η συνάρτηση <code>g_strconcat</code> μπορεί να πάρει οποιοδήποτε αριθμό ορισμάτων συμβολοσειράς και να τα συνενώσει όλα μαζί, έτσι έχετε να περάσετε το <code>NULL</code> ως τελικό όρισμα για να γνωρίζει πότε να σταματήσει. Μην ξεχάσετε να ελευθερώσετε αυτές τις προσωρινές συμβολοσειρές αφού ορίσετε την ιδιότητα φύλλο μορφοποίησης.

note: (itstool) path: section/p
en: Build and run the program again. It should now work exactly the same as at the end of the last section, except the messages will be nicely styled with a border and a subtle background gradient.
el: Κατασκευή και εκτέλεση του προγράμματος πάλι. Θα πρέπει τώρα να δουλεύει ακριβώς το ίδιο όπως στο τέλος της τελευταίας ενότητας, εκτός από τα μηνύματα που θα μορφοποιούνται όμορφα με περίγραμμα και λεπτή διαβάθμιση παρασκηνίου.

note: (itstool) path: section/title
en: Learn more
el: Μάθετε περισσότερα

note: (itstool) path: section/p
en: This tutorial showed you how to create a basic application using GTK+ and WebKit, including showing a document and manipulating its contents. To create a real application, you probably want to do a little bit more. Try adding features on your own. Here are a few ideas:
el: Αυτό το μάθημα δείχνει τη δημιουργία μιας βασικής εφαρμογής χρησιμοποιώντας GTK+ και WebKit, περιλαμβάνοντας την εμφάνιση ενός εγγράφου και επεξεργασία των δεδομένων του. Για τη δημιουργία μιας πραγματικής εφαρμογής, θα θέλετε προφανώς να κάνετε κάτι περισσότερο. Προσπαθήστε να προσθέσετε δικά σας χαρακτηριστικά. Να μερικές ιδέες:

note: (itstool) path: item/p
en: If you're comfortable with CSS, try changing the style of the message display. CSS is easy to get started with, but increasingly more powerful. There is a wealth of CSS tutorials on the Internet, and just about everything you can do on the web, you can do in this application.
el: Εάν είσαστε άνετοι με το CSS, δοκιμάστε να αλλάξετε τη μορφοποίηση της εμφάνισης του μηνύματος. Το CSS είναι εύκολο για να ξεκινήσετε, αλλά διαρκώς περισσότερο ισχυρό. Υπάρχει πλήθος μαθημάτων CSS στο διαδίκτυο και σχεδόν κάθε τι που μπορείτε να κάνετε στον ιστό, μπορείτε να το κάνετε με αυτήν την εφαρμογή.

note: (itstool) path: item/p
en: Right now, you lose all your messages whenever you close the message board. Try saving the HTML contents after each post, and loading the saved file (if it exists) on startup.
el: Τώρα αμέσως, χάνετε όλα τα μηνύματά σας όταν κλείνετε τον πίνακα μηνυμάτων. Δοκιμάστε να αποθηκεύσετε τα περιεχόμενα HTML μετά από κάθε ταχυδρόμηση και φορτώστε το αποθηκευμένο αρχείο (εάν υπάρχει) στην εκκίνηση.

note: (itstool) path: item/p
en: If you keep your messages around for a long time, you'll start wondering when you posted them. Add a timestamp to each message when it's posted. You'll probably want to create some additional child <code>div</code> elements with different classes that you can style in the CSS.
el: Αν κρατάτε τα μηνύματά σας για πολύ χρόνο, θα αρχίσετε να διερωτάστε πότε τα ταχυδρομήσατε. Προσθέσετε ένα σημάδι χρόνου σε κάθε μήνυμα όταν ταχυδρομείται. Θα θέλετε προφανώς να δημιουργήσετε μερικά πρόσθετα θυγατρικά στοιχεία <code>div</code> με διαφορετικές κλάσεις που μπορείτε να μορφοποιήσετε σε CSS.

note: (itstool) path: item/p
en: This program keeps messages around forever. Think about ways you could allow the user to delete messages. Perhaps you want messages to disappear automatically after they're too old, or after there are a certain number of messages before them. Or you could add a link in each message to delete it. You could even override the context menu when you right-click on a message. These features involve exploring WebKit's DOM API more.
el: Αυτό το πρόγραμμα κρατά τα μηνύματα για πάντα. Σκεφτείτε τρόπους που θα μπορούσαν να επιτρέψουν στο χρήστη να διαγράψει μηνύματα. Ίσως θέλετε τα μηνύματα να εξαφανίζονται αυτόματα όταν παλιώνουν, ή όταν υπάρχει ένας συγκεκριμένος αριθμός μηνυμάτων πριν από αυτά. Ή θα μπορούσατε να προσθέσετε έναν σύνδεσμο σε κάθε μήνυμα για διαγραφή του. Θα μπορούσατε ακόμα να αντικαταστήσετε το μενού περιεχομένου όταν κάνετε δεξιό κλικ σε μήνυμα. Αυτές τα χαρακτηριστικά περιέχουν περισσότερη περιήγηση του DOM API του WebKit.

note: (itstool) path: info/desc
en: A message window
el: Ένα παράθυρο μηνύματος

note: (itstool) path: page/p
en: A modal message dialog which can cause the world to explode.
el: Ένας αποκλειστικός διάλογος μηνύματος που μπορεί να προκαλέσει την έκρηξη του κόσμου.

note: (itstool) path: note/p
en: To test out the application once it has started running, you can click on the "Message Dialog" tab that appears in the top menubar of the screen.
el: Για να ελέγξουμε την εφαρμογή μόλις αρχίσει να εκτελείται, μπορείτε να πατήσετε στην καρτέλα "Message Dialog" που εμφανίζεται στην κορυφή της γραμμής μενού στην οθόνη.

note: (itstool) path: page/code
en: 
    #include &lt;gtk/gtk.h&gt;
    
    
    
    /* Callback function in which reacts to the "response" signal from the user in
     * the message dialog window.
     * This function is used to interact with the user in the terminal.
     */
    static void
    on_response (GtkDialog *dialog,
                 gint       response_id,
                 gpointer   user_data)
    {
      /* If the button clicked gives response OK (response_id being -5) */
      if (response_id == GTK_RESPONSE_OK) 
         g_print ("*boom*\n");
    
      /* If the button clicked gives response CANCEL (response_id being -6) */
      else if (response_id == GTK_RESPONSE_CANCEL)
         g_print ("good choice\n");
    
      /* If the message dialog is destroyed (for example by pressing escape) */
      else if (response_id == GTK_RESPONSE_DELETE_EVENT)
         g_print ("dialog closed or cancelled\n");
    
      /* Destroy the dialog after one of the above actions have taken place */
      gtk_widget_destroy (GTK_WIDGET (dialog));
    
    }
    
    
    
    /* Callback function for the response signal "activate" related to the SimpleAction
     * message_action.
     * This function is used to cause the message dialog window to popup.
     */
    static void
    message_cb (GSimpleAction *simple,
                GVariant      *parameter,
                gpointer       user_data)
    {
       /* the parent variable in this case represents the window */
       GtkWidget *message_dialog;
       GtkWindow *parent = user_data;
       
       /* Create a new message dialog, and set the parameters as follows:
        * Dialog Flags - make the constructed dialog modal 
        * (modal windows prevent interaction with other windows in the application)
        * Message Type - nonfatal warning message
        * Buttons Type - use the ok and cancel buttons
        * message_format - text that you want the user to see in the window 
        */
       message_dialog = gtk_message_dialog_new (parent, GTK_DIALOG_MODAL, 
                                                GTK_MESSAGE_WARNING, 
                                                GTK_BUTTONS_OK_CANCEL, 
                                                "This action will cause the universe to stop existing.");
    
       gtk_widget_show_all (message_dialog);
    
       g_signal_connect (GTK_DIALOG (message_dialog), "response", 
                        G_CALLBACK (on_response), NULL);
    
    }
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *label;
    
      GSimpleAction *message_action;
    
      /* Create a window with a title and a default size */
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "GMenu Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 400, 200);
    
      /* Create a label and add it to the window */
      label = gtk_label_new ("This application goes boom!");
      gtk_container_add (GTK_CONTAINER (window), label);
    
      /* Create a new simple action, giving it a NULL parameter type. It will 
       * always be NULL for actions invoked from a menu. (e.g clicking on an "ok" 
       * or "cancel" button)
       */
      message_action = g_simple_action_new ("message", NULL); 
    
      /* Connect the "activate" signal to the appropriate callback function */
      g_signal_connect (message_action, "activate", G_CALLBACK (message_cb), 
                        GTK_WINDOW (window));
    
      /* Adds the message_action to the overall action map. An Action map is an 
       * interface that contains a number of named GAction instances 
       * (such as message_action) 
       */
      g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (message_action));
    
      gtk_widget_show_all (window);
    }
    
    
    
    /* Callback function for the response signal "activate" from the "quit" action 
     * in the function directly below.
     */ 
    static void
    quit_cb (GSimpleAction *simple,
             GVariant      *parameter,
             gpointer       user_data)
    {
      GApplication *application = user_data;
    
      g_application_quit (application);
    }
    
    
    
    /* Startup function for the menu we are creating in this sample */
    static void
    startup (GApplication *app,
             gpointer      user_data)
    {
      GMenu *menu;
      GSimpleAction *quit_action;
    
      /* Initialize the GMenu, and add a menu item with label "Message" and action 
       * "win.message". Also add another menu item with label "Quit" and action 
       * "app.quit" 
       */
      menu = g_menu_new ();
      g_menu_append (menu, "Message", "win.message");
      g_menu_append (menu, "Quit", "app.quit");
    
      /* Create a new simple action for the application. (In this case it is the 
       * "quit" action.
       */
      quit_action = g_simple_action_new ("quit", NULL);
    
      /* Ensure that the menu we have just created is set for the overall application */
      gtk_application_set_app_menu (GTK_APPLICATION (app), G_MENU_MODEL (menu));
    
      g_signal_connect (quit_action, 
                        "activate", 
                        G_CALLBACK (quit_cb), 
                        app);
    
      g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (quit_action));
    
    }
    
    
    
    /* Startup function for the application */
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }
el: 
    #include &lt;gtk/gtk.h&gt;
    
    
    
    /* Η συνάρτηση επανάκλησης στην οποία αντιδρά το σήμα "response" από τον χρήστη
     * στο παράθυρο μηνύματος διαλόγου.
     * Αυτή η συνάρτηση χρησιμοποιείται για αλληλεπίδραση με τον χρήστη στο τερματικό.
     */
    static void
    on_response (GtkDialog *dialog,
                 gint       response_id,
                 gpointer   user_data)
    {
      /* Αν το κουμπί πατηθεί δίνει απάντηση ΕΝΤΑΞΕΙ (response_id being -5) */
      if (response_id == GTK_RESPONSE_OK) 
         g_print ("*boom*\n");
    
      /* Αν το κουμπί πατηθεί δίνει απάντηση ΑΚΥΡΩΣΗ (response_id being -6) */
      else if (response_id == GTK_RESPONSE_CANCEL)
         g_print ("good choice\n");
    
      /* Αν ο διάλογος μηνύματος καταστραφεί (για παράδειγμα πατώντας διαφυγή) */
      else if (response_id == GTK_RESPONSE_DELETE_EVENT)
         g_print ("dialog closed or cancelled\n");
    
      /* Καταστροφή του διαλόγου αφού έχει λάβει χώρα μια από τις παραπάνω ενέργειες */
      gtk_widget_destroy (GTK_WIDGET (dialog));
    
    }
    
    
    
    /* Η συνάρτηση επανάκλησης για το σήμα απάντησης "activate" που σχετίζεται με την απλή ενέργεια
     * message_action.
     * Αυτή η συνάρτηση χρησιμοποιείται για την πρόκληση ανάδυσης του παραθύρου του διαλόγου μηνύματος.
     */
    static void
    message_cb (GSimpleAction *simple,
                GVariant      *parameter,
                gpointer       user_data)
    {
       /* Η γονική μεταβλητή σε αυτήν την περίπτωση αναπαριστά το παράθυρο */
       GtkWidget *message_dialog;
       GtkWindow *parent = user_data;
       
       /* Δημιουργία ενός νέου διαλόγου μηνύματος και ορισμός των παραμέτρων ως εξής:
        * Σημαίες διαλόγων - ο κατσκευασμένος διάλογος γίνεται αναγκαστικός 
        * (οι αναγκαστικοί διάλογοι αποτρέπουν την αλληλεπίδραση με άλλα παράθυρα στην εφαρμογή)
        * Τύπος μηνύματος - όχι μοιραίο μήνυμα προειδοποίησης
        * Τύπος κουμπιών - χρήση των κουμπιών εντάξει και ακύρωση
        * message_format - κείμενο που θέλετε να δει ο χρήστης στο παράθυρο 
        */
       message_dialog = gtk_message_dialog_new (parent, GTK_DIALOG_MODAL, 
                                                GTK_MESSAGE_WARNING, 
                                                GTK_BUTTONS_OK_CANCEL, 
                                                "Αυτή η ενέργεια θα προκαλέσει το καθολικό να πάψει να υπάρχει.");
    
       gtk_widget_show_all (message_dialog);
    
       g_signal_connect (GTK_DIALOG (message_dialog), "response", 
                        G_CALLBACK (on_response), NULL);
    
    }
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *label;
    
      GSimpleAction *message_action;
    
      /* Δημιουργία παραθύρου με τίτλο και προεπιλεγμένο μέγεθος  */
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "GMenu Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 400, 200);
    
      /* Δημιουργία ετικέτας και προσθήκη της στο παράθυρο */
      label = gtk_label_new ("This application goes boom!");
      gtk_container_add (GTK_CONTAINER (window), label);
    
      /* Δημιουργία μιας νέας απλής ενέργειας, δίνοντας της έναν τύπο παραμέτρου NULL . Θα 
       * είναι πάντα NULL για πράξεις που κλήθηκαν από ένα μενού. (π.χ. πατώντας ένα κουμπί "ok" 
       * ή "cancel")
       */
      message_action = g_simple_action_new ("message", NULL); 
    
      /*Σύνδεση του σήματος "activate" στην κατάλληλη συνάρτηση επανάκλησης */
      g_signal_connect (message_action, "activate", G_CALLBACK (message_cb), 
                        GTK_WINDOW (window));
    
      /* Προσθέτει την message_action στην συνολική απεικόνιση της ενέργειας. Μια απεικόνιση ενέργειας  είναι μια 
       * διεπαφή που περιέχει έναν αριθμό από επώνυμα στιγμιότυπα GAction 
       * (όπως message_action) 
       */
      g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (message_action));
    
      gtk_widget_show_all (window);
    }
    
    
    
    /* Η συνάρτηση επανάκλησης για το σήμα απάντησης "activate" από την ενέργεια "quit" 
     * στην ακριβώς παρακάτω συνάρτηση.
     */ 
    static void
    quit_cb (GSimpleAction *simple,
             GVariant      *parameter,
             gpointer       user_data)
    {
      GApplication *application = user_data;
    
      g_application_quit (application);
    }
    
    
    
    /* Η συνάρτηση έναρξης για το μενού που δημιουργήσαμε σε αυτό το παράδειγμα */
    static void
    startup (GApplication *app,
             gpointer      user_data)
    {
      GMenu *menu;
      GSimpleAction *quit_action;
    
      /* Αρχικοποίηση του GMenu και προσθήκη ενός στοιχείου μενού με ετικέτα "Message" και ενέργεια 
       * "win.message". Επίσης προσθήκη ενός άλλου στοιχείου μενού με ετικέτα "Quit" και ενέργεια 
       * "app.quit" 
       */
      menu = g_menu_new ();
      g_menu_append (menu, "Message", "win.message");
      g_menu_append (menu, "Quit", "app.quit");
    
      /* Δημιουργία μιας απλής ενέργειας για την εφαρμογή. (Σε αυτήν την περίπτωση 
       * είναι η ενέργεια "quit" .
       */
      quit_action = g_simple_action_new ("quit", NULL);
    
      /* Επιβεβαίωση ότι το μενού που μόλις δημιουργήσαμε ορίστηκε για τη συνολική εφαρμογή */
      gtk_application_set_app_menu (GTK_APPLICATION (app), G_MENU_MODEL (menu));
    
      g_signal_connect (quit_action, 
                        "activate", 
                        G_CALLBACK (quit_cb), 
                        app);
    
      g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (quit_action));
    
    }
    
    
    
    /* Η συνάρτηση έναρξης για την εφαρμογή */
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }

note: (itstool) path: info/desc
en: A popup message attached to a window
el: Ένα επισυναπτόμενο αναδυόμενο μήνυμα σε ένα παράθυρο

note: (itstool) path: page/p
en: A MessageDialog is a modal message dialog, which means a popup that you have to respond to before you get back to what you were doing in the window that it's attached to. This one can cause the world to explode (or at least it says that it can). To make the popup appear when you run this sample, click on "Message" inside of its application menu -- that's the menu that appears when you click on an application's name in the upper-left screen corner, next to Activities.
el: Ένας MessageDialog είναι ένας αναγκαστικός διάλογος μηνύματος, που σημαίνει έναν αναδυόμενο στον οποίο πρέπει να απαντήσετε πριν να επιστρέψετε σε ότι κάνατε στο παράθυρο στο οποίο είναι προσαρτημένο. Αυτό μπορεί να προκαλέσει την έκρηξη του κόσμου (ή τουλάχιστον λέει ότι μπορεί). Για να κάνετε το αναδυόμενο να εμφανιστεί όταν εκτελείτε αυτό το δείγμα, πατήστε στο "Message" μέσα στο μενού της εφαρμογής του -- αυτό είναι το μενού που εμφανίζεται όταν πατάτε στο όνομα μιας εφαρμογής στην πάνω αριστερή γωνία της οθόνης, δίπλα στις ενέργειες.

note: (itstool) path: note/p
en: The difference between a MessageDialog and a <link xref="dialog.js">Dialog</link> is that a Dialog can contain whatever widgets and content you want to put in it, whereas a MessageDialog is just a convenient way to make popups appear with a basic message and buttons.
el: Η διαφορά μεταξύ ενός MessageDialog και ενός <link xref="dialog.js">διαλόγου</link> είναι ότι ο διάλογος μπορεί να περιέχει οποιαδήποτε γραφικά στοιχεία και περιεχόμενο θέλετε να βάλετε μέσα, ενώ ένας MessageDialog είναι απλά ένας βολικός τρόπος να κάνετε τα αναδυόμενα να εμφανιστούν με ένα βασικό μήνυμα και κουμπιά.

note: (itstool) path: section/code
en: 
    const MessageDialogExample = new Lang.Class ({
        Name: 'MessageDialog Example',
    
        // Create the application itself
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsmessagedialog',
                flags: Gio.ApplicationFlags.FLAGS_NONE });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function () {
            this._window.present ();
        },
    
        // Callback function for 'startup' signal initializes menus and builds the UI
        _onStartup: function () {
            this._initMenus();
            this._buildUI ();
        },
el: 
    const MessageDialogExample = new Lang.Class ({
        Name: 'MessageDialog Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsmessagedialog',
                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._initMenus();
            this._buildUI ();
        },

note: (itstool) path: note/p
en: Before we call _buildUI to create the window and the widgets inside it, we need to call _initMenus, which tells GNOME to create the menu. We can put the actual code for _initMenus after the code for _buildUI, since it doesn't matter what order we put them in so long as _initMenus is called first in _onStartup.
el: Πριν καλέσουμε _buildUI για δημιουργία του παραθύρου και των γραφικών στοιχείων μέσα του, χρειαζόμαστε να καλέσουμε _initMenus, που λέει στο GNOME να δημιουργήσει το μενού. Μπορούμε να βάλουμε τον ενεργό κώδικα για _initMenus μετά τον κώδικα για _buildUI, αφού δεν πειράζει η σειρά που τα βάλαμε όσο το _initMenus καλείται πρώτο στο _onStartup.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function () {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Gtk.MessageDialog Example",
                default_height: 200,
                default_width: 400 });
el: 
        // Δημιουργία της διεπαφής χρήστη της εφαρμογής
        _buildUI: function () {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Gtk.MessageDialog Example",
                default_height: 200,
                default_width: 400 });

note: (itstool) path: section/code
en: 
            // Create a silly warning message and add it to the window
            this.warningLabel = new Gtk.Label ({
                label: "This application goes boom! (Not really.)"});
            this._window.add (this.warningLabel);
el: 
            // Δημιουργία ενός χαζού μηνύματος προειδοποίησης και προσθήκη του στο παράθυρο
            this.warningLabel = new Gtk.Label ({
                label: "This application goes boom! (Not really.)"});
            this._window.add (this.warningLabel);

note: (itstool) path: section/p
en: For this example, all that we have in the window the popup comes out of is a silly warning <link xref="label.js">Label</link>.
el: Για αυτό το παράδειγμα, όλο ότι έχουμε στο παράθυρο που εμφανίζεται το αναδυόμενο είναι μια χαζή προειδοποίηση <link xref="label.js">Label</link>.

note: (itstool) path: section/title
en: Creating the application's menu
el: Δημιουργία του μενού της εφαρμογής

note: (itstool) path: section/code
en: 
        // Build the application menu, including the button that calls the dialog
        _initMenus: function() {
            let menu = new Gio.Menu();
            menu.append("Message",'app.message');
            menu.append("Quit",'app.quit');
            this.application.set_app_menu(menu);
    
            // This pops up a MessageDialog when "Message" is clicked in the menu
            let messageAction = new Gio.SimpleAction ({ name: 'message' });
            messageAction.connect('activate', Lang.bind(this,
                function() {
                    this._showMessageDialog();
                }));
            this.application.add_action(messageAction);
    
            // This closes the window when "Quit" is clicked in the menu
            let quitAction = new Gio.SimpleAction ({ name: 'quit' });
            quitAction.connect('activate', Lang.bind(this,
                function() {
                    this._window.destroy();
                }));
            this.application.add_action(quitAction);
        },
el: 
        // Δημιουργία του μενού της εφαρμογής, συμπεριλαμβανομένου του κουμπιού που καλεί τον διάλογο
        _initMenus: function() {
            let menu = new Gio.Menu();
            menu.append("Message",'app.message');
            menu.append("Quit",'app.quit');
            this.application.set_app_menu(menu);
    
            // Αυτό αναδύει ένα μήνυμα διαλόγου όταν πατιέται "Message" στο μενού
            let messageAction = new Gio.SimpleAction ({ name: 'message' });
            messageAction.connect('activate', Lang.bind(this,
                function() {
                    this._showMessageDialog();
                }));
            this.application.add_action(messageAction);
    
            // Αυτό κλείνει το παράθυρο όταν πατιέται  "Quit" στο μενού
            let quitAction = new Gio.SimpleAction ({ name: 'quit' });
            quitAction.connect('activate', Lang.bind(this,
                function() {
                    this._window.destroy();
                }));
            this.application.add_action(quitAction);
        },

note: (itstool) path: section/p
en: Here, we build the <link xref="gmenu.js">GMenu</link> where we'll be putting the "Message" button which triggers the popup MessageDialog. The GMenu is the menu that appears when you click the application's name in the upper-left corner of the screen, next to the Activities menu. Our menu only has two options in it: Message, and Quit.
el: Εδώ, κατασκευάζουμε το <link xref="gmenu.js">GMenu</link> όπου θα βάλουμε το κουμπί "Message" που προκαλεί το αναδυόμενο MessageDialog. Το GMenu είναι το μενού που εμφανίζεται όταν πατάς το όνομα της εφαρμογής στην πάνω αριστερή γωνία της οθόνης, δίπλα στο μενού ενέργειες. Το μενού μας έχει μόνο δύο επιλογές: μήνυμα και κλείσιμο.

note: (itstool) path: section/title
en: Creating the MessageDialog
el: Δημιουργία του MessageDialog

note: (itstool) path: section/code
en: 
        _showMessageDialog: function () {
    
            // Create a modal MessageDialog whose parent is the window
            this._messageDialog = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                buttons: Gtk.ButtonsType.OK_CANCEL,
                message_type: Gtk.MessageType.WARNING,
                text: "This action will cause the universe to stop existing." });
    
            this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));
            this._messageDialog.show();
        },
el: 
        _showMessageDialog: function () {
    
            // Δημιουργία αναγκαστικού διαλόγου μηνύματος του οποίου το γονικό είναι στο παράθυρο
            this._messageDialog = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                buttons: Gtk.ButtonsType.OK_CANCEL,
                message_type: Gtk.MessageType.WARNING,
                text: "This action will cause the universe to stop existing." });
    
            this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));
            this._messageDialog.show();
        },

note: (itstool) path: section/p
en: To make our MessageDialog a popup attached to the main window, we set its modal property to true and set it to be "transient_for" _window. After that, we can set what kind of buttons it has and what kind of message it is (which determines what icon appears next to the message), and write out the text inside it, before connecting its "response" signal to the callback function which handles it.
el: Για να κάνετε τον MessageDialog μας ένα προσαρτημένο αναδυόμενο στο κύριο παράθυρο, ορίζουμε την αναγκαστική του ιδιότητα σε αληθή και το ορίζουμε να είναι "transient_for" _window. Μετά από αυτό, μπορούμε να ορίσουμε τι είδους κουμπιά έχει και τι είδους μήνυμα είναι (που καθορίζει τι εικονίδιο εμφανίζεται δίπλα στο μήνυμα) και να γραφτεί το κείμενο μέσα του, πριν τη σύνδεση του σήματος του "response" στη συνάρτηση επανάκλησης που το χειρίζεται.

note: (itstool) path: note/p
en: Here are some resources for making your own MessageDialogs:
el: Εδώ υπάρχουν μερικές πηγές για να κάνετε τα δικά σας MessageDialogs:

note: (itstool) path: section/code
en: 
        // Callback function (aka signal handler) for the response signal
        _response_cb: function (messagedialog, response_id) {
    
            // A simple switch that changes the main window's label
            switch (response_id) {
                case Gtk.ResponseType.OK:
                    this.warningLabel.set_label ("*BOOM*\n");
                    break;
                case Gtk.ResponseType.CANCEL:
                    this.warningLabel.set_label ("Good choice!\n");
                    break;
                case Gtk.ResponseType.DELETE_EVENT:
                    this.warningLabel.set_label ("Dialog closed or cancelled.\n");
                    break;
            }
    
            this._messageDialog.destroy();
    
        }
    
    });
el: 
        // Η συνάρτηση επανάκλησης (χειριστής σήματος aka) για το σήμα απάντησης
        _response_cb: function (messagedialog, response_id) {
    
            // Ένας απλός διακόπτης που αλλάζει την ετικέτα του κυρίως παραθύρου
            switch (response_id) {
                case Gtk.ResponseType.OK:
                    this.warningLabel.set_label ("*BOOM*\n");
                    break;
                case Gtk.ResponseType.CANCEL:
                    this.warningLabel.set_label ("Good choice!\n");
                    break;
                case Gtk.ResponseType.DELETE_EVENT:
                    this.warningLabel.set_label ("Dialog closed or cancelled.\n");
                    break;
            }
    
            this._messageDialog.destroy();
    
        }
    
    });

note: (itstool) path: section/p
en: This function takes two parameters, the MessageDialog and its response_id, both of which are automatically supplied (you don't have to manually pass them to it for it to work). Here we use a simple switch to change the "warning label"'s text, depending on which option you select. The DELETE_EVENT occurs if you press Escape to cancel the MessageDialog, instead of clicking OK or Cancel. Whatever you select, the popup is destroyed afterwards.
el: Αυτή η συνάρτηση παίρνει δύο παραμέτρους, τον MessageDialog και την response_id, και οι δυο τους παρέχονται αυτόματα (δεν χρειάζεται να τις περάσετε αυτόματα σε αυτό για να δουλέψει). Εδώ χρησιμοποιούμε ένα απλό διακόπτη για αλλαγή του κειμένου της "warning label", ανάλογα με το ποια επιλογή διαλέγετε. Η DELETE_EVENT συμβαίνει εάν πατήσετε διαφυγή για να ακυρώσετε τον MessageDialog, αντί να πατήσετε εντάξει ή ακύρωση. Ό,τι και να επιλέξετε, το αναδυόμενο καταστρέφεται κατόπιν.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new MessageDialogExample ();
    app.application.run (ARGV);
el: 
    // Εκτέλεση της εφαρμογής
    let app = new MessageDialogExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished MessageDialogExample class, and set the application running.
el: Τελικά, δημιουργούμε ένα νέο στιγμιότυπο της ολοκληρωμένης κλάσης MessageDialogExample και εκτελούμε την εφαρμογή.

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const MessageDialogExample = new Lang.Class ({
        Name: 'MessageDialog Example',
    
        // Create the application itself
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsmessagedialog',
                flags: Gio.ApplicationFlags.FLAGS_NONE });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function () {
            this._window.present ();
        },
    
        // Callback function for 'startup' signal initializes menus and builds the UI
        _onStartup: function () {
            this._initMenus();
            this._buildUI ();
        },
    
    
    
        // Build the application's UI
        _buildUI: function () {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Gtk.MessageDialog Example",
                default_height: 200,
                default_width: 400 });
    
            // Create a silly warning message and add it to the window
            this.warningLabel = new Gtk.Label ({
                label: "This application goes boom! (Not really.)"});
            this._window.add (this.warningLabel);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
    
    
    
        // Build the application menu, including the button that calls the dialog
        _initMenus: function() {
            let menu = new Gio.Menu();
            menu.append("Message",'app.message');
            menu.append("Quit",'app.quit');
            this.application.set_app_menu(menu);
    
            // This pops up a MessageDialog when "Message" is clicked in the menu
            let messageAction = new Gio.SimpleAction ({ name: 'message' });
            messageAction.connect('activate', Lang.bind(this,
                function() {
                    this._showMessageDialog();
                }));
            this.application.add_action(messageAction);
    
            // This closes the window when "Quit" is clicked in the menu
            let quitAction = new Gio.SimpleAction ({ name: 'quit' });
            quitAction.connect('activate', Lang.bind(this,
                function() {
                    this._window.destroy();
                }));
            this.application.add_action(quitAction);
        },
    
    
    
        _showMessageDialog: function () {
    
            // Create a modal MessageDialog whose parent is the window
            this._messageDialog = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                buttons: Gtk.ButtonsType.OK_CANCEL,
                message_type: Gtk.MessageType.WARNING,
                text: "This action will cause the universe to stop existing." });
    
            this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));
            this._messageDialog.show();
        },
    
    
    
        // Callback function (aka signal handler) for the response signal
        _response_cb: function (messagedialog, response_id) {
    
            // A simple switch that changes the main window's label
            switch (response_id) {
                case Gtk.ResponseType.OK:
                    this.warningLabel.set_label ("*BOOM*\n");
                    break;
                case Gtk.ResponseType.CANCEL:
                    this.warningLabel.set_label ("Good choice!\n");
                    break;
                case Gtk.ResponseType.DELETE_EVENT:
                    this.warningLabel.set_label ("Dialog closed or cancelled.\n");
                    break;
            }
    
            this._messageDialog.destroy();
    
        }
    
    });
    
    // Run the application
    let app = new MessageDialogExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const MessageDialogExample = new Lang.Class ({
        Name: 'MessageDialog Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsmessagedialog',
                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._initMenus();
            this._buildUI ();
        },
    
    
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function () {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Gtk.MessageDialog Example",
                default_height: 200,
                default_width: 400 });
    
            // Δημιουργία ενός χαζού μηνύματος προειδοποίησης και προσθήκη του στο παράθυρο
            this.warningLabel = new Gtk.Label ({
                label: "This application goes boom! (Not really.)"});
            this._window.add (this.warningLabel);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
    
    
        // Δόμηση του μενού της εφαρμογής, συμπεριλαμβανομένου του κουμπιού που καλεί τον διάλογο
        _initMenus: function() {
            let menu = new Gio.Menu();
            menu.append("Message",'app.message');
            menu.append("Quit",'app.quit');
            this.application.set_app_menu(menu);
    
            // Αυτό εμφανίζει έναν διάλογο μηνύματος όταν πατιέται "Message" στο μενού
            let messageAction = new Gio.SimpleAction ({ name: 'message' });
            messageAction.connect('activate', Lang.bind(this,
                function() {
                    this._showMessageDialog();
                }));
            this.application.add_action(messageAction);
    
            // Αυτό κλείνει το παράθυρο όταν πατιέται "Quit" στο μενού
            let quitAction = new Gio.SimpleAction ({ name: 'quit' });
            quitAction.connect('activate', Lang.bind(this,
                function() {
                    this._window.destroy();
                }));
            this.application.add_action(quitAction);
        },
    
    
    
        _showMessageDialog: function () {
    
            // Δημιουργία ενός αναγκαστικού μηνύματος διαλόγου του οποίου το γονικό είναι στο παράθυρο
            this._messageDialog = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                buttons: Gtk.ButtonsType.OK_CANCEL,
                message_type: Gtk.MessageType.WARNING,
                text: "This action will cause the universe to stop existing." });
    
            this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));
            this._messageDialog.show();
        },
    
    
    
        // Η συνάρτηση επανάκλησης  (χειριστής σήματος aka) για το σήμα απάντησης
        _response_cb: function (messagedialog, response_id) {
    
            // Ένας απλός διακόπτης που αλλάζει την ετικέτα του κυρίως παραθύρου
            switch (response_id) {
                case Gtk.ResponseType.OK:
                    this.warningLabel.set_label ("*BOOM*\n");
                    break;
                case Gtk.ResponseType.CANCEL:
                    this.warningLabel.set_label ("Good choice!\n");
                    break;
                case Gtk.ResponseType.DELETE_EVENT:
                    this.warningLabel.set_label ("Dialog closed or cancelled.\n");
                    break;
            }
    
            this._messageDialog.destroy();
    
        }
    
    });
    
    // Εκτέλεση της εφαρμογής 
    let app = new MessageDialogExample ();
    app.application.run (ARGV);

note: (itstool) path: page/p
en: A message dialog which prints messages on the terminal, depending on your choices.
el: Ένας διάλογος μηνύματος που τυπώνει μηνύματα στο τερματικό, ανάλογα με τις επιλογές σας.

note: (itstool) path: section/title
en: Useful methods for a MessageDialog widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο MessageDialog

note: (itstool) path: section/p
en: In line 18 the signal <code>"activate"</code> is connected to the callback function <code>message_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 18 το σήμα <code>"activate"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>message_cb()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: item/p
en: In the constructor of MessageDialog we could set flags as <code>Gtk.DialogFlags.DESTROY_WITH_PARENT</code> (to destroy the messagedialog window when its parent window is destroyed) or as <code>Gtk.DialogFlags.MODAL</code> (no interaction with other windows of the application).
el: Στον κατασκευαστή του MessageDialog μπορούμε να ορίσουμε σημαίες ως <code>Gtk.DialogFlags.DESTROY_WITH_PARENT</code> (για καταστροφή του παραθύρου διαλόγου μηνύματος όταν το ανιόν παράθυρο καταστράφηκε) ή ως <code>Gtk.DialogFlags.MODAL</code> (χωρίς αλληλεπίδραση με άλλα παράθυρα της εφαρμογής).

note: (itstool) path: item/p
en: In the constructor of MessageDialog we could set type as any of <code>Gtk.MessageType.INFO, Gtk.MessageType.WARNING, Gtk.MessageType.QUESTION, Gtk.MessageType.ERROR, Gtk.MessageType.OTHER</code> depending on what type of message we want.
el: Στον κατασκευαστή του MessageDialog μπορούμε να ορίσουμε ως τύπο οποιοδήποτε από τα <code>Gtk.MessageType.INFO, Gtk.MessageType.WARNING, Gtk.MessageType.QUESTION, Gtk.MessageType.ERROR, Gtk.MessageType.OTHER</code> ανάλογα με τι τύπο μηνύματος θέλουμε.

note: (itstool) path: item/p
en: In the constructor of MessageDialog we could set buttons as any of <code>Gtk.ButtonsType.NONE, Gtk.ButtonsType.OK, Gtk.ButtonsType.CLOSE, Gtk.ButtonsType.CANCEL, Gtk.ButtonsType.YES_NO, Gtk.ButtonsType.OK_CANCEL</code>, or any button using <code>add_button()</code> as in Gtk.Dialog.
el: Στον κατασκευαστή του MessageDialog μπορούμε να ορίσουμε κουμπιά οποιαδήποτε από τα <code>Gtk.ButtonsType.NONE, Gtk.ButtonsType.OK, Gtk.ButtonsType.CLOSE, Gtk.ButtonsType.CANCEL, Gtk.ButtonsType.YES_NO, Gtk.ButtonsType.OK_CANCEL</code>, ή οποιοδήποτε κουμπί χρησιμοποιώντας το <code>add_button()</code> όπως στον Gtk.Dialog.

note: (itstool) path: item/p
en: We could substitute the default image of the MessageDialog with another image using
el: Μπορούμε να αντικαταστήσουμε την προεπιλεγμένη εικόνα του MessageDialog με άλλη εικόνα χρησιμοποιώντας

note: (itstool) path: item/p
en: where <code>Gtk.STOCK_CAPS_LOCK_WARNING</code> is any image from <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">Stock Items</link>. We could also set any image as in the Image widget, as <code>image.set_from_file("filename.png")</code>.
el: όπου <code>Gtk.STOCK_CAPS_LOCK_WARNING</code> είναι οποιαδήποτε εικόνα από <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">στοιχεία αποθέματος</link>. Μπορούμε επίσης να ορίσουμε οποιαδήποτε εικόνα όπως στο γραφικό στοιχείο της εικόνας, ως <code>image.set_from_file("filename.png")</code>.

note: (itstool) path: item/p
en: <code>format_secondary_text("some secondary message")</code> sets a secondary message. The primary text becomes bold.
el: Το <code>format_secondary_text("some secondary message")</code> ορίζει ένα δευτερεύον μήνυμα. Το πρωτεύον κείμενο γίνεται έντονο.

note: (itstool) path: page/code
en: 
    //A window in the application
    public class Window : Gtk.ApplicationWindow {
    	public Window (Application app) {
    		Object (application: app, title: "Gtk.MessageDialog Example");
    
    		var label = new Gtk.Label ("This application goes boom!");
    		this.add (label);
    
    		var message_action = new SimpleAction ("message", null);
    		message_action.activate.connect (message);
    		this.add_action (message_action);
    
    		this.set_default_size (400, 200);
    		this.show_all ();
    	}
    
    	void dialog_response (Gtk.Dialog dialog, int response_id) {
    		switch (response_id) {
    			case Gtk.ResponseType.OK:
    				print ("*boom*\n");
    				break;
    			case Gtk.ResponseType.CANCEL:
    				print ("good choice\n");
    				break;
    			case Gtk.ResponseType.DELETE_EVENT:
    				print ("dialog closed or cancelled\n");
    				break;
    		}
    			dialog.destroy();
    	}
    
    	void message (SimpleAction simple, Variant? parameter) {
    		var messagedialog = new Gtk.MessageDialog (this,
                                Gtk.DialogFlags.MODAL,
                                Gtk.MessageType.WARNING,
                                Gtk.ButtonsType.OK_CANCEL,
                                "This action will cause the universe to stop existing.");
    
    		messagedialog.response.connect (dialog_response);
    		messagedialog.show ();
    	}
    }
    
    //This is the Application
    public class Application : Gtk.Application {
    	protected override void activate () {
    		new Window (this);
    	}
    
    	protected override void startup () {
    		base.startup ();
    
    		var menu = new Menu ();
    		menu.append ("Message", "win.message");
    		menu.append ("Quit", "app.quit");
    		this.app_menu = menu;
    
    		var quit_action = new SimpleAction ("quit", null);
    		//quit_action.activate.connect (this.quit);
    		this.add_action (quit_action);
    	}
    
    	public Application () {
    		Object (application_id: "org.example.application");
    	}
    }
    
    //main function creates Application and runs it
    int main (string[] args) {
    	return new Application ().run (args);
    }
el: 
    //Ένα παράθυρο στην εφαρμογή
    public class Window : Gtk.ApplicationWindow {
    	public Window (Application app) {
    		Object (application: app, title: "Gtk.MessageDialog Example");
    
    		var label = new Gtk.Label ("This application goes boom!");
    		this.add (label);
    
    		var message_action = new SimpleAction ("message", null);
    		message_action.activate.connect (message);
    		this.add_action (message_action);
    
    		this.set_default_size (400, 200);
    		this.show_all ();
    	}
    
    	void dialog_response (Gtk.Dialog dialog, int response_id) {
    		switch (response_id) {
    			case Gtk.ResponseType.OK:
    				print ("*boom*\n");
    				break;
    			case Gtk.ResponseType.CANCEL:
    				print ("good choice\n");
    				break;
    			case Gtk.ResponseType.DELETE_EVENT:
    				print ("dialog closed or cancelled\n");
    				break;
    		}
    			dialog.destroy();
    	}
    
    	void message (SimpleAction simple, Variant? parameter) {
    		var messagedialog = new Gtk.MessageDialog (this,
                                Gtk.DialogFlags.MODAL,
                                Gtk.MessageType.WARNING,
                                Gtk.ButtonsType.OK_CANCEL,
                                "This action will cause the universe to stop existing.");
    
    		messagedialog.response.connect (dialog_response);
    		messagedialog.show ();
    	}
    }
    
    //Αυτή είναι η εφαρμογή
    public class Application : Gtk.Application {
    	protected override void activate () {
    		new Window (this);
    	}
    
    	protected override void startup () {
    		base.startup ();
    
    		var menu = new Menu ();
    		menu.append ("Message", "win.message");
    		menu.append ("Quit", "app.quit");
    		this.app_menu = menu;
    
    		var quit_action = new SimpleAction ("quit", null);
    		//quit_action.activate.connect (this.quit);
    		this.add_action (quit_action);
    	}
    
    	public Application () {
    		Object (application_id: "org.example.application");
    	}
    }
    
    //Η κύρια συνάρτηση δημιουργεί την εφαρμογή και την εκτελεί
    int main (string[] args) {
    	return new Application ().run (args);
    }

[ctx: text]
note: (itstool) path: info/title
en: The Model/View/Controller design (Python)
el: Η σχεδίαση προτύπου/προβολής/ελεγκτή (Python)

note: (itstool) path: info/desc (itstool) path: page/title
en: The Model/View/Controller design
el: Η σχεδίαση προτύπου/προβολής/ελεγκτή

note: (itstool) path: section/title
en: Overview
el: Επισκόπηση

note: (itstool) path: section/p
en: Both the <link xref="treeview_simple_liststore.py">TreeView</link> and the <link xref="combobox.py">ComboBox</link> widgets are built on the <em>Model/View/Controller</em> design. The <em>Model</em> (an implementation of <code>Gtk.TreeModel</code>, usually <code>Gtk.TreeStore</code> or <code>Gtk.ListStore</code>) stores the data; the <em>View</em> (e.g. <code>Gtk.TreeView</code>, <code>Gtk.ComboBox</code>, or <code>Gtk.ComboBoxText</code>) gets change notifications and displays the content of the model. The <em>Controller</em>, finally, changes the state of the model (via some methods in the model's implementation - such as <code>append()</code> or <code>remove()</code>) and notifies the view of these changes (via signals like <code>"changed"</code>).
el: Αμφότερα τα γραφικά στοιχεία <link xref="treeview_simple_liststore.py">TreeView</link> και <link xref="combobox.py">ComboBox</link> κατασκευάζονται στη σχεδίαση <em>πρότυπο/προβολή/ελεγκτής</em>. Το <em>πρότυπο</em> (μια εφαρμογή του <code>Gtk.TreeModel</code>, συνήθως <code>Gtk.TreeStore</code> ή <code>Gtk.ListStore</code>) αποθηκεύει τα δεδομένα· η <em>προβολή</em> (π.χ. <code>Gtk.TreeView</code>, <code>Gtk.ComboBox</code>, ή <code>Gtk.ComboBoxText</code>) δέχεται ειδοποιήσεις αλλαγής και εμφανίζει το περιεχόμενο του προτύπου. Ο <em>ελεγκτής</em>, τελικά, αλλάζει την κατάσταση του προτύπου (μέσα από κάποιες μεθόδους στην εφαρμογή του προτύπου - όπως <code>append()</code> ή <code>remove()</code>) και ειδοποιεί την προβολή αυτών των αλλαγών (μέσα από σήματα όπως <code>"changed"</code>).

note: (itstool) path: section/title
en: The Model
el: Το πρότυπο

note: (itstool) path: section/p
en: The main difference between the two main implementations of <code>Gtk.TreeModel</code> is that <code>Gtk.ListStore</code> contains simple rows of data without children, whereas <code>Gtk.TreeStore</code> also contains rows of data, but each row may have child rows (which in turn can have child rows, and so on).
el: Η κύρια διαφορά μεταξύ των δύο κύριων εφαρμογών του <code>Gtk.TreeModel</code> είναι ότι η <code>Gtk.ListStore</code> περιέχει απλές γραμμές δεδομένων χωρίς θυγατρικά, ενώ η <code>Gtk.TreeStore</code> περιέχει επίσης γραμμές δεδομένων, αλλά κάθε γραμμή μπορεί να έχει θυγατρικές γραμμές (που με τη σειρά τους μπορούν να έχουν θυγατρικές γραμμές κ.ο.κ).

note: (itstool) path: section/p
en: The data in the Model can be retrieved or modified using the tree iter and column index, or <code>Gtk.TreeIter</code>, or <code>Gtk.TreePath</code>.
el: Τα δεδομένα στο πρότυπο μπορούν να ανακτηθούν ή να τροποποιηθούν χρησιμοποιώντας την επανάληψη δένδρου και δείκτη στήλης, ή <code>Gtk.TreeIter</code>, ή <code>Gtk.TreePath</code>.

note: (itstool) path: section/p
en: As with Python's built-in list object you can use <code>len()</code> to get the number of rows and use slices to retrieve or set values. Otherwise, the method <code>append()</code> returns a <code>Gtk.TreeIter</code> instance, which points to the location of the newly inserted row. You can also retrieve a <code>Gtk.TreeIter</code> by calling <code>get_iter()</code>.
el: Όπως με την ενσωματωμένη λίστα αντικειμένων του Python μπορείτε να χρησιμοποιήσετε <code>len()</code> για να πάρετε τον αριθμό των γραμμών και χρησιμοποιήστε τμήματα για ανάκτηση ή ορισμό τιμών. Αλλιώς, η μέθοδος <code>append()</code> επιστρέφει ένα στιγμιότυπο <code>Gtk.TreeIter</code>, που δείχνει στη θέση της νεοεισαγμένης γραμμής. Μπορείτε επίσης να ανακτήσετε μια <code>Gtk.TreeIter</code> καλώντας <code>get_iter()</code>.

note: (itstool) path: section/p
en: As <code>Gtk.ListStore</code> contains only one level, i.e. nodes do not have any child nodes, a path is essentially the index of the row you want to access. In the case of <code>Gtk.TreeStore</code>, a path is a list of indexes or a string. The string form is a list of numbers separated by a colon. Each number refers to the offset at that level. Thus, the path <code>"0"</code> refers to the root node and the path <code>"2:4"</code> refers to the fifth child of the third node.
el: Καθώς η <code>Gtk.ListStore</code> περιέχει μόνο ένα επίπεδο, δηλαδή κόμβους που δεν έχουν οποιουσδήποτε θυγατρικούς κόμβους, μια διαδρομή είναι βασικά ένας δείκτης της γραμμής που θέλετε να προσπελάσετε. Στην περίπτωση της <code>Gtk.TreeStore</code>, μια διαδρομή είναι μια λίστα δεικτών ή μιας συμβολοσειράς. Η μορφή συμβολοσειράς είναι μια λίστα αριθμών διαχωριζόμενων με μία άνω-κάτω τελεία. Κάθε αριθμός αναφέρεται στην αντιστάθμιση αυτής της στάθμης. Έτσι, η διαδρομή <code>"0"</code> αναφέρεται στον ριζικό κόμβο και η διαδρομή <code>"2:4"</code> αναφέρεται στον πέμπτο θυγατρικό του τρίτου κόμβου.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeModel</code>:
el: Χρήσιμες μέθοδοι για ένα <code>Gtk.TreeModel</code>:

note: (itstool) path: item/p
en: <code>get_iter(path)</code> returns a <code>Gtk.TreeIter</code> instance pointing to <code>path</code>. This is expected to be a colon-separated list of numbers, or a tuple. For example, the string <code>"10:4:0"</code> is equivalent to the tuple <code>(10, 4, 0)</code>, as both would create a path of depth 3 pointing to the 11th child of the root node, the 5th child of that 11th child, and the 1st child of that 5th child.
el: Η <code>get_iter(path)</code> επιστρέφει ένα στιγμιότυπο <code>Gtk.TreeIter</code> που δείχνει στη <code>path</code>. Αυτό αναμένεται να είναι μια λίστα αριθμών διαχωριζόμενων με διπλή τελεία, ή μια πλειάδα. Για παράδειγμα, η συμβολοσειρά <code>"10:4:0"</code> είναι ισοδύναμη με την πλειάδα <code>(10, 4, 0)</code>, καθώς και οι δυο μπορούν να δημιουργήσουν μια διαδρομή βάθους 3 που να δείχνει στην 11η θυγατρική του ριζικού κόμβου, την 5η θυγατρική της 11ης θυγατρικής και 1η θυγατρική της 5ης θυγατρικής.

note: (itstool) path: item/p
en: <code>iter_next(treeiter)</code> returns a <code>Gtk.TreeIter</code> instance pointing the node following treeiter at the current level or <code>None</code> if there is no next iter.
el: Η <code>iter_next(treeiter)</code> επιστρέφει ένα στιγμιότυπο <code>Gtk.TreeIter</code> που δείχνει τον κόμβο που ακολουθεί την treeiter στο τρέχον επίπεδο ή <code>None</code> εάν δεν υπάρχει επόμενη επανάληψη.

note: (itstool) path: item/p
en: <code>iter_has_child(treeiter)</code> returns <code>True</code> if <code>treeiter</code> has children, <code>False</code> otherwise.
el: Η <code>iter_has_child(treeiter)</code> επιστρέφει <code>True</code> εάν η <code>treeiter</code> έχει θυγατρικά, αλλιώς <code>False</code>.

note: (itstool) path: item/p
en: <code>iter_children(treeiter)</code> returns a <code>Gtk.TreeIter</code> instance pointing to the first child of <code>treeiter</code> or <code>None</code> if <code>treeiter</code> has no children.
el: Η <code>iter_children(treeiter)</code> επιστρέφει ένα στιγμιότυπο <code>Gtk.TreeIter</code> που δείχνει στην πρώτη θυγατρική της <code>treeiter</code> ή <code>None</code> εάν η <code>treeiter</code> δεν έχει θυγατρικές.

note: (itstool) path: item/p
en: <code>get_iter_first()</code> returns a <code>Gtk.TreeIter</code> instance pointing to the first iterator in the tree (the one at the path <code>"0"</code>) or <code>None</code> if the tree is empty.
el: Η <code>get_iter_first()</code> επιστρέφει ένα στιγμιότυπο <code>Gtk.TreeIter</code> που δείχνει στον πρώτο επαναλήπτη στο δένδρο (αε αυτόν στη διαδρομή <code>"0"</code>) ή <code>None</code> εάν το δένδρο είναι κενό.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ListStore</code>:
el: Χρήσιμες μέθοδοι για μια <code>Gtk.ListStore</code>:

note: (itstool) path: item/p
en: <code>append(row)</code> appends a new row to this list store, where <code>row</code> can be a list of values for each column; <code>row</code> can also be omitted or <code>None</code>, and in that case an empty row will be appended. The method returns a <code>Gtk.TreeIter</code> pointing to the appended row.
el: Η <code>append(row)</code> προσαρτά μια νέα γραμμή σε αυτή την αποθήκη λίστας, όπου <code>row</code> μπορεί να είναι μια λίστα τιμών για κάθε στήλη· η <code>row</code> μπορεί επίσης να παραλειφθεί ή <code>None</code> και σε αυτήν την περίπτωση μια κενή γραμμή θα προσαρτηθεί. Η μέθοδος επιστρέφει μια <code>Gtk.TreeIter</code> που δείχνει στην προσαρτημένη γραμμή.

note: (itstool) path: item/p
en: <code>remove(iter)</code> removes <code>iter</code> from the <code>Gtk.ListStore</code>, and returns <code>True</code> if the iter is valid, and <code>False</code> if the iter is not. After being removed, <code>iter</code> is set to be the next valid row.
el: Η <code>remove(iter)</code> αφαιρεί την <code>iter</code> από την <code>Gtk.ListStore</code> και επιστρέφει <code>True</code> εάν η επανάληψη είναι έγκυρη και <code>False</code> εάν η επανάληψη δεν είναι. Μετά την αφαίρεση, η <code>iter</code> ορίζεται να είναι η επόμενη έγκυρη γραμμή.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeStore</code>:
el: Χρήσιμες μέθοδοι για μία <code>Gtk.TreeStore</code>:

note: (itstool) path: item/p
en: <code>append(parent, row)</code> appends a new row to this tree store; <code>parent</code> must be a valid Gtk.TreeIter. If parent is not <code>None</code>, then it will append the new row after the last child of parent, otherwise it will append a row to the top level; <code>row</code> can be a list of values for each column, or it can be omitted or <code>None</code>; in this latter case an empty row will be appended. The method returns a <code>Gtk.TreeIter</code> pointing to the appended row.
el: Η <code>append(parent, row)</code> προσαρτά μια νέα γραμμή σε αυτήν την αποθήκη δένδρου· ο <code>parent</code> πρέπει να είναι μια έγκυρη Gtk.TreeIter. Εάν ο γονικός δεν είναι <code>None</code>, τότε θα προσαρτήσει τη νέα γραμμή μετά την τελευταία θυγατρική του γονικού, αλλιώς θα προσαρτήσει μια γραμμή στο κορυφαίο επίπεδο· η <code>row</code> μπορεί να είναι μια λίστα τιμών για κάθε στήλη, ή μπορεί να παραληφθεί ή <code>None</code>· στην τελευταία περίπτωση μια κενή γραμμή θα προσαρτηθεί. Η μέθοδος επιστρέφει μια <code>Gtk.TreeIter</code> που δείχνει την προσαρτημένη γραμμή.

note: (itstool) path: section/title
en: The View: the TreeView case
el: Η προβολή: η περίπτωση TreeView

note: (itstool) path: section/p
en: A Treeview shows the structure of children and parent items as a tree. See for instance <link xref="treeview_treestore.py">this example</link>.
el: Μια Treeview δείχνει τη δομή των θυγατρικών και γονικών στοιχείων ως ένα δένδρο. Δείτε για παράδειγμα <link xref="treeview_treestore.py">αυτό το παράδειγμα</link>.

note: (itstool) path: section/p
en: The <code>Gtk.TreeViewColumn</code> is used to organize the vertical columns.
el: Η <code>Gtk.TreeViewColumn</code> χρησιμοποιείται για οργάνωση των κάθετων στηλών.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeView</code>:
el: Χρήσιμες μέθοδοι για μια <code>Gtk.TreeView</code>:

note: (itstool) path: item/p
en: <code>set_model(model)</code> sets the model for this tree view. If this tree view already has a model set, it will remove it before setting the new model. If model is <code>None</code>, then it will unset the old model.
el: Ο <code>set_model(model)</code> ορίζει το πρότυπο για αυτήν την προβολή δένδρου. Εάν αυτή η προβολή δένδρου έχει ήδη ένα σύνολο προτύπων, θα το αφαιρέσει πριν τη ρύθμιση του νέου προτύπου. Εάν το πρότυπο είναι <code>None</code>, τότε θα αναιρέσει το παλιό πρότυπο.

note: (itstool) path: item/p
en: <code>get_model()</code> returns the model this tree view is based on, <code>None</code> if the model is unset.
el: Η <code>get_model()</code> επιστρέφει το πρότυπο αυτής της προβολής δένδρου στο οποίο βασίζεται, <code>None</code> εάν το πρότυπο έχει αναιρεθεί.

note: (itstool) path: item/p
en: <code>append_column(column)</code> appends <code>column</code> to the list of columns.
el: Η <code>append_column(column)</code> προσαρτά <code>column</code> στη λίστα των στηλών.

note: (itstool) path: item/p
en: <code>get_selection()</code> gets the <code>Gtk.TreeSelection</code> associated with this tree view.
el: Η <code>get_selection()</code> παίρνει την <code>Gtk.TreeSelection</code> συσχετισμένη με αυτήν την προβολή δένδρου.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeViewColumn</code>:
el: Χρήσιμες μέθοδοι για μια <code>Gtk.TreeViewColumn</code>:

note: (itstool) path: item/p
en: <code>add_attribute(renderer, attribute, value)</code> adds an attribute mapping to this column. <code>attribute</code> is the parameter on <code>renderer</code> to be set from the <code>value</code>
el: Η <code>add_attribute(renderer, attribute, value)</code> προσθέτει μια απεικόνιση γνωρίσματος σε αυτήν τη στήλη. Το <code>attribute</code> είναι η παράμετρος στον <code>renderer</code> για να οριστεί από την <code>value</code>

note: (itstool) path: item/p
en: <code>pack_start(renderer, expand)</code> packs <code>renderer</code> into the beginning of this column. If <code>expand</code> is <code>False</code>, then <code>renderer</code> is allocated no more space than it needs. Any unused space is divided evenly between cells for which expand is <code>True</code>.
el: Η <code>pack_start(renderer, expand)</code> πακετάρει τον <code>renderer</code> στην αρχή αυτής της στήλης. Εάν η <code>expand</code> είναι <code>False</code>, τότε στον <code>renderer</code> δεν κατανέμεται περισσότερος χώρος από όσο χρειάζεται. Οποιοσδήποτε αχρησιμοποίητος χώρος διαιρείται εξίσου μεταξύ των κελιών για τα οποία η επέκταση είναι <code>True</code>.

note: (itstool) path: item/p
en: <code>pack_end(renderer, expand)</code> adds <code>renderer</code> to end of this column. If <code>expand</code> is <code>False</code>, then <code>renderer</code> is allocated no more space than it needs. Any unused space is divided evenly between cells for which <code>expand</code> is <code>True</code>.
el: Το <code>pack_end(renderer, expand)</code> προσθέτει τον <code>renderer</code> στο τέλος αυτής της στήλης. Εάν η <code>expand</code> είναι <code>False</code>, τότε στον <code>renderer</code> δεν κατανέμεται περισσότερος χώρος από όσο χρειάζεται. Οποιοσδήποτε αχρησιμοποίητος χώρος διαιρείται εξίσου μεταξύ των κελιών για τα οποία η <code>expand</code> είναι <code>True</code>.

note: (itstool) path: item/p
en: <code>set_sort_column_id(sort_column_id)</code> sets the column of the model by which this column (of the view) should be sorted. This also makes the column header clickable.
el: Η <code>set_sort_column_id(sort_column_id)</code> ορίζει τη στήλη του προτύπου σύμφωνα με το οποίο αυτή η στήλη (της προβολής) πρέπει να ταξινομηθεί. Αυτό επίσης κάνει την κεφαλίδα της στήλης επιλέξιμη.

note: (itstool) path: item/p
en: <code>set_sort_indicator(setting)</code> sets whether a little arrow is displayed in the column header; <code>setting</code> can either be <code>True</code> (indicator is shown) or <code>False</code>.
el: Η <code>set_sort_indicator(setting)</code> ορίζει εάν ένα μικρό βέλος εμφανίζεται στην κεφαλίδα της στήλης· η <code>setting</code> μπορεί ή να είναι <code>True</code> (ο δείκτης προβάλλεται) ή <code>False</code>.

note: (itstool) path: item/p
en: <code>set_sort_order(order)</code> changes the order by which the column is sorted; <code>order</code> can either be <code>Gtk.SortType.ASCENDING</code> or <code>Gtk.SortType.DESCENDING</code>.
el: Η <code>set_sort_order(order)</code> αλλάζει τη σειρά με την οποία η στήλη ταξινομείται· η <code>order</code> μπορεί να είναι είτε <code>Gtk.SortType.ASCENDING</code> ή <code>Gtk.SortType.DESCENDING</code>.

note: (itstool) path: section/title
en: The View: the ComboBox case
el: Η προβολή: η περίπτωση ComboBox

note: (itstool) path: section/p
en: A <code>Gtk.ComboBox</code> allows for the selection of an item from a dropdown menu, see for instance <link xref="combobox.py">this example</link>. For a list of textual choices, one can also use the simpler <code>Gtk.ComboBoxText</code>. Both <code>Gtk.ComboBox</code> and <code>Gtk.ComboBoxText</code> can contain an entry.
el: Ένα <code>Gtk.ComboBox</code> επιτρέπει την επιλογή ενός στοιχείου από ένα πτυσσόμενο μενού, δείτε <link xref="combobox.py">αυτό το παράδειγμα</link>. Για μια λίστα κειμενικών επιλογών, μπορεί κάποιος να χρησιμοποιήσει πιο απλό <code>Gtk.ComboBoxText</code>. Αμφότερα τα <code>Gtk.ComboBox</code> και <code>Gtk.ComboBoxText</code> μπορούν να περιέχουν μια καταχώριση.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ComboBox</code>:
el: Χρήσιμες μέθοδοι για ένα <code>Gtk.ComboBox</code>:

note: (itstool) path: item/p
en: The static method <code>new_with_entry()</code> creates a new empty <code>Gtk.ComboBox</code> with an entry; the static method <code>new_with_model(model)</code> creates a new one with the model initialized to <code>model</code>; and the static method <code>new_with_model_and_entry(model)</code> is a combination of the two.
el: Η στατική μέθοδος <code>new_with_entry()</code> δημιουργεί ένα νέο κενό <code>Gtk.ComboBox</code> με μια εισαγωγή· η στατική μέθοδος <code>new_with_model(model)</code> δημιουργεί μια νέα με το αρχικοποιημένο πρότυπο στο <code>model</code>· και η στατική μέθοδος <code>new_with_model_and_entry(model)</code> είναι ένας συνδυασμός των δύο.

note: (itstool) path: item/p
en: <code>get_active_iter()</code> returns a <code>Gtk.TreeIter</code> pointing to the current active item. If no active item exists, <code>None</code> is returned.
el: Η <code>get_active_iter()</code> επιστρέφει μια <code>Gtk.TreeIter</code> που δείχνει στο τρέχον ενεργό στοιχείο. Εάν δεν υπάρχει ενεργό στοιχείο, επιστρέφεται <code>None</code>.

note: (itstool) path: item/p
en: <code>set_model(model)</code> sets the model used by this combo box to be <code>model</code>, and it will unset a previously set model (if there is any). If <code>model</code> is <code>None</code>, then it will unset the model. Note that this function does not clear the cell renderers.
el: Ο <code>set_model(model)</code> ορίζει το χρησιμοποιούμενο πρότυπο από αυτό το σύνθετο πλαίσιο για να είναι <code>model</code> και θα αναιρέσει ένα προηγούμενο πρότυπο συνόλου (εάν υπάρχει κάποιο). Εάν το <code>model</code> είναι <code>None</code>, τότε θα αναιρέσει το πρότυπο. Σημειώστε ότι αυτή η συνάρτηση δεν καθαρίζει τους απεικονιστές κελιών.

note: (itstool) path: item/p
en: <code>set_entry_text_column(text_column)</code> sets the model column which this combo box should use to get strings from to be <code>text_column</code>. The column <code>text_column</code> in the model of this combo box must be of type <code>str</code> (this is only relevant if this combo box has been created with the “has-entry” property set to True).
el: Ο <code>set_entry_text_column(text_column)</code> ορίζει τη στήλη προτύπου την οποία αυτό το σύνθετο πλαίσιο πρέπει να χρησιμοποιήσει για να πάρει συμβολοσειρές από <code>text_column</code>. Η στήλη <code>text_column</code> σε αυτό το πρότυπο αυτού του σύνθετου πλαισίου πρέπει να είναι του τύπου <code>str</code> (αυτό είναι κατάλληλο μόνο εάν αυτό το σύνθετο πλαίσιο δημιουργήθηκε με την ιδιότητα “has-entry” ορισμένη σε αληθή).

note: (itstool) path: item/p
en: <code>set_wrap_width(width)</code> sets the wrap width of this combo box to be <code>width</code>. The wrap width is basically the preferred number of columns when you want the popup to be layed out in a grid.
el: Ο <code>set_wrap_width(width)</code> ορίζει το πλάτος αναδίπλωσης αυτού του σύνθετου πλαισίου να είναι <code>width</code>. Το πλάτος αναδίπλωσης είναι βασικά ο προτιμώμενος αριθμός των στηλών όταν θέλετε το αναδυόμενο να εμφανιστεί σε ένα πλέγμα.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ComboBoxText</code>:
el: Χρήσιμες μέθοδοι για ένα <code>Gtk.ComboBoxText</code>:

note: (itstool) path: item/p
en: The static method <code>new_with_entry()</code> creates a new empty <code>Gtk.ComboBoxText</code> with an entry.
el: Η στατική μέθοδος <code>new_with_entry()</code> δημιουργεί ένα νέο κενό <code>Gtk.ComboBoxText</code> με μια εγγραφή.

note: (itstool) path: item/p
en: <code>append_text(text)</code> appends <code>text</code> to the list of strings stored in this combo box.
el: Η <code>append_text(text)</code> προσαρτά το <code>text</code> στη λίστα των αποθηκευμένων συμβολοσειρών σε αυτό το σύνθετο πλαίσιο.

note: (itstool) path: item/p
en: <code>get_active_text()</code> returns the currently active string in this combo box, or <code>None</code> if none is selected. If this combo box contains an entry, this function will return its contents (which will not necessarily be an item from the list).
el: Η <code>get_active_text()</code> επιστρέφει την τρέχουσα ενεργή συμβολοσειρά σε αυτό το σύνθετο πλαίσιο ή <code>None</code> εάν δεν επιλέγεται τίποτα. Εάν αυτό το σύνθετο πλαίσιο περιέχει μια εγγραφή, αυτή η συνάρτηση θα επιστρέψει τα περιεχόμενα της (που δεν θα είναι αναγκαστικά ένα στοιχείο από τη λίστα).

note: (itstool) path: section/title
en: The View: the Cellrenderers
el: Η προβολή: οι απεικονιστές κελιού

note: (itstool) path: section/p
en: The View makes use of <code>Gtk.CellRenderer</code>s of various types to draw the data.
el: Η προβολή κάνει χρήση των <code>Gtk.CellRenderer</code> των ποικίλων τύπων σχεδίασης των δεδομένων.

note: (itstool) path: section/p
en: Implementations of <code>Gtk.CellRenderer</code> and useful methods:
el: Εφαρμογές του <code>Gtk.CellRenderer</code> και χρήσιμες μέθοδοι:

note: (itstool) path: item/p
en: <code>Gtk.CellRendererText</code> - renders text in a cell
el: <code>Gtk.CellRendererText</code> - αποδίδει κείμενο σε ένα κελί

note: (itstool) path: item/p
en: <code>Gtk.CellRendererToggle</code> - renders a toggle or radio button in a cell. Useful methods:
el: <code>Gtk.CellRendererToggle</code> - αποδίδει μια εναλλαγή ή ραδιοπλήκτρο σε ένα κελί. Χρήσιμες μέθοδοι:

note: (itstool) path: item/p
en: <code>set_active(setting)</code> - activates or deactivates a cell renderer
el: <code>set_active(setting)</code> - ενεργοποιεί ή απενεργοποιεί έναν απεικονιστή κελιών

note: (itstool) path: item/p
en: <code>get_active()</code> - returns whether the cell renderer is active
el: <code>get_active()</code> - επιστρέφει εάν ο απεικονιστής κελιών είναι ενεργός

note: (itstool) path: item/p
en: <code>set_radio(radio)</code> - if radio is <code>True</code>, the cell renderer renders a radio toggle (i.e. a toggle in a group of mutually-exclusive toggles); if <code>False</code>, it renders a check toggle (a standalone boolean option)
el: <code>set_radio(radio)</code> - εάν το ραδιοπλήκτρο είναι <code>True</code>, ο απεικονιστής κελιών αποδίδει μια εναλλαγή του ραδιοπλήκτρου (δηλαδή μια εναλλαγή σε μια ομάδα αμοιβαία αποκλειόμενων εναλλαγών)· εάν <code>False</code>, αποδίδει μια εναλλαγή ελέγχου (μια αυτόνομη επιλογή τιμής Μπουλ)

note: (itstool) path: item/p
en: <code>get_radio()</code> - returns whether we are rendering radio toggles rather than checkboxes.
el: <code>get_radio()</code> - επιστρέφει εάν αποδίδουμε ραδιοεναλλαγές αντί για πλαίσια ελέγχου.

note: (itstool) path: item/p
en: <code>Gtk.CellRendererPixbuf</code> - renders an image in a cell
el: <code>Gtk.CellRendererPixbuf</code> - αποδίδει μια εικόνα σε ένα κελί

note: (itstool) path: item/p
en: <code>Gtk.CellRendererCombo</code> - renders text in a cell; but while <code>Gtk.CellRendererText</code> offers a simple entry to edit the text, <code>Gtk.CellRendererCombo</code> offers a <code>Gtk.ComboBox</code> widget to edit the text. It can be used with and without an associated Gtk.Entry widget, depending on the value of the “has-entry” property.
el: <code>Gtk.CellRendererCombo</code> - αποδίδει κείμενο σε ένα κελί· αλλά ενώ το <code>Gtk.CellRendererText</code> προσφέρει μια απλή εγγραφή για επεξεργασία του κειμένου, το <code>Gtk.CellRendererCombo</code> προσφέρει ένα γραφικό στοιχείο <code>Gtk.ComboBox</code> για επεξεργασία του κειμένου. Μπορεί να χρησιμοποιηθεί με και χωρίς ένα συσχετισμένο γραφικό στοιχείο Gtk.Entry, ανάλογα με την τιμή της ιδιότητας “has-entry”.

note: (itstool) path: item/p
en: <code>Gtk.CellRendererProgress</code> - renders a numeric value as a progress bar in a cell; it can display a text on top of the progress bar
el: <code>Gtk.CellRendererProgress</code> - αποδίδει μια αριθμητική τιμή ως μια γραμμή προόδου σε ένα κελί· μπορεί να εμφανίσει ένα κείμενο στην κορυφή της γραμμής προόδου

note: (itstool) path: item/p
en: <code>Gtk.CellRendererSpinner</code> - renders a spinning animation in a cell
el: <code>Gtk.CellRendererSpinner</code> - αποδίδει μια κίνηση μέτρησης σε ένα κελί

note: (itstool) path: item/p
en: <code>Gtk.CellRendererSpin</code> - renders a spin button in a cell
el: <code>Gtk.CellRendererSpin</code> - αποδίδει ένα κουμπί περιστροφής σε ένα κελί

note: (itstool) path: item/p
en: <code>Gtk.CellRendererAccel</code> - renders a keyboard accelerator in a cell
el: <code>Gtk.CellRendererAccel</code> - αποδίδει έναν επιταχυντή πληκτρολογίου σε ένα κελί

note: (itstool) path: section/title
en: The Controller: the Selection
el: Ο ελεγκτής: η επιλογή

note: (itstool) path: section/p
en: Most applications will need to not only deal with displaying data, but also receiving input events from users. To do this, simply get a reference to a selection object and connect to the <code>"changed"</code> signal.
el: Οι περισσότερες εφαρμογές θα χρειαστεί να αντιμετωπίσουν μόνο εμφανιζόμενα δεδομένα, αλλά επίσης να δεχθούν συμβάντα εισαγωγής από τους χρήστες. Για να γίνει αυτό, πάρτε απλά μια αναφορά σε ένα αντικείμενο επιλογής και συνδεθείτε στο σήμα <code>"changed"</code>.

note: (itstool) path: section/p
en: Then to retrieve data for the row selected:
el: Έπειτα για να ανακτήσετε δεδομένα για την επιλεγμένη γραμμή:

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeSelection</code>:
el: Χρήσιμες μέθοδοι για <code>Gtk.TreeSelection</code>:

note: (itstool) path: item/p
en: <code>set_mode(type)</code> sets the type of selection, where type is one of
el: <code>set_mode(type)</code> ορίζει τον τύπο της επιλογής, όπου τύπος είναι ένας από

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.NONE</code> - no selection is possible
el: <code>Gtk.SelectionMode.NONE</code> - καμιά επιλογή δεν είναι δυνατή

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.SINGLE</code> - zero or one element may be selected
el: <code>Gtk.SelectionMode.SINGLE</code> - κανένα ή ένα στοιχείο μπορεί να επιλεγεί

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.BROWSE</code> - exactly one element is selected. In some circumstances, such as initially or during a search operation, it’s possible for no element to be selected. What is really enforced is that the user can’t deselect a currently selected element except by selecting another element.
el: <code>Gtk.SelectionMode.BROWSE</code> - ακριβώς ένα στοιχείο επιλέγεται. Σε μερικές περιπτώσεις, όπως αρχικά ή κατά τη διάρκεια μιας λειτουργίας αναζήτησης, είναι δυνατό να μην επιλεγεί κανένα στοιχείο. Αυτό που είναι πραγματικά υποχρεωτικό είναι να μην μπορεί να αποεπιλέξει ο χρήστης ένα τρέχον επιλεγμένο στοιχείο εκτός από την επιλογή ενός άλλου στοιχείου.

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.MULTIPLE</code> -any number of elements may be selected. Clicks toggle the state of an item. The Ctrl key may be used to enlarge the selection, and Shift key to select between the focus and the child pointed to. Some widgets may also allow Click-drag to select a range of elements.
el: <code>Gtk.SelectionMode.MULTIPLE</code> - οποιοσδήποτε αριθμός στοιχείων μπορεί να επιλεγεί. Το πάτημα εναλλάσσει την κατάσταση ενός στοιχείου. Το πλήκτρο Ctrl μπορεί να χρησιμοποιηθεί για μεγέθυνση της επιλογής και το πλήκτρο Shift για επιλογή μεταξύ εστίασης και του θυγατρικού στο οποίο δείχνει. Μερικά γραφικά στοιχεία μπορούν επίσης να επιτρέψουν πάτημα-μεταφορά για επιλογή μιας περιοχής στοιχείων.

note: (itstool) path: item/p
en: <code>get_selected()</code> returns a tuple <code>(model, treeiter)</code>, where <code>model</code> is the current model and <code>treeiter</code> a <code>Gtk.TreeIter</code> pointing to the currently selected row, or None if no rows are selected. The method does not work if the selection mode is set to <code>Gtk.SelectionMode.MULTIPLE</code>; in that case, use <code>get_selected_rows()</code> instead, which Returns a list of <code>Gtk.TreePath</code> instances of all selected rows.
el: <code>get_selected()</code> επιστρέφει μια πλειάδα <code>(model, treeiter)</code>, όπου <code>model</code> είναι το τρέχον πρότυπο και <code>treeiter</code> ένα <code>Gtk.TreeIter</code> που δείχνει στην τρέχουσα επιλεγμένη γραμμή, ή τίποτα εάν δεν επιλεγούν γραμμές. Η μέθοδος δεν δουλεύει εάν η κατάσταση επιλογής οριστεί σε <code>Gtk.SelectionMode.MULTIPLE</code>· σε αυτήν την περίπτωση, χρησιμοποιήστε <code>get_selected_rows()</code>, που επιστρέφει μια λίστα στιγμιοτύπων <code>Gtk.TreePath</code> όλων των επιλεγμένων γραμμών.

note: (itstool) path: section/title
en: References
el: Αναφορές

[ctx: text]
note: (itstool) path: info/title
en: Paned (C)
el: Σε φατνώματα (C)

note: (itstool) path: info/desc
en: A widget with two adjustable panes
el: Ένα γραφικό στοιχείο με δύο ρυθμίσιμα φατνώματα

note: (itstool) path: page/title
en: Paned
el: Σε φάτνωμα

note: (itstool) path: page/p
en: Two images in two adjustable panes, horizontally aligned.
el: Δύο εικόνες σε δύο ρυθμίσιμα φατνώματα οριζόντια στοιχισμένες.

[ctx: text]
note: (itstool) path: info/title
en: Paned (JavaScript)
el: Με φάτνωμα (JavaScript)

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const PanedExample = new Lang.Class ({
        Name: 'Paned Example',
    
        // Create the application itself
        _init: function () {
            this.application = new Gtk.Application({ application_id: 'org.example.panedexample' });
    
           // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function() {
            this.window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function () {
            this._buildUI ();
        },
    
        // Build the application's UI
        _buildUI: function() {
            // Create the application window
            this.window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                        window_position: Gtk.WindowPosition.CENTER,
                                                        title: "Paned Window Example",
                                                        default_width: 450,
                                                        default_height: 350,
                                                        border_width: 10 });
    
            // a new widget with two adjustable panes,
            // one on the left and one on the right
            this.paned = Gtk.Paned.new(Gtk.Orientation.HORIZONTAL);
    
            // two images
            this.image1 = new Gtk.Image();
            this.image1.set_from_file("gnome-image.png");
            this.image2 = new Gtk.Image();
            this.image2.set_from_file("tux.png");
    
            // add the first image to the left pane
            this.paned.add1(this.image1);
            // add the second image to the right pane
            this.paned.add2(this.image2)
    
            // add the panes to the window
            this.window.add(this.paned)
            this.window.show_all();
        }
    });
    
    // Run the application
    let app = new PanedExample();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const PanedExample = new Lang.Class ({
        Name: 'Paned Example',
    
        // Δημιουργία της ίδιας της εφαρμογής
        _init: function () {
            this.application = new Gtk.Application({ application_id: 'org.example.panedexample' });
    
           // Σύνδεση σημάτων '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 ();
        },
    
        // Κατασκευή της γραφικής διεπαφής της εφαρμογής
        _buildUI: function() {
            // Create the application window
            this.window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                        window_position: Gtk.WindowPosition.CENTER,
                                                        title: "Paned Window Example",
                                                        default_width: 450,
                                                        default_height: 350,
                                                        border_width: 10 });
    
            // ένα νέο γραφικό στοιχείο με δύο ρυθμίσιμα παράθυρα,
            // ένα στα αριστερά και ένα στα δεξιά
            this.paned = Gtk.Paned.new(Gtk.Orientation.HORIZONTAL);
    
            // δύο εικόνες
            this.image1 = new Gtk.Image();
            this.image1.set_from_file("gnome-image.png");
            this.image2 = new Gtk.Image();
            this.image2.set_from_file("tux.png");
    
            // προσθήκη της πρώτης εικόνας στο αριστερό παράθυρο
            this.paned.add1(this.image1);
            // add the second image to the right pane
            this.paned.add2(this.image2)
    
            // προσθήκη των φατνωμάτων στο παράθυρο
            this.window.add(this.paned)
            this.window.show_all();
        }
    });
    
    // εκτέλεση της εφαρμογής
    let app = new PanedExample();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: Paned (Python)
el: Με φάτνωμα (Python)

note: (itstool) path: section/title
en: Useful methods for a Paned widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο σε φάτνωμα

note: (itstool) path: section/p
en: To have two vertically aligned panes, use <code>Gtk.Orientation.VERTICAL</code> instead of <code>Gtk.Orientation.HORIZONTAL</code>. The method <code>add1(widget1)</code> will add the <code>widget1</code> to the top pane, and <code>add2(widget2)</code> will add the <code>widget2</code> to the bottom pane.
el: Για να έχετε δύο κάθετα στοιχισμένα φατνώματα, χρησιμοποιήστε <code>Gtk.Orientation.VERTICAL</code> αντί για <code>Gtk.Orientation.HORIZONTAL</code>. Η μέθοδος <code>add1(widget1)</code> θα προσθέσει το <code>widget1</code> στο κορυφαίο φάτνωμα και <code>add2(widget2)</code> θα προσθέσει το <code>widget2</code> στο κάτω φάτνωμα.

[ctx: text]
note: (itstool) path: info/title
en: Paned (Vala)
el: Με φάτνωμα (Vala)

note: (itstool) path: section/code
en: /* This is the application. */
    public class MyApplication : Gtk.Application {
    	/* Override the 'activate' signal of GLib.Application. */
    	protected override void activate () {
    
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "Paned Example";
    		window.set_default_size (450,350);
    
    		// a new widget with two adjustable panes,
    		// one on the left and one on the right
    		var paned = new Gtk.Paned (Gtk.Orientation.HORIZONTAL);
    
    		/* two images */
    		var image1 = new Gtk.Image ();
    		image1.set_from_file ("gnome-image.png");
    		var image2 = new Gtk.Image ();
    		image2.set_from_file ("tux.png");
    
    		/* add the first image to the left pane */
    		paned.add1 (image1);
    
    		/* add the second image to the right pane */
    		paned.add2 (image2);
    
    		/* add the panes to the window */
    		window.add (paned);
    		window.show_all ();
    	}
    }
    
    /* main creates and runs the application. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
el: /* Αυτή είναι μια εφαρμογή. */
    public class MyApplication : Gtk.Application {
    	/* Αντικατάσταση του σήματος 'activate' του GLib.Application. */
    	protected override void activate () {
    
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "Paned Example";
    		window.set_default_size (450,350);
    
    		// ένα νέο γραφικό στοιχείο με δύο ρυθμίσιμα φατνώματα,
    		// ένα στα αριστερά κι ένα στα δεξιά
    		var paned = new Gtk.Paned (Gtk.Orientation.HORIZONTAL);
    
    		/* δύο εικόνες */
    		var image1 = new Gtk.Image ();
    		image1.set_from_file ("gnome-image.png");
    		var image2 = new Gtk.Image ();
    		image2.set_from_file ("tux.png");
    
    		/* προσθήκη της πρώτης εικόνας στο αριστερό φάτνωμα */
    		paned.add1 (image1);
    
    		/* προσθήκη της δεύτερης εικόνας στο δεξιό φάτνωμα */
    		paned.add2 (image2);
    
    		/* προσθήκη των φατνωμάτων στο παράθυρο */
    		window.add (paned);
    		window.show_all ();
    	}
    }
    
    /* το κύριο δημιουργεί και εκτελεί την εφαρμογή. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

[ctx: text]
note: (itstool) path: info/title
en: Photo wall (C)
el: Φωτογραφικός τοίχος (C)

note: (itstool) path: info/desc
en: A Clutter image viewer
el: Ένας προβολέας εικόνων σε Clutter

note: (itstool) path: page/title
en: Photo wall
el: Φωτογραφικός τοίχος

note: (itstool) path: synopsis/p
en: For this example we will build a simple image viewer using Clutter. You will learn:
el: Για αυτό το παράδειγμα θα κατασκευάσουμε έναν απλό προβολέα εικόνων χρησιμοποιώντας το Clutter. Θα μάθετε:

note: (itstool) path: item/p
en: How to size and position <code>ClutterActor</code>s
el: Αυξομείωση και τοποθέτηση του <code>ClutterActor</code>s

note: (itstool) path: item/p
en: How to place an image in a <code>ClutterActor</code>
el: Πώς να τοποθετήσετε μια εικόνα σε ένα <code>ClutterActor</code>

note: (itstool) path: item/p
en: How to do simple transitions using Clutter's animation framework
el: Πώς να κάνετε απλές μεταβάσεις χρησιμοποιώντας το σκελετό κίνησης του Clutter

note: (itstool) path: item/p
en: How to make <code>ClutterActor</code>s respond to mouse events
el: Πώς να κάνετε το <code>ClutterActor</code>s να απαντήσει στα συμβάντα του ποντικιού

note: (itstool) path: item/p
en: How to get file names from a directory
el: Πώς να πάρετε ονόματα αρχείου από έναν κατάλογο

note: (itstool) path: section/title
en: Introduction
el: Εισαγωγή

note: (itstool) path: section/p
en: Clutter is a library for creating dynamic user interfaces using OpenGL for hardware acceleration. This example demonstrates a small, but central, part of the Clutter library to create a simple but attractive image viewing program.
el: Το Clutter είναι μια βιβλιοθήκη για δημιουργία δυναμικών διεπαφών χρήστη χρησιμοποιώντας το OpenGL για επιτάχυνση υλικού. Αυτό το παράδειγμα δείχνει ένα μικρό, αλλά κεντρικό, τμήμα της Clutter για δημιουργία ενός απλού αλλά ελκυστικού προγράμματος προβολής εικόνας.

note: (itstool) path: section/p
en: To help us reach our goal we will be utilising a few other common pieces of GLib as well. Most importantly, we'll use one <code>GPtrArray</code>, a dynamic array of pointers, to hold the file path names. We will also use <code>GDir</code>, a utility for working with directories, to access our image directory and gather file paths.
el: Για να μας βοηθήσετε να φτάσουμε τον στόχο μας θα χρησιμοποιήσουμε λίγα άλλα κοινά κομμάτια του GLib επίσης. Το πιο σημαντικό, θα χρησιμοποιήσουμε ένα <code>GPtrArray</code>, έναν δυναμικό πίνακα δεικτών, για να κρατήσουμε τα ονόματα διαδρομής αρχείου. Θα χρησιμοποιήσουμε επίσης <code>GDir</code>, ένα βοήθημα για εργασία με καταλόγους, για προσπέλαση του καταλόγου της εικόνας μας και να συγκεντρώσουμε τις διαδρομές του αρχείου.

note: (itstool) path: item/p
en: Choose <gui>GTK+ (simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>photo-wall</file> as project name and directory.
el: Επιλέξτε <gui>GTK+ (απλό)</gui> από την καρτέλα <gui>C</gui>, πατήστε <gui>συνέχεια</gui> και συμπληρώστε τις λεπτομέρειές σας στις επόμενες λίγες σελίδες. Χρησιμοποιήστε το <file>photo-wall</file> ως όνομα του έργου και του καταλόγου.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.c">Guitar-Tuner</link> tutorial using the interface builder.
el: Σιγουρευτείτε ότι η <gui>χρήση του GtkBuilder για διεπαφή χρήστη</gui> είναι ανενεργή επειδή θα φτιάξουμε το UI χειροκίνητα σε αυτό το μάθημα. Σημειώστε το μάθημα <link xref="guitar-tuner.c">ρυθμιστής κιθάρας</link> χρησιμοποιώντας τον κατασκευαστή διεπαφής.

note: (itstool) path: item/p
en: Enable <gui>Configure external packages</gui>. On the next page, select <em>clutter-1.0</em> from the list to include the Clutter library in your project.
el: Ενεργοποιήστε <gui>ρύθμιση εξωτερικών πακέτων</gui>. Στην επόμενη σελίδα, επιλέξτε <em>clutter-1.0</em> από τη λίστα για να συμπεριλάβετε τη βιβλιοθήκη Clutter στο έργο σας.

note: (itstool) path: section/title
en: A look at Photo Wall
el: Μια ματιά στο φωτογραφικό πίνακα

note: (itstool) path: section/p
en: Our image viewer presents the user with a wall of images.
el: Ο προβολέας εικόνας μας παρουσιάζει τον χρήστη με έναν τοίχο εικόνων.

note: (itstool) path: section/p
en: When an image is clicked, it is animated to fill the viewing area. When the image having focus is clicked it is returned to its original position using an animation with the same duration of 500 milliseconds.
el: Όταν κάνουμε κλικ σε μια εικόνα, κινείται για να γεμίσει την περιοχή προβολής. Όταν κάνουμε κλικ σε μια εστιασμένη εικόνα επιστρέφεται στην αρχική της θέση χρησιμοποιώντας μια κίνηση με την ίδια διάρκεια των 500 ms.

note: (itstool) path: section/title
en: Initial setup
el: Αρχική ρύθμιση

note: (itstool) path: section/p
en: The following code segment contains many of the defines and variables we will be using in the following sections. Use this as a reference for later sections. Copy this code to the beginning of <file>src/main.c</file>:
el: Το παρακάτω τμήμα κώδικα περιέχει πολλούς ορισμούς και μεταβλητές που θα χρησιμοποιήσουμε στις παρακάτω ενότητες. Χρησιμοποιήστε αυτό ως αναφορά για άλλες ενότητες. Αντιγράψτε αυτόν τον κώδικα στην αρχή του <file>src/main.c</file>:

note: (itstool) path: section/code
en: 
    #include &lt;gdk-pixbuf/gdk-pixbuf.h&gt;
    #include &lt;clutter/clutter.h&gt;
    
    #define STAGE_WIDTH  800
    #define STAGE_HEIGHT 600
    
    #define THUMBNAIL_SIZE 200
    #define ROW_COUNT (STAGE_HEIGHT / THUMBNAIL_SIZE)
    #define COL_COUNT (STAGE_WIDTH  / THUMBNAIL_SIZE)
    #define THUMBNAIL_COUNT (ROW_COUNT * COL_COUNT)
    
    #define ANIMATION_DURATION_MS 500
    
    #define IMAGE_DIR_PATH "./berlin_images/"
    
    static GPtrArray *img_paths;
    
    static ClutterPoint unfocused_pos;
el: 
    #include &lt;gdk-pixbuf/gdk-pixbuf.h&gt;
    #include &lt;clutter/clutter.h&gt;
    
    #define STAGE_WIDTH  800
    #define STAGE_HEIGHT 600
    
    #define THUMBNAIL_SIZE 200
    #define ROW_COUNT (STAGE_HEIGHT / THUMBNAIL_SIZE)
    #define COL_COUNT (STAGE_WIDTH  / THUMBNAIL_SIZE)
    #define THUMBNAIL_COUNT (ROW_COUNT * COL_COUNT)
    
    #define ANIMATION_DURATION_MS 500
    
    #define IMAGE_DIR_PATH "./berlin_images/"
    
    static GPtrArray *img_paths·
    
    static ClutterPoint unfocused_pos·

note: (itstool) path: section/title
en: Jumping into the code
el: Μετάβαση στον κώδικα

note: (itstool) path: section/p
en: We will start by taking a look at the <code>main()</code> function as a whole. Then we'll discuss the other code sections in detail. Change the <file>src/main.c</file> to contain this <code>main()</code> function. You can delete the <code>create_window()</code> function as we don't need it in this example.
el: Θα ξεκινήσουμε ρίχνοντας μια ματιά στη συνάρτηση <code>main()</code> ως σύνολο. Έπειτα θα συζητήσουμε τις άλλες ενότητες κώδικα λεπτομερώς. Αλλάξτε το <file>src/main.c</file> για να περιέχει αυτήν την συνάρτηση <code>main()</code>. Μπορείτε να διαγράψετε τη συνάρτηση <code>create_window()</code> καθώς δεν τη χρειαζόμαστε σε αυτό το παράδειγμα.

note: (itstool) path: section/code
en: 
    int
    main(int argc, char *argv[])
    {
        ClutterColor stage_color = { 16, 16, 16, 255 };
        ClutterActor *stage = NULL;
    
        if (clutter_init (&amp;argc, &amp;argv) != CLUTTER_INIT_SUCCESS)
            return 1;
    
        stage = clutter_stage_new();
        clutter_actor_set_size(stage, STAGE_WIDTH, STAGE_HEIGHT);
        clutter_actor_set_background_color(stage, &amp;stage_color);
        clutter_stage_set_title(CLUTTER_STAGE (stage), "Photo Wall");
        g_signal_connect(stage, "destroy", G_CALLBACK(clutter_main_quit), NULL);
    
        load_image_path_names();
    
        guint row = 0;
        guint col = 0;
        for(row=0; row &lt; ROW_COUNT; ++row)
        {
            for(col=0; col &lt; COL_COUNT; ++col)
            {
                const char *img_path = g_ptr_array_index(img_paths, (row * COL_COUNT) + col);
                GdkPixbuf *pixbuf = gdk_pixbuf_new_from_file_at_size(img_path, STAGE_HEIGHT, STAGE_HEIGHT, NULL);
                ClutterContent *image = clutter_image_new ();
                ClutterActor *actor = clutter_actor_new ();
    
                if (pixbuf != NULL)
                {
                    clutter_image_set_data(CLUTTER_IMAGE(image),
                                           gdk_pixbuf_get_pixels(pixbuf),
                                           gdk_pixbuf_get_has_alpha(pixbuf)
                                               ? COGL_PIXEL_FORMAT_RGBA_8888
                                               : COGL_PIXEL_FORMAT_RGB_888,
                                           gdk_pixbuf_get_width(pixbuf),
                                           gdk_pixbuf_get_height(pixbuf),
                                           gdk_pixbuf_get_rowstride(pixbuf),
                                           NULL);
                }
    
                clutter_actor_set_content(actor, image);
                g_object_unref(image);
                g_object_unref(pixbuf);
    
                initialize_actor(actor, row, col);
                clutter_actor_add_child(stage, actor);
            }
        }
    
        /* Show the stage. */
        clutter_actor_show(stage);
    
        /* Start the clutter main loop. */
        clutter_main();
    
        g_ptr_array_unref(img_paths);
    
        return 0;
    }
el: 
    int
    main(int argc, char *argv[])
    {
        ClutterColor stage_color = { 16, 16, 16, 255 }·
        ClutterActor *stage = NULL·
    
        if (clutter_init (&amp;argc, &amp;argv) != CLUTTER_INIT_SUCCESS)
            return 1·
    
        stage = clutter_stage_new()·
        clutter_actor_set_size(stage, STAGE_WIDTH, STAGE_HEIGHT)·
        clutter_actor_set_background_color(stage, &amp;stage_color)·
        clutter_stage_set_title(CLUTTER_STAGE (stage), "Photo Wall")·
        g_signal_connect(stage, "destroy", G_CALLBACK(clutter_main_quit), NULL)·
    
        load_image_path_names()·
    
        guint row = 0·
        guint col = 0·
        for(row=0· row &lt; ROW_COUNT· ++row)
        {
            for(col=0· col &lt; COL_COUNT· ++col)
            {
                const char *img_path = g_ptr_array_index(img_paths, (row * COL_COUNT) + col)·
                GdkPixbuf *pixbuf = gdk_pixbuf_new_from_file_at_size(img_path, STAGE_HEIGHT, STAGE_HEIGHT, NULL)·
                ClutterContent *image = clutter_image_new ()·
                ClutterActor *actor = clutter_actor_new ()·
    
                if (pixbuf != NULL)
                {
                    clutter_image_set_data(CLUTTER_IMAGE(image),
                                           gdk_pixbuf_get_pixels(pixbuf),
                                           gdk_pixbuf_get_has_alpha(pixbuf)
                                               ; COGL_PIXEL_FORMAT_RGBA_8888
                                               : COGL_PIXEL_FORMAT_RGB_888,
                                           gdk_pixbuf_get_width(pixbuf),
                                           gdk_pixbuf_get_height(pixbuf),
                                           gdk_pixbuf_get_rowstride(pixbuf),
                                           NULL)·
                }
    
                clutter_actor_set_content(actor, image)·
                g_object_unref(image)·
                g_object_unref(pixbuf)·
    
                initialize_actor(actor, row, col)·
                clutter_actor_add_child(stage, actor)·
            }
        }
    
        /* Show the stage. */
        clutter_actor_show(stage)·
    
        /* Start the clutter main loop. */
        clutter_main()·
    
        g_ptr_array_unref(img_paths)·
    
        return 0·
    }

note: (itstool) path: item/p
en: Line 4: <code>ClutterColor</code> is defined by setting the red, green, blue and transparency (alpha) values. The values range from 0-255. For transparency a value of 255 is opaque.
el: Γραμμή 4: <code>ClutterColor</code> ορίστηκε ορίζοντας τις τιμές κόκκινου, πράσινου, γαλάζιου και διαφάνειας (άλφα). Το εύρος τιμών από 0-255. Για διαφάνεια τιμή 255 είναι αδιαφανής.

note: (itstool) path: item/p
en: Line 7: You must initialize Clutter. If you forget to do this, you will get very strange errors. Be warned.
el: Γραμμή 7: Πρέπει να αρχικοποιήσετε το Clutter. Εάν το ξεχάσετε, θα πάρετε πολύ περίεργα σφάλματα. Προειδοποιηθήκατε.

note: (itstool) path: item/p
en: Lines 10‒14: Here we create a new <code>ClutterStage</code> . We then set the size using the defines from the previous section and the address of the <code>ClutterColor</code> we just defined.
el: Γραμμές 10-14: Εδώ δημιουργούμε ένα νέο <code>ClutterStage</code>. Έπειτα ορίζουμε το μέγεθος χρησιμοποιώντας τους ορισμούς από την προηγούμενη ενότητα και τη διεύθυνση του <code>ClutterColor</code> που μόλις ορίσαμε.

note: (itstool) path: note/p
en: A <code>ClutterStage</code> is the top-level <code>ClutterActor</code> onto which other <code>ClutterActor</code>s are placed.
el: Ένα <code>ClutterStage</code> είναι ανώτατου επιπέδου <code>ClutterActor</code> στο οποίο τοποθετούνται άλλοι <code>ClutterActor</code>.

note: (itstool) path: item/p
en: Line 16: Here we call our function for getting the image file paths. We'll look at this in a bit.
el: Γραμμή 16: Εδώ καλούμε τη συνάρτηση μας για λήψη των διαδρομών αρχείου εικόνας. Θα το δούμε σε λίγο.

note: (itstool) path: item/p
en: Lines 18‒49: This is where we set up the <code>ClutterActor</code>s, load the images and place them into their spot in the image wall. We will look at this in detail in the next section.
el: Γραμμές 18-49: Εδώ ρυθμίζουμε το <code>ClutterActor</code>s, φόρτωση των εικόνων και τοποθέτησή τους στο σημείο τους στον τοίχο εικόνας. Θα το δούμε λεπτομερώς στην επόμενη ενότητα.

note: (itstool) path: item/p
en: Line 52: Show the stage and <em>all its children</em>, meaning our images.
el: Γραμμή 52: εμφάνιση του σταδίου και <em>όλων των θυγατρικών του</em>, που σημαίνει των εικόνων μας.

note: (itstool) path: item/p
en: Line 55: Start the Clutter main loop.
el: Γραμμή 55: Έναρξη του κύριου βρόχου του Clutter.

note: (itstool) path: section/title
en: Setting up our image actors
el: Εγκατάσταση των δραστών εικόνας

note: (itstool) path: note/p
en: In Clutter, an actor is the most basic visual element. Basically, everything you see is an actor.
el: Στο Clutter, ένας δράστης είναι το πιο βασικό οπτικό στοιχείο. Βασικά, οτιδήποτε βλέπετε είναι ένας δράστης.

note: (itstool) path: section/p
en: In this section, we are going to take a closer look at the loop used for setting up the <code>ClutterActor</code>s that will display our images.
el: Σε αυτήν την ενότητα, πρόκειται να κοιτάξουμε στενότερα το χρησιμοποιούμενο βρόχο για εγκατάσταση του <code>ClutterActor</code>s που θα εμφανίσει τις εικόνες μας.

note: (itstool) path: section/code
en: 
    guint row = 0;
    guint col = 0;
    for(row=0; row &lt; ROW_COUNT; ++row)
    {
        for(col=0; col &lt; COL_COUNT; ++col)
        {
            const char *img_path = g_ptr_array_index(img_paths, (row * COL_COUNT) + col);
            GdkPixbuf *pixbuf = gdk_pixbuf_new_from_file_at_size(img_path, STAGE_HEIGHT, STAGE_HEIGHT, NULL);
            ClutterContent *image = clutter_image_new ();
            ClutterActor *actor = clutter_actor_new ();
    
            if (pixbuf != NULL)
            {
                clutter_image_set_data(CLUTTER_IMAGE(image),
                                       gdk_pixbuf_get_pixels(pixbuf),
                                       gdk_pixbuf_get_has_alpha(pixbuf)
                                           ? COGL_PIXEL_FORMAT_RGBA_8888
                                           : COGL_PIXEL_FORMAT_RGB_888,
                                       gdk_pixbuf_get_width(pixbuf),
                                       gdk_pixbuf_get_height(pixbuf),
                                       gdk_pixbuf_get_rowstride(pixbuf),
                                       NULL);
            }
    
            clutter_actor_set_content(actor, image);
            g_object_unref(image);
            g_object_unref(pixbuf);
    
            initialize_actor(actor, row, col);
            clutter_actor_add_child(stage, actor);
        }
    }
el: 
    guint row = 0·
    guint col = 0·
    for(row=0· row &lt; ROW_COUNT· ++row)
    {
        for(col=0· col &lt; COL_COUNT· ++col)
        {
            const char *img_path = g_ptr_array_index(img_paths, (row * COL_COUNT) + col)·
            GdkPixbuf *pixbuf = gdk_pixbuf_new_from_file_at_size(img_path, STAGE_HEIGHT, STAGE_HEIGHT, NULL)·
            ClutterContent *image = clutter_image_new ()·
            ClutterActor *actor = clutter_actor_new ()·
    
            if (pixbuf != NULL)
            {
                clutter_image_set_data(CLUTTER_IMAGE(image),
                                       gdk_pixbuf_get_pixels(pixbuf),
                                       gdk_pixbuf_get_has_alpha(pixbuf)
                                           ; COGL_PIXEL_FORMAT_RGBA_8888
                                           : COGL_PIXEL_FORMAT_RGB_888,
                                       gdk_pixbuf_get_width(pixbuf),
                                       gdk_pixbuf_get_height(pixbuf),
                                       gdk_pixbuf_get_rowstride(pixbuf),
                                       NULL)·
            }
    
            clutter_actor_set_content(actor, image)·
            g_object_unref(image)·
            g_object_unref(pixbuf)·
    
            initialize_actor(actor, row, col)·
            clutter_actor_add_child(stage, actor)·
        }
    }

note: (itstool) path: item/p
en: Line 7: Here we want to get the path at the <var>n</var>th location in the <code>GPtrArray</code> that is holding our image path names. The <var>n</var>th position is calculated based on <code>row</code> and <code>col</code>.
el: Γραμμή 7: Εδώ θέλουμε να πάρουμε τη διαδρομή στη θέση <var>n</var> στο <code>GSList</code> που κρατά τα ονόματα διαδρομής εικόνας. Η <var>n</var>στη θέση υπολογίζεται βασισμένη στη <code>row</code> και <code>col</code>.

note: (itstool) path: item/p
en: Line 8‒23: This is where we actually create the <code>ClutterActor</code> and place the image into the actor. The first argument is the path which we access through our <code>GSList</code> node. The second argument is for error reporting but we are ignoring that to keep things short.
el: Γραμμές 8-23: Εδώ δημιουργείται στην πραγματικότητα ο <code>ClutterActor</code> και τοποθετείται η εικόνα στον δράστη. Το πρώτο όρισμα είναι η διαδρομή προσπέλασης μέσα από τον κόμβο <code>GSList</code>. Το δεύτερο όρισμα είναι για αναφορά σφάλματος, αλλά το αγνοούμε για λόγους συντομίας.

note: (itstool) path: item/p
en: Line 47: This adds the <code>ClutterActor</code> to the stage, which is a container. It also assumes ownership of the <code>ClutterActor</code> which is something you'll want to look into as you get deeper into GNOME development. See the <link href="http://library.gnome.org/devel/gobject/stable/gobject-memory.html"><code>GObject</code> documentation</link> for the gory details.
el: Γραμμή 47: Αυτή προσθέτει τον <code>ClutterActor</code> στη σκηνή, που είναι ένας περιέκτης. Επίσης υποθέτει ιδιοκτησία του <code>ClutterActor</code> που είναι κάτι που θα θελήσετε να κοιτάξετε καθώς πηγαίνετε βαθύτερα στην ανάπτυξη του GNOME. Δείτε την <link href="http://library.gnome.org/devel/gobject/stable/gobject-memory.html"><code>GObject</code>τεκμηρίωση</link> για τις φρικτές λεπτομέρειες.

note: (itstool) path: section/title
en: Loading the images
el: Φόρτωση των εικόνων

note: (itstool) path: section/p
en: Let's take a short break from Clutter to see how we can get the file names from our image directory.
el: Ας κάνουμε μια σύντομη διακοπή από το Clutter για να δούμε πώς μπορούμε να πάρουμε τα ονόματα αρχείου από τον κατάλογό μας των εικόνων.

note: (itstool) path: section/code
en: 
    static void
    load_image_path_names()
    {
        /* Ensure we can access the directory. */
        GError *error = NULL;
        GDir *dir = g_dir_open(IMAGE_DIR_PATH, 0, &amp;error);
        if(error)
        {
            g_warning("g_dir_open() failed with error: %s\n", error-&gt;message);
            g_clear_error(&amp;error);
            return;
        }
    
        img_paths = g_ptr_array_new_with_free_func (g_free);
    
        const gchar *filename = g_dir_read_name(dir);
        while(filename)
        {
            if(g_str_has_suffix(filename, ".jpg") || g_str_has_suffix(filename, ".png"))
            {
                gchar *path = g_build_filename(IMAGE_DIR_PATH, filename, NULL);
                g_ptr_array_add (img_paths, path);
            }
            filename = g_dir_read_name(dir);
        }
    }
el: 
    static void
    load_image_path_names()
    {
        /* Επιβεβαιώνουμε ότι μπορούμε να προσπελάσουμε τον κατάλογο. */
        GError *error = NULL·
        GDir *dir = g_dir_open(IMAGE_DIR_PATH, 0, &amp;error)·
        if(error)
        {
            g_warning("g_dir_open() failed with error: %s\n", error-&gt;message)·
            g_clear_error(&amp;error)·
            return·
        }
    
        img_paths = g_ptr_array_new_with_free_func (g_free)·
    
        const gchar *filename = g_dir_read_name(dir)·
        while(filename)
        {
            if(g_str_has_suffix(filename, ".jpg") || g_str_has_suffix(filename, ".png"))
            {
                gchar *path = g_build_filename(IMAGE_DIR_PATH, filename, NULL)·
                g_ptr_array_add (img_paths, path)·
            }
            filename = g_dir_read_name(dir)·
        }
    }

note: (itstool) path: item/p
en: Lines 5 and 12: This opens our directory or, if an error occurred, returns after printing an error message.
el: Γραμμές 5 και 12: Αυτό ανοίγει τον κατάλογό μας ή, εάν συμβεί σφάλμα, επιστρέφει μετά την εκτύπωση ένα μήνυμα σφάλματος.

note: (itstool) path: item/p
en: Lines 16‒25: The first line gets another file name from the <code>GDir</code> we opened earlier. If there was an image file (which we check by looking at its extension, ".png" or ".jpg") in the directory we proceed to prepend the image directory path to the filename and prepend that to the list we set up earlier. Lastly we attempt to get the next path name and reenter the loop if another file was found.
el: Γραμμές 16-25: Η πρώτη γραμμή παίρνει ένα άλλο όνομα αρχείου από το <code>GDir</code> που ανοίξαμε πιο νωρίς. Εάν υπήρχε ένα αρχείο εικόνας (που ελέγχουμε κοιτώντας την επέκτασή του, ".png" ή ".jpg") στον κατάλογο συνεχίζουμε να προτάσσουμε τη διαδρομή καταλόγου εικόνας στο όνομα αρχείου και το προτάσσουμε στη λίστα που εγκαταστήσαμε νωρίτερα. Τελευταία προσπαθούμε να πάρουμε το επόμενο όνομα διαδρομής και ξαναεισάγουμε τον βρόχο εάν βρεθεί κάποιο άλλο αρχείο.

note: (itstool) path: section/title
en: Set up the actors
el: Εγκατάσταση των δραστών

note: (itstool) path: section/p
en: We now take a look at the sizing and positioning of <code>ClutterActor</code>s and also readying the <code>ClutterActor</code> for user interaction.
el: Ας ρίξουμε μια ματιά τώρα στο μέγεθος και την τοποθέτηση του <code>ClutterActor</code> και επίσης να ετοιμάσουμε το <code>ClutterActor</code> για αλληλεπίδραση χρήστη.

note: (itstool) path: section/code
en: 
    /* This function handles setting up and placing the rectangles. */
    static void
    initialize_actor(ClutterActor *actor, guint row, guint col)
    {
        clutter_actor_set_size(actor, THUMBNAIL_SIZE, THUMBNAIL_SIZE);
        clutter_actor_set_position(actor, col * THUMBNAIL_SIZE, row * THUMBNAIL_SIZE);
        clutter_actor_set_reactive(actor, TRUE);
    
        g_signal_connect(actor,
                         "button-press-event",
                         G_CALLBACK(actor_clicked_cb),
                         NULL);
    }
el: 
    /* Αυτή η συνάρτηση χειρίζεται την ρύθμιση και τοποθέτηση των ορθογωνίων. */
    static void
    initialize_actor(ClutterActor *actor, guint row, guint col)
    {
        clutter_actor_set_size(actor, THUMBNAIL_SIZE, THUMBNAIL_SIZE);
        clutter_actor_set_position(actor, col * THUMBNAIL_SIZE, row * THUMBNAIL_SIZE);
        clutter_actor_set_reactive(actor, TRUE);
    
        g_signal_connect(actor,
                         "button-press-event",
                         G_CALLBACK(actor_clicked_cb),
                         NULL);
    }

note: (itstool) path: item/p
en: Line 7: Setting an actor reactive means that it reacts to events, such as <code>button-press-event</code> in our case. For Photo Wall, all <code>ClutterActor</code>s in the wall should initially be reactive.
el: Γραμμή 7: ρύθμιση αντίδρασης δράστη σημαίνει ότι αντιδρά σε συμβάντα, τέτοια όπως <code>button-press-event</code> στην περίπτωσή μας. Για φωτογραφικό τοίχο, όλοι οι <code>ClutterActor</code> στον τοίχο θα πρέπει αρχικά να είναι αντιδραστικοί.

note: (itstool) path: item/p
en: Line 9‒12: Now we connect the <code>button-press-event</code> to the <code>actor_clicked_cb</code> callback which we will look at next.
el: Γραμμή 9-12: Τώρα συνδέουμε το <code>button-press-event</code> στην επανάκληση <code>actor_clicked_cb</code> που θα δούμε στη συνέχεια.

note: (itstool) path: section/p
en: At this point we've got a wall of images that are ready to be viewed.
el: Σε αυτό το σημείο πήραμε έναν τοίχο εικόνων που είναι έτοιμες να προβληθούν.

note: (itstool) path: section/title
en: Reacting to the clicks
el: Αντίδραση στα πατήματα

note: (itstool) path: section/code
en: 
    static gboolean
    actor_clicked_cb(ClutterActor *actor,
                     ClutterEvent *event,
                     gpointer      user_data)
    {
        /* Flag to keep track of our state. */
        static gboolean is_focused = FALSE;
        ClutterActorIter iter;
        ClutterActor *child;
    
        /* Reset the focus state on all the images */
        clutter_actor_iter_init (&amp;iter, clutter_actor_get_parent(actor));
        while (clutter_actor_iter_next(&amp;iter, &amp;child))
          clutter_actor_set_reactive(child, is_focused);
    
        clutter_actor_save_easing_state(actor);
        clutter_actor_set_easing_duration(actor, ANIMATION_DURATION_MS);
    
        if(is_focused)
        {
            /* Restore the old location and size. */
            clutter_actor_set_position(actor, unfocused_pos.x, unfocused_pos.y);
            clutter_actor_set_size(actor, THUMBNAIL_SIZE, THUMBNAIL_SIZE);
        }
        else
        {
            /* Save the current location before animating. */
            clutter_actor_get_position(actor, &amp;unfocused_pos.x, &amp;unfocused_pos.y);
            /* Only the currently focused image should receive events. */
            clutter_actor_set_reactive(actor, TRUE);
    
            /* Put the focused image on top. */
            clutter_actor_set_child_above_sibling(clutter_actor_get_parent(actor), actor, NULL);
    
            clutter_actor_set_position(actor, (STAGE_WIDTH - STAGE_HEIGHT) / 2.0, 0);
            clutter_actor_set_size(actor, STAGE_HEIGHT, STAGE_HEIGHT);
        }
    
        clutter_actor_restore_easing_state(actor);
    
        /* Toggle our flag. */
        is_focused = !is_focused;
    
        return TRUE;
    }
el: 
    static gboolean
    actor_clicked_cb(ClutterActor *actor,
                     ClutterEvent *event,
                     gpointer      user_data)
    {
        /* Σημαία για να κρατήσουμε ίχνος της κατάστασής μας. */
        static gboolean is_focused = FALSE·
        ClutterActorIter iter·
        ClutterActor *child·
    
        /* Επαναφορά της κατάστασης εστίασης σε όλες τις εικόνες */
        clutter_actor_iter_init (&amp;iter, clutter_actor_get_parent(actor))·
        while (clutter_actor_iter_next(&amp;iter, &amp;child))
          clutter_actor_set_reactive(child, is_focused)·
    
        clutter_actor_save_easing_state(actor)·
        clutter_actor_set_easing_duration(actor, ANIMATION_DURATION_MS)·
    
        if(is_focused)
        {
            /* Επαναφορά της παλιάς τοποθεσίας και μεγέθους. */
            clutter_actor_set_position(actor, unfocused_pos.x, unfocused_pos.y)·
            clutter_actor_set_size(actor, THUMBNAIL_SIZE, THUMBNAIL_SIZE)·
        }
        else
        {
            /* Αποθήκευση της τρέχουσας τοποθεσίας πριν την κίνηση. */
            clutter_actor_get_position(actor, &amp;unfocused_pos.x, &amp;unfocused_pos.y)·
            /* Μόνο η τρέχουσα εστιασμένη εικόνα πρέπει να δεχτεί συμβάντα. */
            clutter_actor_set_reactive(actor, TRUE)·
    
            /* Βάλτε την εστιασμένη εικόνα στην κορυφή. */
            clutter_actor_set_child_above_sibling(clutter_actor_get_parent(actor), actor, NULL)·
    
            clutter_actor_set_position(actor, (STAGE_WIDTH - STAGE_HEIGHT) / 2.0, 0)·
            clutter_actor_set_size(actor, STAGE_HEIGHT, STAGE_HEIGHT)·
        }
    
        clutter_actor_restore_easing_state(actor)·
    
        /* Εναλλαγή της σημαίας μας. */
        is_focused = !is_focused·
    
        return TRUE·
    }

note: (itstool) path: item/p
en: Lines 1‒4: We have to make sure our callback function matches the signature required for the <code>button_clicked_event</code> signal. For our example, we will only use the first argument, the <code>ClutterActor</code> that is actually clicked.
el: Γραμμές 1-4: Πρέπει να βεβαιωθούμε ότι η συνάρτηση επανάκλησής μας ταιριάζει με την απαιτούμενη υπογραφή για το σήμα <code>button_clicked_event</code>. Για το παράδειγμά μας, θα χρησιμοποιήσουμε μόνο το πρώτο όρισμα, το <code>ClutterActor</code> που στην πραγματικότητα πατήθηκε.

note: (itstool) path: note/p
en: A few words on the arguments we are not using in this example. The <code>ClutterEvent</code> is different depending on what event is being handled. For example, a key event produces a <code>ClutterKeyEvent</code> from which you can get the key being pressed among other information. For mouse click events you get a <code>ClutterButtonEvent</code> from which you can get the <code>x</code> and <code>y</code> values. See the Clutter documentation for other <code>ClutterEvent</code> types.
el: Λίγες λέξεις για τα ορίσματα που δεν χρησιμοποιούμε σε αυτό το παράδειγμα. Ο <code>ClutterEvent</code> είναι διαφορετικός ανάλογα με τι συμβάν επεξεργάζεται. Για παράδειγμα, ένα συμβάν πλήκτρου παράγει ένα <code>ClutterKeyEvent</code> από το οποίο μπορείτε να πάρετε το πλήκτρο που πατήθηκε μεταξύ άλλων πληροφοριών. Για τα συμβάντα κλικ του ποντικιού παίρνετε <code>ClutterButtonEvent</code> από το οποίο μπορείτε να πάρετε τις τιμές <code>x</code> και <code>y</code>. Δείτε την τεκμηρίωση του Clutter για άλλους τύπους <code>ClutterEvent</code>.

note: (itstool) path: note/p
en: The <code>user_data</code> is what one uses to pass data into the function. A pointer to any data type can be passed in. If you need multiple data to be passed into the callback, you can place the data into a struct and pass its address in.
el: Ο <code>user_data</code> είναι τι χρησιμοποιεί κάποιος για να περάσει δεδομένα στη συνάρτηση. Ένας δείκτης σε οποιοδήποτε τύπο δεδομένων μπορεί να περαστεί. Εάν χρειαζόσαστε πολλαπλά δεδομένα να περαστούν στην επανάκληση, μπορείτε να τοποθετήσετε τα δεδομένα σε μια δομή και να περάσετε τη διεύθυνσή του.

note: (itstool) path: item/p
en: Line 7: We set up a static flag to track which state we are in: wall mode or focus mode. We start out in wall mode so no image has focus. Thus, we set the flag to <code>FALSE</code> initially.
el: Γραμμή 7: Προδιατάσσουμε μια στατική σημαία για εντοπισμό της κατάστασης στην οποία είμαστε: κατάσταση τοίχου ή κατάσταση εστίασης. Ξεκινάμε σε κατάσταση τοίχου, έτσι καμιά εικόνα δεν έχει εστίαση. Έτσι, ορίζουμε τη σημαία σε <code>FALSE</code> αρχικά.

note: (itstool) path: item/p
en: Line 12‒14: These set the image actors to receive events if they are focused.
el: Γραμμές 12-14: Αυτές βάζουν τους δράστες εικόνας να δέχονται συμβάντα εάν εστιαστούν.

note: (itstool) path: item/p
en: Line 16‒17: Here we set the animation duration and save the current state.
el: Γραμμές 16-17: Εδώ ορίζουμε τη διάρκεια κίνησης και αποθηκεύουμε την τρέχουσα κατάσταση.

note: (itstool) path: item/p
en: Lines 21‒23: Reaching this code means that one image currently has focus and we want to return to wall mode. Setting a position on a <code>ClutterActor</code> begins an animation with the duration that we set in line 17.
el: Γραμμές 21-23: Φτάνοντας αυτόν τον κώδικα σημαίνει ότι μια εικόνα έχει την τρέχουσα εστίαση και θέλουμε να επιστρέψει σε κατάσταση τοίχου. Ορίζοντας μια θέση σε έναν <code>ClutterActor</code> ξεκινά μια κίνηση με τη διάρκεια που ορίζουμε στη γραμμή 17.

note: (itstool) path: item/p
en: Line 24: Reaching this line of code means we are currently in the wall state and are about to give a <code>ClutterActor</code> focus. Here we save the starting position so that we can return to it later.
el: Γραμμή 24: φτάνοντας αυτή τη γραμμή του κώδικα σημαίνει ότι είμαστε προς το παρόν στην κατάσταση τοίχου και πρόκειται να δώσουμε μια <code>ClutterActor</code> εστίαση. Εδώ αποθηκεύουμε την αρχική θέση, έτσι ώστε να μπορούμε να επιστρέψουμε αργότερα.

note: (itstool) path: item/p
en: Line 25: Setting the <code>ClutterActor</code>'s <code>reactive</code> property to <code>TRUE</code> makes this <code>ClutterActor</code> react to events. In this focused state the only <code>ClutterActor</code> that we want to receive events will be the <code>ClutterActor</code> being viewed. Clicking on the <code>ClutterActor</code> will return it to its starting position.
el: Γραμμή 25: ορίζοντας την ιδιότητα <code>reactive</code> του <code>ClutterActor</code> σε <code>TRUE</code> κάνει το <code>ClutterActor</code> να αντιδράσει σε συμβάντα. Σε αυτή την εστιασμένη κατάσταση ο μόνος <code>ClutterActor</code> που θέλουμε να δεχθεί συμβάντα θα είναι ο προβαλλόμενος <code>ClutterActor</code>. Κλικ στο <code>ClutterActor</code> θα επιστρέψει στην αρχική του θέση.

note: (itstool) path: item/p
en: Lines 27‒36: This is where we save the current position of the image, set it to receive events and then make it appear above the other images and start animating it to fill the stage.
el: Γραμμές 27-36: Εδώ αποθηκεύουμε την τρέχουσα θέση της εικόνας, την ορίζουμε να δέχεται συμβάντα και έπειτα την κάνουμε να εμφανιστεί πάνω από τις άλλες εικόνες και ξεκινάμε την κίνησή της για να γεμίσει τη σκηνή.

note: (itstool) path: item/p
en: Line 39: Here we restore the easing state to what was set before we changed it in line 16.
el: Γραμμή 39: Εδώ επαναφέρουμε την κατάσταση απάλυνσης σε ό,τι ορίστηκε πριν την αλλάξουμε στη γραμμή 16.

note: (itstool) path: item/p
en: Line 42: Here we toggle the <code>is_focused</code> flag to the current state.
el: Γραμμή 42: Εδώ εναλλάσσουμε τη σημαία <code>is_focused</code> στην τρέχουσα κατάσταση.

note: (itstool) path: item/p
en: As mentioned previously, the <code>ClutterActor</code>s with higher <code>depth</code> values receive events but can allow <code>ClutterActor</code>s below them to also receive events. Returning <code>TRUE</code> will stop events from being passed down, while <code>FALSE</code> will pass events down.
el: Όπως αναφέρθηκε προηγουμένως, ο <code>ClutterActor</code> με υψηλότερες τιμές <code>depth</code> δέχεται συμβάντα αλλά μπορούν να επιτρέψουν <code>ClutterActor</code> από κάτω τους να δεχθούν επίσης συμβάντα. Επιστροφή σε <code>TRUE</code> θα σταματήσει τα συμβάντα από το να συνεχίσουν, ενώ <code>FALSE</code> θα συνεχίσει τα συμβάντα.

note: (itstool) path: note/p
en: Remember, however, that to receive events the <code>ClutterActor</code>s must be set <code>reactive</code>.
el: Να θυμόσαστε, όμως, ότι για αποδοχή συμβάντων το <code>ClutterActor</code> πρέπει να οριστεί σε <code>reactive</code>.

note: (itstool) path: section/p
en: All of the code should now be ready to go. All you need now is some pictures to load. By default, the pictures are loaded from a <file>berlin_images</file> directory. If you want, you can change the <code>#define IMAGE_DIR_PATH</code> line near the top to refer to your photo directory, or create a <file>berlin_images</file> directory by clicking <guiseq><gui>Project</gui><gui>New Directory...</gui></guiseq> and creating a <file>berlin_images</file> directory as a subdirectory of the <file>photo-wall</file> directory. Make sure to put at least twelve images in the directory!
el: Όλος ο κώδικας πρέπει τώρα να είναι έτοιμος. Τώρα χρειαζόσαστε μερικές εικόνες για φόρτωση. Από προεπιλογή, οι εικόνες φορτώνονται από έναν κατάλογο <file>berlin_images</file>. Εάν θέλετε, μπορείτε να αλλάξετε τη γραμμή <code>#define IMAGE_DIR_PATH</code> κοντά στην κορυφή για να αναφερθείτε στον κατάλογο φωτογραφιών, ή να δημιουργήσετε ένα κατάλογο <file>berlin_images</file> με κλικ στο <guiseq><gui>έργο</gui><gui>νέος κατάλογος...</gui></guiseq> και δημιουργία ενός καταλόγου <file>berlin_images</file> ως υποκαταλόγου του καταλόγου <file>photo-wall</file>. Βεβαιωθείτε ότι βάλατε τουλάχιστον δώδεκα εικόνες στον κατάλογο!

note: (itstool) path: section/p
en: When you have done that, click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, then <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application.
el: Όταν τελειώσετε, κλικ <guiseq><gui>κατασκευή</gui><gui>κατασκευή έργου</gui></guiseq> για να κατασκευάσετε οτιδήποτε ξανά, έπειτα <guiseq><gui>τρέξιμο</gui><gui>εκτέλεση</gui></guiseq> για έναρξη της εφαρμογής.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>Debug/src/photo-wall</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
el: Εάν δεν το έχετε ήδη κάνει, επιλέξτε την εφαρμογή <file>Debug/src/photo-wall</file> στον διάλογο που εμφανίζεται. Τελικά πατήστε <gui>εκτέλεση</gui> και απολαύστε το!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="photo-wall/photo-wall.c">reference code</link>.
el: Αν αντιμετωπίσετε πρόβλημα με το μάθημα, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="photo-wall/photo-wall.c">κώδικας αναφοράς</link>.

[ctx: text]
note: (itstool) path: info/title
en: ProgressBar (C)
el: Γραμμή προόδου -ProgressBar- (C)

note: (itstool) path: info/desc
en: A widget which indicates progress visually
el: Ένα γραφικό στοιχείο που δείχνει την πρόοδο οπτικά

note: (itstool) path: page/title
en: ProgressBar
el: Γραμμή προόδου (ProgressBar)

note: (itstool) path: page/p
en: This ProgressBar "fills in" by a fraction of the bar until it is full.
el: Αυτή η ProgressBar "γεμίζει" με ένα κλάσμα της γραμμής μέχρι να γεμίσει.

[ctx: text]
note: (itstool) path: info/title
en: ProgressBar (JavaScript)
el: Γραμμή προόδου -ProgressBar- (JavaScript)

note: (itstool) path: info/desc
en: A bar which animates to indicate progress
el: Μια γραμμή που κινείται για να δείξει την πρόοδο

note: (itstool) path: div/p
en: Pressing any key stops and starts this ProgressBar.
el: Πατώντας οποιοδήποτε πλήκτρο σταματά και αρχίζει αυτή τη ProgressBar.

note: (itstool) path: page/p
en: This ProgressBar is stopped and started by pressing any key.
el: Αυτή η ProgressBar σταματά και ξεκινά πατώντας οποιοδήποτε πλήκτρο.

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const ProgressBarExample = new Lang.Class({
        Name: 'ProgressBar Example',
    
        // Create the application itself
            _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsprogressbar',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
    
    
    
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
                this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                           window_position: Gtk.WindowPosition.CENTER,
                                                           default_height: 20,
                                                           default_width: 220,
                                                           title: "ProgressBar Example"});
    
            // Create the progress bar
            this.progressBar = new Gtk.ProgressBar ();
            this._window.add(this.progressBar);
    
            // Start the function that pulses the bar every 100 milliseconds
            this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, Lang.bind(this, this._barPulse));
    
            // Connect a keypress event to the function that toggles the bar to start or stop pulsing
            this._window.connect("key-press-event", Lang.bind(this, this._onKeyPress));
    
                // Show the window and all child widgets
                this._window.show_all();
        },
    
    
    
        // Pulse the progressbar (unless it has been disabled by a keypress)
        _barPulse: function() {
            this.progressBar.pulse();
            return true;
        },
    
        // Start or stop the progressbar when a key is pressed
        _onKeyPress: function() {
            if (this.sourceID == 0)
                this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, Lang.bind(this, this._barPulse));
            else {
                GLib.source_remove(this.sourceID);
                this.sourceID = 0;
            }
        }
    
    });
    
    // Run the application
    let app = new ProgressBarExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const ProgressBarExample = new Lang.Class({
        Name: 'ProgressBar Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
            _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsprogressbar',
                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 ();
        },
    
    
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
                this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                           window_position: Gtk.WindowPosition.CENTER,
                                                           default_height: 20,
                                                           default_width: 220,
                                                           title: "ProgressBar Example"});
    
            // Δημιουργία της γραμμής προόδου
            this.progressBar = new Gtk.ProgressBar ();
            this._window.add(this.progressBar);
    
            // Έναρξη της συνάρτησης που δονεί τη γραμμή κάθε 100 ms
            this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, Lang.bind(this, this._barPulse));
    
            // Σύνδεση ενός συμβάντος πατήματος πλήκτρου με τη συνάρτηση που εναλλάσσει τη γραμμή για αρχή ή διακοπή της δόνησης
            this._window.connect("key-press-event", Lang.bind(this, this._onKeyPress));
    
                // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
                this._window.show_all();
        },
    
    
    
        // Δόνηση της γραμμής προόδου (εκτός και έχει απενεργοποιηθεί από ένα πάτημα πλήκτρου)
        _barPulse: function() {
            this.progressBar.pulse();
            return true;
        },
    
        // Έναρξη ή διακοπή της γραμμής προόδου όταν πατιέται ένα πλήκτρο
        _onKeyPress: function() {
            if (this.sourceID == 0)
                this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, Lang.bind(this, this._barPulse));
            else {
                GLib.source_remove(this.sourceID);
                this.sourceID = 0;
            }
        }
    
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new ProgressBarExample ();
    app.application.run (ARGV);

note: (itstool) path: info/desc
en: A widget which indicates progress visually.
el: Ένα γραφικό στοιχείο που δείχνει την πρόοδο οπτικά.

note: (itstool) path: section/title
en: Useful methods for a ProgressBar widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο ProgressBar

note: (itstool) path: item/p
en: Instead of <code>pulse()</code>, that makes the bar go back and forth, if we want the ProgressBar to "fill in" a fraction (a <code>float</code> between <code>0.0</code> and <code>1.0</code> included) of the bar that has been completed, use <code>set_fraction(fraction)</code>.
el: Αντί για <code>pulse()</code>, που κάνει τη γραμμή να πηγαίνει μπροστά πίσω, εάν θέλουμε η ProgressBar να "γεμίζει" ένα κλάσμα (ένα <code>float</code> μεταξύ <code>0.0</code> και <code>1.0</code> συμπεριλαμβανόμενου) της γραμμής που έχει ολοκληρωθεί, χρησιμοποιήστε <code>set_fraction(fraction)</code>.

note: (itstool) path: item/p
en: To set a text and show it (superimposed over the bar) use <code>set_text(<var>"text"</var>)</code> and <code>set_show_text(True)</code>. If a text is not set and <code>set_show_text(True)</code> the text will be the percentage of the work that has been completed.
el: Για ρύθμιση κειμένου και εμφάνισή του (υπερτιθέμενου της γραμμής) χρησιμοποιήστε <code>set_text(<var>"text"</var>)</code> και <code>set_show_text(True)</code>. Εάν ένα κείμενο δεν ορίζεται και το <code>set_show_text(True)</code>, τότε το κείμενο θα είναι το ποσοστό της εργασίας που έχει ολοκληρωθεί.

[ctx: text]
note: (itstool) path: info/title
en: Properties (Python)
el: Ιδιότητες (Python)

note: (itstool) path: info/desc
en: An explanation of properties, getters and setters.
el: Μια εξήγηση των ιδιοτήτων, ληπτών και ρυθμιστών.

note: (itstool) path: page/title
en: Properties
el: Ιδιότητες

note: (itstool) path: section/p
en: <em>Properties</em> describe the configuration and state of widgets. Each widget has its own particular set of properties. For example, a widget such as a button has the property <code>label</code> which contains the text of the widget. You can specify the name and value of any number of properties as keyword arguments when creating an instance of a widget. For example, to create a label with the text “Hello World”, an angle of 25 degrees, and aligned to the right, you can use:
el: Οι <em>ιδιότητες</em> περιγράφουν τη διαμόρφωση και κατάσταση των γραφικών στοιχείων και κάθε γραφικό στοιχείο έχει το δικό του ιδιαίτερο σύνολο ιδιοτήτων. Για παράδειγμα, ένα γραφικό στοιχείο όπως ένα κουμπί ή μια ετικέτα έχει την ιδιότητα <code>label</code> που περιέχει το κείμενο του γραφικού στοιχείου. Μπορείτε να ορίσετε το όνομα και την τιμή οποιουδήποτε αριθμού ιδιοτήτων ως ορίσματα λέξης-κλειδιού όταν δημιουργείτε ένα στιγμιότυπο ενός γραφικού στοιχείου: για παράδειγμα, για τη δημιουργία μιας ετικέτας με το κείμενο “Hello World”, με μια γωνία 25 μοιρών και στοίχιση στα δεξιά, μπορείτε να χρησιμοποιήσετε:

note: (itstool) path: section/p
en: Alternatively, you can define these properties separately by using the method associated with it.
el: Εναλλακτικά, μπορείτε να ορίσετε αυτές τις ιδιότητες ξεχωριστά χρησιμοποιώντας τη μέθοδο που έχει συσχετιστεί.

note: (itstool) path: section/p
en: Once you have created such a label, you can get the text of the label with <code>label.get_label()</code>, and analogously for the other properties.
el: Μόλις δημιουργήσετε μια τέτοια ετικέτα, μπορείτε να πάρετε το κείμενο της ετικέτας με <code>label.get_label()</code> και ανάλογα για τις άλλες ιδιότητες.

note: (itstool) path: section/p
en: Instead of using getters and setters you can also get and set the properties with <code>get_property(<var>"prop-name"</var>)</code> and <code>set_property(<var>"prop-name"</var>, <var>value</var>)</code>, respectively.
el: Αντί να χρησιμοποιήσετε λήπτες και ρυθμιστές μπορείτε επίσης να πάρετε και να ρυθμίσετε τις ιδιότητες με <code>get_property(<var>"prop-name"</var>)</code> και <code>set_property(<var>"prop-name"</var>, <var>value</var>)</code>, αντίστοιχα.

note: (itstool) path: section/p
en: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html">Basics - Properties</link> in Python GTK+ 3 Tutorial
el: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html">Βασικά - Ιδιότητες</link> στο μάθημα Python GTK+ 3

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in Python
el: Μαθήματα, δείγματα κώδικα και παραδείγματα πλατφόρμας σε Python

note: (itstool) path: section/title (itstool) path: page/title
en: Tutorial for beginners
el: Μάθημα για αρχάριους

[ctx: text]
note: (itstool) path: info/title
en: RadioButton (C)
el: Ραδιοπλήκτρο (RadioButton) (C)

note: (itstool) path: info/desc
en: A choice from multiple checkbuttons
el: Μια επιλογή από πολλαπλά κουμπιά ελέγχου

note: (itstool) path: page/title
en: RadioButton
el: Ράδιοπλήκτρο (RadioButton)

note: (itstool) path: page/p
en: These radiobuttons report their activity in the terminal.
el: Αυτά τα ραδιοπλήκτρα αναφέρουν την δραστηριότητά τους στο τερματικό.

note: (itstool) path: page/code
en: 
    #include &lt;gtk/gtk.h&gt;
    
    
    
    /*Signal handler for the "toggled" signal of the RadioButton*/
    static void
    button_toggled_cb (GtkWidget *button,
                       gpointer   user_data)
    {
      char *b_state;
      const char *button_label;
    
      if (gtk_toggle_button_get_active (GTK_TOGGLE_BUTTON (button)))
              b_state = "on";
      else {
              b_state = "off";
              g_print ("\n");
      }
    
      button_label = gtk_button_get_label (GTK_BUTTON (button));
    
      g_print ("%s was turned %s\n", button_label, b_state);
    }
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *grid;
      GtkWidget *window;
    
      GtkWidget *button1;
      GtkWidget *button2;
      GtkWidget *button3;
    
      /*Create a window with a set title and default size.
      Also, set a border width for the amount of space to leave
      inside the window*/
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "RadioButton Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 250, 100);
      gtk_container_set_border_width (GTK_CONTAINER(window), 20);
    
    
      /*Create an initial radio button*/
      button1 = gtk_radio_button_new_with_label (NULL, "Button 1");
    
      /*Create a second radio button, and add it to the same group as Button 1*/
      button2 = gtk_radio_button_new_with_label_from_widget (GTK_RADIO_BUTTON (button1), 
                                                             "Button 2");
    
      /*Create a third button, and add it to the same group as Button 1*/
      button3 = gtk_radio_button_new_with_label_from_widget (GTK_RADIO_BUTTON (button1), 
                                                             "Button 3");
    
    
      /*Create a grid, attach the buttons, and position them accordingly*/
      grid = gtk_grid_new ();
      gtk_grid_attach (GTK_GRID (grid), button1, 0, 0, 1, 1);
      gtk_grid_attach (GTK_GRID (grid), button2, 0, 1, 1, 1);
      gtk_grid_attach (GTK_GRID (grid), button3, 0, 2, 1, 1);
    
      /*Be sure to set the initial state of each button*/
      gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (button2), TRUE);
      gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (button1), FALSE);
      gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (button3), FALSE);
    
      /*Connect the signal handlers (aka Callback functions) to the buttons*/
      g_signal_connect (GTK_TOGGLE_BUTTON (button1), "toggled", 
                        G_CALLBACK (button_toggled_cb), window);
      g_signal_connect (GTK_TOGGLE_BUTTON (button2), "toggled", 
                        G_CALLBACK (button_toggled_cb), window);
      g_signal_connect (GTK_TOGGLE_BUTTON (button3), "toggled", 
                        G_CALLBACK (button_toggled_cb), window);
    
      gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (grid));
    
      gtk_widget_show_all (window);
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }
el: 
    #include &lt;gtk/gtk.h&gt;
    
    
    
    /*Ο χειριστής σήματος για το σήμα "toggled" του ραδιοπλήκτρου*/
    static void
    button_toggled_cb (GtkWidget *button,
                       gpointer   user_data)
    {
      char *b_state;
      const char *button_label;
    
      if (gtk_toggle_button_get_active (GTK_TOGGLE_BUTTON (button)))
              b_state = "on";
      else {
              b_state = "off";
              g_print ("\n");
      }
    
      button_label = gtk_button_get_label (GTK_BUTTON (button));
    
      g_print ("%s was turned %s\n", button_label, b_state);
    }
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *grid;
      GtkWidget *window;
    
      GtkWidget *button1;
      GtkWidget *button2;
      GtkWidget *button3;
    
      /*Δημιουργία ενός παραθύρου με ορισμένο τίτλο και προεπιλεγμένο μέγεθος.
      Επίσης, ορισμός πλάτους περιγράμματος για τον χώρο που αφήνει
      μες το παράθυρο*/
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "RadioButton Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 250, 100);
      gtk_container_set_border_width (GTK_CONTAINER(window), 20);
    
    
      /*Δημιουργία ενός αρχικού ραδιοπλήκτρου*/
      button1 = gtk_radio_button_new_with_label (NULL, "Button 1");
    
      /*Δημιουργία ενός δεύτερου ραδιοπλήκτρου και προσθήκη του στην ίδια ομάδα όπως το πλήκτρο 1*/
      button2 = gtk_radio_button_new_with_label_from_widget (GTK_RADIO_BUTTON (button1), 
                                                             "Button 2");
    
      /*Δημιουργία ενός τρίτου ραδιοπλήκτρου και προσθήκη του στην ίδια ομάδα όπως το πλήκτρο 1*/
      button3 = gtk_radio_button_new_with_label_from_widget (GTK_RADIO_BUTTON (button1), 
                                                             "Button 3");
    
    
      /*Δημιουργία πλέγματος, προσάρτηση των πλήκτρων και κατάλληλη τοποθέτησή τους*/
      grid = gtk_grid_new ();
      gtk_grid_attach (GTK_GRID (grid), button1, 0, 0, 1, 1);
      gtk_grid_attach (GTK_GRID (grid), button2, 0, 1, 1, 1);
      gtk_grid_attach (GTK_GRID (grid), button3, 0, 2, 1, 1);
    
      /*Βεβαιωθείτε ότι ορίσατε την αρχική κατάσταση κάθε κουμπιού*/
      gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (button2), TRUE);
      gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (button1), FALSE);
      gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (button3), FALSE);
    
      /*Σύνδεση των χειριστών σήματος (συναρτήσεις επανάκλησης aka) με τα πλήκτρα*/
      g_signal_connect (GTK_TOGGLE_BUTTON (button1), "toggled", 
                        G_CALLBACK (button_toggled_cb), window);
      g_signal_connect (GTK_TOGGLE_BUTTON (button2), "toggled", 
                        G_CALLBACK (button_toggled_cb), window);
      g_signal_connect (GTK_TOGGLE_BUTTON (button3), "toggled", 
                        G_CALLBACK (button_toggled_cb), window);
    
      gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (grid));
    
      gtk_widget_show_all (window);
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: RadioButton (JavaScript)
el: Ραδιοπλήκτρα -RadioButton- (JavaScript)

note: (itstool) path: info/desc
en: Only one can be selected at a time
el: Μόνο ένα μπορεί να επιλεγεί τη φορά

note: (itstool) path: page/p
en: RadioButtons are named after old-style car radios, which had buttons for switching between channel presets. Because the radio could only be tuned to one station at a time, only one button could be pressed in at a time; if you pressed a new one, the one that was already pressed in would pop back out. That's how these buttons work, too.
el: RadioButtons ονομάζονται κατά την παλιά μόδα ραδιοφώνων αυτοκινήτων, που είχαν κουμπιά για αλλαγή μεταξύ προκαθορισμένων καναλιών. Επειδή το ραδιόφωνο μπορούσε να συντονιστεί μόνο σε ένα σταθμό τη φορά, μόνο ένα κουμπί μπορούσε να πατηθεί τη φορά· αν πατούσατε ένα νέο, αυτό που ήταν ήδη πατημένο πεταγόταν πίσω. Έτσι δουλεύουν και αυτά τα κουμπιά.

note: (itstool) path: page/p
en: Each RadioButton needs a text label and a group. Only one button in a group can be selected at a time. You don't name each group; you just set new RadioButtons to be part of the same group as an existing one. If you create a new one outside of a group, it automatically creates a new group for it to be part of.
el: Κάθε RadioButton χρειάζεται μία ετικέτα κειμένου και μια ομάδα. Μόνο ένα κουμπί σε μια ομάδα μπορεί να επιλεγεί τη φορά. Δεν ονομάζετε κάθε ομάδα· μόλις ρυθμίσατε νέα RadioButtons για να είναι τμήμα της ίδιας ομάδας ως μια υπάρχουσα. Εάν δημιουργείτε ένα νέο εκτός μιας ομάδας, δημιουργεί αυτόματα μια νέα ομάδα για να είναι μέρος του.

note: (itstool) path: section/code
en: 
    const RadioButtonExample = new Lang.Class({
        Name: 'RadioButton Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsradiobutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
el: 
    const RadioButtonExample = new Lang.Class({
        Name: 'RadioButton Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsradiobutton',
                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 ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the RadioButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
el: Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση RadioButtonExample. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Travel Planning"});
el: 
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Travel Planning"});

note: (itstool) path: section/title
en: Creating the radiobuttons
el: Δημιουργία των ραδιοκουμπιών

note: (itstool) path: section/code
en: 
            // Create a label for the first group of buttons
            this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});
el: 
            // Δημιουργία μιας ετικέτας για την πρώτη ομάδα κουμπιών
            this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});

note: (itstool) path: section/p
en: We use a <link xref="label.js">Gtk.Label</link> to set each group of RadioButtons apart. Nothing will stop you from putting RadioButtons from all different groups wherever you want, so if you want people to know which ones go together you need to organize things accordingly.
el: Χρησιμοποιούμε μια <link xref="label.js">Gtk.Label</link> για να ορίσουμε κάθε ομάδα RadioButtons ανεξάρτητα. Τίποτα δεν σας εμποδίζει να βάλετε τα RadioButtons από όλες τις διαφορετικές ομάδες όπου θέλετε, έτσι εάν θέλετε οι άλλοι να ξέρουν ποιο πηγαίνει μαζί, χρειαζόσαστε να οργανώσετε τα πράγματα ανάλογα.

note: (itstool) path: section/code
en: 
            // Create three radio buttons three different ways
            this._place1 = new Gtk.RadioButton ({label: "The Beach"});
    
            this._place2 = Gtk.RadioButton.new_from_widget (this._place1);
            this._place2.set_label ("The Moon");
    
            this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica");
            // this._place3.set_active (true);
el: 
            // Δημιουργία τριών ραδιοπλήκτρων τριών διαφορετικών τρόπων
            this._place1 = new Gtk.RadioButton ({label: "The Beach"});
    
            this._place2 = Gtk.RadioButton.new_from_widget (this._place1);
            this._place2.set_label ("The Moon");
    
            this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica");
            // this._place3.set_active (true);

note: (itstool) path: section/p
en: Here are three different ways to create RadioButtons. The first is the usual way, where we create a new Gtk.RadioButton and assign its properties at the same time. The second and third use functions which automatically handle some of the properties; new_from_widget takes a single argument, the RadioButton that you want to put this new one in the same group as. Meanwhile, new_with_label_from_widget takes that and the RadioButton's label at the same time.
el: Εδώ υπάρχουν τρεις διαφορετικοί τρόποι να δημιουργήσετε RadioButtons. Ο πρώτος είναι ο συνηθισμένος τρόπος, όπου δημιουργούμε ένα νέο Gtk.RadioButton και αποδίδουμε τις ιδιότητές του ταυτόχρονα. Ο δεύτερος και τρίτος χρησιμοποιούν συναρτήσεις που χειρίζονται αυτόματα μερικές από τις ιδιότητες· το new_from_widget παίρνει ένα μοναδικό όρισμα, το RadioButton στο οποίο θέλετε να βάλετε αυτό το νέο στην ίδια ομάδα. Εν τω μεταξύ, το new_with_label_from_widget το παίρνει καθώς και την ετικέτα του RadioButton ταυτόχρονα.

note: (itstool) path: section/p
en: The first RadioButton in a group is the one that's selected by default. Try uncommenting the last line in this sample code to see how you can set a different one to be the default selection.
el: Το πρώτο RadioButton σε μια ομάδα είναι αυτό που επιλέγεται από προεπιλογή. Δοκιμάστε την αποσχολίαση της τελευταίας γραμμής σε αυτό το δείγμα κώδικα για να δείτε πώς μπορείτε να ρυθμίσετε ένα διαφορετικό να είναι η προεπιλογή.

note: (itstool) path: section/code
en: 
            // Create a label for the second group of buttons
            this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });
    
            // Create three more radio buttons
            this._thing1 = new Gtk.RadioButton ({label: "Penguins" });
            this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 });
            this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });
el: 
            // Δημιουργία μιας ετικέτας για τη δεύτερη ομάδα κουμπιών
            this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });
    
            // Δημιουργία τριών επιπλέον ραδιοπλήκτρων
            this._thing1 = new Gtk.RadioButton ({label: "Penguins" });
            this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 });
            this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });

note: (itstool) path: section/p
en: Here we create the label for the second group of buttons, and then create them all the same way.
el: Εδώ δημιουργούμε την ετικέτα για τη δεύτερη ομάδα κουμπιών και έπειτα τα δημιουργούμε όλα με τον ίδιο τρόπο.

note: (itstool) path: section/title
en: Creating the rest of the user interface
el: Δημιουργία της υπόλοιπης διεπαφής χρήστη

note: (itstool) path: section/code
en: 
            // Create a stock OK button
            this._okButton = new Gtk.Button ({
                label: 'gtk-ok',
                use_stock: 'true',
                halign: Gtk.Align.END });
    
            // Connect the button to the function which handles clicking it
            this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));
el: 
            // Δημιουργία ενός πλήκτρου παρακαταθήκης ΕΝΤΑΞΕΙ
            this._okButton = new Gtk.Button ({
                label: 'gtk-ok',
                use_stock: 'true',
                halign: Gtk.Align.END });
    
            // Σύνδεση του κουμπιού με τη συνάρτηση που χειρίζεται το πάτημά του
            this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));

note: (itstool) path: section/p
en: This code creates a <link xref="button.js">Gtk.Button</link> and binds it to a function which will show people a silly message when they click OK, depending on which RadioButtons were selected.
el: Αυτός ο κώδικας δημιουργεί ένα <link xref="button.js">Gtk.Button</link> και το συνδέει με μια συνάρτηση που θα εμφανίσει στους άλλους ένα χαζό μήνυμα όταν πατήσουν εντάξει, ανάλογα με τα επιλεγμένα RadioButtons.

note: (itstool) path: section/p
en: To make sure the button's "OK" label shows up properly in every language that GNOME is translated into, remember to use one of Gtk's <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">stock button types</link>.
el: Για να βεβαιωθείτε ότι η ετικέτα του κουμπιού "OK" εμφανίζεται κατάλληλα σε κάθε γλώσσα στην οποία μεταφράζεται το GNOME, να θυμάστε να χρησιμοποιήσετε έναν από τους <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">τύπους κουμπιών παρακαταθήκης</link> του Gtk.

note: (itstool) path: section/code
en: 
            // Create a grid to put the "place" items in
            this._places = new Gtk.Grid ();
    
            // Attach the "place" items to the grid
            this._places.attach (this._placeLabel, 0, 0, 1, 1);
            this._places.attach (this._place1, 0, 1, 1, 1);
            this._places.attach (this._place2, 0, 2, 1, 1);
            this._places.attach (this._place3, 0, 3, 1, 1);
    
            // Create a grid to put the "thing" items in
            this._things = new Gtk.Grid ({ margin_top: 50 });
    
            // Attach the "thing" items to the grid
            this._things.attach (this._thingLabel, 0, 0, 1, 1);
            this._things.attach (this._thing1, 0, 1, 1, 1);
            this._things.attach (this._thing2, 0, 2, 1, 1);
            this._things.attach (this._thing3, 0, 3, 1, 1);
    
            // Create a grid to put everything in
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_left: 40,
                margin_right: 50 });
    
            // Attach everything to the grid
            this._grid.attach (this._places, 0, 0, 1, 1);
            this._grid.attach (this._things, 0, 1, 1, 1);
            this._grid.attach (this._okButton, 0, 2, 1, 1);
    
            // Add the grid to the window
            this._window.add (this._grid);
el: 
            // Δημιουρία ενός πλέγματος για τοποθέτηση των στοιχείων "place" μέσα
            this._places = new Gtk.Grid ();
    
            // Προσάρτηση των στοιχείων "place" στο πλέγμα
            this._places.attach (this._placeLabel, 0, 0, 1, 1);
            this._places.attach (this._place1, 0, 1, 1, 1);
            this._places.attach (this._place2, 0, 2, 1, 1);
            this._places.attach (this._place3, 0, 3, 1, 1);
    
            // Δημιουργία ενός πλέγματος για τοποθέτηση των στοιχείων "thing" μέσα
            this._things = new Gtk.Grid ({ margin_top: 50 });
    
            // Προσάρτηση των στοιχείων "thing" στο πλέγμα
            this._things.attach (this._thingLabel, 0, 0, 1, 1);
            this._things.attach (this._thing1, 0, 1, 1, 1);
            this._things.attach (this._thing2, 0, 2, 1, 1);
            this._things.attach (this._thing3, 0, 3, 1, 1);
    
            // Δημιουργία ενός πλέγματος για τοποθέτηση όλων μέσα
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_left: 40,
                margin_right: 50 });
    
            // Προσάρτηση όλων στο πλέγμα
            this._grid.attach (this._places, 0, 0, 1, 1);
            this._grid.attach (this._things, 0, 1, 1, 1);
            this._grid.attach (this._okButton, 0, 2, 1, 1);
    
            // Προσάρτηση του πλέγματος στο παράθυρο
            this._window.add (this._grid);

note: (itstool) path: section/p
en: We use a separate <link xref="grid.js">Gtk.Grid</link> to organize each group of radio buttons. This way we can change the layout with less fuss later on. The second Grid has a margin on top, to visually separate the two sets of choices.
el: Χρησιμοποιούμε ένα ανεξάρτητο <link xref="grid.js">Gtk.Grid</link> για να οργανώσουμε κάθε ομάδα ραδιοπλήκτρων. Με αυτό τον τρόπο μπορούμε να αλλάξουμε τη διάταξη με λιγότερη αναστάτωση αργότερα. Το δεύτερο πλέγμα έχει ένα περιθώριο στην κορυφή, για οπτική διάκριση των δύο συνόλων επιλογών.

note: (itstool) path: section/p
en: After we've organized them, we put them into a third, master Grid, along with the OK button. Then we attach that to the window.
el: Αφού τα οργανώσουμε, τα βάζουμε σε ένα τρίτο, κύριο πλέγμα, μαζί με το κουμπί εντάξει. Έπειτα το προσαρτούμε στο παράθυρο.

note: (itstool) path: section/p
en: Finally, we tell the window and everything inside it to become visible when the application is run.
el: Τελικά, λέμε στο παράθυρο και σε κάθε τι που είναι μέσα του να γίνει ορατό όταν τρέχει η εφαρμογή.

note: (itstool) path: section/code
en: 
        _okClicked: function () {
    
            // Create a popup that shows a silly message
            this._travel = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                message_type: Gtk.MessageType.OTHER,
                buttons: Gtk.ButtonsType.OK,
                text: this._messageText() });
    
            // Show the popup
            this._travel.show();
    
            // Bind the OK button to the function that closes the popup
            this._travel.connect ("response", Lang.bind (this, this._clearTravelPopUp));
    
        },
el: 
        _okClicked: function () {
    
            // Δημιουργία ενός αναδυόμενου που εμφανίζει ένα χαζό μήνυμα
            this._travel = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                message_type: Gtk.MessageType.OTHER,
                buttons: Gtk.ButtonsType.OK,
                text: this._messageText() });
    
            // Εμφάνιση του αναδυόμενου
            this._travel.show();
    
            // Σύνδεση του κουμπιού ΕΝΤΑΞΕΙ με τη συνάρτηση που κλείνει το αναδυόμενο
            this._travel.connect ("response", Lang.bind (this, this._clearTravelPopUp));
    
        },

note: (itstool) path: section/p
en: When you click OK, a <link xref="messagedialog.js">Gtk.MessageDialog</link> appears. This function creates and displays the popup window, then binds its OK button to a function that closes it. What text appears in the popup depends on the _messageText() function, which returns a different value depending on which set of options you chose.
el: Όταν πατάτε εντάξει, ένας <link xref="messagedialog.js">Gtk.MessageDialog</link> εμφανίζεται. Αυτή η συνάρτηση δημιουργεί και εμφανίζει το αναδυόμενο παράθυρο, έπειτα συνδέει το κουμπί της εντάξει με τη συνάρτηση που το κλείνει. Τι κείμενο εμφανίζεται στο αναδυόμενο εξαρτάται από τη συνάρτηση _messageText(), που επιστρέφει μια διαφορετική τιμή ανάλογα με το σύνολο επιλογών που διαλέξατε.

note: (itstool) path: section/code
en: 
        _messageText: function() {
    
            // Create a silly message for the popup depending on what you selected
            var stringMessage = "";
    
            if (this._place1.get_active()) {
    
                if (this._thing1.get_active())
                    stringMessage = "Penguins love the beach, too!";
    
                else if (this._thing2.get_active())
                    stringMessage = "Make sure to put on that sunscreen!";
    
                else stringMessage = "Are you going to the beach in space?";
    
            }
    
            else if (this._place2.get_active()) {
    
                if (this._thing1.get_active())
                    stringMessage = "The penguins will take over the moon!";
    
                else if (this._thing2.get_active())
                    stringMessage = "A lack of sunscreen will be the least of your problems!";
    
                else stringMessage = "You'll probably want a spaceship, too!";
            }
    
            else if (this._place3.get_active()) {
    
                if (this._thing1.get_active())
                    stringMessage = "The penguins will be happy to be back home!";
    
                else if (this._thing2.get_active())
                    stringMessage = "Antarctic sunbathing may be hazardous to your health!";
    
                else stringMessage = "Try bringing a parka instead!";
            }
    
            return stringMessage;
    
        },
el: 
        _messageText: function() {
    
            // Δημιουργία ενός χαζού μηνύματος για το αναδυόμενο ανάλογα με το τι διαλέξατε
            var stringMessage = "";
    
            if (this._place1.get_active()) {
    
                if (this._thing1.get_active())
                    stringMessage = "Penguins love the beach, too!";
    
                else if (this._thing2.get_active())
                    stringMessage = "Make sure to put on that sunscreen!";
    
                else stringMessage = "Are you going to the beach in space?";
    
            }
    
            else if (this._place2.get_active()) {
    
                if (this._thing1.get_active())
                    stringMessage = "The penguins will take over the moon!";
    
                else if (this._thing2.get_active())
                    stringMessage = "A lack of sunscreen will be the least of your problems!";
    
                else stringMessage = "You'll probably want a spaceship, too!";
            }
    
            else if (this._place3.get_active()) {
    
                if (this._thing1.get_active())
                    stringMessage = "The penguins will be happy to be back home!";
    
                else if (this._thing2.get_active())
                    stringMessage = "Antarctic sunbathing may be hazardous to your health!";
    
                else stringMessage = "Try bringing a parka instead!";
            }
    
            return stringMessage;
    
        },

note: (itstool) path: section/p
en: The get_active() method is how we can tell which RadioButton's pressed in. This function returns a different silly message depending on which set of buttons was pressed. Its return value is used as the MessageDialog's text property.
el: Η μέθοδος get_active() λέει πώς μπορούμε να πούμε ποιο RadioButton πατιέται. Αυτή η συνάρτηση επιστρέφει ένα διαφορετικό χαζό μήνυμα ανάλογα με ποιο σύνολο κουμπιών πατήθηκε. Η επιστρεφόμενη τιμή χρησιμοποιείται ως ιδιότητα κειμένου του MessageDialog.

note: (itstool) path: section/p
en: This function is called when the MessageDialog's OK button is pressed. It simply makes the popup go away.
el: Αυτή η συνάρτηση καλείται όταν το κουμπί εντάξει του MessageDialog πατιέται. Κάνει απλά το αναδυόμενο να φύγει.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new RadioButtonExample ();
    app.application.run (ARGV);
el: 
    // Εκτέλεση της εφαρμογής
    let app = new RadioButtonExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished RadioButtonExample class, and set the application running.
el: Τελικά, δημιουργούμε ένα νέο παράδειγμα της τελειωμένης κλάσης RadioButtonExample και εκτελούμε την εφαρμογή.

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const RadioButtonExample = new Lang.Class({
        Name: 'RadioButton Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsradiobutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
    
    
    
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Travel Planning"});
    
            // Create a label for the first group of buttons
            this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});
    
            // Create three radio buttons three different ways
            this._place1 = new Gtk.RadioButton ({label: "The Beach"});
    
            this._place2 = Gtk.RadioButton.new_from_widget (this._place1);
            this._place2.set_label ("The Moon");
    
            this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica");
            // this._place3.set_active (true);
    
            // Create a label for the second group of buttons
            this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });
    
            // Create three more radio buttons
            this._thing1 = new Gtk.RadioButton ({label: "Penguins" });
            this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 });
            this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });
    
            // Create a stock OK button
            this._okButton = new Gtk.Button ({
                label: 'gtk-ok',
                use_stock: 'true',
                halign: Gtk.Align.END });
    
            // Connect the button to the function which handles clicking it
            this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));
    
            // Create a grid to put the "place" items in
            this._places = new Gtk.Grid ();
    
            // Attach the "place" items to the grid
            this._places.attach (this._placeLabel, 0, 0, 1, 1);
            this._places.attach (this._place1, 0, 1, 1, 1);
            this._places.attach (this._place2, 0, 2, 1, 1);
            this._places.attach (this._place3, 0, 3, 1, 1);
    
            // Create a grid to put the "thing" items in
            this._things = new Gtk.Grid ({ margin_top: 50 });
    
            // Attach the "thing" items to the grid
            this._things.attach (this._thingLabel, 0, 0, 1, 1);
            this._things.attach (this._thing1, 0, 1, 1, 1);
            this._things.attach (this._thing2, 0, 2, 1, 1);
            this._things.attach (this._thing3, 0, 3, 1, 1);
    
            // Create a grid to put everything in
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_left: 40,
                margin_right: 50 });
    
            // Attach everything to the grid
            this._grid.attach (this._places, 0, 0, 1, 1);
            this._grid.attach (this._things, 0, 1, 1, 1);
            this._grid.attach (this._okButton, 0, 2, 1, 1);
    
            // Add the grid to the window
            this._window.add (this._grid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
    
    
    
        _okClicked: function () {
    
            // Create a popup that shows a silly message
            this._travel = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                message_type: Gtk.MessageType.OTHER,
                buttons: Gtk.ButtonsType.OK,
                text: this._messageText() });
    
            // Show the popup
            this._travel.show();
    
            // Bind the OK button to the function that closes the popup
            this._travel.connect ("response", Lang.bind (this, this._clearTravelPopUp));
    
        },
    
    
    
        _messageText: function() {
    
            // Create a silly message for the popup depending on what you selected
            var stringMessage = "";
    
            if (this._place1.get_active()) {
    
                if (this._thing1.get_active())
                    stringMessage = "Penguins love the beach, too!";
    
                else if (this._thing2.get_active())
                    stringMessage = "Make sure to put on that sunscreen!";
    
                else stringMessage = "Are you going to the beach in space?";
    
            }
    
            else if (this._place2.get_active()) {
    
                if (this._thing1.get_active())
                    stringMessage = "The penguins will take over the moon!";
    
                else if (this._thing2.get_active())
                    stringMessage = "A lack of sunscreen will be the least of your problems!";
    
                else stringMessage = "You'll probably want a spaceship, too!";
            }
    
            else if (this._place3.get_active()) {
    
                if (this._thing1.get_active())
                    stringMessage = "The penguins will be happy to be back home!";
    
                else if (this._thing2.get_active())
                    stringMessage = "Antarctic sunbathing may be hazardous to your health!";
    
                else stringMessage = "Try bringing a parka instead!";
            }
    
            return stringMessage;
    
        },
    
    
    
    
        _clearTravelPopUp: function () {
    
            this._travel.destroy();
    
        }
    
    });
    
    // Run the application
    let app = new RadioButtonExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const RadioButtonExample = new Lang.Class({
        Name: 'RadioButton Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsradiobutton',
                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 ();
        },
    
    
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Travel Planning"});
    
            // Δημιουργία μιας ετικέτας για την πρώτη ομάδα των κουμπιών
            this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});
    
            // Δημιουργία τριών ραδιοπλήκτων τριών διαφορετικών δρόμων
            this._place1 = new Gtk.RadioButton ({label: "The Beach"});
    
            this._place2 = Gtk.RadioButton.new_from_widget (this._place1);
            this._place2.set_label ("The Moon");
    
            this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica");
            // this._place3.set_active (true);
    
            // Δημιουργία μιας ετικέτας για τη δεύτερη ομάδα κουμπιών
            this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });
    
            // Δημιουργία τριών πρόσθετων ραδιοπλήκτρων
            this._thing1 = new Gtk.RadioButton ({label: "Penguins" });
            this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 });
            this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });
    
            // Δημιουργία ενός πλήκτρου παρακαταθήκης ΕΝΤΑΞΕΙ
            this._okButton = new Gtk.Button ({
                label: 'gtk-ok',
                use_stock: 'true',
                halign: Gtk.Align.END });
    
            // Σύνδεση του πλήκτρου με τη συνάρτηση που χειρίζεται το πάτημά του
            this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));
    
            // Δημιουργία ενός πλέγματος για την τοποθέτηση των στοιχείων "place" μέσα
            this._places = new Gtk.Grid ();
    
            // Προσάρτηση των στοιχείων "place" στο πλέγμα
            this._places.attach (this._placeLabel, 0, 0, 1, 1);
            this._places.attach (this._place1, 0, 1, 1, 1);
            this._places.attach (this._place2, 0, 2, 1, 1);
            this._places.attach (this._place3, 0, 3, 1, 1);
    
            // Δημιουργία ενός πλέγματος για τοποθέτηση των στοιχείων  "thing" μέσα
            this._things = new Gtk.Grid ({ margin_top: 50 });
    
            // Προσάρτηση των στοιχείων "thing" στο πλέγμα
            this._things.attach (this._thingLabel, 0, 0, 1, 1);
            this._things.attach (this._thing1, 0, 1, 1, 1);
            this._things.attach (this._thing2, 0, 2, 1, 1);
            this._things.attach (this._thing3, 0, 3, 1, 1);
    
            // Δημιουργία ενός πλέγματος για να μπουν όλα μέσα
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_left: 40,
                margin_right: 50 });
    
            // Προσάρτηση όλων στο πλέγμα
            this._grid.attach (this._places, 0, 0, 1, 1);
            this._grid.attach (this._things, 0, 1, 1, 1);
            this._grid.attach (this._okButton, 0, 2, 1, 1);
    
            // Προσθήκη του πλέγματος στο παράθυρο
            this._window.add (this._grid);
    
            // Εμφάνιση των παραθύρων και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
    
    
        _okClicked: function () {
    
            // Δημιουργία ενός αναδυόμενου που εμφανίζει ένα χαζό μήνυμα
            this._travel = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                message_type: Gtk.MessageType.OTHER,
                buttons: Gtk.ButtonsType.OK,
                text: this._messageText() });
    
            // Εμφάνιση του αναδυόμενου
            this._travel.show();
    
            // Σύνδεση του πλήκτρου ΕΝΤΑΞΕΙ στη συνάρτηση που κλείνει το αναδυόμενο
            this._travel.connect ("response", Lang.bind (this, this._clearTravelPopUp));
    
        },
    
    
    
        _messageText: function() {
    
            // Δημιουργία ενός χαζού μηνύματος για το αναδυόμενο ανάλογα με το τι επιλέξατε
            var stringMessage = "";
    
            if (this._place1.get_active()) {
    
                if (this._thing1.get_active())
                    stringMessage = "Penguins love the beach, too!";
    
                else if (this._thing2.get_active())
                    stringMessage = "Make sure to put on that sunscreen!";
    
                else stringMessage = "Are you going to the beach in space?";
    
            }
    
            else if (this._place2.get_active()) {
    
                if (this._thing1.get_active())
                    stringMessage = "The penguins will take over the moon!";
    
                else if (this._thing2.get_active())
                    stringMessage = "A lack of sunscreen will be the least of your problems!";
    
                else stringMessage = "You'll probably want a spaceship, too!";
            }
    
            else if (this._place3.get_active()) {
    
                if (this._thing1.get_active())
                    stringMessage = "The penguins will be happy to be back home!";
    
                else if (this._thing2.get_active())
                    stringMessage = "Antarctic sunbathing may be hazardous to your health!";
    
                else stringMessage = "Try bringing a parka instead!";
            }
    
            return stringMessage;
    
        },
    
    
    
    
        _clearTravelPopUp: function () {
    
            this._travel.destroy();
    
        }
    
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new RadioButtonExample ();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: RadioButton (Python)
el: Ραδιοπλήκτρο (RadioButton) (Python)

note: (itstool) path: info/desc
en: Mutually exclusive buttons.
el: Αμοιβαία αποκλειόμενα κουμπιά.

note: (itstool) path: page/p
en: Three RadioButtons. You can see in the terminal if they are turned off or on.
el: Τρία RadioButtons. Μπορείτε να δείτε στον τερματικό εάν είναι ανενεργά ή ενεργά.

note: (itstool) path: section/title
en: Useful methods for a RadioButton widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο RadioButton

note: (itstool) path: section/p
en: In line 16 the signal <code>"toggled"</code> is connected to the callback function <code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 16 το σήμα <code>"toggled"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>toggled_cb()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: section/p
en: As seen in <link xref="properties.py"/>, instead of <code>button1 = Gtk.RadioButton(label="Button 1")</code> we could create the button and label it with
el: Όπως φαίνεται στο <link xref="properties.py"/>, αντί για <code>button1 = Gtk.RadioButton(label="Button 1")</code> μπορούμε να δημιουργήσουμε το κουμπί και την ετικέτα του μαζί

note: (itstool) path: section/p
en: Yet another way to create a new RadioButton with a label is <code>button1 = Gtk.RadioButton.new_with_label(None, "Button 1")</code> (the first argument is the group of the radiobuttons, which we can get with <code>get_group()</code>, the second argument is the label).
el: Ακόμα ένας άλλος τρόπος να δημιουργήσουμε ένα νέο RadioButton με μια ετικέτα είναι <code>button1 = Gtk.RadioButton.new_with_label(None, "Button 1")</code> (το πρώτο όρισμα είναι η ομάδα των ραδιοπλήκτρων, που μπορούμε να πάρουμε με <code>get_group()</code>, το δεύτερο όρισμα είναι η ετικέτα).

[ctx: text]
note: (itstool) path: info/title
en: RadioButton (Vala)
el: Ραδιοπλήκτρο (RadioButton) (Vala)

note: (itstool) path: info/desc
en: A choice from multiple CheckButtons.
el: Μια επιλογή από πολλαπλά πλήκτρα ελέγχου (CheckButtons).

note: (itstool) path: page/p
en: These RadioButtons report their activity in the terminal.
el: Αυτά τα ραδιοπλήκτρα αναφέρουν τη δραστηριότητά τους στο τερματικό.

[ctx: text]
note: (itstool) path: info/title
en: Record collection (JavaScript)
el: Συλλογή εγγραφών (JavaScript)

note: (itstool) path: info/desc
en: Create a small database application for ordering your music collection
el: Δημιουργία μιας μικρής εφαρμογής βάσης δεδομένων για παραγγελία της μουσικής σας συλλογής

note: (itstool) path: page/title
en: Record collection
el: Συλλογή εγγραφών

note: (itstool) path: item/p
en: How to connect to a database using libgda
el: Πώς να συνδεθείτε με μια βάση δεδομένων χρησιμοποιώντας libgda

note: (itstool) path: item/p
en: How to insert and browse records in a database table
el: Πώς να εισάγετε και να περιηγηθείτε σε εγγραφές στον πίνακα βάσης δεδομένων

note: (itstool) path: section/p
en: This demo uses the Javascript language. We are going to demonstrate how to connect and use a database from a GTK program, by using the GDA (GNOME Data Access) library. Thus you also need this library installed.
el: Αυτή η παρουσίαση χρησιμοποιεί τη γλώσσα Javascript. Πρόκειται να παρουσιάσουμε πώς να συνδεθείτε και να χρησιμοποιήσετε μια βάση δεδομένων από ένα πρόγραμμα GTK χρησιμοποιώντας τη βιβλιοθήκη GDA (πρόσβαση δεδομένων GNOME). Έτσι χρειαζόσαστε επίσης αυτή τη βιβλιοθήκη εγκατεστημένη.

note: (itstool) path: section/p
en: GNOME Data Access (GDA) is library whose purpose is to provide universal access to different kinds and types of data sources. This goes from traditional relational database systems, to any imaginable kind of data source such as a mail server, a LDAP directory, etc. For more information, and for a full API and documentation, visit the <link href="http://library.gnome.org/devel/libgda/stable/">GDA website</link>.
el: Η πρόσβαση δεδομένων GNOME (GDA) είναι βιβλιοθήκη της οποίας ο σκοπός είναι να δώσει γενική πρόσβαση σε διαφορετικά είδη και τύπους πηγών δεδομένων. Αυτό οδηγεί από παραδοσιακά σχεσιακά συστήματα βάσης δεδομένων, σε οποιοδήποτε είδος πηγής δεδομένων, όπως εξυπηρετητή αλληλογραφίας, έναν κατάλογο LDAP, κλπ. Για περισσότερες πληροφορίες και για πλήρες API και τεκμηρίωση, επισκεφτείτε την <link href="http://library.gnome.org/devel/libgda/stable/">ιστότοπο GDA</link>.

note: (itstool) path: section/p
en: Although a big part of the code is related to user interface (GUI), we are going to focus our tutorial on the database parts (we might mention other parts we think are relevant though). To know more about Javascript programs in GNOME, see the <link xref="image-viewer.js">Image Viewer program</link> tutorial.
el: Αν και ένα μεγάλο τμήμα του κώδικα συσχετίζεται με τη διεπαφή χρήστη (GUI), πρόκειται να εστιάσουμε το μάθημά μας στα μέρη της βάσης δεδομένων (αν και θα αναφερθούν άλλα μέρη που θεωρούνται σχετικά). Για να μάθετε περισσότερα για τα προγράμματα JavaScript στο GNOME, δείτε το μάθημα <link xref="image-viewer.js">πρόγραμμα προβολέα εικόνας</link>.

note: (itstool) path: item/p
en: Choose <gui>Generic Javascript</gui> from the <gui>JS</gui> tab, click <gui>Forward</gui>, and fill-out your details on the next few pages. Use <file>record-collection</file> as project name and directory.
el: Επιλέξτε <gui>γενικό Javascript</gui> από την καρτέλα <gui>JS</gui>, πατήστε <gui>Μπροστά</gui>, και συμπληρώστε τις λεπτομέρειές σας στις επόμενες λίγες σελίδες. Χρησιμοποιήστε ως όνομα του έργου και του καταλόγου το <file>record-collection</file>.

note: (itstool) path: item/p
en: Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.js</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
el: Πατήστε <gui>τελειωμένο</gui> και το έργο θα δημιουργηθεί για εσάς. Ανοίξτε το <file>src/main.js</file> από τις καρτέλες <gui>έργο</gui> ή <gui>αρχείο</gui>. Περιλαμβάνει πολύ απλό παράδειγμα κώδικα.

note: (itstool) path: section/title
en: Program Structure
el: Δομή προγράμματος

note: (itstool) path: section/p
en: This demo is a simple GTK application (with a single window) capable of inserting records into a database table as well as browsing all records of the table. The table has two fields: <code>id</code>, an integer, and <code>name</code>, a varchar. The first section (on the top) of the application allows you to insert a record into the table. The last section (bottom) allows you to see all the records of that table. Its content is refreshed every time a new record is inserted and on the application startup.
el: Αυτή η παρουσίαση είναι μια απλή εφαρμογή GTK (με μοναδικό παράθυρο) ικανό να εισάγει εγγραφές στον πίνακα βάσης δεδομένων καθώς και περιήγηση όλων των εγγραφών του πίνακα. Ο πίνακας έχει δύο πεδία: <code>id</code>, ένας ακέραιος και <code>name</code>, έναν varchar. Η πρώτη ενότητα (στην κορυφή) της εφαρμογής επιτρέπει την εισαγωγή εγγραφής στον πίνακα. Η τελευταία ενότητα (πυθμένας) επιτρέπει να δείτε όλες τις εγγραφές αυτού του πίνακα. Το περιεχόμενο του ανανεώνεται κάθε φορά που μια νέα εγγραφή εισάγεται και στην εκκίνηση της εφαρμογής.

note: (itstool) path: section/title
en: Starting the fun
el: Έναρξη της διασκέδασης

note: (itstool) path: section/p
en: Let's start by examining the skeleton of the program:
el: Ας αρχίσουμε εξετάζοντας τον σκελετό του προγράμματος:

note: (itstool) path: item/p
en: Lines 1‒4: Initial imports. Pay special attention to line 3, which tells Javascript to import the GDA library, our focus in this tutorial.
el: Γραμμές 1-4: Αρχικές εισαγωγές. Δώστε ιδιαίτερη προσοχή στη γραμμή 3, που λέει στη Javascript να εισάγει τη βιβλιοθήκη GDA, το επίκεντρο μας σε αυτό το μάθημα.

note: (itstool) path: item/p
en: Lines 6‒17: Define our <code>Demo</code> class. Pay special attention to lines 13‒15, where we call 3 methods which will do the whole job. They will be detailed below.
el: Γραμμές 6-17: Ορίστε την κλάση μας <code>Demo</code>. Δώστε ιδιαίτερη προσοχή στις γραμμές 13-15, όπου καλούμε 3 μεθόδους που θα κάνουν όλη τη δουλειά. Αναλυτικά παρακάτω.

note: (itstool) path: item/p
en: Lines 19‒23: Start the application.
el: Γραμμές 19-23: έναρξη της εφαρμογής.

note: (itstool) path: section/title
en: Designing the application
el: Σχεδιασμός της εφαρμογής

note: (itstool) path: section/p
en: Let's take a look at the <code>setupWindow</code> method. It is responsible for creating the User Interface (UI). As UI is not our focus, we will explain only the relevant parts.
el: Ας ρίξουμε μια ματιά στη μέθοδο <code>setupWindow</code>. Είναι υπεύθυνη για τη δημιουργία της διεπαφής χρήστη (UI). Καθώς η UI δεν είναι το επίκεντρο μας, θα εξηγήσουμε μόνο τα σχετικά μέρη.

note: (itstool) path: section/code
en: 
      setupWindow: function () {
        this.window = new Gtk.Window ({title: "Data Access Demo", height_request: 350});
        this.window.connect ("delete-event", function () {
          Gtk.main_quit();
          return true;
          });
    
        // main box
        var main_box = new Gtk.Box ({orientation: Gtk.Orientation.VERTICAL, spacing: 5});
        this.window.add (main_box);
    
        // first label
        var info1 = new Gtk.Label ({label: "&lt;b&gt;Insert a record&lt;/b&gt;", xalign: 0, use_markup: true});
        main_box.pack_start (info1, false, false, 5);
    
        // "insert a record" horizontal box
        var insert_box = new Gtk.Box ({orientation: Gtk.Orientation.HORIZONTAL, spacing: 5});
        main_box.pack_start (insert_box, false, false, 5);
    
        // ID field
        insert_box.pack_start (new Gtk.Label ({label: "ID:"}), false, false, 5);
        this.id_entry = new Gtk.Entry ();
        insert_box.pack_start (this.id_entry, false, false, 5);
    
        // Name field
        insert_box.pack_start (new Gtk.Label ({label: "Name:"}), false, false, 5);
        this.name_entry = new Gtk.Entry ({activates_default: true});
        insert_box.pack_start (this.name_entry, true, true, 5);
    
        // Insert button
        var insert_button = new Gtk.Button ({label: "Insert", can_default: true});
        insert_button.connect ("clicked", Lang.bind (this, this._insertClicked));
        insert_box.pack_start (insert_button, false, false, 5);
        insert_button.grab_default ();
    
        // Browse textview
        var info2 = new Gtk.Label ({label: "&lt;b&gt;Browse the table&lt;/b&gt;", xalign: 0, use_markup: true});
        main_box.pack_start (info2, false, false, 5);
        this.text = new Gtk.TextView ({editable: false});
        var sw = new Gtk.ScrolledWindow ({shadow_type:Gtk.ShadowType.IN});
        sw.add (this.text);
        main_box.pack_start (sw, true, true, 5);
    
        this.count_label = new Gtk.Label ({label: "", xalign: 0, use_markup: true});
        main_box.pack_start (this.count_label, false, false, 0);
    
        this.window.show_all ();
      },
el: 
      setupWindow: function () {
        this.window = new Gtk.Window ({title: "Data Access Demo", height_request: 350});
        this.window.connect ("delete-event", function () {
          Gtk.main_quit();
          return true;
          });
    
        // Κύριο πλαίσιο
        var main_box = new Gtk.Box ({orientation: Gtk.Orientation.VERTICAL, spacing: 5});
        this.window.add (main_box);
    
        // Πρώτη ετικέτα
        var info1 = new Gtk.Label ({label: "&lt;b&gt;Insert a record&lt;/b&gt;", xalign: 0, use_markup: true});
        main_box.pack_start (info1, false, false, 5);
    
        // Οριζόντιο πλαίσιο "insert a record" 
        var insert_box = new Gtk.Box ({orientation: Gtk.Orientation.HORIZONTAL, spacing: 5});
        main_box.pack_start (insert_box, false, false, 5);
    
        // Πεδίο αναγνωριστικού
        insert_box.pack_start (new Gtk.Label ({label: "ID:"}), false, false, 5);
        this.id_entry = new Gtk.Entry ();
        insert_box.pack_start (this.id_entry, false, false, 5);
    
        // Πεδίο ονόματος
        insert_box.pack_start (new Gtk.Label ({label: "Name:"}), false, false, 5);
        this.name_entry = new Gtk.Entry ({activates_default: true});
        insert_box.pack_start (this.name_entry, true, true, 5);
    
        // Πλήκτρο εισαγωγής
        var insert_button = new Gtk.Button ({label: "Insert", can_default: true});
        insert_button.connect ("clicked", Lang.bind (this, this._insertClicked));
        insert_box.pack_start (insert_button, false, false, 5);
        insert_button.grab_default ();
    
        // Προβολή κειμένου περιήγησης
        var info2 = new Gtk.Label ({label: "&lt;b&gt;Browse the table&lt;/b&gt;", xalign: 0, use_markup: true});
        main_box.pack_start (info2, false, false, 5);
        this.text = new Gtk.TextView ({editable: false});
        var sw = new Gtk.ScrolledWindow ({shadow_type:Gtk.ShadowType.IN});
        sw.add (this.text);
        main_box.pack_start (sw, true, true, 5);
    
        this.count_label = new Gtk.Label ({label: "", xalign: 0, use_markup: true});
        main_box.pack_start (this.count_label, false, false, 0);
    
        this.window.show_all ();
      },

note: (itstool) path: item/p
en: Lines 22 and 27: Create the 2 entries (for the two fields) in which users will type something to get inserted in the database.
el: Γραμμές 22 και 27: δημιουργία των 2 καταχωρίσεων (για τα δύο πεδία) στα οποία οι χρήστες θα πληκτρολογήσουν κάτι για να εισαχθεί στη βάση δεδομένων.

note: (itstool) path: item/p
en: Lines 31‒34: Create the Insert button. We connect its <code>clicked</code> signal to the <code>_insertClicked</code> private method of the class. This method is detailed below.
el: Γραμμές 31-34: δημιουργία του κουμπιού εισαγωγής. Συνδέουμε το σήμα του <code>clicked</code> στην ιδιωτική μέθοδο <code>_insertClicked</code> της κλάσης. Αυτή η μέθοδος αναλύεται παρακάτω.

note: (itstool) path: item/p
en: Line 39: Create the widget (<code>TextView</code>) where we will show the contents of the table.
el: Γραμμή 39: δημιουργία του γραφικού στοιχείου (<code>TextView</code>) όπου θα εμφανίσουμε τα περιεχόμενα του πίνακα.

note: (itstool) path: item/p
en: Line 44: Create the label where we will show the number of records in the table. Initially it's empty, it will be updated later.
el: Γραμμή 44: δημιουργία της ετικέτας όπου θα εμφανιστεί ο αριθμός των εγγραφών στον πίνακα. Αρχικά είναι άδειος, θα ενημερωθεί αργότερα.

note: (itstool) path: section/title
en: Connecting to and initializing the database
el: Σύνδεση και αρχικοποίηση με τη βάση δεδομένων

note: (itstool) path: section/p
en: The code which makes the connection to the database is in the <code>setupDatabase</code> method below:
el: Ο κώδικας που κάνει τη σύνδεση στη βάση δεδομένων είναι στην παρακάτω μέθοδο <code>setupDatabase</code>:

note: (itstool) path: item/p
en: Lines 2‒3: Create the GDA's <code>Connection</code> object. We must supply to its constructor some properties:
el: Γραμμές 2-3: δημιουργία του αντικειμένου της GDA <code>Connection</code>. Πρέπει να δώσουμε στον κατασκευαστή μερικές ιδιότητες:

note: (itstool) path: item/p
en: <code>provider</code>: One of GDA's supported providers. GDA supports SQLite, MySQL, PostgreSQL, Oracle and many others. For demo purposes we will use a SQLite database, as it comes installed by default in most distributions and it is simple to use (it just uses a file as a database).
el: <code>provider</code>: Ένας από τους υποστηριζόμενους παρόχους. Το GDA υποστηρίζει SQLite, MySQL, PostgreSQL, Oracle και πολλούς άλλους. Για τους σκοπούς της παρουσίασης θα χρησιμοποιήσουμε τη βάση δεδομένων SQLite, επειδή εγκαθίσταται από προεπιλογή στις περισσότερες διανομές και είναι απλή στη χρήση (χρησιμοποιεί απλά ένα αρχείο ως βάση δεδομένων).

note: (itstool) path: item/p
en: <code>cnc_string</code>: The connection string. It may change from provider to provider. The syntax for SQLite is: <code>DB_DIR=<var>PATH</var>;DB_NAME=<var>FILENAME</var></code>. In this demo we are accessing a database called gnome_demo in the user home dir (note the call to GLib's <code>get_home_dir</code> function).
el: <code>cnc_string</code>: Η συμβολοσειρά σύνδεσης. Μπορεί να αλλάζει από πάροχο σε πάροχο. Η σύνταξη για το SQLite είναι: <code>DB_DIR=<var>PATH</var>;DB_NAME=<var>FILENAME</var></code>. Σε αυτή την παρουσίαση προσπελάζουμε μια βάση δεδομένων που λέγεται gnome_demo στον προσωπικό κατάλογο χρήστη (σημειώστε την κλήση στη συνάρτηση .GLib's <code>get_home_dir</code>).

note: (itstool) path: note/p
en: If the provider is not supported by GDA, or if the connection string is missing some element, line 2 will raise an exception. So, in real life we should handle it with JavaScript's statement <code>try</code>...<code>catch</code>.
el: Εάν ο πάροχος δεν υποστηρίζεται από GDA, ή εάν λείπει στη συμβολοσειρά σύνδεσης κάποιο στοιχείο, η γραμμή 2 θα εγείρει μια εξαίρεση. Έτσι, στην πραγματική ζωή θα το χειριστούμε με μια πρόταση της JavaScript <code>try</code>...<code>catch</code>.

note: (itstool) path: item/p
en: Line 4: Open the connection. In the SQLite provider, if the database does not exist, it will be created in this step.
el: Γραμμή 4: άνοιγμα της σύνδεσης. Στον πάροχο SQLite, εάν η βάση δεδομένων δεν υπάρχει, θα δημιουργηθεί σε αυτό το βήμα.

note: (itstool) path: item/p
en: Lines 6‒10: Try to do a simple select to check if the table exists (line 7). If it does not exist (because the database was just created), this command will raise an exception, which is handled by the <code>try</code>...<code>catch</code> block. If it is the case, we run the create table statement (line 9).
el: Γραμμές 6-10: Προσπαθήστε να κάνετε μια απλή επιλογή για έλεγχο ύπαρξης του πίνακα (γραμμή 7). Εάν δεν υπάρχει (επειδή η βάση δεδομένων μόλις δημιουργήθηκε), αυτή η εντολή θα εγείρει μια εξαίρεση, που επεξεργάζεται από την ομάδα <code>try</code>...<code>catch</code>. Εάν συμβαίνει αυτό, τρέχουμε τη δημιουργία πρότασης πίνακα (γραμμή 9).

note: (itstool) path: item/p
en: In order to run the SQL commands above we are using the GDA connection methods <code>execute_select_command</code> and <code>execute_non_select_command</code>. They are simple to use, and just require two arguments: The <code>Connection</code> object and the SQL command to be parsed.
el: Για να εκτελέσουμε εντολές SQL στο παραπάνω παράδειγμα χρησιμοποιούμε τις μεθόδους σύνδεσης GDA <code>execute_select_command</code> και <code>execute_non_select_command</code>. Είναι εύκολες στη χρήση, και απαιτούν μόνο δύο ορίσματα: Το αντικείμενο <code>Connection</code> και την εντολή SQL.

note: (itstool) path: section/p
en: At this point we have the database set up, and are ready to use it.
el: Σε αυτό το σημείο έχουμε ρυθμίσει τη βάση δεδομένων και είμαστε έτοιμοι να τη χρησιμοποιήσουμε.

note: (itstool) path: section/title
en: Selecting
el: Επιλογή

note: (itstool) path: section/p
en: After connecting to the database, our demo's constructor calls the <code>selectData</code> method. It is responsible for getting all the records in the table and showing them on the <code>TextView</code> widget. Let's take a look at it:
el: Μετά την σύνδεση με τη βάση δεδομένων, ο κατασκευαστής της παρουσίασής μας καλεί τη μέθοδο<code>selectData</code>. Είναι υπεύθυνη για τη λήψη όλων των εγγραφών στον πίνακα και την εμφάνισή τους στο γραφικό στοιχείο <code>TextView</code>. Ας ρίξουμε μια ματιά σε αυτό:

note: (itstool) path: item/p
en: Line 2: The <code>SELECT</code> command. We are using the GDA connection's <code>execute_select_command</code> method for that. It returns a <code>DataModel</code> object, which is later used to retrieve the rows.
el: Γραμμή 2: Η εντολή <code>SELECT</code>. Χρησιμοποιούμε την μέθοδο σύνδεσης του GDA <code>execute_select_command</code>. Επιστρέφει ένα αντικείμενο <code>DataModel</code>, το οποίο χρησιμοποιείτε για να ανακτηθούν οι σειρές.

note: (itstool) path: item/p
en: Line 3: Create an <code>Iter</code> object, which is used to iterate over the <code>DataModel</code>'s records.
el: Γραμμή 3: Δημιουργία αντικειμένου <code>Iter</code>, που χρησιμοποιείται για επανάληψη στις εγγραφές του <code>DataModel</code>.

note: (itstool) path: item/p
en: Line 7: Loop through all the records, fetching them with the help of the <code>Iter</code> object. At this point, the <code>iter</code> variable contains the actual, retrieved data. Its <code>move_next</code> method returns <code>false</code> when it reaches the last record.
el: Γραμμή 7: Βρόχος μέσα από όλες τις εγγραφές, φέρνοντας τες με τη βοήθεια του αντικειμένου <code>Iter</code>. Σε αυτό το σημείο, η μεταβλητή <code>iter</code> περιέχει τα ενεργά ανακτημένα δεδομένα. Η μέθοδος του <code>move_next</code> επιστρέφει <code>false</code> όταν φτάνει την τελευταία εγγραφή.

note: (itstool) path: item/p
en: Lines 8‒9: We do two things in each line:
el: Γραμμές 8-9: Κάνουμε δυο πράγματα σε κάθε γραμμή:

note: (itstool) path: item/p
en: Use <code>Iter</code>'s method <code>get_value_at</code>, which requires only one argument: the column number to retrieve, starting at 0. As our <code>SELECT</code> command returns only two columns, we are retrieving columns 0 and 1.
el: Χρήση της μεθόδου του <code>Iter</code> <code>get_value_at</code>, που απαιτεί μόνο ένα όρισμα: ο αριθμός της στήλης για ανάκτηση, που ξεκινά από 0. Καθώς η εντολή μας <code>SELECT</code> επιστρέφει μόνο δύο στήλες, ανακτούμε τις στήλες 0 και 1.

note: (itstool) path: item/p
en: The method <code>get_value_at</code> returns the field in GLib's <code>GValue</code> format. A simple way to convert this format to a string is by using GDA's global function <code>value_stringify</code>. That's what we are doing here, and we store the results in the variables <code>id_field</code> and <code>name_field</code>.
el: Η μέθοδος <code>get_value_at</code> επιστρέφει το πεδίο σε μορφή <code>GValue</code> του GLib. Ένας απλός τρόπος μετατροπής αυτής της μορφής σε συμβολοσειρά είναι χρησιμοποιώντας τη γενική συνάρτηση του GDA <code>value_stringify</code>. Αυτό κάνουμε εδώ και αποθηκεύουμε τα αποτελέσματα στις μεταβλητές <code>id_field</code> και <code>name_field</code>.

note: (itstool) path: item/p
en: Line 11: Concatenate the two fields to make one text line, separated by <code>"=&gt;"</code>, and store it in the <code>text</code> variable.
el: Γραμμή 11: Συνένωση των δύο πεδίων για τη δημιουργία μιας γραμμής κειμένου, διαχωριζόμενης με <code>"=&gt;"</code> και αποθήκευση της στη μεταβλητή <code>text</code>.

note: (itstool) path: item/p
en: Line 14: After the loop is finished, we have all the records formatted in the <code>text</code> variable. In this line we just set the contents of the <code>TextView</code> with that variable.
el: Γραμμή 14: Μετά το τέλος του βρόχου, έχουμε όλες τις μορφοποιημένες εγγραφές στη μεταβλητή <code>text</code>. Σε αυτή τη γραμμή ορίζουμε μόνο τα περιεχόμενα του <code>TextView</code> με αυτή τη μεταβλητή.

note: (itstool) path: item/p
en: Line 15: Display the number of records in the table, making use of the <code>DataModel</code>'s <code>get_n_rows</code> method.
el: Γραμμή 15: Εμφάνιση του αριθμού των εγγραφών στον πίνακα, χρησιμοποιώντας τη μέθοδο <code>get_n_rows</code> του <code>DataModel</code>.

note: (itstool) path: section/title
en: Inserting
el: Εισαγωγή

note: (itstool) path: section/p
en: OK, we know how to connect to a database and how to select rows from a table. Now it's time to do an <code>INSERT</code> on the table. Do you remember above, in the method <code>setupWindow</code> we connected the <gui>Insert</gui> button's <code>clicked</code> signal to the method <code>_insertClicked</code>? Let's see the implementation of this method.
el: Εντάξει, ξέρουμε πώς να συνδεθούμε με μια βάση δεδομένων και πώς να διαλέξουμε γραμμές από έναν πίνακα. Τώρα είναι ώρα να κάνουμε έναν <code>INSERT</code> στον πίνακα. Θυμόσαστε παραπάνω, στη μέθοδο <code>setupWindow</code> συνδέσαμε το <gui>Insert</gui> του κουμπιού με το σήμα <code>clicked</code> στη μέθοδο <code>_insertClicked</code>; Ας δούμε την υλοποίηση αυτής της μεθόδου.

note: (itstool) path: section/p
en: We have learned how to use the GDA connection's methods <code>execute_select_command</code> and <code>execute_non_select_command</code> to quickly execute SQL commands on the database. GDA allows one to build a SQL statement indirectly, by using its <code>SqlBuilder</code> object. What are the benefits of this? GDA will generate the SQL statement dynamically, and it will be valid for the connection provider used (it will use the same SQL dialect the provider uses). Let's study the code:
el: Μάθαμε πως να χρησιμοποιούμε τις μεθόδους σύνδεσης GDA <code>execute_select_command</code> και <code>execute_non_select_command</code> για την εκτέλεση εντολών SQL σε μια βάση δεδομένων. Το GDA σας επιτρέπει να δημιουργήσετε μια εντολή SQL έμμεσα, χρησιμοποιώντας το αντικείμενο <code>SqlBuilder</code>. Ποια είναι τα πλεονεκτήματα; Το GDA θα δημιουργήσει δυναμικά μια εντολή SQL, και θα είναι έγκυρη για τον πάροχο σύνδεσης που θα χρησιμοποιηθεί (θα χρησιμοποιήσει την ίδια σύνταξη SQL που θα ορίσει ο πάροχος). Ας μελετήσουμε τον κώδικα:

note: (itstool) path: item/p
en: Lines 2‒3: Check if the user filled all the fields. The code for the private method <code>_validateFields</code> is really simple and you can read it in the full demo source code.
el: Γραμμές 2-3: Ελέγξτε εάν ο χρήστης συμπλήρωσε όλα τα πεδία. Ο κώδικας για την ιδιωτική μέθοδο <code>_validateFields</code> είναι πραγματικά απλός και μπορείτε να τον διαβάσετε στην πλήρη παρουσίαση πηγαίου κώδικα.

note: (itstool) path: item/p
en: Line 5: The faster way of doing the <code>INSERT</code>. It's commented out as we want to show how to use the <code>SqlBuilder</code> object to build a SQL statement portable across databases.
el: Γραμμή 5: Ο γρηγορότερος τρόπος για εκτέλεση του <code>INSERT</code>. Σχολιάζεται, καθώς θέλουμε να εμφανίσουμε τη χρήση του αντικειμένου <code>SqlBuilder</code> για κατασκευή μιας πρότασης SQL φορητής μέσα από τις βάσεις δεδομένων.

note: (itstool) path: item/p
en: Line 7: Create the <code>SqlBuilder</code> object. We must pass the type of statement we are going to build. It can be <code>SELECT</code>, <code>UPDATE</code>, <code>INSERT</code> or <code>DELETE</code>.
el: Γραμμή 7: Δημιουργία του αντικειμένου <code>SqlBuilder</code>. Πρέπει να περάσουμε τον τύπο της πρότασης που πρόκειται να κατασκευάσουμε. Μπορεί να είναι <code>SELECT</code>, <code>UPDATE</code>, <code>INSERT</code> ή <code>DELETE</code>.

note: (itstool) path: item/p
en: Line 8: Set the name of the table on which the built statement will operate (it will generate <code>INSERT INTO demo</code>)
el: Γραμμή 8: Ορισμός του ονόματος του πίνακα στον οποίο η κατασκευασμένη πρόταση θα λειτουργήσει (θα παράξει <code>INSERT INTO demo</code>)

note: (itstool) path: item/p
en: Lines 9‒10: Set the fields and its values that will be part of the statement. The first argument is the field name (as in the table). The second one is the value for that field.
el: Γραμμές 9-10: Ορισμός των πεδίων και των τιμών τους που θα είναι τμήμα της πρότασης. Το πρώτο όρισμα είναι το όνομα πεδίου (όπως στον πίνακα). Το δεύτερο όρισμα είναι η τιμή για αυτό το πεδίο.

note: (itstool) path: item/p
en: Line 11: Get the dynamically generated <code>Statement</code> object, which represents a SQL statement.
el: Γραμμή 11: Λήψη του δυναμικά δημιουργημένου αντικειμένου <code>Statement</code>, που αντιπροσωπεύει μια πρόταση SQL.

note: (itstool) path: item/p
en: Line 12: Finally, execute the SQL statement (<code>INSERT</code>).
el: Γραμμή 12: Τελικά, εκτέλεση της πρότασης SQL (<code>INSERT</code>).

note: (itstool) path: item/p
en: Line 14: Clear the id and name fields on the screen. The code for the private method <code>_clearFields</code> is really simple and you can read it in the full demo source code.
el: Γραμμή 14: Ελέγξτε την ταυτότητα και πεδία ονομάτων στην οθόνη. Ο κώδικας για την ιδιωτική μέθοδο <code>_validateFields</code> είναι πραγματικά απλός και μπορείτε να τον διαβάσετε στην πλήρη παρουσίαση πηγαίου κώδικα.

note: (itstool) path: item/p
en: Line 15: Refresh the view on the screen by doing another <code>SELECT</code>.
el: Γραμμή 15: Ανανέωση της προβολής στην οθόνη κάνοντας ένα άλλο <code>SELECT</code>.

note: (itstool) path: note/p
en: You can also make use of parameters while building the statement. By using the <code>SqlBuilder</code> objects and parameters you are less subject to attacks like SQL injection. Check the <link href="http://library.gnome.org/devel/libgda/stable/">GDA documentation</link> for more information about parameters.
el: Μπορείτε επίσης να χρησιμοποιήσετε παραμέτρους ενώ κατασκευάζετε την πρόταση. Χρησιμοποιώντας τα αντικείμενα <code>SqlBuilder</code> και παραμέτρους υφίστασθε λιγότερες επιθέσεις όπως ενέσεις SQL. Σημειώστε το <link href="http://library.gnome.org/devel/libgda/stable/">τεκμηρίωση GDA</link> για περισσότερες πληροφορίες σχετικά με τις παραμέτρους.

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. You now have a database for your record collection!
el: Όλος ο απαιτούμενος κώδικας πρέπει να είναι τώρα στη θέση, έτσι προσπαθήστε να τρέξετε τον κώδικα. Έχετε τώρα μια βάση δεδομένων για τη συλλογής σας των εγγραφών!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="record-collection/record-collection.js">reference code</link>.
el: Αν αντιμετωπίσετε πρόβλημα με το μάθημα, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="record-collection/record-collection.js">κώδικα αναφοράς</link>.

note: (itstool) path: page/title
en: enum ResponseType
el: απαρίθμηση ResponseType

note: (itstool) path: item/p
en: Returned if an action widget has no response id, or if the dialog gets programmatically hidden or destroyed
el: Επιστρέφεται αν ένα γραφικό στοιχείο ενέργειας δεν έχει αναγνωριστικό απάντησης, ή αν ο διάλογος κρύβεται ή καταστρέφεται προγραμματιστικά

note: (itstool) path: item/p
en: Generic response id, not used by GTK+ dialogs
el: Γενικό αναγνωριστικό απάντησης, που δεν χρησιμοποιείται από διαλόγους GTK+

note: (itstool) path: item/p
en: Returned if the dialog is deleted
el: Επιστρέφεται αν ο διάλογος διαγραφεί

note: (itstool) path: item/p
en: Returned by OK buttons in GTK+ dialogs
el: Επιστρέφεται από πλήκτρα ΕΝΤΑΞΕΙ σε διαλόγους GTK+

note: (itstool) path: item/p
en: Returned by Cancel buttons in GTK+ dialogs
el: Επιστρέφεται από πλήκτρα ακύρωσης σε διαλόγους GTK+

note: (itstool) path: item/p
en: Returned by Close buttons in GTK+ dialogs
el: Επιστρέφεται από πλήκτρα Κλεισίματος σε διαλόγους GTK+

note: (itstool) path: item/p
en: Returned by Yes buttons in GTK+ dialogs
el: Επιστρέφεται από πλήκτρα Ναι σε διαλόγους GTK+

note: (itstool) path: item/p
en: Returned by No buttons in GTK+ dialogs
el: Επιστρέφεται από πλήκτρα Όχι σε διαλόγους GTK+

note: (itstool) path: item/p
en: Returned by Apply buttons in GTK+ dialogs
el: Επιστρέφεται από πλήκτρα εφαρμογής σε διαλόγους GTK+

note: (itstool) path: item/p
en: Returned by Help buttons in GTK+ dialogs
el: Επιστρέφεται από πλήκτρα βοήθειας σε διαλόγους GTK+

[ctx: text]
note: (itstool) path: info/title
en: Scale (C)
el: Κλίμακα (C)

note: (itstool) path: info/desc
en: A slider widget for selecting a value from a range
el: Ένας ολισθητής γραφικού στοιχείου για επιλογή μιας τιμής από μια περιοχή

note: (itstool) path: page/title
en: Scale
el: Κλίμακα

note: (itstool) path: page/p
en: Slide the scales!
el: Ολίσθηση των κλιμάκων!

[ctx: text]
note: (itstool) path: info/title
en: Scale (JavaScript)
el: Κλίμακα (JavaScript)

note: (itstool) path: info/desc
en: A slider which corresponds to a numerical value
el: Ένας ολισθητής που αντιστοιχεί σε μια αριθμητική τιμή

note: (itstool) path: page/p
en: A Scale is a horizontal or vertical slider, that represents a value inside a numerical range. When you create a new Scale, you set what its default position is, what the numbers at the top and bottom of the range are, and things like how much it moves up or down when you click on the Scale to either side of the knob. To keep from having to type all that in every time you create a new Scale, you can create an object called an Adjustment which keeps track of all that, then tell each new Scale to use that Adjustment.
el: Μια κλίμακα είναι ένας οριζόντιος ή κάθετος ολισθητής, που αναπαριστά μια τιμή μέσα σε μια αριθμητική περιοχή. Όταν δημιουργείτε μια νέα κλίμακα, ορίζετε ποια είναι η προεπιλεγμένη της θέση, ποιοι είναι οι αριθμοί στην κορυφή και στον πάτο της περιοχής και πράγματα όπως πόσο μετακινείται πάνω ή κάτω όταν πατάτε σε μία κλίμακα σε οποιαδήποτε πλευρά του κουμπιού. Για να συνεχίσετε να έχετε να πληκτρολογήσετε όλο αυτό κάθε φορά δημιουργείτε μια νέα κλίμακα, μπορείτε να δημιουργήσετε ένα αντικείμενο που λέγεται ρύθμιση και ανιχνεύει όλο αυτό, έπειτα πείτε σε κάθε νέα σκάλα να χρησιμοποιήσει αυτήν τη ρύθμιση.

note: (itstool) path: page/p
en: This scale is a simple widget that lets you adjust the size of an iceberg that penguins live on. The number of penguins on the iceberg is the product of the values of the two sliders. Try playing with them and seeing what happens.
el: Αυτή η κλίμακα είναι ένα απλό γραφικό στοιχείο που σας επιτρέπει να ρυθμίσετε το μέγεθος ενός παγόβουνου όπου ζουν οι πιγκουίνοι. Ο αριθμός των πιγκουίνων στο παγόβουνο είναι το γινόμενο των τιμών των δύο ολισθητών. Δοκιμάστε να παίξετε μαζί τους και να δείτε τι συμβαίνει.

note: (itstool) path: section/code
en: 
    const ScaleExample = new Lang.Class({
        Name: 'Scale Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsscale'
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
el: 
    const ScaleExample = new Lang.Class({
        Name: 'Scale Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsscale'
            });
    
        // Σύνδεση των σημάτων '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 ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the ScaleExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
el: Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση ScaleExample. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Birds on a Floe"});
el: 
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Birds on a Floe"});

note: (itstool) path: section/title
en: Creating the scales
el: Δημιουργία των κλιμάκων

note: (itstool) path: section/code
en: 
            // Create the horizontal scale
            this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
            this._hScale.set_valign (Gtk.Align.START);
            this._hScale.set_value (50);
            this._hScale.set_digits (0);
            // this._hScale.set_draw_value (false);
el: 
            // Δημιουργία της οριζόντιας κλίμακας
            this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
            this._hScale.set_valign (Gtk.Align.START);
            this._hScale.set_value (50);
            this._hScale.set_digits (0);
            // this._hScale.set_draw_value (false);

note: (itstool) path: section/p
en: The new_with_range method is one way to create a new Scale widget. The parameters it takes are a <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Orientation.html">Gtk.Orientation</link>, the minimum value, the maximum value, and the increment for a single step. After that we use the Scale's methods to set its starting value, and how many decimal places it runs to. We also set its vertical alignment in this case, to control where it appears in the window.
el: Η μέθοδος new_with_range είναι ένας τρόπος δημιουργίας ενός νέου γραφικού στοιχείου κλίμακας. Οι παράμετροι που παίρνει είναι μια <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Orientation.html">Gtk.Orientation</link>, η ελάχιστη τιμή, η μέγιστη τιμή και η αύξηση για ένα μόνο βήμα. Κατόπιν χρησιμοποιούμε τις μεθόδους κλίμακας για να ορίσουμε την αρχική της τιμή και πόσες δεκαδικές θέσεις διατρέχει. Επίσης ορίζουμε την κάθετη της στοίχιση σε αυτήν την περίπτωση, για τον έλεγχο πού εμφανίζεται στο παράθυρο.

note: (itstool) path: section/p
en: We can use the set_draw_value method to tell it whether or not to show the number next to the sliding scale. It's commented out in this example.
el: Μπορούμε να χρησιμοποιήσουμε τη μέθοδο set_draw_value για να του πούμε εάν θα εμφανίσει ή όχι τον αριθμό δίπλα στην κινητή κλίμακα. Σχολιάζεται σε αυτό το παράδειγμα.

note: (itstool) path: section/code
en: 
            // Create a master adjustment to use for the vertical (or any other) scale
            this._adjustment = new Gtk.Adjustment ({
                value: 95,
                lower: 0,
                upper: 100,
                step_increment: 5,
                page_increment: 10 });
el: 
            // Δημιουργία μιας κύριας προσαρμογής για χρήση με την κάθετη (ή οποιαδήποτε άλλη)κλίμακα
            this._adjustment = new Gtk.Adjustment ({
                value: 95,
                lower: 0,
                upper: 100,
                step_increment: 5,
                page_increment: 10 });

note: (itstool) path: section/p
en: An Adjustment is an object we can use to simplify things when creating a new Scale. The Adjustment's "value" property is what the Scale's default value is, while "upper" and "lower" make the high and low ends of the numerical range. Meanwhile, the increment values show how much the slider moves when you do things like click on it.
el: Μια ρύθμιση είναι ένα αντικείμενο που μπορούμε να χρησιμοποιήσουμε για απλοποίηση των πραγμάτων όταν δημιουργείτε μια νέα κλίμακα. Η ιδιότητα της ρύθμισης "value" είναι η προεπιλεγμένη τιμή της κλίμακας, ενώ "upper" και "lower" κάνουν το πάνω και κάτω άκρο της αριθμητικής περιοχής. Στο μεταξύ, οι τιμές αύξησης εμφανίζουν πόσο μετακινείται ο ολισθητής όταν κάνετε πράγματα όπως το πάτημα πάνω του.

note: (itstool) path: section/code
en: 
            // Create a vertical scale using the adjustment we just made
            this._vScale = new Gtk.Scale ({
                orientation: Gtk.Orientation.VERTICAL,
                adjustment: this._adjustment,
                digits: 0,
                // draw_value: false,
                margin_left: 10 });
el: 
            // Δημιουργία μιας κάθετης κλίμακας χρησιμοποιώντας την προσαρμογή που μόλις φτιάξαμε
            this._vScale = new Gtk.Scale ({
                orientation: Gtk.Orientation.VERTICAL,
                adjustment: this._adjustment,
                digits: 0,
                // draw_value: false,
                margin_left: 10 });

note: (itstool) path: section/p
en: Here we create a new Scale object using _adjustment as its "adjustment" property. This is a great shortcut. We still have to tell it to round off the decimal place, though. Note that the draw_value property is commented out; this is how you tell it not to show the number next to the Scale when you're creating one this way.
el: Εδώ δημιουργούμε ένα νέο αντικείμενο κλίμακας χρησιμοποιώντας _adjustment ως ιδιότητα "adjustment". Αυτό είναι μια μεγάλη συντόμευση. Πρέπει ακόμα να του πούμε να στρογγυλέψει τις δεκαδικές θέσεις, όμως. Σημειώστε ότι η ιδιότητα draw_value είναι σχολιασμένη· έτσι του λέτε να μην εμφανίσει τον αριθμό δίπλα στην κλίμακα όταν δημιουργείτε μία κλίμακα με αυτόν τον τρόπο.

note: (itstool) path: section/code
en: 
            // Create the label that shows the product of the two values
            this._product = (this._hScale.get_value() * this._vScale.get_value());
            this._label = new Gtk.Label ({
                label: (String(this._product) + " penguins on the iceberg."),
                height_request: 200,
                width_request: 200,
                wrap: true});
    
            // Connect the two scales to functions which recalculate the label
            this._hScale.connect ("value-changed", Lang.bind (this, this._recalc));
            this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));
el: 
            // Δημιουργία της ετικέτας που εμφανίζει το γινόμενο των δύο τιμών
            this._product = (this._hScale.get_value() * this._vScale.get_value());
            this._label = new Gtk.Label ({
                label: (String(this._product) + " penguins on the iceberg."),
                height_request: 200,
                width_request: 200,
                wrap: true});
    
            // Σύνδεση των δύο κλιμάκων με συναρτήσεις που επανυπολογίζουν την ετικέτα
            this._hScale.connect ("value-changed", Lang.bind (this, this._recalc));
            this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));

note: (itstool) path: section/p
en: We can use the get_value method to find out the numerical value a Scale is set at. We can then do whatever we want with it, including multiply the two Scales' values together and have a <link xref="label.js">Label</link> show us the product. We set the label's text to wrap around, because we're having it display a silly message too.
el: Μπορούμε να χρησιμοποιήσουμε τη μέθοδο get_value για να βρούμε την αριθμητική τιμή ορισμού μιας κλίμακας. Μπορούμε έπειτα να κάνουμε οτιδήποτε θέλουμε μαζί της, συμπεριλαμβάνοντας πολλαπλασιασμό των τιμών των δύο κλιμάκων μαζί και να έχουμε μια <link xref="label.js">ετικέτα</link> που μας δείχνει το γινόμενο. Ορίζουμε το κείμενο της ετικέτας να αναδιπλώνεται, επειδή έχουμε την εμφάνιση ενός χαζού μηνύματος επίσης.

note: (itstool) path: section/p
en: After we create the Label, we connect the two Scales' "value-changed" signals to _recalc, a function that will recalculate the number of penguins on the iceberg and come up with a new message.
el: Αφού δημιουργήσουμε την ετικέτα, συνδέουμε τα σήματα "value-changed" των δύο κλιμάκων στο _recalc, μια συνάρτηση που θα ξαναϋπολογίσει τον αριθμό των πιγκουίνων στο παγόβουνο και δίνει ένα νέο μήνυμα.

note: (itstool) path: section/code
en: 
            // Create a grid to arrange things in
            this._UIGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_top: 20,
                margin_left: 20});
    
            // Attach everything to the grid
            this._UIGrid.attach (this._label, 0, 0, 1, 1);
            this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
            this._UIGrid.attach (this._vScale, 1, 0, 1, 1);
el: 
            // Δημιουργία ενός πλέγματος για τακτοποίηση των πραγμάτων μέσα του
            this._UIGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_top: 20,
                margin_left: 20});
    
            // Προσάρτηση όλων στο πλέγμα
            this._UIGrid.attach (this._label, 0, 0, 1, 1);
            this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
            this._UIGrid.attach (this._vScale, 1, 0, 1, 1);

note: (itstool) path: section/p
en: Here we create a <link xref="grid.js">Grid</link> to put everything in, then attach all our widgets to it. Note that here and on some of the widgets themselves we're using margins to keep things neatly spaced.
el: Εδώ δημιουργούμε ένα <link xref="grid.js">πλέγμα</link> για να τα βάλουμε όλα μέσα, έπειτα προσκολλάμε όλα τα γραφικά στοιχεία μας. Σημειώστε ότι εδώ και για μερικά από τα ίδια τα γραφικά στοιχεία χρησιμοποιούμε περιθώρια για να κρατήσουμε τα πράγματα τοποθετημένα με τάξη.

note: (itstool) path: section/code
en: 
            // Add the grid to the window
            this._window.add (this._UIGrid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
el: 
            // Προσθήκη του πλέγματος στο παράθυρο
            this._window.add (this._UIGrid);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },

note: (itstool) path: section/p
en: Finally, we add the Grid to the window, then tell the window to show itself and all the widgets inside of it.
el: Τελικά, προσθέτουμε το πλέγμα στο παράθυρο, έπειτα λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και όλα τα γραφικά στοιχεία μέσα του.

note: (itstool) path: section/title
en: Function which handles the scales' values changing
el: Η συνάρτηση που χειρίζεται την αλλαγή των τιμών των κλιμάκων

note: (itstool) path: section/code
en: 
        _recalc: function() {
    
            // Figure out what the product of the two scales' values is
            var product = (this._hScale.get_value() * this._vScale.get_value());
    
            // Create a blank comment line in case there isn't a silly comment to make
            var comment = "";
    
            // Make a silly comment based on the number of penguins
            if (product &gt; 9000) {
                comment = "It's over 9000!";
            }
            else if (product &lt; 1000 &amp;&amp; product &gt; 0) {
                comment = "They're getting lonely.";
            }
            else if (product == 0) {
                comment = "They're all gone ...";
            }
            else comment = "";
    
            // Set ._label's new text
            this._label.set_label (String (product) + " penguins on the iceberg. " + comment);
    
        }
    
    });
el: 
        _recalc: function() {
    
            // Υπολογισμός του γινομένου των δύο τιμών των κλιμάκων
            var product = (this._hScale.get_value() * this._vScale.get_value());
    
            // Δημιουργία μιας κενής γραμμής σχολίου σε περίπτωση που δεν υπάρχει ένα χαζό σχόλιο να γίνει
            var comment = "";
    
            // Δημιουργία ενός χαζού σχολίου με βάση τον αριθμό των πιγκουίνων
            if (product &gt; 9000) {
                comment = "It's over 9000!";
            }
            else if (product &lt; 1000 &amp;&amp; product &gt; 0) {
                comment = "They're getting lonely.";
            }
            else if (product == 0) {
                comment = "They're all gone ...";
            }
            else comment = "";
    
            // Νέο κείμενο του Set ._label
            this._label.set_label (String (product) + " penguins on the iceberg. " + comment);
    
        }
    
    });

note: (itstool) path: section/p
en: Remember, we can get a Scale's value using its get_value method. Here we simply recalculate what the product of the two values is after one of the Scales is moved, add in a silly message depending on how many penguins are left, and change the wording on _label to show the new number and message.
el: Να θυμάστε, μπορούμε να πάρουμε μια τιμή κλίμακας χρησιμοποιώντας τη μέθοδο του get_value. Εδώ απλά ξαναϋπολογίζουμε ποιο είναι το γινόμενο των δύο τιμών μετά τη μετακίνηση μιας από τις κλίμακες, προσθέτουμε ένα χαζό μήνυμα ανάλογα με το πόσοι πιγκουίνοι απέμειναν και αλλάζουμε τη διατύπωση στην _label για να δείξουμε το νέο αριθμό και το μήνυμα.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new ScaleExample ();
    app.application.run (ARGV);
el: 
    // Εκτέλεση της εφαρμογής
    let app = new ScaleExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ScaleExample class, and set the application running.
el: Τελικά, δημιουργούμε ένα νέο στιγμιότυπο της ολοκληρωμένης κλάσης ScaleExample και εκτελούμε την εφαρμογή.

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const ScaleExample = new Lang.Class({
        Name: 'Scale Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsscale'
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
    
    
    
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Birds on a Floe"});
    
            // Create the horizontal scale
            this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
            this._hScale.set_valign (Gtk.Align.START);
            this._hScale.set_value (50);
            this._hScale.set_digits (0);
            // this._hScale.set_draw_value (false);
    
            // Create a master adjustment to use for the vertical (or any other) scale
            this._adjustment = new Gtk.Adjustment ({
                value: 95,
                lower: 0,
                upper: 100,
                step_increment: 5,
                page_increment: 10 });
    
            // Create a vertical scale using the adjustment we just made
            this._vScale = new Gtk.Scale ({
                orientation: Gtk.Orientation.VERTICAL,
                adjustment: this._adjustment,
                digits: 0,
                // draw_value: false,
                margin_left: 10 });
    
            // Create the label that shows the product of the two values
            this._product = (this._hScale.get_value() * this._vScale.get_value());
            this._label = new Gtk.Label ({
                label: (String(this._product) + " penguins on the iceberg."),
                height_request: 200,
                width_request: 200,
                wrap: true});
    
            // Connect the two scales to functions which recalculate the label
            this._hScale.connect ("value-changed", Lang.bind (this, this._recalc));
            this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));
    
            // Create a grid to arrange things in
            this._UIGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_top: 20,
                margin_left: 20});
    
            // Attach everything to the grid
            this._UIGrid.attach (this._label, 0, 0, 1, 1);
            this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
            this._UIGrid.attach (this._vScale, 1, 0, 1, 1);
    
            // Add the grid to the window
            this._window.add (this._UIGrid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
    
    
    
        _recalc: function() {
    
            // Figure out what the product of the two scales' values is
            var product = (this._hScale.get_value() * this._vScale.get_value());
    
            // Create a blank comment line in case there isn't a silly comment to make
            var comment = "";
    
            // Make a silly comment based on the number of penguins
            if (product &gt; 9000) {
                comment = "It's over 9000!";
            }
            else if (product &lt; 1000 &amp;&amp; product &gt; 0) {
                comment = "They're getting lonely.";
            }
            else if (product == 0) {
                comment = "They're all gone ...";
            }
            else comment = "";
    
            // Set ._label's new text
            this._label.set_label (String (product) + " penguins on the iceberg. " + comment);
    
        }
    
    });
    
    // Run the application
    let app = new ScaleExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const ScaleExample = new Lang.Class({
        Name: 'Scale Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsscale'
            });
    
        // Σύνδεση των σημάτων '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 ();
        },
    
    
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Birds on a Floe"});
    
            // Δημιουργία της οριζόντιας κλίμακας
            this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
            this._hScale.set_valign (Gtk.Align.START);
            this._hScale.set_value (50);
            this._hScale.set_digits (0);
            // this._hScale.set_draw_value (false);
    
            // Δημιουργία μιας κύριας ρύθμισης για χρήση με την κάθετη (ή οποιαδήποτε άλλη) κλίμακα
            this._adjustment = new Gtk.Adjustment ({
                value: 95,
                lower: 0,
                upper: 100,
                step_increment: 5,
                page_increment: 10 });
    
            // Δημιουργία μιας κάθετης κλίμακας χρησιμοποιώντας τη ρύθμιση που μόλις κάναμε
            this._vScale = new Gtk.Scale ({
                orientation: Gtk.Orientation.VERTICAL,
                adjustment: this._adjustment,
                digits: 0,
                // draw_value: false,
                margin_left: 10 });
    
            // Δημιουργία της ετικέτας που εμφανίζει το γινόμενο των δύο τιμών
            this._product = (this._hScale.get_value() * this._vScale.get_value());
            this._label = new Gtk.Label ({
                label: (String(this._product) + " penguins on the iceberg."),
                height_request: 200,
                width_request: 200,
                wrap: true});
    
            // Σύνδεση των δύο κλιμάκων με τις συναρτήσεις που επανυπολογίζουν την ετικέτα
            this._hScale.connect ("value-changed", Lang.bind (this, this._recalc));
            this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));
    
            // Δημιουργία ενός πλέγματος για τακτοποίηση των πραγμάτων μέσα του
            this._UIGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_top: 20,
                margin_left: 20});
    
            // Προσάρτηση όλων στο πλέγμα
            this._UIGrid.attach (this._label, 0, 0, 1, 1);
            this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
            this._UIGrid.attach (this._vScale, 1, 0, 1, 1);
    
            // Προσθήκη του πλέγματος στο παράθυρο
            this._window.add (this._UIGrid);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
    
    
        _recalc: function() {
    
            // Υπολογισμός του γινομένου των δύο τιμών των κλιμάκων
            var product = (this._hScale.get_value() * this._vScale.get_value());
    
            // Δημιουργία μιας κενής γραμμής σχολίου στην περίπτωση που δεν υπάρχει ένα χαζό σχόλιο να γίνει
            var comment = "";
    
            // Δημιουργία ενός χαζού σχολίου με βάση τον αριθμό των πιγκουίνων
            if (product &gt; 9000) {
                comment = "It's over 9000!";
            }
            else if (product &lt; 1000 &amp;&amp; product &gt; 0) {
                comment = "They're getting lonely.";
            }
            else if (product == 0) {
                comment = "They're all gone ...";
            }
            else comment = "";
    
            // Νέο κείμενο του Set ._label
            this._label.set_label (String (product) + " penguins on the iceberg. " + comment);
    
        }
    
    });
    
    // Εκτέλεση της εφαρμογής 
    let app = new ScaleExample ();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: Scale (Python)
el: Κλίμακα (Python)

note: (itstool) path: section/title
en: Useful methods for a Scale widget
el: Χρήσιμες μέθοδοι για γραφικό στοιχείο κλίμακας

note: (itstool) path: section/p
en: A Gtk.Adjustment is needed to construct the Gtk.Scale. This is the representation of a value with a lower and upper bound, together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type <code>float</code>; <code>step_increment</code> is the increment/decrement that is obtained by using the cursor keys, <code>page_increment</code> the one that is obtained clicking on the scale itself. Note that <code>page_size</code> is not used in this case, it should be set to <code>0</code>.
el: Μια Gtk.Adjustment απαιτείται για να δομήσει την Gtk.Scale. Αυτή είναι η αναπαράσταση μιας τιμής με κάτω και άνω όριο, μαζί με αυξήσεις βήματος και σελίδας και ένα μέγεθος σελίδας και δομείται ως <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> όπου τα πεδία είναι του τύπου <code>float</code>· <code>step_increment</code> είναι η αύξηση/μείωση που παίρνεται χρησιμοποιώντας τα πλήκτρα δρομέα, <code>page_increment</code> αυτή που παίρνεται πατώντας στην ίδια την κλίμακα. Σημειώστε ότι το <code>page_size</code> δεν χρησιμοποιείται σε αυτήν την περίπτωση, θα πρέπει να οριστεί σε <code>0</code>.

note: (itstool) path: section/p
en: In line 28 the signal <code>"value-changed"</code> is connected to the callback function <code>scale_moved()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 28 το σήμα <code>"value-changed"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>scale_moved()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: item/p
en: <code>get_value()</code> retrieves the current value of the scale; <code>set_value(value)</code> sets it (if the <code>value</code>, of type <code>float</code>, is outside the minimum or maximum range, it will be clamped to fit inside them). These are methods of the class Gtk.Range.
el: Η <code>get_value()</code> ανακτά την τρέχουσα τιμή της κλίμακας· η <code>set_value(value)</code> την ορίζει (εάν η <code>value</code>, του τύπου <code>float</code>, είναι έξω από την ελάχιστη ή μέγιστη περιοχή, θα δεσμευθεί να προσαρμοστεί μέσα τους). Αυτές είναι οι μέθοδοι της κλάσης Gtk.Range.

note: (itstool) path: item/p
en: Use <code>set_draw_value(False)</code> to avoid displaying the current value as a string next to the slider.
el: Χρησιμοποιήστε <code>set_draw_value(False)</code> για αποφυγή εμφάνισης της τρέχουσας τιμής ως συμβολοσειράς δίπλα στον ολισθητή.

note: (itstool) path: item/p
en: To highlight the part of the scale between the origin and the current value:
el: Για τονισμό μέρους της κλίμακας μεταξύ της αρχικής και της τρέχουσας τιμής:

note: (itstool) path: item/p
en: in the callback function of the "value-changed" signal, so to have the new filling every time the value is changed. These are methods of the class Gtk.Range.
el: στην συνάρτηση επανάκλησης του σήματος "value-changed", έτσι ώστε να συμπληρώνεται κάθε φορά που αλλάζει η τιμή. Αυτές είναι οι μέθοδοι της κλάσης Gtk.Range.

note: (itstool) path: item/p
en: <code>add_mark(value, position, markup)</code> adds a mark at the <code>value</code> (<code>float</code> or <code>int</code> if that is the precision of the scale), in <code>position</code> (<code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>) with text <code>Null</code> or <code>markup</code> in the Pango Markup Language. To clear marks, <code>clear_marks()</code>.
el: <code>add_mark(value, position, markup)</code> προσθέτει ένα σημάδι στην <code>value</code> (<code>float</code> ή <code>int</code> εάν αυτή είναι η ακρίβεια της κλίμακας), σε <code>position</code> (<code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>) με κείμενο <code>Null</code> ή <code>markup</code> στη γλώσσα επισήμανσης Pango. Για καθαρισμό σημαδιών, <code>clear_marks()</code>.

note: (itstool) path: item/p
en: <code>set_digits(digits)</code> sets the precision of the scale at <code>digits</code> digits.
el: Ο <code>set_digits(digits)</code> ορίζει την ακρίβεια της κλίμακας σε ψηφία <code>digits</code>.

[ctx: text]
note: (itstool) path: info/title
en: Scale (Vala)
el: Κλίμακα (Vala)

note: (itstool) path: info/desc
en: Adds scrollbars to its child widget
el: Προσθέτει γραμμές κύλισης στο θυγατρικό του γραφικό στοιχείου

note: (itstool) path: page/title
en: ScrolledWindow
el: Κυλιόμενο παράθυρο (ScrolledWindow)

note: (itstool) path: page/p
en: An image in a scrolled window.
el: Μια εικόνα σε κυλιόμενο παράθυρο.

[ctx: text]
note: (itstool) path: info/title
en: ScrolledWindow (JavaScript)
el: Κυλιόμενο παράθυρο (ScrolledWindow) (JavaScript)

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const GObject = imports.gi.GObject;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const ScrolledWindowExample = new Lang.Class ({
        Name: 'ScrolledWindow Example',
    
        // Create the application itself
        _init: function () {
            this.application = new Gtk.Application({ application_id: 'org.example.jscrolledwindow' });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function() {
            this.window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
    
        // Build the application's UI
        _buildUI: function() {
            // Create the application window
            this.window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                        window_position: Gtk.WindowPosition.CENTER,
                                                        title: "ScrolledWindow Example",
                                                        default_width: 200,
                                                        default_height: 200,
                                                        border_width: 10 });
            // the scrolledwindow
            this.scrolledWindow = new Gtk.ScrolledWindow();
            this.scrolledWindow.set_border_width(10);
            // there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)
            this.scrolledWindow.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS);
            // an image - slightly larger than the window
            this.image = new Gtk.Image();
            this.image.set_from_file("gnome-image.png");
    
            // add the image to the scrolledwindow
            this.scrolledWindow.add_with_viewport(this.image);
    
            // add the scrolledwindow to the window
            this.window.add(this.scrolledWindow);
            this.window.show_all();
        }
    });
    
    // Run the application
    let app = new ScrolledWindowExample();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const GObject = imports.gi.GObject;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const ScrolledWindowExample = new Lang.Class ({
        Name: 'ScrolledWindow Example',
    
        // Δημιουργία αυτής καθεαυτής της εφαρμογής
        _init: function () {
            this.application = new Gtk.Application({ application_id: 'org.example.jscrolledwindow' });
    
            // Σύνδεση σημάτων '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 ();
        },
    
        // Κατασκευή της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
            // Δημιουργία του παραθύρου της εφαρμογής
            this.window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                        window_position: Gtk.WindowPosition.CENTER,
                                                        title: "ScrolledWindow Example",
                                                        default_width: 200,
                                                        default_height: 200,
                                                        border_width: 10 });
            // το κυλιόμενο παράθυρο
            this.scrolledWindow = new Gtk.ScrolledWindow();
            this.scrolledWindow.set_border_width(10);
            // υπάρχει πάντα η γραμμή κύλισης (αλλιώς: AUTOMATIC - μόνο αν χρειάζεται - ή NEVER)
            this.scrolledWindow.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS);
            // μια εικόνα - ελαφριά μεγαλύτερη από το παράθυρο
            this.image = new Gtk.Image();
            this.image.set_from_file("gnome-image.png");
    
            // προσθήκη της εικόνας στο κυλιόμενο παράθυρο
            this.scrolledWindow.add_with_viewport(this.image);
    
            // προσθήκη του κυλιόμενου παράθυρου στο παράθυρο
            this.window.add(this.scrolledWindow);
            this.window.show_all();
        }
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new ScrolledWindowExample();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: ScrolledWindow (Python)
el: Κυλιόμενο παράθυρο (ScrolledWindow) (Python)

note: (itstool) path: section/title
en: Useful methods for a ScrolledWindow widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο ScrolledWindow

note: (itstool) path: item/p
en: <code>set_policy(hscrollbar_policy, vscrollbar_policy)</code> where each of the arguments is one of <code>Gtk.Policy.AUTOMATIC, Gtk.Policy.ALWAYS, Gtk.Policy.NEVER</code> regulates whether the horizontal and vertical scrollbars should appear: with <code>AUTOMATIC</code> they appear only if needed, <code>ALWAYS</code> and <code>NEVER</code> are self-explanatory.
el: <code>set_policy(hscrollbar_policy, vscrollbar_policy)</code> όπου όλα τα ορίσματα είναι ένα από τα <code>Gtk.Policy.AUTOMATIC, Gtk.Policy.ALWAYS, Gtk.Policy.NEVER</code> ρυθμίζει εάν οι οριζόντιες και κάθετες γραμμές κύλισης πρέπει να εμφανίζονται: με <code>AUTOMATIC</code> θα εμφανίζονται μόνο εάν χρειάζεται, <code>ALWAYS</code> και <code>NEVER</code> είναι αυτονόητα.

note: (itstool) path: item/p
en: <code>add_with_viewport(widget)</code> is used to add the Gtk.Widget <code>widget</code> without native scrolling capabilities inside the window.
el: <code>add_with_viewport(widget)</code> χρησιμοποιείται για να προσθέσει το Gtk.Widget <code>widget</code> χωρίς εγγενείς δυνατότητες κύλισης μέσα στο παράθυρο.

note: (itstool) path: item/p
en: <code>set_placement(window_placement)</code> sets the placement of the contents with respect to the scrollbars for the scrolled window. The options for the argument are <code>Gtk.CornerType.TOP_LEFT</code> (default: the scrollbars are on the bottom and on the right of the window), <code>Gtk.CornerType.TOP_RIGHT, Gtk.CornerType.BOTTOM_LEFT, Gtk.CornerType.BOTTOM_RIGHT</code>.
el: <code>set_placement(window_placement)</code> ορίζει την τοποθέτηση των περιεχομένων σχετικά με τις γραμμές κύλισης για το κυλιόμενο παράθυρο. Οι επιλογές για το όρισμα είναι <code>Gtk.CornerType.TOP_LEFT</code> (προεπιλογή: οι γραμμές κύλισης είναι στο τέλος και στα δεξιά του παραθύρου), <code>Gtk.CornerType.TOP_RIGHT, Gtk.CornerType.BOTTOM_LEFT, Gtk.CornerType.BOTTOM_RIGHT</code>.

note: (itstool) path: item/p
en: <code>set_hadjustment(adjustment)</code> and <code>set_vadjustment(adjustment)</code> set the Gtk.Adjustment <code>adjustment</code>. This is the representation of a value with a lower and upper bound, together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type <code>float</code>. (Note that <code>step_increment</code> is not used in this case, it can be set to <code>0</code>.)
el: <code>set_hadjustment(adjustment)</code> και <code>set_vadjustment(adjustment)</code> ορίζει το Gtk.Adjustment <code>adjustment</code>. Αυτή είναι η αναπαράσταση μιας τιμής με ένα κάτω και ένα πάνω όριο, μαζί με αυξήσεις βήματος και σελίδας και ένα μέγεθος σελίδας και δομείται ως <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> όπου τα πεδία είναι του τύπου <code>float</code>. (Σημειώστε ότι <code>step_increment</code> δεν χρησιμοποιείται σε αυτήν την περίπτωση, μπορεί να οριστεί σε <code>0</code>.)

[ctx: text]
note: (itstool) path: info/title
en: ScrolledWindow (Vala)
el: Κυλιόμενο παράθυρο (ScrolledWindow) (Vala)

note: (itstool) path: page/code
en: /* This is the application. */
    public class MyApplication : Gtk.Application {
    	/* Override the 'activate' signal of GLib.Application. */
    	protected override void activate () {
    		/* Create the window of this application. */
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "ScrolledWindow Example";
    		window.set_default_size (200, 200);
    
    		var scrolled_window = new Gtk.ScrolledWindow (null, null);
    		scrolled_window.set_border_width (10);
    		scrolled_window.add_with_viewport (new Gtk.Image.from_file ("gnome-image.png"));
    		scrolled_window.set_policy (Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC);
    
    		window.add (scrolled_window);
    		window.show_all ();
    	}
    }
    
    /* main creates and runs the application. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
el: /* Αυτή είναι η εφαρμογή. */
    public class MyApplication : Gtk.Application {
    	/* Αντικατάσταση του σήματος 'activate' της GLib.Application. */
    	protected override void activate () {
    		/* Create the window of this application. */
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "ScrolledWindow Example";
    		window.set_default_size (200, 200);
    
    		var scrolled_window = new Gtk.ScrolledWindow (null, null);
    		scrolled_window.set_border_width (10);
    		scrolled_window.add_with_viewport (new Gtk.Image.from_file ("gnome-image.png"));
    		scrolled_window.set_policy (Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC);
    
    		window.add (scrolled_window);
    		window.show_all ();
    	}
    }
    
    /* Η κύρια δημιουργεί και εκτελεί την εφαρμογή. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

[ctx: text]
note: (itstool) path: info/title
en: Separator (C)
el: Διαχωριστικό (C)

note: (itstool) path: info/desc
en: A separator widget
el: Ένας διαχωριστής γραφικού στοιχείου

note: (itstool) path: page/title
en: Separator
el: Διαχωριστής

note: (itstool) path: page/p
en: A horizontal and a vertical separator divide some labels.
el: Οριζόντιος και κάθετος διαχωριστής διαιρούν κάποιες ετικέτες.

note: (itstool) path: section/title
en: API Reference
el: Αναφορά API

[ctx: text]
note: (itstool) path: info/title
en: Separator (Python)
el: Διαχωριστής (Python)

[ctx: text]
note: (itstool) path: info/title
en: Separator (Vala)
el: Διαχωριστικό (Vala)

note: (itstool) path: section/code
en: /* This is the application. */
    public class Application : Gtk.Application {
    
    	public Application () {
    		Object (application_id: "org.example.window");
    	}
    
    	/* Override the 'activate' signal of GLib.Application,
    	 * which is inherited by Gtk.Application. */
    	public override void activate () {
    
    		var window = new Gtk.Window ();
    		window.title = "Separator Example";
    
    		var label1 = new Gtk.Label ("Below, a horizontal separator.");
    		var label2 = new Gtk.Label ("On the right, a vertical separator.");
    		var label3 = new Gtk.Label ("On the left, a vertical separator.");
    
    		var hseparator = new Gtk.Separator (Gtk.Orientation.HORIZONTAL);
    		var vseparator = new Gtk.Separator (Gtk.Orientation.VERTICAL);
    
    		var grid = new Gtk.Grid();
    
    		grid.attach (label1, 0, 0, 3, 1);
    		grid.attach (hseparator, 0, 1, 3, 1);
    		grid.attach (label2, 0, 2, 1, 1);
    		grid.attach (vseparator, 1, 2, 1, 1);
    		grid.attach (label3, 2, 2, 1, 1);
    
    		grid.set_column_homogeneous(true);
    
    		window.add (grid);
    		this.add_window (window);
    
    		window.show_all ();
    	}
    }
    
    /* The main function creates the application and runs it.*/
    int main (string[] args) {
    	var app = new Application ();
    	return app.run (args);
    }
el: /* Αυτή είναι η εφαρμογή. */
    public class Application : Gtk.Application {
    
    	public Application () {
    		Object (application_id: "org.example.window");
    	}
    
    	/* Αντικατάσταση του σήματος 'activate' της GLib.Application,
    	 * που κληρονομείται από Gtk.Application. */
    	public override void activate () {
    
    		var window = new Gtk.Window ();
    		window.title = "Separator Example";
    
    		var label1 = new Gtk.Label ("Below, a horizontal separator.");
    		var label2 = new Gtk.Label ("On the right, a vertical separator.");
    		var label3 = new Gtk.Label ("On the left, a vertical separator.");
    
    		var hseparator = new Gtk.Separator (Gtk.Orientation.HORIZONTAL);
    		var vseparator = new Gtk.Separator (Gtk.Orientation.VERTICAL);
    
    		var grid = new Gtk.Grid();
    
    		grid.attach (label1, 0, 0, 3, 1);
    		grid.attach (hseparator, 0, 1, 3, 1);
    		grid.attach (label2, 0, 2, 1, 1);
    		grid.attach (vseparator, 1, 2, 1, 1);
    		grid.attach (label3, 2, 2, 1, 1);
    
    		grid.set_column_homogeneous(true);
    
    		window.add (grid);
    		this.add_window (window);
    
    		window.show_all ();
    	}
    }
    
    /* Η κύρια συνάρτηση δημιουργεί την εφαρμογή και την εκτελεί.*/
    int main (string[] args) {
    	var app = new Application ();
    	return app.run (args);
    }

note: (itstool) path: item/p
en: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html">GtkWindow</link>
el: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html">Παράθυρο Gtk (GtkWindow)</link>

note: (itstool) path: item/p
en: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Separator.html">GtkSeparator</link>
el: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Separator.html">Διαχωριστικό Gtk (GtkSeparator)</link>

note: (itstool) path: item/p
en: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Grid.html">GtkGrid</link>
el: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Grid.html">Πλέγμα Gtk (GtkGrid)</link>

note: (itstool) path: item/p
en: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Label.html">GtkLabel</link>
el: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Label.html">Ετικέτα Gtk (GtkLabel)</link>

note: (itstool) path: page/title
en: Set up gedit for JavaScript development
el: Εγκατάσταση gedit για ανάπτυξη JavaScript

note: (itstool) path: page/p
en: This tutorial will show you how to set up <link href="http://projects.gnome.org/gedit/">gedit</link>, GNOME's basic text editor, so that it has a handful of extra features which are useful for writing JavaScript code.
el: Αυτό το μάθημα δείχνει πώς να εγκαταστήσετε το <link href="http://projects.gnome.org/gedit/">gedit</link>, βασικό επεξεργαστή κειμένου του GNOME, έτσι ώστε να έχει κάποια πρόσθετα γνωρίσματα που είναι χρήσιμα για συγγραφή κώδικα JavaScript.

note: (itstool) path: section/title
en: Making code clearer
el: Κάνοντας τον κώδικα σαφέστερο

note: (itstool) path: section/p
en: Click on <gui>Edit</gui> in gedit's menu bar, then click on <gui>Preferences</gui>. You should see something like this:
el: Πατήστε στην <gui>Επεξεργασία</gui> στη γραμμή μενού του gedit, έπειτα πατήστε <gui>Προτιμήσεις</gui>. Θα πρέπει να δείτε κάτι όπως αυτό:

note: (itstool) path: section/p
en: Here are the options you want to make sure are turned on.
el: Εδώ είναι οι επιλογές που θέλετε να βεβαιωθείτε ότι είναι ενεργές.

note: (itstool) path: item/p
en: <gui>Display line numbers</gui> will help you compare the code you type in with the original, and make it easier to see which line is causing an error if there is a bug.
el: <gui>Η εμφάνιση των αριθμών γραμμής</gui> θα σας βοηθήσει να συγκρίνετε τον κώδικα που πληκτρολογήσατε με τον αρχικό και διευκολύνει να δείτε ποια γραμμή προκαλεί λάθος εάν υπάρχει σφάλμα.

note: (itstool) path: item/p
en: <gui>Highlight current line</gui> makes it easier to see which line you're on, when you have to go back and forth a lot.
el: <gui>Ο τονισμός της τρέχουσας γραμμής</gui> διευκολύνει να δείτε σε ποια γραμμή είσαστε, όταν πρέπει να πάτε πίσω και μπρος αρκετά.

note: (itstool) path: item/p
en: <gui>Highlight matching brackets</gui> helps you make sure you didn't leave out a bracket by accident.
el: <gui>Ο τονισμός παρένθεσης που ταιριάζει</gui> βοηθά να βεβαιωθείτε ότι δεν αφήνετε μια παρένθεση τυχαία.

note: (itstool) path: section/title
en: Making editing easier
el: Διευκολύνοντας την επεξεργασία

note: (itstool) path: section/p
en: In gedit's <gui>Preferences</gui> dialog, click on the <gui>Editor</gui> tab. You should see something like this:
el: Στον διάλογο του gedit <gui>προτιμήσεις</gui>, πατήστε στην καρτέλα <gui>επεξεργαστής</gui>. Θα πρέπει να δείτε κάτι όπως αυτό:

note: (itstool) path: section/p
en: Here, you want to have <gui>Enable automatic indentation</gui> turned on. This means that when you hit <key>Enter</key> the cursor stays indented as far as the last line was. This is extremely useful when writing JavaScript code, since it uses indentation to make it clearer which parts do what.
el: Εδώ, θέλετε να έχετε ενεργό το <gui>ενεργοποίηση αυτόματης εσοχής</gui>. Αυτί σημαίνει ότι όταν πατάτε <key>εισαγωγή</key> ο δρομέας παραμένει με εσοχή όσο ήταν η τελευταία γραμμή. Αυτό είναι ιδιαίτερα χρήσιμο όταν γράφετε κώδικα JavaScript, αφού χρησιμοποιεί εσοχή για να κάνετε σαφέστερο ποια μέρη κάνουν τι.

note: (itstool) path: note/p
en: If you want to share code with other people who write GNOME JavaScript applications, you'll also want to set <gui>Tab width</gui> to 4 and turn on <gui>Insert spaces instead of tabs</gui>.
el: Εάν θέλετε να μοιραστείτε κώδικα με άλλα άτομα που γράφουν εφαρμογές JavaScript για το GNOME, θα θέλετε επίσης να ορίσετε το <gui>πλάτος του στηλοθέτη</gui> στο 4 και να ενεργοποιήσετε την <gui>εισαγωγή κενών αντί για στηλοθέτες</gui>.

[ctx: text]
note: (itstool) path: info/title
en: Signals and callbacks (Python)
el: Σήματα και επανακλήσεις (Python)

note: (itstool) path: info/desc
en: An explanation of signals and callbacks in GTK+.
el: Μια εξήγηση των σημάτων και των επανακλήσεων στο GTK+.

note: (itstool) path: page/title
en: Signals and callbacks
el: Σήματα και επανακλήσεις

note: (itstool) path: section/p
en: Like most GUI toolkits, GTK+ uses an event-driven programming model. When the user is doing nothing, GTK+ sits in the main loop and waits for input. If the user performs some action - say, a mouse click - then the main loop "wakes up" and delivers an event to GTK+.
el: Όπως τα περισσότερα πακέτα εργαλείων GUI, το GTK+ χρησιμοποιεί ένα πρότυπο προγραμματισμού οδηγούμενο από συμβάντα. Όταν ο χρήστης δεν κάνει τίποτα, το GTK+ κάθεται στον κύριο βρόχο και περιμένει για εισαγωγή. Εάν ο χρήστης εκτελέσει κάποια ενέργεια - ας πούμε, πάτημα ποντικιού - τότε ο κύριος βρόχος "ξυπνά" και διαβιβάζει ένα συμβάν στο GTK+.

note: (itstool) path: section/p
en: When widgets receive an event, they frequently emit one or more signals. Signals notify your program that "something interesting happened" by invoking functions you have connected to the signal. Such functions are commonly known as callbacks. When your callbacks are invoked, you would typically take some action. After a callback finishes, GTK+ will return to the main loop and await more user input.
el: Όταν τα γραφικά στοιχεία δέχονται ένα συμβάν, εκπέμπουν συχνά ένα ή περισσότερα σήματα. Τα σήματα ειδοποιούν το πρόγραμμά σας ότι "κάτι σημαντικό συνέβη" καλώντας τις συναρτήσεις που έχετε συνδέσει στο σήμα. Τέτοιες συναρτήσεις είναι γενικά γνωστές ως επανακλήσεις. Όταν οι επανακλήσεις σας καλούνται, θα πάρετε τυπικά κάποια ενέργεια. Αφού τελειώσει η επανάκληση, το GTK+ θα επιστρέψει στον κύριο βρόχο και θα περιμένει περισσότερες εισαγωγές του χρήστη.

note: (itstool) path: section/p
en: A generic example is: <code>handler_id = widget.connect("event", callback, data)</code>. <code>widget</code> is an instance of a widget we created earlier. Next, the <code>event</code> we are interested in. Each widget has its own particular events which can occur. For instance, if you have a Gtk.Button you usually want to connect to the "clicked" event: this means that when the button is clicked, the signal is issued. Another example is the <code>notify::property</code> signal: whenever a <link xref="properties.py">property</link> is modified on a GObject, instead of just emitting the <code>notify</code> signal, GObject associates as a detail to this signal emission the name of the property modified. This allows clients who wish to be notified of changes to only one property to filter most events before receiving them. Thirdly, the callback argument is the name of the callback function, which contains the code which runs when signals of the specified type are issued. Finally, the optional data argument includes any data which should be passed when the signal is issued.
el: Ένα γενικό παράδειγμα είναι: <code>handler_id = widget.connect("event", callback, data)</code>. <code>widget</code> είναι ένα στιγμιότυπο του γραφικού στοιχείου που δημιουργήσαμε νωρίτερα. Κατόπιν ενδιαφερόμαστε για το <code>event</code>. Κάθε γραφικό στοιχείο έχει τα δικά του συγκεκριμένα συμβάντα που μπορούν να συμβούν. Για παράδειγμα, εάν έχετε ένα Gtk.Button συνήθως θέλετε να συνδεθείτε με το "πατημένο" συμβάν: αυτό σημαίνει ότι όταν το κουμπί πατιέται, το σήμα εκδίδεται. Ένα άλλο παράδειγμα είναι το σήμα <code>notify::property</code>: όποτε μια <link xref="properties.py">ιδιότητα</link> τροποποιείται σε ένα GObject, αντί για απλή εκπομπή του σήματος <code>notify</code>, το GObject συσχετίζει ως μια λεπτομέρεια σε αυτή την εκπομπή σήματος το όνομα της τροποποιημένης ιδιότητας. Αυτό επιτρέπει στους πελάτες που επιθυμούν να ειδοποιηθούν για τις αλλαγές σε μόνο μια ιδιότητα να φιλτράρουν τα περισσότερα συμβάντα πριν τα δεχθούν. Τρίτο, το όρισμα επανάκλησης είναι το όνομα της συνάρτησης επανάκλησης, που περιέχει τον κώδικα που εκτελείται όταν τα σήματα του συγκεκριμένου τύπου εκδίδονται. Τελικά, το προαιρετικό όρισμα δεδομένων περιλαμβάνει οποιαδήποτε δεδομένα που θα έπρεπε μα περαστούν όταν το σήμα εκδίδεται.

note: (itstool) path: section/p
en: The function returns a number (the <code>handler_id</code>) that identifies this particular signal-callback pair. This number is required to disconnect from a signal such that the callback function will not be called during any future or currently ongoing emissions of the signal it has been connected to, as in <code>widget.disconnect(handler_id)</code>.
el: Η συνάρτηση επιστρέφει έναν αριθμό (the <code>handler_id</code>) που αναγνωρίζει αυτό το συγκεκριμένο ζευγάρι σήματος-επανάκλησης. Αυτός ο αριθμός απαιτείται για αποσύνδεση από ένα τέτοιο σήμα που η συνάρτηση επανάκλησης δεν θα κληθεί κατά τη διάρκεια οποιωνδήποτε μελλοντικών ή τρεχόντων συνεχιζόμενων εκπομπών του σήματος στο οποίο συνδέθηκε, όπως στο <code>widget.disconnect(handler_id)</code>.

note: (itstool) path: section/p
en: <link href="http://developer.gnome.org/gobject/stable/signal.html">Signals</link> in GObject documentation
el: <link href="http://developer.gnome.org/gobject/stable/signal.html">Σήματα</link> στην τεκμηρίωση GObject

note: (itstool) path: section/p
en: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html">Basics - Main loop and Signals</link> in Python GTK+ 3 Tutorial
el: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html">Βασικά - Κύριος βρόχος και σήματα</link> στο μάθημα Python GTK+ 3

note: (itstool) path: info/desc
en: Retrieve an integer or floating point number
el: Ανάκτηση ακέραιου ή αριθμού κινητής υποδιαστολής

note: (itstool) path: page/p
en: Choose a number, by entering it or by clicking on the -/+ buttons!
el: Επιλέξτε έναν αριθμό, πληκτρολογώντας τον ή με κλικ στα κουμπιά -/+!

note: (itstool) path: page/code
en: 
    #include &lt;gtk/gtk.h&gt;
    
    
    
    /* This is the callback function. 
     * It is a handler function which reacts to the signal. 
     * In this case, it will notify the user the value of their spinbutton 
     * as a label.
     */
    static void
    spin_clicked (GtkSpinButton *spinbutton,
                  gpointer       user_data)
    {
       GtkWidget *label = user_data;
       gint value = gtk_spin_button_get_value_as_int (spinbutton);
    
       /* %d - Is used when printing integers.
        * Note: Using g_strdup_printf returns a string that must be freed. 
        * (In which is done below)
        */
       gchar *str = g_strdup_printf ("The number you selected is %d.", value);
       gtk_label_set_text (GTK_LABEL (label), str);
    
       g_free(str);
    }
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      /* Declare variables */
      GtkWidget *window;
      GtkWidget *label;
      GtkWidget *grid;
      GtkWidget *spin_button;
      GtkAdjustment *adjustment;
    
    
      /* Create a window with a title, a border width, and a default size */
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "SpinButton Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 210, 70);
      gtk_container_set_border_width (GTK_CONTAINER (window), 5);
    
      /* Create a label to be shown in the window */
      label = gtk_label_new ("Choose a number");
    
      /* Create an adjustment representing an adjustable bounded value */
      adjustment = gtk_adjustment_new (0, 0, 100, 1, 0, 0);
    
    
      /* Create a spin button that is to be as wide as possible */
      spin_button = gtk_spin_button_new (adjustment, 1, 0);
      gtk_widget_set_hexpand (spin_button, TRUE);
      
      /* Connecting the "value-changed" signal for the spinbutton 
       * to the appropriate callback function. 
       */
      g_signal_connect (spin_button, 
                        "value-changed", 
                        G_CALLBACK (spin_clicked), 
                        label);
    
    
      /* Create a grid and arrange everything accordingly */
      grid = gtk_grid_new ();
      gtk_grid_set_column_spacing (GTK_GRID (grid), 10);
      gtk_grid_set_column_homogeneous (GTK_GRID (grid), TRUE);
      gtk_grid_attach (GTK_GRID (grid), spin_button, 0, 0, 1, 1);
      gtk_grid_attach (GTK_GRID (grid), label, 0, 1, 1, 1);
      
    
      gtk_container_add (GTK_CONTAINER (window), grid);
    
      gtk_widget_show_all (window);
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }
el: 
    #include &lt;gtk/gtk.h&gt;
    
    
    
    /* Αυτή είναι η συνάρτηση επανάκλησης. 
     * Είναι μια συνάρτηση χειρισμού που αντιδρά στο σήμα. 
     * Σε αυτήν την περίπτωση, θα ειδοποιήσει τον χρήστη για την τιμή του αυξομειούμενου πλήκτρου τους 
     * ως μια ετικέτα.
     */
    static void
    spin_clicked (GtkSpinButton *spinbutton,
                  gpointer       user_data)
    {
       GtkWidget *label = user_data;
       gint value = gtk_spin_button_get_value_as_int (spinbutton);
    
       /* %d - Is used when printing integers.
        * Σημείωση: Η χρήση του g_strdup_printf επιστρέφει μια συμβολοσειρά που πρέπει να ελευθερωθεί. 
        * (που γίνεται παρακάτω)
        */
       gchar *str = g_strdup_printf ("The number you selected is %d.", value);
       gtk_label_set_text (GTK_LABEL (label), str);
    
       g_free(str);
    }
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      /* Δήλωση μεταβλητών */
      GtkWidget *window;
      GtkWidget *label;
      GtkWidget *grid;
      GtkWidget *spin_button;
      GtkAdjustment *adjustment;
    
    
      /* Δημιουργία παραθύρου με τίτλο, πλάτος περιγράμματος και προεπιλεγμένο μέγεθος */
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "SpinButton Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 210, 70);
      gtk_container_set_border_width (GTK_CONTAINER (window), 5);
    
      /* Δημιουργία μιας ετικέτας για εμφάνιση στο παράθυρο */
      label = gtk_label_new ("Choose a number");
    
      /* Δημιουργία μιας ρύθμισης που εμφανίζει μια ρυθμίσιμη οριακή τιμή */
      adjustment = gtk_adjustment_new (0, 0, 100, 1, 0, 0);
    
    
      /* Δημιουργία ενός κουμπιού περιστροφής που πρόκειται να είναι όσο το δυνατό πιο πλατύ */
      spin_button = gtk_spin_button_new (adjustment, 1, 0);
      gtk_widget_set_hexpand (spin_button, TRUE);
      
      /* Σύνδεση του σήματος "value-changed" για το κουμπί περιστροφής 
       * στην κατάλληλη συνάρτηση επανάκλησης. 
       */
      g_signal_connect (spin_button, 
                        "value-changed", 
                        G_CALLBACK (spin_clicked), 
                        label);
    
    
      /* Δημιουργία ενός πλέγματος και τακτοποίηση όλων κατάλληλα */
      grid = gtk_grid_new ();
      gtk_grid_set_column_spacing (GTK_GRID (grid), 10);
      gtk_grid_set_column_homogeneous (GTK_GRID (grid), TRUE);
      gtk_grid_attach (GTK_GRID (grid), spin_button, 0, 0, 1, 1);
      gtk_grid_attach (GTK_GRID (grid), label, 0, 1, 1, 1);
      
    
      gtk_container_add (GTK_CONTAINER (window), grid);
    
      gtk_widget_show_all (window);
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: SpinButton (JavaScript)
el: Κουμπί αυξομείωσης (SpinButton) (JavaScript)

note: (itstool) path: info/desc
en: A number entry field that has + and - buttons
el: Ένα πεδίο καταχώρισης αριθμού που έχει τα κουμπιά + και -

note: (itstool) path: page/p
en: A SpinButton is not related to a <link xref="spinner.js">Spinner</link>. It's a text entry field which only accepts numbers, and which has plus and minus buttons to let you change the value without having to type anything in.
el: Ένα κουμπί περιστροφής (SpinButton) δεν σχετίζεται με έναν <link xref="spinner.js">Μετρητή (Spinner)</link>. Είναι ένα πεδίο εισαγωγής κειμένου που δέχεται μόνο αριθμούς και οι οποίοι έχουν κουμπιά συν και πλην για να σας επιτρέψουν την αλλαγή της τιμής χωρίς να πρέπει να πληκτρολογήσετε κάτι.

note: (itstool) path: page/p
en: It's best used when it's obvious that only a number can be entered into it. In this example, two SpinButtons are used for the number of kittens and number of cans of tuna to give them.
el: Χρησιμοποιείται άριστα όταν είναι φανερό ότι μόνο ένας αριθμός μπορεί να μπει σε αυτό. Σε αυτό το παράδειγμα, δύο SpinButtons χρησιμοποιούνται για τον αριθμό από γατάκια και τον αριθμό των κονσερβών τόννου που τους δίνονται.

note: (itstool) path: section/code
en: 
    const SpinButtonExample = new Lang.Class({
        Name: 'SpinButton Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsspinbutton'
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
el: 
    const SpinButtonExample = new Lang.Class({
        Name: 'SpinButton Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsspinbutton'
            });
    
        // Σύνδεση των σημάτων '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 ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the SpinButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
el: Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση SpinButtonExample. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Kitten Feeder"});
el: 
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Kitten Feeder"});

note: (itstool) path: section/title
en: Creating the SpinButtons
el: Δημιουργία των κουμπιών περιστροφής (SpinButtons)

note: (itstool) path: section/code
en: 
            // Create the first spinbutton using a function
            this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
            this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));
el: 
            // Δημιουργία του πρώτου κουμπιού περιστροφής χρησιμοποιώντας μια συνάρτηση
            this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
            this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));

note: (itstool) path: section/p
en: We can use the new_with_range function to create a new SpinButton quickly. Its first parameter is the SpinButton's starting value, its second is the maximum value, and its third is how much to increment it when the plus or minus buttons are pressed.
el: Μπορούμε να χρησιμοποιήσουμε τη συνάρτηση new_with_range για τη δημιουργία ενός νέου SpinButton γρήγορα. Η πρώτη του παράμετρος είναι η αρχική τιμή του SpinButton, η δεύτερη του είναι η μέγιστη τιμή και η τρίτη του είναι πόσο θα αυξηθεί όταν πατιούνται τα κουμπιά συν και πλην.

note: (itstool) path: section/p
en: After we create the first SpinButton, we connect its value-changed signal to a function which handles what happens when the number inside either SpinButton changes.
el: Αφού δημιουργήσουμε το πρώτο κουμπί περιστροφής (SpinButton), συνδέουμε το σήμα της αλλαγμένης τιμής σε μια συνάρτηση που χειρίζεται τι συμβαίνει όταν ο αριθμός μέσα στα SpinButton αλλάζει.

note: (itstool) path: section/code
en: 
            // Create an adjustment to use for the second spinbutton
            this._adjustment = new Gtk.Adjustment ({
                value: 1,
                lower: 0,
                upper: 9001,
                step_increment: 1,
                page_increment: 10 });
    
            // Create the second spinbutton
            this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });
            this._tuna.connect ("value-changed", Lang.bind (this, this._newValue));
    
            // this._tuna.set_digits (1);
            // this._tuna.set_wrap (true);
el: 
            // Δημιουργία μιας ρύθμισης για χρήση με το δεύτερο κουμπί περιστροφής
            this._adjustment = new Gtk.Adjustment ({
                value: 1,
                lower: 0,
                upper: 9001,
                step_increment: 1,
                page_increment: 10 });
    
            // Δημιουργία του δεύτερου κουμπιού περιστροφής
            this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });
            this._tuna.connect ("value-changed", Lang.bind (this, this._newValue));
    
            // this._tuna.set_digits (1);
            // this._tuna.set_wrap (true);

note: (itstool) path: section/p
en: If you want more fine-grained control over a SpinButton, or want to create a bunch of SpinButtons which all use the same parameters, you can create an object called an <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustment.html">Adjustment</link>. Then you can use that object as a new SpinButton's adjustment property, and it sets all the values at once. Afterwards, you can change all the SpinButtons which use that adjustment by changing the Adjustment object's properties.
el: Εάν θέλετε περισσότερο λεπτομερή έλεγχο σε ένα κουμπί περιστροφής (SpinButton), ή θέλετε να δημιουργήσετε μια ομάδα κουμπιών περιστροφής που όλα χρησιμοποιούν τις ίδιες παραμέτρους, μπορείτε να δημιουργήσετε ένα αντικείμενο που λέγεται <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustment.html">Adjustment</link>. Έπειτα μπορείτε να χρησιμοποιήσετε αυτό το αντικείμενο ως μια νέα ιδιότητα ρύθμισης του κουμπιού περιστροφής και ορίζει όλες τις τιμές μονομιάς. Κατόπιν, μπορείτε να αλλάξετε όλα τα κουμπιά περιστροφής που χρησιμοποιούν αυτήν τη ρύθμιση αλλάζοντας τις ιδιότητες του αντικειμένου ρύθμισης.

note: (itstool) path: section/p
en: The commented-out lines here show things you can do to customize your SpinButton. You can set the number of digits which go after the decimal point, for example, or tell it to wrap the number around if it goes past the upper or lower bounds that you set.
el: Οι σχολιασμένες γραμμές εδώ εμφανίζουν πράγματα που μπορείτε να κάνετε για προσαρμογή του κουμπιού περιστροφής σας σας. Μπορείτε να ορίσετε τον αριθμό των ψηφίων μετά την δεκαδική υποδιαστολή, για παράδειγμα, ή να του πείτε να αναδιπλώσει τον αριθμό εάν ξεπεράσει το άνω ή κάτω όριο που ορίσατε.

note: (itstool) path: note/p
en: For the kitties' sake, please don't use set_digits to allow a decimal number of kittens.
el: Για χάρη των γατιών, παρακαλώ μην χρησιμοποιήσετε set_digits που επιτρέπει δεκαδικό αριθμό γατιών.

note: (itstool) path: section/title
en: Creating the rest of the UI
el: Δημιουργία της υπόλοιπης διεπαφής χρήστη

note: (itstool) path: section/code
en: 
            // Create the text labels to go with the spinbuttons
            this._startLabel = new Gtk.Label ({ label: "There are " });
            this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "});
            this._tunaLabel = new Gtk.Label ({ label: " can(s) of tuna."});
            this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));
            this._lastLabel = new Gtk.Label ({
                label: "That's " + this.perKitten + " can(s) of tuna per kitten." });
el: 
            // Δημιουργία των ετικετών κειμένου που πάνε με τα κουμπιά περιστροφής
            this._startLabel = new Gtk.Label ({ label: "There are " });
            this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "});
            this._tunaLabel = new Gtk.Label ({ label: " can(s) of tuna."});
            this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));
            this._lastLabel = new Gtk.Label ({
                label: "That's " + this.perKitten + " can(s) of tuna per kitten." });

note: (itstool) path: section/p
en: We create each <link xref="label.js">Label</link> individually, and then string them together along with the SpinButtons. The last label needs to show the number of cans of tuna per kitten, so it has a variable in the middle, which corresponds to an equation that uses the SpinButtons' get_value functions to find out what they're set at. JavaScript's Math function's floor method is used to round the number of cans of tuna per kitten down to the nearest whole number.
el: Δημιουργούμε κάθε <link xref="label.js">ετικέτα</link> ξεχωριστά και έπειτα τις συνδέουμε μαζί με τα κουμπιά περιστροφής. Η τελευταία ετικέτα χρειάζεται να εμφανίσει τον αριθμό των κονσερβών τόννου ανά γατί, έτσι έχει μια μεταβλητή στη μέση, που αντιστοιχεί σε μια εξίσωση που χρησιμοποιεί τις συναρτήσεις get_value των SpinButtons για την εύρεση του ορισμού τους. Η μέθοδος στρογγύλευσης της μαθηματικής συνάρτησης του JavaScript χρησιμοποιείται για στρογγύλευση του αριθμού των κονσερβών ανά γατί στον πλησιέστερο κάτω ακέραιο αριθμό.

note: (itstool) path: section/code
en: 
            // Create a grid to put the spinbuttons and their labels in
            this._spinGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_bottom: 20 });
    
            // Attach everything to the grid
            this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);
            this._spinGrid.attach (this._kittens, 1, 0, 1, 1);
            this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);
            this._spinGrid.attach (this._tuna, 3, 0, 1, 1);
            this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);
    
            // Create a main grid to hold it and the last label
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Attach the smaller grid and the last label to the main grid
            this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);
            this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);
el: 
            // Δημιουργία ενός πλέγματος για τοποθέτηση μέσα του των κουμπιών περιστροφής και των ετικετών τους
            this._spinGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_bottom: 20 });
    
            // Προσάρτηση όλων στο πλέγμα
            this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);
            this._spinGrid.attach (this._kittens, 1, 0, 1, 1);
            this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);
            this._spinGrid.attach (this._tuna, 3, 0, 1, 1);
            this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);
    
            // Δημιουργία ενός κύριου πλέγματος για να το κρατήσει και της τελευταίας ετικέτας
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Προσάρτηση του μικρότερου πλέγματος και της τελευταίας ετικέτας στο κύριο πλέγμα
            this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);
            this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);

note: (itstool) path: section/p
en: Here we use <link xref="grid.js">Grid</link> widgets to keep everything organized. One Grid holds the labels and SpinButtons in order, while the next puts that Grid on top and the final Label on the bottom.
el: Εδώ χρησιμοποιούμε <link xref="grid.js">πλέγμα</link> γραφικών στοιχείων για να κρατάμε το καθετί οργανωμένο. Ένα πλέγμα κρατά τις ετικέτες και τα κουμπιά περιστροφής σε σειρά, ενώ το επόμενο βάζει αυτό το πλέγμα στην κορυφή και την τελική ετικέτα στο τέλος.

note: (itstool) path: section/p
en: There isn't a wrong way to organize things in Grids, so long as you like how it turns out. In this case, the top Grid has a margin on the bottom to keep it evenly spaced from the bottom Label, and the bottom Label is inside a separate Grid so it will be centered relative to the Labels and SpinButtons on the top.
el: Δεν υπάρχει εσφαλμένος τρόπος οργάνωσης των πραγμάτων στα πλέγματα, εφόσον σας αρέσει όπως προκύπτει. Σε αυτήν την περίπτωση, το κορυφαίο πλέγμα έχει ένα περιθώριο στο τέλος για να κρατηθεί σε ομοιόμορφη απόσταση από την ετικέτα τέλους και η ετικέτα τέλους είναι μέσα σε ένα ξεχωριστό πλέγμα έτσι ώστε να κεντραριστεί σχετικά με τις ετικέτες και τα κουμπιά περιστροφής στην κορυφή.

note: (itstool) path: section/code
en: 
            // Add the main grid to the window
            this._window.add (this._mainGrid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
el: 
            // Προσθήκη του κύριου πλέγματος στο παράθυρο
            this._window.add (this._mainGrid);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },

note: (itstool) path: section/p
en: Finally, we add the larger Grid to the window, then tell the window to show itself and all the widgets inside of it.
el: Τελικά, προσθέτουμε το μεγαλύτερο πλέγμα στο παράθυρο, έπειτα λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και όλα τα γραφικά στοιχεία μέσα του.

note: (itstool) path: section/title
en: Function which handles the SpinButtons' numerical values being adjusted
el: Η συνάρτηση που χειρίζεται τις αριθμητικές τιμές των κουμπιών περιστροφής ρυθμίστηκε

note: (itstool) path: section/code
en: 
        _newValue: function () {
    
            // Update the label which shows how many cans there are per kitten
            this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))
            this._lastLabel.set_label ("That's " + this.perKitten + " can(s) of tuna per kitten.");
    
        }
    
    });
el: 
        _newValue: function () {
    
            // Ενημέρωση της ετικέτας που εμφανίζει πόσα κουτιά υπάρχουν ανά γατάκι 
            this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))
            this._lastLabel.set_label ("That's " + this.perKitten + " can(s) of tuna per kitten.");
    
        }
    
    });

note: (itstool) path: section/p
en: Here we update the perKitten variable based on the SpinButtons' new values, and use the set_label property to refresh what _lastLabel shows. Since both SpinButtons have their value-changed signal connected to this function, every time either of the numbers changes this function will update the Label.
el: Εδώ ενημερώνουμε τη μεταβλητή perKitten (ανά γατί) με βάση τις νέες τιμές των κουμπιών περιστροφής και χρησιμοποιούμε την ιδιότητα set_label για ανανέωση της προβολής _lastLabel. Αφού και τα δύο κουμπιά περιστροφής έχουν το σήμα τους αλλαγμένης τιμής συνδεμένο σε αυτή τη συνάρτηση, κάθε φορά οποιοδήποτε από τους αριθμούς αλλάζει αυτή τη συνάρτηση θα ενημερώσει την ετικέτα.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new SpinButtonExample ();
    app.application.run (ARGV);
el: 
    // Εκτέλεση της εφαρμογής
    let app = new SpinButtonExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished SpinButtonExample class, and set the application running.
el: Τελικά, δημιουργούμε ένα νέο παράδειγμα της ολοκληρωμένης κλάσης παράδειγμα κουμπιού περιστροφής (SpinButtonExample) και εκτελούμε την εφαρμογή.

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const SpinButtonExample = new Lang.Class({
        Name: 'SpinButton Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsspinbutton'
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
    
    
    
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Kitten Feeder"});
    
            // Create the first spinbutton using a function
            this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
            this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));
    
            // Create an adjustment to use for the second spinbutton
            this._adjustment = new Gtk.Adjustment ({
                value: 1,
                lower: 0,
                upper: 9001,
                step_increment: 1,
                page_increment: 10 });
    
            // Create the second spinbutton
            this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });
            this._tuna.connect ("value-changed", Lang.bind (this, this._newValue));
    
            // this._tuna.set_digits (1);
            // this._tuna.set_wrap (true);
    
            // Create the text labels to go with the spinbuttons
            this._startLabel = new Gtk.Label ({ label: "There are " });
            this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "});
            this._tunaLabel = new Gtk.Label ({ label: " can(s) of tuna."});
            this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));
            this._lastLabel = new Gtk.Label ({
                label: "That's " + this.perKitten + " can(s) of tuna per kitten." });
    
            // Create a grid to put the spinbuttons and their labels in
            this._spinGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_bottom: 20 });
    
            // Attach everything to the grid
            this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);
            this._spinGrid.attach (this._kittens, 1, 0, 1, 1);
            this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);
            this._spinGrid.attach (this._tuna, 3, 0, 1, 1);
            this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);
    
            // Create a main grid to hold it and the last label
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Attach the smaller grid and the last label to the main grid
            this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);
            this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);
    
            // Add the main grid to the window
            this._window.add (this._mainGrid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
    
    
    
        _newValue: function () {
    
            // Update the label which shows how many cans there are per kitten
            this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))
            this._lastLabel.set_label ("That's " + this.perKitten + " can(s) of tuna per kitten.");
    
        }
    
    });
    
    // Run the application
    let app = new SpinButtonExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const SpinButtonExample = new Lang.Class({
        Name: 'SpinButton Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsspinbutton'
            });
    
        // Σύνδεση των σημάτων '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 ();
        },
    
    
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Kitten Feeder"});
    
            // Δημιουργία του πρώτου κουμπιού περιστροφής  χρησιμοποιώντας μια συνάρτηση
            this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
            this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));
    
            // Δημιουργία μιας ρύθμισης για χρήση με το δεύτερο κουμπί περιστροφής
            this._adjustment = new Gtk.Adjustment ({
                value: 1,
                lower: 0,
                upper: 9001,
                step_increment: 1,
                page_increment: 10 });
    
            // Δημιουργία του δεύτερου κουμπιού περιστροφής
            this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });
            this._tuna.connect ("value-changed", Lang.bind (this, this._newValue));
    
            // this._tuna.set_digits (1);
            // this._tuna.set_wrap (true);
    
            // Δημιουργία των ετικετών κειμένου που πηγαίνουν με τα κουμπιά περιστροφής
            this._startLabel = new Gtk.Label ({ label: "There are " });
            this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "});
            this._tunaLabel = new Gtk.Label ({ label: " can(s) of tuna."});
            this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));
            this._lastLabel = new Gtk.Label ({
                label: "That's " + this.perKitten + " can(s) of tuna per kitten." });
    
            // Δημιουργία ενός πλέγματος για τοποθέτηση μέσα του των κουμπιών αυξομείωσης και των ετικετών τους
            this._spinGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_bottom: 20 });
    
            // Προσάρτηση όλων στο πλέγμα
            this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);
            this._spinGrid.attach (this._kittens, 1, 0, 1, 1);
            this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);
            this._spinGrid.attach (this._tuna, 3, 0, 1, 1);
            this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);
    
            // Δημιουργία κύριου πλέγματος για να κρατήσει αυτό και την τελευταία ετικέτα
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Προσάρτηση του μικρότερου πλέγματος και της τελευταίας ετικέτας στο κύριο πλέγμα
            this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);
            this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);
    
            // Προσθήκη του κύριου πλέγματος στο παράθυρο
            this._window.add (this._mainGrid);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
    
    
        _newValue: function () {
    
            // Ενημέρωση της ετικέτας που εμφανίζει πόσα κουτιά υπάρχουν ανά γατάκι
            this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))
            this._lastLabel.set_label ("That's " + this.perKitten + " can(s) of tuna per kitten.");
    
        }
    
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new SpinButtonExample ();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: SpinButton (Python)
el: Κουμπί περιστροφής (SpinButton) (Python)

note: (itstool) path: info/desc
en: Retrieve an integer or floating-point number from the user.
el: Ανάκτηση ακέραιου ή αριθμού κινητής υποδιαστολής από τον χρήστη.

note: (itstool) path: section/title
en: Useful methods for a SpinButton widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο κουμπιού περιστροφής

note: (itstool) path: section/p
en: A Gtk.Adjustment is needed to construct the Gtk.SpinButton. This is the representation of a value with a lower and upper bound, together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type <code>float</code>; <code>step_increment</code> is the increment/decrement that is obtained by using the cursor keys or the buttons of the spinbutton. Note that <code>page_increment</code> and <code>page_size</code> are not used in this case, and they should be set to <code>0</code>.
el: Μια Gtk.Adjustment απαιτείται για δόμηση του Gtk.SpinButton. Αυτή η αναπαράσταση μιας τιμής με κάτω και άνω όριο, μαζί με βήμα και αυξήσεις σελίδας και μέγεθος σελίδας και δομείται ως <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> όπου τα πεδία είναι τύπου <code>float</code>· <code>step_increment</code> είναι η αύξηση/μείωση που παίρνεται χρησιμοποιώντας τα πλήκτρα δρομέα ή τα κουμπιά του κουμπιού περιστροφής. Σημειώστε ότι <code>page_increment</code> και <code>page_size</code> δεν χρησιμοποιούνται σε αυτήν την περίπτωση και δεν πρέπει να ορίζονται σε <code>0</code>.

note: (itstool) path: section/p
en: In line 23 the signal <code>"value-changed"</code> is connected to the callback function <code>spin_selected()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 23 το σήμα <code>"value-changed"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>spin_selected()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: item/p
en: If you want the value of the spinbutton to wrap around when they exceed the maximum or the minimum, set <code>set_wrap(True)</code>. The <code>"wrapped"</code> signal is emitted when this happens.
el: Εάν θέλετε η τιμή του κουμπιούπεριστροφής να αναδιπλώνεται όταν υπερβαίνει το μέγιστο ή το ελάχιστο, ορίστε <code>set_wrap(True)</code>. Το σήμα <code>"wrapped"</code> εκπέμπεται όταν συμβαίνει αυτό.

note: (itstool) path: item/p
en: <code>set_digits(digits)</code> sets the precision to be displayed by the spinbutton, up to 20 digits.
el: <code>set_digits(digits)</code> ορίζει την εμφανιζόμενη ακρίβεια από το κουμπί περιστροφής, μέχρι 20 ψηφία.

note: (itstool) path: item/p
en: To get the value of the spinbutton as an integer, use <code>get_value_as_int()</code>.
el: Για τη λήψη της τιμής του κουμπιού περιστροφής ως ακεραίου, χρησιμοποιήστε <code>get_value_as_int()</code>.

[ctx: text]
note: (itstool) path: info/title
en: SpinButton (Vala)
el: Κουμπί περιστροφής (SpinButton) (Vala)

note: (itstool) path: info/desc
en: Retrieve an integer or floating point number.
el: Ανάκτηση ακέραιου ή αριθμού κινητής υποδιαστολής.

note: (itstool) path: page/code
en: /* This is the application. */
    public class MyApplication : Gtk.Application {
    	Gtk.Label label;
    
    	/* Override the 'activate' signal of GLib.Application. */
    	protected override void activate () {
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "SpinButton Example";
    		window.set_default_size (210, 70);
    		window.set_border_width (5);
    
    		var spinbutton = new Gtk.SpinButton.with_range (0, 100, 1);
    		spinbutton.set_hexpand (true);
    
    		label = new Gtk.Label ("Choose a number");
    
    		var grid = new Gtk.Grid ();
    		grid.attach (spinbutton, 0, 0, 1, 1);
    		grid.attach (label, 0, 1, 1, 1);
    
    		spinbutton.value_changed.connect (this.value_changed_cb);
    
    		window.add (grid);
    		window.show_all ();
    	}
    
    	void value_changed_cb (Gtk.SpinButton spin) {
    		label.set_text ("The number you selected is %.0f.".printf (spin.get_value()));
    	}
    }
    
    /* main creates and runs the application. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
el: /* Αυτή είναι η εφαρμογή. */
    public class MyApplication : Gtk.Application {
    	Gtk.Label label;
    
    	/* Αντικατάσταση του σήματος 'activate' της GLib.Application. */
    	protected override void activate () {
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "SpinButton Example";
    		window.set_default_size (210, 70);
    		window.set_border_width (5);
    
    		var spinbutton = new Gtk.SpinButton.with_range (0, 100, 1);
    		spinbutton.set_hexpand (true);
    
    		label = new Gtk.Label ("Choose a number");
    
    		var grid = new Gtk.Grid ();
    		grid.attach (spinbutton, 0, 0, 1, 1);
    		grid.attach (label, 0, 1, 1, 1);
    
    		spinbutton.value_changed.connect (this.value_changed_cb);
    
    		window.add (grid);
    		window.show_all ();
    	}
    
    	void value_changed_cb (Gtk.SpinButton spin) {
    		label.set_text ("The number you selected is %.0f.".printf (spin.get_value()));
    	}
    }
    
    /* Η κύρια δημιουργεί και εκτελεί την εφαρμογή. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

[ctx: text]
note: (itstool) path: info/title
en: Spinner (C)
el: Μετρητής (Spinner)(C)

note: (itstool) path: info/desc
en: A spinner animation
el: Κίνηση μετρητή

note: (itstool) path: page/title
en: Spinner
el: Μετρητής

note: (itstool) path: page/p
en: This Spinner is stopped and started by pressing the spacebar.
el: Αυτός ο μετρητής σταματά και ξεκινά πατώντας το πλήκτρο διαστήματος.

note: (itstool) path: page/code
en: 
    #include &lt;gtk/gtk.h&gt;
     
    
    
     /*Global variable used to indicate active state of the
    spinner. TRUE = active, FALSE = not-active. This is because 
    there isn't a current function for C that does this for us*/
    gboolean active;  
     
    
    
    /*This is the callback function. It is a handler function 
    which reacts to the signal. In this case, it will cause the 
    spinner to start and stop according to how many times the user 
    presses the spacebar.*/ 
    static gboolean
    key_pressed_event (GtkWidget *widget,
                       GdkEvent  *event,
                       gpointer   user_data)
    {
      GtkWidget *spinner = user_data;
      guint keyval;
      
      /*Extracts the keyval from an event. And stores it in the  variable 
      "keyval" (we give the function the address). In this case, the 
      event is GdkEventKey, a key press event*/
      gdk_event_get_keyval (event, &amp;keyval);  
    
      /*Grabbing the boolean value from the spinner*/
      g_object_get (GTK_SPINNER (spinner), "active", &amp;active, NULL);
      
      if (keyval == GDK_KEY_space) {
         if (active) {
             gtk_spinner_stop (GTK_SPINNER (spinner));
         }
         else {
             gtk_spinner_start (GTK_SPINNER (spinner));
         } 
      }
      
    return TRUE;
    }
     
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *spinner;
     
      /*Create a window with a title, border width and a default size*/
      window = gtk_application_window_new (app);
     
      gtk_window_set_title (GTK_WINDOW (window), "Spinner Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
      gtk_container_set_border_width (GTK_CONTAINER(window), 30);
     
      /*Create a spinner, with extra horizontal and vertical space*/
      spinner = gtk_spinner_new ();
      gtk_spinner_start (GTK_SPINNER (spinner));
      
      gtk_container_add (GTK_CONTAINER (window), spinner);
     
      /*Connecting the key-press-event signal to the callback*/
      g_signal_connect (GTK_WINDOW (window), "key-press-event", 
                        G_CALLBACK (key_pressed_event), spinner);
     
      gtk_widget_show_all (window);
    }
     
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
     
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
     
      return status;
    }
el: 
    #include &lt;gtk/gtk.h&gt;
     
    
    
     /*Καθολική μεταβλητή που χρησιμοποιείται για να δείξει την ενεργή κατάσταση του 
    μετρητή. TRUE = active, FALSE = not-active. Αυτό συμβαίνει επειδή 
    δεν υπάρχει μια τρέχουσα συνάρτηση για την C που το κάνει για μας */
    gboolean active;  
     
    
    
    /*Αυτή είναι η συνάρτηση επανάκλησης . Είναι μια συνάρτηση χειρισμού 
    που αντιδρά στο σήμα. Σε αυτήν την περίπτωση, θα προκαλέσει 
    την εκκίνηση και παύση του μετρητή ανάλογα με το πόσες φορές ο χρήστης 
    πατά το πλήκτρο διαστήματος.*/ 
    static gboolean
    key_pressed_event (GtkWidget *widget,
                       GdkEvent  *event,
                       gpointer   user_data)
    {
      GtkWidget *spinner = user_data;
      guint keyval;
      
      /*Εξάγει την keyval από ένα συμβάν και την αποθηκεύει στη μεταβλητή 
      "keyval" (δίνουμε στη συνάρτηση τη διεύθυνση). Σε αυτήν την περίπτωση, το 
      συμβά είναι GdkEventKey, ένα συμβάν πατήματος πλήκτρου*/
      gdk_event_get_keyval (event, &amp;keyval);  
    
      /*Λήψη της τιμής Μπουλ από τονμετρητή*/
      g_object_get (GTK_SPINNER (spinner), "active", &amp;active, NULL);
      
      if (keyval == GDK_KEY_space) {
         if (active) {
             gtk_spinner_stop (GTK_SPINNER (spinner));
         }
         else {
             gtk_spinner_start (GTK_SPINNER (spinner));
         } 
      }
      
    return TRUE;
    }
     
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *spinner;
     
      /*Δημιουργία παραθύρου με τίτλο, πλάτος περιγράμματος και προεπιλεγμένο μέγεθος*/
      window = gtk_application_window_new (app);
     
      gtk_window_set_title (GTK_WINDOW (window), "Spinner Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
      gtk_container_set_border_width (GTK_CONTAINER(window), 30);
     
      /*Δημιουργία ενός μετρητή, με πρόσθετο οριζόντιο και κάθετο χώρο*/
      spinner = gtk_spinner_new ();
      gtk_spinner_start (GTK_SPINNER (spinner));
      
      gtk_container_add (GTK_CONTAINER (window), spinner);
     
      /*Σύνδεση του σήματος key-press-event με τη συνάρτηση επανάκλησης*/
      g_signal_connect (GTK_WINDOW (window), "key-press-event", 
                        G_CALLBACK (key_pressed_event), spinner);
     
      gtk_widget_show_all (window);
    }
     
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
     
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
     
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: Spinner (JavaScript)
el: Μετρητής (Spinner ) (JavaScript)

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Gdk = imports.gi.Gdk;
    const Lang = imports.lang;
    
    const SpinnerExample = new Lang.Class ({
        Name: 'Spinner Example',
    
        // Create the application itself
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsspinner',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function () {
            this._window.present ();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function () {
            this._buildUI ();
        },
    
    
    
        // Build the application's UI
        _buildUI: function () {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Spinner Example",
                default_height: 200,
                default_width: 200,
                border_width: 30 });
    
            // Create a spinner which starts spinning automatically
            this._spinner = new Gtk.Spinner ({active: true});
            this._window.add (this._spinner);
    
            // Connect a keypress event to the function that makes it start or stop spinning
            this._window.connect("key-press-event", Lang.bind(this, this._onKeyPress));
    
            // Show the window and all child widgets
            this._window.show_all();
        },
    
    
    
        _onKeyPress: function(widget, event) {
    
            // Get the value of the key that was pressed
            let keyval = event.get_keyval()[1];
    
            // If it was the spacebar, toggle the spinner to start or stop
            if (keyval == Gdk.KEY_space) {
                if (this._spinner.active == true)
                    this._spinner.stop();
                else
                    this._spinner.start();
            }
        }
    
    
    });
    
    // Run the application
    let app = new SpinnerExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Gdk = imports.gi.Gdk;
    const Lang = imports.lang;
    
    const SpinnerExample = new Lang.Class ({
        Name: 'Spinner Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsspinner',
                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' signal παρουσιάζει παράθυρα όταν είναι ενεργή
        _onActivate: function () {
            this._window.present ();
        },
    
        // Η συνάρτηση επανάκλησης για το σήμα 'startup' δομεί τη διεπαφή χρήστη
        _onStartup: function () {
            this._buildUI ();
        },
    
    
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function () {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Spinner Example",
                default_height: 200,
                default_width: 200,
                border_width: 30 });
    
            // Δημιουργία ενός μετρητή που ξεκινά αυτόματα την αυξομείωση
            this._spinner = new Gtk.Spinner ({active: true});
            this._window.add (this._spinner);
    
            // Σύνδεση ενός συμβάντος πατήματος πλήκτρου με τη συνάρτηση που την κάνει να ξεκινά ή να σταματά την μέτρηση
            this._window.connect("key-press-event", Lang.bind(this, this._onKeyPress));
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
    
    
        _onKeyPress: function(widget, event) {
    
            // Λήψη της τιμής του πλήκτρου που πατήθηκε
            let keyval = event.get_keyval()[1];
    
            // Αν ήταν το πλήκτρο διαστήματος, εναλλαγή στον μετρητή να ξεκινήσει ή να σταματήσει
            if (keyval == Gdk.KEY_space) {
                if (this._spinner.active == true)
                    this._spinner.stop();
                else
                    this._spinner.start();
            }
        }
    
    
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new SpinnerExample ();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: Spinner (Python)
el: Μετρητής (Python)

note: (itstool) path: note/p
en: <code>Gdk.keyval_name(event.keyval)</code> converts the key value <code>event.keyval</code> into a symbolic name. The names and corresponding key values can be found <link href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h">here</link>,but for instance <code>GDK_KEY_BackSpace</code> becomes the string <code>"BackSpace"</code>.
el: Το <code>Gdk.keyval_name(event.keyval)</code> μετατρέπει την τιμή κλειδιού <code>event.keyval</code> σε ένα συμβολικό όνομα. Τα ονόματα και οι αντίστοιχες τιμές κλειδιού μπορούν να βρεθούν <link href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h">εδώ</link>, αλλά για παράδειγμα το <code>GDK_KEY_BackSpace</code> γίνεται η συμβολοσειρά <code>"BackSpace"</code>.

[ctx: text]
note: (itstool) path: info/title
en: Spinner (Vala)
el: Μετρητής (Vala)

[ctx: text]
note: (itstool) path: info/title
en: Statusbar (C)
el: Γραμμή κατάστασης (C)

note: (itstool) path: info/desc
en: Report messages of minor importance to the user
el: Μηνύματα αναφοράς μικρότερης σημασίας για τον χρήστη

note: (itstool) path: page/title
en: Statusbar
el: Γραμμή κατάστασης

note: (itstool) path: page/p
en: This statusbar is used to demonstrate how messages are stacked in a last-in-first-out order. The message at the top of the stack is always the one displayed.
el: Αυτή η γραμμή κατάστασης χρησιμοποιείται για να εμφανίσει πόσα μηνύματα στοιβάζονται σε μια σειρά τελευταίο προς πρώτο. Το μήνυμα στην κορυφή της στοίβας είναι πάντα αυτό που εμφανίζεται.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/GtkStatusbar.html">GtkStatusBar</link>
el: <link href="http://developer.gnome.org/gtk3/stable/GtkStatusbar.html">Γραμμή κατάστασης Gtk (GtkStatusBar)</link>

[ctx: text]
note: (itstool) path: info/title
en: Statusbar (JavaScript)
el: Γραμμή κατάστασης (JavaScript)

note: (itstool) path: info/desc
en: Show notifications in a dedicated statusbar
el: Εμφάνιση ειδοποιήσεων σε μια αφοσιωμένη γραμμή κατάστασης

note: (itstool) path: page/p
en: This statusbar keeps track of how many times you've clicked a button. Applications like <link href="http://projects.gnome.org/gedit/">gedit</link> use statusbars to display information at a glance, and show notifications without interrupting the user.
el: Αυτή η γραμμή κατάστασης κρατά ίχνη του αριθμού των φορών που πατήσατε ένα κουμπί. Εφαρμογές όπως <link href="http://projects.gnome.org/gedit/">gedit</link> χρησιμοποιούν τις γραμμές κατάστασης για εμφάνιση πληροφοριών με μια ματιά, και εμφάνιση ειδοποιήσεων χωρίς διακοπή του χρήστη.

note: (itstool) path: page/p
en: 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.
el: Μηνύματα που προωθούνται σε μια γραμμή κατάστασης πηγαίνουν στην κορυφή της στοίβα της και μπορούν να φεύγουν για να εμφανίσουν την επόμενη πιο πρόσφατη. Μπορείτε επίσης να καθαρίσετε κάθε μήνυμα συγκεκριμένου τύπου μονομιάς. Αυτό το παράδειγμα εφαρμογής δείχνει αυτές τις συναρτήσεις.

note: (itstool) path: section/code
en: 
    const StatusbarExample = new Lang.Class({
        Name: 'Statusbar Example',
    
        // Create the application itself
        _init: function() {
            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', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
el: 
    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 ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the StatusbarExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
el: Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση StatusbarExample. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // 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 });
el: 
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _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 })·

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> 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.
el: Η συνάρτηση _buildUI είναι εκεί που βάζουμε όλο τον κώδικα για δημιουργία διεπαφής χρήστη της εφαρμογής. Το πρώτο βήμα είναι η δημιουργία ενός νέου <link href="GtkApplicationWindow.js.page">Παράθυρο εφαρμογής Gtk (Gtk.ApplicationWindow)</link> για να μπουν μέσα όλα τα γραφικά στοιχεία. Το επόμενο βήμα είναι η δημιουργία μιας κάθετα προσανατολισμένης διεπαφής Gtk.Paned, για διαίρεση του παραθύρου σε δύο ενότητες. Αυτός ο τρόπος της γραμμής κατάστασης φαίνεται όπως αυτών που χρησιμοποιούνται σε άλλες εφαρμογές και παραμένει στη βάση του παραθύρου, ακόμα κι αν ο χρήστης το αυξομειώσει.

note: (itstool) path: section/title
en: Creating the buttons
el: Δημιουργία κουμπιών

note: (itstool) path: section/code
en: 
            // Create the main button
            this._clickMe = new Gtk.Button ({
                label: "Click Me!" });
            this._clickMe.connect ("clicked", Lang.bind (this, this._clicked));
    
            // Create the back button
            this._backButton = new Gtk.Button ({
                label: "gtk-go-back",
                use_stock: true });
            this._backButton.connect ("clicked", Lang.bind (this, this._back));
    
            // Create the clear button
            this._clearButton = new Gtk.Button ({
                label: "gtk-clear",
                use_stock: true });
            this._clearButton.connect ("clicked", Lang.bind (this, this._clear));
el: 
            // Δημιουργία του κύριου πλήκτρου
            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));

note: (itstool) path: section/p
en: This code creates the three <link href="button.js.page">Gtk.Buttons</link> we'll use to push a new message to the statusbar, pop the last one off, and clear all existing messages. The "back" and "clear" buttons are <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">stock buttons</link>, which are automatically translated into any language GNOME supports.
el: Αυτός ο κώδικας δημιουργεί τα τρία <link href="button.js.page">Κουμπιά Gtk (Gtk.Buttons)</link> που θα χρησιμοποιήσουμε για την προώθηση ενός νέου μηνύματος στη γραμμή κατάστασης, κλείνοντας το τελευταίο και καθαρίζοντας όλα τα υπάρχοντα μηνύματα. Τα κουμπιά "πίσω" και "καθαρισμός" είναι <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">κουμπιά παρακαταθήκης</link>, που μεταφράζονται αυτόματα σε οποιαδήποτε γλώσσα υποστηρίζει το GNOME.

note: (itstool) path: section/code
en: 
            // 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);
el: 
            // Τοποθέτηση των κουμπιών σε πλέγμα
            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);

note: (itstool) path: section/p
en: This code creates the <link href="grid.js.page">Gtk.Grid</link> that we'll use to organize the buttons, and attaches the buttons to it in order. It then creates a <link href="paned.js.page">Gtk.Frame</link> which will take up most of the window and has a large amount of padding around the buttons, and adds the Grid to the Frame. Note that we still need to put the Frame into the Paned interface, and then add it to the ApplicationWindow.
el: Αυτός ο κώδικας δημιουργεί το <link href="grid.js.page">Gtk.Grid</link> που θα χρησιμοποιήσουμε για οργάνωση των κουμπιών και επισυνάπτει τα κουμπιά σε αυτό σε σειρά. Δημιουργεί έπειτα ένα <link href="paned.js.page">Gtk.Frame</link> που θα καταλάβει το περισσότερο παράθυρο και έχει μεγάλη ποσότητα συμπλήρωσης γύρω από τα κουμπιά και προσθέτει το πλέγμα στο πλαίσιο. Σημειώστε ότι θα χρειαστούμε ακόμα να βάλουμε το πλαίσιο στη φάτνωμα διεπαφή και έπειτα θα το προσθέσουμε στο ApplicationWindow.

note: (itstool) path: section/title
en: Creating the statusbar
el: Δημιουργία της γραμμής κατάστασης

note: (itstool) path: section/code
en: 
            // 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);
el: 
            // Δημιουργία της γραμμής κατάστασης
            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);

note: (itstool) path: section/p
en: 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.
el: Εδώ δημιουργούμε τη Gtk.Statusbar, και προωθούμε ένα μήνυμα σε αυτό για ξεκίνημα. Έπειτα του δίνουμε το δικό του στενό πλαίσιο στον πάτο του παραθύρου.

note: (itstool) path: section/p
en: 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.
el: Κάθε μήνυμα χρειάζεται να έχει μια ταυτότητα συμφραζομένων, που είναι μια ακέραιη τιμή που μπορείτε να πάρετε από τη γραμμή κατάστασης με τη συνάρτηση get_context_id(). Η μόνη παράμετρος του είναι η τιμή συμβολοσειράς που χρησιμοποιείτε για περιγραφή αυτής της συγκεκριμένης ταυτότητας συμφραζομένων. Κανονικά, θα πάρετε μια νέα ταυτότητα συμφραζομένων για διαφορετικά είδη μηνυμάτων, έτσι που να μπορείτε να χρησιμοποιήσετε τη συνάρτηση remove() για να αφαιρέσετε ένα συγκεκριμένο μήνυμα και όχι μόνο το πιο πρόσφατο στη στοίβα. Αυτό είναι ένα απλό παράδειγμα με μόνο ένα είδος μηνύματος, αν και, έτσι χρησιμοποιούμε μόνο ένα για καθένα.

note: (itstool) path: section/p
en: 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.
el: Χρησιμοποιούμε τη συνάρτηση push() για την προώθηση ενός νέου μηνύματος στη στοίβα. Η πρώτη της παράμετρος είναι η ταυτότητα συμφραζόμενων και η δεύτερή της είναι το μήνυμα.

note: (itstool) path: section/code
en: 
            // 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();
        },
el: 
            // Συγκέντρωση των πλαισίων στη φατνωμένη διεπαφή
            this._panes.pack1 (this._topFrame, true, false);
            this._panes.pack2 (this._barFrame, false, false);
    
            // Τοποθέτηση των φατνωμάτων στο παράθυρο
            this._window.add (this._panes);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },

note: (itstool) path: section/p
en: 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.
el: Αυτός ο κώδικας τελειώνει δημιουργώντας το παράθυρο, πακετάροντας τα πλαίσια μέσα στο φάτνωμα, το προσθέτει στο παράθυρο και λέει στο παράθυρο να εμφανίσει όλα τα θυγατρικά γραφικά στοιχεία.

note: (itstool) path: section/title
en: Functions for interacting with the statusbar
el: Συναρτήσεις για αλληλεπίδραση με τη γραμμή κατάστασης

note: (itstool) path: section/code
en: 
        _clicked: function() {
    
            // 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: function () {
    
            // If there have been any clicks, decrement by 1 and remove last statusbar update
            if (this.Clicks &gt; 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);
    
        }
    
    });
el: 
        _clicked: function() {
    
            // Αύξηση του αριθμού των πατημάτων κατά 1
            this.Clicks++;
    
            // Ενημέρωση της γραμμής κατάστασης με τον νέο αριθμό πατημάτων
            this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
    
        },
    
    
    
        _back: function () {
    
            // Αν υπήρξαν πατήματα, μείωση κατά 1 και αφαίρεση της τελευταίας ενημέρωσης της γραμμής κατάστασης
            if (this.Clicks &gt; 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);
    
        }
    
    });

note: (itstool) path: section/p
en: 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.
el: Εδώ έχουμε συναρτήσεις που δείχνουν προώθηση μηνύματος στη στοίβα, διώχνοντας την κορυφή του από αυτό και καθαρίζοντας όλα τα μηνύματα της συγκεκριμένης ταυτότητας συμφραζομένων. Η συνάρτηση pop() παίρνει μόνο μια παράμετρο, που είναι η ταυτότητα συμφραζομένων για τον τύπο του μηνύματος που θέλετε να διώξετε από το πιο πρόσφατο. Η συνάρτηση remove_all() δουλεύει με τον ίδιο τρόπο, εκτός από την αφαίρεση όλων των μηνυμάτων αυτού του τύπου από τη στοίβα.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new StatusbarExample ();
    app.application.run (ARGV);
el: 
    // Εκτέλεση της εφαρμογής
    let app = new StatusbarExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished StatusbarExample class, and set the application running.
el: Τελικά, δημιουργούμε ένα νέο παράδειγμα της τελειωμένης κλάσης StatusbarExample και εκτελούμε την εφαρμογή.

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const StatusbarExample = new Lang.Class({
        Name: 'Statusbar Example',
    
        // Create the application itself
        _init: function() {
            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', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
    
    
    
        // Build the application's UI
        _buildUI: function() {
    
            // 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", Lang.bind (this, this._clicked));
    
            // Create the back button
            this._backButton = new Gtk.Button ({
                label: "gtk-go-back",
                use_stock: true });
            this._backButton.connect ("clicked", Lang.bind (this, this._back));
    
            // Create the clear button
            this._clearButton = new Gtk.Button ({
                label: "gtk-clear",
                use_stock: true });
            this._clearButton.connect ("clicked", Lang.bind (this, this._clear));
    
            // 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: function() {
    
            // 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: function () {
    
            // If there have been any clicks, decrement by 1 and remove last statusbar update
            if (this.Clicks &gt; 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);
    
        }
    
    });
    
    // Run the application
    let app = new StatusbarExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    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 ();
        },
    
    
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _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 });
    
            // Δημιουργία του κύριου πλήκτρου
            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));
    
            // Τοποθέτηση των πλήκτρων σε ένα πλέγμα
            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);
    
            // Δημιουργία της γραμμής κατάστασης
            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);
    
            // Συγκέντρωση των πλαισίων στη φατνωμένη διεπαφή
            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 &gt; 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);
    
        }
    
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new StatusbarExample ();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: Statusbar (Python)
el: Γραμμή κατάστασης (Python)

note: (itstool) path: page/p
en: This statusbar tells you if you click the button or if you press any key (and which key).
el: Αυτή η γραμμή κατάστασης σας λέει εάν πατήσετε το κουμπί ή εάν πατήσετε οποιοδήποτε κλειδί (και ποιο κλειδί).

note: (itstool) path: note/p
en: <code>Gdk.keyval_name(event.keyval)</code> converts the key value <code>event.keyval</code> into a symbolic name. The names and corresponding key values can be found <link href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h">here</link>, but for instance <code>GDK_KEY_BackSpace</code> becomes the string <code>"BackSpace"</code>.
el: Το <code>Gdk.keyval_name(event.keyval)</code> μετατρέπει την τιμή κλειδιού σε <code>event.keyval</code> ένα συμβολικό όνομα. Τα ονόματα και οι αντίστοιχες τιμές κλειδιού μπορούν να βρεθούν <link href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h">εδώ</link>, αλλά για παράδειγμα το <code>GDK_KEY_BackSpace</code> γίνεται η συμβολοσειρά <code>"BackSpace"</code>.

note: (itstool) path: section/title
en: Useful methods for a Statusbar widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο γραμμής κατάστασης

note: (itstool) path: section/p
en: In line 17 the signal <code>"clicked"</code> is connected to the callback function <code>button_clicked_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 17 το σήμα <code>"clicked"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>button_clicked_cb()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: item/p
en: <code>pop(context_id)</code> removes the first message in the statusbar stack with the given <code>context_id</code>.
el: Το <code>pop(context_id)</code> αφαιρεί το πρώτο μήνυμα στη στοίβα της γραμμής κατάστασης με το δοσμένο <code>context_id</code>.

note: (itstool) path: item/p
en: <code>remove_all(context_id)</code> removes all the messages in the statusbar stack with the given <code>context_id</code>.
el: Το <code>remove_all(context_id)</code> αφαιρεί όλα τα μηνύματα στη στοίβα της γραμμής κατάστασης με το δοσμένο <code>context_id</code>.

note: (itstool) path: item/p
en: <code>remove(context_id, message_id)</code> removes the message with the given <code>message_id</code> in the statusbar stack with the given <code>context_id</code>. The <code>message_id</code> is returned by <code>push(context_id, "the message")</code> when pushing the message on the statusbar.
el: Το <code>remove(context_id, message_id)</code> αφαιρεί το μήνυμα με το δοσμένο <code>message_id</code> στη στοίβα γραμμής κατάστασης με το δοσμένο <code>context_id</code>. Το <code>message_id</code> επιστρέφεται με <code>push(context_id, "the message")</code> όταν προωθείτε το μήνυμα στη γραμμή κατάστασης.

[ctx: text]
note: (itstool) path: info/title
en: Statusbar (Vala)
el: Γραμμή κατάστασης (Vala)

note: (itstool) path: page/p
en: This statusbar tells you what's going on.
el: Αυτή η γραμμή κατάστασης σας λέει τι συμβαίνει.

[ctx: text]
note: (itstool) path: info/title
en: Strings (Python)
el: Συμβολοσειρές (Python)

note: (itstool) path: info/desc
en: An explanation of how to deal with strings in Python and GTK+.
el: Μια εξήγηση πώς να αντιμετωπίσετε τις συμβολοσειρές σε Python και GTK+.

note: (itstool) path: page/title
en: Strings
el: Συμβολοσειρές

note: (itstool) path: note/p
en: GNOME strongly encourages the use of Python 3 for writing applications!
el: Το GNOME ενθαρρύνει έντονα τη χρήση του python 3 για συγγραφή εφαρμογών!

note: (itstool) path: section/title
en: Strings in Python 2
el: Συμβολοσειρές σε Python 2

note: (itstool) path: section/p
en: Python 2 comes with two different kinds of objects that can be used to represent strings, <code>str</code> and <code>unicode</code>. Instances of <code>unicode</code> are used to express Unicode strings, whereas instances of the <code>str</code> type are byte representations (the encoded string). Under the hood, Python represents Unicode strings as either 16- or 32-bit integers, depending on how the Python interpreter was compiled.
el: Ο Python 2 έρχεται με δύο διαφορετικά είδη αντικειμένων που μπορούν να χρησιμοποιηθούν για αναπαράσταση συμβολοσειρών, <code>str</code> και <code>unicode</code>. Περιπτώσεις του <code>unicode</code> χρησιμοποιούνται για να εκφράσουν συμβολοσειρές Unicode, ενώ περιπτώσεις του τύπου <code>str</code> είναι αναπαραστάσεις byte (η κωδικοποιημένη συμβολοσειρά). Στα αφανή, ο Python αντιπροσωπεύει συμβολοσειρές Unicode ως είτε 16- ή 32- δυαδικών ακέραιους, ανάλογα με το πώς ο διερμηνευτής Python μεταγλωττίστηκε.

note: (itstool) path: section/p
en: Unicode strings can be converted to 8-bit strings with <code>unicode.encode()</code>. Python’s 8-bit strings have a <code>str.decode()</code> method that interprets the string using the given encoding (that is, it is the inverse of the <code>unicode.encode()</code>):
el: Οι συμβολοσειρές Unicode μπορούν να μετατραπούν σε συμβολοσειρές 8 δυαδικών με <code>unicode.encode()</code>. Οι συμβολοσειρές 8 δυαδικών έχουν μια μέθοδο <code>str.decode()</code> που ερμηνεύει τη συμβολοσειρά χρησιμοποιώντας τη δεδομένη κωδικοποίηση (δηλαδή, είναι το αντίστροφο της <code>unicode.encode()</code>):

note: (itstool) path: section/p
en: Unfortunately, Python 2.x allows you to mix <code>unicode</code> and <code>str</code> if the 8-bit string happened to contain only 7-bit (ASCII) bytes, but would get <sys>UnicodeDecodeError</sys> if it contained non-ASCII values.
el: Δυστυχώς, ο Python 2.x επιτρέπει την ανάμειξη <code>unicode</code> και <code>str</code> εάν η συμβολοσειρά 8 δυαδικών συμβεί να περιέχει μόνο bytes μόνο 7 δυαδικών (ASCII), αλλά θα μπορούσε να πάρει <sys>UnicodeDecodeError</sys> εάν περιέχει μη ASCII τιμές.

note: (itstool) path: section/title
en: Strings in Python 3
el: Συμβολοσειρές σε Python 3

note: (itstool) path: section/p
en: Since Python 3.0, all strings are stored as Unicode in an instance of the <code>str</code> type. Encoded strings on the other hand are represented as binary data in the form of instances of the bytes type. Conceptionally, <code>str</code> refers to text, whereas bytes refers to data. Use <code>encode()</code> to go from <code>str</code> to <code>bytes</code>, and <code>decode()</code> to go from <code>bytes</code> to <code>str</code>.
el: Από τον Python 3.0, όλες οι συμβολοσειρές αποθηκεύονται ως Unicode σε ένα στιγμιότυπο του τύπου <code>str</code>. Κωδικοποιημένες συμβολοσειρές από την άλλη μεριά αναπαριστώνται ως δυαδικά δεδομένα στη φόρμα στιγμιοτύπων του τύπου bytes. Εννοιολογικά, ο <code>str</code> αναφέρεται σε κείμενο, ενώ τα bytes αναφέρονται σε δεδομένα. Χρησιμοποιήστε <code>encode()</code> για μετάβαση από <code>str</code> σε <code>bytes</code> και <code>decode()</code> για μετάβαση από <code>bytes</code> σε <code>str</code>.

note: (itstool) path: section/p
en: In addition, it is no longer possible to mix Unicode strings with encoded strings, because it will result in a <code>TypeError</code>:
el: Επιπλέον, δεν είναι πια δυνατό να αναμείξετε συμβολοσειρές Unicode με κωδικοποιημένες συμβολοσειρές, επειδή θα καταλήξει σε ένα <code>TypeError</code>:

note: (itstool) path: section/title
en: Unicode in GTK+
el: Unicode σε GTK+

note: (itstool) path: section/p
en: GTK+ uses UTF-8 encoded strings for all text. This means that if you call a method that returns a string you will always obtain an instance of the <code>str</code> type. The same applies to methods that expect one or more strings as parameter, they must be UTF-8 encoded. However, for convenience PyGObject will automatically convert any unicode instance to str if supplied as argument:
el: Το GTK+ χρησιμοποιεί κωδικοποιημένες συμβολοσειρές UTF-8 για όλα τα κείμενα. Αυτό σημαίνει ότι εάν καλέσετε μια μέθοδο που επιστρέφει μια συμβολοσειρά θα παίρνετε πάντα ένα στιγμιότυπο του τύπου <code>str</code>. Το ίδιο εφαρμόζεται στις μεθόδους που περιμένουν μια ή περισσότερες συμβολοσειρές ως παράμετρο, πρέπει να είναι κωδικοποιημένες UTF-8. Όμως, για ευκολία το PyGObject θα μετατρέπει αυτόματα οποιοδήποτε στιγμιότυπο unicode σε str εάν του δοθεί ως όρισμα:

note: (itstool) path: section/p
en: Furthermore:
el: Επιπλέον:

note: (itstool) path: section/p
en: would return <code>False</code>, with the warning <code>__main__:1: UnicodeWarning: Unicode equal comparison failed to convert both arguments to Unicode - interpreting them as being unequal</code> (<code>Gtk.Label.get_text()</code> will always return a <code>str</code> instance; therefore, <code>txt</code> and <code>unicode_string</code> are not equal).
el: Θα επέστρεφε <code>False</code>, με την προειδοποίηση <code>__main__:1: UnicodeWarning: η σύγκριση όμοιων Unicode απέτυχε να μετατρέψει και τα δυο ορίσματα σε Unicode - ερμηνεύοντας τα ως ανόμοια</code> (<code>Gtk.Label.get_text()</code> θα επιστρέφει πάντα ένα στιγμιότυπο <code>str</code>· συνεπώς, <code>txt</code> and <code>unicode_string</code> δεν είναι όμοια).

note: (itstool) path: section/p
en: This is especially important if you want to internationalize your program using <link href="http://docs.python.org/library/gettext.html"><code>gettext</code></link>. You have to make sure that <code>gettext</code> will return UTF-8 encoded 8-bit strings for all languages.
el: Αυτό είναι ιδιαίτερα σημαντικό εάν θέλετε να διεθνοποιήσετε το πρόγραμμά σας χρησιμοποιώντας <link href="http://docs.python.org/library/gettext.html"><code>gettext</code></link>. Πρέπει να βεβαιωθείτε ότι η <code>gettext</code> θα επιστρέψει κωδικοποιημένες συμβολοσειρές 8 δυαδικών UTF-8 για όλες τις γλώσσες.

note: (itstool) path: section/p
en: In general it is recommended to not use <code>unicode</code> objects in GTK+ applications at all, and only use UTF-8 encoded <code>str</code> objects since GTK+ does not fully integrate with <code>unicode</code> objects.
el: Γενικά συνιστάται να μην χρησιμοποιείτε αντικείμενα <code>unicode</code> σε εφαρμογές GTK+ καθόλου και να χρησιμοποιείτε κωδικοποιημένα αντικείμενα <code>str</code> UTF-8 αφού το GTK+ δεν ενσωματώνει πλήρως αντικείμενα <code>unicode</code>.

note: (itstool) path: section/p
en: String encoding is more consistent in Python 3.x because PyGObject will automatically encode/decode to/from UTF-8 if you pass a string to a method or a method returns a string. Strings, or text, will always be represented as instances of <code>str</code> only.
el: Με την Python 3.x τα πράγματα είναι πολύ πιο ομοιόμορφα, επειδή το PyGObject θα κωδικοποιήσει/αποκωδικοποιήσει αυτόματα προς/από UTF-8 εάν περάσετε μια συμβολοσειρά σε μια μέθοδο ή εάν μια μέθοδος επιστρέφει μια συμβολοσειρά. Συμβολοσειρές, ή κείμενο, θα αναπαριστώνται πάντα ως στιγμιότυπα <code>str</code>.

[ctx: text]
note: (itstool) path: info/title
en: Switch (C)
el: Διακόπτης (C)

note: (itstool) path: info/desc
en: A "light switch" style toggle
el: Μια εναλλαγή τεχνοτροπίας "ελαφριού διακόπτη"

note: (itstool) path: page/title
en: Switch
el: Διακόπτης

note: (itstool) path: page/p
en: This switch toggles the title of the window.
el: Αυτός ο διακόπτης εναλλάσσει τον τίτλο του παραθύρου.

note: (itstool) path: page/code
en: 
    #include &lt;gtk/gtk.h&gt;
    
    
    
    /*Signal handler for the "active" signal of the Switch*/
    static void
    activate_cb (GObject    *switcher,
                 GParamSpec *pspec,
                 gpointer    user_data)
    {
      GtkWindow *window = user_data;
    
      if (gtk_switch_get_active (GTK_SWITCH (switcher)))
        gtk_window_set_title (GTK_WINDOW (window), "Switch Example");
      else
        gtk_window_set_title (GTK_WINDOW (window), "");
    }
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *grid;
      GtkWidget *window;
      GtkWidget *label;
      GtkWidget *switcher;
    
      /*Create a window with a set title and default size.
      Also, set a border width for the amount of space to leave
      inside the window*/
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Switch Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 300, 100);
      gtk_container_set_border_width (GTK_CONTAINER (window), 10);
    
      /*Create a label*/
      label = gtk_label_new ("Title");
    
      /*Create a switch with a default active state*/
      switcher = gtk_switch_new ();
      gtk_switch_set_active (GTK_SWITCH (switcher), TRUE);
    
      /*Create a grid and set the column spacing, attach the label and
      switch onto the grid and position them accordingly*/
      grid = gtk_grid_new();
      gtk_grid_set_column_spacing (GTK_GRID (grid), 10);
      gtk_grid_attach (GTK_GRID (grid), label, 0, 0, 1, 1);
      gtk_grid_attach (GTK_GRID (grid), switcher, 1, 0, 1, 1);
    
      /*Connecting the clicked signal to the callback function*/
      g_signal_connect (GTK_SWITCH (switcher), 
                        "notify::active", 
                        G_CALLBACK (activate_cb), 
                        window);
    
      gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (grid));
    
      gtk_widget_show_all (window);
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }
el: 
    #include &lt;gtk/gtk.h&gt;
    
    
    
    /*Χειριστής σήματος για το σήμα "active"του διακόπτη*/
    static void
    activate_cb (GObject    *switcher,
                 GParamSpec *pspec,
                 gpointer    user_data)
    {
      GtkWindow *window = user_data;
    
      if (gtk_switch_get_active (GTK_SWITCH (switcher)))
        gtk_window_set_title (GTK_WINDOW (window), "Switch Example");
      else
        gtk_window_set_title (GTK_WINDOW (window), "");
    }
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *grid;
      GtkWidget *window;
      GtkWidget *label;
      GtkWidget *switcher;
    
      /*Δημιουργία παραθύρου με ορισμένο τίτλο και προεπιλεγμένο μέγεθος.
      Επίσης, με ορισμένο πλάτος περιγράμματος  για τον χώρο που θα αφήσει
      μέσα στο παράθυρο*/
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Switch Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 300, 100);
      gtk_container_set_border_width (GTK_CONTAINER (window), 10);
    
      /*Δημιουργία ετικέτας*/
      label = gtk_label_new ("Title");
    
      /*Δημιουργία διακόπτη με προεπιλεγμένη ενεργή κατάσταση*/
      switcher = gtk_switch_new ();
      gtk_switch_set_active (GTK_SWITCH (switcher), TRUE);
    
      /*Δημιουργία πλέγματος και ορισμός διάκενου στήλης, προσάρτηση της ετικέτας και
      του διακόπτη στο πλέγμα και κατάλληλη τοποθέτησή τους*/
      grid = gtk_grid_new();
      gtk_grid_set_column_spacing (GTK_GRID (grid), 10);
      gtk_grid_attach (GTK_GRID (grid), label, 0, 0, 1, 1);
      gtk_grid_attach (GTK_GRID (grid), switcher, 1, 0, 1, 1);
    
      /*Σύνδεση του πατημένου σήματος με τη συνάρτηση επανάκλησης*/
      g_signal_connect (GTK_SWITCH (switcher), 
                        "notify::active", 
                        G_CALLBACK (activate_cb), 
                        window);
    
      gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (grid));
    
      gtk_widget_show_all (window);
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: Switch (JavaScript)
el: Διακόπτης (JavaScript)

note: (itstool) path: info/desc
en: A sliding switch that can be flipped on and off
el: Ένας κινητός διακόπτης που μπορεί να αντιστρέφεται σε ναι και όχι

note: (itstool) path: page/p
en: A Switch has two positions, on and off. This example shows how you can use multiple switches together to control which <link xref="image.js">Image</link> is shown in the window. The pictures used in this example <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=Animal+Photos.zip">can be downloaded here</link>.
el: Ένας διακόπτης έχει δύο θέσεις ενεργή/ανενεργή. Αυτό το παράδειγμα εμφανίζει πώς μπορείτε να χρησιμοποιήσετε πολλαπλούς διακόπτες μαζί για να ελέγξετε ποια <link xref="image.js">εικόνα</link> προβάλλεται στο παράθυρο. Οι εικόνες που χρησιμοποιούνται σε αυτό το παράδειγμα  <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=Animal+Photos.zip">μπορούν να φορτωθούν εδώ</link>.

note: (itstool) path: note/p
en: The window will contain a "broken image" icon instead of a picture if picture files named <file>redfox.png</file>, <file>muteswan.png</file>, <file>fruitbat.png</file>, and <file>gentoopenguin.png</file> aren't in the same directory. You can change the code and the pictures around as you like, but the Creative Commons-licensed photos used in this example were taken from the following sources and cropped to 640x425:
el: Το παράθυρο θα περιέχει ένα εικονίδιο "σπασμένης εικόνας" αντί για μια εικόνα εάν τα αρχεία εικόνας με όνομα <file>redfox.png</file>, <file>muteswan.png</file>, <file>fruitbat.png</file> και <file>gentoopenguin.png</file> δεν είναι στον ίδιο κατάλογο. Μπορείτε να αλλάξετε τον κώδικα και τις εικόνες ολόγυρα όπως θέλετε, αλλά οι φωτογραφίες με άδεια Creative Commons που χρησιμοποιούνται σε αυτό το παράδειγμα πάρθηκαν από τις ακόλουθες πηγές και περικόπηκαν σε 640x425:

note: (itstool) path: item/p
en: <link href="http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg">Red fox photo</link> by Rob Lee, licensed <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>
el: <link href="http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg">φωτογραφία κόκκινης αλεπούς</link> από τον Rob Lee, με άδεια <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>

note: (itstool) path: item/p
en: <link href="http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg">Gentoo penguin photo</link> by Ken Funakoshi, licensed <link href="http://creativecommons.org/licenses/by-sa/2.0/deed.en">CC-By-SA</link>
el: <link href="http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg">φωτογραφία πιγκουίνου Gentoo</link> από τον Ken Funakoshi, με άδεια <link href="http://creativecommons.org/licenses/by-sa/2.0/deed.en">CC-By-SA</link>

note: (itstool) path: item/p
en: <link href="http://www.flickr.com/photos/shekgraham/127431519/in/photostream/">Fruit bat photo</link> by Shek Graham, licensed <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>
el: <link href="http://www.flickr.com/photos/shekgraham/127431519/in/photostream/">φωτογραφία νυχτερίδας φρούτων</link> από τον Shek Graham, licensed <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>

note: (itstool) path: item/p
en: <link href="http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg">Mute swan photo</link> by Mindaugas Urbonas, licensed <link href="http://creativecommons.org/licenses/by-sa/2.5/deed.en">CC-By-SA</link>
el: <link href="http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg">φωτογραφία σιωπηλού κύκνου</link> από Mindaugas Urbonas, με άδεια <link href="http://creativecommons.org/licenses/by-sa/2.5/deed.en">CC-By-SA</link>

note: (itstool) path: note/p
en: Photo credits and licensing information are shown in the application's <link xref="aboutdialog.js">AboutDialog</link>. Always remember to credit the original artist when using <link href="http://creativecommons.org">Creative Commons-licensed works!</link>
el: Μνείες φωτογραφίας και πληροφορίες αδειοδότησης εμφανίζονται στο <link xref="aboutdialog.js">AboutDialog</link>. Να θυμάστε πάντα να μνημονεύετε τον αρχικό καλλιτέχνη όταν χρησιμοποιείτε<link href="http://creativecommons.org">εργασίες με άδεια Creative Commons!</link> της εφαρμογής

note: (itstool) path: section/code
en: 
    const SwitchExample = new Lang.Class({
        Name: 'Switch Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsswitch',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal creates the menu and builds the UI
        _onStartup: function() {
            this._initMenus();
            this._buildUI ();
        },
el: 
    const SwitchExample = new Lang.Class({
        Name: 'Switch Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsswitch',
                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._initMenus();
            this._buildUI ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the SwitchExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
el: Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση SwitchExample. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Animal Creator"});
el: 
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Animal Creator"});

note: (itstool) path: section/title
en: Creating the switches
el: Δημιουργία των διακοπτών

note: (itstool) path: section/code
en: 
            // Create the image widget and set its default picture
            this._image = new Gtk.Image ({file: "redfox.png"});
el: 
            // Δημιουργία του γραφικού της εικόνας και ορισμός της προεπιλεγμένης της εικόνας
            this._image = new Gtk.Image ({file: "redfox.png"});

note: (itstool) path: section/p
en: We first create the <link xref="image.js">Image</link> that the switches will control. Remember that a file named <file>redfox.png</file> needs to be in the same directory as this application.
el: Δημιουργούμε πρώτα την <link xref="image.js">εικόνα</link> που οι διακόπτες θα ελέγχουν. Να θυμάστε ότι ένα αρχείο με όνομα <file>redfox.png</file> χρειάζεται να είναι στον ίδιο κατάλογο όπως αυτή η εφαρμογή.

note: (itstool) path: section/code
en: 
            // Create a label for the first switch
            this._flyLabel = new Gtk.Label ({
                label: "Make it fly",
                margin_right: 30});
    
            // Create the first switch and set its default position
            this._flySwitch = new Gtk.Switch ({active: false});
            this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
    
            // Create a label for the second switch
            this._birdLabel = new Gtk.Label ({
                label: "Make it a bird",
                margin_right: 30});
    
            // Create the second switch
            this._birdSwitch = new Gtk.Switch ({active: false});
            this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
el: 
            // Δημιουργία μιας ετικέτας για τον πρώτο διακόπτη
            this._flyLabel = new Gtk.Label ({
                label: "Make it fly",
                margin_right: 30});
    
            // Δημιουργία του πρώτου διακόπτη και ορισμός της προεπιλεγμένης του θέσης
            this._flySwitch = new Gtk.Switch ({active: false});
            this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
    
            // Δημιουργία μιας ετικέτας για τον δεύτερο διακόπτη
            this._birdLabel = new Gtk.Label ({
                label: "Make it a bird",
                margin_right: 30});
    
            // Δημιουργία του δεύτερου διακόπτη
            this._birdSwitch = new Gtk.Switch ({active: false});
            this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));

note: (itstool) path: section/p
en: We use a <link xref="label.js">Label</link> to mark each Switch, and give them a bit of a margin on the right so that they aren't crammed right next to the Switches. After that we create the Switches, and set them to be switched off by default.
el: Χρησιμοποιούμε μια <link xref="label.js">ετικέτα</link> για να σημειώσουμε κάθε διακόπτη και να τους δώσουμε λίγο περιθώριο στα δεξιά έτσι ώστε να μην στριμώχνονται ακριβώς δίπλα στους διακόπτες. Μετά δημιουργούμε τους διακόπτες και τους ορίζουμε ανενεργούς από προεπιλογή.

note: (itstool) path: section/p
en: The signal a switch sends out when it's flipped on or off is called notify::active. After we create each switch, we connect its notify::active signal to a function called _switchFlip. If you have multiple switches that each do something different, you might want to connect them to different functions, but here they're both used for the same thing: To control what picture's displayed by _image.
el: Το σήμα που ένας διακόπτης στέλνει όταν αντιστρέφεται ενεργά/ανενεργά λέγεται notify::active. Μετά τη δημιουργία κάθε διακόπτη, συνδέουμε το σήμα του notify::active σε μια συνάρτηση που λέγεται _switchFlip. Εάν έχετε πολλούς διακόπτες που ο καθένας τους κάνει κάτι διαφορετικό, ίσως θελήσετε να τους συνδέσετε σε διαφορετικές συναρτήσεις, αλλά εδώ και οι δυο χρησιμοποιούνται για το ίδιο πράγμα: τον έλεγχο της εμφανιζόμενης εικόνας από το _image.

note: (itstool) path: section/code
en: 
            // Create a grid for the labels and switches beneath the picture
            this._UIGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_top: 20});
    
            // Attach the labels and switches to that grid
            this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1);
            this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1);
            this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1);
            this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);
    
            // Create a master grid to put both the UI and the picture into
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Attach the picture and the UI grid to the master grid
            this._mainGrid.attach (this._image, 0, 0, 1, 1);
            this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);
el: 
            // Δημιουργία πλέγματος για τις ετικέτες και τους διακόπτες κάτω από την εικόνα
            this._UIGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_top: 20});
    
            // Προσάρτηση των ετικετών και διακοπτών σε αυτό το πλέγμα
            this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1);
            this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1);
            this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1);
            this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);
    
            // Δημιουργία ενός κύριου πλέγματος για να τοποθετηθούν μέσα η γραφική διεπαφή και η εικόνα
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Προσάρτηση του πλέγματος εικόνας και διεπαφής χρήστη στο κύριο πλέγμα
            this._mainGrid.attach (this._image, 0, 0, 1, 1);
            this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);

note: (itstool) path: section/p
en: We create a <link xref="grid.js">Grid</link> for the Labels and Switches first, so that we can organize them in a 2x2 layout with a margin between it and the Image. Then we put that Grid into a larger 2x1 Grid that has the Image on top, and the Grid with the Labels and Switches on the bottom.
el: Δημιουργούμε ένα <link xref="grid.js">πλέγμα</link> για τις ετικέτες και τους διακόπτες πρώτα, έτσι ώστε να μπορούμε να τις οργανώσουμε σε μια διάταξη 2x2 με ένα περιθώριο μεταξύ του και της εικόνας. Έπειτα βάζουμε αυτό το πλέγμα σε ένα μεγαλύτερο πλέγμα 2x1 που έχει την εικόνα στην κορυφή και το πλέγμα με τις ετικέτες και τους διακόπτες στο τέλος.

note: (itstool) path: section/code
en: 
            // Add the master grid to the window
            this._window.add (this._mainGrid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
el: 
            // Προσθήκη του κύριου πλέγματος στο παράθυρο
            this._window.add (this._mainGrid);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },

note: (itstool) path: section/title
en: Function which handles the switches being flipped
el: Η συνάρτηση που χειρίζεται τους διακόπτες που αντιστράφηκαν

note: (itstool) path: section/code
en: 
        _switchFlip: function() {
    
            // Change the picture depending on which switches are flipped
            if (this._flySwitch.get_active()) {
    
                if (this._birdSwitch.get_active()) this._image.set_from_file ("muteswan.png");
    
                else this._image.set_from_file ("fruitbat.png");
            }
    
            else {
    
                if (this._birdSwitch.get_active()) this._image.set_from_file ("gentoopenguin.png");
    
                else this._image.set_from_file ("redfox.png");
    
            }
    
        },
el: 
        _switchFlip: function() {
    
            // Αλλαγή της εικόνας ανάλογα με το ποιοι διακόπτες αντιστρέφονται
            if (this._flySwitch.get_active()) {
    
                if (this._birdSwitch.get_active()) this._image.set_from_file ("muteswan.png");
    
                else this._image.set_from_file ("fruitbat.png");
            }
    
            else {
    
                if (this._birdSwitch.get_active()) this._image.set_from_file ("gentoopenguin.png");
    
                else this._image.set_from_file ("redfox.png");
    
            }
    
        },

note: (itstool) path: section/p
en: Each time a Switch is flipped, this function checks to see which of the two Switches are active afterwards, using the Switches' built-in get_active() function. It then changes the Image accordingly. You can change the filenames around as you like, so long as you have pictures to go with them.
el: Κάθε φορά που ένας διακόπτης αναστρέφεται, αυτή η συνάρτηση ελέγχει να δει ποιος από τους δύο διακόπτες είναι ενεργός κατόπιν, χρησιμοποιώντας την ενσωματωμένη συνάρτηση get_active(). Έπειτα αλλάζει την εικόνα ανάλογα. Μπορείτε να αλλάξετε τα ονόματα αρχείων ολόγυρα όπως θέλετε, εφόσον έχετε εικόνες που να πηγαίνουν μαζί τους.

note: (itstool) path: section/title
en: Creating the AboutDialog
el: Δημιουργία του AboutDialog

note: (itstool) path: section/code
en: 
        _initMenus: function() {
    
            // Build the application's menu so we can have an "About" button
            let menu = new Gio.Menu();
            menu.append("About", 'app.about');
            menu.append("Quit",'app.quit');
            this.application.set_app_menu(menu);
    
            // Bind the "About" button to the _showAbout() function
            let aboutAction = new Gio.SimpleAction ({ name: 'about' });
            aboutAction.connect('activate', Lang.bind(this,
                function() {
                    this._showAbout();
                }));
            this.application.add_action(aboutAction);
    
            // Bind the "Quit" button to the function that closes the window
            let quitAction = new Gio.SimpleAction ({ name: 'quit' });
            quitAction.connect('activate', Lang.bind(this,
                function() {
                    this._window.destroy();
                }));
            this.application.add_action(quitAction);
        },
el: 
        _initMenus: function() {
    
            // Δόμηση του μενού της εφαρμογής, έτσι ώστε να μπορούμε να έχουμε ένα πλήκτρο "About"
            let menu = new Gio.Menu();
            menu.append("About", 'app.about');
            menu.append("Quit",'app.quit');
            this.application.set_app_menu(menu);
    
            // ΣΑύνδεση του πλήκτρου "About" με τη συνάρτηση _showAbout() 
            let aboutAction = new Gio.SimpleAction ({ name: 'about' });
            aboutAction.connect('activate', Lang.bind(this,
                function() {
                    this._showAbout();
                }));
            this.application.add_action(aboutAction);
    
            // Σύνδεση του πλήκτρου "Quit"με τη συνάρτηση που κλείνει το παράθυρο
            let quitAction = new Gio.SimpleAction ({ name: 'quit' });
            quitAction.connect('activate', Lang.bind(this,
                function() {
                    this._window.destroy();
                }));
            this.application.add_action(quitAction);
        },

note: (itstool) path: section/p
en: The first step is building the <link xref="gmenu.js">GMenu</link> that the "About" button goes into. This is the menu that appears when you click the application's name in the upper-left corner of the screen, next to the Activities menu. Our menu only has two options in it: About, and Quit.
el: Το πρώτο βήμα είναι η δόμηση του <link xref="gmenu.js">GMenu</link> στο οποίο το κουμπί "About" μπαίνει. Αυτό είναι το μενού που εμφανίζεται όταν πατάς το όνομα της εφαρμογής στην πάνω αριστερή γωνία της οθόνης, δίπλα στο μενού ενέργειες. Το μενού μας έχει μόνο δύο επιλογές: περί και κλείσιμο.

note: (itstool) path: section/code
en: 
        _showAbout: function () {
    
            // String arrays of the names of the people involved in the project
            var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg', 'Ken Funakoshi http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg', 'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg'];
            var authors = ["GNOME Documentation Team"];
            var documenters = ["GNOME Documentation Team"];
    
            // Create the About dialog
            let aboutDialog = new Gtk.AboutDialog({
                title: "AboutDialog Example",
                program_name: "Animal Creator",
                copyright: "Copyright \xa9 2012 GNOME Documentation Team\n\nRed fox photo licensed CC-By by Rob Lee\nGentoo penguin photo licensed CC-By-SA by Ken Funakoshi\nFruit bat photo licensed CC-By by Shek Graham\nMute swan photo licensed CC-By-SA by Mindaugas Urbonas\nLinks to the originals are available under Credits.\n\nHave you hugged a penguin today?",
                artists: artists,
                authors: authors,
                documenters: documenters,
                website: "http://developer.gnome.org",
                website_label: "GNOME Developer Website" });
    
            // Attach the About dialog to the window
            aboutDialog.modal = true;
            aboutDialog.transient_for = this._window;
    
            // Show the About dialog
            aboutDialog.show();
    
            // Connect the Close button to the destroy signal for the dialog
            aboutDialog.connect('response', function() {
                aboutDialog.destroy();
            });
        }
    
    });
el: 
        _showAbout: function () {
    
            // Πίνακες συμβολοσειρών των ονομάτων των ατόμων που εμπλέκονται στο έργο
            var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg', 'Ken Funakoshi http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg', 'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg'];
            var authors = ["GNOME Documentation Team"];
            var documenters = ["GNOME Documentation Team"];
    
            // Δημιουργία του διαλόγου Περί
            let aboutDialog = new Gtk.AboutDialog({
                title: "AboutDialog Example",
                program_name: "Animal Creator",
                copyright: "Copyright \xa9 2012 GNOME Documentation Team\n\nRed fox photo licensed CC-By by Rob Lee\nGentoo penguin photo licensed CC-By-SA by Ken Funakoshi\nFruit bat photo licensed CC-By by Shek Graham\nMute swan photo licensed CC-By-SA by Mindaugas Urbonas\nLinks to the originals are available under Credits.\n\nHave you hugged a penguin today?",
                artists: artists,
                authors: authors,
                documenters: documenters,
                website: "http://developer.gnome.org",
                website_label: "GNOME Developer Website" });
    
            // Προσάρτηση του διαλόγου Περί στο παράθυρο
            aboutDialog.modal = true;
            aboutDialog.transient_for = this._window;
    
            // Εμφάνιση του διαλόγου Περί
            aboutDialog.show();
    
            // Σύνδεση του πλήκτρου Κλείσιμο με το σήμα καταστροφής του διαλόγου
            aboutDialog.connect('response', function() {
                aboutDialog.destroy();
            });
        }
    
    });

note: (itstool) path: section/p
en: An <link xref="aboutdialog.js">AboutDialog</link> has a lot of different things you can set, to credit everyone who worked on the application and leave a note to whomever reads it. In this case, the copyright section contains our note and credits the original photographers, while the artists section shows you a list of the photographers with links to the original photos when you click the Credits button. The web URLs put after their names in the array turn their names into clickable links in the Credits section.
el: Ένας <link xref="aboutdialog.js">AboutDialog</link> έχει πολλά διαφορετικά πράγματα που μπορείτε να ορίσετε, για να μνημονεύσετε οποιονδήποτε δούλεψε στην εφαρμογή και να αφήσετε μια σημείωση σε οποιονδήποτε το διαβάζει. Σε αυτήν την περίπτωση, η ενότητα πνευματικών δικαιωμάτων περιέχει τη σημείωση μας και μνείες των αρχικών φωτογράφων, ενώ η ενότητα των καλλιτεχνών σας εμφανίζει μια λίστα των φωτογράφων με συνδέσμους στις αρχικές φωτογραφίες όταν πατάτε το κουμπί με τις μνείες. Τα URLs του ιστού μετά τα ονόματα τους στον πίνακα κάνουν τα ονόματα τους επιλέξιμους συνδέσμους στην ενότητα με τις μνείες.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new SwitchExample ();
    app.application.run (ARGV);
el: 
    // Εκτέλεση της εφαρμογής
    let app = new SwitchExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished SwitchExample class, and set the application running.
el: Τελικά, δημιουργούμε ένα νέο παράδειγμα της ολοκληρωμένης κλάσης SwitchExample και εκτελούμε την εφαρμογή.

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const SwitchExample = new Lang.Class({
        Name: 'Switch Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsswitch'
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal creates the menu and builds the UI
        _onStartup: function() {
            this._initMenus();
            this._buildUI ();
        },
    
    
    
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Animal Creator"});
    
            // Create the image widget and set its default picture
            this._image = new Gtk.Image ({file: "redfox.png"});
    
            // Create a label for the first switch
            this._flyLabel = new Gtk.Label ({
                label: "Make it fly",
                margin_right: 30});
    
            // Create the first switch and set its default position
            this._flySwitch = new Gtk.Switch ({active: false});
            this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
    
            // Create a label for the second switch
            this._birdLabel = new Gtk.Label ({
                label: "Make it a bird",
                margin_right: 30});
    
            // Create the second switch
            this._birdSwitch = new Gtk.Switch ({active: false});
            this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
    
            // Create a grid for the labels and switches beneath the picture
            this._UIGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_top: 20});
    
            // Attach the labels and switches to that grid
            this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1);
            this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1);
            this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1);
            this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);
    
            // Create a master grid to put both the UI and the picture into
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Attach the picture and the UI grid to the master grid
            this._mainGrid.attach (this._image, 0, 0, 1, 1);
            this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);
    
            // Add the master grid to the window
            this._window.add (this._mainGrid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
    
    
    
        _switchFlip: function() {
    
            // Change the picture depending on which switches are flipped
            if (this._flySwitch.get_active()) {
    
                if (this._birdSwitch.get_active()) this._image.set_from_file ("muteswan.png");
    
                else this._image.set_from_file ("fruitbat.png");
            }
    
            else {
    
                if (this._birdSwitch.get_active()) this._image.set_from_file ("gentoopenguin.png");
    
                else this._image.set_from_file ("redfox.png");
    
            }
    
        },
    
    
    
        _initMenus: function() {
    
            // Build the application's menu so we can have an "About" button
            let menu = new Gio.Menu();
            menu.append("About", 'app.about');
            menu.append("Quit",'app.quit');
            this.application.set_app_menu(menu);
    
            // Bind the "About" button to the _showAbout() function
            let aboutAction = new Gio.SimpleAction ({ name: 'about' });
            aboutAction.connect('activate', Lang.bind(this,
                function() {
                    this._showAbout();
                }));
            this.application.add_action(aboutAction);
    
            // Bind the "Quit" button to the function that closes the window
            let quitAction = new Gio.SimpleAction ({ name: 'quit' });
            quitAction.connect('activate', Lang.bind(this,
                function() {
                    this._window.destroy();
                }));
            this.application.add_action(quitAction);
        },
    
    
    
        _showAbout: function () {
    
            // String arrays of the names of the people involved in the project
            var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.png', 'Ken Funakoshi http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.png', 'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.png'];
            var authors = ["GNOME Documentation Team"];
            var documenters = ["GNOME Documentation Team"];
    
            // Create the About dialog
            let aboutDialog = new Gtk.AboutDialog({
                title: "AboutDialog Example",
                program_name: "Animal Creator",
                copyright: "Copyright \xa9 2012 GNOME Documentation Team\n\nRed fox photo licensed CC-By by Rob Lee\nGentoo penguin photo licensed CC-By-SA by Ken Funakoshi\nFruit bat photo licensed CC-By by Shek Graham\nMute swan photo licensed CC-By-SA by Mindaugas Urbonas\nLinks to the originals are available under Credits.\n\nHave you hugged a penguin today?",
                artists: artists,
                authors: authors,
                documenters: documenters,
                website: "http://developer.gnome.org",
                website_label: "GNOME Developer Website" });
    
            // Attach the About dialog to the window
            aboutDialog.modal = true;
            aboutDialog.transient_for = this._window;
    
            // Show the About dialog
            aboutDialog.show();
    
            // Connect the Close button to the destroy signal for the dialog
            aboutDialog.connect('response', function() {
                aboutDialog.destroy();
            });
        }
    
    });
    
    // Run the application
    let app = new SwitchExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const SwitchExample = new Lang.Class({
        Name: 'Switch Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής 
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsswitch'
            });
    
        // Σύνδεση των σημάτων '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._initMenus();
            this._buildUI ();
        },
    
    
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Animal Creator"});
    
            // Δημιουργία του γραφικού στοιχείου της εικόνας και ορισμός της προεπιλεγμένης της εικόνας
            this._image = new Gtk.Image ({file: "redfox.png"});
    
            // Δημιουργία μιας ετικέτας για τον πρώτο διακόπτη
            this._flyLabel = new Gtk.Label ({
                label: "Make it fly",
                margin_right: 30});
    
            // Δημιουργία του πρώτου διακόπτη και ορισμός της προεπιλεγμένης του θέσης
            this._flySwitch = new Gtk.Switch ({active: false});
            this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
    
            // Δημιουργία μιας ετικέτας για τον δεύτερο διακόπτη
            this._birdLabel = new Gtk.Label ({
                label: "Make it a bird",
                margin_right: 30});
    
            // Δημιουργία του δεύτερου διακόπτη
            this._birdSwitch = new Gtk.Switch ({active: false});
            this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
    
            // Δημιουργία ενός πλέγματος για τις ετικέτες και τους διακόπτες κάτω από την εικόνα
            this._UIGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_top: 20});
    
            // Προσάρτηση των ετικετών και διακοπτών σε αυτό το πλέγμα
            this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1);
            this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1);
            this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1);
            this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);
    
            // Δημιουργία ενός κύριου πλέγματος για τοποθέτηση μέσα του της διεπαφής χρήστη και της εικόνας
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Προσάρτηση της εικόνας και του πλέγματος διεπαφής χρήστη στο κύριο πλέγμα
            this._mainGrid.attach (this._image, 0, 0, 1, 1);
            this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);
    
            // Προσθήκη του κύριου πλέγματος στο παράθυρο
            this._window.add (this._mainGrid);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
    
    
        _switchFlip: function() {
    
            // Αλλαγή της εικόνας ανάλογα με το ποιοι διακόπτες αντιστρέφονται
            if (this._flySwitch.get_active()) {
    
                if (this._birdSwitch.get_active()) this._image.set_from_file ("muteswan.png");
    
                else this._image.set_from_file ("fruitbat.png");
            }
    
            else {
    
                if (this._birdSwitch.get_active()) this._image.set_from_file ("gentoopenguin.png");
    
                else this._image.set_from_file ("redfox.png");
    
            }
    
        },
    
    
    
        _initMenus: function() {
    
            // Δόμηση του μενού της εφαρμογής, έτσι ώστε να μπορούμε να έχουμε ένα πλήκτρο"About" 
            let menu = new Gio.Menu();
            menu.append("About", 'app.about');
            menu.append("Quit",'app.quit');
            this.application.set_app_menu(menu);
    
            // Σύνδεση του πλήκτρου "About" με τη συνάρτηση _showAbout() 
            let aboutAction = new Gio.SimpleAction ({ name: 'about' });
            aboutAction.connect('activate', Lang.bind(this,
                function() {
                    this._showAbout();
                }));
            this.application.add_action(aboutAction);
    
            // Σύνδεση του πλήκτρου "Quit" με τη συνάρτηση που κλείνει το παράθυρο
            let quitAction = new Gio.SimpleAction ({ name: 'quit' });
            quitAction.connect('activate', Lang.bind(this,
                function() {
                    this._window.destroy();
                }));
            this.application.add_action(quitAction);
        },
    
    
    
        _showAbout: function () {
    
            // Οι πίνακες συμβολοσειρών των ονομάτων των ατόμων που συμμετείχαν στο έργο
            var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.png', 'Ken Funakoshi http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.png', 'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.png'];
            var authors = ["GNOME Documentation Team"];
            var documenters = ["GNOME Documentation Team"];
    
            // Δημιουργία του διαλόγου Περί
            let aboutDialog = new Gtk.AboutDialog({
                title: "AboutDialog Example",
                program_name: "Animal Creator",
                copyright: "Copyright \xa9 2012 GNOME Documentation Team\n\nRed fox photo licensed CC-By by Rob Lee\nGentoo penguin photo licensed CC-By-SA by Ken Funakoshi\nFruit bat photo licensed CC-By by Shek Graham\nMute swan photo licensed CC-By-SA by Mindaugas Urbonas\nLinks to the originals are available under Credits.\n\nHave you hugged a penguin today?",
                artists: artists,
                authors: authors,
                documenters: documenters,
                website: "http://developer.gnome.org",
                website_label: "GNOME Developer Website" });
    
            // Προσάρτηση του διαλόγου Περίστομ παράθυρο
            aboutDialog.modal = true;
            aboutDialog.transient_for = this._window;
    
            // Εμφάνιση του διαλόγου Περί
            aboutDialog.show();
    
            // Σύνδεση του πλήκτρου Κλείσιμο με το σήμα καταστροφής του διαλόγου
            aboutDialog.connect('response', function() {
                aboutDialog.destroy();
            });
        }
    
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new SwitchExample ();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: Switch (Python)
el: Διακόπτης (Python)

note: (itstool) path: page/p
en: This Switch makes the title appears and disappear.
el: Αυτός ο διακόπτης κάνει τον τίτλο να εμφανίζεται και να εξαφανίζεται.

note: (itstool) path: section/title
en: Useful methods for a Switch widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο διακόπτη

note: (itstool) path: section/p
en: In line 17 the signal <code>"notify::active"</code> is connected to the callback function <code>activate_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 17 το σήμα <code>"notify::active"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>activate_cb()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

[ctx: text]
note: (itstool) path: info/title
en: Switch (Vala)
el: Διακόπτης (Vala)

note: (itstool) path: page/p
en: This Switch toggles the title.
el: Αυτός ο διακόπτης εναλλάσσει τον τίτλο.

note: (itstool) path: info/desc
en: Widget which displays a GtkTextBuffer
el: Γραφικό στοιχείο που εμφανίζει ένα GtkTextBuffer

note: (itstool) path: page/title
en: TextView widget
el: Γραφικό στοιχείο TreeView

note: (itstool) path: note/p
en: If we press "enter", we have a new line.
el: Εάν πατήσετε "enter", έχουμε νέα γραμμή.

note: (itstool) path: note/p
en: If we press "enter" more times then there are lines in the default sized window, then a vertical scrollbar appears.
el: Εάν πατήσουμε "enter" περισσότερες φορές τότε υπάρχουν γραμμές στο προεπιλεγμένο μέγεθος παραθύρου, μετά εμφανίζεται η κάθετη γραμμή κύλισης.

note: (itstool) path: note/p
en: If we write a long sentence, the text will wrap breaking lines between words.
el: Εάν γράψουμε μια μεγάλη πρόταση, το κείμενο θα αναδιπλωθεί διακόπτοντας τις γραμμές μεταξύ των λέξεων.

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong (that was long) word, a* horizontal scrollbar will appear.
el: Εάν έχουμε μια μεγάαααααααααααααααααααααααααααααααλη λέξη (που είναι μεγάλη), μια* οριζόντια γραμμή κύλισης θα εμφανιστεί.

note: (itstool) path: page/p
en: This is an example of Gtk.TextView
el: Αυτό είναι ένα παράδειγμα του Gtk.TextView

note: (itstool) path: info/desc
en: A multiline text editor
el: Επεξεργαστής κειμένου πολλαπλών γραμμών

note: (itstool) path: page/title
en: TextView
el: Προβολή κειμένου (TextView)

note: (itstool) path: page/p
en: A TextView is really (or at least usually) a nested set of three objects.
el: Μια προβολή κειμένου (TextView) είναι πραγματικά (ή τουλάχιστον συνήθως) ένα ένθετο σύνολο τριών αντικειμένων.

note: (itstool) path: item/p
en: At the bottom there is a <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html">TextBuffer</link>. This holds the text itself.
el: Στο τέλος είναι ένα <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html">TextBuffer</link>. Αυτό κρατά το ίδιο το κείμενο.

note: (itstool) path: item/p
en: In the middle there is the <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html">TextView</link>, which is a widget that lets you see and edit the text in the buffer. It automatically resizes itself depending on how much text there is.
el: Στη μέση είναι η <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html">TextView</link>, που είναι ένα γραφικό στοιχείο που σας επιτρέπει να δείτε και να επεξεργαστείτε το κείμενο στην ενδιάμεση μνήμη. Αυξομειώνει τον εαυτόν του αυτόματα ανάλογα με το πόσο κείμενο υπάρχει.

note: (itstool) path: item/p
en: Since the automatic resizing can make a TextView unwieldy, you normally place it inside of a ScrolledWindow. Despite the name, it's not an actual window in terms of having a title bar and an X button; it's a widget you put on the application you're making, which acts like a window onto a more manageable chunk of a TextView. If the text in the buffer is too big to fit, scrollbars will appear.
el: Αφού η αυτόματη αυξομείωση μπορεί να κάνει μια προβολή κειμένου (TextView) άβολη, την τοποθετείτε κανονικά μέσα σε ένα κυλιόμενο παράθυρο (ScrolledWindow). Παρά το όνομα, δεν είναι ένα ενεργό παράθυρο έχοντας γραμμή τίτλου και ένα κουμπί Χ· είναι ένα γραφικό στοιχείο που βάζετε στην εφαρμογή που κάνετε, που δρα όπως ένα παράθυρο σε ένα πιο διαχειρίσιμο τμήμα μιας προβολής κειμένου. Εάν το κείμενο στην ενδιάμεση μνήμη είναι υπερβολικά μεγάλο για να ταιριάξει, θα εμφανιστούν γραμμές κύλισης.

note: (itstool) path: page/p
en: If you want to change what text is displayed in the TextView, you act on the TextBuffer, since it's what actually holds the text. The same goes for if you want to see what text someone typed in. This sample application lets you talk to a (make-believe) penguin, and checks the TextBuffer to see if you typed the word "fish" anywhere in it.
el: Εάν θέλετε να αλλάξετε το εμφανιζόμενο κείμενο στην προβολή κειμένου (TextView), επιδράτε στην ενδιάμεση μνήμη του κειμένου (TextBuffer), αφού είναι αυτό που στην πραγματικότητα κρατά το κείμενο. Το ίδιο γίνεται εάν θέλετε να δείτε τι κείμενο έχει τυπώσει κάποιος. Αυτό το δείγμα της εφαρμογής σας επιτρέπει να μιλήσετε σε έναν (πιστέψτε το) πιγκουίνο και ελέγχει το TextBuffer για να δείτε εάν πληκτρολογήσατε τη λέξη "fish" οπουδήποτε σε αυτό.

note: (itstool) path: note/p
en: Real-life penguin populations are declining fast, because climate change is melting the ice that they live on and killing the fish that they eat. If you'd like to play a (somewhat silly) GNOME game based on this premise, take a look at <link href="http://pingus.seul.org/">Pingus</link>.
el: Οι πληθυσμοί πιγκουίνου στην πραγματική ζωή μειώνονται γρήγορα, επειδή η κλιματική αλλαγή λιώνει τον πάγο που ζουν και σκοτώνει τα ψάρια που τρώνε. Εάν θα θέλατε να παίξετε ένα (κάπως χαζό) παιχνίδι του GNOME με βάση αυτήν την προϋπόθεση, κοιτάξτε το <link href="http://pingus.seul.org/">Pingus</link>.

note: (itstool) path: section/code
en: 
    const TextViewExample = new Lang.Class ({
        Name: 'TextView Example',
    
        // Create the application itself
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jstextview' });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function () {
            this._window.present ();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function () {
            this._buildUI ();
        },
el: 
    const TextViewExample = new Lang.Class ({
        Name: 'TextView Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jstextview' });
    
            // Σύνδεση των σημάτων '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 ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the TextViewExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
el: Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση TextViewExample. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function () {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Talk to a Penguin",
                default_height: 400,
                default_width: 440,
                border_width: 20 });
el: 
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function () {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Talk to a Penguin",
                default_height: 400,
                default_width: 440,
                border_width: 20 });

note: (itstool) path: section/title
en: Creating the TextView
el: Δημιουργία της TextView

note: (itstool) path: section/code
en: 
            // Create a label for the penguin to talk to you
            this._penguin = new Gtk.Label ({
                height_request: 180,
                width_request: 400,
                label: "Squaaaak?",
                wrap: true });
el: 
            // Δημιουργία ετικέτας για τον πιγκουίνο που θα σας μιλήσει
            this._penguin = new Gtk.Label ({
                height_request: 180,
                width_request: 400,
                label: "Squaaaak?",
                wrap: true });

note: (itstool) path: section/p
en: Our first step in this example is to create the <link xref="label.js">Label</link> that the penguin will use to talk to you. We set the text in it to wrap by setting its wrap property to true, but we'll use a different method on the TextView itself that allows for more fine-grained control.
el: Το πρώτο μας βήμα σε αυτό το παράδειγμα είναι η δημιουργία της <link xref="label.js">ετικέτας</link> που θα χρησιμοποιήσει ο πιγκουίνος για να σας μιλήσει. Ορίζουμε το κείμενο σε αυτό σε αναδίπλωση ρυθμίζοντας την ιδιότητά του αναδίπλωση σε αληθή, αλλά θα χρησιμοποιήσουμε μια διαφορετική μέθοδο στην ίδια την TextView που επιτρέπει για πιο ακριβή έλεγχο.

note: (itstool) path: section/code
en: 
            // Create a textview for you to talk to the penguin
            this.buffer = new Gtk.TextBuffer();
            this._textView = new Gtk.TextView ({
                buffer: this.buffer,
                editable: true,
                wrap_mode: Gtk.WrapMode.WORD });
el: 
            // Δημιουργία μιας προβολής κειμένου για να μιλήσετε με τον πιγκουίνο
            this.buffer = new Gtk.TextBuffer();
            this._textView = new Gtk.TextView ({
                buffer: this.buffer,
                editable: true,
                wrap_mode: Gtk.WrapMode.WORD });

note: (itstool) path: section/p
en: Our first step is to create a TextBuffer to put the words into. After that we create the TextView, and tell it to use the TextBuffer we created as its buffer. We also set it to be editable, since we want to be able to type new things in.
el: Το πρώτο μας βήμα είναι η δημιουργία ενός TextBuffer για να βάλουμε τις λέξεις μέσα. Αφού δημιουργήσουμε την TextView και του πούμε να χρησιμοποιήσει την TextBuffer που δημιουργήσαμε ως την ενδιάμεση μνήμη του. Το ρυθμίζουμε επίσης να είναι επεξεργάσιμο, αφού θέλουμε να μπορούμε να πληκτρολογήσουμε νέα πράγματα μέσα του.

note: (itstool) path: section/p
en: The wrap_mode property lets you select from four different <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.WrapMode.html">WrapModes</link>. Gtk.WrapMode.CHAR, for instance, starts wrapping around in the middle of a word if you keep typing when it gets to the edge. Most people are probably used to Gtk.WrapMode.WORD, which will automatically put the word you're typing on the next line if it gets to be too long.
el: Η ιδιότητα wrap_mode σας επιτρέπει να επιλέξετε από τέσσερα διαφορετικά <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.WrapMode.html">WrapModes</link>. Το Gtk.WrapMode.CHAR, για παράδειγμα, ξεκινά την αναδίπλωση γύρω από τη μέση μιας λέξης εάν συνεχίζετε την πληκτρολόγηση όταν φτάνει στην άκρη. Οι περισσότεροι άνθρωποι χρησιμοποιούν προφανώς το Gtk.WrapMode.WORD, που θα βάλει αυτόματα τη λέξη που πληκτρολογείτε στην επόμενη γραμμή εάν πρόκειται να είναι υπερβολικά μεγάλη.

note: (itstool) path: section/code
en: 
            // Create a "scrolled window" to put your textview in so it will scroll
            this._scrolled = new Gtk.ScrolledWindow ({
                hscrollbar_policy: Gtk.PolicyType.AUTOMATIC,
                vscrollbar_policy: Gtk.PolicyType.AUTOMATIC,
                shadow_type: Gtk.ShadowType.ETCHED_IN,
                height_request: 180,
                width_request: 400, });
    
            // Put the textview into the scrolled window
            this._scrolled.add_with_viewport (this._textView);
el: 
            // Δημιουργία ενός "scrolled window" για να βάλετε την προβολή κειμένου μέσα, ώστε να μπορεί να κυλίσει
            this._scrolled = new Gtk.ScrolledWindow ({
                hscrollbar_policy: Gtk.PolicyType.AUTOMATIC,
                vscrollbar_policy: Gtk.PolicyType.AUTOMATIC,
                shadow_type: Gtk.ShadowType.ETCHED_IN,
                height_request: 180,
                width_request: 400, });
    
            // Τοποθέτηση της προβολής κειμένου στο κυλιόμενο παράθυρο
            this._scrolled.add_with_viewport (this._textView);

note: (itstool) path: section/p
en: Here we create a ScrolledWindow, and set it to automatically scroll if it gets to be too big horizontally or vertically. We also give it a nice-looking ETCHED_IN border. After that, we put our TextView inside, and tell the ScrolledWindow to give us a viewport onto it.
el: Εδώ δημιουργούμε ένα κυλιόμενο παράθυρο (ScrolledWindow) και το ορίζουμε σε αυτόματη κύλιση αν γίνεται υπερβολικά μεγάλο οριζόντια ή κάθετα. Του δίνουμε επίσης ένα ωραίο περίγραμμα ETCHED_IN. Μετά από αυτό, βάζουμε την προβολή κειμένου (TextView) μας μέσα και λέμε στο ScrolledWindow να μας δώσει μια θύρα προβολής μέσα του.

note: (itstool) path: section/code
en: 
            // Create a grid to organize them in
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Put the label and textview in the grid one on top of the other
            this._grid.attach (this._penguin, 0, 0, 1, 1);
            this._grid.attach (this._scrolled, 0, 1, 1, 1);
el: 
            // Δημιουργία ενός πλέγματος για να τα οργανώσετε μέσα
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Τοποθέτηση της ετικέτας και της προβολής κειμένου στο πλέγμα της μιας πάνω από την άλλη
            this._grid.attach (this._penguin, 0, 0, 1, 1);
            this._grid.attach (this._scrolled, 0, 1, 1, 1);

note: (itstool) path: section/p
en: The first <link xref="grid.js">Grid</link> we create only has the Label and the ScrolledWindow inside it.
el: Το πρώτο <link xref="grid.js">πλέγμα</link> που δημιουργήσαμε έχει μόνο την ετικέτα και το ScrolledWindow μέσα του.

note: (itstool) path: section/code
en: 
            // Create a button to send your message to the penguin
            this._send = new Gtk.Button ({
                halign: Gtk.Align.END,
                margin_top: 20,
                label: "Send" });
            this._send.connect ('clicked', Lang.bind (this, this._chat));
    
            // Create a grid that will have the other grid on top and the button on bottom
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Add the other grid and the button to the main grid
            this._mainGrid.attach (this._grid, 0, 0, 1, 1);
            this._mainGrid.attach (this._send, 0, 1, 1, 1);
el: 
            // Δημιουργία ενός πλήκτρου για αποστολή του μηνύματός σας στον πιγκουίνο
            this._send = new Gtk.Button ({
                halign: Gtk.Align.END,
                margin_top: 20,
                label: "Send" });
            this._send.connect ('clicked', Lang.bind (this, this._chat));
    
            // Δημιουργία ενός πλέγματος που θα έχει το άλλο πλέγμα στην κορυφή και το πλήκτρο στον πυθμένα.
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Προσθήκη του άλλου πλέγματος και του πλήκτρου στο κύριο πλέγμα
            this._mainGrid.attach (this._grid, 0, 0, 1, 1);
            this._mainGrid.attach (this._send, 0, 1, 1, 1);

note: (itstool) path: section/p
en: We create a <link xref="button.js">Button</link> to send your message to the penguin, and a new Grid that has the other one on top and the Button on the bottom. The Button has a margin on top, so that it isn't squished up against the ScrolledWindow.
el: Δημιουργούμε ένα <link xref="button.js">κουμπί</link> για να στείλουμε το μήνυμά σας στον πιγκουίνο και ένα νέο πλέγμα που έχει το άλλο στην κορυφή και το κουμπί στο τέλος. Το κουμπί έχει ένα περιθώριο στην κορυφή, έτσι ώστε δεν παράγεται πάνω στο ScrolledWindow.

note: (itstool) path: section/code
en: 
            // Attach the main grid to the window
            this._window.add (this._mainGrid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
el: 
            // Προσάρτηση του κύριου πλέγματος στο παράθυρο
            this._window.add (this._mainGrid);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },

note: (itstool) path: section/p
en: Finally, we attach the main Grid to the window, then we tell the window and everything inside it to become visible when the application is run.
el: Τελικά, προσκολλάμε το κύριο πλέγμα στο παράθυρο, έπειτα λέμε στο παράθυρο και σε κάθε τι που είναι μέσα του να γίνει ορατό όταν τρέχει η εφαρμογή.

note: (itstool) path: section/title
en: Function which handles the penguin's response
el: Η συνάρτηση που χειρίζεται την απόκριση του πιγκουίνου

note: (itstool) path: section/p
en: Here we use some basic JavaScript functions to have the penguins say something random. Penguins like fish, though, so if you mention fish we want the penguin to respond to that. To do that, we use the JavaScript String object's match method on <file>this.buffer.text</file>, which returns the contents of our TextBuffer.
el: Εδώ χρησιμοποιούμε μερικές βασικές συναρτήσεις JavaScript για να κάνουμε τους πιγκουίνους να λένε κάτι τυχαία. Οι πιγκουίνοι είναι όπως τα ψάρια, όμως, έτσι εάν αναφέρετε ψάρι θέλουμε ο πιγκουίνος να απαντά σε αυτό. Για να γίνει αυτό, χρησιμοποιούμε την μέθοδο συμφωνίας του αντικειμένου συμβολοσειράς JavaScript στο <file>this.buffer.text</file>, που επιστρέφει τα περιεχόμενα της TextBuffer μας.

note: (itstool) path: section/p
en: Since we want to clear out the TextBuffer after each time you click Send, we set <file>this.buffer.text</file> to contain an empty string afterwards. Then we return focus to our TextView, so that you can keep typing without having to click on it beforehand.
el: Αφού θέλουμε να καθαρίσουμε την TextBuffer κάθε φορά μετά το πάτημα αποστολή, ορίζουμε το <file>this.buffer.text</file> να περιέχει μια κενή συμβολοσειρά κατόπιν. Έπειτα επιστρέφουμε την εστίαση στην TextView μας, έτσι ώστε να μπορείτε να συνεχίσετε την πληκτρολόγηση χωρίς να πρέπει να πατήσετε πάνω της προκαταβολικά.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new TextViewExample ();
    app.application.run (ARGV);
el: 
    // Εκτέλεση της εφαρμογής
    let app = new TextViewExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished TextViewExample class, and set the application running.
el: Τελικά, δημιουργούμε ένα νέο παράδειγμα της τελειωμένης κλάσης TextViewExample και εκτελούμε την εφαρμογή.

[ctx: text]
note: (itstool) path: info/title
en: TextView (Python)
el: Προβολή κειμένου (TextView) (Python)

note: (itstool) path: info/desc
en: Widget that displays a GtkTextBuffer
el: Γραφικό στοιχείο που εμφανίζει ένα GtkTextBuffer

note: (itstool) path: note/p
en: This is an example of Gtk.TextView.
el: Αυτό είναι ένα παράδειγμα του Gtk.TextView.

note: (itstool) path: note/p
en: But we can also have a new line if we write a long sentence (the text will wrap breaking lines between words).
el: Αλλά μπορούμε επίσης να έχουμε μια νέα γραμμή εάν γράψουμε μια μεγάλη πρόταση (το κείμενο θα αναδιπλωθεί διακόπτοντας τις γραμμές μεταξύ των λέξεων).

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong
el: Εάν έχουμε μια μεγάαααααααααααααααααααααααααααααααλη

note: (itstool) path: note/p
en: (that was long)
el: (που ήταν μεγάλη)

note: (itstool) path: note/p
en: word, an horizontal scrollbar will appear.
el: λέξη, μια οριζόντια γραμμή κύλισης θα εμφανιστεί.

note: (itstool) path: section/title
en: Useful methods for a TextView widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο TextView

note: (itstool) path: section/p
en: A <code>Gtk.TextView</code> displays the text stored in a <code>Gtk.TextBuffer</code>. However, most text manipulation is accomplished with iterators, represented by a <code>Gtk.TextIter</code> - a position between two characters in the text buffer. Iterators are not valid indefinitely; whenever the buffer is modified in a way that affects the contents of the buffer, all outstanding iterators become invalid. Because of this, iterators can’t be used to preserve positions across buffer modifications. To preserve a position, we use a <code>Gtk.TextMark</code>, that can be set visible with <code>visible(True)</code>. A text buffer contains two built-in marks; an "insert" mark (the position of the cursor) and the "selection_bound" mark.
el: Μια <code>Gtk.TextView</code> εμφανίζει το αποθηκευμένο κείμενο σε μια <code>Gtk.TextBuffer</code>. Όμως, η περισσότερη επεξεργασία του κειμένου πραγματοποιείται με επαναλήπτες, αντιπροσωπευόμενοι από ένα <code>Gtk.TextIter</code> - μια θέση μεταξύ δύο χαρακτήρων στην ενδιάμεση μνήμη του κειμένου. Οι επαναλήπτες δεν είναι έγκυροι επ' άπειρο· όποτε η ενδιάμεση μνήμη τροποποιείται με τρόπο που επηρεάζει τα περιεχόμενα της ρυθμιστικής μνήμης, όλοι οι εκκρεμείς επαναλήπτες γίνονται άκυροι. Λόγω αυτού, οι επαναλήπτες δεν μπορούν να χρησιμοποιηθούν για να διατηρήσουν τις θέσεις με τις τροποποιήσεις της ενδιάμεσης μνήμης. Για να διατηρήσετε μια θέση, χρησιμοποιούμε ένα <code>Gtk.TextMark</code>, που μπορεί να οριστεί ορατό με <code>visible(True)</code>. Μια ενδιάμεση μνήμη κειμένου περιέχει δύο ενσωματωμένα σημάδια· ένα σημάδι "εισαγωγής" (η θέση του δρομέα) και το σημάδι "δέσμευση_επιλογής".

note: (itstool) path: section/p
en: Methods for a TextView widget:
el: Μέθοδοι για ένα γραφικό στοιχείο προβολής κειμένου (TextView):

note: (itstool) path: item/p
en: The TextView widget is by default editable. If you prefer otherwise, use <code>set_editable(False)</code>. If the buffer has no editable text, it might be a good idea to use <code>set_cursor_visible(False)</code> as well.
el: Το γραφικό στοιχείο TextView είναι από προεπιλογή επεξεργάσιμο. Εάν προτιμάτε αλλιώς, χρησιμοποιήστε <code>set_editable(False)</code>. Εάν η ενδιάμεση μνήμη δεν έχει επεξεργάσιμο κείμενο, ίσως να είναι μια καλή ιδέα να χρησιμοποιήσετε <code>set_cursor_visible(False)</code> επίσης.

note: (itstool) path: item/p
en: The justification of the text is set with <code>set_justification(Gtk.Justification.JUSTIFICATION)</code> where <code>JUSTIFICATION</code> is one of <code>LEFT, RIGHT, CENTER, FILL</code>.
el: Η στοίχιση του κειμένου ορίζεται με <code>set_justification(Gtk.Justification.JUSTIFICATION)</code> όπου <code>JUSTIFICATION</code> είναι ένα από τα <code>LEFT, RIGHT, CENTER, FILL</code>.

note: (itstool) path: item/p
en: The line wrapping of the text is set with <code>set_wrap_mode(Gtk.WrapMode.WRAP)</code> where <code>WRAP</code> is one of <code>NONE</code> (the text area is made wider), <code>CHAR</code> (break lines anywhere the cursor can appear), <code>WORD</code> (break lines between words), <code>WORD_CHAR</code> (break lines between words, but if that is not enough between characters).
el: Η αναδίπλωση γραμμής του κειμένου ορίζεται με <code>set_wrap_mode(Gtk.WrapMode.WRAP)</code> όπου <code>WRAP</code> είναι ένα από <code>NONE</code> (η περιοχή του κειμένου γίνεται πλατύτερη), <code>CHAR</code> (η αλλαγή γραμμών οπουδήποτε ο δρομέας μπορεί να εμφανιστεί), <code>WORD</code> (αλλαγή γραμμών μεταξύ λέξεων), <code>WORD_CHAR</code> (αλλαγή γραμμών μεταξύ λέξεων, αλλά εάν αυτό δεν είναι αρκετό μεταξύ χαρακτήρων).

note: (itstool) path: section/p
en: Methods for a TextBuffer widget:
el: Μέθοδοι για ένα γραφικό στοιχείο TextBuffer:

note: (itstool) path: item/p
en: <code>get_insert()</code> returns the <code>Gtk.TextMark</code> that represents the cursor, that is the insertion point.
el: Η <code>get_insert()</code> επιστρέφει το <code>Gtk.TextMark</code> που αναπαριστά τον δρομέα, που είναι το σημείο εισαγωγής.

note: (itstool) path: item/p
en: <code>get_selection_bound()</code> returns the <code>Gtk.TextMark</code> that represents the selection bound.
el: Η <code>get_selection_bound()</code> επιστρέφει το <code>Gtk.TextMark</code> που αναπαριστά την δεσμευμένη επιλογή.

note: (itstool) path: item/p
en: <code>set_text("some text", length)</code> where <code>length</code> is a positive integer or <code>-1</code>, sets the content of the buffer as the first <code>length</code> characters of the <code>"some text"</code> text. If <code>length</code> is omitted or <code>-1</code>, the text is inserted completely. The content of the buffer, if there is any, is destroyed.
el: Ο <code>set_text("some text", length)</code> όπου <code>length</code> είναι ένας θετικός ακέραιος ή <code>-1</code>, ορίζει το περιεχόμενο της ενδιάμεσης μνήμης ως τους πρώτους χαρακτήρες <code>length</code> του κειμένου <code>"some text"</code>. Εάν το <code>length</code> παραλείπεται ή <code>-1</code>, το κείμενο εισάγεται πλήρως. Το περιεχόμενο της ενδιάμεσης μνήμης, εάν υπάρχει κάποια, καταστρέφεται.

note: (itstool) path: item/p
en: <code>insert(iter, "some text", length)</code> where <code>iter</code> is a text iterator and <code>length</code> is a positive integer or <code>-1</code>, inserts in the buffer at <code>iter</code> the first <code>length</code> characters of the <code>"some text"</code> text. If <code>length</code> is omitted or <code>-1</code>, the text is inserted completely.
el: Η <code>insert(iter, "some text", length)</code> όπου <code>iter</code> είναι ένας επαναλήπτης κειμένου και <code>length</code> είναι ένας θετικός ακέραιος ή <code>-1</code>, εισάγει στην ενδιάμεση μνήμη στο <code>iter</code> τους πρώτους χαρακτήρες <code>length</code> του κειμένου <code>"some text"</code>. Εάν το <code>length</code> παραληφθεί ή <code>-1</code>, το κείμενο εισάγεται πλήρως.

note: (itstool) path: item/p
en: <code>insert_at_cursor("some text", length)</code> does the same as <code>insert(iter, "some text", length)</code>, with the current cursor taken as <code>iter</code>.
el: Η <code>insert_at_cursor("some text", length)</code> κάνει το ίδιο με την <code>insert(iter, "some text", length)</code>, με τον τρέχοντα δρομέα να λαμβάνεται ως <code>iter</code>.

note: (itstool) path: item/p
en: <code>create_mark("mark_name", iter, left_gravity)</code> where <code>iter</code> is a <code>Gtk.TextIter</code> and <code>left_gravity</code> is a boolean, creates a <code>Gtk.TextMark</code> at the position of <code>iter</code>. If <code>"mark_name"</code> is <code>None</code>, the mark is anonymous; otherwise, the mark can be retrieved by name using <code>get_mark()</code>. If a mark has left gravity, and text is inserted at the mark’s current location, the mark will be moved to the left of the newly-inserted text. If <code>left_gravity</code> is omitted, it defaults to <code>False</code>.
el: Η <code>create_mark("mark_name", iter, left_gravity)</code> όπου <code>iter</code> είναι ένα <code>Gtk.TextIter</code> και <code>left_gravity</code> είναι τιμή Μπουλ, δημιουργεί ένα <code>Gtk.TextMark</code> στη θέση του <code>iter</code>. Εάν <code>"mark_name"</code> είναι <code>None</code>, το σημάδι είναι ανώνυμο· αλλιώς, το σημάδι μπορεί να ανακτηθεί κατά όνομα χρησιμοποιώντας <code>get_mark()</code>. Εάν ένα σημάδι έχει υπολειπόμενη βαρύτητα και το κείμενο εισάγεται στην τρέχουσα θέση του σημαδιού, το σημάδι θα μετακινηθεί στα αριστερά του νεοεισαγμένου κειμένου. Εάν η <code>left_gravity</code> παραληφθεί, προεπιλέγεται το <code>False</code>.

note: (itstool) path: item/p
en: To specify that some text in the buffer should have specific formatting, you must define a tag to hold that formatting information, and then apply that tag to the region of text using <code>create_tag("tag name", property)</code> and <code>apply_tag(tag, start_iter, end_iter)</code> as in, for instance:
el: Για να ορίσετε ότι κάποιο κείμενο στην ενδιάμεση μνήμη πρέπει να έχει ειδική μορφοποίηση, πρέπει να ορίσετε μια ετικέτα να κρατήσει αυτήν την πληροφορία μορφοποίησης και έπειτα να εφαρμόσει αυτήν την ετικέτα στην περιοχή του κειμένου χρησιμοποιώντας <code>create_tag("tag name", property)</code> και <code>apply_tag(tag, start_iter, end_iter)</code> όπως στο, για παράδειγμα:

note: (itstool) path: item/p
en: The following are some of the common styles applied to text:
el: Τα ακόλουθα είναι μερικές από τις κοινές εφαρμοζόμενες τεχνοτροπίες στο κείμενο:

note: (itstool) path: item/p
en: Background colour ("background" property)
el: Χρώμα παρασκηνίου (ιδιότητα "background")

note: (itstool) path: item/p
en: Foreground colour ("foreground" property)
el: Χρώμα προσκηνίου (ιδιότητα "foreground")

note: (itstool) path: item/p
en: Underline ("underline" property)
el: Υπογράμμιση (ιδιότητα "underline")

note: (itstool) path: item/p
en: Bold ("weight" property)
el: Έντονα (ιδιότητα "weight")

note: (itstool) path: item/p
en: Italics ("style" property)
el: Πλάγια (ιδιότητα "style")

note: (itstool) path: item/p
en: Strikethrough ("strikethrough" property)
el: Διαγράμμιση (ιδιότητα "strikethrough")

note: (itstool) path: item/p
en: Justification ("justification" property)
el: Στοίχιση (ιδιότητα "justification")

note: (itstool) path: item/p
en: Size ("size" and "size-points" properties)
el: Μέγεθος (ιδιότητες "size" και "size-points")

note: (itstool) path: item/p
en: Text wrapping ("wrap-mode" property)
el: Αναδίπλωση κειμένου (ιδιότητα "wrap-mode")

note: (itstool) path: item/p
en: You can also delete particular tags later using <code>remove_tag()</code> or delete all tags in a given region by calling <code>remove_all_tags()</code>.
el: Μπορείτε επίσης να διαγράψετε συγκεκριμένες ετικέτες αργότερα χρησιμοποιώντας <code>remove_tag()</code> ή να διαγράψετε όλες τις ετικέτες σε μια δεδομένη περιοχή καλώντας <code>remove_all_tags()</code>.

note: (itstool) path: section/p
en: Methods for a TextIter widget
el: Μέθοδοι για γραφικό στοιχείο TextIter

note: (itstool) path: item/p
en: <code>forward_search(needle, flags, limit)</code> searches forward for <code>needle</code>. The search will not continue past the <code>Gtk.TextIter</code> limit. The <code>flags</code> can be set to one of the following, or any combination of it by concatenating them with the bitwise-OR operator <code>|</code>: <code>0</code> (the match must be exact); <code>Gtk.TextSearchFlags.VISIBLE_ONLY</code> (the match may have invisible text interspersed in needle); <code>Gtk.TextSearchFlags.TEXT_ONLY</code> (the match may have pixbufs or child widgets mixed inside the matched range); <code>Gtk.TextSearchFlags.CASE_INSENSITIVE</code> (the text will be matched regardless of what case it is in). The method returns a tuple containing a <code>Gtk.TextIter</code> pointing to the start and to the first character after the match; if no match is found, <code>None</code> is returned.
el: Η <code>forward_search(needle, flags, limit)</code> αναζητά μπροστά για <code>needle</code>. Η αναζήτηση δεν θα συνεχίσει πέρα από το όριο <code>Gtk.TextIter</code>. Οι <code>flags</code> μπορούν να οριστούν σε ένα από τα ακόλουθα, ή οποιονδήποτε συνδυασμό του συνενώνοντας τους με τον τελεστή OR <code>|</code>: <code>0</code> (η συμφωνία πρέπει να είναι ακριβής)· <code>Gtk.TextSearchFlags.VISIBLE_ONLY</code> (η συμφωνία μπορεί να έχει αόρατο κείμενο διανθισμένο σε βελόνα)· <code>Gtk.TextSearchFlags.TEXT_ONLY</code> (η συμφωνία μπορεί να έχει γραφικά στοιχεία pixbufs ή θυγατρικά ανακατεμένα μέσα στην περιοχή συμφωνίας)· το <code>Gtk.TextSearchFlags.CASE_INSENSITIVE</code> (το κείμενο θα ταιριάζει ανεξάρτητα από κεφαλαία/μικρά). Η μέθοδος επιστρέφει μια πλειάδα που περιέχει ένα <code>Gtk.TextIter</code> που δείχνει στην αρχή και στον πρώτο χαρακτήρα μετά τη συμφωνία· εάν δεν βρεθεί συμφωνία, ο <code>None</code> επιστρέφεται.

note: (itstool) path: item/p
en: <code>backward_search(needle, flags, limit)</code> does the same as <code>forward_search()</code>, but moving backwards.
el: Η <code>backward_search(needle, flags, limit)</code> κάνει το ίδιο όπως η <code>forward_search()</code>, αλλά κινείται προς τα πίσω.

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong word, a horizontal scrollbar will appear.
el: Εάν έχουμε μια μεγάαααααααααααααααααααααααααααααααλη λέξη, μια οριζόντια γραμμή κύλισης θα εμφανιστεί.

[ctx: text]
note: (itstool) path: info/title
en: ToggleButton (C)
el: Κουμπί εναλλαγής (ToggleButton) (C)

note: (itstool) path: info/desc
en: A button which retains state
el: Ένα κουμπί που κρατά κατάσταση

note: (itstool) path: page/title
en: ToggleButton
el: Κουμπί εναλλαγής (ToggleButton)

note: (itstool) path: page/p
en: When this ToggleButton is in an active state, the spinner spins.
el: Όταν αυτό το ToggleButton είναι ενεργό, ο μετρητής περιστρέφεται.

[ctx: text]
note: (itstool) path: info/title
en: ToggleButton (JavaScript)
el: Κουμπί εναλλαγής (ToggleButton) (JavaScript)

note: (itstool) path: info/desc
en: Stays pressed until you click it again
el: Παραμένει πατημένο μέχρι να το πατήσετε ξανά

note: (itstool) path: page/p
en: A ToggleButton is like a normal <link xref="button.js">Button</link>, except that it stays pressed in when you click it. You can use it like an on/off switch, to control things like the <link xref="spinner.js">Spinner</link> in this example.
el: Ένα κουμπί εναλλαγής (ToggleButton) είναι σαν ένα κανονικό <link xref="button.js">κουμπί</link>, εκτός από το ότι παραμένει πατημένο όταν το πατάτε. Μπορείτε να το χρησιμοποιήσετε σαν έναν διακόπτη ναι/όχι, για να ελέγξετε πράγματα όπως τον <link xref="spinner.js">μετρητή</link> σε αυτό το παράδειγμα.

note: (itstool) path: page/p
en: A ToggleButton's get_active method returns true if it's pressed in, and false if it's not. Its set_active method is used if you want to change its state without needing to click on it. When it changes state from pressed in to popped out and vice-versa, it sends out the "toggled" signal, which you can connect to a function to do something.
el: Μια μέθοδος get_active του ToggleButton επιστρέφει αληθές εάν πατηθεί και ψευδές εάν δεν πατηθεί. Η μέθοδος του set_active χρησιμοποιείται εάν θέλετε να αλλάξετε την κατάσταση του χωρίς να χρειάζεται να το πατήσετε. Όταν αλλάζει η κατάσταση από πατημένο σε αναδυόμενο και αντίστροφα, στέλνει το σήμα "αλλαγμένο", που μπορείτε να συνδέσετε με μια συνάρτηση για να κάνει κάτι.

note: (itstool) path: section/code
en: 
    const ToggleButtonExample = new Lang.Class({
        Name: 'ToggleButton Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jstogglebutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
el: 
    const ToggleButtonExample = new Lang.Class({
        Name: 'ToggleButton Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jstogglebutton',
                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 ();
        },

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 300,
                default_width: 300,
                border_width: 30,
                title: "ToggleButton Example"});
el: 
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 300,
                default_width: 300,
                border_width: 30,
                title: "ToggleButton Example"});

note: (itstool) path: section/title
en: Creating the ToggleButton and other widgets
el: Δημιουργία του κουμπιού εναλλαγής (ToggleButton) και άλλων γραφικών στοιχείων

note: (itstool) path: section/code
en: 
            // Create the spinner that the button stops and starts
            this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
el: 
            // Δημιοργία του μετρητή που το κουμπί σταματά και αρχίζει
            this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});

note: (itstool) path: section/p
en: We want this <link xref="spinner.js">Spinner</link> to expand vertically and horizontally, to take up as much space as possible inside the window.
el: Θέλουμε αυτός ο <link xref="spinner.js">μετρητής</link> να επεκταθεί κάθετα και οριζόντια, για να καταλάβει όσο το δυνατό περισσότερο χώρο μέσα στο παράθυρο.

note: (itstool) path: section/code
en: 
            // Create the togglebutton that starts and stops the spinner
            this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
            this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));
el: 
            // Δημιουργία του κουμπιού εναλλαγής που ξεκινά και σταματά τον μετρητή
            this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
            this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));

note: (itstool) path: section/p
en: Creating a ToggleButton is a lot like creating a normal <link xref="button.js">Button</link>. The biggest difference is that you're handling a "toggled" signal instead of a "clicked" signal. This code binds the _onToggle function to that signal, so that it's called whenever our ToggleButton is toggled.
el: Η δημιουργία ενός ToggleButton είναι παρεμφερής με τη δημιουργία ενός κανονικού <link xref="button.js">κουμπιού</link>. Η μεγαλύτερη διαφορά είναι ότι χειρίζεστε ένα "αλλαγμένο" σήμα αντί για ένα "πατημένο" σήμα. Αυτός ο κώδικας συνδέει τη συνάρτηση _onToggle με αυτό το σήμα, έτσι ώστε καλείται όποτε το ToggleButton μας εναλλάσσεται.

note: (itstool) path: section/code
en: 
            // Create a grid and put everything in it
            this._grid = new Gtk.Grid ({
                row_homogeneous: false,
                row_spacing: 15});
            this._grid.attach (this._spinner, 0, 0, 1, 1);
            this._grid.attach (this._toggleButton, 0, 1, 1, 1);
el: 
            // Δημιουργία ενός πλέγματος και τοποθέτηση όλων μέσα του
            this._grid = new Gtk.Grid ({
                row_homogeneous: false,
                row_spacing: 15});
            this._grid.attach (this._spinner, 0, 0, 1, 1);
            this._grid.attach (this._toggleButton, 0, 1, 1, 1);

note: (itstool) path: section/p
en: Here we create a simple <link xref="grid.js">Grid</link> to organize everything in, then attach the Spinner and ToggleButton to it.
el: Εδώ δημιουργούμε ένα απλό <link xref="grid.js">πλέγμα</link> για να οργανώσουμε μέσα του όλα, έπειτα επισυνάπτουμε τον μετρητή και το ToggleButton σε αυτό.

note: (itstool) path: section/code
en: 
            // Add the grid to the window
            this._window.add (this._grid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
el: 
            // Προσθήκη του πλέγματος στο παράθυρο
            this._window.add (this._grid);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών  γραφικών στοιχείων
            this._window.show_all();
        },

note: (itstool) path: section/p
en: Now we add the Grid to the Window, and tell the Window to show itself and its child widgets when the application is started.
el: Τώρα προσθέτουμε το πλέγμα στο παράθυρο και λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και τα θυγατρικά γραφικά στοιχεία όταν η εφαρμογή ξεκινά.

note: (itstool) path: section/title
en: Making something happen when the ToggleButton is toggled
el: Κάνοντας να συμβεί κάτι όταν το ToggleButton εναλλάσσεται

note: (itstool) path: section/code
en: 
        _onToggle: function() {
    
            // Start or stop the spinner
            if (this._toggleButton.get_active ())
                this._spinner.start ();
            else this._spinner.stop ();
    
        }
    
    });
el: 
        _onToggle: function() {
    
            // Έναρξη ή παύση του μετρητή
            if (this._toggleButton.get_active ())
                this._spinner.start ();
            else this._spinner.stop ();
    
        }
    
    });

note: (itstool) path: section/p
en: Whenever someone toggles the button, this function checks what its state is afterwards using get_active and starts or stops the spinner accordingly. We want it to spin only while the button is pressed in, so if get_active returns true we start the spinner. Otherwise, we tell it to stop.
el: Όποτε κάποιος εναλλάσσει το κουμπί, αυτή η συνάρτηση ελέγχει ποια είναι η κατάστασή του κατόπιν χρησιμοποιώντας get_active και ξεκινά ή σταματά τον μετρητή ανάλογα. Το θέλουμε μόνο να περιστραφεί ενώ το κουμπί είναι πατημένο, έτσι εάν η get_active επιστρέφει αληθές αρχίζουμε τον μετρητή. Αλλιώς, του λέμε να σταματήσει.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new ToggleButtonExample ();
    app.application.run (ARGV);
el: 
    // Εκτέλεση της εφαρμογής
    let app = new ToggleButtonExample ();
    app.application.run (ARGV);

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const ToggleButtonExample = new Lang.Class({
        Name: 'ToggleButton Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jstogglebutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
    
    
    
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 300,
                default_width: 300,
                border_width: 30,
                title: "ToggleButton Example"});
    
            // Create the spinner that the button stops and starts
            this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
    
            // Create the togglebutton that starts and stops the spinner
            this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
            this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));
    
            // Create a grid and put everything in it
            this._grid = new Gtk.Grid ({
                row_homogeneous: false,
                row_spacing: 15});
            this._grid.attach (this._spinner, 0, 0, 1, 1);
            this._grid.attach (this._toggleButton, 0, 1, 1, 1);
    
            // Add the grid to the window
            this._window.add (this._grid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
    
    
    
        _onToggle: function() {
    
            // Start or stop the spinner
            if (this._toggleButton.get_active ())
                this._spinner.start ();
            else this._spinner.stop ();
    
        }
    
    });
    
    // Run the application
    let app = new ToggleButtonExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const ToggleButtonExample = new Lang.Class({
        Name: 'ToggleButton Example',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jstogglebutton',
                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 ();
        },
    
    
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 300,
                default_width: 300,
                border_width: 30,
                title: "ToggleButton Example"});
    
            // Δημιουργία του μετρητή που το κουμπί σταματά και ξεκινά
            this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
    
            // Δημιουργία του κουμπιού εναλλαγής που ξεκινά και σταματά τον μετρητή
            this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
            this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));
    
            // Δημιουργία ενός πλέγματος και τοποθέτηση όλων μέσα του
            this._grid = new Gtk.Grid ({
                row_homogeneous: false,
                row_spacing: 15});
            this._grid.attach (this._spinner, 0, 0, 1, 1);
            this._grid.attach (this._toggleButton, 0, 1, 1, 1);
    
            // Προσθήκη του πλέγματος στο παράθυρο
            this._window.add (this._grid);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
    
    
        _onToggle: function() {
    
            // Έναρξη ή παύση του μετρητή
            if (this._toggleButton.get_active ())
                this._spinner.start ();
            else this._spinner.stop ();
    
        }
    
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new ToggleButtonExample ();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: ToggleButton (Python)
el: Κουμπί εναλλαγής (ToggleButton) (Python)

note: (itstool) path: section/title
en: Useful methods for a ToggleButton widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο κουμπιού εναλλαγής (ToggleButton)

note: (itstool) path: section/p
en: In line 22 the signal <code>"toggled"</code> is connected to the callback function <code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 22 το σήμα <code>"toggled"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>toggled_cb()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

[ctx: text]
note: (itstool) path: info/title
en: ToggleButton (Vala)
el: Κουμπί εναλλαγής (ToggleButton) (Vala)

[ctx: text]
note: (itstool) path: info/title
en: Toolbar (C)
el: Εργαλειοθήκη (C)

note: (itstool) path: info/desc
en: A bar of buttons
el: Γραμμή κουμπιών

note: (itstool) path: page/title
en: Toolbar
el: Εργαλειοθήκη

note: (itstool) path: page/p
en: Toolbar can contain either text or stock icons. In this sample we use stock icons. This example has fullscreen functionality.
el: Η εργαλειοθήκη μπορεί να περιέχει είτε κείμενο ή εικονίδια παρακαταθήκης. Σε αυτό το παράδειγμα χρησιμοποιούμε εικονίδια παρακαταθήκης. Αυτό το παράδειγμα έχει λειτουργικότητα πλήρους οθόνης.

note: (itstool) path: page/p
en: This example uses SimpleActions (window and app). App actions can easily be added to the app menu.
el: Αυτό το παράδειγμα χρησιμοποιεί SimpleActions (παράθυρο και εφαρμογή). Οι ενέργειες της εφαρμογής μπορούν εύκολα να προστεθούν στο μενού της εφαρμογής.

note: (itstool) path: page/code
en: 
    #include &lt;gtk/gtk.h&gt;
    
    /* Declare these two Toolbuttons, as they will be used in both the fullscreen
     * action callback as well as the activate function.
     */
    GtkToolItem *fullscreen_button;
    GtkToolItem *leavefullscreen_button;
    
    
    
    /* Callback function for the undo action */
    static void
    undo_callback (GSimpleAction *simple,
                   GVariant      *parameter,
                   gpointer       user_data)
    {
      g_print ("You clicked \"Undo\".\n");
    }
    
    
    
    /* Callback function for the fullscreen action */
    static void
    fullscreen_callback (GSimpleAction *simple,
                         GVariant      *parameter,
                         gpointer       user_data)
    {
      GdkWindow *window = gtk_widget_get_window (GTK_WIDGET (user_data));
    
      GdkWindowState current_state = gdk_window_get_state (window);
    
      /* If the window is currently in fullscreen mode */
      if ( (current_state &amp; GDK_WINDOW_STATE_FULLSCREEN) != 0)
        {
          /* Minimize the window and change to the fullscreen button */
          gdk_window_unfullscreen (window);
          gtk_widget_hide (GTK_WIDGET(leavefullscreen_button));
          gtk_widget_show (GTK_WIDGET(fullscreen_button));
        }
      else
        {
          /* Maximize the window, and change to the unfullscreen button */
          gdk_window_fullscreen (window);
          gtk_widget_hide (GTK_WIDGET (fullscreen_button));
          gtk_widget_show (GTK_WIDGET (leavefullscreen_button));
        }
    }
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      /* Initialize variables */
      GtkWidget *window;
      GtkWidget *grid;
      GtkWidget *toolbar;
    
      GtkToolItem *new_button;
      GtkToolItem *open_button;
      GtkToolItem *undo_button;
    
      GtkStyleContext *style_context;
    
      GSimpleAction *undo_action;
      GSimpleAction *fullscreen_action;
      GSimpleAction *leavefullscreen_action;
    
      /* Create a window with a title and a default size */
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Toolbar Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 400, 200);
    
      /* Here we begin to create the toolbar */
      toolbar = gtk_toolbar_new ();
      /* Set the toolbar to be the primary toolbar of the application */
      style_context = gtk_widget_get_style_context (toolbar);
      gtk_style_context_add_class (style_context, GTK_STYLE_CLASS_PRIMARY_TOOLBAR);
    
      /* Create a button for the "new" action, with a stock image */
      new_button = gtk_tool_button_new_from_stock (GTK_STOCK_NEW);
      /* Show the "new" button's label */
      gtk_tool_item_set_is_important (new_button, TRUE);
      /* Insert the button in the desired position within the toolbar */
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), new_button, 0);
      /* Show the button */
      gtk_widget_show (GTK_WIDGET (new_button));
      /* Set the action name for the "new" action. We use "app.new" to
       * indicate that the action controls the application.
       */
      gtk_actionable_set_action_name (GTK_ACTIONABLE (new_button), "app.new");
    
      /* Repeat the same steps for the "open" action */
      open_button = gtk_tool_button_new_from_stock (GTK_STOCK_OPEN);
      gtk_tool_item_set_is_important (open_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), open_button, 1);
      gtk_widget_show (GTK_WIDGET (open_button));
      gtk_actionable_set_action_name (GTK_ACTIONABLE (open_button), "app.open");
    
      /* Repeat the same steps for the "undo" action */
      undo_button = gtk_tool_button_new_from_stock (GTK_STOCK_UNDO);
      gtk_tool_item_set_is_important (undo_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), undo_button, 2);
      gtk_widget_show (GTK_WIDGET (undo_button));
      /* In this case, we use "win.undo" to indicate that
       * the action controls only the window
       */
      gtk_actionable_set_action_name (GTK_ACTIONABLE (undo_button), "win.undo");
    
      /* Repeat the same steps for the "fullscreen" action */
      fullscreen_button = gtk_tool_button_new_from_stock (GTK_STOCK_FULLSCREEN);
      gtk_tool_item_set_is_important (fullscreen_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), fullscreen_button, 3);
      gtk_widget_show (GTK_WIDGET (fullscreen_button));
      gtk_actionable_set_action_name (GTK_ACTIONABLE (fullscreen_button),
                                      "win.fullscreen");
    
      /*Repeat the same steps for the "leavefullscreen" action */
      leavefullscreen_button = gtk_tool_button_new_from_stock (GTK_STOCK_LEAVE_FULLSCREEN);
      gtk_tool_item_set_is_important (leavefullscreen_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), leavefullscreen_button, 3);
      /* The only difference here is that we don't show the leavefullscreen button,
       * as it will later replace the fullscreen button.
       */
      gtk_actionable_set_action_name (GTK_ACTIONABLE (leavefullscreen_button),
                                      "win.leavefullscreen");
    
      /* Once we've created the bare-bones of the toolbar, we make
       * sure it has enough horizontal space.
       */
      gtk_widget_set_hexpand (toolbar, TRUE);
      gtk_widget_show (toolbar);
    
      /* Attach the toolbar to the grid and add it to the overall window */
      grid = gtk_grid_new ();
      gtk_grid_attach (GTK_GRID (grid), toolbar, 0, 0, 1, 1);
      gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (grid));
      gtk_widget_show (GTK_WIDGET (grid));
    
      /* Use the action names to create the actions that control the window, and
       * connect them to the appropriate callbackfunctions.
       */
      undo_action = g_simple_action_new ("undo", NULL);
      g_signal_connect (undo_action, "activate", G_CALLBACK (undo_callback),
                        GTK_WINDOW (window));
      g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (undo_action));
    
      fullscreen_action = g_simple_action_new ("fullscreen", NULL);
      g_signal_connect (fullscreen_action, "activate", G_CALLBACK (fullscreen_callback),
                        GTK_WINDOW (window));
      g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (fullscreen_action));
    
      leavefullscreen_action = g_simple_action_new ("leavefullscreen", NULL);
      g_signal_connect (leavefullscreen_action, "activate", G_CALLBACK (fullscreen_callback),
                        GTK_WINDOW (window));
      g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (leavefullscreen_action));
    
      gtk_widget_show (window);
    }
    
    
    
    /* Callback function for the new action */
    static void
    new_callback (GSimpleAction *simple,
                  GVariant      *parameter,
                  gpointer       user_data)
    {
      g_print ("You clicked \"New\".\n");
    }
    
    
    
    /* Callback function for the open action */
    static void
    open_callback (GSimpleAction *simple,
                   GVariant      *parameter,
                   gpointer       user_data)
    {
      g_print ("You clicked \"Open\".\n");
    }
    
    
    
    /* In this function, we create the actions in which control the window, and
     * connect their signals to the appropriate callback function.
     */
    static void
    startup (GApplication *app,
             gpointer      user_data)
    {
      GSimpleAction *new_action;
      GSimpleAction *open_action;
    
      new_action = g_simple_action_new ("new", NULL);
      g_signal_connect (new_action, "activate", G_CALLBACK (new_callback), app);
      g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (new_action));
    
      open_action = g_simple_action_new ("open", NULL);
      g_signal_connect (open_action, "activate", G_CALLBACK (open_callback), app);
      g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (open_action));
    }
    
    
    
    /* Startup function for the application */
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }
el: 
    #include &lt;gtk/gtk.h&gt;
    
    /* Δήλωση αυτών των δύο κουμπιών εργαλείων, καθώς θα χρησιμοποιηθούν και στην
     * ενέργεια επανάκλησης πλήρους οθόνης καθώς και στη συνάρτηση ενεργοποίησης.
     */
    GtkToolItem *fullscreen_button;
    GtkToolItem *leavefullscreen_button;
    
    
    
    /* Η συνάρτηση ανάκλησης για την ενέργεια της αναίρεσης */
    static void
    undo_callback (GSimpleAction *simple,
                   GVariant      *parameter,
                   gpointer       user_data)
    {
      g_print ("You clicked \"Undo\".\n");
    }
    
    
    
    /* Η συνάρτηση επανάκλησης για την ενέργεια πλήρους οθόνης */
    static void
    fullscreen_callback (GSimpleAction *simple,
                         GVariant      *parameter,
                         gpointer       user_data)
    {
      GdkWindow *window = gtk_widget_get_window (GTK_WIDGET (user_data));
    
      GdkWindowState current_state = gdk_window_get_state (window);
    
      /* Αν το παράθυρο είναι προς το παρόν σε κατάσταση πλήρους οθόνης */
      if ( (current_state &amp; GDK_WINDOW_STATE_FULLSCREEN) != 0)
        {
          /* Ελαχιστοποίηση του παραθύρου και αλλαγή στο κουμπί πλήρους οθόνης */
          gdk_window_unfullscreen (window);
          gtk_widget_hide (GTK_WIDGET(leavefullscreen_button));
          gtk_widget_show (GTK_WIDGET(fullscreen_button));
        }
      else
        {
          /* Μεγιστοποίηση του παραθύρου, και αλλαγή σε κουμπί μη πλήρους οθόνης */
          gdk_window_fullscreen (window);
          gtk_widget_hide (GTK_WIDGET (fullscreen_button));
          gtk_widget_show (GTK_WIDGET (leavefullscreen_button));
        }
    }
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      /* Αρχικοποίηση μεταβλητών */
      GtkWidget *window;
      GtkWidget *grid;
      GtkWidget *toolbar;
    
      GtkToolItem *new_button;
      GtkToolItem *open_button;
      GtkToolItem *undo_button;
    
      GtkStyleContext *style_context;
    
      GSimpleAction *undo_action;
      GSimpleAction *fullscreen_action;
      GSimpleAction *leavefullscreen_action;
    
      /* Δημιουργία παραθύρου με τίτλο και προεπιλεγμένο μέγεθος */
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Toolbar Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 400, 200);
    
      /* Εδώ αρχίζει η δημιουργία της εργαλειοθήκης */
      toolbar = gtk_toolbar_new ();
      /* Ορισμός της εργαλειοθήκης να είναι η πρωτογενής εργαλειοθήκη της εφαρμογής */
      style_context = gtk_widget_get_style_context (toolbar);
      gtk_style_context_add_class (style_context, GTK_STYLE_CLASS_PRIMARY_TOOLBAR);
    
      /* Δημιουργία κουμπιού για την ενέργεια "new", με μια έτοιμη εικόνα */
      new_button = gtk_tool_button_new_from_stock (GTK_STOCK_NEW);
      /* Εμφάνιση της ετικέτας του κουμπιού "new" */
      gtk_tool_item_set_is_important (new_button, TRUE);
      /* Εισαγωγή του κουμπιού στην επιθυμητή θέση μες την εργαλειοθήκη */
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), new_button, 0);
      /* Εμφάνιση του κουμπιού */
      gtk_widget_show (GTK_WIDGET (new_button));
      /* Ορισμός του ονόματος ενέργειας για την ενέργεια "new". Χρήση του "app.new"
       * για να δείξει ότι η ενέργεια ελέγχει την εφαρμογή.
       */
      gtk_actionable_set_action_name (GTK_ACTIONABLE (new_button), "app.new");
    
      /* Επανάληψη των ίδιων βημάτων για την ενέργεια "open" */
      open_button = gtk_tool_button_new_from_stock (GTK_STOCK_OPEN);
      gtk_tool_item_set_is_important (open_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), open_button, 1);
      gtk_widget_show (GTK_WIDGET (open_button));
      gtk_actionable_set_action_name (GTK_ACTIONABLE (open_button), "app.open");
    
      /* Επανάληψη των ίδιων βημάτων για την ενέργεια "undo" */
      undo_button = gtk_tool_button_new_from_stock (GTK_STOCK_UNDO);
      gtk_tool_item_set_is_important (undo_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), undo_button, 2);
      gtk_widget_show (GTK_WIDGET (undo_button));
      /* Σε αυτήν την περίπτωση, χρησιμοποιείται "win.undo" για να δείξει ότι
       * η ενέργεια ελέγχει μόνο το παράθυρο
       */
      gtk_actionable_set_action_name (GTK_ACTIONABLE (undo_button), "win.undo");
    
      /* Επανάληψη των ίδιων βημάτων για την ενέργεια "fullscreen" */
      fullscreen_button = gtk_tool_button_new_from_stock (GTK_STOCK_FULLSCREEN);
      gtk_tool_item_set_is_important (fullscreen_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), fullscreen_button, 3);
      gtk_widget_show (GTK_WIDGET (fullscreen_button));
      gtk_actionable_set_action_name (GTK_ACTIONABLE (fullscreen_button),
                                      "win.fullscreen");
    
      /*Επανάληψη των ίδιων βημάτων για την ενέργεια "leavefullscreen" */
      leavefullscreen_button = gtk_tool_button_new_from_stock (GTK_STOCK_LEAVE_FULLSCREEN);
      gtk_tool_item_set_is_important (leavefullscreen_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), leavefullscreen_button, 3);
      /* Η μόνη διαφορά εδώ είναι ότι δεν εμφανίζουμε το κουμπί εξόδου από την πλήρη οθόνη,
       * επειδή θα αντικαταστήσει αργότερα το κουμπί πλήρους οθόνης.
       */
      gtk_actionable_set_action_name (GTK_ACTIONABLE (leavefullscreen_button),
                                      "win.leavefullscreen");
    
      /* Μόλις δημιουργήσουμε τον σκελετό της εργαλειοθήκης, εξασφαλίζουμε ότι
       * έχει αρκετό οριζόντιο χώρο.
       */
      gtk_widget_set_hexpand (toolbar, TRUE);
      gtk_widget_show (toolbar);
    
      /* Προσάρτηση της εργαλειοθήκης στο πλέγμα και προσθήκη της στο συνολικό παράθυρο */
      grid = gtk_grid_new ();
      gtk_grid_attach (GTK_GRID (grid), toolbar, 0, 0, 1, 1);
      gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (grid));
      gtk_widget_show (GTK_WIDGET (grid));
    
      /* Χρησιμοποιήστε τα ονόματα ενεργειών για τη δημιουργία των ενεργειών που ελέγουν
       * το παράθυρο και σύνδεσή τους με τις κατάλληλες συναρτήσεις επανάκλησης.
       */
      undo_action = g_simple_action_new ("undo", NULL);
      g_signal_connect (undo_action, "activate", G_CALLBACK (undo_callback),
                        GTK_WINDOW (window));
      g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (undo_action));
    
      fullscreen_action = g_simple_action_new ("fullscreen", NULL);
      g_signal_connect (fullscreen_action, "activate", G_CALLBACK (fullscreen_callback),
                        GTK_WINDOW (window));
      g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (fullscreen_action));
    
      leavefullscreen_action = g_simple_action_new ("leavefullscreen", NULL);
      g_signal_connect (leavefullscreen_action, "activate", G_CALLBACK (fullscreen_callback),
                        GTK_WINDOW (window));
      g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (leavefullscreen_action));
    
      gtk_widget_show (window);
    }
    
    
    
    /* Η συνάρτηση επανάκλησης για την νέα ενέργεια */
    static void
    new_callback (GSimpleAction *simple,
                  GVariant      *parameter,
                  gpointer       user_data)
    {
      g_print ("You clicked \"New\".\n");
    }
    
    
    
    /* Η συνάρτηση επανάκλησης για την ενέργεια άνοιγμα */
    static void
    open_callback (GSimpleAction *simple,
                   GVariant      *parameter,
                   gpointer       user_data)
    {
      g_print ("You clicked \"Open\".\n");
    }
    
    
    
    /* Σε αυτήν την συνάρτηση, δημιουργούμε τις ενέργειες που ελέγχουν το παράθυρο
     * και συνδέουν τα σήματά τους με την κατάλληλη συνάρτηση επανάκλησης.
     */
    static void
    startup (GApplication *app,
             gpointer      user_data)
    {
      GSimpleAction *new_action;
      GSimpleAction *open_action;
    
      new_action = g_simple_action_new ("new", NULL);
      g_signal_connect (new_action, "activate", G_CALLBACK (new_callback), app);
      g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (new_action));
    
      open_action = g_simple_action_new ("open", NULL);
      g_signal_connect (open_action, "activate", G_CALLBACK (open_callback), app);
      g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (open_action));
    }
    
    
    
    /* Η συνάρτηση έναρξης για την εφαρμογή */
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: Toolbar (JavaScript)
el: Εργαλειοθήκη (JavaScript)

note: (itstool) path: info/desc
en: A bar of tools
el: Γραμμή εργαλείων

note: (itstool) path: page/p
en: This example uses SimpleActions (window and app). App actions can easily be added the the app menu.
el: Αυτό το παράδειγμα χρησιμοποιεί SimpleActions (παράθυρο και εφαρμογή). Οι ενέργειες της εφαρμογής μπορούν εύκολα να προστεθούν στο μενού της εφαρμογής.

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    const Gdk = imports.gi.Gdk;
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const Application = new Lang.Class({
        Name: 'Application',
    
        //create the application
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.myapp',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
           //connect to 'activate' and 'startup' signals to the callback functions
           this.application.connect('activate', Lang.bind(this, this._onActivate));
           this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        //create the UI (in this case it's just the ApplicationWindow
        _buildUI: function() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       window_position: Gtk.WindowPosition.CENTER,
                                                       title: "Toolbar Example",
                                                       default_height: 200,
                                                       default_width: 400 });
    
            this._grid = new Gtk.Grid();
            this._window.add(this._grid);
            this._grid.show();
    
            this._createToolbar();
            this._toolbar.set_hexpand(true);
            this._grid.attach(this._toolbar, 0, 0, 1, 1);
    
            //show the  toolbar and window
            this._toolbar.show();
            this._window.show();
        },
    
        //callback function for 'activate' signal
        _onActivate: function() {
            this._window.present();
        },
    
        //callback function for 'startup' signal
        _onStartup: function() {
            this._initMenus();
            this._buildUI();
        },
    
        //create the toolbar, its toolbuttons and their actions
        _createToolbar: function() {
    
            this._toolbar = new Gtk.Toolbar();
            this._toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);
    
            //create the "New" ToolButton and its SimpleAction.
            //Using actions allows you to add them to the app menu
            //without duplicating code.
            let newAction = new Gio.SimpleAction({ name: 'new'});
            newAction.connect('activate', Lang.bind(this,
                function() {
                    this._newCB();
                }));
            this.application.add_action(newAction);//note: this action is added to the app
    
            this._newButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);
            this._newButton.is_important = true;
            this._toolbar.add(this._newButton);
            this._newButton.show();
            this._newButton.action_name = "app.new";
    
            //create the "Open" ToolButton and its SimpleAction
            let openAction = new Gio.SimpleAction({ name: 'open'});
            openAction.connect('activate', Lang.bind(this,
                function() {
                    this._openCB();
                }));
            this.application.add_action(openAction);
    
            this._openButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);
            this._openButton.is_important = true;
            this._toolbar.add(this._openButton);
            this._openButton.show();
            this._openButton.action_name = "app.open";
    
            //create the "Undo" ToolButton and its SimpleAction
            let undoAction = new Gio.SimpleAction({ name: 'undo'});
            undoAction.connect('activate', Lang.bind (this,
                function() {
                    this._undoCB();
                }));
            this._window.add_action(undoAction);//note this action is added to the window
    
            this._undoButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);
            this._undoButton.is_important = true;
            this._toolbar.add(this._undoButton);
            this._undoButton.show();
            this._undoButton.action_name = "win.undo";
    
            //create the "Fullscreen" ToolButton and its SimpleAction
            let fullscreenToggleAction = new Gio.SimpleAction ({ name: 'fullscreenToggle' });
            fullscreenToggleAction.connect ('activate', Lang.bind (this,
                function () {
                    this._fullscreenToggleCB();
                }));
            this._window.add_action(fullscreenToggleAction);
    
            this._fullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);
            this._fullscreenButton.is_important = true;
            this._toolbar.add(this._fullscreenButton);
            this._fullscreenButton.show();
            this._fullscreenButton.action_name = "win.fullscreenToggle";
    
            //create the "leaveFullscreen" ToolButton, and set the action name to "win.fullscreenToggle"
            this._leaveFullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_LEAVE_FULLSCREEN);
            this._leaveFullscreenButton.is_important = true;
            this._toolbar.add(this._leaveFullscreenButton);
            this._leaveFullscreenButton.action_name = "win.fullscreenToggle";
        },
    
        _initMenus: function () {
            let menu = new Gio.Menu();
            menu.append("New", 'app.new');
            menu.append("Open", 'app.open');
            menu.append("Quit", 'app.quit');
    
            this.application.set_app_menu(menu);
    
            let quitAction = new Gio.SimpleAction({name: 'quit' });
            quitAction.connect('activate', Lang.bind(this,
                function() {
                    this._window.destroy();
                }));
            this.application.add_action(quitAction);
        },
    
        _newCB: function() {
            print("You clicked 'New'.");
        },
    
        _openCB: function() {
            print("You clicked 'Open'.");
        },
    
        _undoCB:function () {
            print ("You clicked 'Undo'.");
        },
    
        _fullscreenToggleCB: function() {
            if ((this._window.get_window().get_state() &amp; Gdk.WindowState.FULLSCREEN) != 0 ) {
                  this._window.unfullscreen();
                  this._leaveFullscreenButton.hide();
                  this._fullscreenButton.show();
            }
            else {
                 this._window.fullscreen();
                 this._fullscreenButton.hide();
                 this._leaveFullscreenButton.show();
            }
        }
    });
    
    //run the application
    let app = new Application();
    app.application.run(ARGV);
el: #!/usr/bin/gjs
    
    const Gdk = imports.gi.Gdk;
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const Application = new Lang.Class({
        Name: 'Application',
    
        //Δημιουργία της εφαρμογής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.myapp',
                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));
        },
    
        //Δημιουργία της διεπαφής χρήστη (σε αυτήν την περίπτωση είναι απλά το παράθυρο της εφαρμογής)
        _buildUI: function() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       window_position: Gtk.WindowPosition.CENTER,
                                                       title: "Toolbar Example",
                                                       default_height: 200,
                                                       default_width: 400 });
    
            this._grid = new Gtk.Grid();
            this._window.add(this._grid);
            this._grid.show();
    
            this._createToolbar();
            this._toolbar.set_hexpand(true);
            this._grid.attach(this._toolbar, 0, 0, 1, 1);
    
            //Εμφάνιση της εργαλειοθήκης και του παραθύρου
            this._toolbar.show();
            this._window.show();
        },
    
        //Η συνάρτηση επανάκλησης για το σήμα 'activate'
        _onActivate: function() {
            this._window.present();
        },
    
        //Η συνάρτηση επανάκλησης για το σήμα 'startup'
        _onStartup: function() {
            this._initMenus();
            this._buildUI();
        },
    
        //Δημιουργία της εργαλειοθήκης, των κουμπιών εργαλείων της και των ενεργειών τους
        _createToolbar: function() {
    
            this._toolbar = new Gtk.Toolbar();
            this._toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);
    
            //Δημιουργία του κουμπιού εργαλείου "New" και της απλής του ενέργειας.
            //Η χρήση ενεργειών επιτρέπει την προσθήκη τους στο μενού εφαρμογών
            //χωρίς διπλασιασμό του κώδικα.
            let newAction = new Gio.SimpleAction({ name: 'new'});
            newAction.connect('activate', Lang.bind(this,
                function() {
                    this._newCB();
                }));
            this.application.add_action(newAction);//σημείωση: αυτή η ενέργεια προστίθεται στην εφαρμογή
    
            this._newButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);
            this._newButton.is_important = true;
            this._toolbar.add(this._newButton);
            this._newButton.show();
            this._newButton.action_name = "app.new";
    
            //Δημιουργία του κουμπιού εργαλείου "Open" και της απλής του ενέργειας
            let openAction = new Gio.SimpleAction({ name: 'open'});
            openAction.connect('activate', Lang.bind(this,
                function() {
                    this._openCB();
                }));
            this.application.add_action(openAction);
    
            this._openButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);
            this._openButton.is_important = true;
            this._toolbar.add(this._openButton);
            this._openButton.show();
            this._openButton.action_name = "app.open";
    
            //Δημιουργία του κουμπιού εργαλείου "Undo" και της απλής του ενέργειας
            let undoAction = new Gio.SimpleAction({ name: 'undo'});
            undoAction.connect('activate', Lang.bind (this,
                function() {
                    this._undoCB();
                }));
            this._window.add_action(undoAction);//Σημειώστε ότι αυτή η απλή ενέργεια προστίθεται στο παράθυρο
    
            this._undoButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);
            this._undoButton.is_important = true;
            this._toolbar.add(this._undoButton);
            this._undoButton.show();
            this._undoButton.action_name = "win.undo";
    
            //Δημιουργία του κουμπιού εργαλείου  "Fullscreen" και της απλής του ενέργειας 
            let fullscreenToggleAction = new Gio.SimpleAction ({ name: 'fullscreenToggle' });
            fullscreenToggleAction.connect ('activate', Lang.bind (this,
                function () {
                    this._fullscreenToggleCB();
                }));
            this._window.add_action(fullscreenToggleAction);
    
            this._fullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);
            this._fullscreenButton.is_important = true;
            this._toolbar.add(this._fullscreenButton);
            this._fullscreenButton.show();
            this._fullscreenButton.action_name = "win.fullscreenToggle";
    
            //Δημιουργία του κουμπιού εργαλείου  "leaveFullscreen" και ορισμός του ονόματος ενέργειας σε "win.fullscreenToggle"
            this._leaveFullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_LEAVE_FULLSCREEN);
            this._leaveFullscreenButton.is_important = true;
            this._toolbar.add(this._leaveFullscreenButton);
            this._leaveFullscreenButton.action_name = "win.fullscreenToggle";
        },
    
        _initMenus: function () {
            let menu = new Gio.Menu();
            menu.append("New", 'app.new');
            menu.append("Open", 'app.open');
            menu.append("Quit", 'app.quit');
    
            this.application.set_app_menu(menu);
    
            let quitAction = new Gio.SimpleAction({name: 'quit' });
            quitAction.connect('activate', Lang.bind(this,
                function() {
                    this._window.destroy();
                }));
            this.application.add_action(quitAction);
        },
    
        _newCB: function() {
            print("You clicked 'New'.");
        },
    
        _openCB: function() {
            print("You clicked 'Open'.");
        },
    
        _undoCB:function () {
            print ("You clicked 'Undo'.");
        },
    
        _fullscreenToggleCB: function() {
            if ((this._window.get_window().get_state() &amp; Gdk.WindowState.FULLSCREEN) != 0 ) {
                  this._window.unfullscreen();
                  this._leaveFullscreenButton.hide();
                  this._fullscreenButton.show();
            }
            else {
                 this._window.fullscreen();
                 this._fullscreenButton.hide();
                 this._leaveFullscreenButton.show();
            }
        }
    });
    
    //Εκτέλεση της εφαρμογής
    let app = new Application();
    app.application.run(ARGV);

[ctx: text]
note: (itstool) path: info/title
en: Toolbar (Python)
el: Εργαλειοθήκη (Python)

note: (itstool) path: info/desc
en: A bar of buttons and other widgets
el: Μια γραμμή κουμπιών και άλλα γραφικά στοιχεία

note: (itstool) path: page/p
en: An example of toolbar with buttons (from stock icons).
el: Παράδειγμα εργαλειοθήκης με κουμπιά (από εικονίδια παρακαταθήκης).

note: (itstool) path: section/title
en: Useful methods for a Toolbar widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο εργαλειοθήκης

note: (itstool) path: section/p
en: In line 32 the signal <code>"activate"</code> from the action <code>undo_action</code> is connected to the callback function <code>undo_callback()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 32 το σήμα <code>"activate"</code> από την ενέργεια <code>undo_action</code> συνδέεται με τη συνάρτηση επανάκλησης <code>undo_callback()</code> χρησιμοποιώντας <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

note: (itstool) path: item/p
en: Use <code>insert(tool_item, position)</code> to insert the <code>tool_item</code> at <code>position</code>. If <code>position</code> is negative, the item is appended at the end of the toolbar.
el: Χρησιμοποιήστε <code>insert(tool_item, position)</code> για την εισαγωγή του <code>tool_item</code> στη <code>position</code>. Εάν η <code>position</code> είναι αρνητική, το στοιχείο προσαρτάται στο τέλος της εργαλειοθήκης.

note: (itstool) path: item/p
en: <code>get_item_index(tool_item)</code> retrieves the position of <code>tool_item</code> on the toolbar.
el: Η <code>get_item_index(tool_item)</code> ανακτά τη θέση του <code>tool_item</code> στην εργαλειοθήκη.

note: (itstool) path: item/p
en: <code>get_n_items()</code> returns the number of items on the toolbar; <code>get_nth_item(position)</code> returns the item in position <code>position</code>.
el: Η <code>get_n_items()</code> επιστρέφει τον αριθμό των στοιχείων της εργαλειοθήκης· η <code>get_nth_item(position)</code> επιστρέφει το στοιχείο στη θέση <code>position</code>.

note: (itstool) path: item/p
en: If the toolbar does not have room for all the menu items, and <code>set_show_arrow(True)</code>, the items that do not have room are shown through an overflow menu.
el: Εάν η εργαλειοθήκη δεν έχει χώρο για όλα τα στοιχεία μενού και τον <code>set_show_arrow(True)</code>, τα στοιχεία που δεν έχουν χώρο εμφανίζονται μέσα από ένα μενού υπερχείλισης.

note: (itstool) path: item/p
en: <code>set_icon_size(icon_size)</code> sets the size of icons in the toolbar; <code>icon_size</code> can be one of <code>Gtk.IconSize.INVALID, Gtk.IconSize.MENU, Gtk.IconSize.SMALL_TOOLBAR, Gtk.IconSize.LARGE_TOOLBAR, Gtk.IconSize.BUTTON, Gtk.IconSize.DND, Gtk.IconSize.DIALOG</code>. This should be used only for special-purpose toolbars, normal application toolbars should respect user preferences for the size of icons. <code>unset_icon_size()</code> unsets the preferences set with <code>set_icon_size(icon_size)</code>, so that user preferences are used to determine the icon size.
el: Ο <code>set_icon_size(icon_size)</code> ρυθμίζει το μέγεθος των εικονιδίων στην εργαλειοθήκη· το <code>icon_size</code> can be one of <code>Gtk.IconSize.INVALID, Gtk.IconSize.MENU, Gtk.IconSize.SMALL_TOOLBAR, Gtk.IconSize.LARGE_TOOLBAR, Gtk.IconSize.BUTTON, Gtk.IconSize.DND, Gtk.IconSize.DIALOG</code>. Αυτό πρέπει να χρησιμοποιηθεί μόνο για εργαλειοθήκες ειδικού σκοπού, εργαλειοθήκες κανονικής εφαρμογής πρέπει να σέβονται τις προτιμήσεις του χρήστη για το μέγεθος των εικονιδίων. Η <code>unset_icon_size()</code> αναιρεί τις προτιμήσεις που ρυθμίστηκαν με <code>unset_icon_size()</code>, έτσι ώστε οι προτιμήσεις χρήστη να χρησιμοποιηθούν για τον προσδιορισμό του μεγέθους του εικονιδίου.

note: (itstool) path: item/p
en: <code>set_style(style)</code>, where <code>style</code> is one of <code>Gtk.ToolbarStyle.ICONS, Gtk.ToolbarStyle.TEXT, Gtk.ToolbarStyle.BOTH, Gtk.ToolbarStyle.BOTH_HORIZ</code>, sets if the toolbar shows only icons, only text, or both (vertically stacked or alongside each other). To let user preferences determine the toolbar style, and unset a toolbar style so set, use <code>unset_style()</code>.
el: Ο <code>set_style(style)</code>, όπου <code>style</code> είναι ένα από τα <code>Gtk.ToolbarStyle.ICONS, Gtk.ToolbarStyle.TEXT, Gtk.ToolbarStyle.BOTH, Gtk.ToolbarStyle.BOTH_HORIZ</code>, ρυθμίζει εάν η εργαλειοθήκη εμφανίζει μόνο εικονίδια, μόνο κείμενο ή και τα δύο (στοιβαγμένα κάθετα ή δίπλα μεταξύ τους). Για να επιτρέψετε στις προτιμήσεις του χρήστη να καθορίσουν το ύφος της εργαλειοθήκης και να αναιρέσετε ένα ύφος εργαλειοθήκης που ρυθμίστηκε έτσι, χρησιμοποιήστε <code>unset_style()</code>.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gdk3/unstable/gdk3-Event-Structures.html#GdkEventWindowState">Event Structures</link>
el: <link href="http://developer.gnome.org/gdk3/unstable/gdk3-Event-Structures.html#GdkEventWindowState">Δομή γεγονότων</link>

[ctx: text]
note: (itstool) path: info/title
en: Toolbar (Vala)
el: Εργαλειοθήκη (Vala)

[ctx: text]
note: (itstool) path: info/title
en: Toolbar created using Glade (Python)
el: Η εργαλειοθήκη δημιουργήθηκε χρησιμοποιώντας Glade (Python)

note: (itstool) path: page/title
en: Toolbar created using Glade
el: Η γραμμή εργαλείων δημιουργήθηκε χρησιμοποιώντας Glade

note: (itstool) path: page/p
en: This example is similar to <link xref="toolbar.py"/>, except we use Glade to create the toolbar in an XML .ui file.
el: Αυτό το παράδειγμα είναι παρόμοιο με <link xref="toolbar.py"/>, εκτός από τη χρήση Glade για δημιουργία της εργαλειοθήκης σε ένα αρχείο XML .ui.

note: (itstool) path: section/title
en: Creating the toolbar with Glade
el: Δημιουργία της εργαλειοθήκης με Glade

note: (itstool) path: section/p (itstool) path: page/p
en: To create the toolbar using the <link href="http://glade.gnome.org/">Glade Interface Designer</link>:
el: Για δημιουργία της γραμμής εργαλείων χρησιμοποιώντας το <link href="http://glade.gnome.org/">σχεδιαστή διεπαφής Glade</link>:

note: (itstool) path: item/p
en: Open Glade, and save the file as <file>toolbar_builder.ui</file>
el: Άνοιγμα του Glade και αποθήκευση του αρχείου ως <file>toolbar_builder.ui</file>

note: (itstool) path: item/p
en: <media type="image" src="media/glade_ui.png" width="900"> Screenshot of Glade ui </media>
el: <media type="image" src="media/glade_ui.png" width="900"> Στιγμιότυπο διεπαφής του Glade </media>

note: (itstool) path: item/p
en: Under <gui>Containers</gui> on the left hand side, right click on the toolbar icon and select <gui>Add widget as toplevel</gui>.
el: Στο <gui>περιέκτες</gui> στα αριστερά, δεξί πάτημα στην εργαλειοθήκη και επιλογή <gui>προσθήκη γραφικού στοιχείου ως ανώτατου επιπέδου</gui>.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_select_toolbar.png"> Screenshot of toolbar icon in Glade ui </media>
el: <media type="image" src="media/glade_select_toolbar.png"> Στιγμιότυπο του εικονιδίου εργαλειοθήκης στο Glade ui </media>

note: (itstool) path: item/p
en: Under the <gui>General</gui> tab on the bottom right, change the <gui>Name</gui> to <input>toolbar</input> and <gui>Show Arrow</gui> to <gui>No</gui>.
el: Στην καρτέλα <gui>γενικά</gui> στα κάτω δεξιά, αλλαγή του <gui>ονόματος</gui> σε <input>γραμμή εργαλείων</input> και <gui>εμφάνιση βέλους</gui> σε <gui>όχι</gui>.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_toolbar_general.png"> Screenshot of General tab </media>
el: <media type="image" src="media/glade_toolbar_general.png"> Στιγμιότυπο της καρτέλας Γενικά</media>

note: (itstool) path: item/p
en: Under the <gui>Common</gui> tab, set <gui>Horizontal Expand</gui> to <gui>Yes</gui>.
el: Στην καρτέλα <gui>κοινά</gui>, ορίστε <gui>οριζόντια επέκταση</gui> σε <gui>ναι</gui>.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_toolbar_common.png"> Screenshot of Common tab </media>
el: <media type="image" src="media/glade_toolbar_common.png"> Στιγμιότυπο της καρτέλας Κοινά </media>

note: (itstool) path: item/p
en: Right click on the toolbar in the top right and select <gui>Edit</gui>. The <gui>Tool Bar Editor</gui> window will appear.
el: Δεξί κλικ στη γραμμή εργαλείων στα πάνω δεξιά και επιλέξτε <gui>επεξεργασία</gui>. Το παράθυρο <gui>επεξεργαστής γραμμής εργαλείων</gui> θα εμφανιστεί.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_toolbar_edit.png"> Screenshot of where to right click to edit toolbar. </media>
el: <media type="image" src="media/glade_toolbar_edit.png"> Στιγμιότυπο πού να δεξιοπατήσετε για να επεξεργαστείτε την εργαλειοθήκη. </media>

note: (itstool) path: item/p
en: We want to add 5 ToolButtons: New, Open, Undo, Fullscreen and Leave Fullscreen. First, we will add the New ToolButton.
el: Θέλουμε να προσθέσουμε 5 κουμπιά εργαλείων: νέο, άνοιγμα, αναίρεση, πλήρης οθόνη και εγκατάλειψη πλήρους οθόνης. Πρώτα, θα προσθέσουμε το νέο ToolButton.

note: (itstool) path: item/p
en: Under <gui>Hierarchy</gui> tab, click <gui>Add</gui>.
el: Στην καρτέλα <gui>ιεραρχία</gui>, πατήστε <gui>προσθήκη</gui>.

note: (itstool) path: item/p
en: Change the name of the ToolItem to <input>new_button</input>.
el: Αλλαγή του ονόματος του στοιχείου εργαλείου σε <input>new_button</input>.

note: (itstool) path: item/p
en: Scroll down and set <gui>Is important</gui> to <gui>Yes</gui>. This will cause the label of the ToolButton to be shown, when you view the toolbar.
el: Κύλιση προς τα κάτω και ρύθμιση του <gui>είναι σημαντικό</gui> σε <gui>ναι</gui>. Αυτό θα προκαλέσει την ετικέτα του ToolButton να εμφανιστεί, όταν προβάλετε τη γραμμή εργαλείων.

note: (itstool) path: item/p
en: Enter the <gui>action name</gui>: <input>app.new</input>.
el: Εισάγετε το <gui>όνομα ενέργειας</gui>: <input>app.new</input>.

note: (itstool) path: item/p
en: Change the <gui>Label</gui> to <input>New</input>.
el: Αλλαγή του <gui>ετικέτα</gui> σε <input>New</input>.

note: (itstool) path: item/p
en: Select the <gui>New</gui> Stock Id from the drop down menu, or type <input>gtk-new</input>.
el: Επιλογή του <gui>νέου</gui> αναγνωριστικού παρακαταθήκης από το πτυσσόμενο μενού, ή πληκτρολογήστε <input>gtk-new</input>.

note: (itstool) path: item/p
en: Repeat the above steps for the remaining ToolButtons, with the following properties:
el: Επανάληψη των παραπάνω βημάτων για τα υπολειπόμενα κουμπιά εργαλείων (ToolButtons), με τις παρακάτω ιδιότητες:

note: (itstool) path: td/p
en: Is important
el: Είναι σημαντικό

note: (itstool) path: td/p
en: Action name
el: Όνομα ενέργειας

note: (itstool) path: td/p
en: Stock Id
el: Αναγνωριστικό παρακαταθήκης

note: (itstool) path: td/p
en: Yes
el: Ναι

note: (itstool) path: td/p
en: Undo
el: Αναίρεση

note: (itstool) path: td/p
en: Fullscreen
el: Πλήρης οθόνη

note: (itstool) path: td/p
en: Leave Fullscreen
el: Έξοδος από πλήρη οθόνη

note: (itstool) path: item/p
en: Close the <gui>Tool Bar Editor</gui>.
el: Κλείσιμο του <gui>επεξεργαστή γραμμής εργαλείων</gui>.

note: (itstool) path: item/p
en: When our program will first start, we do not want the <gui>Leave Fullscreen</gui> ToolButton to be visible, since the application will not be in fullscreen mode. You can set this in the <gui>Common</gui> tab, by clicking the <gui>Visible</gui> property to <gui>No</gui>. The ToolButton will still appear in the interface designer, but will behave correctly when the file is loaded into your program code. Note that the method <code>show_all()</code> would override this setting - so in the code we have to use <code>show()</code> separately on all the elements.
el: Όταν το πρόγραμμά μας θα ξεκινήσει στην αρχή, δεν θέλουμε το κουμπί εργαλείου (ToolButton) <gui>Έξοδος από πλήρη οθόνη</gui> να είναι ορατό, αφού η εφαρμογή δεν θα είναι σε λειτουργία πλήρους οθόνης. Μπορείτε να το ρυθμίσετε στην καρτέλα <gui>κοινά</gui>, πατώντας στην ιδιότητα <gui>ορατό</gui> σε <gui>όχι</gui>. Το κουμπί εργαλείου θα εξακολουθεί να εμφανίζεται στον σχεδιαστή διεπαφής, αλλά θα συμπεριφέρεται σωστά, όταν το αρχείο φορτώνεται στον κώδικα προγράμματός σας. Σημειώστε ότι η μέθοδος <code>show_all()</code> θα αντικαταστήσει αυτή τη ρύθμιση - έτσι στον κώδικα πρέπει να χρησιμοποιήσουμε <code>show()</code> ξεχωριστά σε όλα τα στοιχεία.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_visible_no.png"> Setting the visible property to No </media>
el: <media type="image" src="media/glade_visible_no.png"> Ορισμός της ιδιότητας ορατό σε Όχι </media>

note: (itstool) path: item/p
en: Save your work, and close Glade.
el: Αποθήκευση της εργασίας σας και κλείσιμο του Glade.

note: (itstool) path: item/p
en: The XML file created by Glade is shown below. This is the description of the toolbar. At the time of this writing, the option to add the class Gtk.STYLE_CLASS_PRIMARY_TOOLBAR in the Glade Interface did not exist. We can manually add this to the XML file. To do this, add the following XML code at line 9 of <file>toolbar_builder.ui</file>:
el: Το δημιουργημένο αρχείο XML από το Glade εμφανίζεται παρακάτω. Αυτή είναι η περιγραφή της εργαλειοθήκης. Τη στιγμή της εγγραφής, η επιλογή προσθήκης στην κλάση Gtk.STYLE_CLASS_PRIMARY_TOOLBAR στην διεπαφή Glade δεν υπάρχει. Μπορούμε χειροκίνητα να το προσθέσουμε στο αρχείο XML. Για να το κάνουμε, προσθέστε τον παρακάτω κώδικα XML στη γραμμή 9 του <file>toolbar_builder.ui</file>:

note: (itstool) path: item/p
en: If you do not add this, the program will still work fine. The resulting toolbar will however look slightly different then the screenshot at the top of this page.
el: Εάν δεν το προσθέσετε, το πρόγραμμα θα εξακολουθήσει να δουλεύει υπέροχα. Η τελική εργαλειοθήκη όμως θα φαίνεται ελαφρά διαφορετική τότε από το στιγμιότυπο στην κορυφή αυτής της σελίδας.

note: (itstool) path: section/p (itstool) path: page/p
en: We now create the code below, which adds the toolbar from the file we just created.
el: Τώρα δημιουργούμε τον παρακάτω κώδικα, που προσθέτει την εργαλειοθήκη από το αρχείο που μόλις δημιουργήσαμε.

note: (itstool) path: section/title
en: Useful methods for Gtk.Builder
el: Χρήσιμες μέθοδοι για Gtk.Builder

note: (itstool) path: section/p
en: For the useful methods for a Toolbar widget, see <link xref="toolbar.py"/>
el: Για τις χρήσιμες μεθόδους για ένα γραφικό στοιχείο εργαλειοθήκης, δείτε <link xref="toolbar.py"/>

note: (itstool) path: section/p
en: Gtk.Builder builds an interface from an XML UI definition.
el: Το Gtk.Builder κατασκευάζει μια διεπαφή από έναν ορισμό UI XML.

note: (itstool) path: item/p
en: <code>add_from_file(filename)</code> loads and parses the given file and merges it with the current contents of the Gtk.Builder.
el: Η <code>add_from_file(filename)</code> φορτώνει και αναλύει το δεδομένο αρχείο και το συγχωνεύει με τα τρέχοντα περιεχόμενα του Gtk.Builder.

note: (itstool) path: item/p
en: <code>add_from_string(string)</code> parses the given string and merges it with the current contents of the Gtk.Builder.
el: Η <code>add_from_file(string)</code> φορτώνει την δεδομένη συμβολοσειρά και το συγχωνεύει με τα τρέχοντα περιεχόμενα του Gtk.Builder.

note: (itstool) path: item/p
en: <code>add_objects_from_file(filename, object_ids)</code> is the same as <code>add_from_file()</code>, but it loads only the objects with the ids given in the <code>object_id</code>s list.
el: Η <code>add_objects_from_file(filename, object_ids)</code> είναι η ίδια με <code>add_from_file()</code>, αλλά φορτώνει μόνο τα αντικείμενα με τις ταυτότητες που δίνονται στη λίστα <code>object_id</code>.

note: (itstool) path: item/p
en: <code>add_objects_from_string(string, object_ids)</code> is the same as <code>add_from_string()</code>, but it loads only the objects with the ids given in the <code>object_id</code>s list.
el: Το <code>add_objects_from_string(string, object_ids)</code> είναι ίδιο με το <code>add_from_string()</code>, αλλά φορτώνει μόνο τα αντικείμενα με τα αναγνωριστικά που δόθηκαν στη λίστα <code>object_id</code>s.

note: (itstool) path: item/p
en: <code>get_object(object_id)</code> retrieves the widget with the id <code>object_id</code> from the loaded objects in the builder.
el: Η <code>get_object(object_id)</code> ανακτά το γραφικό στοιχείο με την ταυτότητα <code>object_id</code> από τα φορτωμένα αντικείμενα του δομητή.

note: (itstool) path: item/p
en: <code>get_objects()</code> returns all loaded objects.
el: Η <code>get_objects()</code> επιστρέφει όλα τα φορτωμένα αντικείμενα.

note: (itstool) path: item/p
en: <code>connect_signals(handler_object)</code> connects the signals to the methods given in the <code>handler_object</code>. This can be any object which contains keys or attributes that are called like the signal handler names given in the interface description, e.g. a class or a dict. In line 39 the signal <code>"activate"</code> from the action <code>undo_action</code> is connected to the callback function <code>undo_callback()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Το <code>connect_signals(handler_object)</code> συνδέει τα σήματα στις μεθόδους που δίνονται στον <code>handler_object</code>. Αυτό μπορεί να είναι οποιοδήποτε αντικείμενο περιέχει κλειδιά ή γνωρίσματα που καλούνται όπως τα ονόματα χειριστή σήματος που δίνονται στην περιγραφή διεπαφής, π.χ. μια κλάση ή ένα λεξικό. Στη γραμμή 39 το σήμα <code>"activate"</code> από την ενέργεια <code>undo_action</code> συνδέεται σε μια συνάρτηση επανάκλησης <code>undo_callback()</code> χρησιμοποιώντας <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

[ctx: text]
note: (itstool) path: info/title
en: Toolbar created using Glade (Vala)
el: Η εργαλειοθήκη δημιουργήθηκε χρησιμοποιώντας Glade (Vala)

note: (itstool) path: page/p
en: This example is similar to <link xref="toolbar.vala"/>, except we use Glade to create the toolbar in an XML ui file.
el: Αυτό το παράδειγμα είναι παρόμοιο με <link xref="toolbar.vala"/>, εκτός από τη χρήση Glade για δημιουργία της γραμμής εργαλείων σε ένα αρχείο XML ui.

note: (itstool) path: item/p
en: When our program will first start, we don't want the <gui>Leave Fullscreen</gui> ToolButton to be visible, since the application will not be in fullscreen mode. You can set this in the <gui>Common</gui> tab, by clicking the <gui>Visible</gui> property to <gui>No</gui>. The ToolButton will still appear in the interface designer, but will behave correctly when the file is loaded into your program code.
el: Όταν το πρόγραμμά μας θα ξεκινήσει στην αρχή, δεν θέλουμε το ToolButton <gui>έξοδος από πλήρη οθόνη</gui> να είναι ορατό, αφού η εφαρμογή δεν θα είναι σε λειτουργία πλήρους οθόνης. Μπορείτε να το ρυθμίσετε στην καρτέλα <gui>κοινά</gui>, με κλικ στην ιδιότητα <gui>ορατό</gui> σε <gui>όχι</gui>. Το ToolButton θα εξακολουθεί να εμφανίζεται στον σχεδιαστή διεπαφής, αλλά θα συμπεριφέρεται σωστά, όταν το αρχείο φορτώνεται στον κώδικα προγράμματός σας.

[ctx: text]
note: (itstool) path: info/title
en: Tooltip (C)
el: Συμβουλή οθόνης (C)

note: (itstool) path: info/desc
en: Add tips to your widgets
el: Προσθέστε συμβουλές στα γραφικά στοιχεία σας

note: (itstool) path: page/title
en: Tooltip
el: Συμβουλή οθόνης

note: (itstool) path: page/p
en: A toolbar with a tooltip (with an image) for a button.
el: Μια εργαλειοθήκη με μια συμβουλή οθόνης (με μια εικόνα) για ένα κουμπί.

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.c">Toolbar</link> example.
el: Αυτό το παράδειγμα δομεί στο παράδειγμα <link xref="toolbar.c">εργαλειοθήκη</link>.

note: (itstool) path: section/code
en: #include &lt;gtk/gtk.h&gt;
    
    static gboolean 
    undo_tooltip_callback (GtkStatusIcon *status_icon,
                           gint           x,
                           gint           y,
                           gboolean       keyboard_mode,
                           GtkTooltip    *tooltip,
                           gpointer       user_data)
    {
      /* set the text for the tooltip */
      gtk_tooltip_set_text (tooltip, "Undo your last action");
       
      /* set an icon fot the tooltip */
      gtk_tooltip_set_icon_from_stock(tooltip, "gtk-undo", GTK_ICON_SIZE_MENU);
    
      /* show the tooltip */
      return TRUE;
    }
    
    
    static void
    undo_callback (GSimpleAction *simple,
                   GVariant      *parameter,
                   gpointer       user_data)
    {
      g_print ("You clicked \"Undo\".\n");
    }
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *grid;
      GtkWidget *window;
      GtkWidget *toolbar;
    
      GtkToolItem *new_button;
      GtkToolItem *open_button;
      GtkToolItem *undo_button;
    
      GtkStyleContext *style_context;
    
      GSimpleAction *undo_action;
    
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Toolbar with Tooltips Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 400, 200);
    
      /* Here we begin to create the toolbar */
      toolbar = gtk_toolbar_new ();
    
      /* Set the toolbar to be the primary toolbar of the application */
      style_context = gtk_widget_get_style_context (toolbar);
      gtk_style_context_add_class (style_context, GTK_STYLE_CLASS_PRIMARY_TOOLBAR);
    
      /* Create a button for the "new" action, with a stock image */
      new_button = gtk_tool_button_new_from_stock (GTK_STOCK_NEW);
      gtk_tool_item_set_is_important (new_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), new_button, 0);
      gtk_widget_show (GTK_WIDGET (new_button));
    
      /* Set the action name for the "new" action. We use "app.new" to
       * indicate that the action controls the application.
       */
      gtk_actionable_set_action_name (GTK_ACTIONABLE (new_button), "app.new");
    
      /*******************************
       * Tooltip for the New ToolItem:
       * a tooltip with text
       *******************************/
       gtk_tool_item_set_tooltip_text (new_button, "Create a new file");  
    
      /* "Open" */
      open_button = gtk_tool_button_new_from_stock (GTK_STOCK_OPEN);
      gtk_tool_item_set_is_important (open_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), open_button, 1);
      gtk_widget_show (GTK_WIDGET (open_button));
      gtk_actionable_set_action_name (GTK_ACTIONABLE (open_button), "app.open");
    
      /*******************************
       * Tooltip for the Open ToolItem:
       * a tooltip using Pango markup 
       * language
       *******************************/
      gtk_tool_item_set_tooltip_text (open_button, "Open an &lt;i&gt;existing&lt;/i&gt; file");
    
      /* "Undo" */
      undo_button = gtk_tool_button_new_from_stock (GTK_STOCK_UNDO);
      gtk_tool_item_set_is_important (undo_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), undo_button, 2);
      gtk_widget_show (GTK_WIDGET (undo_button));
    
      /* In this case, we use "win.undo" to indicate that
       * the action controls only the window
       */
      gtk_actionable_set_action_name (GTK_ACTIONABLE (undo_button), "win.undo");
    
      /*******************************
       * Tooltip for the Undo ToolItem:
       * a tooltip with an image
       *******************************/
      gtk_widget_set_has_tooltip (GTK_WIDGET (undo_button), TRUE);
    
      // Next, we connect the query_tooltip signal
      g_signal_connect (undo_button, "query-tooltip", G_CALLBACK (undo_tooltip_callback), NULL);
    
      gtk_widget_set_hexpand (toolbar, TRUE);
      gtk_widget_show (toolbar);
    
      grid = gtk_grid_new ();
      gtk_grid_attach (GTK_GRID (grid), toolbar, 0, 0, 1, 1);
      gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (grid));
      gtk_widget_show (GTK_WIDGET (grid));
    
      /* Use the action names to create the actions that control the window, and
       * connect them to the appropriate callbackfunctions.
       */
      undo_action = g_simple_action_new ("undo", NULL);
      g_signal_connect (undo_action, "activate", G_CALLBACK (undo_callback),
                        GTK_WINDOW (window));
      g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (undo_action));
    
      gtk_widget_show (window);
    }
    
    
    /* Callback function for the new action */
    static void
    new_callback (GSimpleAction *simple,
                  GVariant      *parameter,
                  gpointer       user_data)
    {
      g_print ("You clicked \"New\".\n");
    }
    
    
    /* Callback function for the open action */
    static void
    open_callback (GSimpleAction *simple,
                   GVariant      *parameter,
                   gpointer       user_data)
    {
      g_print ("You clicked \"Open\".\n");
    }
    
    
    /* In this function, we create the actions in which control the window, and
     * connect their signals to the appropriate callback function.
     */
    static void
    startup (GApplication *app,
             gpointer      user_data)
    {
      GSimpleAction *new_action;
      GSimpleAction *open_action;
    
      new_action = g_simple_action_new ("new", NULL);
      g_signal_connect (new_action, "activate", G_CALLBACK (new_callback), app);
      g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (new_action));
    
      open_action = g_simple_action_new ("open", NULL);
      g_signal_connect (open_action, "activate", G_CALLBACK (open_callback), app);
      g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (open_action));
    }
    
    
    
    /* Startup function for the application */
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }
el: #include &lt;gtk/gtk.h&gt;
    
    static gboolean 
    undo_tooltip_callback (GtkStatusIcon *status_icon,
                           gint           x,
                           gint           y,
                           gboolean       keyboard_mode,
                           GtkTooltip    *tooltip,
                           gpointer       user_data)
    {
      /* Εισαγωγή του κειμένου για τη συμβουλή οθόνης */
      gtk_tooltip_set_text (tooltip, "Undo your last action");
       
      /* Εισαγωγή εικονιδίου για τη συμβουλή οθόνης */
      gtk_tooltip_set_icon_from_stock(tooltip, "gtk-undo", GTK_ICON_SIZE_MENU);
    
      /* εμφάνιση της συμβουλής οθόνης */
      return TRUE;
    }
    
    
    static void
    undo_callback (GSimpleAction *simple,
                   GVariant      *parameter,
                   gpointer       user_data)
    {
      g_print ("You clicked \"Undo\".\n");
    }
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *grid;
      GtkWidget *window;
      GtkWidget *toolbar;
    
      GtkToolItem *new_button;
      GtkToolItem *open_button;
      GtkToolItem *undo_button;
    
      GtkStyleContext *style_context;
    
      GSimpleAction *undo_action;
    
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Toolbar with Tooltips Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 400, 200);
    
      /* Εδώ ξεκινά η δημιουργία της εργαλειοθήκης */
      toolbar = gtk_toolbar_new ();
    
      /* Ορισμός της εργαλειοθήκης να είναι η κύρια εργαλειοθήκη της εφαρμογής */
      style_context = gtk_widget_get_style_context (toolbar);
      gtk_style_context_add_class (style_context, GTK_STYLE_CLASS_PRIMARY_TOOLBAR);
    
      /* Δημιουργία κουμπιού για την ενέργεια "new", με μια έτοιμη εικόνα */
      new_button = gtk_tool_button_new_from_stock (GTK_STOCK_NEW);
      gtk_tool_item_set_is_important (new_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), new_button, 0);
      gtk_widget_show (GTK_WIDGET (new_button));
    
      /* Ορισμός του ονόματος της ενέργειας για την ενέργεια "new". 
       * Χρησιμοποιούμε "app.new" για να δείξουμε ότι η ενέργεια ελέγχει την εφαρμογή.
       */
      gtk_actionable_set_action_name (GTK_ACTIONABLE (new_button), "app.new");
    
      /*******************************
       * Συμβουλή οθόνης για το νέο στοιχείο εργαλείων:
       * μια συμβουλή οθόνης με κείμενο
       *******************************/
       gtk_tool_item_set_tooltip_text (new_button, "Create a new file");  
    
      /* "Open" */
      open_button = gtk_tool_button_new_from_stock (GTK_STOCK_OPEN);
      gtk_tool_item_set_is_important (open_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), open_button, 1);
      gtk_widget_show (GTK_WIDGET (open_button));
      gtk_actionable_set_action_name (GTK_ACTIONABLE (open_button), "app.open");
    
      /*******************************
       * Συμβουλή οθόνης για το στοιχείο εργαλείων άνοιγμα:
       * μια συμβουλή οθόνης χρησιμοποιώντας 
       * τη γλώσσας επισήμανσης Pango 
       *******************************/
      gtk_tool_item_set_tooltip_text (open_button, "Open an &lt;i&gt;existing&lt;/i&gt; file");
    
      /* "Undo" */
      undo_button = gtk_tool_button_new_from_stock (GTK_STOCK_UNDO);
      gtk_tool_item_set_is_important (undo_button, TRUE);
      gtk_toolbar_insert (GTK_TOOLBAR (toolbar), undo_button, 2);
      gtk_widget_show (GTK_WIDGET (undo_button));
    
      /* Σε αυτήν την περίπτωση, χρησιμοποιούμε "win.undo" για να
       * δείξουμε ότι η ενέργεια ελέγχει μόνο το παράθυρο
       */
      gtk_actionable_set_action_name (GTK_ACTIONABLE (undo_button), "win.undo");
    
      /*******************************
       * Συμβουλή οθόνης για το στοιχείο μενού αναίρεση:
       * μια συμβουλή οθόνης με μια εικόνα
       *******************************/
      gtk_widget_set_has_tooltip (GTK_WIDGET (undo_button), TRUE);
    
      // Κατόπιν, συνδέουμε το σήμα query_tooltip
      g_signal_connect (undo_button, "query-tooltip", G_CALLBACK (undo_tooltip_callback), NULL);
    
      gtk_widget_set_hexpand (toolbar, TRUE);
      gtk_widget_show (toolbar);
    
      grid = gtk_grid_new ();
      gtk_grid_attach (GTK_GRID (grid), toolbar, 0, 0, 1, 1);
      gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (grid));
      gtk_widget_show (GTK_WIDGET (grid));
    
      /* Χρησιμοποιήστε τα ονόματα ενέργειας για τη δημιουργία ενεργειών που ελέγχουν το παράθυρο και συνδέστε τες με τις κατάλληλες
       *  συναρτήσεις επανάκλησης.
       */
      undo_action = g_simple_action_new ("undo", NULL);
      g_signal_connect (undo_action, "activate", G_CALLBACK (undo_callback),
                        GTK_WINDOW (window));
      g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (undo_action));
    
      gtk_widget_show (window);
    }
    
    
    /* Συνάρτηση επανάκλησης για τη νέα ενέργεια */
    static void
    new_callback (GSimpleAction *simple,
                  GVariant      *parameter,
                  gpointer       user_data)
    {
      g_print ("You clicked \"New\".\n");
    }
    
    
    /* Συνάρτηση επανάκλησης για την ενέργεια ανοίγματος */
    static void
    open_callback (GSimpleAction *simple,
                   GVariant      *parameter,
                   gpointer       user_data)
    {
      g_print ("You clicked \"Open\".\n");
    }
    
    
    /* Σε αυτήν τη συνάρτηση, δημιουργούμε τις ενέργειες που ελέγχουν το παράθυρο και
     * συνδέουν τα σήματά τους  με την κατάλληλη συνάρτηση επανάκλησης.
     */
    static void
    startup (GApplication *app,
             gpointer      user_data)
    {
      GSimpleAction *new_action;
      GSimpleAction *open_action;
    
      new_action = g_simple_action_new ("new", NULL);
      g_signal_connect (new_action, "activate", G_CALLBACK (new_callback), app);
      g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (new_action));
    
      open_action = g_simple_action_new ("open", NULL);
      g_signal_connect (open_action, "activate", G_CALLBACK (open_callback), app);
      g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (open_action));
    }
    
    
    
    /* Συνάρτηση έναρξης για την εφαρμογή */
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: Tooltip (JavaScript)
el: Συμβουλή οθόνης (JavaScript)

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.js">Toolbar</link> example.
el: Αυτό το παράδειγμα δομεί στο παράδειγμα <link xref="toolbar.js">εργαλειοθήκη</link>.

note: (itstool) path: section/code
en: //!/usr/bin/gjs
    
    const Gdk = imports.gi.Gdk;
    const GLib = imports.gi.GLib;
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk; 
    const Lang = imports.lang;
    
    const TooltipExample = new Lang.Class ({
        Name: 'Tooltip Example',
    
        // Create the application 
        _init: function () {
            this.application = new Gtk.Application ({ application_id: 'org.example.jstooltip' });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function() {
            this.window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function () {
            this._buildUI ();
        },
    
        // Build the application's UI
        _buildUI: function () {
    
            // Create the application window
            this.window = new Gtk.ApplicationWindow ({ application: this.application,
                                                       window_position: Gtk.WindowPosition.CENTER,
                                                       title: "Toolbar with Tooltips Example",
                                                       default_width: 400,
                                                       default_height: 200,
                                                       border_width: 10 });
    
            this.grid = new Gtk.Grid();
    
            this.toolbar = this._createToolbar();
            this.toolbar.set_hexpand(true);
            this.toolbar.show();
    
            this.grid.attach(this.toolbar, 0, 0, 1, 1);
    
            this.window.add(this.grid);
    
            this._newAction = new Gio.SimpleAction({ name: "new" });
            this._newAction.connect("activate", Lang.bind(this, this._newCallback));
            this.window.add_action(this._newAction);
    
            this._openAction = new Gio.SimpleAction({ name: "open" });
            this._openAction.connect("activate", Lang.bind(this, this._openCallback));
            this.window.add_action(this._openAction);
    
            this._undoAction = new Gio.SimpleAction({ name: "undo" });
            this._undoAction.connect("activate", Lang.bind(this, this._undoCallback));
            this.window.add_action(this._undoAction);
    
            this._fullScreenAction = new Gio.SimpleAction({ name: "fullscreenToggle" });
            this._fullScreenAction.connect("activate", Lang.bind(this, this._fullScreenCallback));
            this.window.add_action(this._fullScreenAction);
    
            this.window.show_all();
       },
    
         _createToolbar: function(){
            this.toolbar = new Gtk.Toolbar();
            this.toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);
    
            // button for the "new" action
            this.newButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);
            // with a tooltip with a given text        
            this.newButton.set_tooltip_text("Create a new file");
            this.newButton.set_is_important(true);
            this.toolbar.insert(this.newButton, 0);
            this.newButton.show();
            this.newButton.set_action_name("win.new");
    
            // button for the "open" action
            this.openButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);
            // with a tooltip with a given text in the Pango markup language        
            this.openButton.set_tooltip_markup("Open an &lt;i&gt;existing&lt;/i&gt; file");
            this.openButton.set_is_important(true);
            this.toolbar.insert(this.openButton, 1);
            this.openButton.show();
            this.openButton.set_action_name("win.open");
    
            // button for the "undo" action
            this.undoButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);
            // with a tooltip with an image
            // set true the property "has-tooltip"        
            this.undoButton.set_property("has-tooltip", true);
            // connect to the callback function that for the tooltip
            // with the signal "query-tooltip"
            this.undoButton.connect("query-tooltip", Lang.bind(this, this._undoTooltipCallback));
            this.undoButton.set_is_important(true);
            this.toolbar.insert(this.undoButton, 2);
            this.undoButton.show();
            this.undoButton.set_action_name("win.undo");
    
            // button for the "fullscreen/leave fullscreen" action
            this.fullscreenButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);
            this.fullscreenButton.set_is_important(true);
            this.toolbar.insert(this.fullscreenButton, 3);
            this.fullscreenButton.set_action_name("win.fullscreenToggle");
    
            return this.toolbar;
        },
    
        _newCallback: function(action, parameter) {
            print("You clicked \"New\".");
        },
    
        _openCallback: function(action, parameter) {
            print("You clicked \"Open\".");
        },
    
        // the callback function for the tooltip of the "undo" button
        _undoTooltipCallback: function(widget, x, y, keyboard_mode, tooltip) {
            // set the text for the tooltip
            tooltip.set_text("Undo your last action");
            // set an icon fot the tooltip
            tooltip.set_icon_from_stock(Gtk.STOCK_UNDO, Gtk.IconSize.MENU);
            // show the tooltip
            return true;
        },
    
        _undoCallback: function(action, parameter) {
            print("You clicked \"Undo\".");
        },
    
        _fullScreenCallback: function() {
            if ((this.window.get_window().get_state() &amp; Gdk.WindowState.FULLSCREEN) != 0 ){
                this.fullscreenButton.set_stock_id(Gtk.STOCK_FULLSCREEN);
                this.fullscreenButton.set_tooltip_text("Make your window fullscreen");
                this.window.unfullscreen();
            } else {
                this.fullscreenButton.set_stock_id(Gtk.STOCK_LEAVE_FULLSCREEN);
                this.fullscreenButton.set_tooltip_text("Leave fullscreen");
                this.window.fullscreen();
            }
        }
    });
    
    // Run the application
    let app = new TooltipExample ();
    app.application.run (ARGV);
el: //!/usr/bin/gjs
    
    const Gdk = imports.gi.Gdk;
    const GLib = imports.gi.GLib;
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk; 
    const Lang = imports.lang;
    
    const TooltipExample = new Lang.Class ({
        Name: 'Tooltip Example',
    
        // Δημιουργία της εφαρμογής
        _init: function () {
            this.application = new Gtk.Application ({ application_id: 'org.example.jstooltip' });
    
            // Σύνδεση των σημάτων '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 ();
        },
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function () {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this.window = new Gtk.ApplicationWindow ({ application: this.application,
                                                       window_position: Gtk.WindowPosition.CENTER,
                                                       title: "Toolbar with Tooltips Example",
                                                       default_width: 400,
                                                       default_height: 200,
                                                       border_width: 10 });
    
            this.grid = new Gtk.Grid();
    
            this.toolbar = this._createToolbar();
            this.toolbar.set_hexpand(true);
            this.toolbar.show();
    
            this.grid.attach(this.toolbar, 0, 0, 1, 1);
    
            this.window.add(this.grid);
    
            this._newAction = new Gio.SimpleAction({ name: "new" });
            this._newAction.connect("activate", Lang.bind(this, this._newCallback));
            this.window.add_action(this._newAction);
    
            this._openAction = new Gio.SimpleAction({ name: "open" });
            this._openAction.connect("activate", Lang.bind(this, this._openCallback));
            this.window.add_action(this._openAction);
    
            this._undoAction = new Gio.SimpleAction({ name: "undo" });
            this._undoAction.connect("activate", Lang.bind(this, this._undoCallback));
            this.window.add_action(this._undoAction);
    
            this._fullScreenAction = new Gio.SimpleAction({ name: "fullscreenToggle" });
            this._fullScreenAction.connect("activate", Lang.bind(this, this._fullScreenCallback));
            this.window.add_action(this._fullScreenAction);
    
            this.window.show_all();
       },
    
         _createToolbar: function(){
            this.toolbar = new Gtk.Toolbar();
            this.toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);
    
            // κουμπί για την ενέργεια "new"
            this.newButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);
            // με μια συμβουλή οθόνης με δοσμένο κείμενο        
            this.newButton.set_tooltip_text("Create a new file");
            this.newButton.set_is_important(true);
            this.toolbar.insert(this.newButton, 0);
            this.newButton.show();
            this.newButton.set_action_name("win.new");
    
            // κουμπί για την ενέργεια "open"
            this.openButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);
            // με μια συμβουλή οθόνης με δοσμένο κείμενο στη γλώσσα σήμανσης Pango        
            this.openButton.set_tooltip_markup("Open an &lt;i&gt;existing&lt;/i&gt; file");
            this.openButton.set_is_important(true);
            this.toolbar.insert(this.openButton, 1);
            this.openButton.show();
            this.openButton.set_action_name("win.open");
    
            // κουμπί για την ενέργεια "undo"
            this.undoButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);
            // με μια συμβουλή οθόνης με εικόνα
            // ορισμός σε αληθή της ιδιότητας "has-tooltip"        
            this.undoButton.set_property("has-tooltip", true);
            // σύνδεση με την συνάρτηση επανάκλησης για τη συμβουλή οθόνης
            // με το σήμα "query-tooltip"
            this.undoButton.connect("query-tooltip", Lang.bind(this, this._undoTooltipCallback));
            this.undoButton.set_is_important(true);
            this.toolbar.insert(this.undoButton, 2);
            this.undoButton.show();
            this.undoButton.set_action_name("win.undo");
    
            // κουμπί για την ενέργεια "fullscreen/leave fullscreen"
            this.fullscreenButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);
            this.fullscreenButton.set_is_important(true);
            this.toolbar.insert(this.fullscreenButton, 3);
            this.fullscreenButton.set_action_name("win.fullscreenToggle");
    
            return this.toolbar;
        },
    
        _newCallback: function(action, parameter) {
            print("You clicked \"New\".");
        },
    
        _openCallback: function(action, parameter) {
            print("You clicked \"Open\".");
        },
    
        // η συνάρτηση επανάκλησης για τη συμβουλή οθόνης του κουμπιού "undo"
        _undoTooltipCallback: function(widget, x, y, keyboard_mode, tooltip) {
            // εισαγωγή του κειμένου για τη συμβουλή οθόνης
            tooltip.set_text("Undo your last action");
            // εισαγωγή εικονιδίου για τη συμβουλή οθόνης
            tooltip.set_icon_from_stock(Gtk.STOCK_UNDO, Gtk.IconSize.MENU);
            // εμφάνιση της συμβουλής οθόνης
            return true;
        },
    
        _undoCallback: function(action, parameter) {
            print("You clicked \"Undo\".");
        },
    
        _fullScreenCallback: function() {
            if ((this.window.get_window().get_state() &amp; Gdk.WindowState.FULLSCREEN) != 0 ){
                this.fullscreenButton.set_stock_id(Gtk.STOCK_FULLSCREEN);
                this.fullscreenButton.set_tooltip_text("Make your window fullscreen");
                this.window.unfullscreen();
            } else {
                this.fullscreenButton.set_stock_id(Gtk.STOCK_LEAVE_FULLSCREEN);
                this.fullscreenButton.set_tooltip_text("Leave fullscreen");
                this.window.fullscreen();
            }
        }
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new TooltipExample ();
    app.application.run (ARGV);

note: (itstool) path: item/p
en: <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Tooltip.html">GtkTooltip</link>
el: <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Tooltip.html">Συμβουλή οθόνης Gtk (GtkTooltip)</link>

note: (itstool) path: item/p
en: <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Toolbar.html">GtkToolbar</link>
el: <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Toolbar.html">Εργαλειοθήκη Gtk (GtkToolbar)</link>

note: (itstool) path: item/p
en: <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Widget.html">GtkWidget</link>
el: <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Widget.html">Γραφικό στοιχείο Gtk (GtkWidget)</link>

[ctx: text]
note: (itstool) path: info/title
en: Tooltip (Python)
el: Συμβουλή οθόνης (Python)

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.py">Toolbar</link> example.
el: Αυτό το παράδειγμα δομεί στο παράδειγμα <link xref="toolbar.py">εργαλειοθήκη</link>.

note: (itstool) path: section/title
en: Useful methods for a Tooltip widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο συμβουλής οθόνης

note: (itstool) path: section/p
en: <code>set_tooltip_text(text)</code> and <code>set_tooltip_markup(text)</code> can be used to add a tooltip of plain text (or text in the Pango Markup Language) to a widget.
el: <code>set_tooltip_text(text)</code> και <code>set_tooltip_markup(text)</code> μπορούν να χρησιμοποιηθούν για να προσθέσουν μια συμβουλή οθόνης απλού κειμένου (ή κειμένου στην γλώσσα επισήμανσης Pango) σε ένα γραφικό στοιχείο.

note: (itstool) path: section/p
en: For more complex tooltips, for instance for a tooltip with an image:
el: Για πιο σύνθετες συμβουλές οθόνης, για παράδειγμα για μια συμβουλή οθόνης με μια εικόνα:

note: (itstool) path: item/p
en: Set the <code>"has-tooltip"</code> property of the widget to <code>True</code>; this will make GTK+ monitor the widget for motion and related events which are needed to determine when and where to show a tooltip.
el: Ορίστε την ιδιότητα <code>"has-tooltip"</code> του γραφικού στοιχείου σε <code>True</code>· αυτό θα κάνει το GTK+ να παρακολουθήσει το γραφικό στοιχείο για κίνηση και σχετικά συμβάντα που απαιτούνται για προσδιορισμό πότε και πού θα εμφανιστεί μια συμβουλή οθόνης.

note: (itstool) path: item/p
en: Connect to the <code>"query-tooltip"</code> signal. This signal will be emitted when a tooltip is supposed to be shown. One of the arguments passed to the signal handler is a GtkTooltip object. This is the object that we are about to display as a tooltip, and can be manipulated in your callback using functions like <code>set_icon()</code>. There are functions for setting the tooltip's markup (<code>set_markup(text)</code>), setting an image from a stock icon (<code>set_icon_from_stock(stock_id, size)</code>), or even putting in a custom widget (<code>set_custom(widget)</code>).
el: Συνδεθείτε με το σήμα <code>"query-tooltip"</code>. Αυτό το σήμα εκπέμπεται όταν η συμβουλή οθόνης υποτίθεται ότι εμφανίζεται. Ένα από τα ορίσματα που πέρασαν στον χειριστή σήματος είναι ένα αντικείμενο GtkTooltip. Αυτό είναι το αντικείμενο που πρόκειται να εμφανίσουμε ως συμβουλή οθόνης και μπορεί να επεξεργαστεί στην επανάκλησή σας χρησιμοποιώντας συναρτήσεις όπως <code>set_icon()</code>. Υπάρχουν συναρτήσεις για ρύθμιση της επισήμανσης της συμβουλής οθόνης (<code>set_markup(text)</code>), ρύθμιση μιας εικόνας από ένα εικονίδιο παρακαταθήκης (<code>set_icon_from_stock(stock_id, size)</code>), ή ακόμα τοποθέτηση σε ένα προσαρμοσμένο γραφικό στοιχείο (<code>set_custom(widget)</code>).

note: (itstool) path: item/p
en: Return <code>True</code> from your query-tooltip handler. This causes the tooltip to be show. If you return <code>False</code>, it will not be shown.
el: Επιστροφή <code>True</code> από τον χειριστή σας ερωτήματος συμβουλής οθόνης. Αυτό προκαλεί την εμφάνιση της συμβουλής οθόνης. Εάν επιστρέψετε <code>False</code>, δεν θα εμφανιστεί.

note: (itstool) path: section/p
en: In the probably rare case where you want to have even more control over the tooltip that is about to be shown, you can set your own GtkWindow which will be used as tooltip window. This works as follows:
el: Στην προφανώς σπάνια περίπτωση όπου θέλετε να έχετε ακόμα περισσότερο έλεγχο στην συμβουλή οθόνης που πρόκειται να εμφανιστεί, μπορείτε να ορίσετε το δικό σας GtkWindow που θα χρησιμοποιηθεί ως παράθυρο συμβουλής οθόνης. Αυτό δουλεύει ως εξής:

note: (itstool) path: item/p
en: Set <code>"has-tooltip"</code> and connect to <code>"query-tooltip"</code> as before.
el: Ορίστε <code>"has-tooltip"</code> και συνδεθείτε στο <code>"query-tooltip"</code> όπως πριν.

note: (itstool) path: item/p
en: Use <code>set_tooltip_window()</code> on the widget to set a GtkWindow created by you as tooltip window.
el: Χρησιμοποιήστε <code>set_tooltip_window()</code> στο γραφικό στοιχείο για να ορίσετε ένα GtkWindow που δημιουργήθηκε από εσάς ως παράθυρο συμβουλής οθόνης.

note: (itstool) path: item/p
en: In the <code>"query-tooltip"</code> callback you can access your window using <code>get_tooltip_window()</code> and manipulate as you wish. The semantics of the return value are exactly as before, return <code>True</code> to show the window, <code>False</code> to not show it.
el: Στην επανάκληση <code>"query-tooltip"</code> μπορείτε να προσπελάσετε το παράθυρο σας χρησιμοποιώντας <code>get_tooltip_window()</code> και να το χειριστείτε όπως επιθυμείτε. Η σημασιολογία της τιμής επιστροφής είναι ακριβώς όπως πριν, επιστροφή <code>True</code> για να εμφανίσετε το παράθυρο, <code>False</code> για να μην το εμφανίσετε.

[ctx: text]
note: (itstool) path: info/title
en: Tooltip (Vala)
el: Συμβουλή οθόνης (Vala)

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.vala">Toolbar</link> example.
el: Αυτό το παράδειγμα δομεί στο παράδειγμα <link xref="toolbar.vala">εργαλειοθήκη</link>.

note: (itstool) path: item/p
en: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Tooltip.html">Gtk.Tooltip</link>
el: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Tooltip.html">Συμβουλή οθόνης Gtk (Gtk.Tooltip)</link>

note: (itstool) path: item/p
en: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Widget.query_tooltip.html">Gtk.Widget.query_tooltip</link>
el: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Widget.query_tooltip.html">Συμβουλή οθόνης ερωτήματος γραφικού στοιχείου Gtk (Gtk.Widget.query_tooltip)</link>

note: (itstool) path: item/p
en: <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-UNDO:CAPS">Stock Items</link>
el: <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-UNDO:CAPS">Έτοιμα στοιχεία (Stock Items)</link>

[ctx: text]
note: (itstool) path: info/title
en: Simple Treeview with ListStore (Python)
el: Απλή προβολή οθόνης (Treeview) με αποθήκευση καταλόγου (ListStore) (Python)

note: (itstool) path: info/desc
en: A TreeView displaying a ListStore (more complex example)
el: Μια TreeView που εμφανίζει μια TreeStore (πιο σύνθετο παράδειγμα)

note: (itstool) path: page/title
en: More Complex Treeview with ListStore
el: Πιο σύνθετη προβολή δένδρου με ListStore

note: (itstool) path: page/p
en: This TreeView displays a simple ListStore with the selection "changed" signal connected.
el: Αυτή η TreeView εμφανίζει μια απλή ListStore με το συνδεμένο σήμα επιλογής "αλλαγμένο".

note: (itstool) path: section/title
en: Useful methods for a TreeView widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο TreeView

note: (itstool) path: section/p
en: The TreeView widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em> stores the data; the <em>View</em> gets change notifications and displays the content of the model; the <em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more information and for a list of useful methods for TreeModel see <link xref="model-view-controller.py"/>.
el: Το γραφικό στοιχείο TreeView σχεδιάστηκε γύρω από ένα σχέδιο <em>προτύπου/προβολής/ελεγκτή</em>: το <em>πρότυπο</em> αποθηκεύει τα δεδομένα· η <em>Προβολή</em> παίρνει ειδοποιήσεις αλλαγής και εμφανίζει το περιεχόμενο του προτύπου· ο <em>ελεγκτής</em>, τελικά, αλλάζει την κατάσταση του προτύπου και ειδοποιεί την προβολή για αυτές τις αλλαγές. Για περισσότερες πληροφορίες και για μια λίστα χρήσιμων μεθόδων για λίστα TreeModel, δείτε <link xref="model-view-controller.py"/>.

note: (itstool) path: section/p
en: In line 36 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 36 το σήμα <code>"changed"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>on_changed()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

[ctx: text]
note: (itstool) path: info/title
en: TreeView with TreeStore (Python)
el: Προβολή δένδρου (TreeView) με αποθήκη δένδρου (TreeStore) (Python)

note: (itstool) path: info/desc
en: A TreeView displaying a TreeStore (more complex example, with CellRendererToggle)
el: Μια προβολή δένδρου (TreeView) εμφανίζει μια αποθήκη δένδρου (TreeStore) (πιο σύνθετο παράδειγμα, με CellRendererToggle)

note: (itstool) path: page/title
en: More Complex TreeView with TreeStore
el: Πιο σύνθετη προβολή δένδρου με αποθήκη δένδρου

note: (itstool) path: page/p
en: This TreeView displays a TreeStore with two columns, one of which is rendered as a toggle.
el: Αυτή η προβολή δένδρου (TreeView) εμφανίζει μια αποθήκη δένδρου (TreeStore) με δύο στήλες, η μια τους αποδίδεται ως μια εναλλαγή.

note: (itstool) path: section/p
en: In line 48 the <code>"toggled"</code> signal is connected to the callback function <code>on_toggled()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 48 το σήμα <code>"toggled"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>on_toggled()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

[ctx: text]
note: (itstool) path: info/title
en: TreeView with ListStore (JavaScript)
el: Προβολή δένδρου (Treeview) με αποθήκη καταλόγου (ListStore) (JavaScript)

note: (itstool) path: info/desc
en: A widget that shows a separate list of items
el: Ένα γραφικό στοιχείο που εμφανίζει μια ξεχωριστή λίστα στοιχείων

note: (itstool) path: page/title
en: TreeView with ListStore
el: Προβολή δένδρου (Treeview) με αποθήκη καταλόγου (ListStore)

note: (itstool) path: page/p
en: A TreeView is like a window onto the contents of either a ListStore or a TreeStore. A ListStore is like a spreadsheet: a "flat", two-dimensional list of things broken up into rows and columns. A TreeStore, meanwhile, can branch out in different directions like a tree can. In this example, we create a TreeView that shows the contents of a ListStore with (fictitious) names and phone numbers in it, and set it so that the <link xref="label.js">Label</link> at the bottom of the window shows more information about whichever name you click on.
el: Μια προβολή δένδρου (TreeView) μοιάζει με ένα παράθυρο στα περιεχόμενα είτε μιας αποθήκης καταλόγου (ListStore) είτε μιας προβολής δένδρου. Μια αποθήκη καταλόγου μοιάζει με ένα υπολογιστικό φύλλο: μια "επίπεδη", διδιάστατη λίστα πραγμάτων διαιρεμένη σε γραμμές και στήλες. Μια προβολή δένδρου, στο μεταξύ, μπορεί να διακλαδωθεί σε διαφορετικές κατευθύνσεις όπως κάνει ένα δένδρο. Σε αυτό το παράδειγμα, δημιουργήσαμε μια προβολή δένδρου που εμφανίζει τα περιεχόμενα μιας αποθήκης καταλόγου με (εικονικά) ονόματα και αριθμούς τηλεφώνου σε αυτό, και ρυθμίστηκε έτσι ώστε η <link xref="label.js">ετικέτα</link> στο τέλος του παραθύρου να εμφανίζει περισσότερες πληροφορίες σχετικά με οποιοδήποτε όνομα πατάτε.

note: (itstool) path: page/p
en: The TreeView is not just a single widget, but contains a number of smaller ones:
el: Η προβολή δένδρου (TreeView) δεν είναι απλά ένα μονό γραφικό στοιχείο, αλλά περιέχει έναν αριθμό μικρότερων γραφικών στοιχείων:

note: (itstool) path: item/p
en: TreeViewColumn widgets show each (vertical) column of information from the ListStore. Each one has a title which can be shown at the top of the column, like in the screenshot.
el: Τα γραφικά στοιχεία στήλης προβολής δένδρου (TreeViewColumn) εμφανίζουν κάθε (κάθετη) στήλη πληροφορίας από τη αποθήκη καταλόγων (ListStore). Καθένα έχει έναν τίτλο που μπορεί να προβληθεί στην κορυφή της στήλης, όπως στο στιγμιότυπο.

note: (itstool) path: item/p
en: CellRenderer widgets are "packed" into each TreeViewColumn, and contain the instructions for how to display each individual "cell", or item from the ListStore. There are multiple different types, including the CellRendererText used here and the CellRendererPixbuf, which displays a picture ("pixel buffer").
el: Τα γραφικά στοιχεία απεικονιστές κελιού (CellRenderer)  "συσκευάζονται" σε κάθε στήλη προβολής δένδρου (TreeViewColumn) και περιέχουν τις οδηγίες πώς να εμφανίσουν κάθε ξεχωριστό "κελί" ή στοιχείο από τη ListStore. Υπάρχουν πολλοί διαφορετικοί τύποι, συμπεριλαμβανόμενου του κειμένου απεικονιστή κελιών (CellRendererText) που χρησιμοποιείται εδώ και του CellRendererPixbuf, που εμφανίζει μια εικόνα "ενδιάμεση μνήμη εικονοστοιχείου").

note: (itstool) path: page/p
en: Finally, we're going to use an object called a TreeIter, which isn't a widget so much as an invisible cursor which points to a (horizontal) row in the ListStore. Whenever you click on a name in the phonebook, for instance, we create a TreeIter pointing to the row that's selected, and then use that to tell the ListStore which entry we want the Label to show more information about.
el: Τελικά, πρόκειται να χρησιμοποιήσουμε ένα αντικείμενο που λέγεται TreeIter, που δεν είναι γραφικό στοιχείο τόσο πολύ όσο ένας αόρατος δρομέας που δείχνει σε μια (οριζόντια) γραμμή στη ListStore. Οποτεδήποτε πατάτε σε ένα όνομα στον τηλεφωνικό κατάλογο, για παράδειγμα, δημιουργούμε ένα TreeIter που δείχνει τη γραμμή που επιλέχτηκε και έπειτα χρησιμοποιήστε το για να πείτε στη ListStore ποιας εγγραφής θέλουμε η ετικέτα να εμφανίσει περισσότερες πληροφορίες σχετικά.

note: (itstool) path: note/p
en: The TreeView is probably the most complicated Gtk widget, because of how many parts it has and how they all have to work together. Give yourself time to learn how it works and experiment with it, or try something easier first if you're having trouble.
el: Η TreeView είναι προφανώς το πιο περίπλοκο γραφικό στοιχείο Gtk, λόγω των πολλών μερών που έχει και του τρόπου συνεργασίας τους. Δώστε στον εαυτό σας τον χρόνο να μάθετε πώς δουλεύει και πειραματιστείτε μαζί του, ή δοκιμάστε πρώτα κάτι ευκολότερο εάν έχετε πρόβλημα.

note: (itstool) path: section/code
en: 
    const TreeViewExample = new Lang.Class({
        Name: 'TreeView Example with Simple ListStore',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jstreeviewsimpleliststore'
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
el: 
    const TreeViewExample = new Lang.Class({
        Name: 'TreeView Example with Simple ListStore',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jstreeviewsimpleliststore'
            });
    
        // Σύνδεση των σημάτων '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 ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the TreeViewExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
el: Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση TreeViewExample. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 250,
                default_width: 100,
                border_width: 20,
                title: "My Phone Book"});
el: 
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 250,
                default_width: 100,
                border_width: 20,
                title: "My Phone Book"});

note: (itstool) path: section/code
en: 
            // Create the underlying liststore for the phonebook
            this._listStore = new Gtk.ListStore ();
            this._listStore.set_column_types ([
                GObject.TYPE_STRING,
                GObject.TYPE_STRING,
                GObject.TYPE_STRING,
                GObject.TYPE_STRING]);
el: 
            // Δημιουργία της υποκείμενης αποθήκης καταλόγου για τον τηλεφωνικό κατάλογο
            this._listStore = new Gtk.ListStore ();
            this._listStore.set_column_types ([
                GObject.TYPE_STRING,
                GObject.TYPE_STRING,
                GObject.TYPE_STRING,
                GObject.TYPE_STRING]);

note: (itstool) path: section/p
en: We first create the ListStore like we would any widget. Then we call its set_column_types method, and pass it an array of GObject data types. (We could have put the types all on one line, but here we are breaking them up to make it easier to read.)
el: Δημιουργούμε πρώτα την αποθήκη καταλόγου (ListStore) όπως θα κάναμε με κάθε γραφικό στοιχείο. Έπειτα καλούμε τη μέθοδο της set_column_types και την περνάμε σε έναν πίνακα τύπου δεδομένων GObject. (Θα μπορούσαμε να βάλουμε όλους τους τύπους σε μια γραμμή, αλλά εδώ τα διαιρούμε για διευκόλυνση της ανάγνωσης.)

note: (itstool) path: section/p
en: The GObject data types you can use include:
el: Οι τύποι δεδομένων GObject που μπορείτε να χρησιμοποιήσετε περιλαμβάνουν:

note: (itstool) path: item/p
en: <file>gtk.gdk.Pixbuf</file> -- A picture
el: <file>gtk.gdk.Pixbuf</file> -- Μια εικόνα

note: (itstool) path: section/p
en: In this case, we're making a ListStore of four columns, each one containing string values.
el: Σε αυτήν την περίπτωση, κάνουμε μια ListStore των τεσσάρων στηλών, καθεμιά περιέχει τιμές συμβολοσειράς.

note: (itstool) path: section/code
en: 
            // Data to go in the phonebook
            this.phonebook =
            let phonebook =
                [{ name: "Jurg", surname: "Billeter", phone: "555-0123",
                    description: "A friendly person."},
                 { name: "Johannes", surname: "Schmid", phone: "555-1234",
                    description: "Easy phone number to remember."},
                 { name: "Julita", surname: "Inca", phone: "555-2345",
                    description: "Another friendly person."},
                 { name: "Javier", surname: "Jardon", phone: "555-3456",
                    description: "Bring fish for his penguins."},
                 { name: "Jason", surname: "Clinton", phone: "555-4567",
                    description: "His cake's not a lie."},
                 { name: "Random J.", surname: "Hacker", phone: "555-5678",
                    description: "Very random!"}];
el: 
            // Δεδομένα για εισαγωγή στον τηλεφωνικό κατάλογο
            this.phonebook =
            let phonebook =
                [{ name: "Jurg", surname: "Billeter", phone: "555-0123",
                    description: "A friendly person."},
                 { name: "Johannes", surname: "Schmid", phone: "555-1234",
                    description: "Easy phone number to remember."},
                 { name: "Julita", surname: "Inca", phone: "555-2345",
                    description: "Another friendly person."},
                 { name: "Javier", surname: "Jardon", phone: "555-3456",
                    description: "Bring fish for his penguins."},
                 { name: "Jason", surname: "Clinton", phone: "555-4567",
                    description: "His cake's not a lie."},
                 { name: "Random J.", surname: "Hacker", phone: "555-5678",
                    description: "Very random!"}];

note: (itstool) path: section/p
en: Here we have the information to go in the ListStore. It's an array of objects, each one corresponding to a single entry in our phone book.
el: Εδώ έχουμε την πληροφορία μετάβασης στην αποθήκη καταλόγων (ListStore). Είναι ένας πίνακας αντικειμένων, που καθένα αντιστοιχεί σε μια μοναδική εγγραφή στον τηλεφωνικό κατάλογο.

note: (itstool) path: section/p
en: Note that the TreeView in the screenshot doesn't actually show the data from the "description" properties. Instead, that information's shown in the Label beneath it, for whichever row that you click on. That's because the TreeView and ListStore are two separate things, and a TreeView can show all or part of a ListStore, and display what's in it in different ways. You can even have multiple widgets show things from the same ListStore, like the Label in our example or even a second TreeView.
el: Σημειώστε ότι η προβολή δένδρου (TreeView) στο στιγμιότυπο δεν εμφανίζει πράγματι τα δεδομένα από τις ιδιότητες "description". Στη θέση της, αυτή η πληροφορία εμφανίζεται στην ετικέτα από κάτω της, για κάθε γραμμή που πατάτε. Αυτό συμβαίνει επειδή η προβολή δένδρου και η αποθήκη καταλόγου (ListStore) είναι δύο ξεχωριστά πράγματα και μια προβολή δένδρου μπορεί να εμφανίσει όλο ή μέρος της αποθήκης καταλόγου και προβάλλει τι είναι σε αυτή με διαφορετικούς τρόπους. Μπορείτε ακόμα να έχετε πολλαπλά γραφικά στοιχεία που εμφανίζουν πράγματα από την ίδια την αποθήκη καταλόγου, όπως την ετικέτα στο παράδειγμά μας ή ακόμα μια δεύτερη προβολή δένδρου.

note: (itstool) path: section/p
en: This <file>for</file> loop puts the strings from our phonebook into our ListStore in order. In order, we pass the ListStore's set method the iter that points to the correct row, an array which says which columns we want to set, and an array which contains the data we want to put into those columns.
el: Αυτός ο βρόχος <file>for</file> βάζει τις συμβολοσειρές από τον τηλεφωνικό κατάλογό μας στη ListStore μας σε σειρά. Για να περάσουμε την μέθοδο ορισμού της ListStore στην επανάληψη που δείχνει στη σωστή γραμμή, χρειάζεται ένας πίνακας που λέει ποιες στήλες θέλουμε να ορίσουμε και ένας πίνακας που περιέχει τα δεδομένα που θέλουμε να βάλουμε σε αυτές τις στήλες.

note: (itstool) path: section/p
en: A ListStore's <file>append</file> method adds a horizontal row onto it (it starts out with none), and returns a TreeIter pointing to that row like a cursor. So by passing <file>this._listStore.append()</file> to the ListStore as a property, we're creating a new row and telling the <file>set</file> method which row to set data for at the same time.
el: Μια μέθοδος <file>append</file> της ListStore προσθέτει μια οριζόντια γραμμή σε αυτή (ξεκινά χωρίς καμία) και επιστρέφει μια TreeIter που δείχνει σε αυτήν τη γραμμή όπως ένας δρομέας. Έτσι περνώντας το <file>this._listStore.append()</file> στη ListStore ως μια ιδιότητα, δημιουργούμε μια νέα γραμμή και λέμε στη μέθοδο <file>set</file> ποια γραμμή να ορίσει τα δεδομένα ταυτόχρονα.

note: (itstool) path: section/title
en: Creating the TreeView
el: Δημιουργία της προβολής δένδρου (TreeView)

note: (itstool) path: section/code
en: 
            // Create the treeview
            this._treeView = new Gtk.TreeView ({
                expand: true,
                model: this._listStore });
el: 
            // Δημιουργία της προβολής δένδρου
            this._treeView = new Gtk.TreeView ({
                expand: true,
                model: this._listStore });

note: (itstool) path: section/p
en: Here we create a basic TreeView widget, that expands both horizontally and vertically to use as much space as needed. We set it to use the ListStore we created as its "model", or the thing it'll show us stuff from.
el: Εδώ δημιουργούμε ένα βασικό γραφικό στοιχείο TreeView, που επεκτείνεται οριζόντια και κάθετα για να χρησιμοποιήσει όσο χώρο χρειάζεται. Το ορίζουμε να χρησιμοποιήσει τη ListStore που δημιουργήσαμε ως το "model" του, ή το πράγμα που θα μας δείξει το υλικό.

note: (itstool) path: section/code
en: 
            // Create the columns for the address book
            let firstName = new Gtk.TreeViewColumn ({ title: "First Name" });
            let lastName = new Gtk.TreeViewColumn ({ title: "Last Name" });
            let phone = new Gtk.TreeViewColumn ({ title: "Phone Number" });
el: 
            // Δημιουργία των στηλών για το βιβλίο διευθύνσεων
            let firstName = new Gtk.TreeViewColumn ({ title: "First Name" });
            let lastName = new Gtk.TreeViewColumn ({ title: "Last Name" });
            let phone = new Gtk.TreeViewColumn ({ title: "Phone Number" });

note: (itstool) path: section/p
en: Now we create each of the vertical TreeViewColumns we'll see in the TreeView. The title for each one goes at the top, as you can see in the screenshot.
el: Τώρα δημιουργούμε καθεμιά από τις κάθετες TreeViewColumns που βλέπουμε στην TreeView. Ο τίτλος για καθεμιά πηγαίνει στην κορυφή, όπως μπορείτε να δείτε στο στιγμιότυπο.

note: (itstool) path: section/code
en: 
            // Create a cell renderer for when bold text is needed
            let bold = new Gtk.CellRendererText ({
                weight: Pango.Weight.BOLD });
    
            // Create a cell renderer for normal text
            let normal = new Gtk.CellRendererText ();
    
            // Pack the cell renderers into the columns
            firstName.pack_start (bold, true);
            lastName.pack_start (normal, true);
            phone.pack_start (normal, true);
el: 
            // Δημιουργία μιας απεικόνισης κελιού για όταν χρειάζεται έντονο κείμενο
            let bold = new Gtk.CellRendererText ({
                weight: Pango.Weight.BOLD });
    
            // Δημιουργία μιας απεικόνισης κελιού για κανονικό κείμενο
            let normal = new Gtk.CellRendererText ();
    
            // Συσκευασία των απεικονίσεων κελιού στις στήλες
            firstName.pack_start (bold, true);
            lastName.pack_start (normal, true);
            phone.pack_start (normal, true);

note: (itstool) path: section/p
en: Here we create the CellRenderers that we'll use to display the text from our ListStore, and pack them into the TreeViewColumns. Each CellRendererText is used for all the entries in that column. Our normal CellRendererText just creates plain text, while our bold one uses heavier-weight text. We put it into the first name column, and tell the other two to use copies of the normal one. The "true" used as the second parameter for the <file>pack_start</file> method tells it to expand the cells when possible, instead of keeping them compact.
el: Εδώ δημιουργούμε τους απεικονιστές κελιών (CellRenderers) που θα χρησιμοποιήσουμε για την εμφάνιση του κειμένου από τη ListStore μας και τους πακετάρουμε στις TreeViewColumns. Κάθε CellRendererText χρησιμοποιείται για όλες τις καταχωρίσεις σε αυτήν τη στήλη. Το κανονικό μας CellRendererText απλά δημιουργεί απλό κείμενο, ενώ το έντονο κείμενο χρησιμοποιεί κείμενο βαρύτερου πάχους. Το βάζουμε στη στήλη πρώτου ονόματος και λέμε στα άλλα δύο να χρησιμοποιήσουμε αντίγραφα του κανονικού. Το "αληθές" χρησιμοποιείται ως η δεύτερη παράμετρος για τη μέθοδο <file>pack_start</file> που του λέει να επεκτείνει τα κελιά όταν είναι δυνατό, αντί να τα κρατήσει συμπαγή.

note: (itstool) path: note/p
en: <link href="http://www.pygtk.org/docs/pygtk/pango-constants.html">Here is a list</link> of other text properties you can use. In order to use these Pango constants, make sure to put the line <file>const Pango = imports.gi.Pango;</file> at the beginning of your code like we did.
el: <link href="http://www.pygtk.org/docs/pygtk/pango-constants.html">Εδώ είναι μια λίστα</link> των άλλων ιδιοτήτων του κειμένου που μπορείτε να δείτε. Για να χρησιμοποιήσετε αυτές τις σταθερές Pango, βεβαιωθείτε ότι βάλατε τη γραμμή <file>const Pango = imports.gi.Pango;</file> στην αρχή του κώδικα σας όπως κάναμε.

note: (itstool) path: section/code
en: 
            firstName.add_attribute (bold, "text", 0);
            lastName.add_attribute (normal, "text", 1);
            phone.add_attribute (normal, "text", 2);
    
            // Insert the columns into the treeview
            this._treeView.insert_column (firstName, 0);
            this._treeView.insert_column (lastName, 1);
            this._treeView.insert_column (phone, 2);
el: 
            firstName.add_attribute (bold, "text", 0);
            lastName.add_attribute (normal, "text", 1);
            phone.add_attribute (normal, "text", 2);
    
            // Εισαγωγή των στηλών στην προβολή δένδρου
            this._treeView.insert_column (firstName, 0);
            this._treeView.insert_column (lastName, 1);
            this._treeView.insert_column (phone, 2);

note: (itstool) path: section/p
en: Now that we've put the CellRenderers into the TreeViewColumns, we use the <file>add_attribute</file> method to tell each column to pull in text from the model our TreeView is set to use; in this case, the ListStore with the phonebook.
el: Τώρα που έχουμε βάλει τους απεικονιστές κελιών (CellRenderers) στις στήλες προβολής δένδρου (TreeViewColumns), χρησιμοποιούμε τη μέθοδο <file>add_attribute</file> για να πει σε κάθε στήλη να σύρει το κείμενο από το πρότυπό μας προβολής δένδρου (TreeView) που ορίστηκε για χρήση· σε αυτήν την περίπτωση, την αποθήκη καταλόγου (ListStore) με τον τηλεφωνικό κατάλογο.

note: (itstool) path: item/p
en: The first parameter is which CellRenderer we're going to use to render what we're pulling in.
el: Η πρώτη παράμετρος είναι όποια απεικόνιση κελιών (CellRenderer) πρόκειται να χρησιμοποιήσουμε για απόδοση του τι σύρουμε.

note: (itstool) path: item/p
en: The second parameter is what kind of information we're going to pull in. In this case, we're letting it know that we're rendering text.
el: Η δεύτερη παράμετρος είναι τι είδος πληροφορίας πρόκειται να σύρουμε. Σε αυτήν την περίπτωση, την αφήνουμε να μάθει ότι αποδίδουμε κείμενο.

note: (itstool) path: item/p
en: The third parameter is which of the ListStore's columns we're pulling that information in from.
el: Η τρίτη παράμετρος είναι σε ποια στήλη της ListStore σύρουμε αυτήν την πληροφορία.

note: (itstool) path: section/p
en: After we've set that up, we use the TreeView's <file>insert_column</file> method to put our TreeViewColumns inside it in order. Our TreeView is now complete.
el: Αφού το ρυθμίσουμε, χρησιμοποιούμε τη μέθοδο <file>insert_column</file> του TreeView για να βάλουμε τις TreeViewColumns μας μέσα του σε σειρά. Η TreeView μας είναι τώρα πλήρης.

note: (itstool) path: note/p
en: Normally, you might want to use a loop to initialize your TreeView, but in this example we're spelling things out step by step for the sake of making it easier to understand.
el: Κανονικά, θα μπορούσατε να θελήσετε να χρησιμοποιήσετε έναν βρόχο για αρχικοποίηση την TreeView σας, αλλά σε αυτό το παράδειγμα εξηγούμε λεπτομερώς τα πράγματα βήμα-βήμα για διευκόλυνση της κατανόησης.

note: (itstool) path: section/title
en: Building the rest of the UI
el: Δημιουργία της υπόλοιπης διεπαφής χρήστη

note: (itstool) path: section/code
en: 
            // Create the label that shows details for the name you select
            this._label = new Gtk.Label ({ label: "" });
    
            // Get which item is selected
            this.selection = this._treeView.get_selection();
    
            // When something new is selected, call _on_changed
            this.selection.connect ('changed', Lang.bind (this, this._onSelectionChanged));
el: 
            // Δημιουργία της ετικέτας που εμφανίζει λεπτομέρειες για το όνομα που διαλέξατε
            this._label = new Gtk.Label ({ label: "" });
    
            // Λήψη όποιου στοιχείου επιλέγεται
            this.selection = this._treeView.get_selection();
    
            // Όταν επιλέγεται κάτι νέο, call _on_changed
            this.selection.connect ('changed', Lang.bind (this, this._onSelectionChanged));

note: (itstool) path: section/p
en: The TreeView's <file>get_selection</file> method returns an object called a TreeSelection. A TreeSelection is like a TreeIter in that it's basically a cursor that points at a particular row, except that the one it points to is the one that's visibly highlighted as selected.
el: Η μέθοδος <file>get_selection</file> της TreeView επιστρέφει ένα αντικείμενο που λέγεται TreeSelection. Μια TreeSelection είναι όπως μια TreeIter στο ότι είναι βασικά ένας δρομέας που δείχνει σε μια συγκεκριμένη γραμμή, εκτός από το ότι αυτό που δείχνει είναι αυτό που είναι ορατά επισημασμένο καθώς επιλέχτηκε.

note: (itstool) path: section/p
en: After we get the TreeSelection that goes with our TreeView, we ask it to tell us when it changes which row it's pointing to. We do this by connecting its <file>changed</file> signal to the _onSelectionChanged function we wrote. This function changes the text displayed by the Label we just made.
el: Αφού πάρουμε την TreeSelection που πηγαίνει με την TreeView μας, της ζητάμε να μας πει όταν αλλάζει σε ποια γραμμή δείχνει. Το κάνουμε συνδέοντας τι σήμα της <file>changed</file> στη συνάρτηση _onSelectionChanged που γράψαμε. Αυτή η συνάρτηση αλλάζει το εμφανιζόμενο κείμενο με την ετικέτα που μόλις κάναμε.

note: (itstool) path: section/code
en: 
            // Create a grid to organize everything in
            this._grid = new Gtk.Grid;
    
            // Attach the treeview and label to the grid
            this._grid.attach (this._treeView, 0, 0, 1, 1);
            this._grid.attach (this._label, 0, 1, 1, 1);
    
            // Add the grid to the window
            this._window.add (this._grid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
el: 
            // Δημιουργία πλέγματος για οργάνωση όλων μέσα του
            this._grid = new Gtk.Grid;
    
            // Προσάρτηση της προβολής δένδρου και της ετικέτας στο πλέγμα
            this._grid.attach (this._treeView, 0, 0, 1, 1);
            this._grid.attach (this._label, 0, 1, 1, 1);
    
            // Προσθήκη του πλέγματος στο παράθυρο
            this._window.add (this._grid);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },

note: (itstool) path: section/p
en: After we've gotten that out of the way, we create a <link xref="grid.js">Grid</link> to put everything in, then add it to our window and tell the window to show itself and its contents.
el: Αφού το έχουμε βγάλει εκτός, δημιουργούμε ένα <link xref="grid.js">πλέγμα</link> για να τα βάλουμε όλα μέσα, έπειτα το προσθέτουμε στο παράθυρό μας και λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και τα περιεχόμενα του.

note: (itstool) path: section/title
en: Function which handles a changed selection
el: Η συνάρτηση που χειρίζεται μια αλλαγμένη επιλογή

note: (itstool) path: section/code
en: 
        _onSelectionChanged: function () {
    
            // Grab a treeiter pointing to the current selection
            let [ isSelected, model, iter ] = this.selection.get_selected();
    
            // Set the label to read off the values stored in the current selection
            this._label.set_label ("\n" +
                this._listStore.get_value (iter, 0) + " " +
                this._listStore.get_value (iter, 1) + " " +
                this._listStore.get_value (iter, 2) + "\n" +
                this._listStore.get_value (iter, 3));
    
        }
    
    });
el: 
        _onSelectionChanged: function () {
    
            // Σύλληψη ενός treeiter που δείχνει στην τρέχουσα επιλογή
            let [ isSelected, model, iter ] = this.selection.get_selected();
    
            // Ορισμός της ετικέτας  για ανάγνωση των αποθηκευμένων τιμών στην τρέχουσα επιλογή
            this._label.set_label ("\n" +
                this._listStore.get_value (iter, 0) + " " +
                this._listStore.get_value (iter, 1) + " " +
                this._listStore.get_value (iter, 2) + "\n" +
                this._listStore.get_value (iter, 3));
    
        }
    
    });

note: (itstool) path: section/p
en: The line of code with the let statement is a little convoluted, but it's nonetheless the best way to get a TreeIter pointing to the same row as our TreeSelection. It has to create a couple of other object references, but <file>iter</file> is the only one we need.
el: Η γραμμή του κώδικα με την δήλωση let είναι λίγο μπερδεμένη, αλλά παρόλα αυτά είναι ο άριστος τρόπος να κάνετε την TreeIter να δείχνει στην ίδια γραμμή όπως η TreeSelection μας. Πρέπει να δημιουργήσουμε λίγες άλλες αναφορές αντικειμένου, αλλά η <file>iter</file> είναι το μόνο που χρειαζόμαστε.

note: (itstool) path: section/p
en: After we've done that, we call the Label's <file>set_label</file> function, and use the ListStore's <file>get_value</file> function a handful of times to fill in the data we want to put in it. Its parameters are a TreeIter pointing to the row we want to get data from, and the column.
el: Αφού το τελειώσουμε, καλούμε τη συνάρτηση της ετικέτας <file>set_label</file> και χρησιμοποιούμε τη συνάρτηση της ListStore <file>get_value</file> λίγες φορές για να συμπληρώσουμε τα δεδομένα που θέλουμε να τα εισάγουμε. Οι παράμετροι της είναι μια TreeIter που δείχνει στη γραμμή από όπου θέλουμε να πάρουμε δεδομένα και τη στήλη.

note: (itstool) path: section/p
en: Here, we want to get data from all four columns, including the "hidden" one that's not part of the TreeView. This way, we can use our Label to show strings that are too large to fit in the TreeView, and that we don't need to see at a glance.
el: Εδώ, θέλουμε να πάρουμε δεδομένα και από τις τέσσερις στήλες, συμπεριλαμβάνοντας την "κρυφή" που δεν είναι μέρος της TreeView. Έτσι, μπορούμε να χρησιμοποιήσουμε την ετικέτα μας για να εμφανίσουμε συμβολοσειρές που είναι υπερβολικά μεγάλες για προσαρμογή στη TreeView και που δεν χρειαζόμαστε να δούμε με μια ματιά.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new TreeViewExample ();
    app.application.run (ARGV);
el: 
    // Εκτέλεση της εφαρμογής
    let app = new TreeViewExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished TreeViewExample class, and set the application running.
el: Τελικά, δημιουργούμε ένα νέο παράδειγμα της τελειωμένης κλάσης TreeViewExample και εκτελούμε την εφαρμογή.

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const GObject = imports.gi.GObject;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    const Pango = imports.gi.Pango;
    
    const TreeViewExample = new Lang.Class({
        Name: 'TreeView Example with Simple ListStore',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jstreeviewsimpleliststore'
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
    
    
    
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 250,
                default_width: 100,
                border_width: 20,
                title: "My Phone Book"});
    
            // Create the underlying liststore for the phonebook
            this._listStore = new Gtk.ListStore ();
            this._listStore.set_column_types ([
                GObject.TYPE_STRING,
                GObject.TYPE_STRING,
                GObject.TYPE_STRING,
                GObject.TYPE_STRING]);
    
            // Data to go in the phonebook
            let phonebook =
                [{ name: "Jurg", surname: "Billeter", phone: "555-0123",
                    description: "A friendly person."},
                 { name: "Johannes", surname: "Schmid", phone: "555-1234",
                    description: "Easy phone number to remember."},
                 { name: "Julita", surname: "Inca", phone: "555-2345",
                    description: "Another friendly person."},
                 { name: "Javier", surname: "Jardon", phone: "555-3456",
                    description: "Bring fish for his penguins."},
                 { name: "Jason", surname: "Clinton", phone: "555-4567",
                    description: "His cake's not a lie."},
                 { name: "Random J.", surname: "Hacker", phone: "555-5678",
                    description: "Very random!"}];
    
            // Put the data in the phonebook
            for (let i = 0; i &lt; phonebook.length; i++ ) {
                let contact = phonebook [i];
                this._listStore.set (this._listStore.append(), [0, 1, 2, 3],
                    [contact.name, contact.surname, contact.phone, contact.description]);
            }
    
            // Create the treeview
            this._treeView = new Gtk.TreeView ({
                expand: true,
                model: this._listStore });
    
            // Create the columns for the address book
            let firstName = new Gtk.TreeViewColumn ({ title: "First Name" });
            let lastName = new Gtk.TreeViewColumn ({ title: "Last Name" });
            let phone = new Gtk.TreeViewColumn ({ title: "Phone Number" });
    
            // Create a cell renderer for when bold text is needed
            let bold = new Gtk.CellRendererText ({
                weight: Pango.Weight.BOLD });
    
            // Create a cell renderer for normal text
            let normal = new Gtk.CellRendererText ();
    
            // Pack the cell renderers into the columns
            firstName.pack_start (bold, true);
            lastName.pack_start (normal, true);
            phone.pack_start (normal, true);
    
            // Set each column to pull text from the TreeView's model
            firstName.add_attribute (bold, "text", 0);
            lastName.add_attribute (normal, "text", 1);
            phone.add_attribute (normal, "text", 2);
    
            // Insert the columns into the treeview
            this._treeView.insert_column (firstName, 0);
            this._treeView.insert_column (lastName, 1);
            this._treeView.insert_column (phone, 2);
    
            // Create the label that shows details for the name you select
            this._label = new Gtk.Label ({ label: "" });
    
            // Get which item is selected
            this.selection = this._treeView.get_selection();
    
            // When something new is selected, call _on_changed
            this.selection.connect ('changed', Lang.bind (this, this._onSelectionChanged));
    
            // Create a grid to organize everything in
            this._grid = new Gtk.Grid;
    
            // Attach the treeview and label to the grid
            this._grid.attach (this._treeView, 0, 0, 1, 1);
            this._grid.attach (this._label, 0, 1, 1, 1);
    
            // Add the grid to the window
            this._window.add (this._grid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
    
    
    
        _onSelectionChanged: function () {
    
            // Grab a treeiter pointing to the current selection
            let [ isSelected, model, iter ] = this.selection.get_selected();
    
            // Set the label to read off the values stored in the current selection
            this._label.set_label ("\n" +
                this._listStore.get_value (iter, 0) + " " +
                this._listStore.get_value (iter, 1) + " " +
                this._listStore.get_value (iter, 2) + "\n" +
                this._listStore.get_value (iter, 3));
    
        }
    
    });
    
    // Run the application
    let app = new TreeViewExample ();
    app.application.run (ARGV);
el: #!/usr/bin/gjs
    
    const GObject = imports.gi.GObject;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    const Pango = imports.gi.Pango;
    
    const TreeViewExample = new Lang.Class({
        Name: 'TreeView Example with Simple ListStore',
    
        // Δημιουργία της εφαρμογής αυτής καθεαυτής
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jstreeviewsimpleliststore'
            });
    
        // Σύνδεση των σημάτων Connect '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 ();
        },
    
    
    
        // Δόμηση της διεπαφής χρήστη της εφαρμογής
        _buildUI: function() {
    
            // Δημιουργία του παραθύρου της εφαρμογής
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 250,
                default_width: 100,
                border_width: 20,
                title: "My Phone Book"});
    
            // Δημιουργία της υποκείμενης αποθήκης καταλόγων για τον τηλεφωνικό κατάλογο
            this._listStore = new Gtk.ListStore ();
            this._listStore.set_column_types ([
                GObject.TYPE_STRING,
                GObject.TYPE_STRING,
                GObject.TYPE_STRING,
                GObject.TYPE_STRING]);
    
            // Δεδομένα που θα πάνε στον τηλεφωνικό κατάλογο
            let phonebook =
                [{ name: "Jurg", surname: "Billeter", phone: "555-0123",
                    description: "A friendly person."},
                 { name: "Johannes", surname: "Schmid", phone: "555-1234",
                    description: "Easy phone number to remember."},
                 { name: "Julita", surname: "Inca", phone: "555-2345",
                    description: "Another friendly person."},
                 { name: "Javier", surname: "Jardon", phone: "555-3456",
                    description: "Bring fish for his penguins."},
                 { name: "Jason", surname: "Clinton", phone: "555-4567",
                    description: "His cake's not a lie."},
                 { name: "Random J.", surname: "Hacker", phone: "555-5678",
                    description: "Very random!"}];
    
            // Τοποθέτηση των δεδομένων στον τηλεφωνικό κατάλογο
            for (let i = 0; i &lt; phonebook.length; i++ ) {
                let contact = phonebook [i];
                this._listStore.set (this._listStore.append(), [0, 1, 2, 3],
                    [contact.name, contact.surname, contact.phone, contact.description]);
            }
    
            // Δημιουργία της προβολής δένδρου
            this._treeView = new Gtk.TreeView ({
                expand: true,
                model: this._listStore });
    
            // Δημιουργία των στηλών για το βιβλίο διευθύνσεων
            let firstName = new Gtk.TreeViewColumn ({ title: "First Name" });
            let lastName = new Gtk.TreeViewColumn ({ title: "Last Name" });
            let phone = new Gtk.TreeViewColumn ({ title: "Phone Number" });
    
            // Δημιουργία απεικονιστή κελιού για όταν χρειαστεί έντονη γραφή
            let bold = new Gtk.CellRendererText ({
                weight: Pango.Weight.BOLD });
    
            // Δημιουργία απεικονιστή κελιού για κανονικό κείμενο
            let normal = new Gtk.CellRendererText ();
    
            // Συσκευασία των απεικονιστών κελιών σε στήλες
            firstName.pack_start (bold, true);
            lastName.pack_start (normal, true);
            phone.pack_start (normal, true);
    
            // Ορισμός κάθε στήλης να μεταφέρει κείμενο από το πρότυπο προβολής δένδρου 
            firstName.add_attribute (bold, "text", 0);
            lastName.add_attribute (normal, "text", 1);
            phone.add_attribute (normal, "text", 2);
    
            // Εισαγωγή στηλών στην προβολή δένδρου
            this._treeView.insert_column (firstName, 0);
            this._treeView.insert_column (lastName, 1);
            this._treeView.insert_column (phone, 2);
    
            // Δημιουργία της ετικέτας που εμφανίζει λεπτομέρειες για το όνομα που επιλέξατε
            this._label = new Gtk.Label ({ label: "" });
    
            // Λήψη του επιλεγμένου στοιχείου
            this.selection = this._treeView.get_selection();
    
            // Όταν κάτι νέο επιλέγεται, call _on_changed
            this.selection.connect ('changed', Lang.bind (this, this._onSelectionChanged));
    
            // Δημιουργία πλέγματος για οργάνωση όλων μέσα του
            this._grid = new Gtk.Grid;
    
            // Προσάρτηση της προβολής δένδρου και ετικέτας στο πλέγμα
            this._grid.attach (this._treeView, 0, 0, 1, 1);
            this._grid.attach (this._label, 0, 1, 1, 1);
    
            // Προσθήκη του πλέγματος στο παράθυρο
            this._window.add (this._grid);
    
            // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
            this._window.show_all();
        },
    
    
    
        _onSelectionChanged: function () {
    
            // Σύλληψη ενός treeiter που δείχνει στη τρέχουσα επιλογή
            let [ isSelected, model, iter ] = this.selection.get_selected();
    
            // Ορισμός της ετικέτας για ανάγνωση των αποθηκευμένων τιμών στην τρέχουσα επιλογή
            this._label.set_label ("\n" +
                this._listStore.get_value (iter, 0) + " " +
                this._listStore.get_value (iter, 1) + " " +
                this._listStore.get_value (iter, 2) + "\n" +
                this._listStore.get_value (iter, 3));
    
        }
    
    });
    
    // Εκτέλεση της εφαρμογής
    let app = new TreeViewExample ();
    app.application.run (ARGV);

[ctx: text]
note: (itstool) path: info/title
en: Simple TreeView with ListStore (Python)
el: Απλή προβολή δένδρου (Treeview) με αποθήκη καταλόγων (ListStore) (Python)

note: (itstool) path: info/desc
en: A TreeView displaying a ListStore (simpler example)
el: Μια προβολή δένδρου (TreeView) που εμφανίζει μια  αποθήκη δένδρου (TreeStore) (απλό παράδειγμα)

note: (itstool) path: page/title
en: Simple TreeView with ListStore
el: Απλή Treeview με ListStore

note: (itstool) path: section/p
en: The TreeView widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em> stores the data; the <em>View</em> gets change notifications and displays the content of the model; the <em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more information, and for a list of useful methods for TreeModel, see <link xref="model-view-controller.py"/>.
el: Το γραφικό στοιχείο προβολή δένδρου (TreeView) σχεδιάστηκε γύρω από ένα σχέδιο <em>προτύπου/προβολής/ελεγκτή</em>: το <em>πρότυπο</em> αποθηκεύει τα δεδομένα· η <em>Προβολή</em> παίρνει ειδοποιήσεις αλλαγής και εμφανίζει το περιεχόμενο του προτύπου· ο <em>ελεγκτής</em>, τελικά, αλλάζει την κατάσταση του προτύπου και ειδοποιεί την προβολή για αυτές τις αλλαγές. Για περισσότερες πληροφορίες και για μια λίστα χρήσιμων μεθόδων για λίστα πρότυπο δένδρου (TreeModel), δείτε <link xref="model-view-controller.py"/>.

note: (itstool) path: section/p
en: In line 44 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
el: Στη γραμμή 44 το σήμα <code>"changed"</code> συνδέεται με τη συνάρτηση επανάκλησης <code>on_changed()</code> χρησιμοποιώντας <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. Δείτε <link xref="signals-callbacks.py"/> για μια πιο λεπτομερή εξήγηση.

[ctx: text]
note: (itstool) path: info/title
en: Simple Treeview with ListStore (Vala)
el: Απλή προβολή δένδρου (Treeview) με αποθήκη καταλόγων (ListStore) (Vala)

note: (itstool) path: info/desc
en: A widget can display any TreeModel implementation (lists and trees)
el: Ένα γραφικό στοιχείο μπορεί να εμφανίσει οποιαδήποτε υλοποίηση TreeModel (λίστες και δένδρα)

note: (itstool) path: page/title
en: Simple Treeview with ListStore
el: Απλή προβοή δένδρου (Treeview) με αποθήκη καταλόγων (ListStore)

note: (itstool) path: page/p
en: This TreeView displays a simple ListStore with the Selection "changed" signal connected.
el: Αυτή η προβολή δένδρου εμφανίζει μια απλή αποθήκη καταλόγων με το συνδεμένο σήμα επιλογής "αλλαγμένο".

note: (itstool) path: info/desc
en: A TreeView displaying a TreeStore (simpler example)
el: Μια προβολή δένδρου (TreeView) που εμφανίζει μια αποθήκη δένδρου (TreeStore) (απλό παράδειγμα)

note: (itstool) path: page/title
en: Simpler TreeView with TreeStore
el: Πιο απλή προβολή δένδρου με αποθήκη καταλόγων

note: (itstool) path: page/p
en: This TreeView displays a TreeStore.
el: Αυτή η προβολή δένδρου (TreeView) εμφανίζει μια αποθήκη δένδρου (TreeStore).

[ctx: text]
note: (itstool) path: info/title
en: Tutorial for beginners (Python)
el: Μάθημα για αρχάριους (Python)

note: (itstool) path: info/desc
en: A tutorial for beginners who want to learn how to program GUIs using GTK+ in Python.
el: Ένα μάθημα για αρχάριους που θέλουν να μάθουν πώς να προγραμματίσουν διεπαφές χρήστη (GUI) χρησιμοποιώντας GTK+ σε Python.

note: (itstool) path: credit/years
en: 2012 2013
el: 2012, 2013

note: (itstool) path: synopsis/p
en: By following these tutorials you will learn the basics of GUI programming using GTK+ in Python.
el: Παρακολουθώντας αυτά τα μαθήματα θα μάθετε τα βασικά του προγραμματισμού GUI χρησιμοποιώντας GTK+ σε Python.

note: (itstool) path: synopsis/p
en: If you have never programmed before, or are not familiar with the concepts of object oriented programming, you may need to learn a few basics first. The book <link href="http://learnpythonthehardway.org/book/">Learn Python the Hard Way</link> or <link href="http://docs.python.org/tutorial/index.html">The Python Tutorial</link> may be a better place for you to start. You may also be interested in <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/index.html">The Python GTK+ 3 Tutorial</link>. Once you master the basics, be sure to come back and check out these tutorials.
el: Εάν δεν έχετε προγραμματίσει ποτέ πριν, η δεν είστε εξοικειωμένος με τις έννοιες του αντικειμενοστραφούς προγραμματισμού, ίσως χρειαστείτε να μάθετε λίγα βασικά πρώτα. Το βιβλίο <link href="http://learnpythonthehardway.org/book/">Μάθετε Python με το δύσκολο τρόπο</link> ή το <link href="http://docs.python.org/tutorial/index.html">Μάθημα Python</link> ίσως είναι ένας καλύτερος τρόπος για να ξεκινήσετε. Μπορεί επίσης να ενδιαφερόσαστε για το <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/index.html">Μάθημα Python GTK+ 3</link>. Μόλις κατανοήσετε τα βασικά, μπορείτε να επιστρέψετε και να εξετάσετε αυτά τα μαθήματα.

note: (itstool) path: section/title
en: To run the code samples
el: Εκτέλεση των δειγμάτων κώδικα

note: (itstool) path: section/p
en: To run the code samples in the tutorial:
el: Για να εκτελέσετε τα δείγματα κώδικα στο μάθημα:

note: (itstool) path: item/p
en: Type or copy and paste the code into a file, and save the file with a name like <var>filename</var>.py
el: Πληκτρολογήστε ή αντιγράψτε και επικολλήστε τον κώδικα σε ένα αρχείο και αποθηκεύστε το αρχείο με ένα όνομα όπως <var>filename</var>.py

note: (itstool) path: item/p
en: To execute the code, type in the terminal:
el: Για να εκτελέσετε τον κώδικα, πληκτρολογήστε στον τερματικό:

note: (itstool) path: section/p
en: After executing the code, you will either see the widget on your screen, or (if you have mistyped some of the code) you will see an error message that will help you identify the problem.
el: Μετά την εκτέλεση του κώδικα, θα δείτε είτε το γραφικό στοιχείο στην οθόνη σας, ή (εάν έχετε πληκτρολογήσει λαθεμένα μέρος του κώδικα) θα δείτε ένα μήνυμα σφάλματος που θα σας βοηθήσει να ταυτοποιήσετε το πρόβλημα.

note: (itstool) path: section/title
en: A path through the widgets (with some theory)
el: Μια διαδρομή μέσα από γραφικά στοιχεία (με λίγη θεωρία)

note: (itstool) path: section/p
en: The tutorial will walk you through increasingly complex examples and programming theory, but you can also feel free to just go directly to the tutorial that is most helpful to you.
el: Το μάθημα θα σας οδηγήσει μέσα από αυξανόμενης συνθετότητας παραδείγματα και θεωρία προγραμματισμού, αλλά μπορείτε επίσης να πάτε απλά αμέσως στο μάθημα που είναι πιο χρήσιμο σε εσάς.

note: (itstool) path: steps/title
en: Tutorial
el: Μάθημα

note: (itstool) path: steps/title
en: Basic windows
el: Βασικά παράθυρα

note: (itstool) path: steps/title
en: Images and labels
el: Εικόνες και ετικέτες

note: (itstool) path: steps/title
en: Introduction to properties
el: Εισαγωγή στις ιδιότητες

note: (itstool) path: steps/title
en: Grid, separator and scrolling
el: Πλέγμα, διαχωριστικό και κύλιση

note: (itstool) path: steps/title
en: Signals, callbacks and buttons
el: Σήματα, επανακλήσεις και κουμπιά

note: (itstool) path: steps/title
en: Other display widgets
el: Γραφικά στοιχεία άλλης εμφάνισης

note: (itstool) path: steps/title
en: Entry widgets
el: Εισαγωγή γραφικών στοιχείων

note: (itstool) path: steps/title
en: A widget to write and display text
el: Ένα γραφικό στοιχείο που γράφει και εμφανίζει κείμενο

note: (itstool) path: steps/title
en: Dialogs
el: Διάλογοι

note: (itstool) path: steps/title
en: Menus, Toolbars and Tooltips (also: using Glade and GtkBuilder)
el: Μενού, εργαλειοθήκες και συμβουλές οθόνης (επίσης: χρησιμοποιώντας Glade και GtkBuilder)

note: (itstool) path: steps/title
en: TreeViews and ComboBoxes (using the M/V/C design)
el: TreeViews και ComboBoxes (χρησιμοποιώντας τη σχεδίαση M/V/C)

note: (itstool) path: steps/title
en: Custom widget
el: Προσαρμοσμένο γραφικό στοιχείο

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in Vala
el: Μαθήματα, δείγματα κώδικα και παραδείγματα πλατφόρμας σε Vala

note: (itstool) path: section/title
en: Code samples and tutorial
el: Δείγματα κώδικα και μάθημα

[ctx: text]
note: (itstool) path: info/title
en: Weather application (JavaScript)
el: Εφαρμογή καιρού (JavaScript)

note: (itstool) path: info/desc
en: How to plan an application that uses asynchronous calls. Asynchronous calls will be presented through a weather application.
el: Πώς να σχεδιαστεί μια εφαρμογή που χρησιμοποιεί ασύγχρονες κλήσεις. Οι ασύγχρονες κλήσεις θα αναπαριστώνται μέσα από μια εφαρμογή καιρού.

note: (itstool) path: page/title
en: Weather application
el: Εφαρμογή καιρού

note: (itstool) path: synopsis/p
en: In this guide well construct a weather application using asynchronous calls. Weather information in this example is fetched from geonames.org and the application is using the <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes </link> to place your weather request. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we we'll go through the following parts:
el: Σε αυτόν τον οδηγό πρόκειται να κατασκευάσουμε μια εφαρμογή καιρού χρησιμοποιώντας ασύγχρονες κλήσεις. Οι πληροφορίες του καιρού σε αυτό το παράδειγμα παρέχονται από τον geonames.org και η εφαρμογή χρησιμοποιεί το <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">κώδικες ICAO</link> για να τοποθετήσει την αίτηση σας για τον καιρό. Για να γράψετε και να εκτελέσετε οι ίδιοι τα παραδείγματα του κώδικα, χρειάζεστε έναν επεξεργαστή για να γράψετε τον κώδικα, τερματικό και GNOME 3 ή μεταγενέστερο εγκατεστημένο στον υπολογιστή σας. Σε αυτόν τον οδηγό θα εξετάσουμε τα παρακάτω μέρη:

note: (itstool) path: item/p
en: <link xref="#planningUi">Planning the graphical user interface</link>
el: <link xref="#planningUi">Σχεδιασμός της γραφικής διεπαφής χρήστη</link>

note: (itstool) path: item/p
en: <link xref="#asynchronous">Asynchronous calls</link>
el: <link xref="#asynchronous">Ασύγχρονες κλήσεις</link>

note: (itstool) path: item/p
en: <link xref="#main">The main program file</link>
el: <link xref="#main">Το κύριο αρχείο του προγράμματος</link>

note: (itstool) path: item/p
en: <link xref="#main">Local library GeoNames</link>
el: <link xref="#main">Τοπική βιβλιοθήκη GeoNames</link>

note: (itstool) path: item/p
en: <link xref="#main">Autotools and Icons</link>
el: <link xref="#main">Αυτόματα εργαλεία και εικονίδια</link>

note: (itstool) path: section/title
en: Planning the graphical user interface
el: Σχεδιασμός της γραφικής διεπαφής χρήστη

note: (itstool) path: section/p
en: Structuring an application for GNOME 3 means you will be using <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link>. The most important thing is to remember that the main window will only accept one widget. You must plan your structure accordingly (this example is using Gtk.Grid). A useful method is to draw out the main window and place every widget needed inside that box. By looking at an image of your future application it is easier to tell what are the relations between widgets. For example Gtk.Grid places your widgets in relation to other widgets, so after the first widget is in place, placing widgets can be done in relation to any widget on the grid.
el: Δομώντας μια εφαρμογή για το GNOME 3 σημαίνει τη χρήση του <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link>. Το πιο σημαντικό πράγμα είναι να θυμόσαστε ότι το κύριο παράθυρο θα αποδεχθεί μόνο ένα γραφικό στοιχείο. Πρέπει να σχεδιάσετε τη δομή σας ανάλογα (αυτό το παράδειγμα χρησιμοποιεί Gtk.Grid). Μια χρήσιμη μέθοδος είναι η σχεδίαση του κύριου παραθύρου και η τοποθέτηση κάθε απαιτούμενου γραφικού στοιχείου μέσα σε αυτό το πλαίσιο. Κοιτώντας μια εικόνα της μελλοντικής σας εφαρμογής είναι ευκολότερο να πείτε ποιες είναι οι σχέσεις μεταξύ γραφικών στοιχείων. Για παράδειγμα Gtk.Grid τοποθετεί τα γραφικά στοιχεία σας σε σχέση με τα άλλα γραφικά στοιχεία, έτσι μετά τη τοποθέτηση του πρώτου γραφικού στοιχείου στη θέση του, η τοποθέτηση των γραφικών στοιχείων μπορεί να γίνει σε σχέση με οποιοδήποτε γραφικό στοιχείο στο πλέγμα.

note: (itstool) path: section/title
en: Asynchronous calls
el: Ασύγχρονες κλήσεις

note: (itstool) path: section/p
en: With many programming languages, all operations are run synchronously - you tell the program to do something, and it will wait until that action completes before proceeding. This is however bad for graphical user interfaces, as then the whole application will be frozen while the program waits for the operation. Going asynchronous (async) helps here. With async calls, your UI won't be blocked with any requests. Async calls make your application more flexible and better equipped to handle situations when calls take more time than expected or for some reason get jammed. Async calls can be used for example file system I/O and for slower calculations in the background.
el: Με πολλές προγραμματιστικές γλώσσες, όλες οι λειτουργίες εκτελούνται σύγχρονα - λέτε στο πρόγραμμα να κάνει κάτι και θα περιμένετε μέχρι αυτή η πράξη να ολοκληρωθεί πριν να συνεχίσετε. Αυτό όμως είναι κακό για τη γραφική διεπαφή χρήστη, καθώς όλη η εφαρμογή παγώνει, ενώ το πρόγραμμα περιμένει τη λειτουργία. Πηγαίνοντας ασύγχρονα (async) βοηθά εδώ. Με ασύγχρονες κλήσεις, το UI σας δεν θα φραχτεί με αιτήσεις. Οι ασύγχρονες κλήσεις κάνουν την εφαρμογή σας πιο εύχρηστη και καλύτερα εξοπλισμένη για χειρισμό καταστάσεων όταν οι κλήσεις παίρνουν περισσότερο χρόνο από το αναμενόμενο ή για κάποιο λόγο κολλάνε. Οι ασύγχρονες κλήσεις μπορούν να χρησιμοποιηθούν για παράδειγμα με αρχείο συστήματος I/O και για πιο αργούς υπολογισμούς στο παρασκήνιο.

note: (itstool) path: section/p
en: In this example we have to get data from geonames.org. While we do that we want the rest of our program to continue. If we wouldn't get any information from geonames.org for the lack of internet connection and this would be a synchronous application we would never get to the point where our main_quit() is processed correctly and the application would have to killed from Terminal.
el: Σε αυτό το παράδειγμα πρέπει να πάρουμε δεδομένα από το geonames.org. Ενώ κάνουμε αυτό θέλουμε το υπόλοιπο πρόγραμμα να συνεχίσει. Εάν δεν παίρναμε καμιά πληροφορία από το geonames.org λόγω έλλειψης σύνδεσης με το διαδίκτυο και αυτό ήταν μια σύγχρονη εφαρμογή δεν θα μπορούσαμε ποτέ να πάμε στο σημείο όπου το main_quit() συνεχίζει σωστά και η εφαρμογή θα έπρεπε να θανατωθεί από το τερματικό.

note: (itstool) path: section/title
en: The different parts of the program
el: Τα διαφορετικά μέρη του προγράμματος

note: (itstool) path: page/title
en: The main program file
el: Το κύριο αρχείο του προγράμματος

note: (itstool) path: synopsis/p
en: In this part of the guide well construct the main program file of the weather application. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this part we we'll go through the following parts:
el: Σε αυτό το τμήμα του οδηγού θα κατασκευάσουμε το κύριο αρχείο του προγράμματος της εφαρμογής καιρού. Για να γράψετε και να τρέξετε όλα τα παραδείγματα κώδικα οι ίδιοι, χρειαζόσαστε έναν επεξεργαστή για το γράψιμο του κώδικα, τερματικό και GNOME 3 ή μεταγενέστερο εγκατεστημένο στον υπολογιστή σας. Σε αυτό το τμήμα θα εξετάσουμε τα παρακάτω μέρη:

note: (itstool) path: item/p
en: <link xref="#widgets">Adding a grid and all the necessary widgets to it</link>
el: <link xref="#widgets">Προσθήκη πλέγματος και όλων των απαραίτητων γραφικών στοιχείων σε αυτό</link>

note: (itstool) path: item/p
en: <link xref="#asynccall">Requesting the weather information asynchronously</link>
el: <link xref="#asynccall">Αίτηση των πληροφοριών καιρού ασύγχρονα</link>

note: (itstool) path: item/p
en: <link xref="#connectingbuttons">Connecting signals to button and entry</link>.
el: <link xref="#connectingbuttons">Σύνδεση σημάτων σε κουμπί και καταχώριση</link>.

note: (itstool) path: section/p
en: This line tells how to run the script. It needs to be the first line of the code and it needs to be executable. To get the execution rights go to Terminal and run in right folder: chmod +x scriptname. Or you can use the graphical filemanager. Just go to the right folder where your code is, right click you code file, choose properties, click the permissions tab and check the box for allow executing file as a program
el: Αυτή η γραμμή λέει πώς θα εκτελεστεί το σενάριο. Πρέπει να είναι η πρώτη γραμμή του κώδικα και να είναι εκτελέσιμη. Για λήψη των δικαιωμάτων εκτέλεσης πηγαίνετε στον τερματικό και εκτελέστε στον σωστό φάκελο: chmod +x όνομα σεναρίου. Ή μπορείτε να χρησιμοποιήσετε τον διαχειριστή αρχείου γραφικών. Απλά πηγαίνετε στον σωστό φάκελο όπου είναι ο κώδικας σας δεξί κλικ στο αρχείο του κώδικα σας, επιλέξτε ιδιότητες, κλικ στην καρτέλα δικαιωμάτων και σημειώστε το πλαίσιο για να επιτραπεί η εκτέλεση του αρχείου ως πρόγραμμα

note: (itstool) path: section/p
en: In order to have a working program we need to import a GObject Introspection -library to our use. For working UI, we need Gtk. Gtk is imported in the beginning so we have it in our use everywhere. We also import our own local JavaScript library geonames to our use here.
el: Για να έχουμε ένα αποτελεσματικό πρόγραμμα χρειαζόμαστε να εισάγουμε μια βιβλιοθήκη GObject αυτανάλυσης για χρήση. Για χρήση UI, χρειαζόμαστε Gtk. Το Gtk εισάγεται στην αρχή, έτσι το έχουμε για χρήση παντού. Εισάγουμε επίσης τη δικιά μας τοπική βιβλιοθήκη JavaScript geonames για να χρησιμοποιηθεί εδώ.

note: (itstool) path: section/code
en: 
    // Initialize the gtk
    Gtk.init(null, 0);
    //create your window, name it and connect the x to quit function. Remember that window is a taken word
    var weatherwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
    weatherwindow.title = "Todays weather";
    //Window only accepts one widget and a title. Further structure with Gtk.boxes of similar
    weatherwindow.connect("destroy", function(){Gtk.main_quit()});
    
    weatherwindow.show_all();
    //and run it
    Gtk.main();
el: 
    // Αρχικοποίηση της gtk
    Gtk.init(null, 0);
    //Δημιουργία του παραθύρου σας, ονομασία του και σύνδεσή του x με τη συνάρτηση εξόδου. Να θυνάστε ότι το παράθυρο είναι μια δεδομένη λέξη
    var weatherwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
    weatherwindow.title = "Todays weather";
    //Το παράθυρο δέχεται μόνο ένα γραφικό στοιχείο και έναν τίτλο. Παραπέρα δομή με παρόμοια Gtk.boxes
    weatherwindow.connect("destroy", function(){Gtk.main_quit()});
    
    weatherwindow.show_all();
    //και εκτέλεσή του
    Gtk.main();

note: (itstool) path: section/title
en: Adding a grid and all the necessary widgets to it
el: Προσθήκη πλέγματος και όλων των απαραίτητων γραφικών στοιχείων σε αυτό

note: (itstool) path: section/code
en: 
    var grid = new Gtk.Grid();
    weatherwindow.add(grid);
    
    //We initialize the icon here, but deside the file later in geonames.js.
    var weatherIcon = new Gtk.Image();
    
    //Set some labels to your window
    var label1 = new Gtk.Label({label: ""});
    var label2 = new Gtk.Label({label: "Looking in the sky..."});
    var label3 = new Gtk.Label({label: ""});
    
    var entry = new Gtk.Entry();
    entry.set_width_chars(4);
    entry.set_max_length(4);
    var label4 = new Gtk.Label({label: "Enter ICAO station for weather: "});
    var button1 = new Gtk.Button({label: "search!"});
    
    grid.attach(label4, 2, 1, 1, 1);
    grid.attach_next_to(label1,label4,3,1,1);
    grid.attach_next_to(label2,label1,3,1,1);
    grid.attach_next_to(label3,label2,3,1,1);
    grid.attach_next_to(entry,label4,1,1,1);
    grid.attach_next_to(button1,entry,1,1,1);
    grid.attach_next_to(weatherIcon,label2,1,1,1)
el: 
    var grid = new Gtk.Grid();
    weatherwindow.add(grid);
    
    //Αρχικοποιούμε εδώ το εικονίδιο, αλλά αποφασίζει το αρχείο αργότερα στο geonames.js.
    var weatherIcon = new Gtk.Image();
    
    //Ορισμός μερικών ετικετών στο παράθυρό σας
    var label1 = new Gtk.Label({label: ""});
    var label2 = new Gtk.Label({label: "Looking in the sky..."});
    var label3 = new Gtk.Label({label: ""});
    
    var entry = new Gtk.Entry();
    entry.set_width_chars(4);
    entry.set_max_length(4);
    var label4 = new Gtk.Label({label: "Enter ICAO station for weather: "});
    var button1 = new Gtk.Button({label: "search!"});
    
    grid.attach(label4, 2, 1, 1, 1);
    grid.attach_next_to(label1,label4,3,1,1);
    grid.attach_next_to(label2,label1,3,1,1);
    grid.attach_next_to(label3,label2,3,1,1);
    grid.attach_next_to(entry,label4,1,1,1);
    grid.attach_next_to(button1,entry,1,1,1);
    grid.attach_next_to(weatherIcon,label2,1,1,1)

note: (itstool) path: section/p
en: In this section we create the grid we are going to use for positioning the widgets. All the buttons, labels and entrys are initialized and placed on the grid. As seen from the placing of the different widgets, they don't need to be related only to one widget. At this point some of the labels don't have any content. The content for those widgets is applied later. If you run the application at this stage, you have the UI ready, but the widgets are not connected to anything. For this we need to first build the weather searching local library, and then get the information we need asynchronously. When we have our local library ready we can connect it to the necessary widgets.
el: Σε ενότητα αυτήν την ενότητα δημιουργούμε το πλέγμα που πρόκειται να χρησιμοποιήσουμε για τοποθέτηση των γραφικών στοιχείων. Όλα τα κουμπιά, ετικέτες και καταχωρίσεις αρχικοποιούνται και τοποθετούνται στο πλέγμα. Όπως φαίνεται από την τοποθέτηση των διαφορετικών γραφικών στοιχείων, δεν χρειάζεται να σχετίζονται μόνο με ένα γραφικό στοιχείο. Σε αυτό το σημείο μερικές από τις ετικέτες δεν έχουν περιεχόμενο. Το περιεχόμενο για αυτά τα γραφικά στοιχεία εφαρμόζεται αργότερα. Εάν τρέξετε την εφαρμογή σε αυτό το στάδιο, θα έχετε έτοιμο το UI, αλλά τα γραφικά στοιχεία δεν συνδέονται με τίποτα. Για αυτό χρειαζόμαστε πρώτα να κατασκευάσουμε την τοπική βιβλιοθήκη αναζήτησης καιρού και έπειτα να πάρουμε την πληροφορία που χρειαζόμαστε ασύγχρονα. Όταν έχουμε την τοπική μας βιβλιοθήκη έτοιμη, μπορούμε να το συνδέσουμε με τα απαραίτητα γραφικά στοιχεία.

note: (itstool) path: section/title
en: Requesting the weather information asynchronously
el: Αίτηση των πληροφοριών καιρού ασύγχρονα

note: (itstool) path: section/code
en: 
    function getWeatherForStation() {
      var station = entry.get_text();
    
      var GeoNames = new WeatherService.GeoNames(station); //"EFHF";
    
      GeoNames.getWeather(function(error, weather) {
        //this here works bit like signals. This code will be run when we have weather.
        if (error) {
          label2.set_text("Suggested ICAO station does not exist Try EFHF");
        return; }
        weatherIcon.file = GeoNames.getIcon(weather);
    
        label1.set_text("Temperature is " + weather.weatherObservation.temperature + " degrees.");
        if (weather.weatherObservation.weatherCondition !== "n/a"){
          label2.set_text("Looks like there is " + weather.weatherObservation.weatherCondition + " in the sky.");
          }
        else {
          label2.set_text("Looks like there is " + weather.weatherObservation.clouds + " in the sky.");
        }
        label3.set_text("Windspeed is " + weather.weatherObservation.windSpeed + " m/s")
        // ...
      });
    }
el: 
    function getWeatherForStation() {
      var station = entry.get_text();
    
      var GeoNames = new WeatherService.GeoNames(station); //"EFHF";
    
      GeoNames.getWeather(function(error, weather) {
        //Αυτό εδώ δουλεύει λίγο σαν σήματα. Αυτός ο  κώδικας θα εκτελεστεί όταν έχουμε καιρό.
        if (error) {
          label2.set_text("Suggested ICAO station does not exist Try EFHF");
        return; }
        weatherIcon.file = GeoNames.getIcon(weather);
    
        label1.set_text("Temperature is " + weather.weatherObservation.temperature + " degrees.");
        if (weather.weatherObservation.weatherCondition !== "n/a"){
          label2.set_text("Looks like there is " + weather.weatherObservation.weatherCondition + " in the sky.");
          }
        else {
          label2.set_text("Looks like there is " + weather.weatherObservation.clouds + " in the sky.");
        }
        label3.set_text("Windspeed is " + weather.weatherObservation.windSpeed + " m/s")
        // ...
      });
    }

note: (itstool) path: section/p
en: This function is dedicated for calling for the weather information and updating labels and icons accordingly. In the beginning of the function we get the user input for the search. So here for the first time we use our own library and assign it to variable GeoNames. While assigning WeatherService we give it the station. The firs thing we do with GeoNames is to request weather. Everything after GeoNames.getWeather(function(error, weather) happens only if we either get an error message or weather information. If either doesn't come, the rest of the program works as normal, so main_Quit works.
el: Αυτή η λειτουργία αφιερώνεται στην κλήση για τις πληροφορίες καιρού και ενημέρωση ετικετών και εικονιδίων ανάλογα. Στην αρχή της λειτουργίας παίρνουμε την είσοδο χρήστη για αναζήτηση. Έτσι εδώ για την πρώτη φορά χρησιμοποιούμε τη δική μας βιβλιοθήκη και τις αποδίδουμε τη μεταβλητή GeoNames. Ενώ εκχωρούμε την WeatherService της δίνουμε τον σταθμό. Το πρώτο πράγμα που κάνουμε με τα GeoNames είναι η αίτηση καιρού. Οτιδήποτε μετά τα GeoNamesgetWeather.getWeather (συνάρτηση (σφάλμα, καιρός) συμβαίνει μόνο εάν είτε πάρουμε ένα μήνυμα σφάλματος ή πληροφορίες καιρού. Εάν δεν έρθει κανένα, το υπόλοιπο του προγράμματος δουλεύει τόσο κανονικά, όσο το main_Quit δουλεύει.

note: (itstool) path: section/title
en: Connecting signals to button and entry.
el: Σύνδεση σημάτων σε κουμπί και καταχώριση.

note: (itstool) path: section/p
en: And finally we have the connections that make the whole application run as it should. We connect both the entry and the button to do the same thing, getting the weather. So it doesn't matter weather you press enter of click the search button.
el: Και τελικά έχουμε τις συνδέσεις που κάνουν όλη την εφαρμογή να τρέχει όπως θα έπρεπε. Συνδέουμε και την καταχώριση και το κουμπί για να κάνουν το ίδιο πράγμα, παίρνοντας τον καιρό. Έτσι δεν πειράζει, εάν πατήσετε εάν πατήσετε εισαγωγή ή κλικ στο κουμπί αναζήτησης.

note: (itstool) path: section/p
en: Weatherapp.js file looks like this:
el: Το αρχείο Weatherapp.js μοιάζει με αυτό:

note: (itstool) path: section/code
en: 
    #!/usr/bin/gjs
    //The previous line is a hash bang tells how to run the script.
    // Note that the script has to be executable (run in terminal in the right folder: chmod +x scriptname)
    
    var Gtk = imports.gi.Gtk;
    
    const WeatherService = imports.geonames;
    //Bring your own library from same folder (as set in GJS_PATH). If using autotools .desktop will take care of this
    
    // Initialize the gtk
    Gtk.init(null, 0);
    //create your window, name it and connect the x to quit function. Remember that window is a taken word
    var weatherwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
    weatherwindow.title = "Todays weather";
    //Window only accepts one widget and a title. Further structure with Gtk.boxes of similar
    weatherwindow.connect("destroy", function(){Gtk.main_quit()});
    //We initialize the icon here, but deside the file later in geonames.js.
    
    var weatherIcon = new Gtk.Image();
    
    //Set some labels to your window
    var label1 = new Gtk.Label({label: ""});
    var label2 = new Gtk.Label({label: "Looking in the sky..."});
    var label3 = new Gtk.Label({label: ""});
    
    var grid = new Gtk.Grid();
    weatherwindow.add(grid);
    
    var entry = new Gtk.Entry();
    entry.set_width_chars(4);
    entry.set_max_length(4);
    var label4 = new Gtk.Label({label: "Enter ICAO station for weather: "});
    var button1 = new Gtk.Button({label: "search!"});
    
    //some weather
    
    entry.connect("key_press_event", function(widget, event) {
      // FIXME: Get weather on enter (key 13)
      if (entry.get_text().length === 4) {
        // Enough is enough
        getWeatherForStation();
      }
      return false;
    });
    
    button1.connect("clicked", function(){
      getWeatherForStation();
    });
    
    function getWeatherForStation() {
      var station = entry.get_text();
    
      var GeoNames = new WeatherService.GeoNames(station); //"EFHF";
    
      GeoNames.getWeather(function(error, weather) {
        //this here works bit like signals. This code will be run when we have weather.
        if (error) {
          label2.set_text("Suggested ICAO station does not exist Try EFHF");
        return; }
        weatherIcon.file = GeoNames.getIcon(weather);
    
        label1.set_text("Temperature is " + weather.weatherObservation.temperature + " degrees.");
        if (weather.weatherObservation.weatherCondition !== "n/a"){
          label2.set_text("Looks like there is " + weather.weatherObservation.weatherCondition + " in the sky.");
          }
        else {
          label2.set_text("Looks like there is " + weather.weatherObservation.clouds + " in the sky.");
        }
        label3.set_text("Windspeed is " + weather.weatherObservation.windSpeed + " m/s")
        // ...
      });
    }
    
    grid.attach(label4, 2, 1, 1, 1);
    grid.attach_next_to(label1,label4,3,1,1);
    grid.attach_next_to(label2,label1,3,1,1);
    grid.attach_next_to(label3,label2,3,1,1);
    grid.attach_next_to(entry,label4,1,1,1);
    grid.attach_next_to(button1,entry,1,1,1);
    grid.attach_next_to(weatherIcon,label2,1,1,1)
    weatherwindow.show_all();
    //and run it
    Gtk.main();
el: 
    #!/usr/bin/gjs
    //Η προηγούμενη γραμμή αρχίζει με δίεση-θαυμαστικό που λέει π να εκτελεστεί το σενάριο.
    // Σημειώστε ότι το σενάριο πρέπει να είναι εκτελέσιμο (εκτέλεση σε τερματικό στον δεξιό φάκελο: chmod +x scriptname)
    
    var Gtk = imports.gi.Gtk;
    
    const WeatherService = imports.geonames;
    //Μεταφορά της δικής σας βιβλιοθήκης από τον ίδιο φάκελο (όπως ορίστηκε στο GJS_PATH). Αν χρησιμοποιείτε autotools .desktop θα φροντίσει για αυτό
    
    // Αρχικοποίηση της gtk
    Gtk.init(null, 0);
    //Δημιουργία του παραθύρου σας, ονομασία του, και σύνδεση του x με τη συνάρτηση εξόδου. Να θυμάστε ότι το παράθυρο είναι μια δεσμευμένη λέξη
    var weatherwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
    weatherwindow.title = "Todays weather";
    //Το παράθυρο δέχεται μόνο ένα γραφικό στοιχείο και έναν τίτλο. Παραπέρα δομή όμοια μεGtk.boxes
    weatherwindow.connect("destroy", function(){Gtk.main_quit()});
    //We initialize the icon here, but deside the file later in geonames.js.
    
    var weatherIcon = new Gtk.Image();
    
    //Ορισμός μερικών ετικετών στο παράθυρό σας
    var label1 = new Gtk.Label({label: ""});
    var label2 = new Gtk.Label({label: "Looking in the sky..."});
    var label3 = new Gtk.Label({label: ""});
    
    var grid = new Gtk.Grid();
    weatherwindow.add(grid);
    
    var entry = new Gtk.Entry();
    entry.set_width_chars(4);
    entry.set_max_length(4);
    var label4 = new Gtk.Label({label: "Enter ICAO station for weather: "});
    var button1 = new Gtk.Button({label: "search!"});
    
    //Κάποιος καιρός
    
    entry.connect("key_press_event", function(widget, event) {
      // FIXME: Λήψη καιρού με την εισαγωγή (πλήκτρο 13)
      if (entry.get_text().length === 4) {
        // Enough is enough
        getWeatherForStation();
      }
      return false;
    });
    
    button1.connect("clicked", function(){
      getWeatherForStation();
    });
    
    function getWeatherForStation() {
      var station = entry.get_text();
    
      var GeoNames = new WeatherService.GeoNames(station); //"EFHF";
    
      GeoNames.getWeather(function(error, weather) {
        //Αυτό εδώ δουλεύει λίγο σαν σήματα. Αυτός ο κώδικας θα εκτελεστεί όταν έχουμε καιρό.
        if (error) {
          label2.set_text("Suggested ICAO station does not exist Try EFHF");
        return; }
        weatherIcon.file = GeoNames.getIcon(weather);
    
        label1.set_text("Temperature is " + weather.weatherObservation.temperature + " degrees.");
        if (weather.weatherObservation.weatherCondition !== "n/a"){
          label2.set_text("Looks like there is " + weather.weatherObservation.weatherCondition + " in the sky.");
          }
        else {
          label2.set_text("Looks like there is " + weather.weatherObservation.clouds + " in the sky.");
        }
        label3.set_text("Windspeed is " + weather.weatherObservation.windSpeed + " m/s")
        // ...
      });
    }
    
    grid.attach(label4, 2, 1, 1, 1);
    grid.attach_next_to(label1,label4,3,1,1);
    grid.attach_next_to(label2,label1,3,1,1);
    grid.attach_next_to(label3,label2,3,1,1);
    grid.attach_next_to(entry,label4,1,1,1);
    grid.attach_next_to(button1,entry,1,1,1);
    grid.attach_next_to(weatherIcon,label2,1,1,1)
    weatherwindow.show_all();
    //και εκτέλεσή του
    Gtk.main();

note: (itstool) path: section/p
en: Running until you have all the autotools files ready. :
el: Εκτέλεση μέχρι να έχετε όλα τα αρχεία autotools έτοιμα. :

note: (itstool) path: section/p
en: Use this command on terminal while developing your modules. When calling your program in this manner it knows where to find your custom JSlibraries, in this case geonames.js.
el: Χρησιμοποιήστε αυτήν την εντολή στο τερματικό ενώ αναπτύσσετε τα αρθρώματά σας. Όταν καλείτε το πρόγραμμά σας με αυτόν τον τρόπο, ξέρει πού θα βρει τις προσαρμοσμένες JSlibraries, σε αυτήν την περίπτωση το geonames.js.

note: (itstool) path: page/title
en: Autotools and Icons
el: Αυτόματα εργαλεία (Autotools) και εικονίδια

note: (itstool) path: synopsis/p
en: In this part of the guide well construct the autotools and custom icons needed for weather application to be a seamless part of your desktop. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we we'll go through the following parts:
el: Σε αυτό το τμήμα του οδηγού θα κατασκευάσουμε τα αυτόματα εργαλεία και θα προσαρμόσουμε τα απαιτούμενα εικονίδια για την εφαρμογή καιρού για να είναι άρραφο μέρος της επιφάνειας εργασίας σας. Για να γράψετε και να τρέξετε όλα τα παραδείγματα κώδικα οι ίδιοι, χρειαζόσαστε έναν επεξεργαστή για να γράψιμο του κώδικα, τερματικό και GNOME 3 ή μεταγενέστερο εγκατεστημένο στον υπολογιστή σας. Σε αυτόν τον οδηγό θα εξετάσουμε τα παρακάτω μέρη:

note: (itstool) path: item/p
en: <link xref="#autotools"> Autotools</link>
el: <link xref="#autotools">Αυτόματα εργαλεία (Autotools)</link>

note: (itstool) path: item/p
en: <link xref="#icons">Custom icons for your application</link>
el: <link xref="#icons">Προσαρμοσμένα εικονίδια για την εφαρμογή σας</link>

note: (itstool) path: section/title
en: Autotools and necessary files
el: Αυτόματα εργαλεία (Autotools) και απαραίτητα αρχεία

note: (itstool) path: section/p
en: Having more than one file in your folder makes using autotools a bit tricky. You need the .desktop file, autogen.sh, Makefile.am, configure.ac and as a new file: myapp.sh.in file. Hacking the autotools file is a complicated field. More information can be found in many different sources, <link href="http://en.wikipedia.org/wiki/GNU_build_system">the wikipedia article</link> provides a good overview on the subject.
el: Έχοντας περισσότερα από ένα αρχεία στον φάκελό σας κάνει τη χρήση του autotools λίγο περίπλοκο. Χρειαζόσαστε το αρχείο .desktop, autogen.sh, Makefile.am, configure.ac και ως νέο αρχείο: το αρχείο myapp.sh.in. Η επεξεργασία του αρχείου autotools είναι ένα περίπλοκο πεδίο. Περισσότερες πληροφορίες μπορείτε να βρείτε σε πολλές διαφορετικές πηγές, <link href="http://en.wikipedia.org/wiki/GNU_build_system">το άρθρο της βίκι</link> παρέχει μια καλή επισκόπηση του θέματος.

note: (itstool) path: section/p
en: The thing to notice in this file is that the Exec line will make this .desktop file work only after running all the other makefiles. Weatherapp.sh is a small shell script created with the weatherapp.sh.in.
el: Αυτό που πρέπει να σημειώσετε σε αυτό το αρχείο είναι ότι η γραμμή Exec θα κάνει αυτό το αρχείο .desktop να δουλέψει μόνο μετά την εκτέλεση όλων των άλλων makefiles. Το Weatherapp.sh είναι ένα μικρό σενάριο κελύφους που δημιουργήθηκε με το weatherapp.sh.in.

note: (itstool) path: section/p
en: This file is a template to the file Makefile will do to be run from .desktop.
el: Αυτό το αρχείο είναι ένα πρότυπο στο αρχείο Makefile για να εκτελεστεί από .desktop.

note: (itstool) path: section/code
en: 
    # The actual runnable program is set to the SCRIPTS primitive. Prefix bin_ tells where to copy this
    bin_SCRIPTS = weatherapp.js geonames.js weatherapp.sh
    # List of files to be distributed
    EXTRA_DIST=  \
        $(bin_SCRIPTS) \
        $(private_icons)	\
    	  $(NULL)
    
    CLEANFILES =
    
    # The desktop files
    desktopdir = $(datadir)/applications
    desktop_DATA =weatherapp.desktop
    
    # convenience command for doing Makefile variable substitutions in non-Makefile
    # files (scripts, service files, etc.)
    do_subst = sed -e 's|@abs_top_srcdir[@]|$(abs_top_srcdir)|g' \
                   -e 's|@abs_top_builddir[@]|$(abs_top_builddir)|g' \
                   -e 's|@localedir[@]|$(localedir)|g' \
                   -e 's|@bindir[@]|$(bindir)|g' \
                   -e 's|@libexecdir[@]|$(libexecdir)|g' \
    	       -e 's|@pkglibdir[@]|$(pkglibdir)|g' \
    	       -e 's|@pkgdatadir[@]|$(pkgdatadir)|g' \
    	       -e 's|@have_libnotify[@]|$(HAVE_LIBNOTIFY)|g' \
    	       -e 's|@have_libsoup[@]|$(HAVE_LIBSOUP)|g' \
    	       -e 's|@have_cheese[@]|$(HAVE_CHEESE)|g'
    
    weatherapp.sh: weatherapp.sh.in
    	$(AM_V_GEN) $(do_subst) $&lt; &gt; $@
    	chmod +x $@
    
    CLEANFILES += weatherapp.sh
    EXTRA_DIST += weatherapp.sh.in
    
    #the application icon
    appicondir=$(datadir)/icons/hicolor/scalable/apps
    appicon_DATA=weather-icon.svg
    
    #icons in the application
    NULL =
    
    private_icons = \
    	weather-clear.svg \
      weather-few-clouds.svg \
      weather-fog.svg \
      weather-icon.svg \
      weather-overcast.svg \
      weather-showers.svg \
      weather-showers-scattered.svg \
      weather-snow.svg \
      $(NULL)
    
    install-icons:
    	for icon in $(private_icons); do \
    		mkdir -p $(DESTDIR)$(pkgdatadir)/icons/; \
    		$(INSTALL_DATA) $(srcdir)/$$icon $(DESTDIR)$(pkgdatadir)/icons/; \
    	done
    
    install-data-local: install-icons
el: 
    # Το ενεργό εκτελέσιμο πρόγραμμα ορίζεται στο θεμελιακό SCRIPTS . Το πρόθεμα bin_ λέει πού θα αντιγραφεί αυτό
    bin_SCRIPTS = weatherapp.js geonames.js weatherapp.sh
    # Ο κατάλογος αρχείων για διανομή
    EXTRA_DIST=  \
        $(bin_SCRIPTS) \
        $(private_icons)	\
    	  $(NULL)
    
    CLEANFILES =
    
    # Τα αρχεία της επιφάνειας εργασίας
    desktopdir = $(datadir)/applications
    desktop_DATA =weatherapp.desktop
    
    # Κατάλληλη εντολή για εκτέλεση αντικαταστάσεων μεταβλητής Makefile σε μη Makefile
    # Αρχεία (σενάρια, αρχεία υπηρεσίας, κλπ.)
    do_subst = sed -e 's|@abs_top_srcdir[@]|$(abs_top_srcdir)|g' \
                   -e 's|@abs_top_builddir[@]|$(abs_top_builddir)|g' \
                   -e 's|@localedir[@]|$(localedir)|g' \
                   -e 's|@bindir[@]|$(bindir)|g' \
                   -e 's|@libexecdir[@]|$(libexecdir)|g' \
    	       -e 's|@pkglibdir[@]|$(pkglibdir)|g' \
    	       -e 's|@pkgdatadir[@]|$(pkgdatadir)|g' \
    	       -e 's|@have_libnotify[@]|$(HAVE_LIBNOTIFY)|g' \
    	       -e 's|@have_libsoup[@]|$(HAVE_LIBSOUP)|g' \
    	       -e 's|@have_cheese[@]|$(HAVE_CHEESE)|g'
    
    weatherapp.sh: weatherapp.sh.in
    	$(AM_V_GEN) $(do_subst) $&lt; &gt; $@
    	chmod +x $@
    
    CLEANFILES += weatherapp.sh
    EXTRA_DIST += weatherapp.sh.in
    
    #Το εικονίδιο της εφαρμογής
    appicondir=$(datadir)/icons/hicolor/scalable/apps
    appicon_DATA=weather-icon.svg
    
    #Εικονίδια στην εφαρμογή
    NULL =
    
    private_icons = \
    	weather-clear.svg \
      weather-few-clouds.svg \
      weather-fog.svg \
      weather-icon.svg \
      weather-overcast.svg \
      weather-showers.svg \
      weather-showers-scattered.svg \
      weather-snow.svg \
      $(NULL)
    
    install-icons:
    	for icon in $(private_icons); do \
    		mkdir -p $(DESTDIR)$(pkgdatadir)/icons/; \
    		$(INSTALL_DATA) $(srcdir)/$$icon $(DESTDIR)$(pkgdatadir)/icons/; \
    	done
    
    install-data-local: install-icons

note: (itstool) path: section/p
en: This needs a bit more explaining. Compared to the HelloWorld Makefile.am this has changed quite a bit. Lets go through all the new blocks:
el: Αυτό χρειάζεται λίγη περισσότερη εξήγηση. Συγκρινόμενο με το HelloWorld Makefile.am αυτό έχει αλλάξει αρκετά. Ας εξετάσουμε όλες τις νέες ομάδες:

note: (itstool) path: section/p
en: bin_scripts are the files that are needed to run your application. In thin case they are the first two files are the program itself and the third is the script that launches the application.
el: Τα bin_scripts είναι αρχεία που απαιτούνται για την εκτέλεση της εφαρμογής σας. Σε αυτήν την περίπτωση τα δύο πρώτα είναι το ίδιο το πρόγραμμα και το τρίτο είναι το σενάριο που ξεκινά την εφαρμογή.

note: (itstool) path: section/p
en: EXTRA_DIST are the files that are to be distributed
el: EXTRA_DIST είναι τα αρχεία που πρόκειται να διανεμηθούν

note: (itstool) path: section/p
en: do_subst block is bits and pieces that need to be where they are
el: ομάδα do_subst είναι δυαδικά και κομμάτια που πρέπει να είναι εκεί που βρίσκονται

note: (itstool) path: section/p
en: after the comment #icons in the application there are all the icons that are used by the program. For them to be useful you need to install the icons in correct places and that is done byt the install-icons: bit
el: μετά το σχόλιο #εικονίδια στην εφαρμογή υπάρχουν όλα τα εικονίδια που χρησιμοποιούνται από το πρόγραμμα. Για να είναι χρήσιμα αυτά πρέπει να εγκαταστήσετε τα εικονίδια σε σωστές θέσεις και αυτό γίνεται από τα install-icons: bit

note: (itstool) path: section/code
en: 
    #!/bin/sh
    # This will run autoconf, automake, etc. for us
    autoreconf --force --install
el: 
    #!/bin/sh
    # Αυτό θα εκτελέσει autoconf, automake, κλπ. για μας
    autoreconf --force --install

note: (itstool) path: section/title
en: Custom icons for your application
el: Προσαρμογή εικονιδίων για την εφαρμογή σας

note: (itstool) path: section/p
en: When thinking about custom icons a good rule of thumb is: do you expect to see that icon used elsewhere or is it private to your app? If the first (e.g. the icons in the desktop file that are shown by the shell) then you need /usr/share/hicolor, otherwise (e.g. the weather icons of your app) /usr/share/$application/bla/bla
el: Εάν σκέφτεστε τα προσαρμοσμένα εικονίδια ένας καλός πρόχειρος κανόνας είναι ο εξής: περιμένετε να δείτε αυτό το εικονίδιο να χρησιμοποιείται κάπου αλλού ή είναι μόνο για την εφαρμογή σας; Εάν συμβαίνει το πρώτο (π.χ. τα εικονίδια στο αρχείο της επιφάνειας εργασίας που εμφανίζονται από το κέλυφος) τότε χρειαζόσαστε /usr/share/hicolor, αλλιώς (π.χ. τα εικονίδια καιρού της εφαρμογής σας) /usr/share/$application/bla/bla

note: (itstool) path: section/p
en: Using autotools you have to make some changes to your .desktop and Makefile.am files. In the desktop file you change the Icon's name Icon=weather-icon. In the Makefile.am file you add these two lines to the end of your application #the application icon
el: Χρησιμοποιώντας το autotools πρέπει να κάνετε μερικές αλλαγές στα αρχεία σας .desktop and Makefile.am. Στο αρχείο επιφάνειας εργασίας αλλάξτε το όνομα του εικονιδίου Icon=weather-icon. Στο αρχείο Makefile.am προσθέστε αυτές τις δύο γραμμές στο τέλος της εφαρμογή σας #the application icon

note: (itstool) path: page/title
en: Local library geoNames
el: Τοπική βιβλιοθήκη geoNames

note: (itstool) path: synopsis/p
en: In this part of the guide we'll construct the local library geoNames using asynchronous calls. Weather information in this example is fetched from geonames.org and the application is using the <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes </link> to place your weather request. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we'll go through the following parts:
el: Σε αυτό το τμήμα του οδηγού πρόκειται να κατασκευάσουμε μια τοπική βιβλιοθήκη geoNames χρησιμοποιώντας ασύγχρονες κλήσεις. Οι πληροφορίες του καιρού σε αυτό το παράδειγμα παρέχονται από τον geonames.org και η εφαρμογή χρησιμοποιεί το <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">κωδικούς ICAO</link> για να τοποθετήσει την αίτηση σας για τον καιρό. Για να γράψετε και να εκτελέσετε οι ίδιοι τα παραδείγματα του κώδικα, χρειάζεστε έναν επεξεργαστή για να γράψετε τον κώδικα, τερματικό και GNOME 3 ή μεγαλύτερο εγκατεστημένο στον υπολογιστή σας. Σε αυτόν τον οδηγό θα εξετάσουμε τα παρακάτω μέρη:

note: (itstool) path: item/p
en: <link xref="#geonamesimports">Local library for getting the weather</link>
el: <link xref="#geonamesimports">Τοπική βιβλιοθήκη για λήψη του καιρού</link>

note: (itstool) path: item/p
en: <link xref="#geonamesfunction">Creating function geoNames</link>
el: <link xref="#geonamesfunction">Δημιουργώντας συναρτήσεις geoNames</link>

note: (itstool) path: item/p
en: <link xref="#geonamesmethods">Methods for geoNames</link>
el: <link xref="#geonamesmethods">Μέθοδοι για το geoNames</link>

note: (itstool) path: section/title
en: Local library for getting the weather
el: Τοπική βιβλιοθήκη για λήψη του καιρού

note: (itstool) path: section/p
en: For this we need a new file that will be our local library.
el: Για αυτό θα χρειαστούμε ένα νέο αρχείο που θα είναι η τοπική μας βιβλιοθήκη.

note: (itstool) path: section/p
en: In the first lines we'll import and initialize the libraries we need to use in this local library. Soup handles all the requests we have to make with http.
el: Στις πρώτες γραμμές θα εισάγουμε και θα αρχικοποιήσουμε τις απαιτούμενες βιβλιοθήκες για χρήση σε αυτή την τοπική βιβλιοθήκη. Το Soup επεξεργάζεται όλες τις αιτήσεις που πρέπει να κάνουμε με http.

note: (itstool) path: section/title
en: Creating function GeoNames
el: Δημιουργία συνάρτησης geoNames

note: (itstool) path: section/p
en: Here we create the function GeoNames that will handle getting weather for us. JavaScript allows us to create functions that have little inside at first and later expand them. This will be done inside the GeoNames.prototype curly braces{}
el: Εδώ δημιουργούμε τη συνάρτηση GeoNames που θα χειριστεί τη λήψη καιρού για μας. Το JavaScript επιτρέπει τη δημιουργία συναρτήσεων που έχουν λίγο μέσα στην αρχή και αργότερα τις επεκτείνει. Αυτό θα γίνει μέσα στα άγκιστρα {} του GeoNames.prototype

note: (itstool) path: section/title
en: Methods for GeoNames
el: Μέθοδοι για GeoNames

note: (itstool) path: section/p
en: The first method for GeoNames is getWeather and the second getIcon. In getWeather we make a http request with soup, handle errors and then parse the information from the request to form we can use it. In getIcon we simply compare the results we got from getWeather to the switch we have in order to get the icon matching current weather. Now that we have our local library ready, it's time to make use of it.
el: Η πρώτη μέθοδος για το GeoNames είναι η getWeather και η δεύτερη η getIcon. Στην getWeather κάνουμε μια αίτηση http με soup, επεξεργασία σφαλμάτων και έπειτα ανάλυση της πληροφορίας από την αίτηση για μορφή που μπορούμε να χρησιμοποιήσουμε. Στο getIcon συγκρίνουμε απλά τα αποτελέσματα που παίρνουμε από getWeather στον διακόπτη που έχουμε για τη λήψη εικονιδίου που ταιριάζει στον τρέχοντα καιρό. Τώρα που έχουμε την τοπική μας βιβλιοθήκη έτοιμη, είναι καιρός να τη χρησιμοποιήσουμε.

note: (itstool) path: section/p
en: Here is the entire code for our local library. The main program file calls this asynchronously.
el: Εδώ είναι όλος ο κώδικας για την τοπική μας βιβλιοθήκη. Το αρχείο του κυρίως προγράμματος το καλεί ασύγχρονα.

[ctx: text]
note: (itstool) path: info/title
en: Widget (Python)
el: Γραφικό συστατικό (Python)

note: (itstool) path: info/desc
en: A widget that uses the Cairo library to draw
el: Ένα γραφικό συστατικό που χρησιμοποιεί το Cairo για σχεδίαση

note: (itstool) path: page/title
en: Widget
el: Γραφικό συστατικό

note: (itstool) path: page/p
en: Enter an angle, visualize it.
el: Πληκτρολογήστε μια γωνία και εμφανίστε το.

note: (itstool) path: item/p
en: <link href="http://www.tortall.net/mu/wiki/CairoTutorial">The Cairo Tutorial for Python Programmers</link>
el: <link href="http://www.tortall.net/mu/wiki/CairoTutorial">Μάθημα Cairo για προγραμματιστές της Python</link>

[ctx: text]
note: (itstool) path: info/title
en: Window (C)
el: Παράθυρο (C)

note: (itstool) path: info/desc
en: A toplevel window which can contain other widgets
el: Ένα παράθυρο ανώτατου επιπέδου που μπορεί να περιέχει άλλα γραφικά στοιχεία

note: (itstool) path: page/title
en: Window
el: Παράθυρο

note: (itstool) path: page/p
en: A minimal GtkApplication. Use <link xref="GtkApplicationWindow.c">Application Window</link> if you need GMenu support.
el: Μια απλή GtkApplication. Χρησιμοποιήστε το <link xref="GtkApplicationWindow.c">παράθυρο εφαρμογής</link> εάν χρειαζόσαστε υποστήριξη GMenu.

[ctx: text]
note: (itstool) path: info/title
en: Window (JavaScript)
el: Παράθυρο (JavaScript)

note: (itstool) path: info/desc
en: A basic window which can contain other widgets
el: Ένα βασικό παράθυρο που μπορεί να περιέχει άλλα γραφικά στοιχεία

note: (itstool) path: td/p
en: A minimal GtkApplication
el: Μια πρώτη GtkApplication

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.js">ApplicationWindow</link> if you need GMenu support.
el: Χρησιμοποιήστε <link xref="GtkApplicationWindow.js">ApplicationWindow</link> εάν χρειαζόσαστε υποστήριξη GMenu.

note: (itstool) path: page/code
en: 
    #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const Application = new Lang.Class ({
        Name: 'Application',
    
        //create the application
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.myapp',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
           this.application.connect('activate', Lang.bind(this, this._onActivate));
        },
    
        //callback function for 'activate' signal
        _onActivate: function () {
    
            MyWindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
            MyWindow.title = "Welcome to GNOME";
    
           /* Here are a few ways we can customize our window.
           Try uncommenting them or changing their values! */
            //MyWindow.set_default_size (400,200);
            //MyWindow.set_has_resize_grip (false);
            //MyWindow.set_opacity (0.5);
            //MyWindow.maximize ();
    
            //show the window and all child widgets (none in this case)
            MyWindow.show_all();
            this.application.add_window(MyWindow);
        }
    });
    
    //run the application
    let app = new Application ();
    app.application.run (ARGV);
el: 
    #!/usr/bin/gjs
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Lang = imports.lang;
    
    const Application = new Lang.Class ({
        Name: 'Application',
    
        //Δημιουργία της εφαρμογής
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.myapp',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
           this.application.connect('activate', Lang.bind(this, this._onActivate));
        },
    
        //Η συνάρτηση επανάκλησης για το σήμα 'activate'
        _onActivate: function () {
    
            MyWindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
            MyWindow.title = "Welcome to GNOME";
    
           /* Ιδού μερικοί τρόποι που μπορούμε να προσαρμόσουμε το παράθυρό μας.
           Try uncommenting them or changing their values! */
            //MyWindow.set_default_size (400,200);
            //MyWindow.set_has_resize_grip (false);
            //MyWindow.set_opacity (0.5);
            //MyWindow.maximize ();
    
            //Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων (κανένα σε αυτήν την περίπτωση)
            MyWindow.show_all();
            this.application.add_window(MyWindow);
        }
    });
    
    //Εκτέλεση της εφαρμογής
    let app = new Application ();
    app.application.run (ARGV);

note: (itstool) path: page/p
en: In this example we used the following:
el: Σε αυτό το παράδειγμα χρησιμοποιήσαμε το παρακάτω:

[ctx: text]
note: (itstool) path: info/title
en: Window (Python)
el: Παράθυρο (Python)

note: (itstool) path: td/p
en: A minimal GTK+ Application: a window with a title.
el: Μια ελάχιστη εφαρμογή GTK+: ένα παράθυρο με τίτλο.

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.py"/> if you need <link xref="gmenu.py"/> support.
el: Χρησιμοποιήστε <link xref="GtkApplicationWindow.py"/>, εάν χρειάζεστε υποστήριξη <link xref="gmenu.py"/>.

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyApplication(Gtk.Application):
    
        def do_activate(self):
            # create a Gtk Window belonging to the application itself
            window = Gtk.Window(application=self)
            # set the title
            window.set_title("Welcome to GNOME")
            # show the window
            window.show_all()
    
    # create and run the application, exit with the value returned by
    # running the program
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
el: from gi.repository import Gtk
    import sys
    
    
    class MyApplication(Gtk.Application):
    
        def do_activate(self):
            # δημιουργία ενός παραθύρου Gtk το οποίο ανήκει στην εφαρμογή
            window = Gtk.Window(application=self)
            # ορισμός τίτλου
            window.set_title("Welcome to GNOME")
            # εμφάνιση του παραθύρου
            window.show_all()
    
    # δημιουργία και εκτέλεση της εφαρμογής, έξοδος με την επιστρεφόμενη τιμή
    # από το εκτελούμενο πρόγραμμα
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/title
en: Useful methods for a Window widget
el: Χρήσιμες μέθοδοι για ένα γραφικό στοιχείο παραθύρου

[ctx: text]
note: (itstool) path: info/title
en: Window (Vala)
el: Παράθυρο (Vala)

note: (itstool) path: td/p
en: The simplest Gtk.Application
el: Μια απλούστατη εφαρμογή σε Gtk

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.vala">Application Window</link> if you need GMenu support.
el: Χρησιμοποιήστε <link xref="GtkApplicationWindow.vala">παράθυρο εφαρμογής</link> εάν χρειαζόσαστε υποστήριξη GMenu.

note: (itstool) path: page/code
en: /* This is the application. */
    public class Application : Gtk.Application {
    
    	/* Constructor */
    	public Application () {
    		Object (application_id: "org.example.window");
    	}
    
    	/* Override the 'activate' signal of GLib.Application,
    	 * which is inherited by Gtk.Application. */
    	public override void activate () {
    
    		var window = new Gtk.Window ();
    		window.title = "Welcome to GNOME";
    
    		/* The following 3 lines are included here to introduce
    		 * you to ways you can adjust the toplevel window to suit
    		 * your needs.  Uncomment them to see what they do.
    		 */
    
    		//window.border_width = 10;
    		//window.set_default_size (350, 70);
    		//window.window_position = Gtk.WindowPosition.CENTER;
    
    		/* Add the window to this application. */
    		this.add_window (window);
    
    		/* Show the window. */
    		window.show ();
    	}
    }
    
    /* The main function creates the application and runs it.*/
    int main (string[] args) {
    	var app = new Application ();
    	return app.run (args);
    }
el: /* Αυτή είναι η εφαρμογή. */
    public class Application : Gtk.Application {
    
    	/* Ο κατασκευαστής */
    	public Application () {
    		Object (application_id: "org.example.window");
    	}
    
    	/* Αντικατάσταση του σήματος 'activate' της GLib.Application,
    	 * που κληρονομήθηκε από την Gtk.Application. */
    	public override void activate () {
    
    		var window = new Gtk.Window ();
    		window.title = "Welcome to GNOME";
    
    		/* Οι ακόλουθες 3 γραμμές περιλαμβάνονται εδώ για να σας εισάγουν
    		 * τρόπους που μπορείτε να ρυθμίσετε τα ανώτα το επίπεδο παραθύρου για να ταιριάζει
    		 * τις ανάγκες σας.  Αποσχολιάστε τες για να δείτε τι κάνουν.
    		 */
    
    		//window.border_width = 10;
    		//window.set_default_size (350, 70);
    		//window.window_position = Gtk.WindowPosition.CENTER;
    
    		/* Προσθήκη του παραθύρου σε αυτήν την εφαρμογή. */
    		this.add_window (window);
    
    		/* Εμφάνιση του παραθύρου */
    		window.show ();
    	}
    }
    
    /* Η κύρια συνάρτηση δημιουργεί την εφαρμογή και την εκτελεί.*/
    int main (string[] args) {
    	var app = new Application ();
    	return app.run (args);
    }

note: (itstool) path: item/p
en: The widget <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html">Gtk.Window</link>
el: Το γραφικό στοιχείο <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html">Gtk.Window</link>

note: (itstool) path: item/p
en: The enum <link href="http://www.valadoc.org/gtk+-3.0/Gtk.WindowPosition.html">Gtk.WindowPosition</link>
el: Η αρίθμηση <link href="http://www.valadoc.org/gtk+-3.0/Gtk.WindowPosition.html">Gtk.WindowPosition</link>

note: (itstool) path: item/p
en: The method <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.set_default_size.html">set_default_size</link>
el: Η μέθοδος <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.set_default_size.html">set_default_size</link>

note: (itstool) path: info/desc
en: Tutorial for writing a custom <code>GSource</code> implementation
el: Μάθημα για την εγγραφή μιας προσαρμοσμένης υλοποίησης <code>GSource</code>

note: (itstool) path: page/title
en: Custom GSources
el: Προσαρμοσμένα GSources

note: (itstool) path: synopsis/title
en: Summary
el: Περίληψη

note: (itstool) path: synopsis/p
en: This article is a tutorial on creating a custom <code>GSource</code>. For the reference documentation, see the <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource">GLib API reference</link>.
el: Αυτό το κείμενο είναι ένα μάθημα για την δημιουργία ενός προσαρμοσμένου <code>GSource</code>. Αν θέλετε να δείτε περισσότερη τεκμηρίωση, επισκεφθείτε την <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource">αναφορά του GLib API</link>.

note: (itstool) path: section/title
en: What is <code>GSource</code>?
el: Τι είναι <code>GSource</code>;

note: (itstool) path: section/p
en: A <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource"><code>GSource</code></link> is an expected event with an associated callback function which will be invoked when that event is received. An event could be a timeout or data being received on a socket, for example.
el: Το <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource"><code>GSource</code></link> είναι ένα γεγονός με μια συσχετισμένη συνάρτηση επανάκλησης η οποία καλείται όταν λαμβάνεται το γεγονός. Το γεγονός αυτό μπορεί να είναι ένα χρονικό όριο ή δεδομένα που λαμβάνονται από μια υποδοχή.

note: (itstool) path: section/p
en: GLib contains various types of <code>GSource</code>, but also allows applications to define their own, allowing custom events to be integrated into the main loop.
el: Το GLib περιλαμβάνει διάφορους τύπους <code>GSource</code>, αλλά επιτρέπει επίσης της εφαρμογές να ορίσουν τα δικά τους, επιτρέποντας προσαρμοσμένα συμβάντα να ενσωματωθούν στον κύριο βρόγχο του προγράμματος.

note: (itstool) path: section/p
en: The structure of a <code>GSource</code> and its virtual functions are documented in detail in the <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSourceFuncs">GLib API reference</link>.
el: Η δομή του <code>GSource</code> και των εικονικών συναρτήσεων περιγράφονται λεπτομερώς στην <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSourceFuncs">αναφορά του GLib API</link>.

note: (itstool) path: section/title
en: A Message Queue Source
el: Πηγή μιας ουράς μηνύματος

note: (itstool) path: section/p
en: As a running example, a message queue source will be used which dispatches its callback whenever a message is enqueued to a queue internal to the source (potentially from another thread).
el: Για παράδειγμα, η πηγή μιας ουράς μηνύματος θα χρησιμοποιηθεί για να σταλθεί η επανάκληση της κάθε φορά που ένα μήνυμα θα μπει στην ουρά της πηγής (συνήθως από άλλο νήμα).

note: (itstool) path: section/p
en: This type of source is useful for efficiently transferring large numbers of messages between main contexts. The alternative is transferring each message as a separate idle <code>GSource</code> using <code>g_source_attach()</code>. For large numbers of messages, this means a lot of allocations and frees of <code>GSource</code>s.
el: Αυτός ο τύπος πηγής είναι χρήσιμος για την αποτελεσματική μεταφορά μεγάλου αριθμού μηνυμάτων. Ένας εναλλακτικός τρόπος είναι η μεταφορά κάθε μηνύματος ως ξεχωριστό <code>GSource</code> χρησιμοποιώντας το <code>g_source_attach()</code>. Για μεγάλο αριθμό μηνυμάτων, αυτό σημαίνει πως θα υπάρχουν πολλές λειτουργίες κατανομών και ελευθέρωσης των <code>GSource</code>.

note: (itstool) path: section/title
en: Structure
el: Δομή

note: (itstool) path: section/p
en: Firstly, a structure for the source needs to be declared. This must contain a <code>GSource</code> as its parent, followed by the private fields for the source: the queue and a function to call to free each message once finished with.
el: Αρχικά, πρέπει να οριστεί μια δομή για τις ανάγκες του κώδικα. Αυτή η δομή πρέπει να περιέχει ένα <code>GSource</code> ως γονικό, ακολουθόμενο από ιδιωτικά πεδία: την ουρά και μια συνάρτηση για να καλεστεί κάθε μήνυμα όταν τελειώσει.

note: (itstool) path: section/title
en: Prepare Function
el: Συνάρτηση προετοιμασίας

note: (itstool) path: section/p
en: Next, the prepare function for the source must be defined. This determines whether the source is ready to be dispatched. As this source is using an in-memory queue, this can be determined by checking the queue’s length: if there are elements in the queue, the source can be dispatched to handle them.
el: Στη συνέχεια, πρέπει να οριστεί η συνάρτηση προετοιμασίας. Αυτή καθορίζει αν ο κώδικας είναι έτοιμος να σταλθεί. Καθώς αυτός ο κώδικας χρησιμοποιεί μια ουρά μνήμης, η ενέργεια μπορεί να καθοριστεί ελέγχοντας το μήκος της ουράς: αν υπάρχουν στοιχεία στην ουρά, τότε ο κώδικας μπορεί να σταλθεί για να τα διαχειριστεί.

note: (itstool) path: section/title
en: Check Function
el: Συνάρτηση ελέγχου

note: (itstool) path: section/p
en: As this source has no file descriptors, the prepare and check functions essentially have the same job, so a check function is not needed. Setting the field to <code>NULL</code> in <code>GSourceFuncs</code> bypasses the check function for this source type.
el: Καθώς αυτή η πηγή δεν έχει καθόλου περιγραφείς αρχείων, οι συναρτήσεις προετοιμασίας και ελέγχου εκτελούν την ίδια δουλειά, έτσι δεν είναι αναγκαία μια συνάρτηση ελέγχου. Ορίζοντας το πεδίο σε <code>NULL</code> στο <code>GSourceFuncs</code> παρακάμπτεται η συνάρτηση ελέγχου για αυτόν τον τύπο πηγής.

note: (itstool) path: section/title
en: Dispatch Function
el: Συνάρτηση αποστολής

note: (itstool) path: section/p
en: For this source, the dispatch function is where the complexity lies. It needs to dequeue a message from the queue, then pass that message to the <code>GSource</code>’s callback function. No messages may be queued: even through the prepare function returned true, another source wrapping the same queue may have been dispatched in the mean time and taken the final message from the queue. Further, if no callback has been set for the <code>GSource</code> (which is allowed), the message must be destroyed and silently dropped.
el: Η συνάρτηση αποστολής είναι το πιο πολύπλοκο κομμάτι. Πρέπει να πάρει ένα μήνυμα από την ουρά και να το περάσει στην συνάρτηση επανάκλησης του <code>GSource</code>. Δεν είναι απαραίτητο να υπάρχουν μηνύματα στην ουρά: ακόμα και αν η συνάρτηση προετοιμασίας επιστρέψει αληθές, μια άλλη πηγή μπορεί να έχει δεχτεί το τελικό μήνυμα από την ουρά. Επίσης, αν δεν είχε οριστεί μια συνάρτηση επανάκλησης για το <code>GSource</code> (το οποίο είναι αποδεκτό), το μήνυμα πρέπει να καταστραφεί.

note: (itstool) path: section/p
en: If both a message and callback are set, the callback can be invoked on the message and its return value propagated as the return value of the dispatch function. This is <code>FALSE</code> to destroy the <code>GSource</code> and <code>TRUE</code> to keep it alive, just as for <code>GSourceFunc</code> — these semantics are the same for all dispatch function implementations.
el: Αν έχει οριστεί ένα μήνυμα και μια επανάκληση, η επανάκληση μπορεί να καλεστεί από το μήνυμα και να επιστρέψει μια τιμή, όπως η τιμή που επιστρέφεται από την συνάρτηση αποστολής. Αυτό ορίζεται ως <code>FALSE</code> για την καταστροφή του <code>GSource</code> και <code>TRUE</code> για να παραμείνει ως έχει, όπως και το <code>GSourceFunc</code> — αυτά παραμένουν τα ίδια για όλες τις υλοποιήσεις μιας συνάρτησης αποστολής.

note: (itstool) path: section/title
en: Callback Functions
el: Συναρτήσεις επανάκλησης

note: (itstool) path: section/p
en: The callback from a <code>GSource</code> does not have to have type <code>GSourceFunc</code>. It can be whatever function type is called in the source’s dispatch function, as long as that type is sufficiently documented.
el: Η επανάκληση από το <code>GSource</code> δεν είναι αναγκαίο να είναι τύπου <code>GSourceFunc</code>. Μπορεί να είναι οποιουδήποτε τύπου συνάρτηση στην πηγή της συνάρτησης επανάκλησης, εφόσον αυτός ο τύπος είναι επαρκώς τεκμηριωμένος.

note: (itstool) path: section/p
en: Normally, <code>g_source_set_callback()</code> is used to set the callback function for a source instance. With its <code>GDestroyNotify</code>, a strong reference can be held to keep an object alive while the source is still alive:
el: Συνήθως, το <code>g_source_set_callback()</code> χρησιμοποιείται για να οριστεί η συνάρτηση επανάκλησης για ένα στιγμιότυπο πηγής. Με το <code>GDestroyNotify</code> του, μια ισχυρή αναφορά μπορεί να δημιουργηθεί για να κρατήσει ζωντανό το αντικείμενο καθώς η πηγή είναι ακόμα ενεργή:

note: (itstool) path: section/p
en: However, <code>GSource</code> has a layer of indirection for retrieving this callback, exposed as <code>g_source_set_callback_indirect()</code>. This allows GObject to set a <code>GClosure</code> as the callback for a source, which allows for sources which are automatically destroyed when an object is finalized — a <em>weak</em> reference, in contrast to the <em>strong</em> reference above:
el: Ωστόσο, το <code>GSource</code> διαθέτει μια στρώση για τη ήψη της επανάκλησης, ως <code>g_source_set_callback_indirect()</code>. Αυτό επιτρέπει το GObject να ορίσει ένα <code>GClosure</code> ως επανάκληση για την πηγή, επιτρέποντας τις πηγές να καταστρέφονται αυτόματα όταν οριστοποιηθεί ένα αντικείμενο — μια <em>χαλαρή</em> αναφορά, σε αντίθεση με την <em>ισχυρή</em> αναφορά παραπάνω:

note: (itstool) path: section/p
en: It also allows for a generic, closure-based ‘dummy’ callback, which can be used when a source needs to exist but no action needs to be performed in its callback:
el: Επιτρέπει επίσης για μια γενική, εικονική επανάκληση, η οποία μπορεί να χρησιμοποιηθεί όταν μια πηγή χρειάζεται να τερματιστεί αλλά δεν απαιτείται να εκτελεστούν ενέργειες στην επανάκληση της:

note: (itstool) path: section/title
en: Constructor
el: Κατασκευαστής

note: (itstool) path: section/p
en: Finally, the <code>GSourceFuncs</code> definition of the <code>GSource</code> can be written, alongside a construction function. It is typical practice to expose new source types simply as <code>GSource</code>s, not as the subtype structure; so the constructor returns a <code>GSource*</code>.
el: Τέλος, ο ορισμός του <code>GSourceFuncs</code> για το <code>GSource</code> μπορεί να γραφεί μαζί με μια συνάρτηση κατασκευαστή. Είναι κοινή πρακτική να παρουσιάζονται οι νέοι τύποι πηγών ως  <code>GSource</code>, αλλά όχι ως τύπο της δομής, έτσι ώστε ο κατασκευαστής να επιστρέφει το <code>GSource*</code>.

note: (itstool) path: section/p
en: The example constructor here also demonstrates use of a child source to support cancellation conveniently. If the <code>GCancellable</code> is cancelled, the application’s callback will be dispatched and can check for cancellation. (The application code will need to make a pointer to the <code>GCancellable</code> available to its callback, as a field of the callback’s user data set in <code>g_source_set_callback()</code>).
el: Το παράδειγμα του κατασκευαστή παρουσιάζει τη χρήση μιας θυγατρικής πηγής για την υποστήριξη της λειτουργίας ακύρωσης. Αν ακυρωθεί το <code>GCancellable</code>, η επανάκλαση της εφαρμογής θα σταλθεί και θα ελέγξει για την ακύρωση. (Ο κώδικας της εφαρμογής θα πρέπει να δημιουργήσει έναν δείκτη στο <code>GCancellable</code> που θα είναι διαθέσιμο στην επανάκληση ως ένα πεδίο για τα δεδομένα του χρήστη στο <code>g_source_set_callback()</code>).

note: (itstool) path: section/title
en: Complete Example
el: Πλήρες παράδειγμα

note: (itstool) path: listing/title
en: Complete Example Code
el: Δείγμα πλήρους κώδικα

note: (itstool) path: section/title
en: Further Examples
el: Περισσότερα παραδείγματα

note: (itstool) path: section/p
en: Sources can be more complex than the example given above. In <link href="http://nice.freedesktop.org/">libnice</link>, a custom <code>GSource</code> is needed to poll a set of sockets which changes dynamically. The implementation is given as <code>ComponentSource</code> in <link href="http://cgit.freedesktop.org/libnice/libnice/tree/agent/component.c#n941">component.c</link> and demonstrates a more complex use of the prepare function.
el: Ο κώδικας μπορεί να είναι πιο πολύπλοκος από τα παραπάνω παραδείγματα. Στο <link href="http://nice.freedesktop.org/">libnice</link>, ένα προσαρμοσμένο <code>GSource</code> χρειάζεται για να λαμβάνει μια ομάδα υποδοχών που αλλάζει δυναμικά. Η υλοποίηση του γίνεται με το <code>ComponentSource</code> στο αρχείο <link href="http://cgit.freedesktop.org/libnice/libnice/tree/agent/component.c#n941">component.c</link> και παρουσιάζει μια πιο πολύπλοκη συνάρτηση προετοιμασίας.

note: (itstool) path: section/p
en: Another example is a custom source to interface GnuTLS with GLib in its <code>GTlsConnection</code> implementation. <link href="https://git.gnome.org/browse/glib-networking/tree/tls/gnutls/gtlsconnection-gnutls.c#n871"><code>GTlsConnectionGnutlsSource</code></link> synchronizes the main thread and a TLS worker thread which performs the blocking TLS operations.
el: Ένα άλλο παράδειγμα είναι ένας προσαρμοσμένος κώδικας για την επικοινωνία του GnuTLS με το GLib και την υλοποίηση <code>GTlsConnection</code> του. Το <link href="https://git.gnome.org/browse/glib-networking/tree/tls/gnutls/gtlsconnection-gnutls.c#n871"><code>GTlsConnectionGnutlsSource</code></link> συγχρονίζει το κύριο νήμα με ένα νήμα TLS το οποίο εκτελεί τις εργασίες του TLS.
