This example illustrates how you can use Adobe Flex to build a simple application that your sales team can use in weekly sales meetings to view and edit sales opportunities in real time without having to click into each one.

Figure 1. A simple application for viewing and editing sales opportunities in real time.

Experience the application

Requirements

In order to make the most of this article, you need the following software and files:

Flex Builder 3

• Try
• Buy

A Free Force.com developer account

• Learn more

Sample files:

• SalesForceOpportunityDemo_source.zip (ZIP, 264 KB)

Prerequisites

Familiarity with using Flex Builder and developing applications with the Flex framework.

Using the demo

In order to make the most of this demo, be sure to have Flex Builder installed. If you've used the Force.com IDE before, then the Flex Builder environment should look fairly familiar—they are both built on the Eclipse platform. This example leverages the Flex Toolkit for Adobe AIR and Flex which exposes the Force.com SOAP Web Services API to Flex Builder.

Create a new project

To get started, launch Flex Builder and create a new project (File > New > Flex Project). In the Project Name text box, enter SalesForceDemo and click OK.

Flex Builder sets up a folder structure, ready for development. Instead of writing all the code yourself, all you need to do is download the sample file that accompanies this article, SalesForceDemoOpportunity_source.zip.

Copy the example source code

The ZIP file contains two folders, libs and src. After you've extracted them, you want to copy both folders, and paste them over what is currently in the project. If you've done this correctly, you should have a file in the libs folder called force-flex.swc as well as several folders in the src folder.

When you have the files in place, you will have a file called SalesForceDemo.mxml that was extracted from the ZIP file. Right-click this file and select Set as Default Application. You need to do this just in case you named the project differently; if that were the case, Flex would use the file it created by default.

After you set the SalesForceDemo.mxml file as the default application, you can safely delete the file that Flex Builder created.

Change the username and password

Now you need to update the application to attach to your Salesforce org. Double-click SaleForceDemo.mxml to open it and look for the login() function. You need to replace the username and password with your own username, password, and Security Token (see Figure 2).

Figure 2. A code snippet that illustrates how you log in to your Force.com instance.

The Security Token can be generated under Personal Setup (Setup > My Personal Information > Reset My Security Token) in Salesforce.com (see Figure 3). You will receive an email with a Security Token. This allows your Flex application to connect regardless of the incoming IP Address.

Figure 3. Click the Reset My Security Token link in Force.com to receive an email with a Security Token.

How it works

Once the login() function is executed, your Flex application has a valid connection and Session ID from Force.com can be used to execute any Force.com Web Service call. For example, in this application we are retrieving a list of Opportunity data (see Figure 4).

Figure 4. This code snippet shows what a SOQL query looks like from within Flex.

Flex development differs from Force.com development because it uses an asyncronous communication model. This requires a slightly different approach than you might be used to if you have not developed with an asynchronous language before. At the end of your SOQL query you specify the Async responder you would like to use to handle the query results (see Figure 5).

Figure 5. This code shows how a Force.com call needs an AsyncResponder to hold the response back from Force.com.

The responder itself is fairly straightforward and only verifies that records were returned and loads them into an ArrayCollection (see Figure 6).

Figure 6. This code snippet demonstrates how data returned from Force.com is handled by the AsyncResponder.

But what about saving any changes that were made in the data grid? The following code snippet illustrates the steps that are required to do so. Basically you just need to create a new, empty array, loop through the Opportunity data, move them into an SObject, and then send the updates to Force.com. The great thing about the toolkit is that it handles the creation of the SOAP and makes coding clean and straightfoward.

Figure 6. This code snippet illustrates how data returned from Force.com is handled by the AsyncResponder.

Run your application

At this point, you should be able to run the application. Go to the menu and click Run > SalesForceDemo. A browser should open and you will have the following functionality:

• See a list of all open opportunities.
• Edit stage or close date in the data grid.
• Double-click an opportunity to have a pop-out to edit more details.
• Click Save All to save the changes.
• If you right-click on the running application, you can also see the source code. (This has been implemented just for this sample application, but is not a normal Flex best practice).

Where to go from here

Refer to the following resources to learn more about integrating the Force.com platform and Flex:

• Understand the architecture of applications powered by Force.com and Flex
• Get started with the Force.com Toolkit for Adobe AIR and Flex
• Explore the Model Metrics Force.com Account demo

About the author