Logged In

Introducing Brady –The Macromedia IDE for Flex

Part of the appeal of Macromedia Flex is that it is based on standards like XML and ECMAScript so that you can build your applications in any editor, including VI or EMACS. However, an IDE built for the job can increase your productivity by offering features such as code hinting, a visual design view with CSS support, an embedded browser, ActionScript debugging, data connectivity, and a network traffic monitor. That’s why we built a product code-named Flex Builder.

Flex Builder is the Macromedia IDE for Flex application development. Designers and developers can be more productive building Flex applications through tight integration between the IDE and the server. Developers can learn MXML and type code more quickly and accurately using Flex Builder’s code hinting feature. More visually-oriented programmers can use the drag-and-drop Design view to quickly lay out Flex interfaces and style them using CSS. The visual data binding support in Flex Builder helps you wire your application to web services and other data sources. Flex Builder also has an ActionScript debugger and a network traffic monitor to help you debug your Flex applications. However, Flex Builder is not a Java IDE; it does not help you build business logic or web services.

Flex Builder is based on Dreamweaver MX 2004. It includes all the standard Dreamweaver features so Flex developers can build and manage any ASP, JSP, PHP, ColdFusion, and HTML aspects of their Flex projects. The Dreamweaver features in Flex Builder work exactly as they do in Dreamweaver MX 2004 so only Flex users gain from the additional Flex features in Flex Builder.

Code Hinting for MXML and ActionScript

Nearly every developer who uses Flex Builder can take advantage of the code hinting support. Code hinting is helpful in learning the MXML tags, attributes, and attribute values at first. Later, code hinting will help you type code more quickly and accurately.

Flex Builder’s Code view offers MXML tag and attribute hinting as well as method and property hinting for the Flex ActionScript classes. You can customize the code editor so that you can create your own code coloring schemes, turn tag completion on or off, and set code formatting options. You can also enable tag and attribute hinting for custom MXML and ActionScript components by selecting Site > Update Flex Components. Flex Builder synchronizes with your server, downloads any custom components your team has built, and updates its code hinting to include the tags and attributes for those components.

Flex Builder also gives coders a way to see build errors and warnings from the Flex server from within the IDE. The results display in a panel where you can double-click errors to jump directly to the line of code causing the problem. You can also see the application compiled by the Flex server in Flex Builder’s embedded browser without leaving the IDE.

Design View

Some Flex layouts are simple enough to just code by hand in code view, but more complicated layouts are easier to create and modify if you have a visual design view where you can interact with the containers and controls visually.

The Flex Builder Design view provides drag-and-drop functionality from an Insert Bar that displays all the Flex containers and controls. In Design view, you can visually move and resize containers and controls, work on different views in an accordion navigator container or TabNavigator container, and align controls when they are absolutely positioned. Flex Builder also has a split Design/Code view which you can use to watch the Design view generate the MXML as you build your application. If you need to make a quick edit, you can double-click anything in Design view to edit that component’s tag, or you can jump into Code view to make more significant edits.

Figure 1. The Split view showing both Code and Design views

The Flex Builder Tag inspector shows a categorized list of all the attributes, events, and styles for a particular container or control so you can make edits there as well. With Flex, you can style your application using CSS. Flex Builder has a CSS Panel that helps you create new styles in your MXML files or in an external CSS file. You can apply CSS styles to your containers and controls directly in Design view with a choice of any CSS class that is defined for your application. The Design view renders these styles and displays their values in the Tag inspector’s Relevant CSS tab. You can quickly see and edit styles that apply to your current selection.

Figure 2. CSS attributes as shown in the Tag inspector

Flex Builder ActionScript Debugger

Many Flex applications require that you write some ActionScript for your client-side logic. If your application is not working as you’d expect, it can be difficult to find the problem. The Flex Builder ActionScript debugger can help you quickly debug problems with your client-side logic. The Flex Builder ActionScript debugger works only with ActionScript for Flex applications you debug in Flex Builder.

You can set breakpoints in ActionScript to step through your code as it executes. The embedded browser is enabled for ActionScript debugging so you can quickly switch back and forth from the debug version of the application to your code. When you start debugging, the Flex server compiles the MXML and ActionScript files and the embedded browser renders the debug version of your application. When the debug application hits a breakpoint, Flex Builder switches to show the line of code for that breakpoint.

There are several ActionScript debugging panels that show information about the debugged code:

• Output panel: displays runtime trace statements
• Callstack panel: shows the chain of functions called before the current function
• Variables panel: displays a list of all the variables in the scope at the current breakpoint
• Watch panel: allows you to track specific variables and their values

There is a debugging toolbar available at the top of your document while you’re debugging that allows you to:

• step over lines of code as they execute
• step into functions to see what code they execute
• step out to finish executing a function and return to its caller
• set breakpoints in any built-in or third-party component files that are compiled into the current application

Data Connectivity

Any Flex application needs to connect to data, and it can be tricky ensuring everything is properly connected. Flex Builder gives you a way to visually add data connectivity to your Flex application to avoid introducing bugs by hand-writing data tags and data bindings.

Flex Builder has a Data panel where you add an MXML WebService, HTTPService, RemoteObject, XML, or Model to your code. If your server is configured with a whitelist, Flex Builder introspects the whitelist and gives you options to insert named services or tells you if you’ve chosen a data service that is not on your whitelist. If you choose a WebService, the Data panel downloads the WSDL and displays the methods, parameters, and results for that WebService. You can also use the Data panel to help you add the MXML tags needed to populate a WebService request.

After you add data to your Flex application, you need to bind the requests and results and trigger the data service call. You can use the Bindings tab of the Tag inspector to help you do this visually. When adding a binding, a dialog box shows a list of properties for controls and a list of request parameters and results for data services that are available for binding. With a few mouse clicks, you can have the proper binding syntax generated for you so that data will flow from your controls to a data service and from a data service back to a control. You can also use these dialogs to bind component properties to one another.

To trigger a data service, use the Events tab of the Tag inspector. For the event for which you’d like to fire off the data service, you open a dialog box that lists all the data services and methods available for triggering. The Events tab and Bindings tab always display the bindings for the current selection in Design view or Code view, whether the data is flowing into or out of the control or data service.

Figure 3. A WebService displayed in the Data panel (top) and the Bindings panel showing the WebService result bound to a Text component (bottom)

Network Traffic Monitor

After you’ve wired your application to data, you may need to debug the data as it goes back and forth from the application to the server. Flex Builder has a Network Monitor panel that displays all HTTP requests, SOAP envelopes, WebService events, XML events, and AMF events that go from your application to the server and back again.

After enabling the Network Monitor, you can use the embedded browser to have Flex recompile the application and display it. As you interact with the application, the Network Monitor logs the data-related events that occur. You can use the filter mechanism if you’d like to only see certain types of events at a time. As you click each time-stamped event, details are displayed for each event. The details pane gives you all the information about the event, and is particularly helpful in letting you see if your data is formatted as you expect it to be. The SOAP envelopes are displayed as XML. WebService and AMF events are formatted as ActionScript objects.

Figure 4. The Network Traffic Monitor displaying a WebService request’s method and parameter values

(+) View larger

Getting Flex Builder

Flex Builder comes with Flex. When you get the Flex evaluation CD or buy Flex, you also get the Flex Builder CD and can use Flex Builder for all your Flex development. Find out how you can get Flex Builder.

About the author