Nerd wannabe

lazy weblog

An Xml User-interface Language for GTK+ (dubbed ‘gtkaml’)

with 5 comments

(update 2008-02-03: gtkaml 0.1 has been released and the syntax is changed too)

Every major UI toolkit today has some XML counterpart, don’t they?

Mozilla has XUL (pronounced ‘zool’) which is used along with JavaScript;
.NET has XAML (pronounced ‘zammel’) which is used with/instead of C# or other .NET language;
Flex has MXML which is used with ActionScript 3;
PHP-Gtk has Gul which is used with PHP, of course.

All these are markup languages have in common is that they are using the structure/hierarchy of the XML source file to build the hierarchy of the UI widgets/containers.

Plus, they separate UI from controllers/algorithms etc.

Great idea, I’d say.

What I didn‘t find, was a such XUL/XAML for GTK+ in C. Why search that?

Well, GTK is by far the most popular Linux widget toolkit. Starting from GIMP, Gaim (now pidgin), Inkscape, AbiWord and continuing with the GNOME desktop environment, all these use GTK+. Plus, wxWidgets and SWT use this on Linux (and native controls on Windows).

But GTK+ has one big disadvantage (which is its advantage too): it is written in C!

Why is this an advantage? It has language bindings for ruby, perl, python, C#, C++, Java and any language you can find in the world (Ada?). If you don’t know already, operating systems are written in C and the only generally compatible/available calling convention is the C one!

The disadvantage? It’s Object-Oriented. It mimics inheritance through appends to structs (GObject). It has a considerable steep learning curve, because of all the boilerplate code written for a Class.

Now, gtkaml aims to do two things:

  1. write the inheritance boilerplate for you
  2. write the UI for you

So, given that you provide the following gtkaml code (this is just an example):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<GtkVBox xmlns="http://b100dian.com/gtkaml/0.01/gtk+-2.0">
	<GtkLabel translatable="true" use_markup="true"
		label="&lt;b&gt;Dialog Box Title Here&lt;/b&gt;" expand="false">
	</GtkLabel>
	<GtkNotebook can_focus="true" tab_vborder="1">
		<tabs>
			<GtkLabel label="label for a tab" fill="FALSE"/>
			<GtkCheckButton label="check button" active="TRUE" fill="FALSE" />
		</tabs>
		<GtkLabel>
			<label>label
multiline</label>
		</GtkLabel>
	</GtkNotebook>
	<GtkHButtonBox expand="false">
		<GtkButton has_default="true" label="_abort"/>
		<GtkButton label="gtk-redo" stock="true"/>
		<GtkButton label="fail"/>
	</GtkHButtonBox>
</GtkVBox>

It will generate the .h and .c file for you that will compile into this widget:gtkaml1.png

Now, all seems perfect but:

  • how one defines signals? How does one consume signals? in C??
  • how does one declare properties? with tags like <gboolean id=”my_boolean” /> and <gchar id=”my_character” /> ?

The answer could come from Vala!

Vala is an OO language especially made around the GObject mechanism (others don’t fit exactly). The .vala file is compiled in.. exactly an .h and .c fil:

So I am taking this a step ahead, and say that gtkaml would be valaml and would compile the .valaml into .vala!

//example Vala source
using Gtk;

public class MyWidget : VBox {

private Label label5;
private Notebook notebook1;
private Label label4;
private Label label2;
private CheckButton check_button;
private VBox empty_notebook_page;
private HButtonBox hbuttonbox1;
private Button abort;
private Button button2;
private Button fail;

construct {
label5 = new Label(“Dialog Box Title Here“);
label5.use_markup = true;
this.pack_start(label5, false, false, 0 );

notebook1 = new Notebook();
this.pack_start(notebook1, true, true, 0 );

label4 = new Label(“label\nmultiline”);
notebook1.add( label4 );

label2 = new Label(“Page 1”);
notebook1.set_tab_label( notebook1.get_nth_page(0), label2);

empty_notebook_page = new VBox( false, 0 );
notebook1.add( empty_notebook_page );

check_button = CheckButton.with_label(“check button”);
check_button.active = true;
notebook1.set_tab_label( notebook1.get_nth_page(1), check_button );

hbuttonbox1 = new HButtonBox();
this.pack_start( hbuttonbox1, false, true, 0 );

abort = Button.with_mnemonic(“_Abort”);
abort.can_default = true;
hbuttonbox1.add( abort );

button2 = Button.from_stock(“gtk-redo”);
button2.can_default = true;
hbuttonbox1.add( button2 );

fail = Button.with_mnemonic(“fail”);
fail.can_default = true;
hbuttonbox1.add( fail );
}
}
Long live C!

Advertisements

Written by vlad

November 26, 2007 at 8:51 pm

Posted in ideas

5 Responses

Subscribe to comments with RSS.

  1. Hi,

    wxWidgets c/c++ has XRC which is doing that.

    Please check
    http://wxwidgets.org/manuals/2.6.3/wx_xrcoverview.html#xrcoverview.

    Virgil

    Virgil :-)

    January 8, 2008 at 5:59 pm

  2. Thanks for the pointer:)
    Of course Gtk+ has that too, it’s called Glade. It looks like this:
    <widget class=”GtkMenuBar” id=”mainmenu”>..</widget>

    I see XRC is:
    <object class=”wxMenuBar” name=”mainmenu”>..</object>

    Both look quite verbose compared with e.g. <MenuBar id=”mainmenu”/>

    Both have chosen run-time parsing. “Gtkaml” will be compile-time and you will be able to mix source code within, which is this C#-like language Vala;)

    vlad

    January 9, 2008 at 8:39 am

  3. […] Anyway, in case you don’t know, gtkaml is an XML preprocessor that transforms all your container/widget descriptions into Vala. I proposed myself to build this project some time ago. […]

  4. Well, did you think about using Monodevelop in generating of *.gtkaml?
    It should be quite simple, because:
    1) Vala and C# are quite similar, so it shouldn’t be hard to add Vala support in it.
    2) Reuse stetic. It generates xml-like (or genuine xml) code. It also can write handlers for the signals in the code editor.

    Denis Cheremisov

    March 16, 2008 at 9:24 pm

  5. > Reuse stetic

    That seems an excellent idea. Stetic is mature already – tweaking the underlying format won’t be much trouble.

    I’ll look into it!

    vlad

    March 16, 2008 at 9:56 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: