The following post will lay out a basic “Hello World” example of how to create a Flex application using a webservice call to a Force.com APEX webservice method. This example will show you how to create a Force.com Apex webservice and cal l it from Flex. While this is just a simple hello world example you should quickly be able to see how you could leverage the power of both Flex and the Force.com platform to create rich client applications.
In this post I will be building on the Salesforce.com tutorial on how to connect Flex and Salesforce.com. Here is a link to that post: Salesforce/Flex Tutorial
Step 1 Salesforce: Create the APEX class
The first step will be for us to create the logic that will run our application. We will do this by creating an Apex class in our Salesforce.com org using Eclipse. This class is what will be called by the Flex end of application. Creating this class is like creating any other class except we will define the class as “global” and define all the methods within it as “webService”.
You will see that our class is named “helloWorldWebService” and it contains one function “helloWorldCall” which accepts one parameter “world” and returns the parameter “world” with ‘Hello’ on the front of it when called.
Step 2 Flex: Create the Flex End of the Application
Next we will need to create a Flex application to consume this webservice we created. As mentioned earlier we will assume that you already have downloaded the Salesforce library and have included it in your Flex library (Here is a link to a simple tutorial: Salesforce/Flex Tutorial).
The first part of the Flex application will be writing the user interface side of the code. In our example we will have a simple text field for input and a button that will fire the function that will log us into Salesforce.com, call the webservice, and return the results to the screen.
In the few lines of code above we create a panel to hold our fields and then add the input field, button and output field. Below is what our UI will look like.
The text field will allow us to enter a string which once we press the “Go” button will be displayed on the screen with “Hello” concatenated on the front of it by our Salesforce webservice.
Next we will move on to the meat of the application. Above we see that when the button is clicked it calls the “login()” function. This function is a simple login function that accepts a username and password and logs into Salesforce.com with those credentials. Below is the code for the login() function:
Once this function successfully logs into salesforce.com it will call our “callHelloWorld” function. This is the function that will pass our variable to our webservice and return the results to our screen.
Our function has three major sections to it. The first lines 40-41 are defining the parameters that we will pass to our webservice. In our example we are just passing one string. We get this by grabbing whatever the user entered into the “helloInput” text box.
Next on lines 42-49 we define the function that will be called once the webservice is run and returns data. In our example we take the result of the call and stick it into our webserviceOutput field.
Lastly on lines 51-57 we call the webservice. This call accepts four parameters webservice name (line53), method being called (line 54), parameters passed (line 55) and function to call on complete (line 54).
The result:
Below is a screenshot of the finished state of our hello world application.
