|
Packit |
1470ea |
|
|
Packit |
1470ea |
<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="fr">
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<info>
|
|
Packit |
1470ea |
<title type="text">Hello World (JavaScript)</title>
|
|
Packit |
1470ea |
<link type="guide" xref="beginner.js#tutorials" group="#first"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<revision version="0.1" date="2013-06-17" status="review"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<credit type="author copyright">
|
|
Packit |
1470ea |
<name>Susanna Huhtanen</name>
|
|
Packit |
1470ea |
<email its:translate="no">ihmis.suski@gmail.com</email>
|
|
Packit |
1470ea |
<years>2012</years>
|
|
Packit |
1470ea |
</credit>
|
|
Packit |
1470ea |
<credit type="editor">
|
|
Packit |
1470ea |
<name>Tiffany Antopolski</name>
|
|
Packit |
1470ea |
<email its:translate="no">tiffany.antopolski@gmail.com</email>
|
|
Packit |
1470ea |
</credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<desc>Une application basique « hello, world »</desc>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Luc Rebert,</mal:name>
|
|
Packit |
1470ea |
<mal:email>traduc@rebert.name</mal:email>
|
|
Packit |
1470ea |
<mal:years>2011</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Alain Lojewski,</mal:name>
|
|
Packit |
1470ea |
<mal:email>allomervan@gmail.com</mal:email>
|
|
Packit |
1470ea |
<mal:years>2011-2012</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Luc Pionchon</mal:name>
|
|
Packit |
1470ea |
<mal:email>pionchon.luc@gmail.com</mal:email>
|
|
Packit |
1470ea |
<mal:years>2011</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Bruno Brouard</mal:name>
|
|
Packit |
1470ea |
<mal:email>annoa.b@gmail.com</mal:email>
|
|
Packit |
1470ea |
<mal:years>2011-12</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Luis Menina</mal:name>
|
|
Packit |
1470ea |
<mal:email>liberforce@freeside.fr</mal:email>
|
|
Packit |
1470ea |
<mal:years>2014</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
</info>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<title>How to build, install and create a <file>tar.xz</file> of a Hello World program</title>
|
|
Packit |
1470ea |
<media type="image" mime="image/png" style="floatend" src="media/hello-world.png"/>
|
|
Packit |
1470ea |
<synopsis>
|
|
Packit |
1470ea |
This tutorial will demonstrate how to:
|
|
Packit |
1470ea |
<list style="numbered">
|
|
Packit |
1470ea |
<item>create a small "Hello, World" application using JavaScript and GTK+ </item>
|
|
Packit |
1470ea |
<item>make the <file>.desktop</file> file </item>
|
|
Packit |
1470ea |
<item>how to set up the build system </item>
|
|
Packit |
1470ea |
</list>
|
|
Packit |
1470ea |
</synopsis>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<links type="section"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="HelloWorld"><title>Create the program</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<links type="section"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="script"><title>Script de lancement de l'application</title>
|
|
Packit |
1470ea |
This needs to be the first line of your script:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
It tells the script to use <link href="https://live.gnome.org/Gjs/">Gjs</link>. Gjs is a JavaScript binding for GNOME.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="imports"><title>Bibliothèques à importer</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;]]>
|
|
Packit |
1470ea |
In order for our script to work with GNOME, we need to import GNOME libraries via GObject Introspection. Here we import the language bindings and GTK+, the library which contains the graphical widgets used to make GNOME applications.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="mainwindow"><title>Création de la fenêtre principale de l'application</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//A Class requires an explicit Name parameter. This is the Class Name.
|
|
Packit |
1470ea |
Name: 'Application',
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//create the application
|
|
Packit |
1470ea |
_init: function() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//connect to 'activate' and 'startup' signals to handlers.
|
|
Packit |
1470ea |
this.application.connect('activate', Lang.bind(this, this._onActivate));
|
|
Packit |
1470ea |
this.application.connect('startup', Lang.bind(this, this._onStartup));
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//create the UI
|
|
Packit |
1470ea |
_buildUI: function() {
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow({ application: this.application,
|
|
Packit |
1470ea |
title: "Hello World!" });
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//handler for 'activate' signal
|
|
Packit |
1470ea |
_onActivate: function() {
|
|
Packit |
1470ea |
//show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//handler for 'startup' signal
|
|
Packit |
1470ea |
_onStartup: function() {
|
|
Packit |
1470ea |
this._buildUI();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
});
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
GtkApplication initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal.
|
|
Packit |
1470ea |
We can start building our first window. We do this by creating a variable called _window and assigning it a new Gtk.ApplicationWindow.
|
|
Packit |
1470ea |
We give the window a property called title. The title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding.
|
|
Packit |
1470ea |
Now we have a window which has a title and a working "close" button. Let's add the actual "Hello World" text.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="label"><title>Étiquette de la fenêtre</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
this.label = new Gtk.Label({ label: "Hello World" });
|
|
Packit |
1470ea |
this._window.add(this.label);
|
|
Packit |
1470ea |
this._window.set_default_size(200, 200);]]>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. To use it, we create a new variable called label, and assign it a new Gtk.Label. Then we give it properties inside the curly braces {}. In this case, we're setting the text that the label will hold. Finally, we create and run the application:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
let app = new Application();
|
|
Packit |
1470ea |
app.application.run(ARGV);]]>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Gtk.ApplicationWindow can only hold one widget at a time. To construct more elaborate programs you need to create a holder widget like Gtk.Grid inside the window, and then add all the other widgets to it.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="js"><title>hello-world.js</title>
|
|
Packit |
1470ea |
The complete file:
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
imports.gi.versions.Gtk = '3.0'
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
class Application {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//create the application
|
|
Packit |
1470ea |
constructor() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//connect to 'activate' and 'startup' signals to handlers.
|
|
Packit |
1470ea |
this.application.connect('activate', this._onActivate.bind(this));
|
|
Packit |
1470ea |
this.application.connect('startup', this._onStartup.bind(this));
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//create the UI
|
|
Packit |
1470ea |
_buildUI() {
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow({ application: this.application,
|
|
Packit |
1470ea |
title: "Hello World!" });
|
|
Packit |
1470ea |
this._window.set_default_size(200, 200);
|
|
Packit |
1470ea |
this.label = new Gtk.Label({ label: "Hello World" });
|
|
Packit |
1470ea |
this._window.add(this.label);
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//handler for 'activate' signal
|
|
Packit |
1470ea |
_onActivate() {
|
|
Packit |
1470ea |
//show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//handler for 'startup' signal
|
|
Packit |
1470ea |
_onStartup() {
|
|
Packit |
1470ea |
this._buildUI();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
};
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//run the application
|
|
Packit |
1470ea |
let app = new Application();
|
|
Packit |
1470ea |
app.application.run(ARGV);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="terminal"><title>Running the application from terminal</title>
|
|
Packit |
1470ea |
To run this application, first save it as hello-world.js. Then open Terminal, go to the folder where your application is stored and run:
|
|
Packit |
1470ea |
<screen><output style="prompt">$ </output><input>gjs hello-world.js</input></screen>
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="desktop.in"><title>The <file>.desktop.in</file> file</title>
|
|
Packit |
1470ea |
Running applications from the Terminal is useful at the beginning of the application making process. To have fully working <link href="https://developer.gnome.org/integration-guide/stable/mime.html.en">application integration</link> in GNOME 3 requires a desktop launcher. For this you need to create a <file>.desktop</file> file. The <file>.desktop</file> file describes the application name, the used icon and various integration bits. A deeper insight into the <file>.desktop</file> file can be found <link href="http://developer.gnome.org/desktop-entry-spec/">here</link>. The <file>.desktop.in</file> file will create the <file>.desktop</file>.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<note>
|
|
Packit |
1470ea |
Before continuing, resave <file>hello-world.js</file> as <file>hello-world</file>. Then run this in the command line:
|
|
Packit |
1470ea |
<screen><output style="prompt">$ </output><input>chmod +x hello-world</input></screen>
|
|
Packit |
1470ea |
</note>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
The example shows you the minimum requirements for a .desktop.in file.
|
|
Packit |
1470ea |
[Desktop Entry]
|
|
Packit |
1470ea |
Version=1.0
|
|
Packit |
1470ea |
Encoding=UTF-8
|
|
Packit |
1470ea |
Name=Hello World
|
|
Packit |
1470ea |
Comment=Say Hello
|
|
Packit |
1470ea |
Exec=@prefix@/bin/hello-world
|
|
Packit |
1470ea |
Icon=application-default-icon
|
|
Packit |
1470ea |
Terminal=false
|
|
Packit |
1470ea |
Type=Application
|
|
Packit |
1470ea |
StartupNotify=true
|
|
Packit |
1470ea |
Categories=GNOME;GTK;Utility;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Now let's go through some parts of the .desktop.in file.
|
|
Packit |
1470ea |
<terms>
|
|
Packit |
1470ea |
<item><title>Nom</title>The application name. </item>
|
|
Packit |
1470ea |
<item><title>Comment</title>A short description of the application. </item>
|
|
Packit |
1470ea |
<item><title>Exec</title>Specifies a command to execute when you choose the application from the menu. In this example exec just tells where to find the <file>hello-world</file> file and the file takes care of the rest. </item>
|
|
Packit |
1470ea |
<item><title>Terminal</title>Specifies whether the command in the Exec key runs in a terminal window. </item>
|
|
Packit |
1470ea |
</terms>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
To put your application into the appropriate category, you need to add the necessary categories to the Categories line. More information on the different categories can be found in the <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">menu specification</link>.
|
|
Packit |
1470ea |
In this example we use an existing icon. For a custom icon you need to have a .svg file of your icon, stored in <file>/usr/share/icons/hicolor/scalable/apps</file>. Write the name of your icon file to the .desktop.in file, on line 7. More information on icons in: <link href="https://live.gnome.org/GnomeGoals/AppIcon">Installing Icons for Themes</link> and <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">on freedesktop.org: Specifications/icon-theme-spec</link>.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="autotools"><title>The build system</title>
|
|
Packit |
1470ea |
Pour que votre application fasse partie intégrante de GNOME 3, vous devez l'installer à l'aide d'autotools. Autotools construit et installe tous les fichiers nécessaires et les place à leurs emplacements corrects.
|
|
Packit |
1470ea |
Auparavant, vous devez posséder les fichiers suivants :
|
|
Packit |
1470ea |
<links type="section"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="autogen"><title>autogen.sh</title>
|
|
Packit |
1470ea |
#!/bin/sh
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
set -e
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
test -n "$srcdir" || srcdir=`dirname "$0"`
|
|
Packit |
1470ea |
test -n "$srcdir" || srcdir=.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
olddir=`pwd`
|
|
Packit |
1470ea |
cd "$srcdir"
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
# This will run autoconf, automake, etc. for us
|
|
Packit |
1470ea |
autoreconf --force --install
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
cd "$olddir"
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
if test -z "$NOCONFIGURE"; then
|
|
Packit |
1470ea |
"$srcdir"/configure "$@"
|
|
Packit |
1470ea |
fi
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
After the <file>autogen.sh</file> file is ready and saved, run:
|
|
Packit |
1470ea |
<screen><output style="prompt">$ </output><input>chmod +x autogen.sh</input></screen>
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="makefile"><title>Makefile.am</title>
|
|
Packit |
1470ea |
# The actual runnable program is set to the SCRIPTS primitive.
|
|
Packit |
1470ea |
# # Prefix bin_ tells where to copy this
|
|
Packit |
1470ea |
bin_SCRIPTS = hello-world
|
|
Packit |
1470ea |
# # List of files to be distributed
|
|
Packit |
1470ea |
EXTRA_DIST = \
|
|
Packit |
1470ea |
$(bin_SCRIPTS)
|
|
Packit |
1470ea |
#
|
|
Packit |
1470ea |
# # The desktop files
|
|
Packit |
1470ea |
desktopdir = $(datadir)/applications
|
|
Packit |
1470ea |
desktop_DATA = \
|
|
Packit |
1470ea |
hello-world.desktop
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="configure"><title>configure.ac</title>
|
|
Packit |
1470ea |
# This file is processed by autoconf to create a configure script
|
|
Packit |
1470ea |
AC_INIT([Hello World], 1.0)
|
|
Packit |
1470ea |
AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip])
|
|
Packit |
1470ea |
AC_CONFIG_FILES([Makefile hello-world.desktop])
|
|
Packit |
1470ea |
AC_OUTPUT
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="readme"><title>README</title>
|
|
Packit |
1470ea |
Information users should read first. This file can be blank.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
When you have the <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct information and rights, the <file>README</file> file can include the following instructions:
|
|
Packit |
1470ea |
To build and install this program:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
./autogen.sh --prefix=/home/your_username/.local
|
|
Packit |
1470ea |
make install
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
-------------
|
|
Packit |
1470ea |
Running the first line above creates the following files:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
aclocal.m4
|
|
Packit |
1470ea |
autom4te.cache
|
|
Packit |
1470ea |
config.log
|
|
Packit |
1470ea |
config.status
|
|
Packit |
1470ea |
configure
|
|
Packit |
1470ea |
hello-world.desktop
|
|
Packit |
1470ea |
install-sh
|
|
Packit |
1470ea |
missing
|
|
Packit |
1470ea |
Makefile.in
|
|
Packit |
1470ea |
Makefile
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Running "make install", installs the application in /home/your_username/.local/bin
|
|
Packit |
1470ea |
and installs the hello-world.desktop file in /home/your_username/.local/share/applications
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
You can now run the application by typing "Hello World" in the Overview.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
----------------
|
|
Packit |
1470ea |
To uninstall, type:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
make uninstall
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
----------------
|
|
Packit |
1470ea |
To create a tarball type:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
make distcheck
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
This will create hello-world-1.0.tar.xz
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
</page>
|