gnome-devel-docs 3.28.0-1 / usr / share / help / el / gnome-devel-demos / textview.js.page

<?xml version="1.0" encoding="utf-8"?>
<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="guide" style="task" id="textview.js" xml:lang="el">
  <info>
  <title type="text">TextView (JavaScript)</title>
    <link type="guide" xref="beginner.js#multiline"/>
    <link type="seealso" xref="button.js"/>
    <link type="seealso" xref="grid.js"/>
    <link type="seealso" xref="GtkApplicationWindow.js"/>
    <link type="seealso" xref="label.js"/>
    <revision version="0.1" date="2012-06-28" status="draft"/>

    <credit type="author copyright">
      <name>Taryn Fox</name>
      <email its:translate="no">jewelfox@fursona.net</email>
      <years>2012</years>
    </credit>

    <desc>Επεξεργαστής κειμένου πολλαπλών γραμμών</desc>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Ελληνική μεταφραστική ομάδα GNOME</mal:name>
      <mal:email>team@gnome.gr</mal:email>
      <mal:years>2012-2015</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Δημήτρης Σπίγγος</mal:name>
      <mal:email>dmtrs32@gmail.com</mal:email>
      <mal:years>2012, 2013</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Μαρία Θουκιδίδου</mal:name>
      <mal:email>marablack3@gmail.com</mal:email>
      <mal:years>2014</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Θάνος Τρυφωνίδης</mal:name>
      <mal:email>tomtryf@gmail.com</mal:email>
      <mal:years>2014, 2015</mal:years>
    </mal:credit>
  </info>

  <title>Προβολή κειμένου (TextView)</title>
  <media type="image" mime="image/png" src="media/textviewpenguinchat.png"/>
  <p>Μια προβολή κειμένου (TextView) είναι πραγματικά (ή τουλάχιστον συνήθως) ένα ένθετο σύνολο τριών αντικειμένων.</p>
  <list>
    <item><p>Στο τέλος είναι ένα <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html">TextBuffer</link>. Αυτό κρατά το ίδιο το κείμενο.</p></item>
    <item><p>Στη μέση είναι η <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html">TextView</link>, που είναι ένα γραφικό στοιχείο που σας επιτρέπει να δείτε και να επεξεργαστείτε το κείμενο στην ενδιάμεση μνήμη. Αυξομειώνει τον εαυτόν του αυτόματα ανάλογα με το πόσο κείμενο υπάρχει.</p></item>
    <item><p>Αφού η αυτόματη αυξομείωση μπορεί να κάνει μια προβολή κειμένου (TextView) άβολη, την τοποθετείτε κανονικά μέσα σε ένα κυλιόμενο παράθυρο (ScrolledWindow). Παρά το όνομα, δεν είναι ένα ενεργό παράθυρο έχοντας γραμμή τίτλου και ένα κουμπί Χ· είναι ένα γραφικό στοιχείο που βάζετε στην εφαρμογή που κάνετε, που δρα όπως ένα παράθυρο σε ένα πιο διαχειρίσιμο τμήμα μιας προβολής κειμένου. Εάν το κείμενο στην ενδιάμεση μνήμη είναι υπερβολικά μεγάλο για να ταιριάξει, θα εμφανιστούν γραμμές κύλισης.</p></item>
  </list>
  <p>Εάν θέλετε να αλλάξετε το εμφανιζόμενο κείμενο στην προβολή κειμένου (TextView), επιδράτε στην ενδιάμεση μνήμη του κειμένου (TextBuffer), αφού είναι αυτό που στην πραγματικότητα κρατά το κείμενο. Το ίδιο γίνεται εάν θέλετε να δείτε τι κείμενο έχει τυπώσει κάποιος. Αυτό το δείγμα της εφαρμογής σας επιτρέπει να μιλήσετε σε έναν (πιστέψτε το) πιγκουίνο και ελέγχει το TextBuffer για να δείτε εάν πληκτρολογήσατε τη λέξη "fish" οπουδήποτε σε αυτό.</p>
  <note><p>Οι πληθυσμοί πιγκουίνου στην πραγματική ζωή μειώνονται γρήγορα, επειδή η κλιματική αλλαγή λιώνει τον πάγο που ζουν και σκοτώνει τα ψάρια που τρώνε. Εάν θα θέλατε να παίξετε ένα (κάπως χαζό) παιχνίδι του GNOME με βάση αυτήν την προϋπόθεση, κοιτάξτε το <link href="http://pingus.seul.org/">Pingus</link>.</p></note>
    <links type="section"/>

  <section id="imports">
    <title>Βιβλιοθήκες για εισαγωγή</title>
    <code mime="application/javascript">
#!/usr/bin/gjs

const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
</code>
    <p>Αυτές είναι οι βιβλιοθήκες που χρειαζόμαστε να εισάγουμε αυτήν την εφαρμογή για να εκτελεστεί. Να θυμόσαστε ότι η γραμμή που λέει στο GNOME ότι χρησιμοποιούμε Gjs χρειάζεται πάντοτε να πάει στην αρχή.</p>
    </section>

  <section id="applicationwindow">
    <title>Δημιουργία του παραθύρου εφαρμογής</title>
    <code mime="application/javascript">
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 ();
    },
</code>
    <p>Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση TextViewExample. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.</p>
    <code mime="application/javascript">
    // Δόμηση της διεπαφής χρήστη της εφαρμογής
    _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 });
