Intro To haXe Development With FDT

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
(HaXe Programming Language)
(Installation)
Line 5: Line 5:
= <center>Video</center> =
= <center>Video</center> =
{{#widget:Vimeo|id=42348465|width=600|height=400}}
{{#widget:Vimeo|id=42348465|width=600|height=400}}
-
 
-
= Installation  =
 
-
 
-
To get started with haXe, you'll need to download a few extra add-ons.
 
-
 
-
== Download haXe  ==
 
-
 
-
*Visit [http://haxe.org/download haXe's download page], and download one of the automatic installers for your platform. For this example, we'll be installing haXe for OSX.<br>
 
-
 
-
While installing, the installer may ask you to install ''Neko''. Neko is a language / Virtual Machine platform that comes with the installer. Even if you've never use Neko and haXe together, it may come in handy in the future so go ahead and install that as well.
 
-
 
-
[[Image:Haxe installer.png|center|Haxe installer.png]]
 
-
 
-
When the installer is complete,&nbsp;confirm that the installation of haXe was successful by opening your console and executing the command ''haXe'':
 
-
<div dir="ltr" class="mw-geshi" style="text-align: left;"><div class="bash source-bash"><pre class="de1">haxe</pre></div></div>
 
-
<br> If installed correctly, the console should print out haXe info:
 
-
<div dir="ltr" class="mw-geshi" style="text-align: left;"><div class="bash source-bash"><pre class="de1">OSXs-MacBook:~ OSX$ haxe
 
-
haXe Compiler 2.07 - (c)2005-2011 Motion-Twin
 
-
Usage&nbsp;: haxe -main &lt;class&gt; [-swf|-js|-neko|-php|-cpp|-as3] &lt;output&gt; [options]
 
-
Options&nbsp;:
 
-
  -cp &lt;path&gt;&nbsp;: add a directory to find source files
 
-
  -js &lt;file&gt;&nbsp;: compile code to JavaScript file
 
-
  -swf &lt;file&gt;&nbsp;: compile code to Flash SWF file
 
-
  -as3 &lt;directory&gt;&nbsp;: generate AS3 code into target directory
 
-
  -neko &lt;file&gt;&nbsp;: compile code to Neko Binary
 
-
  -php &lt;directory&gt;&nbsp;: generate PHP code into target directory
 
-
  -cpp &lt;directory&gt;&nbsp;: generate C++ code into target directory
 
-
  -xml &lt;file&gt;&nbsp;: generate XML types description
 
-
  -main &lt;class&gt;&nbsp;: select startup class
 
-
  -lib &lt;library[:version]&gt;&nbsp;: use a haxelib library
 
-
  -D &lt;var&gt;&nbsp;: define a conditional compilation flag
 
-
  -v&nbsp;: turn on verbose mode
 
-
  -debug&nbsp;: add debug informations to the compiled code
 
-
  -help  Display this list of options
 
-
  --help  Display this list of options
 
-
 
-
</pre></div></div>
 
-
If it doesn't - try restarting your computer or reinstalling it again.
 
-
 
-
== Install FDT's haXe Plugin <br>  ==
 
-
 
-
*Before you install the plugin you will need the latest copy of FDT, so you not got it please either update or download, install, setup licence, etc...<br>
 
-
 
-
*Start up FDT 4 and select ''Help&gt;Install new Software''&nbsp; *Select the ''FDT Plugins Site'' update site (If it is not included in your drop down menu, enter: http://fdt.powerflasher.com/plugins in the ''Work with'' text input and hit return)
 
-
 
-
When you install the plugin if drill down into the FDT Plugin you will see two options now
 
-
 
-
*FDT haXe Plugin
 
-
*FDT haXe SDK Feature (Optional)<br>
 
-
 
-
If you have the following error raised during installation, then repeat the install and un-tick the "FDT haXe SDK Feature (Optional)" tick box.<br>
 
-
<pre>An error occurred while installing the items
 
-
 
-
session context was:(profile=epp.package.jee,
 
-
phase=org.eclipse.equinox.internal.provisional.p2.engine.phases.Install,
 
-
operand=null --&gt; [R]com.powerflasher.fdt.haxe.sdk_win 2.7.0,
 
-
action=org.eclipse.equinox.internal.p2.touchpoint.natives.actions.UnzipAction).</pre>
 
-
<br>
 
-
 
-
[[Image:Haxe plugin install new software.png|600px|Haxe plugin install new software.png]]<br>
 
-
 
-
*Select "FDT haXe Plugin" from the plugin list, hit ''Next'' and follow the final installation steps.&nbsp;You will be warned about installing unsigned code, please click OK to override the warning.<br>
 
-
 
-
<br>[[Image:Haxe plugin security warning.png|center|Haxe plugin security warning.png]]<br>
 
-
 
-
*When prompted restart FDT 4<br>
 
-
 
-
<br>[[Image:Haxe plugin software update.png|center|Haxe plugin software update.png]]<br>
 
= Using the FDT HaXe Plugin  =
= Using the FDT HaXe Plugin  =

Revision as of 16:32, 17 May 2012

Contents

About FDT HaXe Support

HaXe is an open source and multiplatform programming language. Developed in collaboration with Powerflasher and supported by Influxis, the FDT haXe plugin provides developers a powerful tool for authoring the haXe multi-platform language. Our goal is to provide the best haXe coding experience and that it feels like coding in the AS2, AS3 or MXML editor of FDT: same shortcuts, same syntax coloring, same coding comfort. 

Video

Using the FDT HaXe Plugin

Before authoring and compiling haXe, you'll need to define the haXe SDK location for FDT to reference.

Setting up the haXe SDK Location

Open FDT's preference widow and navigate to HaXe>SDK and input the installation directory of haXe. If you're not sure where haXe is installed, the installation window will clue you in. Here we can see that the installer is moving files and creating links to /usr/lib/haxe - this is the default location for OSX. After inputing the sdk location, hit OK.

Create Your First haXe Project

All haXe projects now have there own project wizard. Begin by creating an Basic HaXe Project, If you can't see this in the new project menu or don't see new HaXe Classes you will need to goto the Window menu and select the "Reset Perspective" option and they will appear.


Empty haxe project wizard 1.png

During the process of creating a HaXe Project you will be able to select the HaXe SDK just for this project by "Enabling project specific settings".

Empty haxe project wizard 2.png

Then finally you can configure the target output of your HaXe Project for creating the basis of our HaXe project configuration (HXML), In this case we creating a flash project.

Empty haxe project wizard 3.png

Convert Project To A HaXe Project

With your first class created, right click on the project and select Add HaXe Project Nature. When this happens, FDT will ask you to input some project variables. We already have configured our HaXe SDK Location so just hit Next.

Let's leave the haXe configuration file to the default location but modify the Output Path to bin/Main.swf. When completed, FDT will have created a few extra files and folders for us. We don't need to worry about .hxtypes but we use project.hxml to set configurations to our project. We can also see that FDT has begun to parse our project for syntax errors.

Adjust Compiler Settings

Before writing some code, let's alter some compiler options - this is done via the project.hxml file. Open us the file by double clicking on it, you will see a page similar to image below. You can click on the source tag at the bottom if you prefer to edit it manually.

Haxe compilation settings.png

Compiling and Viewing your .SWF

Adding HaXe Code

The syntax of haXe is a bit beyond the scope of this tutorial - but that doesn't mean we have to code something boring! Copy and paste the code below to make a simple animation Img preview.png. Or type in the the code yourself to begin exploring the syntax auto completion FDT provides.


package ;
import flash.display.Sprite;
import flash.events.Event;
 
class Main{
	static var view:Sprite;
	static var x: Float = 0;
	static var y: Float = 200;
	static var speed :Float = 20;
	static var max_x : Float = 550;
 
    static function main() {
		 new Main();    
    }
 
    function new(){
    	view = new Sprite();
    	flash.Lib.current.addChild (view);
    	flash.Lib.current.stage.addEventListener(Event.ENTER_FRAME, update_view);
    }
 
    function update_view (e: Dynamic){
    	view.graphics.clear();
    	view.graphics.beginFill(0xff0000, 1);
    	view.graphics.drawCircle(x, y, 50);
 
    	if(is_invalid_x()) speed  = speed * -1;
    	x+= speed;
    }
 
    function  is_invalid_x() : Bool {
    	return x > max_x || x < 0;
    }
}

Compiling HaXe

For the time being, FDT will automatically attempt to compile your .SWF every time you save it. If there are no errors in your project, your .SWF will appear in your project older. If it doesn't appear, try refreshing your project.

View Your SWF

You can view your SWF with FDT by selecting Run As > SWF File. You can also use Ant Scripts with your HaXe Project but for more in depth know-how on using Ant, check out the FDT and Ant Tutorial.

(Note: If you get an error while tying to run the Ant file, it's probably a JRE error, check out the FDT and Ant Tutorial to learn how to correct it.)

Wrap Up

That's it, you've successfully set up your first FDT haXe Flash project!

As this plugin is still a beta release, please bare with us! For any feedback, feature requests, improvements, bugs and other issues we encourage you to use PowerFlasher JIRA site, our community driven tracking website, to make the haXe support in FDT the greatest ever.

Get FDT5