Most Read This Week
Macromedia Flex Builder 1.5
Visual Flex development and powerful debugging in a familiar environment
By: Matthew Woodward
Feb. 11, 2005 12:00 AM
Over the past couple of months I've been introducing you to some of the fantastic possibilities Macromedia Flex offers for building Rich Internet Applications (RIAs) with ColdFusion ("Flex Your ColdFusion Muscles," CFDJ Vol. 6, issue 12 and "Data Presentation with Macromedia Flex," CFDJ Vol. 7, issue 1), and I hope you've been motivated to begin experimenting with Flex yourself.
What I haven't yet addressed is the set of development tools available for Flex. One of the great things about Flex is that since Flex development is entirely text based, you can use the text editor of your choice to write your Flex code.
A good IDE that's designed to work in conjunction with a specific technology, however, can make your development life a bit easier by offering features such as syntax highlighting, code hinting, debugging, and even drag and drop, WYSIWYG UI development capabilities. If you've been doing Flex development with a generic IDE and have been searching for a better alternative, Macromedia Flex Builder 1.5 might be just what you're looking for.
Flex Builder offers all the capabilities I outlined above, is tightly integrated with the Flex server for previewing and testing, and since it's built on the Dreamweaver codebase, it will be quite familiar to ColdFusion developers who use Dreamweaver for ColdFusion development. Other than the addition of Flex capabilities, Flex Builder behaves exactly as Dreamweaver does, so it can handle all your ColdFusion projects just as you may be accustomed to with Dreamweaver. If you're doing both Flex and ColdFusion development, you may quickly find Flex Builder becoming your primary IDE.
Flex Builder 1.5
If you've tried Flex Builder 1.0 in the past and had some complaints about its performance, you'll definitely want to check out Flex Builder 1.5. In addition to support for Flex 1.5 features (e.g., the new charting and graphing components) you now also have the ability within Flex Builder to turn off the design view to gain maximum performance. (In Flex Builder 1.0 the design view was essentially always working behind the scenes even if you weren't using it.) This is a great addition for code-centric developers, and since this feature is controlled by a simple checkbox, it can easily be turned on or off as desired. Also, if you're developing for both Flex 1.0 and 1.5 you can run Flex Builder 1.0 and 1.5 in parallel with one another. Flex Builder 1.0 serial numbers are valid for Flex Builder 1.5, so you can easily use both versions if necessary.
Working with Flex Builder
Perhaps the major difference between Dreamweaver and Flex Builder is the ability to build your Flex UIs visually, but there is also added functionality for previewing your Flex applications from within the IDE, an Application and Network Debugger, and more tools specifically designed for Flex developers.
As I mentioned above, you can continue to use other text editors or IDEs to do Flex development, but Flex Builder is the only IDE that offers a visual development environment for Flex applications. Even for code-centric developers, the ability to quickly drag and drop Flex components to the screen to build UIs can be a very powerful addition to the toolbox, and you'll likely find yourself depending on the other Flex-specific tools as well.
Because Flex Builder is essentially Dreamweaver with additional functionality designed for Flex development, for the remainder of this article I'll focus on the features in Flex Builder that will appeal specifically to those of you doing Flex development. As an aside, I hope once you see how easy Flex development can be with Flex Builder and how it can actually help you learn Flex, you'll be further tempted to try your hand at building Flex applications!
Seeing Is Believing
As a brief example, let's take a look at how Flex Builder's design view can make our lives a bit easier with the Flex ViewStack container. The ViewStack container is essentially what it sounds like, namely a group of views that are stacked on top of one another, with only one view visible at a time. Each view within the stack can contain other containers and components. In the visual design mode, Flex Builder puts a navigation control above the ViewStack that allows for the addition and removal of views to the ViewStack as well as easy navigation between the views (see Figure 1).
As you may imagine, this navigator can come in particularly handy as your UIs become more complex, and it's also a part of the Accordion and TabNavigator components when you're working in the visual design mode. I do the vast majority of my development by handwriting my code, but I have found that these features of the design view are handy for quickly creating the UI for the application. Then with the basic UI framework in place I can focus on writing the remaining code involved.
One of the big new additions to Flex 1.5 is the group of charting and graphing components. You'll be happy to know you can quickly and easily build your charts and graphs visually with Flex Builder (see Figure 2). Simply drag a chart or graph component onto the screen, provide some basic information about your chart, and Flex Builder handles generating the MXML tags for you. Then all that's left to do is hook the chart into dynamic data as needed. This is also a great way to learn the charting and graphing components if you haven't worked with them before.
One other thing to note regarding the design view is that there are two modes: standard and Expanded. Standard mode represents the UI extremely accurately within Flex Builder, while Expanded mode adds a slight margin around each component (10 pixels to be exact) and adds a dashed line around each container to show the container's boundaries. While this means that the UI isn't rendered quite as precisely in Flex Builder in Expanded mode, you may find that it's easier to visually select containers and precisely place components within containers. Once you've built much of your UI, you can switch to Standard mode with the click of a button and see a precise visual representation of your Flex application in Flex Builder.
The design view in Flex Builder is extremely powerful and can give a real kick-start to your Flex application development. Even if you're someone who prefers to do all of your coding by hand, laying out the initial UI using the design view allows you to build the UI faster and leaves you more time for your MXML and ActionScript coding.
What? Bugs in MY Code?
A right-click of the mouse in your MXML or ActionScript code brings up a menu from which you can select the option of adding a breakpoint. This tells Flex Builder you want the application execution to pause at that point so you can see what's going on right at that moment. Breakpoints are a great way to check before and after states at various points in your code because in some cases, you may get to the end of a relatively complex operation that isn't doing what you think it's supposed to be doing. Without breakpoints it's sometimes difficult to determine where the missteps in the code are occurring. Breakpoints can be removed as easily as they are added, and there's an option to remove all breakpoints at once after you've hunted down that pesky bug.
Once you set your breakpoints, simply click the Debug button at the top of the Flex Builder interface. If you have your test server configured, this will compile the MXML file, transfer it to your testing server, and launch the application within Flex Builder. If you prefer, you can even debug the application in an external browser. The application will run in the external browser and, as breakpoints are reached, Flex Builder will regain focus so you can review what's going on behind the scenes in your application.
If you debug within Flex Builder, above the Flex application's interface you'll see a set of controls that allow you to play, stop, refresh, and step through each of your breakpoints. Below the application's interface you'll see a set of tabs that allow you to see things such as server debug and call stack information. All in all, Flex Builder offers an extremely rich set of tools that can make your debugging tasks much less difficult.
It's All About Networking
The Network Monitor keeps a running list of all the network activity occurring in your Flex application including get, post, other HTTP traffic, Web service calls, and SOAP packets. Unless the data returned from a network call is binary, you can even see the actual data being sent or returned in the Network Monitor. This is an extremely handy way to see what your application is sending to a Web service, for example, as well as what you're getting back from the Web service. As I mentioned previously, if you're getting a "silent error" of some sort, without being able to see the details of the network traffic, these types of bugs can be extremely frustrating and time-consuming to diagnose and repair.
Reader Feedback: Page 1 of 1
Subscribe to the World's Most Powerful Newsletters
Today's Top Reads