gnome-devel-docs 3.8.1-1 / usr / share / help / el / gnome-devel-demos / spinbutton.js.page

<?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="spinbutton.js" xml:lang="el">
  <info>
  <title type="text">SpinButton (JavaScript)</title>
    <link type="guide" xref="beginner.js#entry"/>
    <link type="seealso" xref="GtkApplicationWindow.js"/>
    <link type="seealso" xref="grid.js"/>
    <link type="seealso" xref="label.js"/>
    <revision version="0.1" date="2012-06-24" status="draft"/>

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

    <desc>Ένα πεδίο καταχώρισης αριθμού που έχει τα κουμπιά + και -</desc>
  
    <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>
  </info>

  <title>SpinButton</title>
  <media type="image" mime="image/png" src="media/spinbuttonkittens.png"/>
  <p>Ένα SpinButton δεν σχετίζεται με έναν <link xref="spinner.js">Spinner</link>. Είναι ένα πεδίο εισαγωγής κειμένου που δέχεται μόνο αριθμούς και οι οποίοι έχουν κουμπιά συν και πλην για να σας επιτρέψουν την αλλαγή της τιμής χωρίς να πρέπει να πληκτρολογήσετε κάτι.</p>
  <p>Χρησιμοποιείται άριστα όταν είναι φανερό ότι μόνο ένας αριθμός μπορεί να μπει σε αυτό. Σε αυτό το παράδειγμα, δύο SpinButtons χρησιμοποιούνται για τον αριθμό από γατάκια και τον αριθμό των κονσερβών τόννου που τους δίνονται.</p>
    <links type="section"/>

  <section id="imports">
    <title>Βιβλιοθήκες για εισαγωγή</title>
    <code mime="application/javascript">
#!/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">
const SpinButtonExample = new Lang.Class({
    Name: 'SpinButton Example',

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

    // 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>Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση SpinButtonExample. Ο παραπάνω κώδικας δημιουργεί μια <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">
    // 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: "Kitten Feeder"});
</code>
    <p>Η συνάρτηση _buildUI είναι εκεί που βάζουμε όλον τον κώδικα για να δημιουργήσουμε τη διεπαφή χρήστη της εφαρμογής. Το πρώτο βήμα δημιουργεί ένα νέο <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> για να βάλουμε μέσα τα γραφικά συστατικά μας.</p>
  </section>

  <section id="spinbutton">
    <title>Δημιουργία των SpinButtons</title>
    <code mime="application/javascript">
        // Create the first spinbutton using a function
        this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
        this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));
</code>

    <p>Μπορούμε να χρησιμοποιήσουμε τη συνάρτηση new_with_range για τη δημιουργία ενός νέου SpinButton γρήγορα. Η πρώτη του παράμετρος είναι η αρχική τιμή του SpinButton, η δεύτερη του είναι η μέγιστη τιμή και η τρίτη του είναι πόσο θα αυξηθεί όταν πατιούνται τα κουμπιά συν και πλην.</p>
    <p>Αφού δημιουργήσουμε το πρώτο SpinButton, συνδέουμε το σήμα της αλλαγμένης τιμής σε μια συνάρτηση που χειρίζεται τι συμβαίνει όταν ο αριθμός μέσα στα SpinButton αλλάζει.</p>

    <code mime="application/javascript">
        // Create an adjustment to use for the second spinbutton
        this._adjustment = new Gtk.Adjustment ({
            value: 1,
            lower: 0,
            upper: 9001,
            step_increment: 1,
            page_increment: 10 });

        // Create the second spinbutton
        this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });
        this._tuna.connect ("value-changed", Lang.bind (this, this._newValue));

        // this._tuna.set_digits (1);
        // this._tuna.set_wrap (true);
</code>

    <p>Εάν θέλετε περισσότερο λεπτομερή έλεγχο σε ένα SpinButton, ή θέλετε να δημιουργήσετε μια ομάδα SpinButtons που όλα χρησιμοποιούν τις ίδιες παραμέτρους, μπορείτε να δημιουργήσετε ένα αντικείμενο που λέγεται <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustment.html">Adjustment</link>. Έπειτα μπορείτε να χρησιμοποιήσετε αυτό το αντικείμενο ως μια νέα ιδιότητα ρύθμισης του SpinButton και ορίζει όλες τις τιμές μονομιάς. Κατόπιν, μπορείτε να αλλάξετε όλα τα SpinButtons που χρησιμοποιούν αυτήν τη ρύθμιση αλλάζοντας τις ιδιότητες του αντικειμένου ρύθμισης.</p>
    <p>Οι σχολιασμένες γραμμές εδώ εμφανίζουν πράγματα που μπορείτε να κάνετε για προσαρμογή του SpinButton σας. Μπορείτε να ορίσετε τον αριθμό των ψηφίων μετά την δεκαδική υποδιαστολή, για παράδειγμα, ή να του πείτε να αναδιπλώσει τον αριθμό εάν ξεπεράσει το άνω ή κάτω όριο που ορίσατε.</p>
    <note><p>Για χάρη των γατιών, παρακαλώ μην χρησιμοποιήσετε set_digits που επιτρέπει δεκαδικό αριθμό γατιών.</p></note>
  </section>

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

    <code mime="application/javascript">
        // Create the text labels to go with the spinbuttons
        this._startLabel = new Gtk.Label ({ label: "There are " });
        this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "});
        this._tunaLabel = new Gtk.Label ({ label: " can(s) of tuna."});
        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));
        this._lastLabel = new Gtk.Label ({
            label: "That's " + this.perKitten + " can(s) of tuna per kitten." });
</code>
    <p>Δημιουργούμε κάθε <link xref="label.js">ετικέτα</link> ξεχωριστά και έπειτα τις συνδέουμε μαζί με τα SpinButtons. Η τελευταία ετικέτα χρειάζεται να εμφανίσει τον αριθμό των κονσερβών τόννου ανά γατί, έτσι έχει μια μεταβλητή στη μέση, που αντιστοιχεί σε μια εξίσωση που χρησιμοποιεί τις συναρτήσεις get_value των SpinButtons για την εύρεση του ορισμού τους. Η μέθοδος στρογγύλευσης της μαθηματικής συνάρτησης του JavaScript χρησιμοποιείται για στρογγύλευση του αριθμού των κονσερβών ανά γατί στον πλησιέστερο κάτω ακέραιο αριθμό.</p>

    <code mime="application/javascript">
        // Create a grid to put the spinbuttons and their labels in
        this._spinGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER,
            margin_bottom: 20 });

        // Attach everything to the grid
        this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);
        this._spinGrid.attach (this._kittens, 1, 0, 1, 1);
        this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);
        this._spinGrid.attach (this._tuna, 3, 0, 1, 1);
        this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);

        // Create a main grid to hold it and the last label
        this._mainGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER });

        // Attach the smaller grid and the last label to the main grid
        this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);
        this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);
</code>

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

    <code mime="application/javascript">
        // Add 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="spinbutton-handler">
    <title>Η συνάρτηση που χειρίζεται τις αριθμητικές τιμές των SpinButtons ρυθμίστηκε</title>

    <code mime="application/javascript">
    _newValue: function () {

        // Update the label which shows how many cans there are per kitten
        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))
        this._lastLabel.set_label ("That's " + this.perKitten + " can(s) of tuna per kitten.");

    }

});
</code>
    <p>Εδώ ενημερώνουμε τη μεταβλητή perKitten με βάση τις νέες τιμές των SpinButtons και χρησιμοποιούμε την ιδιότητα set_label για ανανέωση της προβολής _lastLabel. Αφού και τα δύο SpinButtons έχουν το σήμα τους αλλαγμένης τιμής συνδεμένο σε αυτή τη συνάρτηση, κάθε φορά οποιοδήποτε από τους αριθμούς αλλάζει αυτή τη συνάρτηση θα ενημερώσει την ετικέτα.</p>

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

  <section id="complete">
    <title>Δείγμα πλήρους κώδικα</title>
<code mime="application/javascript" style="numbered">#!/usr/bin/gjs

const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;

const SpinButtonExample = new Lang.Class({
    Name: 'SpinButton Example',

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

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



    // 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: "Kitten Feeder"});

        // Create the first spinbutton using a function
        this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
        this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));

        // Create an adjustment to use for the second spinbutton
        this._adjustment = new Gtk.Adjustment ({
            value: 1,
            lower: 0,
            upper: 9001,
            step_increment: 1,
            page_increment: 10 });

        // Create the second spinbutton
        this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });
        this._tuna.connect ("value-changed", Lang.bind (this, this._newValue));

        // this._tuna.set_digits (1);
        // this._tuna.set_wrap (true);

        // Create the text labels to go with the spinbuttons
        this._startLabel = new Gtk.Label ({ label: "There are " });
        this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "});
        this._tunaLabel = new Gtk.Label ({ label: " can(s) of tuna."});
        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));
        this._lastLabel = new Gtk.Label ({
            label: "That's " + this.perKitten + " can(s) of tuna per kitten." });

        // Create a grid to put the spinbuttons and their labels in
        this._spinGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER,
            margin_bottom: 20 });

        // Attach everything to the grid
        this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);
        this._spinGrid.attach (this._kittens, 1, 0, 1, 1);
        this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);
        this._spinGrid.attach (this._tuna, 3, 0, 1, 1);
        this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);

        // Create a main grid to hold it and the last label
        this._mainGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER });

        // Attach the smaller grid and the last label to the main grid
        this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);
        this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);

        // Add the main grid to the window
        this._window.add (this._mainGrid);

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



    _newValue: function () {

        // Update the label which shows how many cans there are per kitten
        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))
        this._lastLabel.set_label ("That's " + this.perKitten + " can(s) of tuna per kitten.");

    }

});

// Run the application
let app = new SpinButtonExample ();
app.application.run (ARGV);
</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.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.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.SpinButton.html">Gtk.SpinButton</link></p></item>
</list>
  </section>
</page>