File: hello-world.js.page

package info (click to toggle)
gnome-devel-docs 3.22.1-1
  • links: PTS, VCS
  • area: main
  • in suites: stretch
  • size: 60,536 kB
  • ctags: 658
  • sloc: xml: 2,480; ansic: 2,228; python: 1,854; makefile: 791; sh: 480; cpp: 131
file content (325 lines) | stat: -rw-r--r-- 19,112 bytes parent folder | download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<?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="guide" style="task" id="hello-world.js" xml:lang="el">

  <info>
  <title type="text">Hello World (JavaScript)</title>
    <link type="guide" xref="beginner.js#tutorials" group="#first"/>

    <revision version="0.1" date="2013-06-17" status="review"/>

    <credit type="author copyright">
      <name>Susanna Huhtanen</name>
      <email its:translate="no">ihmis.suski@gmail.com</email>
      <years>2012</years>
    </credit>
    <credit type="editor">
      <name>Tiffany Antopolski</name>
      <email its:translate="no">tiffany.antopolski@gmail.com</email>
    </credit>

    <desc>Μια βασική εφαρμογή "hello, world"</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>Πώς να κατασκευάσετε, να εγκαταστήσετε και να δημιουργήσετε ένα <file>tar.xz</file> ενός προγράμματος Hello World</title>
    <media type="image" mime="image/png" style="floatend" src="media/hello-world.png"/>
    <synopsis>
      <p>Αυτό το μάθημα θα δείξει πώς να:</p>
      <list style="numbered">
        <item><p>δημιουργήσετε μια μικρή εφαρμογή "Hello, World" χρησιμοποιώντας JavaScript και GTK+</p></item>
        <item><p>κάνετε το αρχείο <file>.desktop</file></p></item>
        <item><p>ρυθμίσετε το σύστημα δόμησης</p></item>
      </list>
    </synopsis>



  <links type="section"/>

  <section id="HelloWorld"><title>Δημιουργήστε το πρόγραμμα</title>

    <links type="section"/>

    <section id="script"><title>Σενάριο για εκτέλεση της εφαρμογής</title>
      <p>Αυτό χρειάζεται να είναι η πρώτη γραμμή του σεναρίου σας:</p>
      <code mime="application/javascript">#!/usr/bin/gjs</code>
      <p>Λέει στο σενάριο να χρησιμοποιήσετε <link href="https://live.gnome.org/Gjs/">Gjs</link>. Gjs είναι ένας σύνδεσμος JavaScript για GNOME.</p>
    </section>


    <section id="imports"><title>Βιβλιοθήκες για εισαγωγή</title>
      <code mime="application/javascript">const Lang = imports.lang;
