WebUI

So, I figured I’d write something about what I’ve been hacking on occasionally for a couple weeks. It’s a system for quick development of AJAX-y web user interfaces, designed to run on limited-resource systems that don’t have space for a proper scripting language. For readers familiar with what I do at work - yes, this is essentially a replacement for that, though I am using it for a few other little things as well :)

The basic idea is that pages are described very simply in XML, with the logic being handled via callbacks in a C/C++ .so behind the scenes. My current testbench is a page that sends dbus events to control a mediaplayer (for example, so I can use my iPod browser to go to the next video file without having to get up :)).

Its XML looks like:

<page name="page" title="Media Control">
	<form name="form">
		<button name="btnPlay" text="Play/Pause" EVENT_CLICK="MediaCallback" />
		<button name="btnNext" text="Next" EVENT_CLICK="MediaCallback" />
		<button name="btnPrev" text="Prev" EVENT_CLICK="MediaCallback" />
		<button name="btnVolUp" text="Vol+" EVENT_CLICK="MediaCallback" />
		<button name="btnVolDn" text="Vol-" EVENT_CLICK="MediaCallback" />
		<simpletext name="txtVolume" text="Volume: " />
	</form>
</page>

And the corresponding C++ code in the pages shared library:

#include <page_api.h>
CALLBACK MediaCallback(Widget::IWidget *widget, string event){  
	string buttonID = widget->getProperty("name"); //All widgets have a unique 'name' property
	if(buttonID == "btnNext") sendSignal("next", ""); //sendSignal sends dbus events to my media player	
	...	
	getWidget("txtVolume")->setProperty("text", "Volume: " + toString(vol) + "%");
	return true;
}

That’s all there is to it - any modifications made are automatically sent out to the client with no further effort.

The rendered page looks like:

Screenshot-Media Control - Mozilla Firefox

While it looks pretty bland, it’d be fairly easy to make it shinier. I’ll probably make a more complicated (and nicer looking) example tomorrow.

0 Responses to “WebUI”


  1. No Comments
  1. 1 WebTerm at bieh.net

Leave a Reply