<?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="scale.js" xml:lang="el">
  <info>
  <title type="text">Κλίμακα (JavaScript)</title>
    <link type="guide" xref="beginner.js#entry"/>
    <revision version="0.1" date="2012-06-20" status="draft"/>

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

    <desc>Ένας ολισθητής που αντιστοιχεί σε μια αριθμητική τιμή</desc>
  </info>

  <title>Κλίμακα</title>
  <media type="image" mime="image/png" src="media/scalepenguins.png"/>
  <p>Μια κλίμακα είναι ένας οριζόντιος ή κάθετος ολισθητής, που αναπαριστά μια τιμή μέσα σε μια αριθμητική περιοχή. Όταν δημιουργείτε μια νέα κλίμακα, ορίζετε ποια είναι η προεπιλεγμένη της θέση, ποιοι είναι οι αριθμοί στην κορυφή και στον πάτο της περιοχής και πράγματα όπως πόσο μετακινείται πάνω ή κάτω όταν πατάτε σε μία κλίμακα σε οποιαδήποτε πλευρά του κουμπιού. Για να συνεχίσετε να έχετε να πληκτρολογήσετε όλο αυτό κάθε φορά δημιουργείτε μια νέα κλίμακα, μπορείτε να δημιουργήσετε ένα αντικείμενο που λέγεται ρύθμιση και ανιχνεύει όλο αυτό, έπειτα πείτε σε κάθε νέα σκάλα να χρησιμοποιήσει αυτήν τη ρύθμιση.</p>
  <p>Αυτή η κλίμακα είναι ένα απλό γραφικό συστατικό που σας επιτρέπει να ρυθμίσετε το μέγεθος ενός παγόβουνου όπου ζουν οι πιγκουίνοι. Ο αριθμός των πιγκουίνων στο παγόβουνο είναι το γινόμενο των τιμών των δύο ολισθητών. Δοκιμάστε να παίξετε μαζί τους και να δείτε τι συμβαίνει.</p>
    <links type="section"/>

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

