haXe : Adding a display object

Well, in our last tutorial we have already written a fair entry point to any haXe application. Now lets see how we will add a custom display object to our project.
A new display object class is written as below and saved as “VisualBox.hx”.

import flash.display.Sprite;
class VisualBox extends Sprite
{
	public function new()
	{
		super();
		trace(this);
	}

}

Since this is a visual class, it will extend a display object and thats what we are doing already. Nice and fine, but one thing to remember is, we have write a method named “new()” in order for that display object constructor. Then the “super()” call is necessary as for any display object.
Now lets see how are Main.hx looks now.

package;
import flash.Lib;

class Main {
	public static function main() {
		trace("Hello From FDT haXe !");
		new Main();
	}
	public function new(){
		var vb:VisualBox=new VisualBox();
		Lib.current.addChild(vb);
	}
}

Here is something happening! First if we have to add something to the current stage, we have to get it as “Lib.current”. Since we are using Flash for output, the path looks as “flash.Lib.current”. We have already imported flash.Lib, so we just have to access it as “Lib.current”.
Another thing to note is that, since Main.hx and the “VisualBox.hx” are on the same package, the package definition for “VisualBox” is omited from the file. Just look at the code above and see that “VisualBox” is not nested inside another package definition!
Happy haXe ing!

some cool haXe IDE

Well developing in a language without a specific IDE for itself might be too much for a beginner. Fortunately we have some very cool and nice IDEs available for us.
1. FlashDevelop (Based on SciTE)
2. FDT5 (Based on Eclipse)

While both these IDEs are free, FlashDevelop is windows only. But I am surely in love with FlashDevelop. FDT is good but being on Eclipse, it takes up a lot of memory, on the other hand FDT runs on all platforms. So choose your weapons and get ready to haXe it all.

haXe basics

The bare bone basic of haXe language is one must need an Entry point to the Application. This could be any class, but then one must specify the entry point function, which is “main()” , the signature of function looks like

public static function main() {}

Constructors in HAXE are written as “new()” as below

class GameStage
{
 public function new(){}
}

the package declaration ends with a semicolon (unlike any other major laguages, it does not contain curly braces)

package com.saumya.haxe.helloWorld;
class GameStage
{
	public function new() {}
}

If you are extending an display object, then “super” must be called from the constructor. It snot optional, its mandatory.
Every line of code must end with “;” semicolon, again this is mandatory not optional.
Every class file is saved with “.hx” extension.
The haxe compiler file is saved with “.hxml” extension.
The NME compiler file is saved as “.nmml” extension.
A typical “.hxml: file looks as

-swf bin/swf/inTheBigBrain_as3_FP10.swf
-main Main
-swf-header 800:600:30:000000
-cp src

Similarly to compile from NME, you have to create a “.nmml” file.
A typical “.nmml” file description is here.

for compiling a .hxml file, you fire up the following command,

haxe test.hxml

Have a look at the detailed options.

To compile a nmml file, you have to fire up one of these commands. But the very basic is

haxelib run nme test my.nmml flash

The detailed options are here.

Hope that gives you the very basics of the language.

haXe

What is it all about ? Well its all about another language. Not really, if you know ECMA script like javascript or actionscript, haXe is just another home. It does not hurt to learn the simplicity of the language. That does not mean, its not capable! The capability of this language is, it compiles to a lot of platforms! Are you serious?! Yeah, you heard it right. It compiles to almost all the platforms we have now. Starting from AVM1 and AVM2 swfs to native windows, mac, linux applications.
The simplicity of a scripting language and the robustness of C, the best of both worlds! Awesome. For a quick overview of all the platforms, head over to the official page here.
Now haXe comes with a lot of libraries on top of the basic language, which makes it even interesting. And one of the such libraries is NME. After working in NME for a week, I am not kind of addicted to it. It simply allows the code to be compiled to HTML5 and iDevices like iPhone/iPad. The complete list of supported devices are listed here in the official page.
Hope that should already have been making you interested in haXe.

