Using Gtk+

Create edit.vala

Copy/paste this into a file called edit.vala:

void main(string[] args)
{
    GtkClutter.init(ref args);
    
    var window = new Gtk.Window();
    
    var embed = new GtkClutter.Embed() {
        width_request = 640,
        height_request = 480 };
    window.add(embed);
    
    var edit = new Gtk.TextView() {
        width_request = 640,
        height_request = 480,
        wrap_mode = Gtk.WrapMode.CHAR };
        
    edit.buffer.text = "Edit me!";
    embed.get_stage().add_child(new GtkClutter.Actor.with_contents(edit));
    
    window.destroy.connect(Gtk.main_quit);
    window.show_all();
    Gtk.main();
}

Compile and run

In a terminal:

valac --pkg=clutter-1.0 --pkg=gtk+-3.0 --pkg=clutter-gtk-1.0 edit.vala
./edit

Result

result.png

Comments

First, notice that Gtk+, not Clutter, is responsible for managing the main window and the event loop (because Gtk+ needs to be in control for its widgets to work). Thus, our usual

Clutter.init(ref args);
...
stage.show();
stage.destroy.connect(Clutter.main_quit);
Clutter.main();

gets replaced by

GtkClutter.init(ref args);
...
window.show();
window.destroy.connect(Gtk.main_quit);
Gtk.main();

Inside this Gtk+ window, we placed a GtkClutter.Embed (which is a Gtk+ widget). This GtkClutter.Embed is what actually provides a Clutter.Stage that we can use:

var embed = new GtkClutter.Embed() {
...
window.add(embed);
...
embed.get_stage().add_child(...);

Finally, we created a Gtk.TextView. But, this Gtk.!Textview isn't an actor; it needs to be wrapped in a GtkClutter.Actor (which is a Clutter actor) before we can use it in Clutter:

var edit = new Gtk.TextView() {
...
embed.get_stage().add_child(new GtkClutter.Actor.with_contents(edit));

To recap, the nesting goes

Gtk.Window -> GtkClutter.Embed -> Clutter.Stage (implicit) -> GtkClutter.Actor -> Gtk.TextView

Whew!

Projects/Clutter/Tutorial/UsingGtk+ (last edited 2013-11-22 18:46:19 by WilliamJonMcCann)