<?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="topic" style="task" id="hellognome.js" xml:lang="el">
  <info>
    <link type="guide" xref="beginner.js#tutorials"/>
    <revision version="0.1" date="2012-07-17" status="draft"/>

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

    <desc>Η πρώτη σας εφαρμογή σε GNOME!</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>1. Hello, GNOME!</title>
  <synopsis>
    <p>Αυτό το μάθημα θα σας δείξει πώς να γράψετε την πρώτη σας εφαρμογή GNOME σε JavaScript. Θα χρησιμοποιήσετε JavaScript για να γράψετε για GNOME με τον ίδιο τρόπο που θα έπρεπε για τον ιστό. Κατόπιν, θα μάθετε πώς να χρησιμοποιήσετε "native" γραφικά στοιχεία, για να γράψετε εφαρμογές που δείχνουν και αισθάνονται σαν άλλες εφαρμογές GNOME.</p>
    <note style="warning"><p>Έχετε πάρει τον υπολογιστή σας με εγκατεστημένο το GNOME και <link xref="set-up-gedit.js">gedit</link> ρυθμισμένο να γράφει κώδικα με ?. Θα θέλετε να κάνετε αυτά τα πράγματα πρώτα.</p></note>
  </synopsis>

  <links type="section"/>

  <section id="webapp">
    <title>Ας αρχίσουμε με μια ιστοσελίδα</title>

    <p>Ιδού κάποιος βασικός κώδικας HTML, CSS και JavaScript. Σας φαίνεται αυτός οικείος;</p>
    <code mime="application/javascript" style="numbered">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Hello, GNOME!&lt;/title&gt;

        &lt;!-- Use JavaScript to show a greeting when someone clicks the button --&gt;
        &lt;script type="application/javascript"&gt;
        function greeting () {
            document.getElementById ("greeting").innerHTML = ("O hai!");
        }
        &lt;/script&gt;

        &lt;!-- Very basic CSS style using the GNOME font --&gt;
        &lt;style type="text/css"&gt;
            body {
                font-face: Cantarell, sans-serif;
                text-align: center; }
        &lt;/style&gt;

    &lt;/head&gt;
    &lt;body&gt;
        &lt;br /&gt; &lt;br /&gt;
        &lt;button type="button" onclick="greeting()"&gt;Hello, GNOME!&lt;/button&gt;

        &lt;!-- Empty H1 element gets filled in when the button is clicked --&gt;
        &lt;h1 id="greeting"&gt;&lt;/h1&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code>

    <p>Ας το αποθηκεύσουμε ως <file>hellognome.html</file> και να δούμε πώς φαίνεται όταν τον εκτελούμε!</p>

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

    <p><em>Μπορείτε</em> να εκτελέσετε τον παραπάνω κώδικα ανοίγοντας το <file>hellognome.html</file> σε έναν περιηγητή ιστού. Αλλά εδώ, πρόκειται να δημιουργήσουμε μια εφαρμογή GNOME που τρέχει την εφαρμογή ιστού μας μέσα του, ακριβώς όπως βλέπετε στο στιγμιότυπο. Θα μπορέσετε να αυξομειώσετε και να μεγιστοποιήσετε το παράθυρο και πατώντας το Χ στη γωνία να το κλείσετε, ακριβώς όπως θα περιμένατε από κάθε άλλη εφαρμογή GNOME. Η διαφορά είναι ότι αυτό θα εκτελέσει τον κώδικα του ιστού μέσα του.</p>
    <p>Το άριστο μέρος; Πρόκειται να συνεχίσουμε να χρησιμοποιούμε JavaScript, να γράψουμε όλα τα μέρη που κάνουν την εφαρμογή μας να δουλεύει με GNOME. Ας κοιτάξουμε τον κώδικα και ας δούμε πώς τελειώνει!</p>
  </section>

  <section id="window">
    <title>Δημιουργία ενός παραθύρου GNOME ως πλαισίου για την εφαρμογή μας</title>

    <p>Πρώτα, χρειαζόμαστε να πούμε στο GNOME ότι αυτή είναι μια εφαρμογή JavaScript, που χρησιμοποιεί gjs. Gjs είναι ένας τρόπος του GNOME να μετατρέπει τον κώδικα σας JavaScript σε οδηγίες που καταλαβαίνει, έτσι αυτή η γραμμή πρέπει πάντα να πηγαίνει στην αρχή των εφαρμογών σας.</p>
    <code mime="application/javascript">
#!/usr/bin/gjs
</code>
    <p>Μετά από αυτό, χρειαζόμαστε να πούμε στο GNOME ποιες βιβλιοθήκες θέλουμε να εισάγουμε.</p>
    <code mime="application/javascript">
