the blog
Back to -Blog

Adobe Flex IDE, Amethyst Beta 2

New Beta includes IntelliSense
by Huw Collingbourne
Friday 16 January 2009.

The second beta of Amethyst, SapphireSteel Software’s new Visual Studio IDE for Adobe Flex is now available from the Amethyst Download Page.

This release has Flex IntelliSense, including syntax-sensitive code completion for both the ActionScript programming language and MXML formatting code. It also provides code completion for import statements and keywords. As we have previously announced, we shall release Amethyst in two editions: the free Personal Edition will include code completion for ActionScript; however, some IntelliSense features may be provided in the ‘Professional’ edition only. The current beta includes elements from both editions.


In order to follow this tutorial you must have Amethyst and the Flex SDK installed. For more information see:
- A Brief Guide to Amethyst
- Read the release notes, README.html, supplied with the software!


Here is a very brief walkthrough to let you try out a few features of beta 2’s IntelliSense:

- First create a Flex Project...

Select: File, New, Project. Click the Amethyst branch in the New Project dialog and select the Flex Application icon. Optionally browse to a target directory and click OK. A very simple MXML application file will now be created.

- Add a Control in MXML

Go to the end of the closing </mx:Script> tag and press Enter to create a blank line. On this line enter:

<mx:Bu

The mx:Button item will be highlighted in the completion list. Double-click with the mouse or press Tab to select it.

Note: The Enter key may optionally be used as a selector key - see the IntelliSense Options for ActionScript and MXML in Tools, Options, Text Editor.

The current line in the editor should now look like this...

<mx:Button

Press the Space bar and enter x=

As soon as you enter the ‘=’, the completion list closes and the x property, followed by a pair of double-quotes, will be inserted automatically. Enter the number 10 between the quotes. Now press space, enter y= and give this the value 10 too.

Press the space bar again. Now you want to enter the label. Type the single character ‘l’ (lowercase L). This will highlight ‘label’.

Press Tab to select and between the quotes, enter “Click!”.

Move your cursor to the end of the line and press CTRL+Space. This time, all possible completion items are shown. Use the completion to create an id with the value “btn” and then select the click event (events are indicated by a little ‘lightning’ glyph):

Alongside click=- enter the function name: “sayHello()”. Finally add “/> “ to close the tag. The complete MXML tag should now look like this:

<mx:Button x="10" y="10" label="Click!" id="btn" click="sayHello()" />

Note: The tag completion knows the difference between single tags and double tags. If you enter /> a single tag is created like this:


But if you enter > (without a slash character ‘/’) then a second tag is automatically inserted like this:


Flex developers often write single tags for controls such as buttons and double tags for containers such as canvases. But it’s entirely up to you. Our MXML code completion will work out whether or not a closing tag is required.

- Write Some ActionScript

Go into the CDATA section and enter the following:

private function sayHello():void{
               
}

Note how the completion works with keywords such as private and function (if you don’t like this, keyword completion can be turned off in IntelliSense options):

Now, between the curly brackets of this function enter this:

var aStr:Str

Note that completion works on classes and ‘String’ should now be highlighted in the list.

Carry on typing so that this line reads:

var aStr:String = "hello";

Now, on the next line, enter:

b

The completion drop-down has two pages. The ‘All’ page tries to find all the classes or methods, variables or keywords that might be appropriate here:

For now, however, the ‘All’ page has too much detail, so click the ‘Common’ page. This page only provides ‘local’ information - by which we mean local variables when you are entering variable names or the members of the specific object type (for example, Button) rather than of all its ancestors (such as UIComponent) when you are entering a member name after a dot. If you have keyword completion activated, keywords will also appear in the ‘Common’ pane. Here only two items match ‘b’ - the keyword break and the variable btn. Select btn.

By the way, the variable btn is not even declared in the ActionScript code. This is the identifier which we added to our MXML Button definition. In Flex, ActionScript code can refer to MXML controls by name and our IntelliSense system can too!

After btn, enter a dot:

btn.

Since you last select the ‘Common’ tab of the completion list, this is the one that remains active. It shows the members of the Button class only. If you flip to the ‘All’ tab you’ll see that many more members from the ancestor classes of Button are also listed. For now, select ‘label’:

Edit the code as follows:

btn.label = aStr;

The contents of this file should now match the following code:

- Save and Run

Save the file. Then Build (in the Build menu select Build Solution). If any errors are listed in the Errors pane, correct them and rebuild.

Now run: select Amethyst, Launch.

If you have any problems launching, be sure that the Flex SDK is installed and that the paths to the compilers and your web browser are all set up correctly. These can be set for all future projects in Tools, Options, Projects, Amethyst or for the current project only in Project, Project Properties.

This is just a short taster of a few IntelliSense features. We’ll highlight some other capabilities of the IntelliSense system in other blog entries and tutorials here on the SapphireSteel Software site.

For more information on the IntelliSense and other features of Amethyst, you may want to check articles that have been tagged with the Amethyst Keyword.

Bookmark and Share   Keywords:  Amethyst  development
© SapphireSteel Software 2014