Sunday, July 12, 2009

Deploying Flex applications to - Part1 is a vendor of Customer Relationship Management(CRM) solutions, which it delivers to business over the internet using the SaaS(Software as Service) model. Sales Force is providing different Services and Products. Platform as the Service is one of the products. Platform's Platform-as-a-Service product is known as the Platform. The platform allows external developers to create add-on applications that integrate into the main Sales force application and are hosted on's infrastructure.

These applications are built using Apex (a proprietary Java-like programming language for the Platform) and Visual force (an XML-like syntax for building user interfaces in HTML, AJAX or Flex).

Adobe Flex is a software development kit released by Adobe Systems for the development and deployment of cross-platform RIA(Rich Internet Applications) based on the Adobe Flash
platform. Flex applications can be written using Adobe Flex Builder or by using the freely available Flex compiler from Adobe.

In this post we are going to see how we can use the features of Adobe Flex in As we know, Flex has several advantages over other RIA technologies in terms of Rapid Development and Productivity etc. As flex has built based on Flash platform, it can provide very rich interfaces, more intuitive websites. Flex has very rich set of controls and Charting tools. Here i am using the Charting features of Flex inside the sale force.

To work on this example we require the following,

1. Flex Builder 2 or 3

Download the trial from here.

2. account ( Developer Edition is also fine)

Get the Developer account from here.

3. The client systems whoever accessing this sample should have the Flash Player 9 or Later

Download the flash player from here.

Here We are going to create a simple chart which will show the Product Group Sales.

Steps for creating the Flex Application:

1. Open the Flex Builder and create a new project.

2. Open the Design view and Drag a Column Chart from Component Explorer to Design View.

3. Create a XML file which will have the data. Include this XML file in the application by using mx:XML tag instead of HTTP Service calls. If we use mx:XML tag it will embed the xml file into swf file at the of compile time itself. So that export this SWF file to will become very easy.

4. Add an image to the Application Control bar and specify the source. While specifying the Source use @Embed. So that it will embed the image into SWF file at the time of Compilation itself.

5. Set the Data provider to the chart and Configure the Category Axis and Series data fields.

6. Compile and Run the Application to Test the Application.

7. Now go to Project then Export to Release Build and follow the wizard steps. After finishing the steps it will create a new folder called bin-release. Use SWF file inside this folder instead of SWF file from Bin-Debug folder. Because the swf file from Bin-Release folder will be optimized for deployment and it will have less size than other swf file.

Now the Flex Application is ready to be deployed in Follow the steps below to deploy it in Sales Force.

1. Open in the Browser.

2.Click on Customer Login and Enter Credentials and click Login.

3. You will be landed up in a default View.

4. Click on Visual Force Tab to see the Existing Applications deployed already into the page.

5. Click on setup Button on the top to Configure the Page. It will open site Administration Page.

6. Expand App Setup then expand Develop then click on Static Resources. It will open a list Static Resources already exported.

7. Click on new button to Exported the our newly created swf file. It will open a upload page.

Upload the required swf file and click save button. Then it will upload the page and display the File statistics.

8. Expand App Setup then Expand Create and Click on Tabs. It will display the list of all custom created Tabs.

9.Click on the edit button of required visual force page. It will open Custom Tab Information Page.

10. Click Start Here to see the Content/Source of the Visual Source Page. By Default it will open the code in read only mode. Click on Edit button to edit the APEX code.

11. The Code will have the several apex:pageBlock. Each Page block will represent a section on the Page. We need to add one more page block. Add the following code add new flash resource to the Page Block.

12. The Page block title will specify the title of the section in the visual force page. The Source swf file will be specified in apex:flash tag. We can set the width and height of flex application also.

Add the code and Click Save. Then the Page will reopened in read only mode. Then open the visual force page.

Great!! The application is deployed and ready to use.

Here in this sample, we used static and sample XML. Instead we can draw the data directly from the Sales Force using Sales web services.

I will be posting the this sample in Next Post.

Example Screen cast : Will be uploaded very soon.

No comments:

Post a Comment