Introducing The WBEA AsterClick Desktop Component

The AsterClick Desktop Component allows you to deploy your AsterClick HTML5 applications as stand alone desktop applications on both Windows and Linux.

Just some of the benefits include...
  • As with all of the AsterClick project it's Open Source!
  • Securing your HTML5 related code from prying eyes.
  • Not having to wait for all browsers to be equally HTML5 compliant.
  • The ability to incorporate unique serial numbers, access codes, etc.
  • Having a common code base deployed to multiple contexts and platforms.
  • The extra credability a full blown desktop application can convey
  • A truly predictable client behavior
  • Based upon the same engine as the Google Chrome browser.
  • Zero cost for your development tools (Google Chrome and a Text Editor)
You can find out more about the CEF open source tools used to create WBEA at the following links.



The WBEA AsterClick Desktop Deployment Kit


A great deal of effort has been taken to make the WBEA Pronounced "W" as in "www" AsterClick Desktop Deployment Kit simple and painless to use, and consists of only four files...
wbea.exe
This component is designed with the idea that you'll rename it to something more appropriate to your application, and is actually the executable you would distribute to your users. This design feature also allows you to have multiple WBEA type applications without having to worry about conflicts.
libcef.dll , icudt42.dll
These are supporting .DLL's from the open source CEF (Chromium Embedding Framework ) project which basically encapsulates a Google Chrome browser engine.
encrypt.exe
This tool allows you to encrypt your application's HTML5 related materials prior to deployment and is used to produce a file with the same stem as your application name. As mentioned above this naming mechanism is so that you can have multiple WBEA desktop applications without them conflicting with each other.



Setting up your WBEA development environment


We kept the spirit of keeping things as simple as possible when working out the WBEA development environment, so it really is just these basic steps that are required to get started.
  1. Create a directory somewhere to hold your project
  2. Copy the libcef.dll , icudt42.dll and of course wbea.exe files to that directory
  3. If your developing on a Linux machine, make sure to set wbea.exe permissions to allow execution
  4. Create a sub directory named wbea (this is where wher eHTML5 application lives) Your HTML5 application must include an index.html as that is how WBEA decides where to start it's execution.

That's basically all there is to it!

Now you can simply use and your favorite text editor to design and test your application. Any time you want to see how it runs in WBEA simply click on the wbea.exe and try it.




WBEA Application deployment.


So now you've created your really cool AsterClick HTML5 application and your ready to deploy it!
The deployment process is pretty easy and only takes a few steps.
  1. In the top level directory of your project (where the wbea.exe is ),create a standard .zip file with the same base name as whatever you might have renamed the wbea.exe executable to.
  2. Add the contents of your wbea sub directory to the newly created zip file.




WBEA Application encryption (OPTIONAL).


For many of us, everything is all about being "open source", but there are indeed times when that might not be the most practical thing to do, so the WBEA executable includes encryption support, and your WBEA kit includes a small utility ( encrypt.exe ) that will externally encrypt the .zip file containing your AsterClick HTML5 application.

The WBEA application will automatically detect the encryption if present and decrypt the .zip file into memory, thus securing your HTML5 related code from prying eyes.

To encrypt your WBEA zip file package simply enter the falling command at the shell.
encrypt.exe source.zip destination.zip
If instead of using the default pre-built wbea.exe you've compiled one from scratch with a different interanal encryption key then the syntax would be.
encrypt.exe source.zip destination.zip secretpassword



WBEA Javascript language extensions



Because your AsterClick HTML5 application's are indeed running as desktop application, we've tossed in a couple of predefined javascript objects whose functionality affords some basic interactions with the application window.

Javascript extension for exiting the application

It just seemed like a good idea to be able to close the application from within javascript so to that end , here is how you do it in WBEA.
app.exit();


Javascript extension for adding and responding to application menubar items

Since most desktop applications have a menubar, we figured that some folks might want to add their own menubar items from within their application's javascript.
// menu command event handler var onmenuselected = function (id) { var handled = true; switch (id) { case 1 : alert('Open menu item selected'); break; case 3 : wbea.exit(); break; default : alert('menu selected: ' + id); handled = false; }; return handled; }; // create the Menu object and set menu command event handler var menu = new wbea.Menu(onmenuselected); // add first top level menu item "File" var fileMenuId = menu.insertMenuItem(0, 0, "File"); // add sub menu items to the top level "File" menu item if (fileMenuId != 0) { // insert some menu items menu.insertMenuItem( fileMenuId, 1, "Open" ); menu.insertMenuItem( fileMenuId, 2, "Save" ); menu.insertMenuSeparator( fileMenuId ); menu.insertMenuItem( fileMenuId, 3, "Exit" ); } // add a second top level menu item "Edit" var editMenuId = menu.insertMenuItem(0, 0, "Edit"); // add sub menu items to the top level "Edit" menu item if (editMenuId != 0) { menu.insertMenuItem( editMenuId, 4, "Undo" ); menu.insertMenuItem( editMenuId, 5, "Redo" ); }
Displaying an Application level popup message box

We thought it worth while to let folks pop up a native message box so this is how that is done.
// Show native message box: wbea.messageBox('Greetings from JS!', 'Title', app.ui.MB_OK);





WBEA binaries | WBEA source

The WBEA tool is ready for Alpha testing and we have a first pass at the documentation above. Those interested in learning more about the WBEA AsterClick Desktop Component, or wanting to use it for development are encouraged to visit the forums and post a message forums..