8 September 2009
|Prerequisite knowledge||Required products
Previous experience with Adobe products is helpful but not necessary.
Whether you are building a design-centric or data-centric rich Internet application, it's likely that during the course of the project you'll need to work with a variety of tools, or work as part of a team where designers and developers will use other Adobe products - with this in mind, in Flash Builder 4 we've focused on providing streamlined workflows with Adobe's design products and ensuring tight integration with Adobe's other developer tools and server technologies.
In this article, I'll briefly introduce you to how Flash Builder 4 integrates with Adobe ColdFusion Builder, Adobe LiveCycle Data Services 3, Adobe Flash Professional and Adobe Flash Catalyst, so you can use start to make use of the new workflows and enhanced interoperability to improve your productivity and add new capabilities to your application.
Flash Builder and ColdFusion Builder
The majority of rich Internet applications built using Flex require some level of interaction with a server, often to retrieve, display and update data. When it comes to working with server-side technologies you'll probably know that you can integrate your Flex application with almost any back-end.
With the introduction of ColdFusion Builder there is however more reason than ever to consider Adobe ColdFusion when you're building a Flex application in Flash Builder 4, as we've worked hard to make sure there is a close connection between both these development tools.
First, Flash Builder 4 and ColdFusion Builder can both be installed together into a single Eclipse instance. This allows you to seamlessly switch between Flex and ColdFusion editing perspectives. You can be working on a Flex project and have your ColdFusion data sources visible at the same time; you can view the Flash Builder 4 network monitor and the ColdFusion log viewer at the same time; and so on, all from one environment.
More importantly, the tools work together to help you build applications quickly. Within ColdFusion Builder you can browse to any ColdFusion data source with the RDS dataview, select a table, and right-click to reveal the ORM Code Generator option. This one command will automatically generate the ColdFusion components (CFCs) for a complete data service. Then, simply return to a Flex project and choose Connect To ColdFusion from the Data menu. The generated CFC will create a service with strongly typed data, paging, and data management already enabled—you don’t have to write a single line of code. There is also a code generator that will make non-ORM components for those not yet using ColdFusion 9. In fact, the code generator feature is part of a larger feature for adding capabilities to ColdFusion Builder with extensions written in CFML. There is already a ColdFusion Builder Extensions category on RIAForge where these extensions can be shared.
Flash Builder and LiveCycle Data Services 3
Adobe LiveCycle Data Services 3 introduces a data modeling language and platform code named Fiber. To make it easy for developers to use Fiber, the LiveCycle team has created a text-based and graphical modeling editor, which can be installed as a plug-in to Flash Builder 4. With this Modeler, the LiveCycle Data Services server, and Flash Builder 4, you can automatically generate the server-side code (Data Management Service destinations) and Flex client code from a common data model (see Figure 1).
The Fiber Modeler uses a service called RDS (which stands for Remote Development Services) to work with server destinations or SQL databases from within Flash Builder 4. The Modeler uses RDS to introspect JDBC data sources to build a data model. Once you have connected via RDS to a database, you can drag and drop tables in the Adobe Data Model perspective to add entities to the model. If you don’t already have tables in a database, the Modeler can automatically create them. Once the model is complete, switch back to the Flash perspective and you will see that a service has already been created in the Data/Services panel. The service will have all of the common database operations (for creating, reading, updating, and deleting records) and datatypes based on your model. There is no need for you to introspect a separate server-side component and configure its return type; both the server-side and client-side code is handled for you by the Modeler. You can then bind the results of the operations to Flex UI components. There are additional benefits to using the Live Cycle Data Services 3 Fiber model, including computed properties, custom business logic, and validation rules, among others.
Figure 1. Fiber Model
The Fiber model approach is a simple and fast way to build complex data-centric Flex applications in Flash Builder 4. To learn more, see the LiveCycle Data Services 3 Getting Started Guide.
Flash Builder and Flash Professional
Many designers and developers use both Flash Builder 4 and Adobe Flash Professional to build applications, so we added a number of features to Flash Builder 4 to improve the experience of creating and editing Flash components that are part of a Flex application. In the Components panel of Design view, you will see options to add a New Flash Component and a New Flash Container. You can drag either onto the design surface, resize it, and position it. Then, either double-click it or select Create in Flash Professional from the Property inspector to launch Flash Professional and create the content. When you’re finished, click Done in Flash Professional to return to Flash Builder 4. All of the plumbing (as well as the file and library linking) is handled for you automatically. You can also invoke Flash Professional to edit previously created Flash components. This functionality replaces the Flex Component Kit for Flash, and enables a much smoother workflow between Flash Builder and Flash Professional.
We've also worked to improve interoperability between Flash Builder and FlashProfessional for those building ActionScript 3 applications and content (i.e. not using the Flex framework) - from within the next version of Flash Professional you will be able to select Flash Builder 4as your default code editing environment for ActionScript, rather than using the built-in Actionspanel, allowing you to benefit from all the code editing features offered by Flash Builder. Alternatively, you can choose to create a new Flash Professional project within FlashBuilder 4 and code all your ActionScript within Flash Builder's code view - just designate an FLA to work with, write the necessary ActionScript classes and then you can initiate publishing, testing and debugging in Flash Professional right from within Flash Builder 4.
Flash Builder and Flash Catalyst
Flash Builder 4 also supports workflows with the upcoming version of Flash Catalyst, Adobe's new professional interaction design tool. Flash Catalyst allows you to transform artwork created in Adobe Photoshop and Adobe Illustrator into functional user interfaces without coding. Flash Catalyst projects can then be imported into Flash Builder to add more functionality and integrate with servers and services.
In addition to supporting complete Flash Catalyst projects, Flash Builder also offers the import of a Library Package or FXPL file saved from Flash Catalyst, which contains just the component skins created by the designer. This workflow allows you integrate updated design changes into your Flex projects as and when they are received from the designer, whilst you continue to develop the application logic in Flash Builder.
Where to go from here
Since it’s built on Eclipse, Flash Builder 4 can also be used with thousands of other plug-ins in addition to these great Adobe products to support your workflows and projects. You can find plug-ins to support team development, database management, code management, testing, and more. Combine your favorite Eclipse plug-ins with Flash Builder 4, and can create your own perfect RIA IDE.
If you have not already done so, take some time to check out the content that we’ve created to support Flash Builder 4: