Desktop applications with Haxe and Waxe – part 2: Hello Waxe!

Posted on May 19, 2012

2


Ok, now that we we have a working Haxe/NME/Waxe installation that lets us compile the  waxe samples, we can start building a Hello Waxe application from scratch!

Somewhere on your hard drive, create a directory and name it – say – “hellowaxe”. In that directory, create a new haxe class file with the name HelloWaxe.hx with the following code:

import wx.Frame;

class HelloWaxe {
    public function new() {
        var frame:Frame = ApplicationMain.frame;
    }

    static public function main() {
        new HelloWaxe();
    }
}

As you can see, it’s very basic – it includes just what’s needed to display an empty window.

Now, we have to give NME the right instructions about our project. For that we create an xml file named HelloWaxe.nmml with the following content:

<?xml version="1.0" encoding="utf-8"?>
<project>
<app
file="HelloWaxe"
title="HelloWaxe"
package="test.hellowaxe.neko"
version="1.0"
company="waxe"
main="HelloWaxe"
/>

<window
width="600"
height="400"
orientation="landscape"
fps="24"
background="0xffffff"
resizeable="true"
hardware="true"
/>

<haxelib name="waxe" />

<ndll name="waxe" haxelib="waxe" />
<ndll name="std" />
<ndll name="zlib" />
<ndll name="regexp" />

</project>

Time for a first compilation! Open a command prompt in your hellowaxe directory, and write the following:

> haxelib run nme test HelloWaxe.nmml neko

A bin/neko/windows/bin/HelloWaxe.exe should be created  and run, displaying nothing but an empty window:

So, let’s add our greeting message!

Instead of adding it to the boring dark gray background (wich is perfectly possible), we begin with creating a standard panel (wx.Panel) that we can populate. Then we add our message using a StaticText field (wx.StaticText)  the following way:


import wx.Frame;
import wx.Panel;
import wx.StaticText;

class HelloWaxe {

    public function new() {
        var frame = ApplicationMain.frame;
        var panel = Panel.create(frame);
        var staticText = StaticText.create(panel, null, 'Hello Waxe!', {x:20, y: 10});
    }

    static public function main() {
        new HelloWaxe();
    }
}

When we compile, the following “application” should be created and displayed:

Please note that the panel and the label both are created using handy factory methods taking the parent as the first parameter. The panel is created with the frame as its parent, and the staticText is created with the panel as its parent.

Also note the extra parameters used for the staticText label:

var staticText= StaticText.create(panel, null, 'Hello Waxe!', {x:20, y: 10});

The third parameter is the default text and the fourth parameter is a Position typedef with x and y fields that’s defined in Windows.hx:

typedef Position = { x:Int, y:Int };

Adding some interaction

Now time for some action! A button for quitting our application, wouldn’t that be great? We can create one by adding the following in our HelloWaxe new() constructor method:

var btnQuit = Button.create(panel, null, 'Quit', { x:500, y:320 } );

If you compile and run, you will see it but nothing will happen when pressing it. We have to add a method handler for the button onClick event:

        btnQuit.onClick = function(_) { 
            trace('Someone clicked me!');
            wx.App.quit();
        }

Now, clicking the Quit button calls the wx.App.quit() method that does what it takes to exit the application.

Bye bye for now!

About these ads
Posted in: Haxe, Waxe