# TextView (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

# Προβολή κειμένου (TextView)

Μια προβολή κειμένου (TextView) είναι πραγματικά (ή τουλάχιστον συνήθως) ένα ένθετο σύνολο τριών αντικειμένων.

Στο τέλος είναι ένα TextBuffer. Αυτό κρατά το ίδιο το κείμενο.

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

Αφού η αυτόματη αυξομείωση μπορεί να κάνει μια προβολή κειμένου (TextView) άβολη, την τοποθετείτε κανονικά μέσα σε ένα κυλιόμενο παράθυρο (ScrolledWindow). Παρά το όνομα, δεν είναι ένα ενεργό παράθυρο έχοντας γραμμή τίτλου και ένα κουμπί Χ· είναι ένα γραφικό στοιχείο που βάζετε στην εφαρμογή που κάνετε, που δρα όπως ένα παράθυρο σε ένα πιο διαχειρίσιμο τμήμα μιας προβολής κειμένου. Εάν το κείμενο στην ενδιάμεση μνήμη είναι υπερβολικά μεγάλο για να ταιριάξει, θα εμφανιστούν γραμμές κύλισης.

Εάν θέλετε να αλλάξετε το εμφανιζόμενο κείμενο στην προβολή κειμένου (TextView), επιδράτε στην ενδιάμεση μνήμη του κειμένου (TextBuffer), αφού είναι αυτό που στην πραγματικότητα κρατά το κείμενο. Το ίδιο γίνεται εάν θέλετε να δείτε τι κείμενο έχει τυπώσει κάποιος. Αυτό το δείγμα της εφαρμογής σας επιτρέπει να μιλήσετε σε έναν (πιστέψτε το) πιγκουίνο και ελέγχει το TextBuffer για να δείτε εάν πληκτρολογήσατε τη λέξη "fish" οπουδήποτε σε αυτό.

Οι πληθυσμοί πιγκουίνου στην πραγματική ζωή μειώνονται γρήγορα, επειδή η κλιματική αλλαγή λιώνει τον πάγο που ζουν και σκοτώνει τα ψάρια που τρώνε. Εάν θα θέλατε να παίξετε ένα (κάπως χαζό) παιχνίδι του GNOME με βάση αυτήν την προϋπόθεση, κοιτάξτε το Pingus.

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

#!/usr/bin/gjs

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

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

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

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

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

// Δόμηση της διεπαφής χρήστη της εφαρμογής _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 });

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

# Δημιουργία της TextView

// Δημιουργία ετικέτας για τον πιγκουίνο που θα σας μιλήσει this._penguin = new Gtk.Label ({ height_request: 180, width_request: 400, label: "Squaaaak?", wrap: true });

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

// Δημιουργία μιας προβολής κειμένου για να μιλήσετε με τον πιγκουίνο this.buffer = new Gtk.TextBuffer(); this._textView = new Gtk.TextView ({ buffer: this.buffer, editable: true, wrap_mode: Gtk.WrapMode.WORD });

Το πρώτο μας βήμα είναι η δημιουργία ενός TextBuffer για να βάλουμε τις λέξεις μέσα. Αφού δημιουργήσουμε την TextView και του πούμε να χρησιμοποιήσει την TextBuffer που δημιουργήσαμε ως την ενδιάμεση μνήμη του. Το ρυθμίζουμε επίσης να είναι επεξεργάσιμο, αφού θέλουμε να μπορούμε να πληκτρολογήσουμε νέα πράγματα μέσα του.

Η ιδιότητα wrap_mode σας επιτρέπει να επιλέξετε από τέσσερα διαφορετικά WrapModes. Το Gtk.WrapMode.CHAR, για παράδειγμα, ξεκινά την αναδίπλωση γύρω από τη μέση μιας λέξης εάν συνεχίζετε την πληκτρολόγηση όταν φτάνει στην άκρη. Οι περισσότεροι άνθρωποι χρησιμοποιούν προφανώς το Gtk.WrapMode.WORD, που θα βάλει αυτόματα τη λέξη που πληκτρολογείτε στην επόμενη γραμμή εάν πρόκειται να είναι υπερβολικά μεγάλη.

// Δημιουργία ενός "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);

Εδώ δημιουργούμε ένα κυλιόμενο παράθυρο (ScrolledWindow) και το ορίζουμε σε αυτόματη κύλιση αν γίνεται υπερβολικά μεγάλο οριζόντια ή κάθετα. Του δίνουμε επίσης ένα ωραίο περίγραμμα ETCHED_IN. Μετά από αυτό, βάζουμε την προβολή κειμένου (TextView) μας μέσα και λέμε στο ScrolledWindow να μας δώσει μια θύρα προβολής μέσα του.

