# Hello World (JavaScript)

Susanna Huhtanen
ihmis.suski@gmail.com 2012
Tiffany Antopolski
tiffany.antopolski@gmail.com
기본 "hello, world" 프로그램
조성호
shcho@gnome.org 2017-2019.

# Hello World 프로그램의 tar.xz 파일을 빌드하고, 설치하고, 만들기

          이 지침서에서는 다음 방법을 보여줍니다:

            JavaScript와 GTK+로 간단한 "Hello, World" 프로그램 만들기
            .desktop 파일 만들기
            빌드 시스템 구성 방법

# 프로그램 만들기

## 실행 프로그램 스크립트

스크립트의 첫줄에 다음 줄이 들어가있어야합니다:

#!/usr/bin/gjs

이 부분은 스크립트에서 Gjs를 활용하겠다고 알려줍니다. gjs는 그놈용 자바스크립트 바인딩입니다.

## 가져올 라이브러리

const Lang = imports.lang;

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

우리가 작성한 스크립트가 그놈에서 동작하게 하려면, 그놈 라이브러리를 GObject 인트로스펙션으로 가져와야합니다. 여기서 우리는 언어 바인딩과 그놈 프로그램을 만들 때 그래픽 위젯이 들어있는 GTK+ 라이브러리를 임포팅합니다.

## 프로그램 메인 창 만들기

