This example illustrates how you can use Adobe Flex to build a simple application that incorporates Flex into Visualforce and Apex and illustrates the Flex charting and editing capabilities (see Figure 1).

Figure 1. A simple application that incorporates Flex into Visualforce and Apex.

Experience the application

The goal of this exercise is to create a custom Visualforce page that will have a Flex widget embedded, and then pass the account id into the Flex widget to retrieve the required information.

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:

• SalesForceAccountDemo_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). For the Project Name text box, use SalesforceAccountDemo 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, SalesForceAccountDemo_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 some folders in the src folder.

When you have the files in place, you will have a file called SalesForceAccountDemo.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 were the case, Flex would use the file it created by default. After you set SalesForceAccountDemo.mxml 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 SaleForceAccountDemo.mxml to open it and look for the login() function (see Figure 2). You need to replace the username and password with your own username, password, and Security Token (see Figure 2).

Figure 2. This code snippet 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 that can be used to execute any Force.com Web Service call. For example, in this application we are retrieving Account data by passing an ID (see Figure 4).

Figure 4. This code snippet shows what a Force.com Account query looks like from within Flex.

Force.com project preparation

Now that you have the project started in Flex Builder continue with the following steps to get it ready to use in Force.com so you can pass parameters into the Flex application:

1. Shut off history management.
2. Edit your html-template/ac_oetags.js file, search for ".swf" and change it to "".

Upload files to Force.com

Now you are ready to upload a couple of files from Flexbuilder up to Force.com to make the application available to run within a Visualforce page. Force.com has a concept of Static Resources to contain files such as a Flex application (.swf) or any Javascript files that may be required for your application (see Figure 5).

Figure 5. In the Force.com setup menu, this is the area that lets you upload your SWF file as a static resource so it can be referenced from a Visualforce page.

1. In Flex Builder, separate the ac_oetags.js file, and upload it as a static resource to your Force.com account.
2. Name the static resource Flex_ac_oe. (You have to do this because when using SWF files in an Apex page, you can't use the default wrapper that Flex gives you; you have to create another static resource that is the SWF file, and then you use the page and the normal HTML wrapper.)
3. Upload the SWF file to Force.com as a static resource and name it Flex_SalesforceAccountDemo (see Figure 6).

Figure 6. Within the Force.com setup menu these are the options you need to set when creating a static resource.

Create a simple Apex controller

Set up an AccountDetailController that will return the parameters to the Apex page:

public class AccountDetailController 
{
    public String accountId;
    public String getAccountID() {return ApexPages.currentPage().getParameters().get('Id');}
    public AccountDetailController(ApexPages.StandardController controller) 
    {
 
    }
 
}

Create a Visualforce page as a Flex container.

In Force.com, go to Setup > Develop > Pages (see Figure 7).

Figure 7. Within the Force.com setup menu this is the area that allows you to create a new Visualforce page.

Click the New button, name the page AccountDetail, and copy and paste the following code (when finished, save your file):

<apex:page showHeader="false" standardStylesheets="false"
extensions="AccountDetailController" standardController="Account">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Salesforce Account Demo</title> 
<style>
body,html { height:100%;margin: 0px; overflow:hidden }
</style> 
<script src="{!$Resource.Flex_ac_oe}" language="javascript" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript"> 
//
-----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 8;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;
//
----------------------------------------------------------------------------- 
</script>
</head> 
<body scroll="no">
<div height="100%" width="100%"> 
<script language="JavaScript" type="text/javascript"> 
// Version check for the Flash Player that has the ability to
start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65); 
// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion,
requiredMinorVersion, requiredRevision); 
if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed 
var flashVars = '';
flashVars += "session_id={!$Api.Session_ID}";
flashVars += "&server_url={!$Api.Partner_Server_URL_150}";
flashVars += "&account_id={!accountID}"; 
AC_FL_RunContent(
"src", "{!$Resource.Flex_SalesforceAccountDemo}", "width", "100%",
"height", "100%", "align", "middle", "id", "Flex_SalesforceDemo",
"quality", "high", "bgcolor", "#ffffff", "name", "Flex_SalesforceDemo",
"allowScriptAccess","sameDomain", "type", "application/x-shockwave-flash",
"FlashVars",flashVars, "pluginspage", "/go/getflashplayer"
);
} 
</script>
 
</div>
<noscript>
Javascript reqired. Please turn on javascript.
</noscript>
</body>
</html>
 
</apex:page>

Try your code

Now that you have uploaded the static resources and created Apex and Visualforce it is time to give this application a try in Force.com. To try out your Visualforce page, you need to modify the URL in the browser (assuming you are logged into Force.com); your URL will look something like this:

https://YOURSERVERURL/apex/AccountDetail?id=PASSINACCOUNTIDHERE

Your Server URL will remain as is, you just need to paste in an Account ID to pass to the Visualforce page.

Note that the Flex code now runs a handleApplicationComplete function that collects the parameters that are passed in.

As a next step, you could link this Visualforce page via a custom button or place it in a custom tab depending on your need. All of the code is well commented and should serve as a good baseline for you to build upon for your own needs.

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 Opportunity demo

About the author