RIA Development with Adobe Flex and Flash

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.

Check out this video at Adobe TV featuring Jon Landau, Producer of “Avatar”, and see how Adobe software was used throughout the production of Avatar. In this single clip the following Adobe products were used:

Adobe Premiere Pro
Adobe Creative Suite Production Premium
Adobe Lightroom
Adobe Photoshop
Adobe After Effects

Adobe® Premiere® Pro CS4
Capture, edit, and deliver video online, on air, on disc, or on device. Adobe® Premiere® Pro CS4

Adobe® Creative Suite® 4 Production Premium!
Plan, create, and deliver anywhere with the intelligent post-production solution. Adobe® Creative Suite® 4 Production Premium!

 Adobe Photoshop Lightroom.
Attention Photographers: Spend less time in front of the computer and more time behind the lens, with Adobe Photoshop Lightroom.

Adobe® Photoshop® CS4
Create powerful images with the professional standard. Adobe® Photoshop® CS4

 Adobe® After Effects® CS4
Create motion graphics and visual effects with the industry standard. Adobe® After Effects® CS4

This past week I found myself in a position of indepentently working from my home office again. After years working with the same productivity software on a daily basis, I found myself scrambling to figure out what open source and free software tools are on the market these days. My first decision was to decide what I could use to keep track of my time and record every step of my daily work routine. Wether you are in sales, software development, or project management, every minute you spend working that goes unaccounted for is like dropping a penny on the ground and not picking it up. Tracking your time accurately is essential to staying ahead of your competition and benchmarking your success.

The problem I find with most of the time tracking software that I see is that they are way to complex. I just need something simple that can track my daily work by the hour. That’s it, … plain and simple. So, I stumbled upon this sweet little Adobe® AIR app that is simple but not really plain at all. In fact it is a super hot looking application that has just the right combo of feelgood and lookgood.

Klok - Personal Time Tracking Made Easy has all the capabilities you would look for in such an app including the ability to track your work by client and project as well as a seemingly unlimited level of sub-projects or tasks. Each project item is color coded and it’s a piece of cake to drag and drop items to the timesheet or to the built in timer to create your entries.

While checking my twitter updates this morning I caught a link from fellow Adobe Fireworks fanatic Tom Green regarding an iPhone Design Toolkit. Metaspark (creators of Notespark) just posted a completely editable PNG iphone mockup file created in Adobe Fireworks. They built the template for both CS3 and CS4 versions. This is a really tight graphic mockup with precise attention to detail. If you are developing for this Apple iPhone this may save you some time and effort.

Apple iPhone Mockup

Great video from the 2008 MAX Conference - Flex and Flash Catalyst! 

Professional Certifications:

Adobe Dreamweaver CS3 Certified Professional

Adobe Fireworks CS3 Certified Professional

Adobe Contribute CS3 Certified Professional

Dreamweaver 8 ColdFusion Application Development

Dreamweaver 8 Certified Developer

Dreamweaver MX2004 ASP.NET Application Development

Dreamweaver MX2004 Dynamic Application Development

Dreamweaver MX2004 Web Development Certified Instructor

Macromedia Dreamweaver MX Certified Developer

Adobe Certified Instructor - Flash 8

Adobe Certified Instructor - Flash MX 2004

Macromedia Flash MX 2004 Designer

Adobe Certified Instructor - Fireworks 8

Adobe Certified Instructor - Fireworks MX 2004

Adobe Certified Instructor - Director MX Fundamentals

Adobe Certified Instructor - Director MX Advanced with 3D

Adobe Certified Instructor - Administering Contribute 3 Server

Adobe Certified Instructor - Adobe Contribute 4