Case Studies

Back to -Tutorials -Amethyst Tutorials -Case Studies

Debugging Into The Flex SDK

Using the tools of Amethyst to find and debug a Flex 4 issue

A user on our forums noticed an odd problem when running a Flex 4 application created in Amethyst. When an Alert dialog was displayed its button showed the label “null” rather than the expected “OK”. Since Amethyst doesn’t do anything to mess around with Alert dialogs (it passes your application code, unmodified, to the Adobe compiler) this was a bit baffling.

We decided to use Amethyst to track down and fix the problem. Using Amethyst’s debugging and IntelliSense tools we found it within a few minutes. Here I’ll show you how we did so. This article provides a real-life ‘case study’ to illustrate how Amethyst’s tools can be used to track down problems in your own code - even if the root of the problem is buried deep inside the Flex SDK.

What You Will Learn

- Creating Multi-project solutions
- Importing a Flex SDK
- The Amethyst ‘Cylon’ debugger
- Go To Definition and Find All References
- Internationalization using locales
- Adding compiler options

First Create The Problem

First create a Flex 4 application in Amethyst.

- Select: File/New/Project
- Click Amethyst/Flex 4 Application, name the project and create a new solution...

- Now Click the Design button at the bottom of the code editor
- Drag on a Button from the Amethyst Spark page of the Toolbox

- Double-click the button to create an event-handler
- Inside the event-handler method, Enter Al and...
- ...(making sure the All page of the completion list is displayed), select Alert

Tip: The completion list will only appear if the Show completion list after character is typed option is set in Tools/Options/Text Editor/ActionScript/IntelliSense. You may, however, force the display of a completion list at any time by pressing CTRL+Space.

When you select a class (such as Alert) from a completion list, its import will be added automatically. We want the Alert to display “hello world” when the button is clicked.

- Edit your code file to match the following:

import mx.events.*;
import flash.events.*;
import mx.controls.Alert;

[Amethyst(designer)]
private function button1_click (event:flash.events.MouseEvent):void {
     Alert.show( "hello world" );
}

- Now press CTRL-F5 or click Debug/Start Without Debugging. The program will build and run.

Tip: We are running the program in the Flash Player. You may launch either in a Flash Player or in a Browser. To change the launch settings for the current project, select Project/Properties/Launch Settings. To set the default for all future projects, select Tools/Options/Projects and Solutions/Amethyst and choose a Flash Player or Web Browser and set ‘Use Flash Player on launch’ to true or false.

This is what we see when we click the button in the running application. The Alert dialog pops up and its button shows null rather than the expected OK...

Tracking Down The Problem

We decided to use Amethyst’s ‘Cylon’ debugger to see what is going on when an Alert dialog is shown in Flex 4. This meant that we needed to be able to debug into the Flex 4 SDK. Here I’ll explain how to do this.

First, we need to add the Flex 4 SDK for debugging and IntelliSense...

- Right-click the application project node (here named AlertTest) and select Add Library Project...

- In the ‘Add Library’ dialog, make sure Create Framework SDK library is selected.
- Click the Finish button

Assuming you have the Flex 4 SDK installed on disk, this will now add some new projects (the SDK source code) to the current Solution and will add ‘project reference’ nodes to the ‘References’ section of your Application. Project reference nodes are blue to differentiate them from the grey nodes of standard references....

A dialog pops up to inform you when the SDK library has been imported.

Now we wanted to find the code of Alert.show(). This is easily done...

- Right-click the show() method and select Go To Definition

This takes us to the show() method in the file, Alert.as, in the code of the Flex 4 SDK. Here we see that various tests are made for the defaultButtonFlag whose default value should, in principle, be set by a numerical constant called Alert.OK. So, let’s see where else Alert.OK occurs in the Flex SDK.

- Select the OK constant, right-click and choose Find All References

Amethyst now searches the Flex SDK for any references to Alert.OK and the results are displayed in a window...

We double-click the references to view the code. Line 192 of the file, AlertForm.as looks interesting. This is part of the createChildren() method which tests something called buttonFlags and sets the button label accordingly....

if (buttonFlags & Alert.OK)

OK, so now we have enough information to start debugging.

- Click the left-margin on line 192 of AlertForm.as to place a breakpoint

- Press F5 or select Debug/Start Debugging

Note: Be sure you have Adobe’s ‘debug version’ of the Flash Player installed. This is required in order to pass debugging information to the Amethyst ‘Cylon’ debugger.

- When the application loads, click the button

The breakpoint will now be hit.

- You can now use the Amethyst debugger to (for example)...

  • Hover over the buttonFlags variable - this shows that its value is 4 which matches Alert.OK.
  • Select and drag label, Alert.okLabel and defaultButtonFlag from the code editor into a Watch window
  • Double-click items in the call stack to navigate back through the call stack

- Press F10 twice to step through the code
- On line 195 (the call to createButton()), press F11 to step into that method
- Press F10 a few more times to step through this method
- Hover over button.label - you will see that it shows “null”

- Press SHIFT+F11 to step out of the current method (createButton()) and return to the calling code (createChildren()). Sure enough the Watch window shows that the button label is still “null”.

Let’s see where this okLabel is set.

- On line 195 of AlertForm.as, right-click okLabel and Find All References.

This locates a setter function in Alert.as. This references resourceManager.getString(). We could carry on debugging but I think this is the clue we need. Flex 4 makes lots of use of international ‘locale resources’ to support different languages. These take the form of groups of SWC files in subdirectories of the SDK. On my PC, these directories are found at: C:\flex4_sdk\frameworks\locale.

It looks as though the Alert button assumes I am going to build my application for a specific ‘locale’. As I haven’t done so, instead of defaulting to “OK”, the Alert button label defaults to “null”. Well, that’s easy to fix.

- Stop debugging. Press SHIFT-F5 or select Debug/Stop Debugging
- Select Project/Properties or right-click your application node in the Solution Explorer and select Properties

Note: Be sure to select the properties that apply to the application (my application is called AlertTest rather than to one of the Flex SDK Framework projects!

- Select the Compiler page.

- Make sure that the Configuration name on the Properties page matches the Configuration name used when building the project (shown above, in the VS toolbar)
- In Additional compiler arguments add a ‘locale’ and the path to the Flex 4 locale resources. These may vary depending on the language you wish to support and the location of your Flex 4 SDK. These are the settings I use...

Tip: Instead of adding the path to ’additional compiler arguments’ you may add the path in the Library Paths tab. Browse to select the SWC Folder containing the ’locale’ SWCs then click ’Add SWC Folder’.

In short, then, it seems that if no specific locale is set, the button label defaults to “null”. To make it display “OK” you need to specify a locale. So add this (or another locale) in the Project/Properties / Additional Compiler arguments...

- Save your settings (File/Save All)
- Press F5 to run and debug
- Click the button
- When the breakpoint is hit this is what I now see (the label is set to “OK”)...

- Press F5 to continue running. And the proof of the pudding...

Tip: You can set other locales in a similar way by editing the compiler options. For example, to French...

-locale fr_FR
-library-path+="C:\flex4_sdk\frameworks\locale\fr_FR"

... or Chinese:

-locale zh_CN
-library-path+="C:\flex4_sdk\frameworks\locale\zh_CN"

So, that gives you a quick overview of a few simple techniques which we used to track down and fix a problem using Amethyst. Be sure to use the full toolset of Amethyst Professional to track down and fix problems in your own projects...

Bookmark and Share   Keywords:  Amethyst  debugger  tutorial
© SapphireSteel Software 2014