# Hej världen (Javascript)

Susanna Huhtanen
ihmis.suski@gmail.com 2012
Tiffany Antopolski
tiffany.antopolski@gmail.com
Ett grundläggande ”Hej världen”-program
Sebastian Rasmussen
sebras@gmail.com 2019
Anders Jonsson
anders.jonsson@norsjovallen.se 2021

# Hur du bygger, installerar och skapar en tar.xz för ett ”Hej världen”-program

          Denna handledning kommer demonstrera hur du:

            skapar ett litet ”Hej världen”-program med Javascript och GTK+
            gör .desktop-filen
            konfigurerar byggsystemet

# Skapa programmet

## Skript för att köra programmet

Detta måste vara den första raden i ditt skript:

#!/usr/bin/gjs

Den säger till skriptet att använda Gjs. Gjs är en Javascript-bindning för GNOME.

## Bibliotek att importera

const Lang = imports.lang;

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

För att vårt skript ska fungera med GNOME behöver vi importera GNOME-bibliotek via GObject Introspection. Här importerar vi språkbindningarna och GTK+, biblioteket som innehåller de grafiska komponenterna som används för att göra GNOME-program.

## Creating the main window for the application

const Application = new Lang.Class({ //En Class kräver en explicit parameter Name. Detta är klassens namn. Name: 'Application',

//skapa programmet _init: function() { this.application = new Gtk.Application();

//anslut ”activate”- och ”startup”-signaler till hanterare. this.application.connect('activate', Lang.bind(this, this._onActivate)); this.application.connect('startup', Lang.bind(this, this._onStartup)); },

//skapa användargränssnittet _buildUI: function() { this._window = new Gtk.ApplicationWindow({ application: this.application, title: "Hej världen!" }); },

//hanterare för ”activate”-signal _onActivate: function() { //visa fönstret och alla barnkomponenter this._window.show_all(); },

//hanterare för ”startup”-signal _onStartup: function() { this._buildUI(); } });

GtkApplication initierar GTK+. Det ansluter också knappen x som genereras automatiskt tillsammans med fönstret till signalen ”destroy”.

Vi kan börja med att bygga vårt första fönster. Vi gör detta genom att skapa en variabel med namnet _window och tilldela den ett nytt Gtk.ApplicationWindow.

Vi ger fönstret en egenskap med namnet title. Titeln kan vara vilken sträng som du vill. För att vara på den säkra sidan är det bäst att hålla sig till UTF-8-kodning.

Nu har vi ett fönster som har en titel och en fungerande ”stäng”-knapp. Låt oss lägga till den faktiska texten ”Hej världen”.

## Etikett för fönstret

// Lägg till en etikettkomponent till ditt fönster this.label = new Gtk.Label({ label: "Hej världen" }); this._window.add(this.label); this._window.set_default_size(200, 200);

En textetikett är en av GTK+-komponenterna vi kan använda eftersom vi har importerat GTK+-biblioteket. För att använda den skapar vi en ny variabel med namnet label, och tilldelar den en ny Gtk.Label. Sedan ger vi den egenskaper inom klammerparenteserna {}. I detta fall ställer vi in texten som etiketten ska innehålla. Slutligen skapar vi och kör programmet:

//kör programmet let app = new Application(); app.application.run(ARGV);

Gtk.ApplicationWindow kan endast innehålla en komponent åt gången. För att konstruera mer avancerade program behöver du skapa en behållarkomponent som Gtk.Grid inuti fönstret, och sedan lägga till alla andra komponenter till den.

## hello-world.js

Den fullständiga filen:

#!/usr/bin/gjs

const Lang = imports.lang;

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

class Application {

//skapa programmet constructor() { this.application = new Gtk.Application();

//anslut ”activate”- och ”startup”-signaler till hanterare. this.application.connect('activate', this._onActivate.bind(this)); this.application.connect('startup', this._onStartup.bind(this)); }

//skapa användargränssnittet _buildUI() { this._window = new Gtk.ApplicationWindow({ application: this.application, title: "Hej världen!" }); this._window.set_default_size(200, 200); this.label = new Gtk.Label({ label: "Hej världen" }); this._window.add(this.label); }

//hanterare för ”activate”-signal _onActivate() { //visa fönstret och alla barnkomponenter this._window.show_all(); }

//hanterare för ”startup”-signal _onStartup() { this._buildUI(); } };

//kör programmet let app = new Application(); app.application.run(ARGV);

## Köra programmet från terminalen

För att köra detta program, spara det först som hello-world.js. Öppna sedan Terminal, gå till mappen där ditt program lagrats och kör:

    $ gjs hello-world.js

# .desktop.in-filen

Running applications from the Terminal is useful at the beginning of the application making process. To have fully working application integration in GNOME 3 requires a desktop launcher. For this you need to create a .desktop file. The .desktop file describes the application name, the used icon and various integration bits. A deeper insight into the .desktop file can be found here. The .desktop.in file will create the .desktop.

Innan du fortsätter, spara om hello-world.js som hello-world. Kör sedan följande på kommandoraden:

    $ chmod +x hello-world

Exemplet visar dig minimikraven för en `.desktop.in`-fil.

[Desktop Entry] Version=1.0 Encoding=UTF-8 Name=Hello World Comment=Säg hej Exec=@prefix@/bin/hello-world Icon=application-default-icon Terminal=false Type=Application StartupNotify=true Categories=GNOME;GTK;Utility;

Spara detta som hello-world.desktop.in. Låt oss nu gå igenom några delar av `.desktop.in`-filen.

## Name

Programmets namn.

## Comment

En kort beskrivning av programmet.

## Exec

Anger ett kommando att köra när du väljer programmet från menyn. I detta exempel säger exec bara till var filen hello-world kan hittas, så tar filen hand om resten.

## Terminal

Anger huruvida kommandot i Exec-nyckeln körs i ett terminalfönster.

För att lägga ditt program i rätt kategori behöver du lägga till de nödvändiga kategorierna till raden Categories. Mer information om det olika kategorierna kan hittas i menyspecifikationen.

I detta exempel använder vi en befintlig ikon. För en anpassad ikon behöver du ha en .svg-fil av din ikon, lagrad i /usr/share/icons/hicolor/scalable/apps. Skriv namnet på din ikonfil i .desktop.in-filen, på rad 7. Mer information om ikoner finns i: Installing Icons for Themes och på freedesktop.org: Specifications/icon-theme-spec.

# Byggsystemet

För att verkligen göra ditt program till en del av GNOME 3-systemet behöver du installera det med hjälp av autotools. Detta autotools-bygge kommer installera alla nödvändiga filer till rätt plats.

För detta behöver du ha följande filer:

## autogen.sh

#!/bin/sh

set -e

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

olddir=`pwd` cd "$srcdir"

# Detta kommer köra autoconf, automake o.s.v. åt oss autoreconf --force --install

cd "$olddir"

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

Efter att filen autogen.sh är klar och sparad, kör:

    $ chmod +x autogen.sh

## Makefile.am

# The actual runnable program is set to the SCRIPTS primitive. # # Prefix bin_ tells where to copy this bin_SCRIPTS = hello-world # # List of files to be distributed EXTRA_DIST = \ $(bin_SCRIPTS) # # # The desktop files desktopdir = $(datadir)/applications desktop_DATA = \ hello-world.desktop

## configure.ac

# This file is processed by autoconf to create a configure script 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

Information som användare bör läsa först. Denna fil kan vara tom.

När du har filerna hello-world, hello-world.desktop.in, Makefile.am, configure.ac och autogen.sh med rätt information och rättigheter, skapa en README-fil med installationsinstruktioner. Nedan är ett exempel på hur lämpliga README-instruktioner kan se ut:

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