Hello World (JavaScript)

Δημιουργήστε το πρόγραμμα

Σενάριο για εκτέλεση της εφαρμογής

Αυτό χρειάζεται να είναι η πρώτη γραμμή του σεναρίου σας:

#!/usr/bin/gjs

Λέει στο σενάριο να χρησιμοποιήσετε Gjs. Gjs είναι ένας σύνδεσμος JavaScript για GNOME.

Βιβλιοθήκες για εισαγωγή

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

Για να δουλέψει το σενάριό μας με GNOME, χρειαζόμαστε να εισάγουμε τις βιβλιοθήκες GNOME μέσα από τον αυτοέλεγχο GObject. Εδώ εισάγουμε τους συνδέσμους γλώσσας και GTK+, την βιβλιοθήκη που περιέχει τα χρησιμοποιούμενα γραφικά στοιχεία για την δόμηση εφαρμογών GNOME.

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

const Application = new Lang.Class({
    //Μια κλάση απαιτεί μια ρητή παράμετρο ονόματος. Αυτή είναι η κλάση ονόματος.
    Name: 'Application',

    //Δημιουργία της εφαρμογής
    _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));
    },

    //Δημιουργία της διεπαφής χρήστη
    _buildUI: function() {
        this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                   title: "Hello World!" });
    },

    //Ο χεριριστής για το σήμα 'activate'
    _onActivate: function() {
        //Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
        this._window.show_all();
    },

    //Ο χειριστής του σήματος 'startup'
    _onStartup: function() {
        this._buildUI();
    }
});

Η GtkApplication αρχικοποιεί το GTK+. Επίσης συνδέει το κουμπί x που δημιουργείται αυτόματα μαζί με το παράθυρο στο σήμα "destroy".

Μπορούμε να αρχίσουμε να κατασκευάζουμε το πρώτο μας παράθυρο. Αυτό το κάνουμε δημιουργώντας μια μεταβλητή που λέγεται _window και της αποδίδουμε ένα νέο Gtk.ApplicationWindow.

Δίνουμε στο παράθυρο μια ιδιότητα που λέγεται title. Ο τίτλος μπορεί να είναι οποιαδήποτε επιθυμητή συμβολοσειρά. Για να είσαστε ασφαλείς, είναι καλύτερο να επιλέξετε την κωδικοποίηση UTF-8.

Τώρα έχουμε ένα παράθυρο που έχει τίτλο και ένα λειτουργικό κουμπί "close". Ας προσθέσουμε το ενεργό κείμενο "Hello world".

Ετικέτα για το παράθυρο

// Προσθήκη γραφικού στοιχείου ετικέτας στο παράθυρό σας
this.label = new Gtk.Label({ label: "Hello World" });
this._window.add(this.label);
this._window.set_default_size(200, 200);

Μια ετικέτα κειμένου είναι ένα από τα γραφικά στοιχεία του GTK+ που μπορούμε να χρησιμοποιήσουμε, λόγω της εισαγωγής της βιβλιοθήκης GTK+. Για τη χρήση του, δημιουργούμε μια νέα μεταβλητή που ονομάζουμε ετικέτα και της αποδίδουμε μια νέα Gtk.Label. Έπειτα της δίνουμε ιδιότητες μέσα σε αγκύλες {}. Σε αυτήν την περίπτωση, ορίζουμε το κείμενο που θα κρατήσει η ετικέτα. Τελικά, δημιουργούμε και τρέχουμε την εφαρμογή:

//Εκτέλεση της εφαρμογής
let app = new Application();
app.application.run(ARGV);

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

hello-world.js

Το πλήρες αρχείο:

#!/usr/bin/gjs

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

class Application {

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

       //connect to 'activate' and 'startup' signals to handlers.
       this.application.connect('activate', this._onActivate.bind(this));
       this.application.connect('startup', this._onStartup.bind(this));
    }

    //create the UI
    _buildUI() {
        this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                   title: "Hello World!" });
        this._window.set_default_size(200, 200);
        this.label = new Gtk.Label({ label: "Hello World" });
        this._window.add(this.label);
    }

    //handler for 'activate' signal
    _onActivate() {
        //show the window and all child widgets
        this._window.show_all();
    }

    //handler for 'startup' signal
    _onStartup() {
        this._buildUI();
    }
};

//run the application
let app = new Application();
app.application.run(ARGV);

Εκτελέστε την εφαρμογή από τερματικό

Για να τρέξετε αυτήν την εφαρμογή, πρώτα αποθηκεύστε την ως hello-world.js. Έπειτα ανοίξτε το τερματικό, πηγαίνετε στον φάκελο όπου η εφαρμογή σας αποθηκεύεται και τρέξτε:

$ gjs hello-world.js

Το αρχείο <file>.desktop.in</file>

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

Πριν συνεχίσετε, ξανααποθηκεύστε το hello-world.js ως hello-world. Έπειτα εκτελέστε το στη γραμμή εντολών:

$ chmod +x hello-world

