<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="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 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>Κλίμακα</title>

  <media type="image" mime="image/png" src="media/scalepenguins.png"/>

  
Μια κλίμακα είναι ένας οριζόντιος ή κάθετος ολισθητής, που αναπαριστά μια τιμή μέσα σε μια αριθμητική περιοχή. Όταν δημιουργείτε μια νέα κλίμακα, ορίζετε ποια είναι η προεπιλεγμένη της θέση, ποιοι είναι οι αριθμοί στην κορυφή και στον πάτο της περιοχής και πράγματα όπως πόσο μετακινείται πάνω ή κάτω όταν πατάτε σε μία κλίμακα σε οποιαδήποτε πλευρά του κουμπιού. Για να συνεχίσετε να έχετε να πληκτρολογήσετε όλο αυτό κάθε φορά δημιουργείτε μια νέα κλίμακα, μπορείτε να δημιουργήσετε ένα αντικείμενο που λέγεται ρύθμιση και ανιχνεύει όλο αυτό, έπειτα πείτε σε κάθε νέα σκάλα να χρησιμοποιήσει αυτήν τη ρύθμιση.

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

    <links type="section"/>

  <section id="imports">

    <title>Βιβλιοθήκες για εισαγωγή</title>

#!/usr/bin/gjs

const Gio = imports.gi.Gio;

const Gtk = imports.gi.Gtk;

const Lang = imports.lang;

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

    </section>

  <section id="applicationwindow">

    <title>Δημιουργία του παραθύρου εφαρμογής</title>

const ScaleExample = new Lang.Class({

    Name: 'Scale Example',

    // Δημιουργία της εφαρμογής αυτής καθεαυτής

    _init: function() {

        this.application = new Gtk.Application({

            application_id: 'org.example.jsscale'

        });

    // Σύνδεση των σημάτων '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 ();

    },

    
Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση ScaleExample. Ο παραπάνω κώδικας δημιουργεί μια <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

    // Δόμηση της διεπαφής χρήστη της εφαρμογής

    _buildUI: function() {

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

        this._window = new Gtk.ApplicationWindow({

            application: this.application,

            window_position: Gtk.WindowPosition.CENTER,

            border_width: 20,

            title: "Birds on a Floe"});

    
Η συνάρτηση _buildUI είναι εκεί που βάζουμε όλον τον κώδικα για να δημιουργήσουμε τη διεπαφή χρήστη της εφαρμογής. Το πρώτο βήμα δημιουργεί ένα νέο <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> για να βάλουμε μέσα τα γραφικά στοιχεία μας.

  </section>

  <section id="button">

    <title>Δημιουργία των κλιμάκων</title>

        // Δημιουργία της οριζόντιας κλίμακας

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

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

    
Μπορούμε να χρησιμοποιήσουμε τη μέθοδο set_draw_value για να του πούμε εάν θα εμφανίσει ή όχι τον αριθμό δίπλα στην κινητή κλίμακα. Σχολιάζεται σε αυτό το παράδειγμα.

        // Δημιουργία μιας κύριας προσαρμογής για χρήση με την κάθετη (ή οποιαδήποτε άλλη)κλίμακα

        this._adjustment = new Gtk.Adjustment ({

            value: 95,

            lower: 0,

            upper: 100,

            step_increment: 5,

            page_increment: 10 });

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

        // Δημιουργία μιας κάθετης κλίμακας χρησιμοποιώντας την προσαρμογή που μόλις φτιάξαμε

        this._vScale = new Gtk.Scale ({

            orientation: Gtk.Orientation.VERTICAL,

            adjustment: this._adjustment,

            digits: 0,

            // draw_value: false,

            margin_left: 10 });

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

        // Δημιουργία της ετικέτας που εμφανίζει το γινόμενο των δύο τιμών

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

        // Σύνδεση των δύο κλιμάκων με συναρτήσεις που επανυπολογίζουν την ετικέτα

        this._hScale.connect ("value-changed", Lang.bind (this, this._recalc));

        this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));

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

    
Αφού δημιουργήσουμε την ετικέτα, συνδέουμε τα σήματα "value-changed" των δύο κλιμάκων στο _recalc, μια συνάρτηση που θα ξαναϋπολογίσει τον αριθμό των πιγκουίνων στο παγόβουνο και δίνει ένα νέο μήνυμα.

        // Δημιουργία ενός πλέγματος για τακτοποίηση των πραγμάτων μέσα του

        this._UIGrid = new Gtk.Grid ({

            halign: Gtk.Align.CENTER,

            valign: Gtk.Align.CENTER,

            margin_top: 20,

            margin_left: 20});

        // Προσάρτηση όλων στο πλέγμα

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

    
Εδώ δημιουργούμε ένα <link xref="grid.js">πλέγμα</link> για να τα βάλουμε όλα μέσα, έπειτα προσκολλάμε όλα τα γραφικά στοιχεία μας. Σημειώστε ότι εδώ και για μερικά από τα ίδια τα γραφικά στοιχεία χρησιμοποιούμε περιθώρια για να κρατήσουμε τα πράγματα τοποθετημένα με τάξη.

        // Προσθήκη του πλέγματος στο παράθυρο

        this._window.add (this._UIGrid);

        // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων

        this._window.show_all();

    },

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

    </section>

    <section id="scales-handler">

    <title>Η συνάρτηση που χειρίζεται την αλλαγή των τιμών των κλιμάκων</title>

    _recalc: function() {

        // Υπολογισμός του γινομένου των δύο τιμών των κλιμάκων

        var product = (this._hScale.get_value() * this._vScale.get_value());

        // Δημιουργία μιας κενής γραμμής σχολίου σε περίπτωση που δεν υπάρχει ένα χαζό σχόλιο να γίνει

        var comment = "";

        // Δημιουργία ενός χαζού σχολίου με βάση τον αριθμό των πιγκουίνων

        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

        this._label.set_label (String (product) + " penguins on the iceberg. " + comment);

    }

});

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

// Εκτέλεση της εφαρμογής

let app = new ScaleExample ();

app.application.run (ARGV);

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

  </section>

  <section id="complete">

    <title>Δείγμα πλήρους κώδικα</title>

#!/usr/bin/gjs

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

const Gio = imports.gi.Gio;

const Gtk = imports.gi.Gtk;

class ScaleExample {

    // Create the application itself

    constructor() {

        this.application = new Gtk.Application({

            application_id: 'org.example.jsscale'

        });

        // 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 window 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,

            border_width: 20,

            title: "Birds on a Floe"});

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

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

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

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

        this._vScale.connect ("value-changed", this._recalc.bind(this));

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

        // Add the grid to the window

        this._window.add (this._UIGrid);

        // Show the window and all child widgets

        this._window.show_all();

    }

    _recalc() {

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

    }

};

// Run the application

let app = new ScaleExample ();

app.application.run (ARGV);

  </section>

  <section id="in-depth">

    <title>Τεκμηρίωση σε βάθος</title>

<list>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustment.html">Gtk.Adjustment</link>
</item>

  <item>
<link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>
</item>

  <item>
<link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html">Gtk.Grid</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Label.html">Gtk.Label</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Scale.html">Gtk.Scale</link>
</item>

</list>

  </section>

</page>