<gunua:Flex>

Generating HTML wrapper using ant script

Posted by Dexterous

on November 18, 2008

Further to my post of compiling flex projects using Ant script, in this post I am going to tell that how you can generate the html wrapper file for the swf that is compiled using Ant.

If you haven’t read that post I request you to read it by clicking here.

In order to generate the html wrapper through Ant, we need to add only one extra tag, that is the “html-wrapper” tag, within the target tag in the Ant script.

In this tag, we have to define few important things like the title of the application (also shown in the browser title), the SWF name, the width and height of the swf object, and a few other things like the minimum version of flash player that is required to run the swf correctly.

in order to add this tag to the previous example, first we will declare a few more properties, following is what I added:

Next is that we need to add the html-wrapper tag, note that this tag should be added within the existing target tag if you want to generate the swf and the html at the same time, else you can make a different target only for generating the wrapper.

Here is how my html-wrapper tag looks like:

<html-wrapper title="${APP_TITLE}" file="index.html"
            application="app" swf="Main" width="${APP_WIDTH}"
            height="${APP_HEIGHT}" version-major="${version.major}"
            version-minor="${version.minor}" version-revision="${version.revision}"
            template="express-installation"
            output="${DEPLOY_DIR}" />

Note that I am using the properties that I defined above within this tag as attributes. It is also important to note that the swf attribute contains the name of the swf without the extension(.swf). After adding this much to my already existing build.xml, following is how my entire build.xml looks like:

And that’s it, now this build.xml is ready to be run as an Ant build. To run it, right click and select – Run As – Ant build, and it will generate the following files in the output directory:

AC_OETags.js
index.html
Main.swf
playerProductInstall.swf

Launch index.html to run the application.

ANT, Examples

Recover deleted files

Posted by Dexterous

on October 8, 2008

Did you Accidentally delete a file?
And now want to restore it?

No Problem! You can restore it from the ‘Local History’.

To restore a file from local history, right click on a folder or a project in the Navigation view, and from the context menu, select "Restore from Local History…"

Upon selecting this, Flex builder will open up a dialog where in you can select which file(s) you want to restore. When you select a file which you want to restore, from the right hand side ‘Local History’ of the file, you can also specify which version you want to restore.
Not only this, you can also see the contents of the file.

Do you want to try it yourself?

Before you actually delete a file for testing this, It is important to note that this feature is not a disk recovery tool, it cannot recover files that are NOT in the local history.
By default, flex builder will keep files for 7 days (from the date it was last edited)
To configure the local history preferences, please open the preferences dialog (Window > Preferences) and navigate to General > Workspace > Local History.

So Now if you want to test this feature, delete a file which you have edited recently (Because only then it will have a local history)

Note: This is a feature of Eclipse. Since Flex builder is built on Eclipse, this feature is also available with Flex builder.

flex builder

Compare/Replace with older version of resources using the Local History

Posted by Dexterous

on October 7, 2008

Want to revert back to a version of a file as it was two days back?
Cannot figure out on what is changed today?
Want to know what did your colleague change in your code?

And you are not using any source control?

Do not worry, Flex builder is taking care of the "Local History".

To compare with a previous version of the same resource, do the following:

In the Navigation View, right click on the resource that you want to compare with an older version of the same resource (a.k.a. local history)

From the context menu, point to ‘Compare With’ and select ‘Local History…’

If any local history exists for that resource, then the Flex builder will open up the history view with all the saved local "Historical" versions of the same resource. It will also show you the timestamp of the revision times.

To compare the current version with a local history version, you can double click on a time stamp in the history view. Alternatively, you can also right click a version from the history view and select ‘Compare Current with Local’

Flex builder will show a Text Compare screen (as shown above) which you can use to compare the two files.

The toolbar on the text compare window can be used for:

Copying changes from history to local (You can do it selectively or all at once)
Navigating between the differences and changes

Tip: You can also open the History view from Windows > Other View… > Team > History.
And then you can simply drag and drop resources from the navigator to the history view to see the local history.

The History view does not refresh when you select a different resource in the Navigator, to refresh the History, click on the refresh icon on the History window toolbar.

You can also link the History view with the Navigator and the Editor by clicking on the link icon.

Note: By default Flex builder will keep a maximum of 50 entries per file for the past 7 days where the maximum file size must not exceed 1 Mb. If you want to configure these preferences, Open the ‘Preferences’ window and navigate to the following page:
General > Workspace > Local History

flex builder

Using Ant to compile Flex Projects

Posted by Dexterous

on October 6, 2008

In this post I am going to explain to you that how you can use Ant to compile your flex projects using the Flex Builder 3.

To know about how to enable the support for Ant in Flex Builder please click here

Step 1 - Create a new Flex project

Ok, so first we will create a new flex project and then will create a really simple mxml application. Here is what I created

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Label text="Hello World!"/>
</mx:Application>

So now my entire project is having only one mxml application, which is located under the src folder.

Step 2 - Keep the FlexTasks.jar file inside your project directory

The FlexTasks.jar file can be found at the following location on your machine:
[Flex Builder Install directory]\sdks\3.0.0\ant\lib

Copy the jar file (flexTasks.jar) from there and place it under the libs folder inside your flex project.

Step 3 - Create build.xml file

Under the root folder of your project, create new file using the File -> New… -> File menu.
name this file as ‘build.xml’

Step 4 - Define the project in the build.xml

Add the following inside your empty build.xml file:

<?xml version="1.0" encoding="utf-8"?>
<project name="My App Builder" basedir=".">
</project>

This defines the name of the project and sets the base directory as the root directory of the project

Step 5 - Add the taskdef tag

Inside the project tag, add the following tag:

This node defines that where is the flexTasks.jar located.
Note that we are using a classpath which is relative to the base directory which we defined in the previous step. In my project I have placed this jar under the libs folder. If you wish to keep your flexTasks.jar file elsewhere, you must give the appropriate path here.

Step 6 - Adding the properties

In this example we are going to define only three main properties, namely, FLEX_HOME, APP_ROOT, and DEPLOY_DIR, in which we are going to define the paths containing the Flex frameworks directory, the directory which our application is residing, and, directory where the output will be placed, respectively. Here is how these properties tag look:

Note: Modify the value of the FLEX_HOME accordingly if your installation path of Flex builder 3 is different.

At this point of time, your build.xml should look like the following:

Step 7 - Adding the target

Now we will add the target node as following, below the properties:

This target name can be anything that you prefer. It is just a name that we are assigning to a target that can be executed using Ant.

Now, within this target, we will add the necessary properties for compiling using the mxmlc node, which looks like following:

In these nodes we are specifying the following four things:

The name and location of the application file, using the file attribute of mxmlc node
The name and location of the output swf file, using the output attribute of the mxmlc node
The file name and location of the flex-config,xml file
The source path to flex frameworks directory using the path-element attribute and source-path node

Note that we are using the properties that we defined in step 6

And that’s it. This script can now compile the application. This how my final build.xml looks:

Step 8 - Run As Ant Build

Save the build.xml file.

Right click on the build.xml file and from the context menu point to ‘Run As’ and select ‘Ant Build’

And you should see the messages from Ant Build in the console window. After it says that build is successful, you can open the output directory and launch the swf file.

Further Reading – Generating the html wrapper using Ant

ANT, flex builder

Generating HTML wrapper using ant script

Recover deleted files

Compare/Replace with older version of resources using the Local History

Using Ant to compile Flex Projects

Recent Posts

Advertisement

Recent Comments

Categories

Archives