Robert Bak – Notes

Some programming tips – updated sometimes

Getting started with Haxe for JavaScript

Software used

We’re going to use FlashDevelop to create the first JavaScript project. After running FD, create a new project (which is not done under the ”File” menu, but it’s own top level one).

At the bottom of the window you can find Haxe project types, choose the “JS Project”, give it a name and optionally a package (which will help organizing the code), click “OK”, and you’re done.


The main generated file should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package learning;

import js.Lib;

/**
* ...
* @author
*/


class Main
{
   static function main()
   {

   }
}

Here’s what’s happening in the code:
line 1 The package also shows the directory the file can be found in. Remember to put a semicolon after the package.
line 3 Because this is a JavaScript project a helper class (http://haxe.org/api/js/lib) has been imported, giving us easy access to some basic JS functions and objects.
lines 5-8 A multiline comment
lines 10-16 Here our base class is being declared, with the default name “Main”. Inside you can see a single static function called “main”. This is the function which will be automatically executed after the program loads. For now it doesn’t do anything.

You can already run this program by pressing “F5”. It should open a blank page in your default browser.

Now we’re going to add some code to make sure it does something. Let’s use a static function from the Lib class. Once you type Lib. FlashDevelop will show you the list of functions and properties available with some info about each one. If you select alert and press “Enter” it will autocomplete the name of the selected function.

Let’s use alert and display some text, the line should read Lib.alert("Hello world from Haxe!"); (again, don’t forget the semicolon).

If you run the program again (pressing ”F5” or selecting ”Project->Test Project” menu) you should see a standard pop-up:

It works, but what’s exactly happening here?

First the compiler takes your Haxe code, and generates a single ”. js” file from it, you can find it in the ”bin” folder of the project.

That file is being used in the ”index.html”, which was auto-generated by FlashDevelop when you created the project. If you open that file you’ll see that it’s mostly boilerplate HTML with two Haxe related lines:

<div id="haxe:trace"></div>
<script src="MyFirstHaxeProject.js"></script>

The second one imports the generated JavaScript code, but what does that ”div” do? That’s the place in which Haxe will output the results of it’s trace statements, which you can use to easily debug your applications.

If you replace the Lib.alert line with trace("Hello world from Haxe!"); and run the program now you’ll see that it outputs Main.hx:15: Hello world from Haxe! which is both the text you wanted, but also the exact file and line from which it came, very useful when debugging.

To be continued….

If you want to find out more check out this presentation slides from @fintanb: http://fboyle.com/presentations/haxejs/

,

Leave a Reply

Your email address will not be published. Required fields are marked *