Welcome!

You will be redirected in 30 seconds or close now.

ColdFusion Authors: Yakov Fain, Jeremy Geelan, Maureen O'Gara, Nancy Y. Nee, Tad Anderson

Related Topics: Adobe Flex, ColdFusion, Machine Learning

Adobe Flex: Article

Your First Adobe Flex Application with a ColdFusion Backend

The wow factor plus usability

However, the compiler still complains that it can't find the TaskItem component. "But I just created it!" you say. The problem is that the main application doesn't know where to find it. Since you saved it in the same folder, you have to indicate that other components can be found there by adding the following attribute to the Application tag in the mytodolist.mxml file:

xmlns="*"

Lastly, declare the taskData variable in your new component (TaskItem.mxml) so that it will finally compile without errors:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%">
   <mx:Script>
     <![CDATA[
       [Bindable]
       public var taskData:Task = null;
     ]]>
   </mx:Script>
   <!-- place other code here -->
</mx:Canvas>

Why wouldn't it compile? Because when you put the tag <TaskItem> in the main application, you also specified the attribute: taskData="{taskList.currentItem}." This was necessary to be able to send the current task to the custom component during each loop of the Repeater. This variable has to be set as bindable so that you can bind to its properties in the controls inside this component.

If you look carefully, you'll see that this variable has the type "Task." This type refers to the ActionScript file automatically generated by the ColdFusion wizard. The properties of this class match exactly those of your Task ColdFusion component.

An instance of the TaskItem component (Figure 5) shows the description and priority of the task and a button to remove the task. As described above, the data is set when the component is instantiated by the Repeater and accessible in the variable "taskData" inside the component.

You can use the Design view to drag an Image, a Label, and a Button and put it in the Canvas. The Properties panel of the Design view shows common properties of the selected component. In that panel, set the text property of the Label as: {taskData.description} and the source property of the Image as: images/priority{taskData.priority}.png. Note that you should have a folder called "images" with an image for every priority you want to show. These images should be called "priorityNUMBER.png," where NUMBER should be replaced with the priority number (i.e.: 1, 2, 3).

Everything should compile, but unfortunately you won't be able to see anything because there's no data.

Getting Data from a ColdFusion Service
To load data from a service, you must use a RemoteObject. The simplest way to use a RemoteObject to call a ColdFusion service is by setting its destination to "ColdFusion" and its source to the path to that component. The application will call two methods on the TaskGateway component (generated by the wizard) so you can specify them explicitly inside the RemoteObject tag. When the response from the service comes back, you want a function to be called. The function to call will be different for each method, so you can specify it in the <mx:method> tag with the "result" attribute. Set the result of the method "getAll" to the function "tasksReceived(event)" and the result of the method "save" to the function taskSaved(event)."

<mx:RemoteObject
    id="myRemoteObject"
    destination="ColdFusion"
    source="mytodolist.taskGateway"
    fault="Alert.show(event.fault.faultstring, 'Error');">
    <mx:method name="getAll" result="tasksReceived(event)" />
    <mx:method name="save" result="taskSaved(event)" />
</mx:RemoteObject>

Inside a script block, implement the tasksReceived function as follows to set the source of the task ArrayCollection to what the service sent as a response of the getAll method:

private function tasksReceived(event:ResultEvent):void {
    tasks = new ArrayCollection();
    tasks.source = event.result as Array;
}

If you open TaskGateway.cfc, you'll see that the method "getAll" returns an array of Task objects. When you set that array to the source of the tasks ArrayCollection, the Repeater will get populated with this data since you declared it as the Repeater's dataProvider.

If Flex Builder didn't add the required import statements automatically, add:

import mx.controls.Alert;
import mx.rpc.events.*;
import mx.events.*;

The other function you need to implement is taskSaved. For now leave it empty; you'll complete it later.

private function taskSaved(event:ResultEvent):void {
}

Everything works, but...you still don't see anything on the screen. That's because you haven't called the service yet. Since you want to load the list of tasks as soon as the application loads, put a function call in the applicationComplete attribute of the Application tag. You'll set it to call a custom function called setUp():

applicationComplete="setUp()"

Then implement the function so that it sends the actual request to the server:

private function setUp():void{
    myRemoteObject.getAll.send();
}

Of course you still won't see anything if your database is empty. To test it out, just add a couple of records manually. You'll build the form to enter new items in the next section.

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)

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.


IoT & Smart Cities Stories
@CloudEXPO and @ExpoDX, two of the most influential technology events in the world, have hosted hundreds of sponsors and exhibitors since our launch 10 years ago. @CloudEXPO and @ExpoDX New York and Silicon Valley provide a full year of face-to-face marketing opportunities for your company. Each sponsorship and exhibit package comes with pre and post-show marketing programs. By sponsoring and exhibiting in New York and Silicon Valley, you reach a full complement of decision makers and buyers in ...
While the focus and objectives of IoT initiatives are many and diverse, they all share a few common attributes, and one of those is the network. Commonly, that network includes the Internet, over which there isn't any real control for performance and availability. Or is there? The current state of the art for Big Data analytics, as applied to network telemetry, offers new opportunities for improving and assuring operational integrity. In his session at @ThingsExpo, Jim Frey, Vice President of S...
The Internet of Things is clearly many things: data collection and analytics, wearables, Smart Grids and Smart Cities, the Industrial Internet, and more. Cool platforms like Arduino, Raspberry Pi, Intel's Galileo and Edison, and a diverse world of sensors are making the IoT a great toy box for developers in all these areas. In this Power Panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists discussed what things are the most important, which will have the most profound e...
Two weeks ago (November 3-5), I attended the Cloud Expo Silicon Valley as a speaker, where I presented on the security and privacy due diligence requirements for cloud solutions. Cloud security is a topical issue for every CIO, CISO, and technology buyer. Decision-makers are always looking for insights on how to mitigate the security risks of implementing and using cloud solutions. Based on the presentation topics covered at the conference, as well as the general discussions heard between sessio...
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...
Rodrigo Coutinho is part of OutSystems' founders' team and currently the Head of Product Design. He provides a cross-functional role where he supports Product Management in defining the positioning and direction of the Agile Platform, while at the same time promoting model-based development and new techniques to deliver applications in the cloud.
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settl...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
LogRocket helps product teams develop better experiences for users by recording videos of user sessions with logs and network data. It identifies UX problems and reveals the root cause of every bug. LogRocket presents impactful errors on a website, and how to reproduce it. With LogRocket, users can replay problems.
Data Theorem is a leading provider of modern application security. Its core mission is to analyze and secure any modern application anytime, anywhere. The Data Theorem Analyzer Engine continuously scans APIs and mobile applications in search of security flaws and data privacy gaps. Data Theorem products help organizations build safer applications that maximize data security and brand protection. The company has detected more than 300 million application eavesdropping incidents and currently secu...