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.

Looking for hands-on-training in the latest version of Adobe Dreamweaver CS4. Look no further. We are always first to market with new version Adobe Systems software training. After attending the Adobe Partner Summit in San Jose, CA this past summer to learn all of the new CS4 features, we have selected a premiere group of instructors to lead our transition into the Creative Suite 4 version.

The Adobe Dreamweaver CS4 Beta has now been released at Adobe Labs

Adobe® Dreamweaver® software has long been the leading tool for web designers, coders, and application developers of all levels. New coding functions make it a breeze to navigate through complex site pages at design time. Improved layout tools bring expedited workflows, from comp conception to client approval. Innovations throughout the Dreamweaver beta can help teams and individual developers alike reach the next level in performance and functionality. The Dreamweaver beta will expire soon after the next version of Dreamweaver is available for purchase.

Back in the classroom this week teaching Dreamweaver Advanced Application Development in Atlanta. This is a great class if you are just getting started with connecting your website to a database with Adobe Dreamweaver. Interestingly enough it was not that long ago that someone from Adobe Systems told me that Dreamweaver was never really meant to be an application development tool. ? That comment puzzled me and the person that said this was a fulll-time employee with Adobe Systems. Well, for software that was never really meant to be an application development tool, Dreamweaver has done a pretty good job at succeeding. However, her comment is correct I suppose.

The history of Dreamweaver for application development. Early on in the days of Dreamweaver version one and two there really were’nt tools built in for easily connecting to a database and creating a dynamically driven web application. Shortly after learning Dreamweaver for design I flew to Atlanta and attended a class for a new Macromedia product by the name of Drumbeat 2000. Without a doubt, this was one of the worst visual editors that I have ever seen. But, it did create ASP code in the background of the WYSIWYG front end. It was not long after that class that Drumbeat 2000 and Dreamweaver merged to become Dreamweaver Ultradev 4. This new version was a nice mix of design tools that had become the standard and new tools in Dreamweaver that would assist the user in connecting to a database and creating some simple CRUD applications. At that time the only server code that Dreamweaver would create was ASP. And,… it did a pretty good job. As time moved on, Macromedia aquired Allaire and then Adobe quired Macromedia. During this transition, as you would guess, ColdFusion has surfaced with more support probably than any other server language that you would work with in Dreamweaver aside traditional ASP. If you are working in PHP, you will also have some great tools build in the Dreamweaver interface for assistance.

In the sort, if you are thinking about moving beyond static web pages into dynamically driven pages with Dreamweaver, you have made a great choice. You can learn some drag and drop features in Dreamweaver and get some pretty quick results. As you are using some of the rapid development wizards in Dreamweaver, you can continue the process of learning the backend code of your choice. If you are working in ColdFusion, Traditional ASP, or PHP, Dreamweaver really shines.

10 years and counting - still teaching the DREAM!

Adobe Dreamweaver/Contribute CS3 is such a great software solution for large web sites that need to managed by multiple contributors. Along with CPS publishing server for website development it can empower just about anyone in an organization to add and update static pages of a website and keep content updated.

Thanks so much to the great group of people that I met today in Los Angeles, California. Best of luck with your new web design project. You have made a great choice with Adobe Dreamweaver/Contribute.

Done Deal! Passed the Dreamweaver CS3 Certification Exam. Flash is next and then FLEX!

The Dreamweaver CS3 Developer certification represents a professional level of expertise in the activities that demonstrate an individual’s competency as an Adobe Dreamweaver developer. To become certified, you must pass an exam that consists of approximately 70 multiple-choice questions.

Got my shiney new certificate!

Joe and the guys over at WebAssst have a very kool little Dreamweaver extension that they are giving away for free. Whether you’re looking for the hottest color combos or the coolest palettes, you got to get Dreamweaver Tools for Kuler. Kuler is the Adobe Web application for designers to create, explore and share color schemes. With Dreamweaver Tools for Kuler, you get instant access to the more recent, most popular or highest rated colors right in Dreamweaver. Sample your color from any Dreamweaver color picker or insert a hex color value into code with a single mouse click it’s easy and kool with Dreamweaver Tools for Kuler. Download it here for FREE!