If you still need to see some hands on coding and examples, join me this sunday, where I am doing a workshop on haXe and NME for flash developers.
Happy haXe -ing.

December with a new beginning !

Well, after a continuous month of learning and posting about javascript and canvas, I am up for a new learning. And this time its haXe with NME. Yeah, the excitement is tremendous and I can not explain in words about what I got in last few days. HAXE is truly a life saver in many occasion.
As I will go on on my study of the language and the compiling options I am planning to post it here.
So let the party begin.

haXe : Compiling to javascript

After all these tutorials in pure javascript, lets see is there is any other help from any where for our javascript programming. The best thing to happen is haXe. If you have not heard about it yet, haXe is a language on its own! But why I need to learn another language?! Well, there is not much difference in javascript and haXe. As you have already seen, inside javascript also we have different libraries and we need to learn them to use them, lets look at haXe, for now, as another library (which is obviously not). Now, you will be amazed to know that after you know haXe and start writing on haXe, your code can be compiled to whole lot of different languages including C++,PHP and javascript.
First of all one need to download and install haXe. The installation is quite straight forward and the help at its own website is quite nice. I do not think you will get stuck there, but if it is, please drop me a line here or best is ask in their forum.
The hello world application for javascript I am writing here is straight out of haXe documentation. I am just putting it here for I got stuck at the compiling time and want you to get going in haXe without ever stopping anywhere.
I hope by this time, you have installed haXe on your machine. Lets write our first haxe class.

package ;
class Main 
{
	public static function main() 
	{
		trace('Hello');
	}
}

The purpose is to show a message we passed in “trace” function. We will write an HTML file to use the javascript file compiled from the above haXe code. Now save the above in a file with a name say “Main.hx”. Yep, “.hx” is the native HAXE extension. Suppose we are going to save the generated javascript file inside the “js” folder and with name “my.js”. Lets say that our HTML file is named as “HelloWorld.html”. So the folder structure looks as below.

src
   Main.hx
bin
HelloWorld.js
   js
     my.js

So our “Main.hx” is on “src” folder and all our generated code is inside “bin” folder. The generated javascript is inside “js” folder, which is inside “bin” folder. You may be asking, where are the javascript and html files?! Well, we have decide the structure of our application first and now we will move on and create those files in necessary folder. First lets see the HTML file code, which is as below.

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

Basically we need a div element with id “haxe:trace”, so that all our “trace()” function calls in our “.hx” file will be written inside this div . We are ready for action now. All we need is to compile our haXe code to javascript.

Open command prompt (terminal in Mac) and move to the src folder, where we have stored our “.hx” file. Now write the code below in the terminal and press enter.

haxe -main Main.hx -js ../bin/js/my.js

Now go inside “bin/js/” folder and you will be amazed to see our “my.js” file is created there. Open the html file in a browser to see the result of it. The “Hello” we typed in trace is now written to the HTML page div tag. Sweet, is not it!
Suppose we want an real alert, a javascript alert, then modify the haxe code as below.

package ;
class Main 
{
	public static function main() 
	{
		js.Lib.alert('Hello World');
	}
}

Next process, I hope you know already :) . Compile it in HAXE compiler as below to generate the JS file with the modified code. This means fire up the command prompt and put the same command as we did before, which is as below.

  haxe -main Main.hx -js ../bin/js/my.js

Now open the same html file in the browser again to see the alert message.
Yeehaa :) we got a nice javascript code generated from haXe.

Here is the source files with comments in it for you to play with.

Happy haXeing :)

HTML5 : Canvas with mouse interaction.

Here we are going to study about the creation of Canvas dynamically and the basic mouse interactivity with the Canvas elements.

The source files for this example is here for you to download and play.

