# ComboBoxText (JavaScript)

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

# ComboBoxText

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

Εκτός και χρειάζεστε τα πρόσθετα γνωρίσματα ενός πλήρους σύνθετου πλαισίου (ComboBox), ή είναι άνετη η εργασία με αποθήκες λιστών (ListStores) και αποθήκες δένδρου (TreeStores), μπορεί να το βρείτε πολύ απλούστερο να χρησιμοποιήσετε ένα κείμενο σύνθετου πλαισίου (ComboBoxText) όποτε είναι δυνατό.

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

#!/usr/bin/gjs

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

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

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

const ComboBoxTextExample = new Lang.Class ({ Name: 'ComboBoxText Example',

// Create the application itself _init: function () { this.application = new Gtk.Application ({ application_id: 'org.example.jscomboboxtext'});

// 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 (); },

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

// 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_width: 200, border_width: 10 });

Η συνάρτηση _buildUI είναι εκεί που βάζουμε όλον τον κώδικα για να δημιουργήσουμε τη διεπαφή χρήστη της εφαρμογής. Το πρώτο βήμα δημιουργεί ένα νέο Gtk.ApplicationWindow για να βάλουμε μέσα τα γραφικά στοιχεία μας.

# Δημιουργία των ComboBoxText

// Create the combobox this._comboBoxText = new Gtk.ComboBoxText();

// Populate the combobox let distros = ["Select distribution", "Fedora", "Mint", "Suse"]; for (let i = 0; i < distros.length; i++) this._comboBoxText.append_text (distros[i]); this._comboBoxText.set_active (0);

// Connect the combobox's 'changed' signal to our callback function this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));

Μετά τη δημιουργία του ComboBoxText, χρησιμοποιούμε τη μέθοδό του append_text για να προσθέσουμε συμβολοσειρές κειμένου σε αυτό. Όπως οι καταχωρίσεις σε έναν πίνακα, έχει καθεμιά έναν αριθμό για ταυτότητα, αρχίζοντας με 0. Για απλοποίηση, μπορείτε πράγματι να δημιουργήσετε έναν πίνακα για τις καταχωρίσεις ComboBoxText, έπειτα να χρησιμοποιήσετε έναν βρόχο for για να τα προσαρτήσετε σε σειρά, όπως κάναμε εδώ.

Μετά το γέμισμα του ComboBoxText, ορίζουμε την πρώτη του καταχώριση να είναι ενεργή, έτσι ώστε θα δούμε τη γραμμή "Select distribution" πριν την πατήσουμε. Έπειτα συνδέουμε το σήμα του changed στη συνάρτηση _onComboChanged, έτσι ώστε να καλείται όποτε κάνετε μια νέα επιλογή από το πτυσσόμενο μενού.

Εάν θα θέλατε να προσθέσετε μια καταχώριση σε ένα ComboBoxText, μπορείτε να χρησιμοποιήσετε τη μέθοδο insert_text. Εάν προτιμάτε να χρησιμοποιήσετε μια συμβολοσειρά κειμένου ως μια ταυτότητα για κάθε καταχώριση αντί να βασίζεστε σε αριθμούς μόνο, μπορείτε να χρησιμοποιήσετε τις μεθόδους append και insert. Δείτε τους συνδέσμους στο τέλος αυτού του μαθήματος για τις λεπτομέρειες χρήσης τους.

// Add the combobox to the window this._window.add (this._comboBoxText);

// Show the window and all child widgets this._window.show_all(); },

Τελικά, προσθέτουμε το ComboBoxText στο παράθυρο, έπειτα λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και το γραφικό στοιχείο μέσα του.

# Η συνάρτηση που χειρίζεται την επιλογή σας

_onComboChanged: function () {

// The responses we'll use for our messagedialog let responses = ["", "Fedora is a community distro sponsored by Red Hat.", "Mint is a popular distro based on Ubuntu.", "SUSE is a name shared by two separate distros."];

Πρόκειται να δημιουργήσουμε ένα αναδυόμενο MessageDialog, που σας εμφανίζει ένα μήνυμα με βάση ποια διανομή επιλέγετε. Πρώτα, δημιουργούμε τον πίνακα των απαντήσεων για χρήση. Αφού η πρώτη συμβολοσειρά στο ComboBoxText μας είναι μόνο το μήνυμα "Select distribution", κάνουμε την πρώτη συμβολοσειρά στον πίνακά μας κενή.

// Which combobox item is active? let activeItem = this._comboBoxText.get_active();

// No messagedialog if you chose "Select distribution" if (activeItem != 0) { this._popUp = new Gtk.MessageDialog ({ transient_for: this._window, modal: true, buttons: Gtk.ButtonsType.OK, message_type: Gtk.MessageType.INFO, text: responses[activeItem]});

// Connect the OK button to a handler function this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));

// Show the messagedialog this._popUp.show(); }

},

Πριν την προβολή ενός MessageDialog, δοκιμάζουμε πρώτα για να βεβαιωθούμε ότι δεν επιλέξατε το μήνυμα "Select distribution". Μετά από αυτό, ορίζουμε το κείμενο του να είναι στην καταχώριση στον πίνακα που αντιστοιχεί στην ενεργή καταχώριση στο ComboBoxText μας. Το κάνουμε χρησιμοποιώντας τη μέθοδο get_active, που επιστρέφει τον αριθμό ταυτότητας της επιλογής σας.

Άλλες μέθοδοι που μπορείτε να χρησιμοποιήσετε περιλαμβάνουν το get_active_id, που επιστρέφει την ταυτότητα του κειμένου που αποδόθηκε από το append, και get_active_text, τα οποία επιστρέφουν το πλήρες κείμενο της επιλεγμένης συμβολοσειράς.

Μετά τη δημιουργία του MessageDialog, συνδέουμε το σήμα της απάντησής του στη συνάρτηση _onDialogResponse, έπειτα του λέμε να εμφανίσει τον εαυτόν του.

_onDialogResponse: function () {

this._popUp.destroy ();

}

});

