Create rich HTML5 and CSS3 interfaces for desktop applications

The problem

First up, I’d like to state that I’m both a programmer and a designer. I have no problem coding an application or designing a website for that matter.
Now, the thing is.. the web technology today makes it possible to create rich and interactive user interfaces using HTML5, CSS3 and Javascript.

Now, I wanted to create rich and interactive user interfaces in desktop application too, and I thought that WPF would be an answer to that.
I guess I was wrong,  WPF is needlessly complex and very unintuitive to work with. You actually have to write a dozen lines of code to create a button that doesn’t look too horrible.

Don’t take it the wrong way. WPF is great, but not for designing user interfaces. So I pretty much gave up on creating rich UI’s for desktop applications.

The Solution

I stumbled upon Awesomium, a web-browser framework based on Chromium/WebKit. With it, you can render HTML5 and CSS3 and even use Javascript!
It’s all very simple. All you have to do is  create your GUI in HTML/CSS using your favorite tools and then render the GUI on the desktop application.

Let’s start simple

I’m using WPF in all the examples below. Don’t worry, it’s all just basic WPF.

So how does it work?

Let me quickly explain how we’ll work.

  1. Design your GUI using your favourite tools.

    This is what my design looks like.

  2. Code your design using HTML and CSS (HTML5 and CSS3 supported!)
  3. Add JavaScript code to interface with your GUI.
    Example:

    function updateUploadProgress(progressInPercent){ ... }
function updateTitle(title){ ... }
  4. Make the desktop application listen to a specific JavaScript call. 
    webcontrol.SetObjectCallback("guiController", "login", onLoginCall);

private void onLoginCall(object sender, JSCallbackEventArgs e)
{
     var arg1 = e.Arguments[0].ToString();
     var arg2 = e.Arguments[1].ToString();

     ...
}
  5. Retrieve the parameters of the JavaScript call and do something with them in your application.
  6. Update the GUI if needed by calling one of the functions (See step 3) that interface with the GUI.

And that’s basically all you have to do to create a working desktop application using Awesomium.

I will probably write a little tutorial later on how to use Awesomium in-depth. Stay tuned for more!

On a side-note: I’ve added the project to my Github.
https://github.com/MichielDeMey/Savezone

Michiel De Mey

Full-time geek, Full Stack Engineer and Full Metal Hero. NodeJs, AngularJs, API design, WebSockets, WebSec & IoT enthusiast. Former San Francisco resident.

More Posts - Website - Twitter - Facebook - LinkedIn - Google Plus