1. Ahoj GNOME!

Začněme s webovou stránkou

Zde je nějaký základní kód používající HTML, CSS a JavaScript. Přijde vám to povědomé?


<!DOCTYPE html>
<html>
    <head>
        <title>Hello, GNOME!</title>

        <!-- Použije JavaScript k zobrazení uvítání, když se klikne na tlačítko -->
        <script type="application/javascript">
        function greeting () {
            document.getElementById ("greeting").innerHTML = ("O hai!");
        }
        </script>

        <!-- Velmi základní styl CSS používající písmo z GNOME -->
        <style type="text/css">
            body {
                font-face: Cantarell, sans-serif;
                text-align: center; }
        </style>

    </head>
    <body>
        <br /> <br />
        <button type="button" onclick="greeting()">Hello, GNOME!</button>

        <!-- Prázdný prvek H1, bude vyplněn po kliknutí na tlačítko -->
        <h1 id="greeting"></h1>
    </body>
</html>

Pojďme jej uložit do hellognome.html a podívat se, jak to bude vypadat, když jej spustíme!

Kód uvedený výše můžete spustit otevřením hellognome.html ve webovém prohlížeči. My se ale chystáme vytvořit aplikaci pro GNOME, která spustí naši webovou aplikaci uvnitř sebe tak, jak tom můžete vidět na snímku obrazovky. Budete moci měnit velikost okna a maximalizovat jej, kliknout na × v rohu, aby se zavřelo, prostě vše tak, jak to očekáváte od aplikace GNOME. Rozdíl je v tom, že ta naše spustí uvnitř sebe naši webovou aplikaci.

A co je na tom nejlepší? Hodláme pokračovat v použití jazyka JavaScript k napsání všech zbývajících částí naší aplikace, aby pracovala v GNOME. Pojďme se podívat na kód, ať víte jak na to!

Vytvoření okna GNOME, které pojme naši webovou aplikaci

Nejprve musíme GNOME říct, že tato aplikace je v jazyce JavaScript, k čemuž použijeme gjs. Gjs je v GNOME způsob, jak přeměnit váš kód v jazyce JavaScript na instrukce, kterým rozumí, takže tento řádek musí být vždy na začátku vaší aplikace.


#!/usr/bin/gjs

Dále potřebujeme říci GNOME, které knihovny chceme importovat.


const GLib = imports.gi.GLib;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
const Webkit = imports.gi.WebKit;

Podobně, jako přidání knihoven, jako je jQuery, která umožňuje v jazyce JavaScript provádět nové věci, každá z těchto knihoven nám poskytne schopnosti pro naši aplikaci GNOME:

Gtk a Lang jsou základní části kterékoliv aplikace GNOME, které vám umožňují vytvořit okna a widgety a spojit je dohromady.

GLib je pomocná knihovna, díky kterém můžeme dělat takové věci, jako říci GNOME, kde je soubor hellognome.html, který jsme vytvořili.

Webkit je webové vykreslovací jádro, které použijeme v podstatě k vytvoření okna prohlížeče, ve kterém otevřeme náš soubor HTML.

Nyní vytvoříme vlastní aplikaci:


