Updated: October 19th, 2010

Archive for the ‘JavaScript’ Category

Debugging ActionScript and JavaScript simultaneously with Flash Builder 4 and Aptana Studio.

iconOctober 19th, 2010 icon3 Comments

Flash or Flex applications commonly interact with JavaScript to enable browser specific functionality. Debugging a single application’s ActionScript and JavaScript is often done within different debugging environments. Different environments often make it difficult to setup and run simultaneous debug sessions for the AVM and JavaScript VM. This post shows how to debug an application’s ActionScript and JavaScript simultaneously within Flash Builder using Aptana’s JavaScript debugger. Post details will include where to get and install Aptana Studio, how to configure a Flex project for JavaScript debugging, and steps for launching a simultaneous ActionScript/JavaScript debugging session.

As ActionScript developers spend a large amount of time within Flash Builder, a JavaScript debugging solution that has similar features, user interface, and workflow is an ideal solution. Aptana Studio is a great web development environment that is built on the same Eclipse base that Flash Builder uses. Because of the common base debugging JavaScript with Aptana’s debugger is nearly identical to debugging ActionScript with Flash Builder’s debugger. To follow the steps in this post, Flash Builder must have Aptana Studio installed as an Eclipse plug-in. Aptana Studio can be found on Aptana’s download page. The Eclipse Plug-In Version should be installed. Steps to install the version will appear after clicking the “Download Aptana Studio 2″ link on the download page.

Before going into the steps to set up a simultaneous debugging session, a few details should be mentioned.

Simultaneous ActionScript/JavaScript debugging can be broken down into the following steps.

  1. Flash debugger configuration. To configure the ActionScript debugger select Run > Debug > Other… from the menu bar. Under the Web Application icon select the Flash project that requires simultaneous debugging. In the URL or path to launch field, ensure the Use default check box is deselected and enter “/” into the field. This ensures that the Flash debugger won’t automatically launch the Flash instance when a Flash debugging session is initialized. This is opposite to the normal technique of Flash debugging, but becomes important later on and is key to the technique described here.

    Flash debugger configurationFlash debugger configuration within Flash Builder.

  2. JavaScript debugger configuration. To configure the JavaScript debugger select Run > Debug > Other… from the menu bar. Under the Web Browser icon select the Firefox – Internal Server configuration. Under the Start Action section ensure the Specific page radio button is selected and the value of the Specific page field contains a relative path to the application entry point. The root of the path should be based on the root of the project being debugged. Under the Server section ensure the Use base URL radio button is selected and the value of the Use base URL field is an absolute path to the folder on the web server that is hosting the project files.

    JavaScript debugger configurationJavaScript debugger configuration from Aptana Studio.

  3. Launch Flash debug session. Open the Debug Configurations panel of Flash Builder, select the debug configuration specified in step 1, and press the Debug button. As there is a nonexistent path to launch specified in step 1, the debugger will wait until a Flash instance has been started before creating a connection to the debugger. There is a time out set by Flash Builder that closes the Flash debug session if a Flash instance isn’t started quickly enough. This is important information for the next step.

  4. Launch JavaScript debug session. In the Debug Configurations panel, select the debug configuration specified in step 2, and press the Debug button. The time out mentioned in the previous step is important. Launching the JavaScript debug session also initializes the Flash instance that connects to the Flash debugger that was started in step 3. Time spent launching the JavaScript debug session, or time spent inspecting JavaScript breakpoints before the Flash instance is started should be minimized to avoid triggering the Flash debugger time out.

    JavaScript debugging sessionJavaScript debugging session with simultaneous ActionScript debugging session running.

  5. Success! Successful completion of steps 1 through 4 should yield a simultaneous ActionScript/JavaScript debugging session. Clicking on the [Web Application] and [Web Browser] threads will determine the log visible in the console panel. Variables are specific to the breakpoint that is activated. If an ActionScript breakpoint is set, the variables are specific to the AVM. JavaScript breakpoints list JavaScript variables in the variable panel. Breakpoints for both ActionScript and JavaScript files are listed in the breakpoints panel. Closing the browser window will terminate both the ActionScript and JavaScript debugging sessions.

    ActionScript breakpointActionScript breakpoint with stack trace and variable list.

    JavaScript breakpointJavaScript breakpoint with stack trace and variable list.

  6. Troubleshooting. Due to the number of steps, it can be difficult to setup a simultaneous AVM and JavaScript VM debugging session. It’s good practice to test both ActionScript and JavaScript debugging sessions on their own to ensure they work individually before attempting to run them simultaneously. The time sensitivity of step 4 can cause problems. If the Flash debugger time out has been triggered, restart at step 2. Finally, the Aptana debugger often won’t connect if Firefox is already open when launching a new debug session. For this reason it’s smart to quit Firefox completely before starting a new debugging session.

    Debug session terminatedBoth ActionScript and JavaScript debug sessions terminate after the browser window is closed.

