Taryn Fox
jewelfox@fursona.net 2012
Seu primeiro aplicativo do GNOME!
Rafael Fontenelle
rafaelff@gnome.org 2013, 2018

# 1. Olá, GNOME!

        Este tutorial vai mostrar como escrever o seu primeiro aplicativo do GNOME em JavaScript. Você vai usar o JavaScript para escrever para o GNOME da mesma forma que você faria para a web. Em seguida, você aprenderá como usar widgets “nativos”, para escrever aplicativos que parecem com outros aplicativos do GNOME.
        Você instalou o GNOME no seu computador e configurou o gedit para com ele escrever códigos? Você vai querer fazer essas coisas primeiro.

# Vamos começar com uma página web

Aqui estão alguns códigos básicos de HTML, CSS e JavaScript. Eles parecem familiar?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, GNOME!</title>

<!-- Use JavaScript to show a greeting when someone clicks the button --> <script type="application/javascript"> function greeting () { document.getElementById ("greeting").innerHTML = ("O hai!"); } </script>

<!-- Very basic CSS style using the GNOME font --> <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>

<!-- Empty H1 element gets filled in when the button is clicked --> <h1 id="greeting"></h1> </body> </html>

Vamos salvar isso como hellognome.html e vejamos com o que ele se parece quando nós executamo-o!

Você pode executar o código acima abrindo hellognome.html em um navegador web. Mas aqui, nós vamos criar um aplicativo do GNOME que executa nosso aplicativo web dentro dele, da mesma forma que você vê na captura de tela. Você vai poder redimensionar e maximizar a janela e clicar no X na esquina para fechá-lo, da mesma forma que você esperaria de um outro aplicativo GNOME. A diferença é que este aqui vai executar um código web dentro dele.

A melhor parte? Nós vamos continuar a usar JavaScript, para escrever todas as partes que fazem do seu aplicativo funcionar com GNOME. Vamos olhar o código e ver como isso é feito!

# Criando uma janela do GNOME para enquadrar nosso aplicativo web

Primeiro, nós precisamos informar o GNOME que este é um aplicativo JavaScript, o qual usa gjs. Gjs é a forma do GNOMe de transformar o seu código em instruções que ele entende, de forma que esta linha sempre tem que ir no começo dos aplicativos.

#!/usr/bin/gjs

Then we should set the versions of the libraries we'll be using.

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

Depois disso, nós precisamos informar o GNOME quais bibliotecas nós queremos importar.

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

Da mesma forma que as bibliotecas complementares tipo jQuery nos permitem fazer coisas com JavaScript, cada um destas bibliotecas nos dá novas capacidades para nossos aplicativos do GNOME:

Gtk is the basic part of any GNOME application, which lets you create windows and widgets and tie them together.

O GLib é uma biblioteca de ajuda, o que nos permite fazer coisas como informar o GNOME onde o arquivo hellognome.html foi criado.

E o Webkit é um motor web de renderização, que nós vamos usar para basicamente criar uma janela de navegador para abrir o nosso arquivo HTML.

Nós vamos criar o aplicativo em si:

class HelloGNOME {

This will look familiar to you if you've worked with object-oriented JavaScript before. That's right; our whole application is a class called HelloGNOME.

// Create the application itself constructor() { this.application = new Gtk.Application();

// Connect 'activate' and 'startup' signals to the callback functions this.application.connect('activate', this._onActivate.bind(this)); this.application.connect('startup', this._onStartup.bind(this)); }

// Callback function for 'activate' signal presents windows when active _onActivate() { this._window.present(); }

// Callback function for 'startup' signal builds the UI _onStartup() { this._buildUI(); }

Aqui está um código que você que você vai copiar para quase todo aplicativo JavaScript que você construir. Ele cria um novo Aplicativo e, então, vincula seus sinais de ativação e inicialização a funções que fazem a janela se mostrar e construir sua interface gráfica, respectivamente.

What does that mean? Well, everything in a GNOME application sends out a signal when something important happens. A button might send out the clicked signal when you click on it, for instance. Our job is to connect the signals to functions which handle them, and make the things that we want to have happen occur. We do this using each object's connect method, which takes two arguments: The signal we want to handle, and the bound function, which we have to use to tell connect which function we want to have handle the signal.

Neste caso, nós queremos que o _onActivate lide com o sinal de ativação e que o _onStartup lide com o sinal de inicialização. O _onActivate apenas informa à janela para se apresentar; então, basicamente, quando você pressiona Alt Tab, o aplicativo aparece, como você esperaria. O _onStartup chama _buildUI, a qual é a função que cria nossa interface gráfica e é a próxima parte que vamos olhar.

When you copy and paste the above code for your own applications, be sure to change the class name to a unique one each time.

# Desenhando a interface gráfica da nossa janela

Na função _buildUI, nós vamos informar o GNOME sobre nossa janela e as coisas dentro dela, uma coisa de cada vez. Depois disso, nós vamos conectar tudo e colocar na exibição.

// Build the application's UI _buildUI() {

// Create the application window this._window = new Gtk.ApplicationWindow ({ application: this.application, title: "Welcome to GNOME", default_height: 200, default_width: 400, window_position: Gtk.WindowPosition.CENTER });

O primeiro objeto que nós criamos é uma ApplicationWindow. Ele precisa de um título para a barra de título e a propriedade do seu aplicativo precisa ser o aplicativo que nós criamos, acima. Além disso, há várias formas de personalizar sua a aparência, o que será tratado na página de referência ApplicationWindow em mais detalhes. Como você pode ver aqui, nós damos a ele uma altura e largura (medidas em pixels) e informamos ao GNOME que nós queremos que nossa janela apareça no centro da janela.

// Cria um webview para mostrar o aplicativo web this._webView = new Webkit.WebView ();

// Coloca o aplicativo web no webview this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() + "/hellognome.html", null));

Lembra-se que nós importamos o Webkit bem no começo? Aqui nós estamos criando uma nova instância de uma classe do Webkit chamada WebView, a qual é mais ou menos como uma janela de navegador que nós podemos colocar as coisas dentro do seu aplicativo. Depois disso, nós podemos, então, informar a URI que nós queremos carregar quando o aplicativo inicia.

Nós poderíamos simplesmente informar uma URI web, como http://gnome.org. Em vez disso, aqui nós usamos algumas funções de apoio do GLib para informar o WebView onde nosso arquivo hellognome.html está. O GLib.get_current_dir retorna o diretório no qual nosso aplicativo está sendo executado e GLib.filename_to_uri transforma nosso caminho e nome de arquivo em uma URI que a função load_uri do WebView entende. (o segundo parâmetro do filename_to_uri deveria ser nulo, a menos que você saiba para que serve e tenha um motivo para alterá-lo.)

// Coloca o webview na janela this._window.add (this._webView);

// Mostra a janela e todos seus widgets filhos this._window.show_all(); },

});