const GLib = imports.gi.GLib;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
const Webkit = imports.gi.WebKit;
</code>
    <p>Πώς πρόσθετες βιβλιοθήκες όπως η jQuery μας επιτρέπουν να κάνουμε πρόσθετα πράγματα με την JavaScript, καθεμιά από αυτές τις βιβλιοθήκες μας δίνει νέες δυνατότητες για τις εφαρμογές μας στο GNOME:</p>
    <steps>
      <item><p><file>Gtk</file> και <file>Lang</file> είναι βασικά μέρη κάθε εφαρμογής GNOME, που σας επιτρέπει να δημιουργήσετε παράθυρα και γραφικά στοιχεία και να τα συνδέσετε μαζί.</p></item>
      <item><p>Η <file>GLib</file> είναι μια βοηθητική βιβλιοθήκη, που επιτρέπει να κάνετε πράγματα όπως να πείτε στο GNOME πού είναι το αρχείο <file>hellognome.html</file>που δημιουργήσαμε.</p></item>
      <item><p>Και το <file>Webkit</file> είναι μια μηχανή απόδοσης ιστού, που θα χρησιμοποιήσουμε για να δημιουργήσουμε βασικά ένα παράθυρο περιηγητή για να ανοίξουμε το αρχείο μας HTML.</p></item>
    </steps>

    <p>Τώρα δημιουργούμε την ίδια την εφαρμογή:</p>
    <code mime="application/javascript">
