Hello World (JavaScript)

Vytvoření programu

Skript pro spuštění aplikace

Jako první řádek vašeho skriptu musí být:

#!/usr/bin/gjs

Tím se vašemu skriptu říká, že má použít Gjs. Gjs je vazba jazyka JavaScript na GNOME.

Importované knihovny

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

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.

Vytvoření hlavního okna pro aplikaci

const Application = new Lang.Class({
    // Třída vyžaduje výslovné nastavení vlastnosti Name. Jedná se o název třídy.
    Name: 'Application',

    // Vytvoří aplikaci
    _init: function() {
        this.application = new Gtk.Application();

       // Napojí signály "activate" a "startup" k jejich obsluze.
       this.application.connect('activate', Lang.bind(this, this._onActivate));
       this.application.connect('startup', Lang.bind(this, this._onStartup));
    },

    // Vytvoří uživatelské rozhraní
    _buildUI: function() {
        this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                   title: "Hello World!" });
    },

    // Obsluha pro signál "activate"
    _onActivate: function() {
        // Zobrazí okno a všchny jeho synovské widgety
        this._window.show_all();
    },

    // Obsluha pro signál "startup"
    _onStartup: function() {
        this._buildUI();
    }
});

GtkApplication inicializuje GTK+. Rovněž napojí tlačítko ×, které je u okna vygenerováno automaticky, k signálu "destroy".

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.

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.

Nyní máme okno, která má název a funkční „zavírací“ tlačítko. Pojďme přidat pořádný text „Hello World“.

Popisek pro okno

// Přidání widgetu popisku do vašeho okna
this.label = new Gtk.Label({ label: "Hello World" });
this._window.add(this.label);
this._window.set_default_size(200, 200);

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:

// Spustí aplikaci
let app = new Application();
app.application.run(ARGV);

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.

hello-world.js

Celý soubor:

#!/usr/bin/gjs

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

class Application {

    // Vytvoří aplikaci
    constructor() {
        this.application = new Gtk.Application();

       // Napojí signály "activate" a "startup" k jejich obsluze.
       this.application.connect('activate', this._onActivate.bind(this));
       this.application.connect('startup', this._onStartup.bind(this));
    }

    // Vytvoří uživatelské rozhraní
    _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);
    }

    // Obsluha pro signál "activate"
    _onActivate() {
        //show the window and all child widgets
        this._window.show_all();
    }

    // Obsluha pro signál "startup"
    _onStartup() {
        this._buildUI();
    }
};

// Spustí aplikaci
let app = new Application();
app.application.run(ARGV);

Spuštění aplikace z terminálu

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:

$ gjs hello-world.js

Soubor <file>.desktop.in</file>

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í aplikaci integrovanou s GNOME 3, potřebujeme spouštěč do pracovního prostředí. K tomu musíte vytvořit soubor .desktop. Soubor .desktop popisuje název aplikace, použitou ikonu a různé integrační drobnosti. Hlubší rozebrání souboru .desktop můžete najít zde. Ze souboru .desktop.in se vytvoří soubor .desktop.

Než budete pokračovat, přeuložte hello-world.js jako hello-world. Pak spusťte v příkazovém řádku:

$ chmod +x hello-world

Příklad ukazuje minimální požadavky pro soubor .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;

Nyní se pojďme podívat na některé části souboru .desktop.in.

Name

Název aplikace.

Comment

Krátký popis aplikace.

Exec

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 hello-world a tento soubor se už postará o zbytek.

Terminal

Určuje, jestli příkaz v klíči Exec běží v terminálu.

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 specifikaci nabídky.

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 /usr/share/icons/hicolor/scalable/apps. Napište název svého souboru s ikonou do souboru .desktop.in na řádek 7. Více informací o ikonách: Instalace ikon pro motivy a Specifikace/icon-theme-spec na freedesktop.org.

Sestavovací systém

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.

K tomu budete potřebovat následující soubory:

autogen.sh

#!/bin/sh

set -e

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

olddir=`pwd`
cd "$srcdir"

# Toto nám spustí autoconf, automake, atd.
autoreconf --force --install

cd "$olddir"

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

Když máme soubor autogen.sh připravený a uložený, spusťte:

$ chmod +x autogen.sh

Makefile.am

# Skutečný spustitelný program je nastaven do primitiva SCRIPTS
# # Prefix bin_ říká, kam to nakopírovat
bin_SCRIPTS = hello-world
# # Seznam souborů, které se mají šířit
EXTRA_DIST =  \
	$(bin_SCRIPTS)
#
#     # Soubory .desktop
desktopdir = $(datadir)/applications
desktop_DATA = \
	hello-world.desktop

configure.ac

# Tento soubor je zpracován pomocí autoconf, aby se vytvořil skript configure
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

Informace, které by si měl uživatel pro začátek přečíst. Tento soubor může být prázdný.

Když máme soubory hello-world, hello-world.desktop.in, Makefile.am, configure.ac a autogen.sh se správnými informacemi a v pořádku, může soubor README obsahovat následující instrukce:

To build and install this program:

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

-------------
Running the first line above creates the following files:

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

Running "make install", installs the application in /home/your_username/.local/bin
and installs the hello-world.desktop file in /home/your_username/.local/share/applications

You can now run the application by typing "Hello World" in the Overview.

----------------
To uninstall, type:

make uninstall

----------------
To create a tarball type:

make distcheck

This will create hello-world-1.0.tar.xz