Cada janela pode conter um, e apenas um, widget. Normalmente, nós usamos um contêiner de widgets, como uma Grid, para colocar múltiplos widgets dentro e, então, usar a função de adicionar da janela para adicionar a Grid a ela. Aqui, nós precisamos apenas do WebView, de forma que é tudo que nós adicionamentos à janela. Depois disso, como a última parte da função _buildUI que cria nossa janela, nós informamos à janela para se mostrar e também mostrar o seu conteúdo.

// Executa o aplicativo let app = new HelloGNOME (); app.application.run (ARGV);

Finalmente, nós criamos uma nova instância de nossa classe HelloGNOME e informamos ao GNOME para executá-la.

# Executando seu aplicativo do GNOME

Agora que nós criamos nosso primeiro aplicativo do GNOME, é hora de testá-lo! Você não precisa compilar o seu aplicativo ou instalar qualquer software especial para isso; O GNOME possui gjs embutido, para permiti-lo executar o GNOME Shell. Basta salvar o hellognome.html e o aplicativo, hellognome.js, em um diretório que você pode obter com o terminal. (Eles normalmente abrem na sua pasta pessoal, aquela que tem o mesmo nome do seu usuário.) Depois disso, abra um terminal e digite:

     $ gjs hellognome.js

Você deveria ver mais ou menos a mesma captura de tela de antes, com um botão que você possa clicar para fazer uma curta mensagem aparecer.

Você pode usar comando de terminal

     $ cd (nome do diretório)

para navegar entre diretórios dentro do Terminal, para chegar onde você salvou o arquivo. Há também uma extensão para o Nautilus, o gerenciador de arquivos do GNOME, que permite que você clique com botão direito do mouse em qualquer lugar nele para abrir uma janela de terminal ali mesmo. Verifique no aplicativo que você usa para instalar novos softwares (tipo Adicionar ou Remover Programas ou Central de Programas) pela extensão.

# O que vem em seguida?

Continue com o próximo tutorial para aprender a criar aplicativos “nativos” do GNOME que se parecem com os outros, em vez de um webview com código HTML inserido. Ou veja algumas amostras de código, se você gostaria de ver um código exemplo para widget Gtk.

Finalmente, se você deseja apenas construir aplicativos do GNOME usando bibliotecas do JavaScript projetadas para web, você pode basicamente parar aqui e fazer mais nada! Veja os últimos tutoriais, se você gostaria de ver como criar um arquivo .desktop para seu aplicativo, o que vai permiti-lo aparecer no seu menu de Atividades do seu computador com todos os seus outros aplicativos.

# Amostra de código completo

#!/usr/bin/gjs

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

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

class HelloGNOME {

// Create the application itself constructor() { this.application = new Gtk.Application ();

// Connect 'activate' and 'startup' signals to the callback functions this.application.connect('activate', this._onActivate.bind(this)); this.application.connect('startup', this._onStartup.bind(this)); }

// Callback function for 'activate' signal presents windows when active _onActivate() { this._window.present(); }

// Callback function for 'startup' signal builds the UI _onStartup() { this._buildUI(); }

// Build the application's UI _buildUI() {

// Create the application window this._window = new Gtk.ApplicationWindow ({ application: this.application, title: "Welcome to GNOME", default_height: 200, default_width: 400, window_position: Gtk.WindowPosition.CENTER });

// Create a webview to show the web app this._webView = new Webkit.WebView ();

// Put the web app into the webview this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() + "/hellognome.html", null));

// Put the webview into the window this._window.add (this._webView);

// Show the window and all child widgets this._window.show_all(); }

};

// Run the application let app = new HelloGNOME (); app.application.run (ARGV);