# Δημιουργία της υπόλοιπης διεπαφής χρήστη

// Δημιουργία ενός πλέγματος για να τα οργανώσετε μέσα 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);

Το πρώτο πλέγμα που δημιουργήσαμε έχει μόνο την ετικέτα και το ScrolledWindow μέσα του.

// Δημιουργία ενός πλήκτρου για αποστολή του μηνύματός σας στον πιγκουίνο 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);

Δημιουργούμε ένα κουμπί για να στείλουμε το μήνυμά σας στον πιγκουίνο και ένα νέο πλέγμα που έχει το άλλο στην κορυφή και το κουμπί στο τέλος. Το κουμπί έχει ένα περιθώριο στην κορυφή, έτσι ώστε δεν παράγεται πάνω στο ScrolledWindow.

// Προσάρτηση του κύριου πλέγματος στο παράθυρο this._window.add (this._mainGrid);

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

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

# Η συνάρτηση που χειρίζεται την απόκριση του πιγκουίνου

_chat: function () {

// Create a random number to determine what the penguin says this.number = Math.floor ((Math.random() * 3) + 1);

// Did you actually say anything? if (this.buffer.text) {

// Did you mention fish? if (this.buffer.text.match (/fish/gi)) {

// Have the penguin squaak about fish if (this.number == 1) this._penguin.set_label ("FISH!");

else if (this.number == 2) this._penguin.set_label ("Fish fish fish fish. Fish!");

else this._penguin.set_label ("Fish? Fish fish fish. Fish fish. FISH!");

}

// I guess you didn't mention fish else {

// Have the penguin talk about penguinny stuff if (this.number == 1) this._penguin.set_label ("SQUAAK!");

else if (this.number == 2) this._penguin.set_label ("Ork ork ork ork squaak. Squaak squaak! *waves flippers*");

else this._penguin.set_label ("Ork ork ork ork ork?");

}

}

// Clear the buffer this.buffer.text = "";

// Give focus back to the textview so you don't have to click it again this._textView.has_focus = true;

}

});

Εδώ χρησιμοποιούμε μερικές βασικές συναρτήσεις JavaScript για να κάνουμε τους πιγκουίνους να λένε κάτι τυχαία. Οι πιγκουίνοι είναι όπως τα ψάρια, όμως, έτσι εάν αναφέρετε ψάρι θέλουμε ο πιγκουίνος να απαντά σε αυτό. Για να γίνει αυτό, χρησιμοποιούμε την μέθοδο συμφωνίας του αντικειμένου συμβολοσειράς JavaScript στο this.buffer.text, που επιστρέφει τα περιεχόμενα της TextBuffer μας.

Αφού θέλουμε να καθαρίσουμε την TextBuffer κάθε φορά μετά το πάτημα αποστολή, ορίζουμε το this.buffer.text να περιέχει μια κενή συμβολοσειρά κατόπιν. Έπειτα επιστρέφουμε την εστίαση στην TextView μας, έτσι ώστε να μπορείτε να συνεχίσετε την πληκτρολόγηση χωρίς να πρέπει να πατήσετε πάνω της προκαταβολικά.

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

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

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

#!/usr/bin/gjs

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

class TextViewExample {

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

// 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: "Talk to a Penguin", default_height: 400, default_width: 440, border_width: 20 });

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

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

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

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

// 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', this._chat.bind(this));

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

// Attach the main grid to the window this._window.add (this._mainGrid);

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

_chat() {

// Create a random number to determine what the penguin says this.number = Math.floor ((Math.random() * 3) + 1);

// Did you actually say anything? if (this.buffer.text) {

// Did you mention fish? if (this.buffer.text.match (/fish/gi)) {

// Have the penguin squaak about fish if (this.number == 1) this._penguin.set_label ("FISH!");

else if (this.number == 2) this._penguin.set_label ("Fish fish fish fish. Fish!");

else this._penguin.set_label ("Fish? Fish fish fish. Fish fish. FISH!");

}

// I guess you didn't mention fish else {

// Have the penguin talk about penguinny stuff if (this.number == 1) this._penguin.set_label ("SQUAAK!");

else if (this.number == 2) this._penguin.set_label ("Ork ork ork ork squaak. Squaak squaak! *waves flippers*");

else this._penguin.set_label ("Ork ork ork ork ork?");

}

}

// Clear the buffer this.buffer.text = "";

// Give focus back to the textview so you don't have to click it again this._textView.has_focus = true; } };

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

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

Gtk.Application

Gtk.ApplicationWindow

Gtk.Button

Gtk.Grid

Gtk.Label

Gtk.RadioButton

Gtk.ScrolledWindow

Gtk.TextBuffer

Gtk.TextView