We are going to use a separate sprite sheet and try to make the scene a little more interesting than the last one. I would say to download the source files and see the example for yourself to see what is it doing. Basically there is a scene on the background with 6 tables and a girl doing some experiment on third table. Towards the left top corner of the scene, there is another girl trying to do some magic with its magic wand. If you look at the code, the scene with the girl doing experiment is a straight forward drawing from the sprite sheet as we did that in last tutorial. The girl with the magic wand is drawn in a dynamically created Canvas. The code looks as below.

//creating canvas dynamically
canvasGirl=document.createElement('canvas'); 
canvasGirl.width=100; 
canvasGirl.height=100;
//get the context
contextGirl=canvasGirl.getContext('2d');
//customise canvas
canvasGirl.style.background='transparent';
canvasGirl.style.zIndex=5;
//add the canvas to the document
document.body.appendChild(canvasGirl);

The first thing is to create a new canvas with “createElement(‘canvas’)”. That will make a new canvas. Now we have to get the context to draw something on it. This is done with “getContext(’2d’)” as usual, nothing new here. And lastly, we have to add our newly created Canvas to the document and this is done with “document.body.appendChild(canvasGirl);” code. Thats beautiful. Everything else in the code is just configuring the canvas.
Once the canvas and context are available to us, we can do anything we are able to do to a Canvas. So the girl with the magic wand is drawn to the context of this Canvas element. The code looks as below.

resetContext(canvasGirl,contextGirl);
contextGirl.drawImage(photo, 108*counter+10, 900, 96, 64, 0, 0, 96, 64);

First we are resetting the Canvas, so as to draw new content on each timer. Since the girl with magic wand is actually an animation, we call the code above repeatedly on a timer event. And first we clear the context with our own function and then redraw an image from sprite sheet at the same place on the canvas, so as to make an animation. If you are following along with the previous tutorials then the reseting of context code should not be new to you, else the code looks as as below.

resetContext=function(canvasRef,contextRef){
	contextRef.clearRect(0,0,canvasRef.width,canvasRef.height);
};

All we have, are two layers of drawing and animation drawn from the same sprite sheet.
Lets do some mouse interactivity with these elements. The code looks as below.

//------------ adding mouse interaction --------------
$('#board_one').mouseup(function() {
  	alert('Canvas with Tables');
});
$(canvasGirl).mouseup(function() {
  	alert('Canvas with Girl, doing magic.');
});

The trick here is JQuery’s neat job. Just remember anything wrapped with $() will give a JQuery element of the same HTML element. So our dynamically created Canvas is made an JQuery element by

$(canvasGirl)

Notice that there is no ‘#’ before the name as it is before ‘board_one’, thats for the ‘board_one’ we are referring the HTML element with id ‘board_one’, while the other one we are creating dynamically in javascript and converting it to a JQuery equivalent.
Thats nice and if you have not done yet, please go ahead and click on the board to get an alert showing different message and if you click on the girl with magic wand, that will alert a different message.
This is quite simple and straight forward interactivity, but I think you got the point.
Happy coding :)

And yes, I made it to one month of continuous posting, highly influenced by Keith Peters. Though it was not all javascript and I missed some dates, but all in all, the number of posts in a month is achieved. I am quite happy about my effort and a big thanks to all of you, who read it.

javascript : Inheritence by prototype

Once we got the basic information and know how, of the “prototype” property of a constructor object, we need some code to test it. So here is another all in one page test for the “prototype” property.
We have 3 constructors and then the prototype property of the constructors are defined as another object. Basically, if 3 constructors namely A,B,C are present, prototype of A is defined as an object created by “new B()”, prototype of B is defined as an object created by “new C()”. There are 4 different properties in all the objects. But the relationship is now as below

A.prototype is new B(); 
B.prototype is new C()
//so the relation is as below
A -> B -> C

That means, “prototype” allows us to make a relation between the objects. We will see that in a moment. Now all the properties of all the objects can be accessed through the object created by “new A()”.
If you have not yet opened the all in one page test for this example, open it now. And click the buttons to see the properties accessed from one Object.

