Taryn Fox
jewelfox@fursona.net 2012
Vaše první aplikace pro GNOME!

# 1. Ahoj GNOME!

        V této lekci si ukážeme, jak napsat vaši první aplikaci pro GNOME v jazyce JavaScript. Použijeme jej k psaní pro GNOME stejným způsobem, jako byste použili pro web. Poté se dozvíte, jako použít nativní widgety k napsaní aplikace, která už bude vypadat jako správná aplikace GNOME.
        Máte v počítači nainstalováno GNOME a textový editor gedit pro psaní kódu? To jsou věci, které pro začátek potřebujeme.

# 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

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

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

// 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 (); },

// 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 });

// 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);