FDT and Ant Tutorial

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
(Source Files)
 
(14 intermediate revisions not shown)
Line 1: Line 1:
 +
[[File:Ant.png|center]]
Sometimes the build process can get pretty complex. For example, you may create several SWCs, SWFs, have some HTML files to be dynamically updated and files to be copied and uploaded.  In these cases the launcher on it's own won't cut it. This is where Ant comes in.
Sometimes the build process can get pretty complex. For example, you may create several SWCs, SWFs, have some HTML files to be dynamically updated and files to be copied and uploaded.  In these cases the launcher on it's own won't cut it. This is where Ant comes in.
FDT ships with built in Ant tasks for you to use and at the same time, Ant provides a lot of useful tasks already. This intro will help get you acquainted with using FDT and Ant.
FDT ships with built in Ant tasks for you to use and at the same time, Ant provides a lot of useful tasks already. This intro will help get you acquainted with using FDT and Ant.
-
= Getting Started =
+
 
-
Let's begin by downloading the project from the [[Basic AS3 Tutorial]] [http://188.40.67.159/download/wiki_examples/as3_basic_finish.zip here] and then import it. If you're not sure how to import projects see the [[Sharing and Archiving Projects]] tutorial.
+
= <center>Source Files</center> =
 +
[[File:Download_soruce_files.png|center|link=https://github.com/TeamFDT/Examples/blob/master/sample-projects/ant_finish.zip?raw=true]]
 +
 
 +
= <center>Getting Started</center> =
 +
Let's begin by downloading the project from the [[Basic AS3 Tutorial]] and then import it. If you're not sure how to import projects see the [[Sharing and Archiving Projects]] tutorial.
While you don't need to import the project to follow along, it will jump start things for us.
While you don't need to import the project to follow along, it will jump start things for us.
-
=Create Your Build File=
+
=<center>Create Your Build File</center>=
-
With the project open [http://fdt.powerflasher.com/docs/File:09_001.gif], let's begin by creating our ''build'' Ant file. Right click on the project and choose ''new>other…'' [http://fdt.powerflasher.com/docs/File:09_002.gif].
+
With the project open [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_001.gif]], let's begin by creating our ''build'' Ant file. Right click on the project and choose ''new>other…'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_002.gif]].
-
Type ''xml'' in the filter field, choose ''XML'' from the ''XML'' folder and then click ''Next'' [http://fdt.powerflasher.com/docs/File:09_003.gif]. Name the file ''build.xml'' (it can be anything but ''build'' is the standard), save it within the root directory and then click ''Finish'' [http://fdt.powerflasher.com/docs/File:09_004.gif].  
+
Type ''xml'' in the filter field, choose ''XML'' from the ''XML'' folder and then click ''Next'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_003.gif]]. Name the file ''build.xml'' (it can be anything but ''build'' is the standard), save it within the root directory and then click ''Finish'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_004.gif]].  
As of now, the file is a standard .XML file. We can edit the file as is and it will work but it would be immensely helpful if we had the syntax highlighting and auto completion like we have when editing ActionScript files. To do this, we want to make sure FDT opens this file up as an Ant build file.
As of now, the file is a standard .XML file. We can edit the file as is and it will work but it would be immensely helpful if we had the syntax highlighting and auto completion like we have when editing ActionScript files. To do this, we want to make sure FDT opens this file up as an Ant build file.
-
For FDT to recognize this .xml file as an Ant file, all we need to do is to  do is add in this syntax [http://fdt.powerflasher.com/docs/File:09_005.gif]:
+
For FDT to recognize this .xml file as an Ant file, all we need to do is to  do is add in this syntax [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_005.gif]]:
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
Line 27: Line 32:
Close the file and then open it back up within the editor. We need to do this because the first time FDT opened the file, it opened it as a generic .XML file - using the XML Editor. When the file is opened up and the Ant file syntax is recognized, it will open the file with the Ant Editor.
Close the file and then open it back up within the editor. We need to do this because the first time FDT opened the file, it opened it as a generic .XML file - using the XML Editor. When the file is opened up and the Ant file syntax is recognized, it will open the file with the Ant Editor.
-
When the file is opened up again, you will immediately recognize that FDT has detected an error: ''target element appears without a name attribute'' [http://fdt.powerflasher.com/docs/File:09_006.gif].  This is great, FDT now will tell us about syntax errors and any incomplete arguments (attributes) with our tasks.
+
When the file is opened up again, you will immediately recognize that FDT has detected an error: ''target element appears without a name attribute'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_006.gif]].  This is great, FDT now will tell us about syntax errors and any incomplete arguments (attributes) with our tasks.
We also now have code hinting and auto completion.  Move your cursor to the ''target'' task and begin typing ''name'' and then ''Ctrl+Space'' (autocomplete) and the ''name'' attribute will be filled in.  Add a name, let's use ''default'', then save the file to have the errors recalculated in our ''Problems'' view.
We also now have code hinting and auto completion.  Move your cursor to the ''target'' task and begin typing ''name'' and then ''Ctrl+Space'' (autocomplete) and the ''name'' attribute will be filled in.  Add a name, let's use ''default'', then save the file to have the errors recalculated in our ''Problems'' view.
-
=Your First Task: Compiling & JRE Error=
+
=<center>Your First Task: Compiling & JRE Error</center>=
-
Within the ''task'' element, begin typing ''fdt.launch.application'' and use FDT's auto-complete to fill in the remainder of the element [http://fdt.powerflasher.com/docs/File:09_007.gif]. With the element created, add these three attributes to the element: ''projectname'' , ''mainclass'' and ''target''.
+
Within the ''task'' element, begin typing ''fdt.launch.application'' and use FDT's auto-complete to fill in the remainder of the element [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_007.gif]]. With the element created, add these three attributes to the element: ''projectname'' , ''mainclass'' and ''target''.
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
Line 40: Line 45:
-
This is the minimum needed to create a .swf with FDT and Ant. Just like many other tasks in FDT, there are a few different ways to run Ant tasks.  The easiest way is to execute tasks via the ''Ant View''. If the view isn't open already, open it via ''Window>Show View>Ant'' [http://fdt.powerflasher.com/docs/File:09_008.gif]. With the Ant view open, drag the ''build.xml'' file into the ''Ant'' panel [http://fdt.powerflasher.com/docs/File:09_009.gif] and then expand the elements and you'll see how the Ant View's contents match the build.xml file in the Editor [http://fdt.powerflasher.com/docs/File:09_010.gif].
+
This is the minimum needed to create a .SWF with FDT and Ant. Just like many other tasks in FDT, there are a few different ways to run Ant tasks.  The easiest way is to execute tasks via the ''Ant View''. If the view isn't open already, open it via ''Window>Show View>Ant'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_008.gif]]. With the Ant view open, drag the ''build.xml'' file into the ''Ant'' panel [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_009.gif]] and then expand the elements and you'll see how the Ant View's contents match the build.xml file in the Editor [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_010.gif]].
-
To start the build, just select the target ( ''default'' in our case ) within the Ant View [http://fdt.powerflasher.com/docs/File:09_011.gif] and then click the ''Run'' button[http://fdt.powerflasher.com/docs/File:09_012.gif].
+
To start the build, just select the target ( ''default'' in our case ) within the Ant View [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_011.gif]] and then click the ''Run'' button [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_012.gif]].
Immediately we encounter an error:
Immediately we encounter an error:
Line 52: Line 57:
We need to have the Ant build execute within the same JRE as FDT in order to have access to FDT's custom Ant tasks. Otherwise, it will run in a sandboxed environment that doesn't know anything about FDT.  
We need to have the Ant build execute within the same JRE as FDT in order to have access to FDT's custom Ant tasks. Otherwise, it will run in a sandboxed environment that doesn't know anything about FDT.  
-
Fortunately for us, this is a simple fix - from the ''External Tools'' menu choose ''External Tools Configurations'' [http://fdt.powerflasher.com/docs/File:09_013.gif]. With the ''External Tools Configurations'' open [http://fdt.powerflasher.com/docs/File:09_014.gif] navigate to the ''JRE'' tab [http://fdt.powerflasher.com/docs/File:09_015.gif] and check the radio button next to ''Run in the same JRE as the workspace'' [http://fdt.powerflasher.com/docs/File:09_016.gif]. From here we can simply click ''Run'' to have the build execute. [http://fdt.powerflasher.com/docs/File:09_017.gif]
+
Fortunately for us, this is a simple fix - from the ''External Tools'' menu choose ''External Tools Configurations'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_013.gif]]. With the ''External Tools Configurations'' open [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_014.gif]] navigate to the ''JRE'' tab [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_015.gif]] and check the radio button next to ''Run in the same JRE as the workspace'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_016.gif]]. From here we can simply click ''Run'' to have the build execute [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_017.gif]].
-
The build will run and from the output [http://fdt.powerflasher.com/docs/File:09_018.gif] we see that our .swf has been created. The important bit to read is this:
+
The build will run and from the output [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_018.gif]] we see that our .swf has been created. The important bit to read is this:
''[fdt.launch.application] 644 bytes written to file /Users/OSX/_dev/fdt/AS3Project/bin/Main.swf in 2429 ms
''[fdt.launch.application] 644 bytes written to file /Users/OSX/_dev/fdt/AS3Project/bin/Main.swf in 2429 ms
BUILD SUCCESSFUL''
BUILD SUCCESSFUL''
-
=Customizing The Build and Using Multiple Targets=  
+
=<center>Customizing The Build and Using Multiple Targets</center>=  
With the basics down, lets extend our Ant build. It won't be very realistic, but it will demonstrate  ways of extending Ant.  
With the basics down, lets extend our Ant build. It won't be very realistic, but it will demonstrate  ways of extending Ant.  
-
First thing I want to do is give my build a name so it's not referred to as ''project''  and change the name of my target to ''compile''[http://fdt.powerflasher.com/docs/File:09_019.gif].
+
First thing I want to do is give my build a name so it's not referred to as ''project''  and change the name of my target to ''compile'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_019.gif]].
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
Line 76: Line 81:
-
Next, I'll add a task to create a .SWC [http://fdt.powerflasher.com/docs/File:09_020.gif]:
+
Next, I'll add a task to create a .SWC [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_020.gif]]:
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
Line 90: Line 95:
-
Then add some more tasks [http://fdt.powerflasher.com/docs/File:09_021.gif]:
+
Then add some more tasks [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_021.gif]]:
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
Line 116: Line 121:
This is all pretty straight forward.   
This is all pretty straight forward.   
*The new ''browse'' target will launch my browser and navigate it to the ''Main.swf''.
*The new ''browse'' target will launch my browser and navigate it to the ''Main.swf''.
-
* ''zip'' will create a zip file (this task is built into Ant)
+
* ''zip'' will create a zip file (this task is built into Ant).
-
* ''move'' will move files (this task is built into Ant)
+
* ''move'' will move files (this task is built into Ant).
For more info on the built in Ant tasks, check out an [http://ant.apache.org/manual/tasksoverview.htm overview of Ant tasks].  
For more info on the built in Ant tasks, check out an [http://ant.apache.org/manual/tasksoverview.htm overview of Ant tasks].  
-
Last, I'm going to include a ''run.all'' target [http://fdt.powerflasher.com/docs/File:09_022.gif] and then set it as my default [http://fdt.powerflasher.com/docs/File:09_023.gif]:
+
Last, I'm going to include a ''run.all'' target [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_022.gif]] and then set it as my default [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_023.gif]]:
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
Line 129: Line 134:
-
Setting the default task is handy. Running the file from the command line won't need a target argument, double clicking on the build file within the Ant view will run it, and the task in the Ant view is now blue - making it easier to read [http://fdt.powerflasher.com/docs/File:09_024.gif].
+
Setting the default task is handy: running the file from the command line won't need a target argument, double clicking on the build file within the Ant view will run it, and the task in the Ant view is now blue - making it easier to read [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_024.gif]].
-
To run everything, just double click on the Ant build file icon within the Ant view, and all the magic will start [http://fdt.powerflasher.com/docs/File:09_025.gif].
+
To run everything, just double click on the Ant build file icon within the Ant view, and all the magic will start [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:09_025.gif]].
Here is the build file in it's entirety:
Here is the build file in it's entirety:
Line 157: Line 162:
</project>
</project>
</syntaxhighlight>
</syntaxhighlight>
 +
 +
= <center>Wrap Up</center> =
 +
This was just a taste of Ant, and enjoy using it with FDT.

Latest revision as of 12:12, 2 June 2012

Ant.png

Sometimes the build process can get pretty complex. For example, you may create several SWCs, SWFs, have some HTML files to be dynamically updated and files to be copied and uploaded. In these cases the launcher on it's own won't cut it. This is where Ant comes in.

FDT ships with built in Ant tasks for you to use and at the same time, Ant provides a lot of useful tasks already. This intro will help get you acquainted with using FDT and Ant.


Contents

Source Files

Download soruce files.png

Getting Started

Let's begin by downloading the project from the Basic AS3 Tutorial and then import it. If you're not sure how to import projects see the Sharing and Archiving Projects tutorial.

While you don't need to import the project to follow along, it will jump start things for us.

Create Your Build File

With the project open Img preview.png, let's begin by creating our build Ant file. Right click on the project and choose new>other… Img preview.png.

Type xml in the filter field, choose XML from the XML folder and then click Next Img preview.png. Name the file build.xml (it can be anything but build is the standard), save it within the root directory and then click Finish Img preview.png.

As of now, the file is a standard .XML file. We can edit the file as is and it will work but it would be immensely helpful if we had the syntax highlighting and auto completion like we have when editing ActionScript files. To do this, we want to make sure FDT opens this file up as an Ant build file.

For FDT to recognize this .xml file as an Ant file, all we need to do is to do is add in this syntax Img preview.png:

<project>
	<target>
	</target>
</project>


Close the file and then open it back up within the editor. We need to do this because the first time FDT opened the file, it opened it as a generic .XML file - using the XML Editor. When the file is opened up and the Ant file syntax is recognized, it will open the file with the Ant Editor.

When the file is opened up again, you will immediately recognize that FDT has detected an error: target element appears without a name attribute Img preview.png. This is great, FDT now will tell us about syntax errors and any incomplete arguments (attributes) with our tasks.

We also now have code hinting and auto completion. Move your cursor to the target task and begin typing name and then Ctrl+Space (autocomplete) and the name attribute will be filled in. Add a name, let's use default, then save the file to have the errors recalculated in our Problems view.

Your First Task: Compiling & JRE Error

Within the task element, begin typing fdt.launch.application and use FDT's auto-complete to fill in the remainder of the element Img preview.png. With the element created, add these three attributes to the element: projectname , mainclass and target.

<fdt.launch.application projectname="AS3Project" 
    mainclass="src/Main.as" target="bin/Main.swf"/>


This is the minimum needed to create a .SWF with FDT and Ant. Just like many other tasks in FDT, there are a few different ways to run Ant tasks. The easiest way is to execute tasks via the Ant View. If the view isn't open already, open it via Window>Show View>Ant Img preview.png. With the Ant view open, drag the build.xml file into the Ant panel Img preview.png and then expand the elements and you'll see how the Ant View's contents match the build.xml file in the Editor Img preview.png.

To start the build, just select the target ( default in our case ) within the Ant View Img preview.png and then click the Run button Img preview.png.

Immediately we encounter an error:

Problem: failed to create task or type fdt.launch.application

This may seem frustrating at first, but when you understand how Ant, Java, FDT and your operating system work together it makes sense why this happens. By default, development with Eclipse (the platform FDT is built upon) recommends using separate Java Runtime Environments (JRE) when developing and testing applications. That's great for Java developers, but we don't need that type of sand boxing when creating .SWFs.

We need to have the Ant build execute within the same JRE as FDT in order to have access to FDT's custom Ant tasks. Otherwise, it will run in a sandboxed environment that doesn't know anything about FDT.

Fortunately for us, this is a simple fix - from the External Tools menu choose External Tools Configurations Img preview.png. With the External Tools Configurations open Img preview.png navigate to the JRE tab Img preview.png and check the radio button next to Run in the same JRE as the workspace Img preview.png. From here we can simply click Run to have the build execute Img preview.png.

The build will run and from the output Img preview.png we see that our .swf has been created. The important bit to read is this:

[fdt.launch.application] 644 bytes written to file /Users/OSX/_dev/fdt/AS3Project/bin/Main.swf in 2429 ms BUILD SUCCESSFUL

Customizing The Build and Using Multiple Targets

With the basics down, lets extend our Ant build. It won't be very realistic, but it will demonstrate ways of extending Ant.

First thing I want to do is give my build a name so it's not referred to as project and change the name of my target to compile Img preview.png.

<project name="AS3Project Build">
	<target name="compile">
		<fdt.launch.application projectname="AS3Project" 
                     mainclass="src/Main.as" target="bin/Main.swf" />
	</target>
</project>


Next, I'll add a task to create a .SWC Img preview.png:

<project name="AS3Project Build">
	<target name="compile">
		<fdt.launch.application projectname="AS3Project" 
                      mainclass="src/Main.as" target="bin/Main.swf" />
		<fdt.launch.library projectname="AS3Project" target="bin/Main.swc"/>
	</target>
</project>


Then add some more tasks Img preview.png:

<project name="AS3Project Build">
	<target name="compile">
		<fdt.launch.application projectname="AS3Project" 
                      mainclass="src/Main.as" target="bin/Main.swf" />
		<fdt.launch.library projectname="AS3Project" target="bin/Main.swc"/>
	</target>
 
	<target name="browse">
		<fdt.browse location="${basedir}/bin/Main.swf" />
	</target>
 
	<target name="zip">
		<zip destfile="${basedir}/deploy.zip" basedir="${basedir}/bin"/>
		<move file="${basedir}/deploy.zip" todir="${basedir}/deploy" />
	</target>
 
</project>


This is all pretty straight forward.

  • The new browse target will launch my browser and navigate it to the Main.swf.
  • zip will create a zip file (this task is built into Ant).
  • move will move files (this task is built into Ant).

For more info on the built in Ant tasks, check out an overview of Ant tasks.

Last, I'm going to include a run.all target Img preview.png and then set it as my default Img preview.png:

<target name="run.all" depends="compile,browse,zip">
</target>


Setting the default task is handy: running the file from the command line won't need a target argument, double clicking on the build file within the Ant view will run it, and the task in the Ant view is now blue - making it easier to read Img preview.png.

To run everything, just double click on the Ant build file icon within the Ant view, and all the magic will start Img preview.png.

Here is the build file in it's entirety:

<?xml version="1.0" encoding="UTF-8"?>
<project name="AS3Project Build" default="run.all">
	<target name="compile">
		<fdt.launch.application projectname="AS3Project" 
                     mainclass="src/Main.as" target="bin/Main.swf" />
		<fdt.launch.library projectname="AS3Project" target="bin/Main.swc" />
	</target>
 
	<target name="browse">
		<fdt.browse location="${basedir}/bin/Main.swf" />
	</target>
 
	<target name="zip">
		<zip destfile="${basedir}/deploy.zip" basedir="${basedir}/bin" />
		<move file="${basedir}/deploy.zip" todir="${basedir}/deploy" />
	</target>
 
	<target name="run.all" depends="compile,browse,zip">
	</target>
</project>

Wrap Up

This was just a taste of Ant, and enjoy using it with FDT.

Get FDT5