var ClassA=(function(){
	//------define-------
	var a,b,c,d,getA,getB,getC,getD,numberToBeAdded;
	//------configure------
	a='Property a';
	b=500;
	c='Property c';
	d='Property d';
	//numberToBeAdded=100;//prototype object can not access this property, instead the local property will be used
	this.numberToBeAdded=100;//With the use of "this" now its exposed to be accesed from its prototype object
	//------expose-------
	this.getA=function(){
		return a;
	}
	this.getB=function(){
		return b;
	}
	this.getC=function(){
		return c;
	}
	this.getD=function(){
		return d;
	}
	//
	/*
	this.getSum=function(userNumber){
		return userNumber+numberToBeAdded;
	}
	*/
});
//
var ClassB=(function(){
	//------define-------
	var e,f,g,h,getE,getF,getG,getH;
	//------configure------
	e='Property e';
	f=9;
	g='Property g';
	h='Property h';
	//numberToBeAdded=200;
	//------expose-------
	this.getE=function(){
		return e;
	}
	this.getF=function(){
		return f;
	}
	this.getG=function(){
		return g;
	}
	this.getH=function(){
		return h;
	}
	//
	/*
	this.getSum=function(userNumber){
		return userNumber+numberToBeAdded;
	}
	*/
});
//
var ClassC=(function(){
	//------define-------
	var i,j,k,l,getI,getJ,getK,getL,getSum,numberToBeAdded;
	//------configure------
	i='Property i';
	j=300;
	k='Property k';
	l='Property l';
	numberToBeAdded=300;//"this" exposes this number to be overriden by the object which will prototype ClassC(or this class)
	//------expose-------
	this.getI=function(){
		return i;
	}
	this.getJ=function(){
		return j;
	}
	this.getK=function(){
		return k;
	}
	this.getL=function(){
		return l;
	}
	//
	this.getSum=function(userNumber){
		//return userNumber+numberToBeAdded;
		return userNumber+this.numberToBeAdded;//using "this" will override the local property and use the property of the object which would be using this object as a prototype
	}
});

The code to use the prototype is defined as

//makes the object
var objC=new ClassC();
//makes the prototype magic
ClassB.prototype=objC;
ClassB.constructor=ClassB;
//makes the object
var objB=new ClassB();
//objB.constructor.prototype=objC;
//makes the prototype magic
ClassA.prototype=objB;
ClassA.constructor=ClassA;
var objA=new ClassA();

So how it works?!! This magic is simply possible by “prototype”. For example, if we are trying to access one property in an object created by “new A()” and the property is not present in the Object, then javascript engine will look for the property in the “prototype” object of “new A()” and that in our case is an object created by “new B()” and if the property is not found in it, it will search in the prototype property object defined for this object, that is in our case is an object created by “new C()”.

The code below shows, how we are accessing properties from the prototype object through the single object.

//calling own method
objA.getA();
//calling B's method
objA.getE();
//calling C's method
objA.getJ();

If you go through the code here, you must see that there is the use of the key word “this”. This is simply kind of saying that this property is accessible from outside. In Java or Actionscript kind of languages, its known as “public” variables. Remember that, whatever variables need to be exposed to outside, must be defined with the keyword “this”. Going through the code again will show you that, some properties are just defined with “var”, while some other are defined with “this”. Remember, “this” always points to the current object.

Now with these knowledge, we can very well override or reassign values to our objects, which are defined in the prototype object. That means, if some properties are defined in our “prototype” object and they are exposed or public variables, then we can again define the same variables in our Object and our object variables will be used for calculations. This is very interesting and sometimes get some time to understand too. Again, coming back to code, we have a function in our “prototype” object which adds some numeric value to another given number. Both the actual object and “prototype” object have got the value, which needs to be added. But if the prototype value is exposed with “this” then only the value inside function, which calls this variable with “this” will take actual value from the object not the value from the prototype! Thats because, “this” always refers to the current object.

Here is the source code for this example.

Hope that helps someone. Would love to listen comments, suggestions and insights, as I am still learning it.