Μια προβολή κειμένου (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 για να βάλουμε μέσα τα γραφικά στοιχεία μας.
// Δημιουργία ετικέτας για τον πιγκουίνο που θα σας μιλήσει
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 στο
Αφού θέλουμε να καθαρίσουμε την TextBuffer κάθε φορά μετά το πάτημα αποστολή, ορίζουμε το
// Εκτέλεση της εφαρμογής
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