|
Packit |
1470ea |
|
|
Packit |
1470ea |
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" xmlns:xi="http://www.w3.org/2001/XInclude" type="topic" style="task" id="03_getting_the_signal.js" xml:lang="el">
|
|
Packit |
1470ea |
<info>
|
|
Packit |
1470ea |
<link type="guide" xref="beginner.js#tutorials"/>
|
|
Packit |
1470ea |
<link type="seealso" xref="button.js"/>
|
|
Packit |
1470ea |
<link type="seealso" xref="entry.js"/>
|
|
Packit |
1470ea |
<link type="seealso" xref="radiobutton.js"/>
|
|
Packit |
1470ea |
<link type="seealso" xref="switch.js"/>
|
|
Packit |
1470ea |
<revision version="0.1" date="2012-08-12" status="draft"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<credit type="author copyright">
|
|
Packit |
1470ea |
<name>Taryn Fox</name>
|
|
Packit |
1470ea |
<email its:translate="no">jewelfox@fursona.net</email>
|
|
Packit |
1470ea |
<years>2012</years>
|
|
Packit |
1470ea |
</credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<desc>Δημιουργία κουμπιών και άλλων γραφικών στοιχείων που κάνουν πράγματα όταν πατάτε πάνω τους.</desc>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Ελληνική μεταφραστική ομάδα GNOME</mal:name>
|
|
Packit |
1470ea |
<mal:email>team@gnome.gr</mal:email>
|
|
Packit |
1470ea |
<mal:years>2012-2015</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Δημήτρης Σπίγγος</mal:name>
|
|
Packit |
1470ea |
<mal:email>dmtrs32@gmail.com</mal:email>
|
|
Packit |
1470ea |
<mal:years>2012, 2013</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Μαρία Θουκιδίδου</mal:name>
|
|
Packit |
1470ea |
<mal:email>marablack3@gmail.com</mal:email>
|
|
Packit |
1470ea |
<mal:years>2014</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Θάνος Τρυφωνίδης</mal:name>
|
|
Packit |
1470ea |
<mal:email>tomtryf@gmail.com</mal:email>
|
|
Packit |
1470ea |
<mal:years>2014, 2015</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
</info>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<title>3. Λήψη του σήματος</title>
|
|
Packit |
1470ea |
<synopsis>
|
|
Packit |
1470ea |
Στο τελευταίο μάθημα, μάθαμε πώς να δημιουργήσουμε γραφικά στοιχεία όπως ετικέτες, εικόνες και κουμπιά. Εδώ, θα μάθουμε πώς να κάνουμε κουμπιά και άλλα γραφικά στοιχεία εισόδου να κάνουν πράγματι πράγματα, γράφοντας συναρτήσεις που χειρίζονται τα σήματα που στέλνουν όταν πατιούνται ή αλληλεπιδρούν.
|
|
Packit |
1470ea |
</synopsis>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<links type="section"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="application">
|
|
Packit |
1470ea |
<title>Μια βασική εφαρμογή</title>
|
|
Packit |
1470ea |
Στο GNOME, τα γραφικά στοιχεία με τα οποία μπορείτε να αλληλεπιδράτε, όπως κουμπιά και διακόπτες, στέλνουν σήματα όταν πατιούνται ή ενεργοποιούνται. Ένα κουμπί, για παράδειγμα, στέλνει το σήμα "clicked" όταν κάποιος το πατά. Όταν αυτό συμβαίνει, το GNOME ψάχνει για το μέρος στον κώδικά σας που λέει τι να κάνει.
|
|
Packit |
1470ea |
Πώς γράφουμε αυτόν τον κώδικα; Συνδέοντας το "clicked" σήμα αυτού του κουμπιού σε μια συνάρτηση επανάκλησης, που είναι μια συνάρτηση που γράψατε απλά για να χειριστείτε αυτό το σήμα. Έτσι όποτε εκπέμπει αυτό το σήμα, η συνδεμένη συνάρτηση με αυτό το σήμα εκτελείται.
|
|
Packit |
1470ea |
Να ένα πολύ βασικό παράδειγμα:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<media type="image" mime="image/png" src="media/03_jssignal_01.png"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Αυτό το ApplicationWindow έχει ένα κουμπί και μια ετικέτα μέσα του, τακτοποιημένη σε ένα πλέγμα. Όποτε πατιέται το κουμπί, μια μεταβλητή που κρατά τον αριθμό των μπισκότων αυξάνεται κατά 1 και η ετικέτα δείχνει πόσα cookies ενημερώθηκαν.
|
|
Packit |
1470ea |
<note style="tip">Τα cookies σε αυτό το παράδειγμα δεν είναι το ίδιο όπως τα μπισκότα που παίρνετε από τους ιστότοπους που αποθηκεύουν τις πληροφορίες σύνδεσή σας και μπορούν να παρακολουθούν τους τόπους που έχετε επισκεφτεί. Είναι απλά φανταστικές συμπεριφορές. Μπορείτε να κάνετε μερικές πραγματικές εάν θέλετε. </note>
|
|
Packit |
1470ea |
Να ο βασικός στερεότυπος κώδικας που πηγαίνει στην αρχή της εφαρμογής, πριν αρχίσουμε τη δημιουργία του παραθύρου και των γραφικών στοιχείων. Εκτός από το να έχει η εφαρμογή ένα μοναδικό όνομα, η μεγαλύτερη αλλαγή από το σύνηθες στερεότυπο είναι ότι δημιουργούμε μια καθολική μεταβλητή πολύ κοντά στην αρχή, για να κρατήσουμε τον αριθμό των cookies.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
imports.gi.versions.Gtk = '3.0';
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// We start out with 0 cookies
|
|
Packit |
1470ea |
var cookies = 0;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
class GettingTheSignal {
|
|
Packit |
1470ea |
// Create the application itself
|
|
Packit |
1470ea |
constructor() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect 'activate' and 'startup' signals to the callback functions
|
|
Packit |
1470ea |
this.application.connect('activate', this._onActivate.bind(this));
|
|
Packit |
1470ea |
this.application.connect('startup', this._onStartup.bind(this));
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'activate' signal presents window when active
|
|
Packit |
1470ea |
_onActivate() {
|
|
Packit |
1470ea |
this._window.present();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'startup' signal builds the UI
|
|
Packit |
1470ea |
_onStartup() {
|
|
Packit |
1470ea |
this._buildUI ();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
Take a look at the part that uses our application's connect method and 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.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="button">
|
|
Packit |
1470ea |
<title>Πάτημα του κουμπιού</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Ως συνήθως, θα βάλουμε όλον τον κώδικα για να δημιουργήσουμε το κουμπί μας και άλλα γραφικά στοιχεία μέσα στη συνάρτηση _buildUI, που καλείται όταν ξεκινά η εφαρμογή.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Build the application's UI
|
|
Packit |
1470ea |
_buildUI() {
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Πρώτα, δημιουργούμε το ίδιο το παράθυρο:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application window
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow({
|
|
Packit |
1470ea |
application: this.application,
|
|
Packit |
1470ea |
window_position: Gtk.WindowPosition.CENTER,
|
|
Packit |
1470ea |
default_height: 200,
|
|
Packit |
1470ea |
default_width: 400,
|
|
Packit |
1470ea |
title: "Click the button to get a cookie!"});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Σημειώστε ότι έχουμε ορίσει τις ιδιότητες του default_height και default_width. Αυτά μας επιτρέπουν να ελέγξουμε πόσο υψηλό και πλατύ θα είναι το ApplicationWindow, σε εικονοστοιχεία.
|
|
Packit |
1470ea |
Ύστερα, θα δημιουργήσουμε την ετικέτα που μας εμφανίζει τον αριθμό των cookies. Μπορούμε να χρησιμοποιήσουμε τη μεταβλητή των μπισκότων ως μέρος της ιδιότητας ετικέτας της ετικέτας.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the label
|
|
Packit |
1470ea |
this._cookieLabel = new Gtk.Label ({
|
|
Packit |
1470ea |
label: "Number of cookies: " + cookies });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Τώρα θα δημιουργήσουμε to κουμπί. Ορίζουμε την ιδιότητα του ετικέτα για να εμφανίσουμε το κείμενο που θέλουμε στο κουμπί και συνδέουμε το σήμα του "clicked" σε μια συνάρτηση που λέγεται _getACookie, που θα γράψουμε αφού έχουμε δομήσει την UI της δόμησής μας.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the cookie button
|
|
Packit |
1470ea |
this._cookieButton = new Gtk.Button ({ label: "Get a cookie" });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect the cookie button to the function that handles clicking it
|
|
Packit |
1470ea |
this._cookieButton.connect ('clicked', this._getACookie.bind(this));
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
Τελικά, δημιουργούμε ένα πλέγμα, προσαρτήστε την ετικέτα και το κουμπί σε αυτό, προσθέστε το στο παράθυρο και πείτε στο παράθυρο να εμφανίσει τον εαυτό του και τα περιεχόμενά του. Αυτό χρειαζόμαστε μέσα στη συνάρτηση _buildUI, έτσι το κλείνουμε με μια παρένθεση, καθώς και ένα κόμμα που λέει στο GNOME να συνεχίσει στην επόμενη συνάρτηση. Σημειώστε ότι ακόμα κι αν γράψαμε τον κώδικα για την ετικέτα πρώτα, μπορούμε ακόμα να την προσαρτήσουμε στο πλέγμα με τρόπο που θα την βάλει στο τέλος.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create a grid to arrange everything inside
|
|
Packit |
1470ea |
this._grid = new Gtk.Grid ({
|
|
Packit |
1470ea |
halign: Gtk.Align.CENTER,
|
|
Packit |
1470ea |
valign: Gtk.Align.CENTER,
|
|
Packit |
1470ea |
row_spacing: 20 });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Put everything inside the grid
|
|
Packit |
1470ea |
this._grid.attach (this._cookieButton, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._cookieLabel, 0, 1, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Add the grid to the window
|
|
Packit |
1470ea |
this._window.add (this._grid);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
Τώρα, γράφουμε τη συνάρτηση _getACookie. Όποτε το κουμπί μας στέλνει το σήμα του "clicked", ο κώδικας σε αυτή τη συνάρτηση θα εκτελεστεί. Σε αυτήν την περίπτωση, αυτό που κάνει είναι να αυξήσει τον αριθμό των μπισκότων κατά 1 και να ενημερώσει την ετικέτα να εμφανίσει τον νέο αριθμό των μπισκότων. Το κάνουμε αυτό χρησιμοποιώντας τη μέθοδο set_label της ετικέτας.
|
|
Packit |
1470ea |
<note style="tip">Πολλά γραφικά στοιχεία έχουν τις ίδιες ιδιότητες και μεθόδους. Και οι ετικέτες και τα κουμπιά, για παράδειγμα, έχουν μια ιδιότητα ετικέτας που λέει ποιο κείμενο είναι μέσα τους και τις μεθόδους et_label και set_label που σας επιτρέπουν να ελέγξετε ποιο είναι αυτό το κείμενο και να το αλλάξετε, αντίστοιχα. Έτσι εάν μαθαίνετε πώς ένα γραφικό στοιχείο δουλεύει, θα ξέρετε επίσης πώς άλλα σαν κι αυτό δουλεύουν. </note>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_getACookie: function() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Increase the number of cookies by 1 and update the label
|
|
Packit |
1470ea |
cookies++;
|
|
Packit |
1470ea |
this._cookieLabel.set_label ("Number of cookies: " + cookies);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
};
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Τελικά, εκτελούμε την εφαρμογή, χρησιμοποιώντας το ίδιο είδος κώδικα όπως στο τελευταίο μας μάθημα.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Run the application
|
|
Packit |
1470ea |
let app = new GettingTheSignal ();
|
|
Packit |
1470ea |
app.application.run (ARGV);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="switch">
|
|
Packit |
1470ea |
<title>Αναστροφή του διακόπτη</title>
|
|
Packit |
1470ea |
Τα κουμπιά δεν είναι τα μόνα γραφικά στοιχεία εισόδου στην εργαλειοθήκη μας Gtk+. Μπορούμε επίσης να χρησιμοποιήσουμε διακόπτες, όπως αυτόν σε αυτό το παράδειγμα. Οι διακόπτες δεν έχουν μια ιδιότητα ετικέτας, έτσι πρέπει να δημιουργήσουμε μια ξεχωριστή ετικέτα που λέει τι κάνει για να πάει δίπλα του.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<media type="image" mime="image/png" src="media/03_jssignal_02.png"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Ένας διακόπτης έχει δύο θέσεις, ανενεργό και ενεργό. Όταν ένας διακόπτης ενεργοποιείται το κείμενο του και το χρώμα παρασκηνίου αλλάζουν και μπορείτε να πείτε σε ποια θέση είναι.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Μπορείτε να έχετε δει διακόπτες όπως αυτούς στο μενού πρόσβασης του GNOME, που σας επιτρέπει να αλλάξετε γνωρίσματα όπως μεγάλο κείμενο και το πληκτρολόγιο οθόνης ενεργό και ανενεργό. Σε αυτήν την περίπτωση, ο διακόπτης ελέγχει το φανταστικό μας δοχείο cookie. Εάν ο διακόπτης είναι ενεργός, μπορείτε να πάρετε cookies πατώντας στο κουμπί "Get a cookie". Εάν είναι ανενεργός, πατώντας το κουμπί δεν θα κάνει τίποτα.
|
|
Packit |
1470ea |
<note style="tip">Μπορείτε να πάρετε το μενού πρόσβασης πατώντας στο περίγραμμα ενός ανθρώπου, κοντά στο όνομά σας στην πάνω δεξιά γωνία της οθόνης. </note>
|
|
Packit |
1470ea |
Να πώς δημιουργούμε τον διακόπτη:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the switch that controls whether or not you can win
|
|
Packit |
1470ea |
this._cookieSwitch = new Gtk.Switch ();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Δεν χρειαζόμαστε πράγματι να συνδέσουμε τον διακόπτη με κάτι. Αυτό που χρειαζόμαστε να κάνουμε είναι να γράψουμε μια πρόταση if στη συνάρτηση μας _getACookie, για να ελέγξουμε να δούμε εάν ο διακόπτης είναι ενεργός. Εάν θα θέλαμε να κάνουμε κάτι να συμβεί μόλις αντιστρέψετε τον διακόπτη, όμως, θα συνδέαμε το σήμα του notify::active, ως εξής:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect the switch to the function that handles it
|
|
Packit |
1470ea |
this._cookieSwitch.connect ('notify::active', this._cookieDispenser.bind(this));
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Ένας διακόπτης ορίζεται στην ανενεργή θέση από προεπιλογή. Εάν θέλουμε ο διακόπτης να ξεκινά ενεργός, θα ορίζαμε την τιμή της ενεργής ιδιότητας σε αληθή όταν τη δημιουργούμε.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
this._cookieSwitch = new Gtk.Switch ({ active: true });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Ας τον δημιουργήσουμε κανονικά, όμως, και έπειτα ας δημιουργήσουμε την ετικέτα που πηγαίνει μαζί του. Θέλουμε ο διακόπτης και η ετικέτα να κρατιούνται ακριβώς δίπλα μεταξύ τους, έτσι θα δημιουργήσουμε ένα πλέγμα μόνο για αυτούς, έπειτα θα βάλουμε αυτό το πλέγμα στο μεγαλύτερό μας πλέγμα που κρατά όλα τα γραφικά στοιχεία μέσα του. Να πώς θα φαίνεται ο κώδικας για τη δημιουργία του:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the switch that controls whether or not you can win
|
|
Packit |
1470ea |
this._cookieSwitch = new Gtk.Switch ();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the label to go with the switch
|
|
Packit |
1470ea |
this._switchLabel = new Gtk.Label ({
|
|
Packit |
1470ea |
label: "Cookie dispenser" });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create a grid for the switch and its label
|
|
Packit |
1470ea |
this._switchGrid = new Gtk.Grid ({
|
|
Packit |
1470ea |
halign: Gtk.Align.CENTER,
|
|
Packit |
1470ea |
valign: Gtk.Align.CENTER });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Put the switch and its label inside that grid
|
|
Packit |
1470ea |
this._switchGrid.attach (this._switchLabel, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Και τώρα τακτοποιούμε το καθετί στο μεγαλύτερο πλέγμα έτσι.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Put everything inside the grid
|
|
Packit |
1470ea |
this._grid.attach (this._cookieButton, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._switchGrid, 0, 1, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Τώρα αλλάζουμε τη συνάρτηση _getACookie έτσι ώστε να ελέγχει εάν ο περιέκτης του μπισκότου είναι ενεργός. Το κάνουμε χρησιμοποιώντας τη μέθοδο του διακόπτη get_active. Επιστρέφει αληθές εάν ο διακόπτης είναι ενεργός και ψευδές εάν ο διακόπτης είναι ανενεργός.
|
|
Packit |
1470ea |
<note style="tip">Όταν μια μέθοδος χρησιμοποιείται σε μια δήλωση if όπως αυτή, ο κώδικας μέσα στην πρόταση if εκτελείται εάν η μέθοδος επιστρέφει αληθές. </note>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_getACookie() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Is the cookie dispenser turned on?
|
|
Packit |
1470ea |
if (this._cookieSwitch.get_active()) {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Increase the number of cookies by 1 and update the label
|
|
Packit |
1470ea |
cookies++;
|
|
Packit |
1470ea |
this._cookieLabel.set_label ("Number of cookies: " + cookies);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="radio">
|
|
Packit |
1470ea |
<title>Ρύθμιση του ραδιοκουμπιού</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Ένας άλλος τύπος γραφικού στοιχείου εισόδου που μπορούμε να χρησιμοποιήσουμε λέγεται το RadioButton. Τα δημιουργείτε σε ομάδες και έπειτα μόνο ένα RadioButton σε μια ομάδα μπορεί να επιλεγεί τη φορά. Λέγονται RadioButtons επειδή δουλεύουν όπως το κουμπί προεπιλογής καναλιού σε παλιά ραδιόφωνα αυτοκινήτου. Το ραδιοπλήκτρο μπορεί να ρυθμιστεί μόνο σε ένα σταθμό τη φορά, έτσι όποτε πατάτε ένα κουμπί, ένα άλλο πετάγεται έξω.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<media type="image" mime="image/png" src="media/03_jssignal_03.png"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Πρώτα, ας αλλάξουμε το όνομα του ApplicationWindow μας και ας αυξήσουμε την ιδιότητά του border_width, έτσι ώστε τα γραφικά στοιχεία μας να μην πακετάρονται υπερβολικά σφικτά. Το border_width είναι ο αριθμός των εικονοστοιχείων μεταξύ κάθε γραφικού στοιχείου και της άκρης του παραθύρου.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application window
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow({
|
|
Packit |
1470ea |
application: this.application,
|
|
Packit |
1470ea |
window_position: Gtk.WindowPosition.CENTER,
|
|
Packit |
1470ea |
default_height: 200,
|
|
Packit |
1470ea |
default_width: 400,
|
|
Packit |
1470ea |
border_width: 20,
|
|
Packit |
1470ea |
title: "Choose the one that says 'cookie'!"});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Μετά από αυτό, δημιουργούμε τα RadioButtons. Θυμάστε πώς δημιουργήθηκαν σε ομάδες; Ο τρόπος που το κάνουμε, είναι ορίζοντας κάθε νέα ιδιότητα ομάδας RadioButton στο όνομα ενός άλλου RadioButton.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the radio buttons
|
|
Packit |
1470ea |
this._cookieRadio = new Gtk.RadioButton ({ label: "Cookie" });
|
|
Packit |
1470ea |
this._notCookieOne = new Gtk.RadioButton ({ label: "Not cookie",
|
|
Packit |
1470ea |
group: this._cookieRadio });
|
|
Packit |
1470ea |
this._notCookieTwo = new Gtk.RadioButton ({ label: "Not cookie",
|
|
Packit |
1470ea |
group: this._cookieRadio });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Ύστερα, δημιουργούμε ένα πλέγμα για τα RadioButtons. Να θυμάστε, δεν είμαστε υποχρεωμένοι να τακτοποιήσουμε τα πράγματα σε πλέγματα με την ίδια σειρά που τα δημιουργούμε.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Arrange the radio buttons in their own grid
|
|
Packit |
1470ea |
this._radioGrid = new Gtk.Grid ();
|
|
Packit |
1470ea |
this._radioGrid.attach (this._notCookieOne, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._radioGrid.attach (this._cookieRadio, 0, 1, 1, 1);
|
|
Packit |
1470ea |
this._radioGrid.attach (this._notCookieTwo, 0, 2, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Κανονικά, το RadioButton που επιλέχτηκε από προεπιλογή είναι αυτό του ονόματος της ομάδας. Θέλουμε το πρώτο κουμπί "Not cookie" να επιλέγεται από προεπιλογή, όμως, έτσι χρησιμοποιούμε τη μέθοδό του set_active.
|
|
Packit |
1470ea |
<note style="tip">Θα μπορούσαμε επίσης να ορίσουμε την ενεργή του ιδιότητα σε αληθές όταν το δημιουργούμε. </note>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Set the button that will be at the top to be active by default
|
|
Packit |
1470ea |
this._notCookieOne.set_active (true);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Τώρα τακτοποιούμε καθετί στο δικό μας κύριο πλέγμα όπως συνήθως ...
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Put everything inside the grid
|
|
Packit |
1470ea |
this._grid.attach (this._radioGrid, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._cookieButton, 0, 1, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Και έπειτα αλλάζουμε τη συνάρτησή μας _getACookie για να ελέγξουμε εάν το κουμπί μπισκότο είναι αυτό που επιλέχτηκε.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_getACookie() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Did you select "cookie" instead of "not cookie"?
|
|
Packit |
1470ea |
if (this._cookieRadio.get_active()) {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Increase the number of cookies by 1 and update the label
|
|
Packit |
1470ea |
cookies++;
|
|
Packit |
1470ea |
this._cookieLabel.set_label ("Number of cookies: " + cookies);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="spell">
|
|
Packit |
1470ea |
<title>Μπορείτε να συλλαβίσετε "cookie";</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Στο τελευταίο γραφικό στοιχείο εισόδου που πρόκειται να καλύψουμε είναι το γραφικό στοιχείο καταχώρισης, που χρησιμοποιείται για εισαγωγή κειμένου μονής γραμμής.
|
|
Packit |
1470ea |
<note style="tip">Εάν χρειάζεστε να μπορείτε να εισάγετε σε μια πλήρη παράγραφο ή περισσότερο, όπως εάν δομείτε έναν επεξεργαστή κειμένου, θα θέλετε να φαίνεται στο πολύ περισσότερο προσαρμόσιμο γραφικό στοιχείο <link xref="textview.js">TextView</link>. </note>
|
|
Packit |
1470ea |
<media type="image" mime="image/png" src="media/03_jssignal_04.png"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Αφού αλλάξουμε το όνομα του παραθύρου, δημιουργούμε το γραφικό στοιχείο καταχώρισης.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the text entry field
|
|
Packit |
1470ea |
this._spellCookie = new Gtk.Entry ();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Ύστερα, τακτοποιούμε καθετί στο πλέγμα ...
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Put everything inside the grid
|
|
Packit |
1470ea |
this._grid.attach (this._spellCookie, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._cookieButton, 0, 1, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Και τώρα τροποποιούμε την δήλωση if ξανά του _getACookie, χρησιμοποιώντας τη μέθοδο get_text της καταχώρισης για ανάκτηση του κειμένου που βάλατε μέσα του και δείτε εάν συλλαβίστηκε σωστά το "cookie". Δεν μας ενδιαφέρει εάν κάνετε κεφαλαίο το "cookie" ή όχι, έτσι χρησιμοποιούμε την ενσωματωμένη μέθοδο toLowerCase της JavaScript για αλλαγή του κειμένου καταχώρισης σε όλα τα πεζά γράμματα στη δήλωση if.
|
|
Packit |
1470ea |
<note style="tip">Ένα γραφικό στοιχείο καταχώρισης δεν έχει μια ιδιότητα ετικέτας, που είναι ένα σύνολο συμβολοσειράς κειμένου όπου ο χρήστης δεν μπορεί να αλλάξει. (Δεν μπορείτε κανονικά να αλλάξετε την ετικέτα σε ένα κουμπί, για παράδειγμα.) Στη θέση του έχει μια ιδιότητα κειμένου, που αλλάζει για να συμφωνεί με ότι ο χρήστης πληκτρολογεί. </note>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_getACookie() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Did you spell "cookie" correctly?
|
|
Packit |
1470ea |
if ((this._spellCookie.get_text()).toLowerCase() == "cookie") {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Increase the number of cookies by 1 and update the label
|
|
Packit |
1470ea |
cookies++;
|
|
Packit |
1470ea |
this._cookieLabel.set_label ("Number of cookies: " + cookies);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="whats_next">
|
|
Packit |
1470ea |
<title>Ποιο είναι το επόμενο;</title>
|
|
Packit |
1470ea |
Συνεχίστε την ανάγνωση, εάν θα θέλατε να δείτε τον πλήρη κώδικα για κάθε έκδοση της εφαρμογής δημιουργίας cookie.
|
|
Packit |
1470ea |
<note style="tip">Η κύρια σελίδα μαθημάτων JavaScript έχει <link xref="beginner.js#buttons">πιο λεπτομερή δείγματα κώδικα</link> για κάθε γραφικό στοιχείο εισόδου, συμπεριλαμβανομένων αρκετών που δεν καλύπτονται εδώ. </note>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="complete">
|
|
Packit |
1470ea |
<title>Δείγματα πλήρους κώδικα</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<links type="section"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="buttonsample">
|
|
Packit |
1470ea |
<title>Δείγμα κώδικα με κουμπί</title>
|
|
Packit |
1470ea |
<media type="image" mime="image/png" src="media/03_jssignal_01.png"/>
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
imports.gi.versions.Gtk = '3.0';
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// We start out with 0 cookies
|
|
Packit |
1470ea |
var cookies = 0;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
class GettingTheSignal {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application itself
|
|
Packit |
1470ea |
constructor() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect 'activate' and 'startup' signals to the callback functions
|
|
Packit |
1470ea |
this.application.connect('activate', this._onActivate.bind(this));
|
|
Packit |
1470ea |
this.application.connect('startup', this._onStartup.bind(this));
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'activate' signal presents window when active
|
|
Packit |
1470ea |
_onActivate() {
|
|
Packit |
1470ea |
this._window.present();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'startup' signal builds the UI
|
|
Packit |
1470ea |
_onStartup() {
|
|
Packit |
1470ea |
this._buildUI();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Build the application's UI
|
|
Packit |
1470ea |
_buildUI() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application window
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow({
|
|
Packit |
1470ea |
application: this.application,
|
|
Packit |
1470ea |
window_position: Gtk.WindowPosition.CENTER,
|
|
Packit |
1470ea |
default_height: 200,
|
|
Packit |
1470ea |
default_width: 400,
|
|
Packit |
1470ea |
title: "Click the button to get a cookie!"});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the label
|
|
Packit |
1470ea |
this._cookieLabel = new Gtk.Label ({
|
|
Packit |
1470ea |
label: "Number of cookies: " + cookies });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the cookie button
|
|
Packit |
1470ea |
this._cookieButton = new Gtk.Button ({ label: "Get a cookie" });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect the cookie button to the function that handles clicking it
|
|
Packit |
1470ea |
this._cookieButton.connect ('clicked', this._getACookie.bind(this));
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create a grid to arrange everything inside
|
|
Packit |
1470ea |
this._grid = new Gtk.Grid ({
|
|
Packit |
1470ea |
halign: Gtk.Align.CENTER,
|
|
Packit |
1470ea |
valign: Gtk.Align.CENTER,
|
|
Packit |
1470ea |
row_spacing: 20 });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Put everything inside the grid
|
|
Packit |
1470ea |
this._grid.attach (this._cookieButton, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._cookieLabel, 0, 1, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Add the grid to the window
|
|
Packit |
1470ea |
this._window.add (this._grid);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_getACookie() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Increase the number of cookies by 1 and update the label
|
|
Packit |
1470ea |
cookies++;
|
|
Packit |
1470ea |
this._cookieLabel.set_label ("Number of cookies: " + cookies);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
};
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Run the application
|
|
Packit |
1470ea |
let app = new GettingTheSignal ();
|
|
Packit |
1470ea |
app.application.run (ARGV);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="switchsample">
|
|
Packit |
1470ea |
<title>Δείγμα κώδικα με διακόπτη</title>
|
|
Packit |
1470ea |
<media type="image" mime="image/png" src="media/03_jssignal_02.png"/>
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
imports.gi.versions.Gtk = '3.0';
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// We start out with 0 cookies
|
|
Packit |
1470ea |
var cookies = 0;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
class GettingTheSignal {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application itself
|
|
Packit |
1470ea |
constructor() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect 'activate' and 'startup' signals to the callback functions
|
|
Packit |
1470ea |
this.application.connect('activate', this._onActivate.bind(this));
|
|
Packit |
1470ea |
this.application.connect('startup', this._onStartup.bind(this));
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'activate' signal presents window when active
|
|
Packit |
1470ea |
_onActivate() {
|
|
Packit |
1470ea |
this._window.present();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'startup' signal builds the UI
|
|
Packit |
1470ea |
_onStartup() {
|
|
Packit |
1470ea |
this._buildUI();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Build the application's UI
|
|
Packit |
1470ea |
_buildUI() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application window
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow({
|
|
Packit |
1470ea |
application: this.application,
|
|
Packit |
1470ea |
window_position: Gtk.WindowPosition.CENTER,
|
|
Packit |
1470ea |
default_height: 200,
|
|
Packit |
1470ea |
default_width: 400,
|
|
Packit |
1470ea |
title: "Click the button to get a cookie!"});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the label
|
|
Packit |
1470ea |
this._cookieLabel = new Gtk.Label ({
|
|
Packit |
1470ea |
label: "Number of cookies: " + cookies });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the cookie button
|
|
Packit |
1470ea |
this._cookieButton = new Gtk.Button ({
|
|
Packit |
1470ea |
label: "Get a cookie" });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect the cookie button to the function that handles clicking it
|
|
Packit |
1470ea |
this._cookieButton.connect ('clicked', this._getACookie.bind(this));
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the switch that controls whether or not you can win
|
|
Packit |
1470ea |
this._cookieSwitch = new Gtk.Switch ();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the label to go with the switch
|
|
Packit |
1470ea |
this._switchLabel = new Gtk.Label ({
|
|
Packit |
1470ea |
label: "Cookie dispenser" });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create a grid for the switch and its label
|
|
Packit |
1470ea |
this._switchGrid = new Gtk.Grid ({
|
|
Packit |
1470ea |
halign: Gtk.Align.CENTER,
|
|
Packit |
1470ea |
valign: Gtk.Align.CENTER });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Put the switch and its label inside that grid
|
|
Packit |
1470ea |
this._switchGrid.attach (this._switchLabel, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create a grid to arrange everything else inside
|
|
Packit |
1470ea |
this._grid = new Gtk.Grid ({
|
|
Packit |
1470ea |
halign: Gtk.Align.CENTER,
|
|
Packit |
1470ea |
valign: Gtk.Align.CENTER,
|
|
Packit |
1470ea |
row_spacing: 20 });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Put everything inside the grid
|
|
Packit |
1470ea |
this._grid.attach (this._cookieButton, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._switchGrid, 0, 1, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Add the grid to the window
|
|
Packit |
1470ea |
this._window.add (this._grid);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_getACookie() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Is the cookie dispenser turned on?
|
|
Packit |
1470ea |
if (this._cookieSwitch.get_active()) {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Increase the number of cookies by 1 and update the label
|
|
Packit |
1470ea |
cookies++;
|
|
Packit |
1470ea |
this._cookieLabel.set_label ("Number of cookies: " + cookies);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
};
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Run the application
|
|
Packit |
1470ea |
let app = new GettingTheSignal ();
|
|
Packit |
1470ea |
app.application.run (ARGV);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="radiobuttonsample">
|
|
Packit |
1470ea |
<title>Δείγμα κώδικα με RadioButton</title>
|
|
Packit |
1470ea |
<media type="image" mime="image/png" src="media/03_jssignal_03.png"/>
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
imports.gi.versions.Gtk = '3.0';
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// We start out with 0 cookies
|
|
Packit |
1470ea |
var cookies = 0;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
class GettingTheSignal {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application itself
|
|
Packit |
1470ea |
constructor() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect 'activate' and 'startup' signals to the callback functions
|
|
Packit |
1470ea |
this.application.connect('activate', this._onActivate.bind(this));
|
|
Packit |
1470ea |
this.application.connect('startup', this._onStartup.bind(this));
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'activate' signal presents window when active
|
|
Packit |
1470ea |
_onActivate() {
|
|
Packit |
1470ea |
this._window.present();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'startup' signal builds the UI
|
|
Packit |
1470ea |
_onStartup() {
|
|
Packit |
1470ea |
this._buildUI();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Build the application's UI
|
|
Packit |
1470ea |
_buildUI() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application window
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow({
|
|
Packit |
1470ea |
application: this.application,
|
|
Packit |
1470ea |
window_position: Gtk.WindowPosition.CENTER,
|
|
Packit |
1470ea |
default_height: 200,
|
|
Packit |
1470ea |
default_width: 400,
|
|
Packit |
1470ea |
border_width: 20,
|
|
Packit |
1470ea |
title: "Choose the one that says 'cookie'!"});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the radio buttons
|
|
Packit |
1470ea |
this._cookieRadio = new Gtk.RadioButton ({ label: "Cookie" });
|
|
Packit |
1470ea |
this._notCookieOne = new Gtk.RadioButton ({ label: "Not cookie",
|
|
Packit |
1470ea |
group: this._cookieRadio });
|
|
Packit |
1470ea |
this._notCookieTwo = new Gtk.RadioButton ({ label: "Not cookie",
|
|
Packit |
1470ea |
group: this._cookieRadio });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Arrange the radio buttons in their own grid
|
|
Packit |
1470ea |
this._radioGrid = new Gtk.Grid ();
|
|
Packit |
1470ea |
this._radioGrid.attach (this._notCookieOne, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._radioGrid.attach (this._cookieRadio, 0, 1, 1, 1);
|
|
Packit |
1470ea |
this._radioGrid.attach (this._notCookieTwo, 0, 2, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Set the button that will be at the top to be active by default
|
|
Packit |
1470ea |
this._notCookieOne.set_active (true);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the cookie button
|
|
Packit |
1470ea |
this._cookieButton = new Gtk.Button ({
|
|
Packit |
1470ea |
label: "Get a cookie" });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect the cookie button to the function that handles clicking it
|
|
Packit |
1470ea |
this._cookieButton.connect ('clicked', this._getACookie.bind(this));
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the label
|
|
Packit |
1470ea |
this._cookieLabel = new Gtk.Label ({
|
|
Packit |
1470ea |
label: "Number of cookies: " + cookies });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create a grid to arrange everything inside
|
|
Packit |
1470ea |
this._grid = new Gtk.Grid ({
|
|
Packit |
1470ea |
halign: Gtk.Align.CENTER,
|
|
Packit |
1470ea |
valign: Gtk.Align.CENTER,
|
|
Packit |
1470ea |
row_spacing: 20 });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Put everything inside the grid
|
|
Packit |
1470ea |
this._grid.attach (this._radioGrid, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._cookieButton, 0, 1, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Add the grid to the window
|
|
Packit |
1470ea |
this._window.add (this._grid);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_getACookie() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Did you select "cookie" instead of "not cookie"?
|
|
Packit |
1470ea |
if (this._cookieRadio.get_active()) {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Increase the number of cookies by 1 and update the label
|
|
Packit |
1470ea |
cookies++;
|
|
Packit |
1470ea |
this._cookieLabel.set_label ("Number of cookies: " + cookies);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
};
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Run the application
|
|
Packit |
1470ea |
let app = new GettingTheSignal ();
|
|
Packit |
1470ea |
app.application.run (ARGV);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="entrysample">
|
|
Packit |
1470ea |
<title>Δείγμα κώδικα με καταχώριση</title>
|
|
Packit |
1470ea |
<media type="image" mime="image/png" src="media/03_jssignal_04.png"/>
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
imports.gi.versions.Gtk = '3.0';
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// We start out with 0 cookies
|
|
Packit |
1470ea |
var cookies = 0;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
class GettingTheSignal {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application itself
|
|
Packit |
1470ea |
constructor() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect 'activate' and 'startup' signals to the callback functions
|
|
Packit |
1470ea |
this.application.connect('activate', this._onActivate.bind(this));
|
|
Packit |
1470ea |
this.application.connect('startup', this._onStartup.bind(this));
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'activate' signal presents window when active
|
|
Packit |
1470ea |
_onActivate() {
|
|
Packit |
1470ea |
this._window.present();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'startup' signal builds the UI
|
|
Packit |
1470ea |
_onStartup() {
|
|
Packit |
1470ea |
this._buildUI();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Build the application's UI
|
|
Packit |
1470ea |
_buildUI() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application window
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow({
|
|
Packit |
1470ea |
application: this.application,
|
|
Packit |
1470ea |
window_position: Gtk.WindowPosition.CENTER,
|
|
Packit |
1470ea |
default_height: 200,
|
|
Packit |
1470ea |
default_width: 400,
|
|
Packit |
1470ea |
border_width: 20,
|
|
Packit |
1470ea |
title: "Spell 'cookie' to get a cookie!"});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the text entry field
|
|
Packit |
1470ea |
this._spellCookie = new Gtk.Entry ();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the cookie button
|
|
Packit |
1470ea |
this._cookieButton = new Gtk.Button ({
|
|
Packit |
1470ea |
label: "Get a cookie" });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect the cookie button to the function that handles clicking it
|
|
Packit |
1470ea |
this._cookieButton.connect ('clicked', this._getACookie.bind(this));
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the label
|
|
Packit |
1470ea |
this._cookieLabel = new Gtk.Label ({
|
|
Packit |
1470ea |
label: "Number of cookies: " + cookies });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create a grid to arrange everything inside
|
|
Packit |
1470ea |
this._grid = new Gtk.Grid ({
|
|
Packit |
1470ea |
halign: Gtk.Align.CENTER,
|
|
Packit |
1470ea |
valign: Gtk.Align.CENTER,
|
|
Packit |
1470ea |
row_spacing: 20 });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Put everything inside the grid
|
|
Packit |
1470ea |
this._grid.attach (this._spellCookie, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._cookieButton, 0, 1, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Add the grid to the window
|
|
Packit |
1470ea |
this._window.add (this._grid);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_getACookie() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Did you spell "cookie" correctly?
|
|
Packit |
1470ea |
if ((this._spellCookie.get_text()).toLowerCase() == "cookie") {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Increase the number of cookies by 1 and update the label
|
|
Packit |
1470ea |
cookies++;
|
|
Packit |
1470ea |
this._cookieLabel.set_label ("Number of cookies: " + cookies);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
};
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Run the application
|
|
Packit |
1470ea |
let app = new GettingTheSignal ();
|
|
Packit |
1470ea |
app.application.run (ARGV);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</page>
|