const Gtk = imports.gi.Gtk;</code>
      <p>Για να δουλέψει το σενάριό μας με GNOME, χρειαζόμαστε να εισάγουμε τις βιβλιοθήκες GNOME μέσα από τον αυτοέλεγχο GObject. Εδώ εισάγουμε τους συνδέσμους γλώσσας και GTK+, την βιβλιοθήκη που περιέχει τα χρησιμοποιούμενα γραφικά στοιχεία για την δόμηση εφαρμογών GNOME.</p>
    </section>

    <section id="mainwindow"><title>Δημιουργία του κύριου παραθύρου για την εφαρμογή</title>
      <code mime="application/javascript">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();
    }
});
</code>

    <p>Η GtkApplication αρχικοποιεί το GTK+. Επίσης συνδέει το κουμπί <gui>x</gui> που δημιουργείται αυτόματα μαζί με το παράθυρο στο σήμα "destroy".</p>
    <p>Μπορούμε να αρχίσουμε να κατασκευάζουμε το πρώτο μας παράθυρο. Αυτό το κάνουμε δημιουργώντας μια μεταβλητή που λέγεται <var>_window</var> και της αποδίδουμε ένα νέο Gtk.ApplicationWindow.</p>
    <p>Δίνουμε στο παράθυρο μια ιδιότητα που λέγεται <var>title</var>. Ο τίτλος μπορεί να είναι οποιαδήποτε επιθυμητή συμβολοσειρά. Για να είσαστε ασφαλείς, είναι καλύτερο να επιλέξετε την κωδικοποίηση UTF-8.</p>
    <p>Τώρα έχουμε ένα παράθυρο που έχει τίτλο και ένα λειτουργικό κουμπί "close". Ας προσθέσουμε το ενεργό κείμενο "Hello world".</p>
    </section>

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

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

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

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


    <section id="js"><title>hello-world.js</title>
      <p>Το πλήρες αρχείο:</p>
      <code mime="application/javascript" style="numbered">#!/usr/bin/gjs

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

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!" });
        this._window.set_default_size(200, 200);
        this.label = new Gtk.Label({ label: "Hello World" });
        this._window.add(this.label);
    },

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

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

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

    <section id="terminal"><title>Εκτελέστε την εφαρμογή από τερματικό</title>
      <p>Για να τρέξετε αυτήν την εφαρμογή, πρώτα αποθηκεύστε την ως hello-world.js. Έπειτα ανοίξτε το τερματικό, πηγαίνετε στον φάκελο όπου η εφαρμογή σας αποθηκεύεται και τρέξτε:</p>
      <screen><output style="prompt">$ </output><input>gjs hello-world.js</input></screen>
    </section>
  </section>



  <section id="desktop.in"><title>Το αρχείο <file>.desktop.in</file></title>
      <p>Τρέχοντας εφαρμογές από το τερματικό είναι χρήσιμο στην αρχή της διεργασίας κατασκευής της εφαρμογής. Για να έχετε μια πλήρως λειτουργική <link href="https://developer.gnome.org/integration-guide/stable/mime.html.en">ολοκληρωμένη εφαρμογή</link> στο GNOME 3 απαιτείται ένας εκκινητής επιφάνεια εργασίας. Για αυτό χρειάζεται να δημιουργήσετε ένα αρχείο <file>.desktop</file>. Το αρχείο <file>.desktop</file> περιγράφει το όνομα της εφαρμογής, το χρησιμοποιούμενο εικονίδιο και ποικίλα δυαδικά ολοκλήρωσης. Μια βαθύτερη ματιά στο αρχείο <file>.desktop</file> μπορεί να βρεθεί <link href="http://developer.gnome.org/desktop-entry-spec/">εδώ</link>. Το αρχείο <file>.desktop.in</file> θα δημιουργήσει το <file>.desktop</file>.</p>

  <note>
       <p>Πριν συνεχίσετε, ξανααποθηκεύστε το <file>hello-world.js</file> ως <file>hello-world</file>. Έπειτα εκτελέστε το στη γραμμή εντολών:</p>
      <screen><output style="prompt">$ </output><input>chmod +x hello-world</input></screen>
  </note>

    <p>Το παράδειγμα εμφανίζει τις ελάχιστες απαιτήσεις για ένα αρχείο<code>.desktop.in</code>.</p>
    <code mime="text/desktop" style="numbered">[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·
</code>

    <p>Τώρα, ας εξετάσουμε μερικά μέρη του αρχείου <code>.desktop.in</code>.</p>
    <terms>
      <item><title>Όνομα</title><p>Το όνομα της εφαρμογής.</p></item>
      <item><title>Σχόλιο</title><p>Μια σύντομη περιγραφή της εφαρμογής.</p></item>
      <item><title>Exec</title><p>Ορίζει μια εντολή για εκτέλεση όταν επιλέξετε την εφαρμογή από το μενού. Σε αυτό το παράδειγμα το exec απλά λέει πού να βρείτε το αρχείο <file>hello-world</file> και το αρχείο φροντίζει για τα υπόλοιπα.</p></item>
      <item><title>Τερματικός</title><p>Ορίζει εάν η εντολή στο κλειδί Exec τρέχει σε ένα παράθυρο τερματικού.</p></item>
    </terms>

    <p>Για να βάλετε την εφαρμογή σας στη σωστή κατηγορία χρειάζεται να προσθέσετε τις απαραίτητες κατηγορίες στη γραμμή κατηγοριών. Περισσότερες πληροφορίες για τις διαφορετικές κατηγορίες μπορούν να βρεθούν στο <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">προδιαγραφές μενού</link>.</p>
    <p>Σε αυτό το παράδειγμα χρησιμοποιήσαμε ένα υπάρχον εικονίδιο. Για ένα προσαρμοσμένο εικονίδιο χρειάζεται να έχετε ένα αρχείο .svg του εικονιδίου σας, αποθηκευμένο στο <file>/usr/share/icons/hicolor/scalable/apps</file>. Γράψτε το όνομα του αρχείου του εικονιδίου σας στο αρχείο .desktop.in, στη γραμμή 7. Περισσότερες πληροφορίες για εικονίδια στο: <link href="https://live.gnome.org/GnomeGoals/AppIcon">Εγκατάσταση εικονιδίων για θέματα</link>, και <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">on freedesktop.org: Specifications/icon-theme-spec</link>.</p>
  </section>

  <section id="autotools"><title>Το σύστημα δόμησης</title>
    <p>Για να κάνετε την εφαρμογή σας πραγματικά τμήμα του συστήματος GNOME 3 χρειαζόσαστε την εγκατάσταση του με τη βοήθεια των autotools. Η κατασκευή των autotools θα εγκαταστήσει όλα τα απαραίτητα αρχεία σε όλες τις σωστές θέσεις.</p>
    <p>Για αυτό χρειαζόσαστε να έχετε τα παρακάτω αρχεία:</p>
    <links type="section"/>

      <section id="autogen"><title>autogen.sh</title>
        <code mime="application/x-shellscript" style="numbered">#!/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
</code>

      <p>Αφού το αρχείο <file>autogen.sh</file> είναι έτοιμο και αποθηκευμένο, εκτελέστε:</p>
      <screen><output style="prompt">$ </output><input>chmod +x autogen.sh</input></screen>
    </section>


    <section id="makefile"><title>Makefile.am</title>
      <code mime="application/x-shellscript" style="numbered"># Το τρέχον εκτελέσιμο πρόγραμμα ορίζεται στα θεμελιακά SCRIPTS.
# # Το πρόθεμα bin_ λέει που να το αντιγράψετε
bin_SCRIPTS = hello-world
# # Η λίστα των αρχείων που θα διανεμηθούν
EXTRA_DIST =  \
	$(bin_SCRIPTS)
#
#     # Τα αρχεία της επιφάνειας εργασίας
desktopdir = $(datadir)/applications
desktop_DATA = \
	hello-world.desktop
</code>
    </section>


    <section id="configure"><title>configure.ac</title>
      <code mime="application/x-shellscript" style="numbered"># Αυτό το αρχείο επεξεργάζεται από το 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
</code>
    </section>


    <section id="readme"><title>README</title>
       <p>Οι πληροφορίες χρηστών πρέπει να διαβαστούν πρώτα. Αυτό το αρχείο μπορεί να είναι κενό.</p>

       <p>Όταν έχετε τα αρχεία <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> και <file>autogen.sh</file> με σωστές πληροφορίες και δικαιώματα, το αρχείο <file>README</file> μπορεί να συμπεριλάβει τις ακόλουθες οδηγίες:</p>
      <code mime="text/readme" style="numbered">Για να δομήσετε και να εγκαταστήσετε αυτό το πρόγραμμα:

./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
</code>
    </section>

    <!-- TODO: How to make a custom icon with autotools -->

  </section>
</page>