JavaScript WebEngine

Wouldn't it be cool if you could run Javascript applications like normal desktop applications, where each app has its own window and where Window Management and Composition is handled for you, and where events are passed easier and with better cross browser support. Well this is what I've been trying to achieve with my WebEngine project.

All that is needed is an xml file containing the location of the Javascript file, the initially executed function and a few other optional fields such as description. (There is an IconUrl tag as in the future applications will be launched from the cloud desktop)

Paint.js

Paint.png

Paint

load_init

Within the Javascript file for your app all you need to do if have the initially called function have the variable uID passed to it - this is the globally unique identifier for your application that the composition engine associates with the application.

function HelloWorld(uID) {

}

The first thing you need to go is get the HTML 5 canvas element thats been created as the graphics layer for your application, you can resize the canvas and it will resize the application window when the composition engine next renders.

function HelloWorld(uID) {

// Store the canvas and its 2d context

hw_canvas = wec_GetCanvas(uID);

// Resize the window

hw_canvas.width = 300;

hw_canvas.height = 120;

}

Hooking up events is as simple as passing the applications uID and the event handler function, all the backend hookup and cross browser work is done for you.

// Hook up some events

wec_HookMouseDown(uID, hw_MouseDown);

...

function hw_MouseDown() {

alert("The Mouse has been Pressed");

}

Event information can be retrieved by the following:

var evt = wec_GetLastEvent(uID);

The event contains properties of the time of the event, mouse position(relative to the window), keys pressed etc.

In the coming version there will be a common widget library so it will be even easier to quickly make powerful Javascript applications that run on the framework.