const Application = new Lang.Class({ //A Class requires an explicit Name parameter. This is the Class Name. Name: 'Application',

//create the application _init: function() { this.application = new Gtk.Application();

//connect to 'activate' and 'startup' signals to handlers. this.application.connect('activate', Lang.bind(this, this._onActivate)); this.application.connect('startup', Lang.bind(this, this._onStartup)); },

//create the UI _buildUI: function() { this._window = new Gtk.ApplicationWindow({ application: this.application, title: "Hello World!" }); },

//handler for 'activate' signal _onActivate: function() { //show the window and all child widgets this._window.show_all(); },

//handler for 'startup' signal _onStartup: function() { this._buildUI(); } });

GtkApplication은 GTK+를 초기화합니다. 또한 창을 만들 때 자동으로 붙인 x 단추를 "destroy" 시그널에 연결합니다.

첫 창 만들기로 시작하겠습니다. _window 변수를 만들고 Gtk.ApplicationWindow 새 객체를 할당하겠습니다.

창에 title 속성을 설정해야합니다. 제목은 원하는대로 지을 수 있습니다. 안전한 방편으로, UTF-8 인코딩으로 작성하시는게 좋습니다.

이제 제목과 동작하는 "닫기" 단추가 붙은 창을 만들었습니다. 이제 실제 "Hello World" 문구를 찍어보겠습니다.

## 창 레이블

// Add a label widget to your window this.label = new Gtk.Label({ label: "Hello World" }); this._window.add(this.label); this._window.set_default_size(200, 200);

텍스트 레이블은 GTK+ 라이브러리에서 가져와서 사용할 수 있는 GTK+ 위젯 중 하나입니다. 텍스트 레이블을 사용하려면 레이블이라는 새 변수를 만들고 새 Gtk.Label을 할당합니다. 그 다음 {} 중괄호에 속성 값을 넣습니다. 지금 같은 경우, 레이블 값을 유지할 문장을 설정합니다. 마지막으로 프로그램을 만들고 실행하겠습니다:

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

Gtk.ApplicationWindow는 한번에 위젯 하나만 가질 수 있습니다. 프로그램을 더 정교하게 만들려면 Gtk.Grid 같은 홀더 위젯을 창 안에 만들어 넣고 그 안에 위젯을 추가해야합니다.

## hello-world.js

완전한 파일 내용:

#!/usr/bin/gjs

const Lang = imports.lang;

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

class Application {

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

//connect to 'activate' and 'startup' signals to handlers. this.application.connect('activate', this._onActivate.bind(this)); this.application.connect('startup', this._onStartup.bind(this)); }

//create the UI _buildUI() { this._window = new Gtk.ApplicationWindow({ application: this.application, title: "Hello World!" }); this._window.set_default_size(200, 200); this.label = new Gtk.Label({ label: "Hello World" }); this._window.add(this.label); }

//handler for 'activate' signal _onActivate() { //show the window and all child widgets this._window.show_all(); }

//handler for 'startup' signal _onStartup() { this._buildUI(); } };

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

## 터미널에서 프로그램 실행

이 프로그램을 실행하려면 우선 hello-world.js 파일 이름으로 저장하십시오. 그 다음 터미널을 열고 프로그램을 저장한 폴더로 이동한 다음 실행하십시오:

    $ gjs hello-world.js

# .desktop.in 파일

터미널에서의 프로그램 실행은 프로그램을 처음 만드는 단계에서 상당히 유용합니다. 그놈 3에서 완벽하게 프로그램 통합하여 동작할 수 있게 하려면 데스크톱 실행 아이콘이 필요합니다. 이 아이콘을 만들려면 .desktop 파일을 만들어야합니다. 파일은 프로그램 이름, 사용 아이콘, 다양한 통합 부분을 서술합니다. .desktop 파일에 대한 더 자세한 관점은 여기에 있습니다. .desktop.in 파일로 .desktop 파일을 만듭니다.

계속하기 전에 hello-world.js 파일을 hello-world로 다시 저장하십시오. 그 다음 명령줄에서 다음 명령을 실행하십시오:

    $ chmod +x hello-world

예제에서는 `.desktop.in` 파일에서 최소한 필요한 내용을 보여줍니다.

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

이 내용을 hello-world.desktop.in 파일로 저장하십시오. 이제 `.desktop.in` 파일 부분으로 들어가보겠습니다.

## Name

프로그램 이름입니다.

## Comment

프로그램의 간단한 설명입니다.

## Exec

메뉴에서 프로그램을 선택했을 때 실행할 명령을 지정합니다. 이 예제에서는 hello-world 파일을 어디서 찾는지 알려주며 파일을 다루는 방식은 나머지 부분에서 다룹니다.

## Terminal

Exec 키의 명령을 터미널 창에서 실행할 지 여부를 지정합니다.

프로그램을 적당한 분류에 넣으려면 Categories 줄에 필요한 분류 이름을 추가해야합니다. 다른 분류에 대한 자세한 정보는 메뉴 명세에 있습니다.

In this example we use an existing icon. For a custom icon you need to have a .svg file of your icon, stored in /usr/share/icons/hicolor/scalable/apps. Write the name of your icon file to the .desktop.in file, on line 7. More information on icons in: Installing Icons for Themes and on freedesktop.org: Specifications/icon-theme-spec.

# 빌드 시스템

그놈 3의 일부 프로그램을 만들려면 autotools의 도움을 받아 설치해야합니다. autotools 빌드는 필요한 모든 파일을 모든 올바른 경로에 설치합니다.

진행하려면 다음 파일이 필요합니다:

## autogen.sh

#!/bin/sh

set -e

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

olddir=`pwd` cd "$srcdir"

# This will run autoconf, automake, etc. for us autoreconf --force --install

cd "$olddir"

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

autogen.sh 파일을 준비했고 저장하고 나면, 다음을 실행하십시오:

    $ 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

사용자가 우선 읽어야 할 내용입니다. 이 파일은 비워둘 수 있습니다.

올바른 정보와 권한을 설정한 hello-world, hello-world.desktop.in, Makefile.am, configure.ac, autogen.sh 파일을 갖추고 나면, README 파일을 만들어 설치 방법을 적어 넣으십시오. README에 적당한 절차 내용을 넣은 예제를 아래에 보여드리겠습니다:

이 프로그램을 빌드하고 설치하려면, 아래 명령을 터미널에서 실행하십시오:

./autogen.sh --prefix=/home/$USER/.local make install

------------- 처음 명령을 실행할 때 $USER 는 사용자 이름으로 바뀝니다.

위 처음 명령을 실행하면 아래 파일을 만듭니다:

aclocal.m4 autom4te.cache config.log config.status configure hello-world.desktop install-sh missing Makefile.in Makefile

"make install"을 실행하면, /home/your_username/.local/bin 경로에 프로그램을 설치하며 /home/your_username/.local/share/applications 경로에 hello-world.desktop 파일을 설치합니다

이제 개요에서 "Hello World"를 입력하면 프로그램을 실행할 수 있습니다.

---------------- 설치한 프로그램을 제거하려면:

make uninstall

---------------- 타르볼 파일을 만들려면:

make distcheck

위 명령은 hello-world-1.0.tar.xz 파일을 만듭니다