Unit testing Flash panels within the Flash authoring environment using FlexUnit 4 and Flash Builder.

iconJuly 1st, 2010 icon2 Comments

For a recent project of mine I created an ActionScript 3.0 API for JSFL. The API is used as a communication layer between a Flash panel (built in Flex), and the JSFL interpreter in the Flash authoring environment. What follows is an explanation of how to execute unit tests in the Flash authoring environment, verify the results in Flash Builder, and uses the ActionScript 3.0 JSFL API as an example.

To ensure the robustness of my project I wrote a number of unit tests for my model, and other key pieces of the application including the JSFL API. As it was built using Flex 4, the unit testing features of Flash Builder came in handy. There was cause for concern however, as JSFL only runs within the interpreter in the Flash authoring environment, unit tests for the ActionScript 3.0 JSFL API would not work in the browser, or standalone runtime, because the API wouldn’t have access to the JSFL interpreter. Fortunately, with Flash Builder, and FlexUnit 4 there’s a way to write and execute unit tests in Flash Builder while testing them in the Flash authoring environment. Below are step-by-step instructions on how to run unit tests in the Flash authoring environment. The steps are written for those that have a basic level of understanding of how to create and run a custom Flash panel in the Flash authoring environment.

How to run tests within the Flash authoring environment.

  1. In the project settings of the Flash Builder project with the unit tests, modify the output folder in the Actionscript Build Path to the WindowSWF directory of your local installation of the Flash authoring environment.
    On a Mac:
    /Users/{username}/Library/Application Support/Adobe/Flash CS5/en/Configuration/WindowSWF/
    On a PC:
    \Documents and Settings\{username}\Local Settings\Application Data\Adobe\Flash CS5\en\Configuration\WindowSWF\
  2. The bin-debug directory will now link to the above directory on your local system.
  3. In the run dialogue of Flash Builder, run “FlexUnit Tests.” Ignore the results. This step is to make sure that the FlexUnitApplication.swf has been compiled.
  4. Restart, or open Flash. This step makes sure that Flash recognizes the new FlexUnitApplication WindowSWF.
  5. In the Flash menu bar select Window > Other Panels > FlexUnitApplication. This loads and executes the test runner within the Flash authoring environment.
  6. To see the results of the tests, view the FlexUnit Results panel within Flash Builder. The test runner passes the test results from the Flash authoring environment to Flash Builder in the same way as it would if the test runner was executed in a browser, or standalone version of the Flash player.
  7. When adding or modifying tests repeat step 3, completely close the FlexUnitApplication panel by clicking the close button in the top right of the panel, then repeat steps 5, and 6. It’s not necessary to restart Flash everytime you add or modify a test.

The above steps work in Flash CS5. For Flash CS4, I created an ActionScript only Flash Builder project that was run as a Flash panel. The Flash panel was used as a container for the test runner SWF and would re-load the test runner SWF file each time the Flash panel was clicked. Using the container panel made it easier to rerun tests after modifying or adding to the test suite.

The Author

Johannes Tacskovics
ECMAScript Developer

Portrait of Johannes Tacskovics

On front-end software engineering this is the blog of Johannes Tacskovics, a Los Angeles based ECMAScript Developer. This blog is focused on object oriented software development for the web.

Article Categories

Article Archives