const HelloGNOME = new Lang.Class ({
    Name: 'Hello GNOME',

Pokud jste již dříve pracovali s objektově orientovaným jazykem JavaScript, přijde vám to známe. Máte pravdu, celá naše aplikace je třída nazvaná HelloGNOME. A jak můžete vidět, udáme ji vlastnost, která říká, jak se nazývá.


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

        // Napojí signály "activate" a "startup" k funkcím zpětného volání
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
    },

    // Funkce zpětného volání pro signál "activate" zobrazující okno při aktivaci
    _onActivate: function () {
        this._window.present ();
    },

    // Funkce zpětného volání pro signál "startup" sestavující uživatelské rozhraní
    _onStartup: function () {
        this._buildUI ();
    },

Zde je nějaký kód, který více méně zkopírujte do každé aplikace v jazyce JavaScript, kterou budete tvořit. Vytvoří novou aplikaci a napojí její signály "activate" a "startup" na funkce, které zajistí, že okno zobrazí sebe samo a sestaví své uživatelské rozhraní.

Co to znamená? V aplikacích GNOME vše posílá signály pokaždé, když se něco zajímavého stane. Například tlačítko může poslat signál "clicked", když je na něj kliknuto. Našim úkolem je napojit signály na funkce, které je zpracují a provedou něco, co chceme, aby se stalo. To uděláme použitím metody connect u každého objektu. Tato metoda má dva argumenty: Signál, který chceme obsluhovat, a funkci Lang.bind, což je funkce, po které chceme, aby signál obsluhovala.

V tomto případě chceme, aby _onActivate obsluhovala signál "activate" a _onStartup signál "startup". Funkce _onActivate akorát řekne oknu, aby se zobrazilo. Takže v podstatě, kdykoliv zmáčknete Alt Tab, aplikace se objeví tak, jak očekáváte. Funkce _onStartup volá funkci _buildUI, která vytvoří naše uživatelské rozhraní a je následující částí, na kterou se podíváme.

Když si kód uvedený výše zkopírujete a vložíte pro svoji vlastní aplikaci, přidělte ji pokaždé jedinečný název.

Návrh uživatelského rozhraní našeho okna

Ve funkci _buildUI se chystáme postupně říci GNOME o našem okně a věcech uvnitř něj. Nakonec vše spojíme dohromady a zobrazíme.


    // Sestaví uživatelské rozhraní aplikace
    _buildUI: function () {

        // Vytvoří okno aplikace
        this._window = new Gtk.ApplicationWindow  ({
            application: this.application,
            title: "Welcome to GNOME",
            default_height: 200,
            default_width: 400,
            window_position: Gtk.WindowPosition.CENTER });

První objekt, který vytvoříme, je ApplicationWindow. To potřebuje název do záhlaví a jeho vlastnost application musí být aplikace, kterou jsem vytvořili v předchozím. Mimo to, existují různé způsoby, jak si přizpůsobit jeho vzhled, v čemž jde více do podrobností stránka věnovaná widgetu ApplicationWindow. Jak můžete vidět zde, dáli jsme mu výchozí výšku a šířku (měřenou v pixelech) a řekli GNOME, že chceme, aby se naše okno objevilo uprostřed obrazovky.


        // Vytvoří webové zobrazení pro zobrazení webové aplikace
        this._webView = new Webkit.WebView ();

        // Vloží webovou aplikaci do webového zobrazení
        this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
            "/hellognome.html", null));

Pamatujete, jak jsme na začátku správně importovali Webkit? Zde vytváříme novu instanci třídy Webkit nazvanou WebView, což je více méně okno webového prohlížeče, které můžete vložit dovnitř své aplikace. Po té mu předáme adresu URI, kterou chceme načíst při spuštění aplikace.

Mohli bychom mu prostě předat webovou URI, jako je http://gnome.org. Místo toho zde použijeme pár pomocných funkcí z GLib, abychom widgetu WebView řekli, kde náš soubor hellognome.html je. GLib.get_current_dir vrací složku, ve které naše aplikace běží a GLib.filename_to_uri vrací cestu k našemu souboru a jeho název v podobě adresy URI, které rozumí funkce load_uri widgetu WebView. (Druhý parametr funkce filename_to_uri by měl být null, ledaže víte, k čemu slouží a máte důvod jej změnit.)


        // Vloží webové zobrazení do okna
        this._window.add (this._webView);

        // Zobrazí okno a všechny jeho synovské widgety
        this._window.show_all();
    },

});

