Gtk in Genie

2015-11-1-Gtk-grid-in-genie.Rmd

*This is part of a series of posts about the Genie programming language. I am updating my progress in learning the language from scratch in the hopes it will be useful for anyone also trying to get to programming in the linux/Gtk world.*

Wonder how a Gtk window would look like in Genie? Here is a simple example:

```
/* GTK+ Genie Sample Code - compile with valac --pkg gtk+-2.0 hello-gtk.gs */
uses 
    Gtk

init
    Gtk.init (ref args)
    var test = new TestWindow ()
    test.show_all ()
    Gtk.main ();

class TestWindow : Window
    init
        title = "Test Window"
        default_height = 250
        default_width = 250
        window_position = WindowPosition.CENTER
        destroy += Gtk.main_quit
        var button = new Button.with_label ("Click Me")
        button.clicked += def (btn)
            title = "Hello World"
            btn.label = "Hello World"
        add (button)
```


You can order your gtk windows both with grids or with more complex layouts.
Here are two approaches to organize your windows with Gtk (both of them taken
from the elementary OS getting started):

```
/* ANOTHER GTK EXPERIMENT WITH GENIE BASED ON ELEMENTARY INTRODUCTORY PAGE
** compile with valac --pkg gtk+03.0 gtkgridexample.gs */

[indent=4]
uses Gtk

init
Gtk.init (ref args)
var window = new Gtk.Window()
window.title = "Hello World!"
window.set_border_width(12)



    var grid = new Gtk.Grid ()
    grid.orientation = Gtk.Orientation.VERTICAL
    grid.row_spacing = 6

    var button = new Gtk.Button.with_label("Click me!")
    var label = new Gtk.Label(null)

    grid.add(button)
    grid.add(label)

    button.clicked.connect(pushed)
    window.add(grid)

    window.destroy.connect(Gtk.main_quit)
    window.show_all ()
    Gtk.main ()


def pushed (btn:Button)
btn.label = "Hello World!"
btn.sensitive = false
```

And a version with a complex layout:

```
/* ANOTHER GTK EXPERIMENT WITH GENIE BASED ON ELEMENTARY INTRODUCTORY PAGE
** compile with valac --pkg gtk+-3.0 layoutgtkexample.gs */

[indent=4]
uses Gtk

init
Gtk.init (ref args)
new RotatingButtonWindow( "Hello World!" )
Gtk.main ()

class RotatingButtonWindow:Window
_hello_label:Label
_rotate_label:Label



    construct( window_title:string )
        title = window_title
        set_border_width(12)

        var layout = new Grid ()
        layout.column_spacing = 6
        layout.row_spacing = 6

        // add 'hello' row of widgets
        var hello_button = new Button.with_label("Say Hello")
        _hello_label = new Label("Hello")
        layout.attach (hello_button, 0, 0, 1,1)
        layout.attach_next_to (_hello_label, hello_button, PositionType.RIGHT, 1, 1)

        // add 'rotate' row of widgets
        var rotate_button = new Button.with_label ("Rotate")
        _rotate_label = new Label("Horizontal")
        layout.attach(rotate_button, 0,1,1,1)
        layout.attach_next_to(_rotate_label, rotate_button, PositionType.RIGHT, 1, 1)

        add(layout)

        hello_button.clicked.connect(hello_pushed)
        rotate_button.clicked.connect(rotate_pushed)

        destroy.connect(Gtk.main_quit)
        show_all ()

    def hello_pushed (btn:Button)
        _hello_label.label = "Hello World!"
        btn.sensitive = false

    def rotate_pushed (btn:Button)
        _rotate_label.label = "Vertical"
        _rotate_label.angle = 90
        btn.sensitive = false


```