Susanna Huhtanen ihmis.suski@gmail.com 2012 A basic "hello, world" application Hello World

In this tutorial we'll construct a small application, Hello World, using JavaScript and GTK+. To write and run all the code examples yourself, you need an editor to write code in, Terminal, and GNOME 3 or higher installed into your computer. In this tutorial we'll go through the following parts:

Script for running the application

Libraries to import

Creating the main window for the application

Label for the window

helloWorld.js

Running the application form Terminal

After taking this tutorial, you should see this on your screen:

Script for running the application

This needs to be the first line of your script, because it tells GNOME that we'll be using Gjs -- the JavaScript bindings for GNOME -- in order to run it.

Libraries to import

In order for our script to work with GNOME, we need to import GNOME libraries via GObject Introspection. In this case, we're importing GTK+, the most basic library that contains the graphical widgets used to make GNOME apps.

Creating the main window for the application

After importing Gtk, we need to initialize it. After that, we can start building our first window. We do this by creating a variable called mywindow and assigning it a new Gtk.Window of type TOPLEVEL.

After setting up our first window we'll give the window a property called title. The title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding.

The next thing we need to do for our application is connect the close button that's automatically generated along with the window to the close functionality. That happens with the method connect(). When the close button is pressed it gives out the signal "destroy", so in this part we're connecting the "destroy" signal to function(){Gtk.main_quit()}, which does the actual closing.

Now we have a window that has a title and a working "close" button. Let's add the actual "Hello, world" text.

Label for the window

A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. To use it, we create a new variable called label, and assign it a new Gtk.Label. Then we give it properties inside the curly braces {}. In this case, we're setting the text that the label will hold. Finally, we tell GNOME to show the label and the window containing it to the user, and call Gtk.main() to get the app itself started.

For the future, keep in mind that Gtk.Window can only hold one widget at a time. To construct more elaborate programs you need to create a holder widget (Gtk.Box, Gtk.Grid, Gtk.Application, and so on) of some kind inside the window, and then add all the other widgets to it.

helloWorld.js

Here's what the completed program looks like.

Running the application from Terminal

To run this application, first save it as helloWorld.js. Then open Terminal, go to the folder where your application is stored and run

$ chmod +x helloWorld.js

This makes your script executable. After that, run

$ GJS_PATH=`pwd` gjs helloWorld.js