Digital Edition

SYS-CON.TV
Macromedia Flex Builder 1.5
Visual Flex development and powerful debugging in a familiar environment

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
Flex Builder 1.5 was released and made available for download on Macromedia's Web site (www.macromedia.com/cfusion/tdrc/index.cfm?product=flex) in late December of 2004. Previously you had to order a trial CD in order to get Flex Builder, so the ability to download Flex Builder is a great way to get started quickly, and the download will allow you to try Flex Builder for 60 days. If you need a permanent license for Flex Builder, the purchase of Macromedia Flex includes five licenses for Flex Builder or you can apply for a noncommercial Flex license at www.macromedia.com/software/flex/productinfo/faq/#ancni, which includes a single license for Flex Builder. Because Flex Builder is really designed specifically for Flex developers and not intended as a more general-purpose IDE, Flex Builder is not offered for sale as a stand-alone product.

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
When you first open Flex Builder you may think Dreamweaver has just gone haywire and changed its color scheme. There's no problem; the interface for Flex Builder is nearly identical to that of Dreamweaver MX 2004, so if you're a Dreamweaver user you won't miss a beat switching over to Flex Builder. Everything from the file and asset navigation panels, to the site management tools, to the rich CSS functionality that you've come to know and love in Dreamweaver are all present in 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
In addition to the obvious benefits of MXML syntax highlighting and tag completion that Flex Builder offers, the single biggest feature that will probably most appeal to Flex developers is the ability to visually build Flex UIs. The ability to choose between design, code, and split view can really accelerate development, particularly as you begin learning Flex. Many of the Flex containers and components have quite a bit of functionality built into them, and seeing the components and their related code, not to mention being able to change something in the design view and watch the code get updated (or vice versa), can be an extremely powerful learning tool.

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?
I'm sure the rest of you write completely bug-free code on the first try, but I have a confession to make: occasionally a few bugs creep into my code and when they do, sometimes they can be tricky to track down. The Flex server makes debugging relatively easy because of the extremely helpful error messages it generates. If the Flex error messages don't tell the whole story, Flex Builder's built-in application debugger comes to the rescue. Using Flex Builder's debugger you set breakpoints in your code, step through code line-by-line, and perform interactive debugging within Flex Builder.

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
As powerful as Flex is, just as with other Web applications Flex usually relies on external data sources of one form or another from which Flex retrieves and displays dynamic data. Particularly when Web services are involved, if there are network problems or other issues outside of the Flex application itself, sometimes you may experience what I usually refer to as a "silent error." For example, you may not see any data in the DataGrid you're trying to populate, but you don't see any error messages either. For troubleshooting pesky problems such as these, Flex Builder's Network Monitor is indispensable (see Figure 3).

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.

Conclusion
This was a very brief introduction to Flex Builder 1.5, but if you like Dreamweaver and you're building Flex applications, you'll love Flex Builder. It can make quick work of visual design, application and network traffic debugging, and can even help you learn Flex with the tag completion and introspection. And best of all for ColdFusion developers, you don't give up any of the ColdFusion features of Dreamweaver that you've come to rely upon. For those of you doing Flex development in conjunction with ColdFusion, Flex Builder 1.5 may be the ideal tool for you.

Resources

  • Macromedia Flex Developer Center: www.macromedia.com/devnet/flex/
  • Macromedia Flex Builder Developer Center: www.macromedia.com/devnet/flex/flex_builder.html
  • About Matthew Woodward
    Matt Woodward is Principal Information Technology Specialist with the Office of the Sergeant at Arms at the United States Senate. He was until recently a Web application developer for i2 Technologies in Dallas, Texas. A Macromedia Certified ColdFusion Developer and a member of Team Macromedia, he has been using ColdFusion since 1996. In addition to his ColdFusion work, Matt also develops in Java and PHP.

    In order to post a comment you need to be registered and logged in.

    Register | Sign-in

    Reader Feedback: Page 1 of 1



    ADS BY GOOGLE
    Subscribe to the World's Most Powerful Newsletters

    ADS BY GOOGLE

    JETRO showcased Japan Digital Transformation Pavilion at SYS-CON's 21st International Cloud Expo® at...
    Bill Schmarzo, author of "Big Data: Understanding How Data Powers Big Business" and "Big Data MBA: D...
    With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO an...
    Containers and Kubernetes allow for code portability across on-premise VMs, bare metal, or multiple ...
    In this presentation, you will learn first hand what works and what doesn't while architecting and d...
    Cloud applications are seeing a deluge of requests to support the exploding advanced analytics marke...
    The now mainstream platform changes stemming from the first Internet boom brought many changes but d...
    Bill Schmarzo, author of "Big Data: Understanding How Data Powers Big Business" and "Big Data MBA: D...
    More and more companies are looking to microservices as an architectural pattern for breaking apart ...
    @DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22...
    CloudEXPO New York 2018, colocated with DXWorldEXPO New York 2018 will be held November 11-13, 2018,...
    The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news an...
    The Internet of Things will challenge the status quo of how IT and development organizations operate...
    DevOpsSummit New York 2018, colocated with CloudEXPO | DXWorldEXPO New York 2018 will be held Novemb...
    Organizations planning enterprise data center consolidation and modernization projects are faced wit...