const Gio = imports.gi.Gio;
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 ScaleExample = new Lang.Class({
    Name: 'Scale Example',

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

    // 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 window when active
    _onActivate: function() {
        this._window.present();
    },

    // Callback function for 'startup' signal builds the UI
    _onStartup: function() {
        this._buildUI ();
    },
]]></code>
    <p>Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση ScaleExample. Ο παραπάνω κώδικας δημιουργεί μια <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,
            border_width: 20,
            title: "Birds on a Floe"});
]]></code>
    <p>Η συνάρτηση _buildUI είναι εκεί που βάζουμε όλον τον κώδικα για να δημιουργήσουμε τη διεπαφή χρήστη της εφαρμογής. Το πρώτο βήμα δημιουργεί ένα νέο <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> για να βάλουμε μέσα τα γραφικά συστατικά μας.</p>
  </section>

  <section id="button">
    <title>Δημιουργία των κλιμάκων</title>
    <code mime="application/javascript"><![CDATA[
        // Create the horizontal scale
        this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
        this._hScale.set_valign (Gtk.Align.START);
        this._hScale.set_value (50);
        this._hScale.set_digits (0);
        // this._hScale.set_draw_value (false);
]]></code>

    <p>Η μέθοδος new_with_range είναι ένας τρόπος δημιουργίας ενός νέου γραφικού συστατικού κλίμακας. Οι παράμετροι που παίρνει είναι μια <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Orientation.html">Gtk.Orientation</link>, η ελάχιστη τιμή, η μέγιστη τιμή και η αύξηση για ένα μόνο βήμα. Κατόπιν χρησιμοποιούμε τις μεθόδους κλίμακας για να ορίσουμε την αρχική της τιμή και πόσες δεκαδικές θέσεις διατρέχει. Επίσης ορίζουμε την κάθετη της στοίχιση σε αυτήν την περίπτωση, για τον έλεγχο πού εμφανίζεται στο παράθυρο.</p>
    <p>Μπορούμε να χρησιμοποιήσουμε τη μέθοδο set_draw_value για να του πούμε εάν θα εμφανίσει ή όχι τον αριθμό δίπλα στην κινητή κλίμακα. Σχολιάζεται σε αυτό το παράδειγμα.</p>

    <code mime="application/javascript"><![CDATA[
        // Create a master adjustment to use for the vertical (or any other) scale
        this._adjustment = new Gtk.Adjustment ({
            value: 95,
            lower: 0,
            upper: 100,
            step_increment: 5,
            page_increment: 10 });
]]></code>

    <p>Μια ρύθμιση είναι ένα αντικείμενο που μπορούμε να χρησιμοποιήσουμε για απλοποίηση των πραγμάτων όταν δημιουργείτε μια νέα κλίμακα. Η ιδιότητα της ρύθμισης "value" είναι η προεπιλεγμένη τιμή της κλίμακας, ενώ "upper" και "lower" κάνουν το πάνω και κάτω άκρο της αριθμητικής περιοχής. Στο μεταξύ, οι τιμές αύξησης εμφανίζουν πόσο μετακινείται ο ολισθητής όταν κάνετε πράγματα όπως το πάτημα πάνω του.</p>

    <code mime="application/javascript"><![CDATA[
        // Create a vertical scale using the adjustment we just made
        this._vScale = new Gtk.Scale ({
            orientation: Gtk.Orientation.VERTICAL,
            adjustment: this._adjustment,
            digits: 0,
            // draw_value: false,
            margin_left: 10 });
]]></code>

    <p>Εδώ δημιουργούμε ένα νέο αντικείμενο κλίμακας χρησιμοποιώντας _adjustment ως ιδιότητα "adjustment". Αυτό είναι μια μεγάλη συντόμευση. Πρέπει ακόμα να του πούμε να στρογγυλέψει τις δεκαδικές θέσεις, όμως. Σημειώστε ότι η ιδιότητα draw_value είναι σχολιασμένη· έτσι του λέτε να μην εμφανίσει τον αριθμό δίπλα στην κλίμακα όταν δημιουργείτε μία κλίμακα με αυτόν τον τρόπο.</p>

    <code mime="application/javascript"><![CDATA[
        // Create the label that shows the product of the two values
        this._product = (this._hScale.get_value() * this._vScale.get_value());
        this._label = new Gtk.Label ({
            label: (String(this._product) + " penguins on the iceberg."),
            height_request: 200,
            width_request: 200,
            wrap: true});

        // Connect the two scales to functions which recalculate the label
        this._hScale.connect ("value-changed", Lang.bind (this, this._recalc));
        this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));
]]></code>

    <p>Μπορούμε να χρησιμοποιήσουμε τη μέθοδο get_value για να βρούμε την αριθμητική τιμή ορισμού μιας κλίμακας. Μπορούμε έπειτα να κάνουμε οτιδήποτε θέλουμε μαζί της, συμπεριλαμβάνοντας πολλαπλασιασμό των τιμών των δύο κλιμάκων μαζί και να έχουμε μια <link xref="label.js">ετικέτα</link> που μας δείχνει το γινόμενο. Ορίζουμε το κείμενο της ετικέτας να αναδιπλώνεται, επειδή έχουμε την εμφάνιση ενός ανόητου μηνύματος επίσης.</p>
    <p>Αφού δημιουργήσουμε την ετικέτα, συνδέουμε τα σήματα "value-changed" των δύο κλιμάκων στο _recalc, μια συνάρτηση που θα ξαναϋπολογίσει τον αριθμό των πιγκουίνων στο παγόβουνο και δίνει ένα νέο μήνυμα.</p>

    <code mime="application/javascript"><![CDATA[
        // Create a grid to arrange things in
        this._UIGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER,
            margin_top: 20,
            margin_left: 20});

        // Attach everything to the grid
        this._UIGrid.attach (this._label, 0, 0, 1, 1);
        this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
        this._UIGrid.attach (this._vScale, 1, 0, 1, 1);
]]></code>
    <p>Εδώ δημιουργούμε ένα <link xref="grid.js">πλέγμα</link> για να τα βάλουμε όλα μέσα, έπειτα προσκολλάμε όλα τα γραφικά συστατικά μας. Σημειώστε ότι εδώ και για μερικά από τα ίδια τα γραφικά συστατικά χρησιμοποιούμε περιθώρια για να κρατήσουμε τα πράγματα τοποθετημένα με τάξη.</p>
    <code mime="application/javascript"><![CDATA[
        // Add the grid to the window
        this._window.add (this._UIGrid);

        // Show the window and all child widgets
        this._window.show_all();
    },
]]></code>
    <p>Τελικά, προσθέτουμε το πλέγμα στο παράθυρο, έπειτα λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και όλα τα γραφικά συστατικά μέσα του.</p>
    </section>

    <section id="scales-handler">
    <title>Η συνάρτηση που χειρίζεται την αλλαγή των τιμών των κλιμάκων</title>

    <code mime="application/javascript"><![CDATA[
    _recalc: function() {

        // Figure out what the product of the two scales' values is
        var product = (this._hScale.get_value() * this._vScale.get_value());

        // Create a blank comment line in case there isn't a silly comment to make
        var comment = "";

        // Make a silly comment based on the number of penguins
        if (product > 9000) {
            comment = "It's over 9000!";
        }
        else if (product < 1000 && product > 0) {
            comment = "They're getting lonely.";
        }
        else if (product == 0) {
            comment = "They're all gone ...";
        }
        else comment = "";

        // Set ._label's new text
        this._label.set_label (String (product) + " penguins on the iceberg. " + comment);

    }

});
]]></code>
    <p>Να θυμάστε, μπορούμε να πάρουμε μια τιμή κλίμακας χρησιμοποιώντας τη μέθοδο του get_value. Εδώ απλά ξαναϋπολογίζουμε ποιο είναι το γινόμενο των δύο τιμών μετά τη μετακίνηση μιας από τις κλίμακες, προσθέτουμε ένα ανόητο μήνυμα ανάλογα με το πόσοι πιγκουίνοι απέμειναν και αλλάζουμε τη διατύπωση στην _label για να δείξουμε το νέο αριθμό και το μήνυμα.</p>

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

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

  <section id="in-depth">
    <title>Τεκμηρίωση σε βάθος</title>
<list>
  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustment.html">Gtk.Adjustment</link></p></item>
  <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.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.Scale.html">Gtk.Scale</link></p></item>
</list>
  </section>
</page>
