Make Simple HTML Page from Vala

Lets start with simple scenario. Here is a sample code, which I try to combine JavaScript to call a function contained in a program written in Vala. or some people call it bindings.

We need 3 file. main.vala, index.html, binding file. I made this page still static.

main.vala

using Gtk;
using WebKit;
 
namespace WebKit {
    public extern static unowned JS.Context web_frame_get_global_context (WebFrame frame);
}
 
/**
 * Registers a JavaScript function to a WebView
 */
void register_js_function (WebView webview, string name, JS.Callback callback) {
    var frame = webview.get_main_frame ();
    unowned JS.Context ctx = web_frame_get_global_context (frame);
    unowned JS.Object global = ctx.get_global_object ();
    unowned JS.Object func = ctx.make_function_with_callback (null, callback);
    ctx.set_property (global, new JS.String (name), func);
}
 
 
JS.Value? say_hello_callback () {
    stdout.printf ("Apa kabar dunia!\n");
    return null;
}
 
void main (string[] args) {
    Gtk.init (ref args);
    var window = new Window ();
    window.destroy.connect (Gtk.main_quit);
    var webview = new WebView ();
    register_js_function (webview, "ucapkanHalo", say_hello_callback);
    webview.open ("file:///home/tuanpembual/Documents/Kerjaan/valasample/index.html");
    /* change index.html based on your path */
    window.add (webview);
    window.show_all ();
    Gtk.main ();
}

jscore.vapi

[CCode (lower_case_cprefix = "JS", cheader_filename = "JavaScriptCore/JavaScript.h")]
namespace JS {
     
    [CCode (cname = "JSObjectCallAsFunctionCallback", has_target = false)]
    public delegate JS.Value? Callback (JS.Context context, JS.Object function, JS.Object this_object, [CCode (array_length_pos = 3.9, array_length_type = "size_t")] JS.Value[] arguments, out JS.Value exception);
 
    [Compact]
    [CCode (cname = "struct OpaqueJSContext")]
    public class Context {
        [CCode (cname = "JSContextGetGlobalObject")]
        public unowned JS.Object get_global_object ();
        [CCode (cname = "JSObjectMakeFunctionWithCallback")]
        public unowned JS.Object make_function_with_callback (JS.String? name, JS.Callback call_as_function);
        [CCode (cname = "JSObjectSetProperty")]
        public void set_property (JS.Object object, JS.String property_name, JS.Value value, uint attributes = 0, out JS.Value exception = null);
    }
 
    [Compact]
    [CCode (cname = "struct OpaqueJSValue")]
    public class Value {
    }
 
    [Compact]
    [CCode (cname = "struct OpaqueJSValue")]
    public class Object : JS.Value {
    }
 
    [Compact]
    [CCode (cname = "struct OpaqueJSString", free_function = "JSStringRelease")]
    public class String {
        [CCode (cname = "JSStringCreateWithUTF8CString")]
        public String (string utf8_cstring);
    }
}

index.html

<html>
<head>
    <title>Vala, HTML, dan JavaScript</title>
    <script type="text/javascript">
        function klikHalo() {
            helloword();
        }
    </script>
</head>
<body>
    <h1>Vala, HTML, dan JavaScript</h1>
    <button onClick="helloword();">Say Halo!</button>
</body>
</html>

Next

Compile the third file with the command in konsole:

$ valac main.vala --pkg webkit-1.0 --pkg jscore --vapidir .

Reference :
[0] http://fitraditya.wordpress.com/2012/09/11/vala-html-dan-javascript/
[1] http://www.packtpub.com/article/deploying-html5-applications-gnome (book)

Regard
Tuan Pembual