Integrating Force.com and Flex using Force.com Tool kit for Flex.

Developing Basic Application:-

 For developing Flex and Force.com apps we need to install FlexBuilder3 and we need Force.com toolkit for Flex.

You can download Force.com tool kit for Flex from here.


Importing the Library In to your Project:-


You can find the libraries in the bin folder of the toolkit ZIP file. You'll need force-flex.swc if you're building a browser-based Flex application or force-air.swc if you're building a desktop AIR application. To import the toolkit library into your project, you'll need to place it in your project's libs folder

The Connection Object

The main class within the toolkit is the Connection class. This class gives you access to all the key Force.com operations such as login, query and update. You'll need to create an instance of this class and keep that instance alive for the duration of your communication with Force.com. The easiest way to create an instance of the class is to declare it in MXML like this:


                   <Salesforce :Connection  id ="Force">



The salesforce namespace should automatically get filled in for you by the IDE but if it doesn't you can add the following attribute to your application MXML's root element:


                    xmlns:salesforce="http://www.salesforce.com"


Alternatively you can create an instance of the class directly through ActionScript - the fully-qualified name is com.salesforce.Connection.

Process:-

   

 Step1:-  Open Flexbuilder3  and create project.

              Flexbuilder3-->File-->New-->FlexProject.

              Name it as "Flex Force Demo" ,select Application type as "Desktop Application" and application 

              server type as "None" finally click on Finish

Step2:- In Force.com toolkit for flex, in bin folder we can find two files

                               1.Flex-Air swf file

                               2. Force-Flex swf file

             

            copy both files ,and paste them in to your flex project libs folder.

Step3:- Goto your project in project navigation window, And double click on .MXML file.

            Projectname-->src-->Projectname.MXML file or Main.MXML

             

             Now copy and paste the following code to get salesforce records in to grid in flex.

             

=======================================================================

            <?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication  applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml"    layout="absolute" xmlns:salesforce="http://www.salesforce.com/">

<salesforce:Connection  id="force" />

<mx:DataGrid id ="dg" left="10" right="119" top="10" bottom="55"><!-- Decalre datagrid to bind result data to datagrid-->

</mx:DataGrid>

<mx:Script>

<![CDATA[

import com.salesforce.results.LoginResult;<!-- To handle the login result(valid or invalid)-->

import com.salesforce.results.QueryResult;<!--To Handle results-->

import com.salesforce.AsyncResponder;<!--To Handle Response from Force.com>

import com.salesforce.objects.LoginRequest;<!--To Handle login Request-->

private function init(): void{

var lr:LoginRequest=new LoginRequest();

lr.username="Force.com user Name";

lr.password="Password and Securitytoken";

lr.callback=new AsyncResponder(loadGrid);

force.login(lr);    

}

private function loadGrid(lr:LoginResult):void{

force.query("Select * From Account", 

   new AsyncResponder( function(qr:QueryResult):void{

    dg.dataProvider = qr.records;<!-- here we are binding result data to data grid using data grid id "dg" and data provider is the property of data grid to bind data to datagrid-->

   })

  

 );

   

}

]]>

</mx:Script>

</mx:WindowedApplication>

==================================================================

in the above example we are querying  data from Account Standard object.

AsyncResponder is used handle the result from Force.com.

To run Project click  Ctrl+F11   or goto project-->rightclick-->Runas-->Desktop Application

Now you can see results in data grid.

Note:- For every flex project SWF files are created in "bin-debug" Folder.