Αφού το μόνο κουμπί που ο MessageDialog έχει είναι ένα κουμπί εντάξει, δεν χρειαζόμαστε να ελέγξουμε το response_id του για να δούμε ποιο κουμπί πατήθηκε. Αυτό που κάνουμε εδώ είναι η καταστροφή του αναδυόμενου.

// Run the application let app = new ComboBoxTextExample (); app.application.run (ARGV);

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

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

#!/usr/bin/gjs

imports.gi.versions.Gtk = '3.0'; const Gtk = imports.gi.Gtk;

class ComboBoxTextExample {

// Create the application itself constructor() { this.application = new Gtk.Application ({ application_id: 'org.example.jscomboboxtext'});

// Connect 'activate' and 'startup' signals to the callback functions this.application.connect('activate', this._onActivate.bind(this)); this.application.connect('startup', this._onStartup.bind(this)); }

// Callback function for 'activate' signal presents windows when active _onActivate() { this._window.present (); }

// Callback function for 'startup' signal builds the UI _onStartup() { this._buildUI(); }

// Build the application's UI _buildUI() {

// Create the application window this._window = new Gtk.ApplicationWindow ({ application: this.application, window_position: Gtk.WindowPosition.CENTER, title: "Welcome to GNOME", default_width: 200, border_width: 10 });

// Create the combobox this._comboBoxText = new Gtk.ComboBoxText();

// Populate the combobox let distros = ["Select distribution", "Fedora", "Mint", "Suse"]; for (let i = 0; i < distros.length; i++) this._comboBoxText.append_text (distros[i]); this._comboBoxText.set_active (0);

// Connect the combobox's 'changed' signal to our callback function this._comboBoxText.connect ('changed', this._onComboChanged.bind(this));

// Add the combobox to the window this._window.add (this._comboBoxText);

// Show the window and all child widgets this._window.show_all(); }

_onComboChanged() {

// The responses we'll use for our messagedialog let responses = ["", "Fedora is a community distro sponsored by Red Hat.", "Mint is a popular distro based on Ubuntu.", "SUSE is a name shared by two separate distros."];

// Which combobox item is active? let activeItem = this._comboBoxText.get_active();

// No messagedialog if you chose "Select distribution" if (activeItem != 0) { this._popUp = new Gtk.MessageDialog ({ transient_for: this._window, modal: true, buttons: Gtk.ButtonsType.OK, message_type: Gtk.MessageType.INFO, text: responses[activeItem]});

// Connect the OK button to a handler function this._popUp.connect ('response', this._onDialogResponse.bind(this));

// Show the messagedialog this._popUp.show(); }

}

_onDialogResponse() {

this._popUp.destroy ();

}

};

// Run the application let app = new ComboBoxTextExample (); app.application.run (ARGV);

# Τεκμηρίωση σε βάθος

Σε αυτό το παράδειγμα χρησιμοποιήσαμε τα παρακάτω:

Gtk.Application

Gtk.ApplicationWindow

Gtk.ComboBoxText

Gtk.MessageDialog