</code>
    <p>Η συνάρτηση _buildUI είναι εκεί που βάζουμε όλον τον κώδικα για να δημιουργήσουμε τη διεπαφή χρήστη της εφαρμογής. Το πρώτο βήμα δημιουργεί ένα νέο <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> για να βάλουμε μέσα τα γραφικά στοιχεία μας.</p>
  </section>

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

    <p>Το πρώτο μας βήμα σε αυτό το παράδειγμα είναι η δημιουργία της <link xref="label.js">ετικέτας</link> που θα χρησιμοποιήσει ο πιγκουίνος για να σας μιλήσει. Ορίζουμε το κείμενο σε αυτό σε αναδίπλωση ρυθμίζοντας την ιδιότητά του αναδίπλωση σε αληθή, αλλά θα χρησιμοποιήσουμε μια διαφορετική μέθοδο στην ίδια την TextView που επιτρέπει για πιο ακριβή έλεγχο.</p>

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

    <p>Το πρώτο μας βήμα είναι η δημιουργία ενός TextBuffer για να βάλουμε τις λέξεις μέσα. Αφού δημιουργήσουμε την TextView και του πούμε να χρησιμοποιήσει την TextBuffer που δημιουργήσαμε ως την ενδιάμεση μνήμη του. Το ρυθμίζουμε επίσης να είναι επεξεργάσιμο, αφού θέλουμε να μπορούμε να πληκτρολογήσουμε νέα πράγματα μέσα του.</p>
    <p>Η ιδιότητα 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, που θα βάλει αυτόματα τη λέξη που πληκτρολογείτε στην επόμενη γραμμή εάν πρόκειται να είναι υπερβολικά μεγάλη.</p>

    <code mime="application/javascript">
        // Δημιουργία ενός "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);
</code>
    <p>Εδώ δημιουργούμε ένα κυλιόμενο παράθυρο (ScrolledWindow) και το ορίζουμε σε αυτόματη κύλιση αν γίνεται υπερβολικά μεγάλο οριζόντια ή κάθετα. Του δίνουμε επίσης ένα ωραίο περίγραμμα ETCHED_IN. Μετά από αυτό, βάζουμε την προβολή κειμένου (TextView) μας μέσα και λέμε στο ScrolledWindow να μας δώσει μια θύρα προβολής μέσα του.</p>
    </section>

    <section id="ui">
    <title>Δημιουργία της υπόλοιπης διεπαφής χρήστη</title>

    <code mime="application/javascript">
        // Δημιουργία ενός πλέγματος για να τα οργανώσετε μέσα
        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);
</code>
    <p>Το πρώτο <link xref="grid.js">πλέγμα</link> που δημιουργήσαμε έχει μόνο την ετικέτα και το ScrolledWindow μέσα του.</p>

    <code mime="application/javascript">
        // Δημιουργία ενός πλήκτρου για αποστολή του μηνύματός σας στον πιγκουίνο
        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);
</code>
    <p>Δημιουργούμε ένα <link xref="button.js">κουμπί</link> για να στείλουμε το μήνυμά σας στον πιγκουίνο και ένα νέο πλέγμα που έχει το άλλο στην κορυφή και το κουμπί στο τέλος. Το κουμπί έχει ένα περιθώριο στην κορυφή, έτσι ώστε δεν παράγεται πάνω στο ScrolledWindow.</p>

    <code mime="application/javascript">
        // Προσάρτηση του κύριου πλέγματος στο παράθυρο
        this._window.add (this._mainGrid);

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

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

  </section>

  <section id="function">
    <title>Η συνάρτηση που χειρίζεται την απόκριση του πιγκουίνου</title>
    <code mime="application/javascript">
    _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;

    }

});
</code>
    <p>Εδώ χρησιμοποιούμε μερικές βασικές συναρτήσεις JavaScript για να κάνουμε τους πιγκουίνους να λένε κάτι τυχαία. Οι πιγκουίνοι είναι όπως τα ψάρια, όμως, έτσι εάν αναφέρετε ψάρι θέλουμε ο πιγκουίνος να απαντά σε αυτό. Για να γίνει αυτό, χρησιμοποιούμε την μέθοδο συμφωνίας του αντικειμένου συμβολοσειράς JavaScript στο <file>this.buffer.text</file>, που επιστρέφει τα περιεχόμενα της TextBuffer μας.</p>
    <p>Αφού θέλουμε να καθαρίσουμε την TextBuffer κάθε φορά μετά το πάτημα αποστολή, ορίζουμε το <file>this.buffer.text</file> να περιέχει μια κενή συμβολοσειρά κατόπιν. Έπειτα επιστρέφουμε την εστίαση στην TextView μας, έτσι ώστε να μπορείτε να συνεχίσετε την πληκτρολόγηση χωρίς να πρέπει να πατήσετε πάνω της προκαταβολικά.</p>

    <code mime="application/javascript">
// Εκτέλεση της εφαρμογής
let app = new TextViewExample ();
app.application.run (ARGV);
</code>
    <p>Τελικά, δημιουργούμε ένα νέο παράδειγμα της τελειωμένης κλάσης TextViewExample και εκτελούμε την εφαρμογή.</p>
  </section>

  <section id="complete">
    <title>Δείγμα πλήρους κώδικα</title>
<code mime="application/javascript" style="numbered">#!/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);
</code>
  </section>

  <section id="in-depth">
    <title>Τεκμηρίωση σε βάθος</title>
<list>
  <item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link></p></item>
  <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link></p></item>
  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Button.html">Gtk.Button</link></p></item>
  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html">Gtk.Grid</link></p></item>
  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Label.html">Gtk.Label</link></p></item>
  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.RadioButton.html">Gtk.RadioButton</link></p></item>
  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ScrolledWindow.html">Gtk.ScrolledWindow</link></p></item>
  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html">Gtk.TextBuffer</link></p></item>
  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html">Gtk.TextView</link></p></item>
</list>
  </section>
</page>