|
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="cs">
|
|
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>Základní aplikace „Hello, world“</desc>
|
|
Packit |
1470ea |
</info>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<title>Jak sestavit a nainstalovat program „Hello World“ a jak pro něj vytvořit balíček <file>tar.xz</file></title>
|
|
Packit |
1470ea |
<media type="image" mime="image/png" style="floatend" src="media/hello-world.png"/>
|
|
Packit |
1470ea |
<synopsis>
|
|
Packit |
1470ea |
Tato lekce ukazuje jak:
|
|
Packit |
1470ea |
<list style="numbered">
|
|
Packit |
1470ea |
<item>vytvořit malou aplikaci „Hello, World“ pomocí jazyka JavaScript a GTK+ </item>
|
|
Packit |
1470ea |
<item>vytvořit soubor <file>.desktop</file> </item>
|
|
Packit |
1470ea |
<item>nastavit sestavovací systém </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>Vytvoření programu</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<links type="section"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="script"><title>Skript pro spuštění aplikace</title>
|
|
Packit |
1470ea |
Jako první řádek vašeho skriptu musí být:
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
Tím se vašemu skriptu říká, že má použít <link href="https://live.gnome.org/Gjs/">Gjs</link>. Gjs je vazba jazyka JavaScript na GNOME.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="imports"><title>Importované knihovny</title>
|
|
Packit |
1470ea |
const Lang = imports.lang;
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
Aby náš skript fungoval s GNOME, musíme naimportovat knihovny GNOME přes GObject Introspection. Zde importujeme vazbu jazyka a GTK+, tj. knihovnu, která obsahuje grafické widgety používané k vytvoření aplikací GNOME.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="mainwindow"><title>Vytvoření hlavního okna pro aplikaci</title>
|
|
Packit |
1470ea |
const Application = new Lang.Class({
|
|
Packit |
1470ea |
// Třída vyžaduje výslovné nastavení vlastnosti Name. Jedná se o název třídy.
|
|
Packit |
1470ea |
Name: 'Application',
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Vytvoří aplikaci
|
|
Packit |
1470ea |
_init: function() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Napojí signály "activate" a "startup" k jejich obsluze.
|
|
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 |
// Vytvoří uživatelské rozhraní
|
|
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 |
// Obsluha pro signál "activate"
|
|
Packit |
1470ea |
_onActivate: function() {
|
|
Packit |
1470ea |
// Zobrazí okno a všchny jeho synovské widgety
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Obsluha pro signál "startup"
|
|
Packit |
1470ea |
_onStartup: function() {
|
|
Packit |
1470ea |
this._buildUI();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
GtkApplication inicializuje GTK+. Rovněž napojí tlačítko <gui>×</gui>, které je u okna vygenerováno automaticky, k signálu "destroy" .
|
|
Packit |
1470ea |
Můžeme začít sestavovat naše první okno. Provedeme to vytvořením proměnné s názvem _window, které přiřadíme new Gtk.ApplicationWindow .
|
|
Packit |
1470ea |
Nastavíme vlastnost okna nazvanou title. Může jí být libovolný řetězec, který bude sloužit jako jeho název v záhlaví. Je dobré lpět na kódování UTF-8.
|
|
Packit |
1470ea |
Nyní máme okno, která má název a funkční „zavírací“ tlačítko. Pojďme přidat pořádný text „Hello World“.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="label"><title>Popisek pro okno</title>
|
|
Packit |
1470ea |
// Přidání widgetu popisku do vašeho okna
|
|
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 |
Textový popisek je jeden z widgetů GTK+, který můžeme použít na základě toho, že jsme importovali knihovnu GTK+. Abychom jej mohli použít, vytvoříme proměnnou nazvanou label a přiřadíme ji new Gtk.Label . Pak ji mezi složenými závorkami {} udáme vlastnosti. V tomto případě nastavujeme text, který je v popisku obsažen. Nakonec vytvoříme a spustíme aplikaci:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Spustí aplikaci
|
|
Packit |
1470ea |
let app = new Application();
|
|
Packit |
1470ea |
app.application.run(ARGV);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Gtk.Application může v jednu chvíli obsahovat jen jeden widget. Pokud chcete sestrojit složitější program, budete uvnitř okna potřebovat vytvořit kontejnerový widget, jako je Gtk.Grid , a všechny ostatní widgety přidat do něj.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="js"><title>hello-world.js</title>
|
|
Packit |
1470ea |
Celý soubor:
|
|
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 |
// Vytvoří aplikaci
|
|
Packit |
1470ea |
constructor() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Napojí signály "activate" a "startup" k jejich obsluze.
|
|
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 |
// Vytvoří uživatelské rozhraní
|
|
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 |
// Obsluha pro signál "activate"
|
|
Packit |
1470ea |
_onActivate() {
|
|
Packit |
1470ea |
//show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Obsluha pro signál "startup"
|
|
Packit |
1470ea |
_onStartup() {
|
|
Packit |
1470ea |
this._buildUI();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
};
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Spustí aplikaci
|
|
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>Spuštění aplikace z terminálu</title>
|
|
Packit |
1470ea |
Abyste mohli tuto aplikaci spustit, nejprve uložte hello-world.js. Pak otevřete terminál, přejděte do složky, kde je vaše aplikace uložená a spusťte:
|
|
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>Soubor <file>.desktop.in</file></title>
|
|
Packit |
1470ea |
Spouštění aplikace z terminálu je užitečné na začátku při postupném vytváření aplikace. Abychom dostali plně funkční <link href="https://developer.gnome.org/integration-guide/stable/mime.html.cs">aplikaci integrovanou</link> s GNOME 3, potřebujeme spouštěč do pracovního prostředí. K tomu musíte vytvořit soubor <file>.desktop</file>. Soubor <file>.desktop</file> popisuje název aplikace, použitou ikonu a různé integrační drobnosti. Hlubší rozebrání souboru <file>.desktop</file> můžete najít <link href="http://developer.gnome.org/desktop-entry-spec/">zde</link>. Ze souboru <file>.desktop.in</file> se vytvoří soubor <file>.desktop</file>.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<note>
|
|
Packit |
1470ea |
Než budete pokračovat, přeuložte <file>hello-world.js</file> jako <file>hello-world</file>. Pak spusťte v příkazovém řádku:
|
|
Packit |
1470ea |
<screen><output style="prompt">$ </output><input>chmod +x hello-world</input></screen>
|
|
Packit |
1470ea |
</note>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Příklad ukazuje minimální požadavky pro soubor .desktop.in .
|
|
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 |
Nyní se pojďme podívat na některé části souboru .desktop.in .
|
|
Packit |
1470ea |
<terms>
|
|
Packit |
1470ea |
<item><title>Name</title>Název aplikace. </item>
|
|
Packit |
1470ea |
<item><title>Comment</title>Krátký popis aplikace. </item>
|
|
Packit |
1470ea |
<item><title>Exec</title>Určuje příkaz, který se má spustit, když aplikaci vyberete v nabídce. V tomto příkladu Exec jednoduše říká, kde najít soubor <file>hello-world</file> a tento soubor se už postará o zbytek. </item>
|
|
Packit |
1470ea |
<item><title>Terminal</title>Určuje, jestli příkaz v klíči Exec běží v terminálu. </item>
|
|
Packit |
1470ea |
</terms>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Abyste vaši aplikaci umístili do správné kategorie, musíte potřebné kategorie přidat na řádek Categories . Více informací o různých kategoriích můžete najít ve <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">specifikaci nabídky</link>.
|
|
Packit |
1470ea |
V tomto příkladu používáme existující ikonu. Pro vlastní ikonu potřebujete mít soubor SVG se svojí ikonou uložený v <file>/usr/share/icons/hicolor/scalable/apps</file>. Napište název svého souboru s ikonou do souboru .desktop.in na řádek 7. Více informací o ikonách: <link href="https://live.gnome.org/GnomeGoals/AppIcon">Instalace ikon pro motivy</link> a <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">Specifikace/icon-theme-spec na freedesktop.org</link>.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="autotools"><title>Sestavovací systém</title>
|
|
Packit |
1470ea |
Aby se vaše aplikace stala opravdu součástí systému GNOME 3, je potřeba ji nainstalovat za pomoci autotools. Autotools nainstaluje všechny nutné soubory na správná místa.
|
|
Packit |
1470ea |
K tomu budete potřebovat následující soubory:
|
|
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 |
# Toto nám spustí autoconf, automake, atd.
|
|
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 |
Když máme soubor <file>autogen.sh</file> připravený a uložený, spusťte:
|
|
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 |
# Skutečný spustitelný program je nastaven do primitiva SCRIPTS
|
|
Packit |
1470ea |
# # Prefix bin_ říká, kam to nakopírovat
|
|
Packit |
1470ea |
bin_SCRIPTS = hello-world
|
|
Packit |
1470ea |
# # Seznam souborů, které se mají šířit
|
|
Packit |
1470ea |
EXTRA_DIST = \
|
|
Packit |
1470ea |
$(bin_SCRIPTS)
|
|
Packit |
1470ea |
#
|
|
Packit |
1470ea |
# # Soubory .desktop
|
|
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 |
# Tento soubor je zpracován pomocí autoconf, aby se vytvořil skript configure
|
|
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 |
Informace, které by si měl uživatel pro začátek přečíst. Tento soubor může být prázdný.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Když máme soubory <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> a <file>autogen.sh</file> se správnými informacemi a v pořádku, může soubor <file>README</file> obsahovat následující instrukce:
|
|
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>
|