<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" xmlns:xi="http://www.w3.org/2001/XInclude" type="guide" style="task" id="hello-world.js" xml:lang="sv">

  <info>
  <title type="text">Hej världen (Javascript)</title>
    <link type="guide" xref="beginner.js#tutorials" group="#first"/>

    <revision version="0.1" date="2013-06-17" status="review"/>

    <credit type="author copyright">
      <name>Susanna Huhtanen</name>
      <email its:translate="no">ihmis.suski@gmail.com</email>
      <years>2012</years>
    </credit>
    <credit type="editor">
      <name>Tiffany Antopolski</name>
      <email its:translate="no">tiffany.antopolski@gmail.com</email>
    </credit>

    <desc>Ett grundläggande ”Hej världen”-program</desc>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Sebastian Rasmussen</mal:name>
      <mal:email>sebras@gmail.com</mal:email>
      <mal:years>2019</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Anders Jonsson</mal:name>
      <mal:email>anders.jonsson@norsjovallen.se</mal:email>
      <mal:years>2021</mal:years>
    </mal:credit>
  </info>

  <title>Hur du bygger, installerar och skapar en <file>tar.xz</file> för ett ”Hej världen”-program</title>
    <media type="image" mime="image/png" style="floatend" src="media/hello-world.png"/>
    <synopsis>
      <p>Denna handledning kommer demonstrera hur du:</p>
      <list style="numbered">
        <item><p>skapar ett litet ”Hej världen”-program med Javascript och GTK+</p></item>
        <item><p>gör <file>.desktop</file>-filen</p></item>
        <item><p>konfigurerar byggsystemet</p></item>
      </list>
    </synopsis>



  <links type="section"/>

  <section id="HelloWorld"><title>Skapa programmet</title>

    <links type="section"/>

    <section id="script"><title>Skript för att köra programmet</title>
      <p>Detta måste vara den första raden i ditt skript:</p>
      <code mime="application/javascript">#!/usr/bin/gjs</code>
      <p>Den säger till skriptet att använda <link href="https://live.gnome.org/Gjs/">Gjs</link>. Gjs är en Javascript-bindning för GNOME.</p>
    </section>


    <section id="imports"><title>Bibliotek att importera</title>
      <code mime="application/javascript">const Lang = imports.lang;

imports.gi.versions.Gtk = '3.0'
const Gtk = imports.gi.Gtk;</code>
      <p>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.</p>
    </section>

    <section id="mainwindow"><title>Creating the main window for the application</title>
      <code mime="application/javascript">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();
    }
});
</code>

    <p>GtkApplication initierar GTK+. Det ansluter också knappen <gui>x</gui> som genereras automatiskt tillsammans med fönstret till signalen ”destroy”.</p>
    <p>Vi kan börja med att bygga vårt första fönster. Vi gör detta genom att skapa en variabel med namnet <var>_window</var> och tilldela den ett nytt Gtk.ApplicationWindow.</p>
    <p>Vi ger fönstret en egenskap med namnet <var>title</var>. 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.</p>
    <p>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”.</p>
    </section>

    <section id="label"><title>Etikett för fönstret</title>
      <code mime="application/javascript">// 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);</code>

      <p>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:</p>

      <code mime="application/javascript">//kör programmet
let app = new Application();
app.application.run(ARGV);</code>

      <p>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.</p>
   </section>


    <section id="js"><title>hello-world.js</title>
      <p>Den fullständiga filen:</p>
      <code mime="application/javascript" style="numbered">#!/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);
</code>
    </section>

    <section id="terminal"><title>Köra programmet från terminalen</title>
      <p>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:</p>
      <screen><output style="prompt">$ </output><input>gjs hello-world.js</input></screen>
    </section>
  </section>



  <section id="desktop.in"><title><file>.desktop.in</file>-filen</title>
      <p>Running applications from the Terminal is useful at the beginning of the application making process. To have fully working <link href="https://developer.gnome.org/integration-guide/stable/mime.html.en">application integration</link> in GNOME 3 requires a desktop launcher. For this you need to create a  <file>.desktop</file> file. The <file>.desktop</file> file describes the application name, the used icon and various integration bits. A deeper insight into the <file>.desktop</file> file can be found <link href="http://developer.gnome.org/desktop-entry-spec/">here</link>. The <file>.desktop.in</file> file will create the <file>.desktop</file>.</p>

  <note>
       <p>Innan du fortsätter, spara om <file>hello-world.js</file> som <file>hello-world</file>. Kör sedan följande på kommandoraden:</p>
      <screen><output style="prompt">$ </output><input>chmod +x hello-world</input></screen>
  </note>

    <p>Exemplet visar dig minimikraven för en <code>.desktop.in</code>-fil.</p>
    <code mime="text/desktop" style="numbered">[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;
</code>

    <p>Spara detta som <file>hello-world.desktop.in</file>. Låt oss nu gå igenom några delar av <code>.desktop.in</code>-filen.</p>
    <terms>
      <item><title>Name</title><p>Programmets namn.</p></item>
      <item><title>Comment</title><p>En kort beskrivning av programmet.</p></item>
      <item><title>Exec</title><p>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 <file>hello-world</file> kan hittas, så tar filen hand om resten.</p></item>
      <item><title>Terminal</title><p>Anger huruvida kommandot i Exec-nyckeln körs i ett terminalfönster.</p></item>
    </terms>

    <p>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 <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">menyspecifikationen</link>.</p>
    <p>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 <file>/usr/share/icons/hicolor/scalable/apps</file>. Skriv namnet på din ikonfil i .desktop.in-filen, på rad 7. Mer information om ikoner finns i: <link href="https://wiki.gnome.org/Initiatives/GnomeGoals/AppIcon">Installing Icons for Themes</link> och <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">på freedesktop.org: Specifications/icon-theme-spec</link>.</p>
  </section>

  <section id="autotools"><title>Byggsystemet</title>
    <p>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.</p>
    <p>För detta behöver du ha följande filer:</p>
    <links type="section"/>

      <section id="autogen"><title>autogen.sh</title>
        <code mime="application/x-shellscript" style="numbered">#!/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
</code>

      <p>Efter att filen <file>autogen.sh</file> är klar och sparad, kör:</p>
      <screen><output style="prompt">$ </output><input>chmod +x autogen.sh</input></screen>
    </section>


    <section id="makefile"><title>Makefile.am</title>
      <code mime="application/x-shellscript" style="numbered"># 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
</code>
    </section>


    <section id="configure"><title>configure.ac</title>
      <code mime="application/x-shellscript" style="numbered"># 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
</code>
    </section>


    <section id="readme"><title>README</title>
       <p>Information som användare bör läsa först. Denna fil kan vara tom.</p>

       <p>När du har filerna <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> och <file>autogen.sh</file> med rätt information och rättigheter, skapa en <file>README</file>-fil med installationsinstruktioner. Nedan är ett exempel på hur lämpliga README-instruktioner kan se ut:</p>
      <code mime="text/readme" style="numbered">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
</code>
    </section>

    <!-- TODO: How to make a custom icon with autotools -->

  </section>
</page>
