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

    ChatOps is an emerging topic that has led to the wide availability of integrations between group cha...
    You know you need the cloud, but you’re hesitant to simply dump everything at Amazon since you know ...
    Is advanced scheduling in Kubernetes achievable?Yes, however, how do you properly accommodate every ...
    As Marc Andreessen says software is eating the world. Everything is rapidly moving toward being soft...
    The cloud era has reached the stage where it is no longer a question of whether a company should mig...
    The need for greater agility and scalability necessitated the digital transformation in the form of ...
    In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an over...
    As DevOps methodologies expand their reach across the enterprise, organizations face the daunting ch...
    Coca-Cola’s Google powered digital signage system lays the groundwork for a more valuable connection...
    In his session at 21st Cloud Expo, Raju Shreewastava, founder of Big Data Trunk, provided a fun and ...
    While some developers care passionately about how data centers and clouds are architected, for most,...
    "Since we launched LinuxONE we learned a lot from our customers. More than anything what they respon...
    DevOps is under attack because developers don’t want to mess with infrastructure. They will happily ...
    "As we've gone out into the public cloud we've seen that over time we may have lost a few things - w...
    In his session at 21st Cloud Expo, Michael Burley, a Senior Business Development Executive in IT Ser...
    Sanjeev Sharma Joins June 5-7, 2018 @DevOpsSummit at @Cloud Expo New York Faculty. Sanjeev Sharma is...
    We are given a desktop platform with Java 8 or Java 9 installed and seek to find a way to deploy hig...
    "I focus on what we are calling CAST Highlight, which is our SaaS application portfolio analysis too...
    "Cloud4U builds software services that help people build DevOps platforms for cloud-based software a...
    The question before companies today is not whether to become intelligent, it’s a question of how and...