# Hello World (JavaScript)

Susanna Huhtanen
ihmis.suski@gmail.com 2012
Tiffany Antopolski
tiffany.antopolski@gmail.com
Základní aplikace „Hello, world“

# Jak sestavit a nainstalovat program „Hello World“ a jak pro něj vytvořit balíček tar.xz

          Tato lekce ukazuje jak:

            vytvořit malou aplikaci „Hello, World“ pomocí jazyka JavaScript a GTK+
            vytvořit soubor .desktop
            nastavit sestavovací systém

# 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;

imports.gi.versions.Gtk = '3.0' 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

const Lang = imports.lang;

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 .desktop.in

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;

Uložte jej jako hello-world.desktop.in. 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 oprávněními, můžeme vytvořit soubor README s intrukcemi pro instalaci. Níže je příklad, jak může README s vhodným popisem vypadat:

To build and install this program, run these commands from a terminal:

./autogen.sh --prefix=/home/$USER/.local make install

------------- When running the first command $USER will be replaced by your username.

Running the first command 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