RIA Development with Adobe Flex and Flash

ABOUT THE SESSION

When you build components for your own Flex applications, you are working in a controlled environment and can make a lot of assumptions about how your component will be used. However, if you want to release components out into the wild for others to use? It is inevitable that folks will use your component in ways you didn’t consider; and they’re going to blame you if it doesn’t work. This presentation will cover some tips and tricks to help you prepare and optimize your components for reuse.

ABOUT THE SPEAKER

Jeffry Houser is a technical entrepreneur that likes to share cool stuff with other people.
Jeffry is the Brains behind Flextras, a set of user interface Flex Components that save you time and help you create better Flex applications.  He has a Computer Science degree from the days before business met the Internet and has solved a problem or two in his programming career.  In 1999, Jeffry started DotComIt, an Adobe Solutions Partner specializing in Rich Internet Applications with Flex and ColdFusion.

Jeffry is an Adobe Community Professional and produces The Flex Show, a podcast that includes expert interviews and screencast tutorials. He also hosts the Flextras Friday Lunch Podcast, a weekly live Q&A session where you can get your questions answered, and also runs a site www.AskTheFlexpert.com where you can get your questions answered privately.  Jeffry has spoken at user groups and conferences all over the US, is the co-manager of the Hartford CT Adobe User Group, author of three technical books, and over 30 articles.

In his spare time Jeffry is a musician, old school adventure game aficionado, recording engineer, and he owns a Wii. Find more about Flextras at http://www.flextras.com, ask Jeffry Questions at www.asktheflexpert.com, or check out his podcast at http://www.theflexshow.com, or you can read his personal blog at http://www.jeffryhouser.com.

SESSION DATE, TIME, AND LOCATION

June 7th - 12:00 - 1:00pm Eastern EST - This session will be delivered online live with Adobe Acrobat Connect so you can join us from the convenience of your work office or home.

Click here to join our group: http://www.meetup.com/onlineflashplatform/

SESSION SKILL LEVEL

This session will be of interest to intermediate to advanced Flex developers that would like to learn more about building Flex components.

If you have not checked out the Flash Builder and ColdFusion Builder beta versions, you can now visit Adobe Labs for a preview of what you can do with this dynamic duo. http://labs.adobe.com

Adobe FlashBuilder 4 Beta

I have to admit that I have always been an Adobe Dreamweaver fanatic, and when I was not in Dreamweaver, I was typically hacking away at code in an older version of Allaire Homesite. That is until I discovered Adobe Flex version 2. The first version of Adobe Flex was wrapped inside the Dreamweaver interface which made it attractive but there were just too many obstacles in the way of learning how to deal with the server side code of Flex at that time for me. With Adobe Flex 2, I discovered the ease of working in code with the Eclipse based IDE and also the benefits of working with CFEclipse along side Dreamweaver for Development work.

Things have been moving along quite fast in the world of Flex, Flash, and ColdFusion and each version of the software seems to add ease of use and time saving features. FlashBuilder and ColdFusion Builder are no exception. Check out these quick steps for getting sarted in ColdFusion development with Flash Builder.

1. First, of course, you need to download and install Flash Builder and ColdFusion builder beta versions from http://labs.adobe.com.

2. Once you have the software installed, you will be surprised when you find out how easy it is to get started and connect your Flash Builder application to a ColdFusion Service with CFCs. (ColdFusion Components)

3. Now, lets get started with our first ColdFusion powered prject in Flash Builder. Choose File -> New -> Flex Project. At the project screen you can give you project a name and make sure you choose the correct application type. (Web or Adobe AIR) You will then need to choose the correct server technology.

Adobe FlashBuilder New Project Window

4. At this point, you will see the Configure ColdFusion Window. Be sure that you have the correct path and port number specific to your ColdFusion server. In this example I am using the ColdFusion 9 server running on port 8501. This is a standalone installation that is running along side my ColdFusion 8 testing server.

FlashBuilder Connection Path to ColdFusion Server Directory

5. Click next, name your application file and you are ready to create a ColdFusion Component with FlashBuilder.

6. You can now select the Data/Services view tab in Flash Buidler and select ‘Connect to Data Service’… This will open a window with three different options, ColdFusion - HTTP - and WSDL. For this example we are of course going to select ColdFusion.

Connect to ColdFusion for RIA

7. In the next window, if you don’t have a CFC ready to use, just select ‘click here to generate a sample’. This will open the ‘Generate Sample CFC Service Window’. Here you will most likely choose ‘Generate from RDS Data Source’. This will allow you to browse to your database connections and access the information. Select your chosen datasource, table, and click ‘ok’.

8. Now it is time to hit the ‘Finish’ button, kick back, and watch the show. Flash Builder goes to work creating a CFC and the valueObjects that you will need in your FlashBuilder project. You can now see the .as files in the Package Explorer and the Data/Services view will also be populated. If you have ColdFusion Builder installed, you will also notice that the CFC opens for your inspection and editing.

9. Now comes the fun part. Switch to the design perspective and drag a datagrid to the canvas. The generated sample service contains functions that illustrate typical service operations. You can use these functions as a starting point for creating your own service implementation. You can modify the function signatures, references to the database, and implementation according to your needs. Save your changes and return to Flash Builder design. In Flash Builder Data/Services View, refreshthe service. Then drag service operations onto user interface components in Design View. For example, I choose the getAllARTISTS() operation and simply dragged it onto a DataGrid in the design view.

FlashBuilder DataGrid with Data

10. So there you have it. A complete ColdFusion powered datagrid in FlashBuilder without writing one line of code.