Intro To haXe Development With FDT

From FDT Documentation

Revision as of 16:52, 10 May 2011 by J.jackson (Talk | contribs)
Jump to: navigation, search

Contents

About the FDT HaXe Plugin

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. 

Plugin Status : Public Beta

Here’s a feature overview:

  • Live error checking
  • Autocompletion (variables and functions)
  • Syntax coloring
  • Code editing features
  • Open Type
  • New Class/Interface/Enum wizards
  • HaXe Project Wizard

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.

We also suggest anyone anyone interested in haXe developement to subscribe to the haXe mailing list. It's a very active group with smart people and interesting topics.

On the behalf of the FDT Team and Influxis, we hope you are as excited as we are and enjoy the FDT haXe plugin. You can follow our development progress on Twitter @FDThaXe


Additional Plugin Features

Here are additional built-in features of the plugin.

  • Setup an SWF output in your HXML. When it builds, right click on the SWF and select Run As > SWF File.
  • Setup a JS output. Right click on the generated JS file and select Run As > JavaScript in browser or Run As > Node.JS server (NB: needs Node.JS installed, and the project needs to include the haxe/node library from bdog-node on github).
  • Compile haxe to C++. Right click on the generated executable and select Run As > Native Executable (you have to do "haxelib setup ; haxelib install hxcpp" for this to work).
  • Compile to Neko. Right click on the generated neko file and select Run As > Neko VM

With all of these you can also go into the Run Configurations and customise the launch parameters, e.g. choosing a different type of Player for SWFs.

HaXe Programming Language

haXe (pronounced hex) is a versatile open-source high-level programming language. The code can be produced entirely within the haXe development environment by using a single and unmodified code-base when compiling from one target to the next. Compared to most other languages are bound to their own platform (Java to the JVM, C# to .Net, ActionScript to the Flash Player), haXe is a multi-platform language.

To learn more and get the latest info on using haXe and the platforms it targets, check out the haXe's Introduciton

HaXe has a highly active developer community mailing list which is well worth joining: 
lists.motion-twin.com/mailman/listinfo/haxe

HaXe supported targets

  • Javascript : You can compile a haXe program to a single .js file. You can access the typed browser DOM APIs with autocompletion support, and all the dependencies will be resolved at compilation time.
  • Flash : You can compile a haXe program to a .swf file. haXe is compatible with Flash Players 6 to 10, with either "old" Flash 8 API or newest AS3/Flash9+ API. haXe offers very good performance and language features to develop Flash content.
  • NekoVM : You can compile a haXe program to NekoVM bytecode. This can be used for server-side programming such as dynamic webpages (using mod_neko for Apache) and also for command-line or desktop applications, since NekoVM can be embedded and extended with some other DLL.
  • PHP : You can compile a haXe program to .php files. This will enable you to use a high level strictly-typed language such as haXe while keeping full compatibility with your existing server platform and libraries.
  • C++ : You can now generate C++ code from your haXe source code, with the required Makefiles. This is very useful for creating native applications, for instance in iPhone development.


Why use haXe?

haXe is a powerful modern language with many compelling features. It is aimed at giving developers a tool to create websites & applications using a single unified programming language. Whether you use haXe for its cross-platform features, or focus on a single platform, there are many reasons to adopt it:

  • ECMA style programming for client-side, server-side & desktop: The haXe syntax should be very familiar to those familiar with ActionScript and JavaScript. As it offers multiple targets (virtual machines and outputs) it can be used for a huge variety of applications.
  • Extremely fast compiling: The compiler is lightning fast. When compared to the Flash or Flex compilers, you will find a noticeable speed increase. Since compile time is so short haXe is an easy transition from non-compiled languages such as PHP and JavaScript.
  • The benefits of type checking: HaXe offers very tight type checking. Having compile-time checks in place allows you to catch errors in your code BEFORE testing it in the browser. This allows for a faster workflow for dynamically typed targets such as PHP and JavaScript.
  • HaXe adds missing language features to target platforms: HaXe has been created out of a desire for better features and tools for web-oriented development. It adds missing features to many of the targets - eg. inlining & generics to Flash development, packages & typing to JavaScript & PHP, dynamic objects & Runtime Type Information (enabling Reflection) to C++, and much more. Adding features to targets where they are lacking enables a haXe developer to have the same rich set of features available for use on ALL platforms that they want to target.
  • Elegant Remoting between platforms: You can use remoting classes to pass objects between different platforms. Using the same codebase for different platforms means that the same classes can be compiled for many platforms. This allows for successful de-serialization making the remoting elegant and fast.
  • A single syntax & features: Programming practices can often be achieved on different platforms, just with different syntax and quirks. By having a consistent syntax and feature set, there's no need to constantly switch into different programming 'modes'. This allows a developer greater focus on the logic and final output, which can greatly enhance productivity.
  • Conditional compilation - Write for one target and use on many: Code may be tailored for a single target platform, or designed for many platforms. For instance tween classes can be used in ActionScript, JavaScript and C++. Code logic can be transferred to the most suitable target in the platform with few changes, so if front-end code is running too slow, you can quickly move and test the same code running on the back-end
  • Access to many file formats: The format library (hosted on googlecode) can read/write many formats such as 'abc' (ActionScript Byte Code), SWF headers & more. These libraries are crossplatform making it accessible for many targets.
  • Compiler based auto-completion
    HaXe provides a compiler based auto-completion system which allows IDEs to integrate completion on many otherwise hard to predict objects, such as those using type inference. This makes haXe auto-completion fast and accurate.
  • Open Source: In addition to being free, haXe is open source and provides installers for OSX, Windows, and Unix based operating systems. There are no base library requirements for the compiler, and a good deal of functionality is already provided with the haXe libraries.


Haxelib (Open source code repository)

haXe is distributed with haxelib, a tool which enables developers to share their code and libraries into a common repository. Before you can use haxelib you have to go through a easy setup:

Access the lib.haxe.org website to view all the libraries available. More information can be found on the HaXe website and how to add new projects to HaXeLib: haxe.org/doc/haxelib/using_haxelib


  • Using haxelib : haxelib is a commandline tool, so you need to run it from a console. The following commands are available:
  • haxelib search word : will list the projects which have either a name or description matching specified word.
  • haxelib info project-name : will give you information about a given project
  • haxelib install project-name [version] : will install the given project. You can optionally specify a specific version to be installed. By default, latest released version will be installed.
  • haxelib remove project-name [version] : will remove a complete project or only a specified version if specified.
  • haxelib list : will list all the installed projects and their versions. For each project, the version surrounded by brackets is the current one.
  • haxelib upgrade : will upgrade all the installed projects to their latest version. This command prompts a confirmation for each upgradeable project.
  • haxelib set project-name version : this will change the current version for a given project. The version must be already installed.
  • haxelib run project-name [arguments...] : this will run the given project if it provides a run script. Be careful to trust the project you are running since the script can damage your system.

 

Installation

To get started with haXe, you'll need to download a few extra add-ons.

Download haXe

  • Visit haXe's download page, and download one of the automatic installers for your platform. For this example, we'll be installing haXe for OSX.

Haxe installer download.png

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.

Haxe installer.png

When the installer is complete, confirm that the installation of haXe was successful by opening your console and executing the command haXe:

haxe


If installed correctly, the console should print out haXe info:

OSXs-MacBook:~ OSX$ haxe
haXe Compiler 2.07 - (c)2005-2011 Motion-Twin
 Usage : haxe -main <class> [-swf|-js|-neko|-php|-cpp|-as3] <output> [options]
 Options :
  -cp <path> : add a directory to find source files
  -js <file> : compile code to JavaScript file
  -swf <file> : compile code to Flash SWF file
  -as3 <directory> : generate AS3 code into target directory
  -neko <file> : compile code to Neko Binary
  -php <directory> : generate PHP code into target directory
  -cpp <directory> : generate C++ code into target directory
  -xml <file> : generate XML types description
  -main <class> : select startup class
  -lib <library[:version]> : use a haxelib library
  -D <var> : define a conditional compilation flag
  -v : turn on verbose mode
  -debug : add debug informations to the compiled code
  -help  Display this list of options
  --help  Display this list of options

If it doesn't - try restarting your computer or reinstalling it again.

Install FDT's haXe Plugin

  • Before you install the plugin you will need the latest copy of FDT (currently 4.3.1), so you not got it please either update or download, install, setup licence, etc...
  • Start up FDT 4 and select Help>Install new Software  *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)

