Click here to close now.

Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex, ColdFusion, AJAX & REA

Adobe Flex: Article

Your First Adobe Flex Application with a ColdFusion Backend

The wow factor plus usability

Flex is a complete set of tools to develop rich Internet cross-platform applications based on the Flash platform. With Flex, you can create applications that not only have the "wow factor" necessary to please clients and users alike, but the "usability factor" necessary to make your application a real success.

 Flex 2 has recently been released and can be downloaded at Adobe's Web site. This release includes Flex Builder 2 (an IDE based on Eclipse) and Flash Player 9. At Adobe's Web site, you'll also find tools specifically for ColdFusion such as the ColdFusion/Flex Connectivity package and ColdFusion extensions for Flex Builder. If you know how Flex 1.5 works, you'll be happy to hear that Flex 2 doesn't require a Flex server and that you can develop and deploy applications with Flex 2 for free using the Flex SDK (if you don't use the IDE).

A Flex application communicates to external services, and we find ColdFusion to be a perfect tool for providing those services. In this article, we'll walk you through the construction of an application with a Flex frontend and a ColdFusion backend. We believe that the integration with ColdFusion is so smooth you won't even notice you're transferring data from a remote server. The application you'll construct is a simple to-do list, but it will let us show you several Flex and ColdFusion features.

To start, you'll need the tools mentioned above, specifically Flex Builder IDE and the ColdFusion connectivity package and extensions downloaded and installed.

Setting Up Your Environment
The application will use a database with only one table, so you need to create a database with your favorite DBMS. This database should contain a table called "Task" with the following columns: id (varchar 35), description (varchar 1000), done (bit), and priority (smallint). Then register the data source in the CF administrator with the name "mytodolist."

Now you're ready to open Flex Builder and create a new project. While running the New Project wizard, specify that you'll be using ColdFusion Flash Remoting Services because the application will be communicating to your ColdFusion server via Flash Remoting rather than other alternatives such as XML or Web Services (see Figure 1). Assuming that you're running the development version on your local computer (http://localhost:8500), you can select "Use local ColdFusion server" in the second screen of the wizard. In the next screen enter "mytodolist" as the name of the project in the default location and finally, in the last screen, specify "http://localhost:8500/mytodolist/" as the Output folder URL.

The extensions you downloaded and installed include RDS support for viewing files and data sources. Make sure you have RDS enabled in your CF administrator and that you've set up the RDS preferences in Flex Builder. If your RDS connection is set up properly, you should be able to open the RDS Dataview (you can open it from Window > Other Views > RDS) and see the data source you created earlier (see Figure 2).

Running the ColdFusion Wizard
Another handy feature included in the ColdFusion extensions is the ability to run automatic generation of basic ColdFusion components. The "Create CFC" wizard will generate all the ColdFusion code you need for this application. Then you'll make a few changes to the components to meet specific needs. From the RDS Dataview, look for your data source ("mytodolist"), open the tables node, and right-click on the "Task" table to run the ColdFusion wizards > Create CFC option of the context menu (see Figure 3). This action will open a dialog that asks you what type of CFC you want and some other basic options. Make sure the CFC folder is your current project folder (mytodolist). Set the CFC package name to "mytodolist." Also check the option "The primary key is controlled by the user" because the component will set the id instead of letting the database choose the id. You also want to create an ActionScript value object that matches your Task CFC. So you need to check "Create an actionscript value object."

When you're finished, you should have three new files in your project: Task.cfc, TaskGateway.cfc, and Task.as.

Overview of the Application
The application consists of a list of undone tasks and a form to add a new task. Each task contains an icon that indicates its priority, a label that shows the description of the task, and a button that can mark the task done and remove it from the view. Figure 4 shows the finished application with styles applied.

To construct it, you'll use these components: VBox, Repeater, Panel, Button, Label, and form controls such as TextArea and ComboBox. You'll also create a custom component that will represent the view of each task item (TaskItem.mxml) and a custom component that will contain the edit form (EditForm.mxml). By creating custom components, you can reuse them throughout your application.

