Category: Flex
Flash Builder goes Public Beta
Flash Builder 4 Beta and Flash Catalyst are available for download on Adobe Labs. There's little sense to repeat 'whats new' about Flash Builder 4 and Flex 4 - blogs will be bragging about it anyway. For starters, read Tim Buntel's post on Flash Builder 4 and Matt Chotin's post on new features in Flex 4 SDK. You may also read first-hand information about Flex 4 SDK from Adobe Wiki. Flash Catalyst is well-covered by video tutorials. These materials will help to quickly understand chemistry between Flash Builder and Flash Catalyst. I believe name Catalyst is capturing essence of this product. It speeds up magic process of animating static PSD design image into live being that is Flash application.
Briefly recap what I found most interesting in Flash Builder:
- Data Centered Development process - a workflow which allows developer to pick datasource, introspect it, create data model in application, generate or build UI manually around this model and finally bind model to UI. Process is made so easy, that for many applications there will be little or no line of custom code written to retrieve and store data from Flash application -- generated code will work just fine. If there's no server code yet to connect, Flash Builder can generate one for you - in Coldfusion or even PHP. Worth to mention that thanks to Adobe and Zend collaboration, Zend Framework is used for PHP server back-end code, leveraging Zend AMF support.
- Network monitor - now you may watch data flow right from Flash Builder, without kung-fu of browser plugins.
- New Package Explorer, improved code hints and overall interface improvement.
Language changes in Flex 4 are going independenly from Flash Builder, but as Flex 4 SDK is default in FB4, I will mention these new features briefly:
- New language elements and components cleverly distributed between 3 main namespaces:
- Two-way data binding - pretty self-explainable, but really poweful feature. Bind textbox to a variable, load variable from remote source and show data in textbox immediately. Change textbox, and variable will be updated too, and only one symbol (not even a line of code!) is needed to perform this: text="@{variable}"
- New state management mechanism. In Flex 4 you don't need to describe differencies between states, but rather describe what states components are used in (or not used).
- FXG - new declarative language for describing graphics. For many projects, using complex libraries like Degrafa may be an overkill. With FXG developer can describe skin for a component in simple terms, and also, use FXG for intercommunication with other tools, like Catalyst.
Developers may be interested mostly in programming, but it's not an accident that Adobe shipped Flash Catalyst with Flash Builder in public beta. Catalyst is great product that will fill the gap between designer and developer. Flex developer can create tables and forms very quickly, manipulate remote data with ease. But who said that business application UI should'nt be attractive ? But developers usually cannot produce design, and designers cannot produce code. Flash Catalyst builds the bridge, allowing designers to markup their PSD designs visually, add effects and actions. Developers then pick resulting FXG code and put into their Flex application. Win-win ! No doubt such chemistry will improve quality and lower development time, leaving clients absolutely happy with results.
Writing a Flex Widget. Easy.
Flex and Coldfusion seems like made for each other. What I'm saying? Yes, Coldfusion and Flex ARE made for each other! Adobe spend time and effort to make Flex best tool for creating rich user interface for internet applications and in same time, make Coldfusion best data back-end for Flex. To demonstrate and educate (myself) about Flex and Coldfusion, I plan to write series of articles about different aspects of Flex, it's interoperation with Coldfusion, data transport etc etc. I plan to create simple info widget as a guinea-pig.
Adobe miraculously joined it's young client-side technology, Flex, with veteran server platform - Coldfusion. This was technology breaktrough that other companies only dream about and running off the leg chasing Adobe with their products (SilverFX, JavaLight... what their names again ?). Creating powerful web-applications with rich user interface and robust data back-end never been simpler.
To the point.
Flex application is obviously a Flash movie, and it can communicate with server back-end in several ways - using simple REST calls, using Flash Remoting, consuming Web-service and calling it's methods, using Data Messaging and Publish/Subscribe.
With AJAX you'd probably use REST to call URL and receive XML or JSON data back to application. For Flex it's totally legitmate way - with Flex's URLLoader class you may prepare HTTP request, call remote page and then parse what's returned into ActionScript data structures.
Flex Remoting is more sophisticated technology that uses AMF binary protocol to transfer data to Flash movie. Flash developers were using Flash Remoting from version MX and Coldfusion MX has great support for Flash remoting (this is year 2002). Since AMF is binary protocol, it may pack data more efficiently, cutting transfer time. AMF encapsulates native ActionScript data structures, so your data need no XML wraps, this cuts off time spent on XML parsing (usually, a lot of time). Look at this chart and learn why you'd want to use AMF. There's lots written about AMF out there, if you need details.
Data Messaging and Publish/Subscribe are advanced tecniques delivered by LiveCycle Data Services. Using it, you may push changing data to client (eliminating redundant server polling by client), you may update datasets on clients when one of client changed data, you may prevent collisions when two clients changing same data.
For real world sample, I will use Flash Remoting. It's native, it's fast, it's easy to implement. All ways round, it's best for linking Flex to Coldfusion by default. If your application demands, consider advanced metods, but for most tasks Flash Remoting is the best.
To bake this, you will need 2 pieces of code - one to produce data on Coldfusion side and second to consume data on Flex side.
To use Flash Remoting in Flex, you should have destinations - descriptions of Coldfusion components that Flex will read and use. Without specifying destination, Flex will be unable to find CFC you are referring to. Fortunately, Coldfusion has one pre-defined common destination called Coldfusion that simply points to Web Root of your server. This allow Flex to find CFCs under Web Root by fully qualified name in dot-notation. For example, my Coldfusion is linked to Apache and project reside in folder /project/components under Apache /htdocs folder. The CFC itself is called data.cfc. So, Flex is referring to it as project.components.data with destination named Coldfusion. You may want to store CFCs outside Web Root folder by security reasons - in this case you should create destination that will point to that specific folder.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="{roData.getMessages()}">
<mx:RemoteObject id="roData" destination="ColdFusion" source="project.components.data" />
<mx:DataGrid dataProvider="{roData.getData.lastResult}" />
</mx:Application>
On server side, it is data.cfc component in /project/components folder that is answering our call. See that 'source' attribute is describing same path to CFC in 'dot-notation', and without .cfc notation. The component itself is rather easy to understand:
<cfcomponent displayname="data" hint="Data source" output="false">
<cffunction name="getData" returntype="Query" hint="Return text data" access="remote" output="false">
... code that queries database and returns query object ...
</cffunction>
</cfcomponent>
That's it. Yes, it's that easy. Such widget can sit on side bar of your website, telling people latest news, for example. Of course, this is basic example. However, it will take you no more than half-hour to add filter to data (e.g. language selection for news feed), or read external source, like Twitter feed. Hundreds of options exists, however basic approach is always the same.
Posted by Rodion Bykov on March 30, 2009 at 2:39 PM - Categories: Flex | Coldfusion