const HelloGNOME = new Lang.Class ({
    Name: 'Hello GNOME',
</code>
    <p>Αυτό θα δείχνει οικείο σε σας εάν έχετε δουλέψει με αντικειμενοστραφή JavaScript πριν. Αυτό είναι σωστό· όλη μας η εφαρμογή είναι μια κλάση που λέγεται HelloGNOME. Και όπως μπορείτε να δείτε, της δώσαμε μια ιδιότητα που λέει ποιο είναι το όνομά της.</p>

    <code mime="application/javascript">
    // Δημιουργία της εφαρμογής αυτής καθεαυτής
    _init: function () {
        this.application = new Gtk.Application ();

        // Σύνδεση των σημάτων '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>Ιδού μερικός κώδικας που περισσότερο ή λιγότερο θα αντιγράψετε και θα επικολλήσετε για κάθε εφαρμογή JavaScript που κατασκευάζετε. Δημιουργεί μια νέα εφαρμογή και έπειτα συνδέει τα ενεργοποιημένα και αρχικά σήματα της με συναρτήσεις που κάνουν το παράθυρο να εμφανίζεται το ίδιο και να κατασκευάζει τη διεπαφή χρήστη της αντίστοιχα.</p>
    <p>Τι σημαίνει αυτό; Λοιπόν, το καθετί σε μια εφαρμογή GNOME στέλνει ένα σήμα όταν κάτι σημαντικό συμβαίνει. Ένα κουμπί μπορεί να στέλνει το πατημένο σήμα όταν το πατάτε, για παράδειγμα. Η δουλειά μας είναι να συνδέσουμε τα σήματα με τις συναρτήσεις που τις χειρίζονται και να κάνουμε τα πράγματα που θέλουμε να έχουν συμβεί να γίνουν. Το κάνουμε χρησιμοποιώντας τη μέθοδο σύνδεσης κάθε αντικειμένου, που παίρνει δύο ορίσματα: Το σήμα που θέλουμε να χειριστούμε και τη συνάρτηση Lang.bind, που πρέπει να χρησιμοποιήσουμε για να πούμε στη σύνδεση ποια συνάρτηση θέλουμε να χειριστεί το σήμα.</p>
    <p>Σε αυτήν την περίπτωση, θέλουμε την _onActivate να χειριστεί το ενεργοποιημένο σήμα και το _onStartup να χειριστεί το αρχικό σήμα. Η _onActivate απλά λέει στο παράθυρο να παρουσιάσει τον εαυτόν του· έτσι βασικά, όποτε πατάτε <keyseq><key>Alt</key> <key>Tab</key></keyseq> στην εφαρμογή φαίνεται, όπως θα το περιμένατε. Η _onStartup καλεί _buildUI, που είναι η συνάρτηση που δημιουργεί τη διεπαφή χρήστη μας και είναι το επόμενο μέρος που θα κοιτάξουμε.</p>
    <note style="tip"><p>Όταν αντιγράφετε και επικολλάτε τον παραπάνω κώδικα για τις δικές σας εφαρμογές, βεβαιωθείτε να αλλάξετε το όνομα σε ένα μοναδικό κάθε φορά.</p></note>
  </section>

  <section id="ui">
    <title>Σχεδίαση της UI του παραθύρου μας</title>
    <p>Στη συνάρτηση _buildUI, πρόκειται να πούμε στο GNOME για το παράθυρό μας και τα πράγματα μέσα του, ένα τη φορά. Μετά από αυτό, πρόκειται να συνδέσουμε το καθετί μαζί και να το βάλουμε όλο σε προβολή.</p>

    <code mime="application/javascript">
    // Δόμηση της διεπαφής χρήστη της εφαρμογής
    _buildUI: function () {

        // Δημιουργία του παραθύρου της εφαρμογής
        this._window = new Gtk.ApplicationWindow  ({
            application: this.application,
            title: "Welcome to GNOME",
            default_height: 200,
            default_width: 400,
            window_position: Gtk.WindowPosition.CENTER });
</code>

    <p>Το πρώτο αντικείμενο που δημιουργούμε είναι ένα ApplicationWindow. Χρειάζεται έναν τίτλο να μπει στη γραμμή τίτλου και η ιδιότητα εφαρμογής του χρειάζεται να είναι η εφαρμογή που δημιουργήσαμε, παραπάνω. Πέρα από αυτό, υπάρχουν ποικίλοι τρόποι προσαρμογής της εμφάνισης του, που η σελίδα αναφοράς <link xref="GtkApplicationWindow.js">ApplicationWindow</link> θα μπει σε περισσότερες λεπτομέρειες. Όπως μπορείτε να δείτε εδώ, του δίνουμε ένα προεπιλεγμένο ύψος και πλάτος (μετρημένο σε εικονοστοιχεία) και λέμε στο GNOME ότι θέλουμε το παράθυρο μας να εμφανιστεί στο κέντρο της οθόνης.</p>
    <code mime="application/javascript">
        // Δημιουργία μιας προβολής ιστού για προβολή της εφαρμογής ιστού
        this._webView = new Webkit.WebView ();

        // Τοποθέτηση της εφαρμογής ιστού στην προβολή ιστού
        this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
            "/hellognome.html", null));
</code>
    <p>Να θυμάστε πώς εισάγαμε το Webkit δεξιά στην αρχή. Εδώ δημιουργούμε ένα νέο στιγμιότυπο της κλάσης Webkit που λέγεται μια WebView, που είναι περισσότερο ή λιγότερο ένα παράθυρο περιηγητή όπου μπορείτε να βάλετε μέσα την εφαρμογή σας. Μετά από αυτό, του δίνουμε έπειτα την URI που θέλουμε να φορτώσει όταν η εφαρμογή ξεκινά.</p>
    <p>Θα <em>μπορούσαμε</em> να του δώσουμε μόνο μια URI ιστού, όπως <link href="http://gnome.org">http://gnome.org</link>. Αντίθετα, εδώ χρησιμοποιούμε λίγες βοηθητικές συναρτήσεις του GLib για να πούμε στο WebView που είναι το αρχείο μας <file>hellognome.html</file>. Ο GLib.get_current_dir επιστρέφει τον κατάλογο που εκτελείται η εφαρμογή μας και το GLib.filename_to_uri επιστρέφει τη διαδρομή του αρχείου μας και το όνομα αρχείου σε μια URI που η συνάρτηση load_uri της WebView καταλαβαίνει. (η δεύτερη παράμετρος filename_to_uri's πρέπει να είναι μηδέν εκτός και ξέρετε τι χρησιμοποιείται και έχετε έναν λόγο να το αλλάξετε.)</p>
    <code mime="application/javascript">
        // Τοποθέτηση της προβολής ιστού στο παράθυρο
        this._window.add (this._webView);

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

});
</code>
    <p>Κάθε παράθυρο μπορεί να κρατήσει ένα και μόνο ένα γραφικό στοιχείο. Κανονικά, θα πρέπει να χρησιμοποιήσουμε έναν περιέκτη γραφικού στοιχείου όπως ένα <link xref="grid.js">πλέγμα</link> για να βάλουμε πολλαπλά γραφικά στοιχεία σε αυτό, έπειτα χρησιμοποιήστε τη συνάρτηση προσθήκης παραθύρου για να προσθέσετε το πλέγμα σε αυτό. Εδώ, προσθέτουμε απλά την WebView, έτσι ώστε να είναι ότι προσθέτουμε στο παράθυρο. Μετά από αυτό, ως το τελευταίο μέρος της συνάρτησης _buildUI που δημιουργεί το παράθυρο μας, λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και τα περιεχόμενά του.</p>
    <code mime="application/javascript">