If you are wondering about the data, the application will get the list of tasks from a ColdFusion service and send requests to add new tasks and mark them as done.

Main Application File
The New Project wizard created an empty main application file called mytodolist.mxml. You'll use this file as the main canvas where you'll place the components and most of the ActionScript code. In a larger application, you will probably not want all your code in the same file, but for simplicity, you'll keep it there.

We have not yet described how to get the data from the server, but once the application gets the list of tasks, you'll need to store it in a local variable. To do that, declare the variable "tasks" inside a <mx:Script> block.

<mx:Script>
   <![CDATA[
      import mx.collections.ArrayCollection;

      [Bindable]
      private var tasks:ArrayCollection = null;
   ]]>
</mx:Script>

It's important to set this variable as "bindable" because you'll use it as the dataProvider of the repeater component.

In our layout, we want to have the list of tasks vertically positioned with one task below the other. By using a VBox component, we can add all the tasks and the VBox will position them how we want them. But the task list data will come from a ColdFusion service, so you don't know how many of them there'll be. So you'll use a repeater component that will "loop" over the collection of tasks and add them to the VBox.

<mx:VBox width="350">
<mx:Repeater dataProvider="{tasks}" id="taskList">
      <TaskItem taskData="{taskList.currentItem}" />
   </mx:Repeater>
</mx:VBox>

TaskItem Custom Component
If you save mytodolist.mxml file, you'll get an error indicating the TaskItem can't be resolved. This happens because we put the tag <TaskItem> inside the Repeater but the component TaskItem doesn't exist yet.

To create this custom component, you'll go to the File menu and click on New > MXML component. It will extend the Canvas and have 100% width because we want it to take the width of the parent container: the VBox. Save it as TaskItem.mxml.

More Stories By Nahuel Foronda