Každé okno může obsahovat jeden a právě jeden widget. Normálně bychom použili kontejnerový widget, jako je Grid, abychom do něj vložili více widgetů a následně použili funkci add okna k jeho vložení do okna. V tomto případě ale potřebujeme jen jediný widget WebView, takže jej můžeme přidat do okna přímo. Po té, jako poslední část funkce _buildUI, která vytváří naše okno, řekneme oknu, aby zobrazilo sebe a svůj obsah.


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

Nakonec vytvoříme novou instanci naší třídy HelloGNOME a řekneme GNOME, aby ji spustil.

Spuštění vaší aplikace pro GNOME

Nyní máme vytvořenou vaši první aplikace pro GNOME a je čas ji otestovat! Nepotřebujete ji kompilovat ani pro ni instalovat nějaký speciální software. GNOME má gjs vestavěné, aby fungoval GNOME Shell. Takže akorát uložte hellognome.html a skutečnou aplikaci hellognome.js do složky, ke které se dostanete v terminálu. (Obvykle do vaší domovské složky, která má název podle vašeho uživatelského jména.) Pak otevřete terminál, přejděte do ní a napište:

$ gjs hellognome.js

Měli byste vidět víceméně to stejné, co na snímku obrazovky výše, s tlačítkem, které po kliknutí zobrazí krátkou zprávu.

Můžete použít terminálový příkaz

$ cd (název složky)

k pohybu mezi složkami v terminálu, abyste se dostali do složky, kde máte soubory uložené. Existuje i rozšíření pro Nautilus, což je správce souborů v GNOME, které umožňuje kliknout pravým tlačítkem v kterékoliv složce a otevřít v ní terminálové okno. Podívejte se po tomto rozšíření v aplikaci, kterou používáte k instalaci nového softwaru (jako je „Přidat/Odebrat programy“ nebo „Centrum softwaru“).

A co dál?

Pokračujte na následující lekci, ve které se dozvíte, jak místo webového zobrazení s kódem HTML vytvořit „nativní“ aplikaci pro GNOME, která bude vypadat jako ostatní aplikace a zapadat do prostředí. Nebo se podívejte na některé ukázky kódu, pokud byste chtěli vidět kód pro jednotlivé widgety Gtk.

A konečně, jestli jen chcete vytvářet aplikace pro GNOME pomocí knihoven jazyka JavaScript navržených pro web, můžete zde skončit se čtením a jít na to. Podívejte se do dalších lekcí, pokud byste pro vaši aplikaci rádi vytvořili soubor .desktop, díky němuž se vaše aplikace objeví mezi dalšími aplikacemi v nabídce pracovní plochy Činnosti.

Úplný kód ukázky

#!/usr/bin/gjs

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

const GLib = imports.gi.GLib;
const Gtk = imports.gi.Gtk;
const Webkit = imports.gi.WebKit;

class HelloGNOME {

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

        // Napojí signály "activate" a "startup" k funkcím zpětného volání
        this.application.connect('activate', this._onActivate.bind(this));
        this.application.connect('startup', this._onStartup.bind(this));
    }

    // Funkce zpětného volání pro signál "activate" zobrazující okno při aktivaci
    _onActivate() {
        this._window.present();
    }

    // Funkce zpětného volání pro signál "startup" sestavující uživatelské rozhraní
    _onStartup() {
        this._buildUI();
    }

    // Sestaví uživatelské rozhraní aplikace
    _buildUI() {

        // Vytvoří okno aplikace
        this._window = new Gtk.ApplicationWindow  ({
            application: this.application,
            title: "Welcome to GNOME",
            default_height: 200,
            default_width: 400,
            window_position: Gtk.WindowPosition.CENTER });

        // Vytvoří webové zobrazení pro zobrazení webové aplikace
        this._webView = new Webkit.WebView ();

        // Vloží webovou aplikaci do webového zobrazení
        this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
            "/hellognome.html", null));

        // Vloží webové zobrazení do okna
        this._window.add (this._webView);

        // Zobrazí okno a všechny jeho synovské widgety
        this._window.show_all();
    }

};

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