back

Flex primer for Dreamweaver users

by Thomas Ortega II

Let me begin with this: there are still some things I miss about Dreamweaver. Heck, there are even a few things I miss about Homesite® and ColdFusion® Studio. But if you haven’t checked out Flex Builder™ yet, you’re missing out.

I’ve been using ColdFusion to build HTML websites since 1999. I started using Dreamweaver when it merged with ColdFusion Studio. I now primarily work with Flex™ to do my day job, which is internal development lead with eBay Inc. (No, I’m not part of the cool Apollo eBay desktop team, but I wish I were.) I’m not a WYSIWYGer; I’m a coder. I rarely used Design view in Dreamweaver, and I rarely use Design view in Flex Builder, so this article is written from a coding perspective.

If you’re completely new to the Flex product line, here’s a quick rundown: Flex is the language. You can think of Flex as programmable Flash®. It’s composed of its own markup language, MXML, and scripting language, ActionScript™ (the Flash equivalent of JavaScript). You write MXML and ActionScript code in Flex Builder. This compiles into SWF files that you put on a web server, and clients load those in their Flash-enabled browser. There’s more to the product family, but that’s all you need to know for this article.

Dreamweaver and Flex Builder were related

For those who used Flex 1.5, you may remember that Flex Builder was originally built on the Dreamweaver codebase. In fact, it shared so much code that when you installed Flex Builder, it took over as your default Dreamweaver installation, stealing file associations from Dreamweaver. If that’s what has stopped you from downloading Flex 2, rest assured that doesn’t happen anymore.

Flex 2 introduced a new Flex Builder based on the Eclipse Integrated Development Environment (IDE), the Java IDE. In fact, you can install Flex Builder as a standalone IDE based on Eclipse or as a plug-in to your current Eclipse installation. I prefer the standalone installation.

The similarities

Flex Builder and Dreamweaver are both powerful editors. The biggest similarity is that they both have Design view and Code view. With Design view, you can drag items to the blank canvas, and both editors will create the code for you.

Code view is where the true power and biggest time savers are. The code completion that you’re used to in Dreamweaver is also in Flex Builder. I like Flex Builder’s code completion a bit more though because of the ability to read into nested files and classes.

The File panel is a must-have for any serious editing tool. Dreamweaver uses the site metaphor to group related files. Flex does a similar thing but calls them projects. Both options enable you to organize your myriad of related code files for your projects but then quickly and easily hide them when you need to switch to another project.

Both apps have old favorites, too, such as powerful search and replace as well as code collapsing. There’s also an outline panel that shows how tags are being nested per file, so you can quickly see and access every aspect of your code.

The differences

Switching from Dreamweaver to Flex, I quickly discovered something was missing. Flex does not offer the code snippets feature. I came to depend on code snippets and got to the point in Dreamweaver where I was creating more files per day, but typing far less code thanks to that one feature. Flex Builder just doesn’t have that same functionality. Hopefully it will in the future.

The biggest gain from the switch to Flex Builder is the debugger. ColdFusion Studio fans may remember the debugger. The Flex Builder debugger for your Flex projects is top-notch. There’s no more wondering what’s going on because with a few mouse clicks to set breakpoints you see everything.

Another big difference is the project vs. site setup. Dreamweaver has a built-in editor that will automatically FTP your files when you save. There are no deployment steps necessary. Flex Builder works differently. Your Flex Builder project has a bin directory that contains a handful of HTML, JavaScript, and SWF files. You may have hundreds of MXML and ActionScript files, but when you build your application, they get compressed into one SWF file. Therefore when you run your application, Flex Builder automatically loads it in a browser window so you can preview how your application will look once it’s deployed. However, you’ll need to find your own external method to get the bin files to your web server.

One interesting note about Flex Builder: you’ll need only one browser window. The days of having Internet Explorer, Firefox, and Safari open all at the same time are gone. Your Flex apps will look the same across all three; browser incompatibilities have become a thing of the past.

Conclusion

If you decide to try Flex Builder, you’ll still need to learn MXML and ActionScript to get a Flex project up and running. The documentation that comes with Flex Builder is a great place to start. Also, Silvafug has an ever-evolving cycle of free Flex Training classes to get you up to speed quickly, and you can take them online.

I hope this article has helped spark some interest among Dreamweaver users to check out Flex Builder.


Tom Ortega II is a Principal at 360Conferences, where he coordinates low-cost, developer-friendly conferences such as 360Flex and 360|iDev. In addition, he keeps up his coding skills with projects at RapidNinja under the alias of "Ninja Debu".