Nahuel Foronda is one of the founders of Blue Instant (http://www.blueinstant.com), a web development firm specializing in Rich Internet Applications where he has been creating award-winning applications and offering training for the last five years. He also maintains a blog, called AS Fusion (http://www.asfusion.com), where he writes about Flash, ColdFusion and other web technologies.

More Stories By Laura Arguello

Laura Arguello is one of the founders of Blue Instant (http://www.blueinstant.com), a web development firm specializing in Rich Internet Applications where she has been creating award-winning applications and offering training for the last five years. She also maintains a blog, called AS Fusion (http://www.asfusion.com), where she writes about Flash, ColdFusion and other web technologies.

Comments (17) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
??? 10/30/07 01:47:34 AM EDT

Ipod MP4

????
????
????
????
??
????
????
????
???
????
???? 

donna 10/12/07 01:28:46 PM EDT

Unable to download the source code. When I got to page http://www.asfusion.com/projects/my-to-do-list/

I received a Coldfusion error:

A License exception has occurred.
You tried to access the Developer Edition from a disallowed IPThe Developer Edition can only be accessed from 127.0.0.1 and two additional IP addresses. The additional IP addresses are: 209.85.238.20,87.194.221.84

There are so many issues encountered with the tutorial apps out there, that dont work when people follow the isntructions exactly. We need apps that work when followed, and we need downloaded source code that will actually be there.

Lara 07/30/07 11:59:27 AM EDT

I am familiar with ColdFusion but completly new to Flex. I can't get the code to work and I am very frustrated. This isn't a good first application example if we can't work the code. Does anyone have the working source files? If so, please post a link to the corrected files. Thanks!

Jason 06/26/07 02:20:44 PM EDT

I love all the article put out by sys-con and found that they are top quality, that is until this one. I have been struggling with learning Flex and found this article and initally was excited because it looked like the article that was going to clear things up. Until I started in and realized that this article is full of mistakes. Flex is VERY case sensitive where as ColdFusion is not. Since this article is target at ColdFusion developers you need to make sure that the code is correct expecially in the area of case sensitivity because we ususally don't think in that manner (it is "faultString" not "faultstring"). Also you need to make sure that you are using the same name for functions. You have us call the addItem() function through a click event but then on the next page we create the saveItem() function to handle that click event. This won't work! Then we need to make changes to the generated CFCs. You show us the two lines of code that we need to add and simply state that they "should be added to the 'create' method." Ok, but where in the create method. I moved them all over and I continually get errors. I have yet to find a competent article for the Flex "newbie" that achieves its goal of showing how to do basic updates and adds with Flex and CF. I thought that this was going to be the one. Guess I was wrong!

KTK 06/07/07 03:53:09 PM EDT

I'm glad it's not just me! I've had to put this aside for a couple weeks to work on a CF project. Hopefully I can get back to it later this month. If you figure something out, let me know and if I figure it out, I'll let you know. In the meantime, maybe a savior will come along for both of us!

Scott 06/07/07 01:30:06 PM EDT

KTK - I have the same problem and I followed all of the instructions exactly.

Uf!

KTK 06/04/07 01:28:59 PM EDT

I'm getting an error that says "A file found in a source-path must have the same package structure '', as the definition's package, 'Task'. I've been beating my head against it for hours and can't figure out why I'm getting the error. Any ideas?

jex 11/04/06 11:26:10 AM EST

OK - I'm a bit new to both Flex and CF, but have been implementing the tutorial fine up until: "Going back to the main application file (mytodolist.mxml), switch to the design view and drag a new panel and inside drag your EditForm component." When I drag the EditForm component onto the panel, nothing happens. Would it be possible to explain exactly what has to be done here? Many thanks.

jex 11/04/06 11:24:25 AM EST

Problem solved - I was trying to drag the EditForm.mxml - but it's the EditForm component(as it says in the tutorial)which needs to be dragged - this is found in the custom component folder.

jex 11/04/06 10:19:33 AM EST

OK - I'm a bit new to both Flex and CF, but have been implementing the tutorial fine up until: "Going back to the main application file (mytodolist.mxml), switch to the design view and drag a new panel and inside drag your EditForm component." When I drag the EditForm component onto the panel, nothing happens. Would it be possible to explain exactly what has to be done here? Many thanks.

Francois-Yanick Bourassa 08/09/06 04:21:30 PM EDT

I found myself a bit confused to follow this article as it is a bit out of the real target - which is bringing new people to use Flex and ColdFusion. As a ColdFusion programmer, I found very interesting to try this example with Flex. But after couple paragraphs, started to be confused on which file I was suppose to put the code as Flex is a real new thing for me - I'm sure it will be the same for few of us - if it is not more! We use to read article where editor just put rectangle on source code by page - but this article seems to have a different goal!

I will figure out what was wrong in the code because I think I can but what about newbies!!!

This was my personal feedback!

AJAXWorld News Desk 08/09/06 08:35:47 AM EDT

Flex is a complete set of tools to develop rich Internet cross-platform applications based on the Flash platform. With Flex, you can create applications that not only have the 'wow factor' necessary to please clients and users alike, but the 'usability factor' necessary to make your application a real success.

cfdj news desk 08/08/06 08:29:03 PM EDT

Flex is a complete set of tools to develop rich Internet cross-platform applications based on the Flash platform. With Flex, you can create applications that not only have the 'wow factor' necessary to please clients and users alike, but the 'usability factor' necessary to make your application a real success.

CFDJ News Desk 08/08/06 07:25:22 PM EDT

Flex is a complete set of tools to develop rich Internet cross-platform applications based on the Flash platform. With Flex, you can create applications that not only have the 'wow factor' necessary to please clients and users alike, but the 'usability factor' necessary to make your application a real success.

AJAXWorld News Desk 08/08/06 07:11:51 PM EDT

Flex is a complete set of tools to develop rich Internet cross-platform applications based on the Flash platform. With Flex, you can create applications that not only have the 'wow factor' necessary to please clients and users alike, but the 'usability factor' necessary to make your application a real success.

AJAXWorld News Desk 08/07/06 03:11:03 PM EDT

Flex is a complete set of tools to develop rich Internet cross-platform applications based on the Flash platform. With Flex, you can create applications that not only have the 'wow factor' necessary to please clients and users alike, but the 'usability factor' necessary to make your application a real success.

SYS-CON Australia News Desk 08/07/06 09:34:46 AM EDT

Flex is a complete set of tools to develop rich Internet cross-platform applications based on the Flash platform. With Flex, you can create applications that not only have the 'wow factor' necessary to please clients and users alike, but the 'usability factor' necessary to make your application a real success.

@ThingsExpo Stories
For years, we’ve relied too heavily on individual network functions or simplistic cloud controllers. However, they are no longer enough for today’s modern cloud data center. Businesses need a comprehensive platform architecture in order to deliver a complete networking suite for IoT environment based on OpenStack. In his session at @ThingsExpo, Dhiraj Sehgal from PLUMgrid will discuss what a holistic networking solution should really entail, and how to build a complete platform that is scalable, secure, agile and automated.
The industrial software market has treated data with the mentality of “collect everything now, worry about how to use it later.” We now find ourselves buried in data, with the pervasive connectivity of the (Industrial) Internet of Things only piling on more numbers. There’s too much data and not enough information. In his session at @ThingsExpo, Bob Gates, Global Marketing Director, GE’s Intelligent Platforms business, to discuss how realizing the power of IoT, software developers are now focused on understanding how industrial data can create intelligence for industrial operations. Imagine ...
Hadoop as a Service (as offered by handful of niche vendors now) is a cloud computing solution that makes medium and large-scale data processing accessible, easy, fast and inexpensive. In his session at Big Data Expo, Kumar Ramamurthy, Vice President and Chief Technologist, EIM & Big Data, at Virtusa, will discuss how this is achieved by eliminating the operational challenges of running Hadoop, so one can focus on business growth. The fragmented Hadoop distribution world and various PaaS solutions that provide a Hadoop flavor either make choices for customers very flexible in the name of opti...
In the consumer IoT, everything is new, and the IT world of bits and bytes holds sway. But industrial and commercial realms encompass operational technology (OT) that has been around for 25 or 50 years. This grittier, pre-IP, more hands-on world has much to gain from Industrial IoT (IIoT) applications and principles. But adding sensors and wireless connectivity won’t work in environments that demand unwavering reliability and performance. In his session at @ThingsExpo, Ron Sege, CEO of Echelon, will discuss how as enterprise IT embraces other IoT-related technology trends, enterprises with i...
With major technology companies and startups seriously embracing IoT strategies, now is the perfect time to attend @ThingsExpo in Silicon Valley. Learn what is going on, contribute to the discussions, and ensure that your enterprise is as "IoT-Ready" as it can be! Internet of @ThingsExpo, taking place Nov 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 17th Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal an...
Wearable devices have come of age. The primary applications of wearables so far have been "the Quantified Self" or the tracking of one's fitness and health status. We propose the evolution of wearables into social and emotional communication devices. Our BE(tm) sensor uses light to visualize the skin conductance response. Our sensors are very inexpensive and can be massively distributed to audiences or groups of any size, in order to gauge reactions to performances, video, or any kind of presentation. In her session at @ThingsExpo, Jocelyn Scheirer, CEO & Founder of Bionolux, will discuss ho...
The true value of the Internet of Things (IoT) lies not just in the data, but through the services that protect the data, perform the analysis and present findings in a usable way. With many IoT elements rooted in traditional IT components, Big Data and IoT isn’t just a play for enterprise. In fact, the IoT presents SMBs with the prospect of launching entirely new activities and exploring innovative areas. CompTIA research identifies several areas where IoT is expected to have the greatest impact.
Every day we read jaw-dropping stats on the explosion of data. We allocate significant resources to harness and better understand it. We build businesses around it. But we’ve only just begun. For big payoffs in Big Data, CIOs are turning to cognitive computing. Cognitive computing’s ability to securely extract insights, understand natural language, and get smarter each time it’s used is the next, logical step for Big Data.
We are reaching the end of the beginning with WebRTC, and real systems using this technology have begun to appear. One challenge that faces every WebRTC deployment (in some form or another) is identity management. For example, if you have an existing service – possibly built on a variety of different PaaS/SaaS offerings – and you want to add real-time communications you are faced with a challenge relating to user management, authentication, authorization, and validation. Service providers will want to use their existing identities, but these will have credentials already that are (hopefully) i...
The 4th International Internet of @ThingsExpo, co-located with the 17th International Cloud Expo - to be held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA - announces that its Call for Papers is open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than 20 years ago.
17th Cloud Expo, taking place Nov 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Meanwhile, 94% of enterprises are using some form of XaaS – software, platform, and infrastructure as a service.
The Industrial Internet revolution is now underway, enabled by connected machines and billions of devices that communicate and collaborate. The massive amounts of Big Data requiring real-time analysis is flooding legacy IT systems and giving way to cloud environments that can handle the unpredictable workloads. Yet many barriers remain until we can fully realize the opportunities and benefits from the convergence of machines and devices with Big Data and the cloud, including interoperability, data security and privacy.
The Internet of Things is tied together with a thin strand that is known as time. Coincidentally, at the core of nearly all data analytics is a timestamp. When working with time series data there are a few core principles that everyone should consider, especially across datasets where time is the common boundary. In his session at Internet of @ThingsExpo, Jim Scott, Director of Enterprise Strategy & Architecture at MapR Technologies, discussed single-value, geo-spatial, and log time series data. By focusing on enterprise applications and the data center, he will use OpenTSDB as an example t...
The 17th International Cloud Expo has announced that its Call for Papers is open. 17th International Cloud Expo, to be held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, brings together Cloud Computing, APM, APIs, Microservices, Security, Big Data, Internet of Things, DevOps and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding business opportunity. Submit your speaking proposal today!
Scott Jenson leads a project called The Physical Web within the Chrome team at Google. Project members are working to take the scalability and openness of the web and use it to talk to the exponentially exploding range of smart devices. Nearly every company today working on the IoT comes up with the same basic solution: use my server and you'll be fine. But if we really believe there will be trillions of these devices, that just can't scale. We need a system that is open a scalable and by using the URL as a basic building block, we open this up and get the same resilience that the web enjoys.
SYS-CON Events announced today that MetraTech, now part of Ericsson, has been named “Silver Sponsor” of SYS-CON's 16th International Cloud Expo®, which will take place on June 9–11, 2015, at the Javits Center in New York, NY. Ericsson is the driving force behind the Networked Society- a world leader in communications infrastructure, software and services. Some 40% of the world’s mobile traffic runs through networks Ericsson has supplied, serving more than 2.5 billion subscribers.
Container frameworks, such as Docker, provide a variety of benefits, including density of deployment across infrastructure, convenience for application developers to push updates with low operational hand-holding, and a fairly well-defined deployment workflow that can be orchestrated. Container frameworks also enable a DevOps approach to application development by cleanly separating concerns between operations and development teams. But running multi-container, multi-server apps with containers is very hard. You have to learn five new and different technologies and best practices (libswarm, sy...
SYS-CON Events announced today that DragonGlass, an enterprise search platform, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. After eleven years of designing and building custom applications, OpenCrowd has launched DragonGlass, a cloud-based platform that enables the development of search-based applications. These are a new breed of applications that utilize a search index as their backbone for data retrieval. They can easily adapt to new data sets and provide access to both structured and unstruc...
Converging digital disruptions is creating a major sea change - Cisco calls this the Internet of Everything (IoE). IoE is the network connection of People, Process, Data and Things, fueled by Cloud, Mobile, Social, Analytics and Security, and it represents a $19Trillion value-at-stake over the next 10 years. In her keynote at @ThingsExpo, Manjula Talreja, VP of Cisco Consulting Services, will discuss IoE and the enormous opportunities it provides to public and private firms alike. She will share what businesses must do to thrive in the IoE economy, citing examples from several industry sector...
All major researchers estimate there will be tens of billions devices - computers, smartphones, tablets, and sensors - connected to the Internet by 2020. This number will continue to grow at a rapid pace for the next several decades. With major technology companies and startups seriously embracing IoT strategies, now is the perfect time to attend @ThingsExpo, June 9-11, 2015, at the Javits Center in New York City. Learn what is going on, contribute to the discussions, and ensure that your enterprise is as "IoT-Ready" as it can be