If you have the following error raised during installation, then repeat the install and un-tick the "FDT haXe SDK Feature (Optional)" tick box.

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 --> [R]com.powerflasher.fdt.haxe.sdk_win 2.7.0, 
action=org.eclipse.equinox.internal.p2.touchpoint.natives.actions.UnzipAction).


Haxe plugin install new software.png

  • Select "FDT haXe Plugin" from the plugin list, hit Next and follow the final installation steps. You will be warned about installing unsigned code, please click OK to override the warning.

Haxe plugin security warning.png

  • When prompted restart FDT 4

Haxe plugin software update.png

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 begin with a Flash Project base and then are converted to a haXe project. Begin by creating an Empty AS3 Project Img preview.png and then create a new HaXe class by right clicking on src and choosing Other Img preview.png. When the wizard pops up choose HaXe Class Img preview.png and give the class the name Main and hit Finish Img preview.png.

Convert Project To A haXe Project

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

Let's leave the haXe configuration file to the default location but modify the Output Path to bin/Main.swf Img preview.png. 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 Img preview.png. We can also see that FDT has begun to parse our project for syntax errors Img preview.png.

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 Img preview.png.


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

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 bin folder Img preview.png. If it doesn't appear, try refreshing your project Img preview.png.

View Your SWF

As this FDT plugin is still in it's early stages, there are no launch configurations to automatically view your .SWF - but we can make a simple Ant script to view our .SWF! We'll quickly go over a simple script to view our .SWF but for more in depth know-how on using Ant, check out the FDT and Ant Tutorial.

Create a new Ant script by beginning with a simple XML file by right clicking on the project and choosing new>other Img preview.png and then select an XML file to create Img preview.png and hit Finish. Give the script any name you like, this one is called view_swf.xml and hit Finish Img preview.png.

Next, copy the code below to have FDT launch the external .SWF viewer Img preview.png:

<span class="sc3"><span class="re1"><project<span class="re2">></span></span></span> <span class="sc3"><span class="re1"><target</span> <span class="re0">name</span>=<span class="st0">"view.swf"</span><span class="re2">></span></span> <span class="sc3"><span class="re1"><fdt.extSWFViewer.startSWF</span> <span class="re0">width</span>=<span class="st0">"550"</span> <span class="re0">height</span>=<span class="st0">"400"</span></span> <span class="sc3">                     <span class="re0">file</span>=<span class="st0">"${basedir}/bin/Main.swf"</span><span class="re2">/></span></span> <span class="sc3"><span class="re1"></target<span class="re2">></span></span></span> <span class="sc3"><span class="re1"></project<span class="re2">></span></span></span>


Then, drag your .XML file to the Ant view Img preview.png and double click the target to launch Img preview.png. You will then see a red ball moving back and forth on the screen.

  • 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!

Get FDT5