index.ts

/// <reference path="../typings/tsd.d.ts" />
import * as _ from 'lodash';
import {GtkWindow, NtkWindow} from './view';

import GI = require('node-gtk');

// GI imports
const Gdk: any = GI.require('Gdk', '3.0');
const Gtk: any = GI.require('Gtk', '3.0');

declare const global: any;

GI.startLoop();
Gtk.init();

console.log('launching window...');

let win = new NtkWindow();
win.showAll();

view.ts

/// <reference path="../typings/tsd.d.ts" />
import * as _ from 'lodash';
import GI = require('node-gtk');

interface GtkModule {
    main(): void;
    main_quit(): void;

    HBox: any;
    VBox: any;
    Button: any;
    Entry: any;
    Label: any;
    ListBox: any;
    ListBoxRow: any;
    SearchBar: any;
    SearchEntry: any;
    ScrolledWindow: any;
    Window: any;
    WindowType: any;
    WindowPosition: any;
    [key: string]: any;
}

interface WebKitModule {
    WebView: any;
}

// GI imports
const Gdk: any = GI.require('Gdk', '3.0');
const Gtk: GtkModule = GI.require('Gtk', '3.0');
const GtkSource: any = GI.require('GtkSource', '3.0');
const Webkit: WebKitModule = GI.require('WebKit2', null);

export interface GtkWindow {
    new (option: any): GtkWindow;
    on(event: string, cb: any): void;
    add(c:any):void;
    setDefaultSize(w: number, h: number): void;
    showAll(): void;
}

function createRow (text: string) {
    const row = new (Gtk.ListBoxRow as any);
    row.add( new (Gtk.Label as any)({label: text}) );
    return row;
}

function scroll (child: any) {
    const view = new Gtk.ScrolledWindow();
    view.add(child);
    return view;
}

export class NtkWindow extends (Gtk.Window as GtkWindow) {
    container: any;

    static createInterface() {
        const container = new Gtk.HBox();

        const sidebar = new Gtk.VBox;
        const entry = new Gtk.SearchEntry({
            hexpand: true,
            vexpand: false,
        });
        const treeView = new Gtk.ListBox({
            vexpand: false
        });
        treeView.add(createRow('item 1'));
        treeView.add(createRow('item 2'));
        treeView.add(createRow('item 3'));

        sidebar.packStart(entry,    false, true, 0);
        sidebar.packStart(treeView, true,  true, 0);

        const scrollView = new Gtk.ScrolledWindow({
            vexpand: true
        });
        const sourceView = new Webkit.WebView();
        sourceView.loadUri('http://devdocs.io');
        scrollView.add(sourceView);

        container.add(sidebar);
        container.add(scrollView);
        return container;
    }

    constructor() {
        super({
            type: Gtk.WindowType.TOPLEVEL,
            window_position: Gtk.WindowPosition.CENTER
        });
        console.log('constructor(): this == ', this);

        this.setDefaultSize(600, 800);
        this.container = NtkWindow.createInterface();
        this.add(this.container);

        this.on('show', Gtk.main);
        // this.on('destroy', Gtk.main_quit);
        this.on('key-press-event', (...args) => {
            console.log(args);
            console.log(this);
            console.log(this.constructor);
            // this.onKeyDown(args);
            return false;
        });
    }

    onKeyDown (...args: any[]): boolean {
        console.log(args);
        return;
    }
}