<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" 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>jewelfox@fursona.net</email>
      <years>2012</years>
    </credit>

    <desc>Επεξεργαστής κειμένου πολλαπλών γραμμών</desc>
  </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 άβολη, την τοποθετείτε κανονικά μέσα σ' ένα <link xref="scrolledwindow.js">ScrolledWindow</link>. Παρά το όνομα, δεν είναι ένα ενεργό παράθυρο έχοντας γραμμή τίτλου και ένα κουμπί Χ· είναι ένα γραφικό συστατικό που βάζετε στην εφαρμογή που κάνετε, που δρα όπως ένα παράθυρο σε ένα πιο διαχειρίσιμο τμήμα μιας TextView. Εάν το κείμενο στην ενδιάμεση μνήμη είναι υπερβολικά μεγάλο για να ταιριάξει, θα εμφανιστούν γραμμές κύλισης.</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"><![CDATA[
#!/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"><![CDATA[
const TextViewExample = new Lang.Class ({
    Name: 'TextView Example',

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

        // 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 ();
    },
]]></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"><![CDATA[
    // 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: "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"><![CDATA[
        // 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 });
]]></code>

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

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

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

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

    <code mime="application/javascript"><![CDATA[
        // 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', Lang.bind (this, this._chat));

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

    <code mime="application/javascript"><![CDATA[
        // Attach the main grid to the window
        this._window.add (this._mainGrid);

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

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

  </section>

  <section id="function">
    <title>Η συνάρτηση που χειρίζεται την απόκριση του πιγκουίνου</title>
    <code mime="application/javascript"><![CDATA[
    _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"><![CDATA[
// Run the application
let app = new TextViewExample ();
app.application.run (ARGV);
]]></code>
    <p>Τελικά, δημιουργούμε ένα νέο παράδειγμα της τελειωμένης κλάσης TextViewExample και εκτελούμε την εφαρμογή.</p>
  </section>

  <section id="complete">
    <title>Δείγμα πλήρους κώδικα</title>
<code mime="application/javascript" style="numbered"><xi:include href="samples/textview.js" parse="text"><xi:fallback/></xi:include></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</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>