Το παράδειγμα εμφανίζει τις ελάχιστες απαιτήσεις για ένα αρχείο.desktop.in.

[Desktop Entry]
Version=1.0
Encoding=UTF-8
Name=Hello World
Comment=Say Hello
Exec=@prefix@/bin/hello-world
Icon=application-default-icon
Terminal=false
Type=Application
StartupNotify=true
Categories=GNOME·GTK·Utility·

Τώρα, ας εξετάσουμε μερικά μέρη του αρχείου .desktop.in.

Όνομα

Το όνομα της εφαρμογής.

Σχόλιο

Μια σύντομη περιγραφή της εφαρμογής.

Exec

Ορίζει μια εντολή για εκτέλεση όταν επιλέξετε την εφαρμογή από το μενού. Σε αυτό το παράδειγμα το exec απλά λέει πού να βρείτε το αρχείο hello-world και το αρχείο φροντίζει για τα υπόλοιπα.

Τερματικός

Ορίζει εάν η εντολή στο κλειδί Exec τρέχει σε ένα παράθυρο τερματικού.

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

Σε αυτό το παράδειγμα χρησιμοποιήσαμε ένα υπάρχον εικονίδιο. Για ένα προσαρμοσμένο εικονίδιο χρειάζεται να έχετε ένα αρχείο .svg του εικονιδίου σας, αποθηκευμένο στο /usr/share/icons/hicolor/scalable/apps. Γράψτε το όνομα του αρχείου του εικονιδίου σας στο αρχείο .desktop.in, στη γραμμή 7. Περισσότερες πληροφορίες για εικονίδια στο: Εγκατάσταση εικονιδίων για θέματα, και on freedesktop.org: Specifications/icon-theme-spec.

Το σύστημα δόμησης

Για να κάνετε την εφαρμογή σας πραγματικά τμήμα του συστήματος GNOME 3 χρειαζόσαστε την εγκατάσταση του με τη βοήθεια των autotools. Η κατασκευή των autotools θα εγκαταστήσει όλα τα απαραίτητα αρχεία σε όλες τις σωστές θέσεις.

Για αυτό χρειαζόσαστε να έχετε τα παρακάτω αρχεία:

autogen.sh

#!/bin/sh

set -e

test -n "$srcdir" || srcdir=`dirname "$0"`
test -n "$srcdir" || srcdir=.

olddir=`pwd`
cd "$srcdir"

# Αυτό θα εκτελέσει autoconf, automake, κλπ. για μας
autoreconf --force --install

cd "$olddir"

if test -z "$NOCONFIGURE"; then
  "$srcdir"/configure "$@"
fi

Αφού το αρχείο autogen.sh είναι έτοιμο και αποθηκευμένο, εκτελέστε:

$ chmod +x autogen.sh

Makefile.am

# Το τρέχον εκτελέσιμο πρόγραμμα ορίζεται στα θεμελιακά SCRIPTS.
# # Το πρόθεμα bin_ λέει που να το αντιγράψετε
bin_SCRIPTS = hello-world
# # Η λίστα των αρχείων που θα διανεμηθούν
EXTRA_DIST =  \
	$(bin_SCRIPTS)
#
#     # Τα αρχεία της επιφάνειας εργασίας
desktopdir = $(datadir)/applications
desktop_DATA = \
	hello-world.desktop

configure.ac

# Αυτό το αρχείο επεξεργάζεται από το autoconf για τη δημιουργία ενός σεναρίου διαμόρφωσης
AC_INIT([Hello World], 1.0)
AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip])
AC_CONFIG_FILES([Makefile hello-world.desktop])
AC_OUTPUT

README

Οι πληροφορίες χρηστών πρέπει να διαβαστούν πρώτα. Αυτό το αρχείο μπορεί να είναι κενό.

Όταν έχετε τα αρχεία hello-world, hello-world.desktop.in, Makefile.am, configure.ac και autogen.sh με σωστές πληροφορίες και δικαιώματα, το αρχείο README μπορεί να συμπεριλάβει τις ακόλουθες οδηγίες:

Για να δομήσετε και να εγκαταστήσετε αυτό το πρόγραμμα:

./autogen.sh --prefix=/home/your_username/.local
make install

-------------
Η εκτέλεση της πρώτης παραπάνω γραμμής δημιουργεί τα ακόλουθα αρχεία:

aclocal.m4
autom4te.cache
config.log
config.status
configure
hello-world.desktop
install-sh
missing
Makefile.in
Makefile

Η εκτέλεση "make install", εγκαθιστά την εφαρμογή στο /home/your_username/.local/bin
και εγκαθιστά το αρχείο hello-world.desktop στο /home/your_username/.local/share/applications

Μπορείτε τώρα να εκτελέσετε την εφαρμογή πληκτρολογώντας "Hello World" στην επισκόπηση.

----------------
Για απεγκατάσταση, πληκτρολογήστε:

make uninstall

----------------
Για δημιουργία tarball, πληκτρολογήστε:

make distcheck

Αυτό θα δημιουργήσει hello-world-1.0.tar.xz