// Εκτέλεση της εφαρμογής
let app = new HelloGNOME ();
app.application.run (ARGV);
</code>
    <p>Τελικά, δημιουργούμε ένα νέο στιγμιότυπο της κλάσης HelloGNOME και λέμε στο GNOME να εκτελέσει την εφαρμογή.</p>
  </section>

  <section id="run">
    <title>Εκτέλεση της εφαρμογής σας GNOME</title>

    <p>Τώρα που έχουμε δημιουργήσει την πρώτη μας εφαρμογή GNOME, είναι καιρός να τη δοκιμάσουμε! Δεν χρειάζεται να μεταγλωττίσετε την εφαρμογή σας ή να εγκαταστήσετε οποιοδήποτε ειδικό λογισμικό για αυτό· το GNOME έχει ενσωματωμένο το gjs για να μπορέσετε να εκτελέσετε το κέλυφος GNOME. Απλά αποθηκεύστε το <file>hellognome.html</file> και την ενεργή μας εφαρμογή, <file>hellognome.js</file>, σε έναν κατάλογο που μπορείτε να πάρετε με το τερματικό. (Συνήθως ανοίγουν στον προσωπικό σας κατάλογο, αυτόν που ονομάζεται με το όνομα σας του χρήστη.) Μετά από αυτό, ανοίξτε ένα τερματικό, πηγαίνετε εκεί και πληκτρολογήστε:</p>
    <screen> <output style="prompt">$ </output>gjs hellognome.js </screen>
    <p>Θα πρέπει να δείτε πάνω κάτω το ίδιο στιγμιότυπο όπως πριν, με ένα κουμπί όπου μπορείτε να πατήσετε για να προκαλέσετε την εμφάνιση ενός σύντομου μηνύματος.</p>

    <note style="tip">
        <p>Μπορείτε να χρησιμοποιήσετε την εντολή τερματικού</p>
        <screen> <output style="prompt">$ </output>cd <var>(directory name)</var> </screen>
        <p>για να περιηγηθείτε μεταξύ καταλόγων μες τον τερματικό, για να δείτε πού αποθηκεύσατε τα αρχεία. Υπάρχει επίσης μια επέκταση για τον Ναυτίλο, τον διαχειριστή αρχείων του GNOME, που σας επιτρέπει με δεξί κλικ οπουδήποτε μέσα του να ανοίξετε ένα τερματικό παράθυρο ακριβώς εκεί. Ελέγξτε την εφαρμογή που χρησιμοποιείτε για την εγκατάσταση νέου λογισμικού (όπως προσθήκη/αφαίρεση προγραμμάτων στο κέντρο λογισμικού) για αυτό.</p>
    </note>
  </section>

  <section id="whatsnext">
    <title>Ποιο είναι το επόμενο;</title>

    <p><link xref="02_welcome_to_the_grid.js">Συνεχίστε με το επόμενο μάθημα</link> για να μάθετε πώς να δομήσετε "native" εφαρμογές GNOME που φαίνονται και αισθάνονται όπως οι άλλες, αντίθετα από μια προβολή ιστού με κώδικα HTML μέσα της. Ή ρίξτε μια ματιά σε κάποια <link xref="beginner.js#samples">δείγματα κώδικα</link>, εάν θα θέλατε να δείτε τον κώδικα του παραδείγματος για κάθε γραφικό στοιχείο Gtk.</p>
    <p>Τελικά, εάν θέλετε να κατασκευάσετε απλά εφαρμογές GNOME χρησιμοποιώντας βιβλιοθήκες JavaScript που σχεδιάστηκαν για τον ιστό, μπορείτε βασικά να σταματήσετε εδώ και να πάτε να το κάνετε! Ελέγξετε <link xref="beginner.js#tutorials">τα τελευταία μαθήματα</link> εάν θα θέλατε να δείτε τη δημιουργία ενός αρχείου .desktop για την εφαρμογή σας, που θα επιτρέψει την εμφάνισή του στο μενού ενεργειών της επιφάνειας εργασίας σας με όλες τις άλλες εφαρμογές σας.</p>
  </section>

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

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

const GLib = imports.gi.GLib;
const Gtk = imports.gi.Gtk;
const Webkit = imports.gi.WebKit;

class HelloGNOME {

    // Create the application itself
    constructor() {
        this.application = new Gtk.Application ();

        // 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,
            title: "Welcome to GNOME",
            default_height: 200,
            default_width: 400,
            window_position: Gtk.WindowPosition.CENTER });

        // Create a webview to show the web app
        this._webView = new Webkit.WebView ();

        // Put the web app into the webview
        this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
            "/hellognome.html", null));

        // Put the webview into the window
        this._window.add (this._webView);

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

};

// Run the application
let app = new HelloGNOME ();
app.application.run (ARGV);
</code>
  </section>
</page>