Quick start: Create your first Force.com Flex web application

Additional Requirements

A Force.com account

• Sign up

Adobe Flash Builder for Force.com

• Try

This tutorial will step you through the process of building a Force.com Flex web application that retrieves, displays, and edits salesforce.com data with Flash Builder for Force.com in an hour.

Time to complete: 5 minutes

In this section, you use the salesforce.com website to set up access to salesforce.com data. You will:

• Get a Force.com Developer Edition account if you do not already have a Force.com Developer, Enterprise, or Unlimited account .
• Grant permission to access salesforce.com data.
• Examine the standard salesforce.com Contact object.

If you sign up for a new Force.com Developer account, you will not have added any of your own data to the salesforce.com databases yet. This type of account, though, comes with some sample data that you will take a look at use in this quick start.

Sign up with salesforce.com

In order to build an application that accesses salesforce.com data with the web service API, you must have a Force.com Developer Edition, Enterprise Edition, or Unlimited Edition account. If you do not a have one or these accounts already, start now by getting a free Developer Edition account. Otherwise, proceed to the Grant permission to access data section below.

1. Open a browser and go to the Developer Force sign-up website.
2. Fill out all required fields and click the Submit button.
3. Open your email and wait until you receive a login confirmation email from salesforce.com. You should receive the email within 5 minutes.
4. When you receive the email from salesforce.com, click the link to log in using the username and temporary password contained in the email.
5. On the salesforce.com web page, change your password and click the Save button. You are now ready to use your new Force.com account.

Grant permission to access data

In order to log in to a Force.com Flex web application not embedded on a salesforce.com VisualForce page, you must either be logging in from an IP address in your companies trusted network or you must include a security token with your login information.

If you are outside the trusted network, you can specify additional IP addresses or ranges of addresses that your organization trusts to access the data. This works if you have a static IP address. If you do not have a static IP address, you need to get a security token that you pass with your username and password when you make requests.

Note: If you are not sure if you are on a trusted network or not, you can skip this section and come back to it later if you get an error when you try to log in to the application you build.

1. Log in to salesforce.com if you are not already.
2. Click the Setup link at the top of the page see Figure 1 .

If you are located at a static IP address that is not on your companies trusted network, complete the following steps.

1. In the sidebar menu, go to Administration Setup > Security Controls > Network Access.
2. On the Network Access page, click the New button in the Trusted IP Ranges section (see Figure 2).

3. Enter a Start IP Address and an End IP Address and then click the Save button.

If you are located at a dynamic IP address that is not on your companies trusted network, complete the following steps.

1. In the sidebar menu, go to Personal Setup > My Personal Information > Reset My Security Token (see Figure 3).

2. Click the Reset Security Token button. Your security token will be mailed to the email address associated with this account.
3. Wait until you receive an email from salesforce.com containing the security token. Be sure to save this email; you will need the value of the security token to log in from your application.

Examine a standard salesforce.com data object

If you are new to salesforce.com, finish up on the salesforce.com website by taking a look at some of the default tables and data that come with your account and then locating the names of the tables and fields you need to use to access them via the web service API.

All Force.com accounts (except the Free Edition) come with a number of standard prebuilt objects that are available for you to use including Account, Contact, Lead and many more. A salesforce.com object is just a database table. For the Developer Edition account, these tables are pre-populated with some same data that you can use to build your first Force.com Flex application. You can customize these prebuilt objects and you can also build your own custom objects (custom database tables) that allow you to store information unique to your organization. See the references at the end of this quick start for more information about working with salesforce.com data.

1. In the sidebar menu, click Customize under App Setup (see Figure 4). You will see a list of objects already created for your account (Leads, Accounts, Contacts, and many more). Not all of the items listed under Customize are standard objects; the items that have Fields as a sub option are objects.

2. Click Contact > Fields and examine the standard fields for this prebuilt object (see Figure 5).

3. Under Field Label, click Name (see Figure 5 above) and see that the Field Name is equal to Name (see Figure 6). You will access this field using the API in your Force.com Flex application as Contact.Name.

4. Click the Back to Contact Fields link and repeat step 3 to see the field names for other Contact fields.
5. Finish by looking at the sample data in this table.
6. In the app drop-down in the upper-right corner, select Sales (see Figure 7).

7. Click the Contacts tab (see Figure 8).

8. On the Contacts page, click the Go! button next to the View drop-down for My Contacts. You should see a list of the existing Contact data (see Figure 9).

9. Click the link for one of the contacts to view the detailed data for that contact.
10. Leave your browser open. You will return to the salesforce.com website later.

Back to top

Time to complete: 5 minutes

You are now ready to use Flash Builder for Force.com to build an application that retrieves, displays, and edits salesforce.com data. The first step is to build a basic Force.com Flex application with login functionality.

1. Unless you have done so already, download and install Flash Builder for Force.com.

   Note: If you already have Eclipse or Flash Builder installed, you must still install Flash Builder for Force.com as a separate Eclipse instance. Flash Builder for Force.com is not available as a plugin to existing Eclipse instances.

2. Open Flash Builder for Force.com.
3. If you see a Welcome screen, close it by clicking the X in the Welcome tab.

Create a Force.com Flex web project

Get started by creating a Force.com Flex project in Flash Builder for Force.com.

1. From the main menu, select File > New > Other.
2. In the New dialog box, expand the Flash Builder option, select Force.com Flex Project, and then click the Next > button (see Figure 10).

3. In the New Flex Project dialog box, enter SalesforceContacts as the project name (see Figure 11).

4. Leave the default project location selected or navigate to a new location where you would like your project folder created.
5. For the Application type, select Web (see Figure 11 above).
6. Make sure the Flex SDK version is set to Use default SDK and the Application server type is set to None/Other.
7. Click the Finish button.
8. Locate the generated MXML file in the Package Explorer (see Figure 12) and look at its code. It contains a login form and uses the Force.com Flex framework to provide login functionality.

9. Click the green Run As... button (see Figure 13). The application does not have any content or do anything yet (you add that later) but you can test the login functionality you get automatically with the Force.com Flex framework and starting code.

10. In the Run As dialog box, select Web Application and click OK. You should see your application in a browser window (see Figure 14).

11. Enter an invalid username and password and click Login. You should get a login error message.
12. Click OK to return to the login form and enter your correct Force.com account username and password and then click Login.

    If you are logging in from a computer within your companies trusted network, you should successfully log in to your application (see Figure 15).

If you are logging in from a computer outside your companies trusted network, you will get a login must use security token error.

13. If you got the security token error message, complete the following steps:
    • Ensure you completed one of the sections in the Grant permission to access data section earlier in the quick start. If you are on a dynamic IP address, complete the rest of the steps.
    • Go to your email and locate the email sent to you from salesforce.com when you reset your security token in the last section.
    • Return to the application in the browser and click OK to return to the login form and enter your correct username and password again, but this time append your password with the security token (do not put any spaces between them). For example, myPasswordmyToken.
    • Click Login again. This time you should log in successfully (see Figure 15 above).
14. Close the application.

Set application properties

Next, set what salesforce.com objects the application is going to use and then speed up testing of your application during development by adding a default username and password. This way you don't have to manually enter values every time you run the application which gets tedious very quickly.

1. Return to SalesforceContacts.mxml and change the value of the requiredTypes property of the F3WebApplication tag from "Account,Contact" to just "Contact".
2. Locate the username TextInput tag and set its text property to your username.

Locate the text property of the password TextInput control and set it equal to your password or if you are outside your companies trusted network, your password appended by your security token. Remember to remove the default values before deploying your application.

3. Run the application. The login form should be pre-populated.
4. Click Login to successfully log in to the application.
5. Close the application.

Back to top

Time to complete: 20 minutes

Next, use classes in the Force.com Flex framework to retrieve salesforce.com data. To interact with salesforce.com data, you use methods of the class F3WebWrapper (com.salesforce.flexforforce.F3WebWrapper). You use the query() method to retrieve data from the local data store and the save() and deleteItem() methods to update the data in the Force.com cloud.

In this section, you are going to use the F3WebWrapper query() method to retrieve data. You pass to the query() method two arguments, a String of the SQL to execute and a responder function to handle successful or unsuccessful query calls.

Browse the API

1. In a browser window, open the Force.com Flex API documentation.
2. In the Packages frame, navigate to com.salesforce.flexforforce.
3. Click the link for the F3WebWrapper class and look at its methods (see Figure 16).

Retrieve data

4. Return to SalesforceContacts.mxml in Flash Builder for Force.com.
5. Inside the Script block, create a new private variable called _wrapper of type F3WebWrapper. Be sure to select F3WebWrapper from code-hinting so the import statement for the class is written for you (see Figure 17).

6. Inside the loginCompleteHandler () function, instantiate the _wrapper variable. It is equal to the wrapper property of the F3WebApplication instance (you can return to the API reference in the browser to confirm this), which in this application has an id of app.

7. Inside the loginCompleteHandler() function, call the F3WebWrapper query() method and pass to it a String equal to the text for the query statement you want to execute against Force.com: retrieve the Id and Name fields and order by the Name field. This query statement must be written using a subset of SOQL, the Salesforce.com Object Query Language.

   Unlike Name, Id field was not listed as a field for the Contact object on salesforce.com. Every Force.com object, though, has an Id field that uniquely identifies it. You are not going to display the Id field in your application, but you need to retrieve it so you can later update these records on Force.com.

   Note: You cannot use * in the SOQL statements for Force.com Flex web applications.

8. For the second query() method argument, create a new instance of the mx.rpc.Responder class and specify a new function called contactQueryResultHandler to handle the results and a function called queryFaultHandler to handle the faults. Be sure to select mx.rpc.Responder from code-hinting so the import statement is written for you.

9. Return to the Flex for Force.com API documentation in the browser window and navigate to the query() method of the F3WebWrapper class (see Figure 18). The types of objects passed to the result and fault handlers are specified here.

10. Inside the Script block, create a protected function called contactQueryResultHandler that receives one argument called data of type ArrayCollection and returns nothing. Successful query calls return an ArrayCollection of Account objects. The ArrayCollection class is a Flex framework class that essentially wraps an Array so that its contents are monitored for changes. Be sure to select ArrayCollection from code-hinting so the import statement is written for you.

11. Inside the Script block, create a protected function called queryFaultHandler that receives one argument called message of type F3Message and returns nothing. When a query fails, an F3Message object (com.salesforce.notifications.F3Message) is returned which has a description property. Be sure to select F3Message from code-hinting so the import statement is written for you.

12. Inside queryFaultHandler(), use the Flex Alert component to display a pop-up box by calling its static show() method and passing to it the message you want to display, message.description , and a title for the box, "Error".

Look at the data using the debugger

A good practice before you write any display code is to use the Flash Builder debugger to look at the data (or error) returned from your query call.

1. Click the Debug button on the main toolbar (see Figure 19). Your application should run and after logging in, you should still get the window that says Put your components here.

2. Close the application.
3. Return to Flash Builder for Force.com. You should see the Console view at the bottom of the IDE (see Figure 20) displaying a list of processes that occurred in the application at runtime: the user logged in and your query was made to the Force.com cloud.

4. Add a breakpoint by double-clicking in the marker bar next to an empty line of code inside the contactQueryResultHandler() function (see Figure 21). You should see a blue circle in the marker bar next to that line of code. You can double-click the breakpoint in the marker bar to remove it or right-click it and select Toggle Breakpoint.

5. Debug the application and log in. You should be returned to the debugging perspective of Flash Builder where you may get a dialog box asking you if you want to switch to the debugging perspective. If you are not immediately returned to Flash Builder, select its task in your taskbar or dock.
6. If you got the Confirm Perspective Switch dialog box, select the Remember my decision checkbox so you don't get this dialog box every time you debug the application and click Yes. Flash Builder switches to its debugging perspective (see Figure 22).

7. Switch to the development perspective by clicking the Flash tab in the upper right corner (see Figure 23).

8. Switch back to the debugging perspective by clicking the Flash Debug tab in the upper right corner (see Figure 23 above). If you don't see both tabs, click on the left edge of the tab and drag it to the left.
9. Click on the Variables tab to navigate to the Variables view (see Figure 24). You should see two variables: this and data . this is the instance of the application, SalesforceContacts. data is the argument for the contactQueryResultHandler() function, an instance of the ArrayCollection class.

10. Double-click the Variables tab so that it goes full-screen in Flash Builder.
11. Click the arrow next to data . You should see all the properties and their values for the ArrayCollection instance (see Figure 25).

12. Click the arrow next to [0], the first DynamicEntity instance (see Figure 26) and locate the Id and Name properties.

Properties with green circles are public properties. Those with red squares are private properties. Properties inherited from superclasses are grouped in a separate tree node called [inherited] to help reduce the number of variables visible at one time.

13. Double-click the Variables tab so the view returns to its original size in Flash Builder.
14. Terminate the debugging session by clicking either of the red Terminate buttons.
15. Click the Flash tab in the upper right corner to switch back to the development perspective.

Generate a WSDL

Next, you are going to retrieve more fields of the Contact objects. One way to find out the names of the fields is to return to salesforce.com and look up the fields under Setup > App Setup > Customize > Contacts > Fields. This works for the simple fields like Phone or Email but not for the compound fields, like MailingAddress. For the latter, salesforce.com tells you there is a field called MailingAddress of type Address, but you cannot make a web service call to retrieve the MailingAddress field, you have to request the individual MailingStreet, MailingCity, MailingState, MailingPostalCode, and MailingCountry fields that make up this compound object.

One way to discover all the possible fields for an object is to create a WSDL (a Web Services Description Language file) with salesforce.com and then create a salesforce data service in Flash Builder for Force.com based upon this WSDL. Although not necessary, this is convenient for development as it creates client side ActionScript equivalents of the server side Force.com objects enabling you to discover all the properties, get code-hinting for these properties, and also get compile-time checking for them which reduce errors.

First, you need to return to salesforce.com and generate a WSDL that contains information about what data can be accessed via web services.

1. In a browser, go to salesforce.com and log in if you are not already.
2. Click the Setup link at the top of the window.
3. In the sidebar menu, go to App Setup > Develop > API.
4. Click the link to Generate Enterprise WSDL (see Figure 27). You must generate an Enterprise WSDL (not the Partner of one of the other WSDLs) because only the Enterprise WSDL creates strongly typed objects representing records in your database tables. If you were using custom objects, this is also the only WSDL that would contain details for accessing those custom objects as well.

5. In the browser window, you should see a new web page displaying the WSDL (see Figure 28). Locate the reference to the standard Contact object.

6. In your browser, locate the menu option to save this page and save it as salesforce.wsdl (or whatever name you want to give it) somewhere on your computer.

Create a salesforce data service

You are now ready to create a salesforce data service in Flash Builder based on this WSDL.

1. Return to Flash Builder for Force.com.
2. From the main menu, select Data > Connect to Data/Service.
3. In the Connect to Data/Service dialog box that appears, select salesforce and click Next (see Figure 29).

4. On the Specify WSDL to Introspect page, click the Browse button and browse to the enterprise WSDL you created earlier and saved as salesforce.wsdl and then click Finish (see Figure 30). The location of the WSDL does not matter. It does not need to be placed on a server because it will only be referenced this once at development time to generate client-side ActionScript classes corresponding to salesforce.com objects.

5. Click the Finish button.
6. Wait until the dialog box telling you the service is being created disappears and then locate your new Flexforforce service in the Data/Services view (see Figure 31).

7. Click the arrow next to Data types and then locate and click the arrow next to Contact. You should see all the properties of the Contact object listed including Email, Id, MailingCity, MailingCountry and so on (see Figure 32).

8. In the Package Explorer, navigate to SalesforceContacts > src > services.flexforforce and expand this package (see Figure 33). It contains ActionScript classes representing the corresponding salesforce.com objects.

9. Locate the Contact class. In your application, you will manipulate instances of the Contact class. An instance of this class represents a salesforce.com Contact object.
10. If you look at the code for Contact, you won't see any of the properties you defined for this object on salesforce.com. The Contact class extends the _Super_Contact class, which does define these properties. If you make changes to your data schema on salesforce.com, you can refresh the data service in Flash Builder for Force.com and the super class will be regenerated but not the sub class.
11. In the Package Explorer, collapse the services.flexforforce branch so the generated classes are no longer displayed.

Retrieve additional data fields

Now, return to your query and retrieve additional fields for the Contact objects.

1. Locate your query in loginCompleteHandler() and change the SQL statement to also retrieve the Email , Phone , MailingStreet , MailingCity , MailingState , MailingPostalCode , and MailingCountry fields.

2. Debug the application again and log in.
3. In the Variables view in Flash Builder, drill-down and examine the properties of the objects returned from Force.com. You should now see the additional properties and their values (see Figure 34).

4. Stop the debugger and return to the Flash perspective.

Back to top

Time to complete: 15 minutes

Now that you have successfully retrieved salesforce.com data, you are ready to display the data in the application. The Force.com Flex framework contains several components to make displaying and editing your salesforce.com data very easy. You use a LabelAndField (com.salesforce.flexforforce.LabelAndField) component for each field of an object you want to display. The LabelAndField component handles displaying, formatting, editing, and validating that field. If you want to display multiple fields of an object, you place multiple LabelAndField components inside a FieldContainer (com.salesforce.flexforforce.FieldContainer). You populate these components by using their render() method when you get the results back from your query.

Display one field of an item

Start by using a LabelAndField component to display the value of one field of an object.

1. Locate the <s:VGroup> inside the Group container.
2. Set the VGroup's width to 400.

3. Delete the existing <s:Label/> tag inside the VGroup.
4. Inside the VGroup, add a LabelAndField tag with an instance name of nameField . You can just start typing "La" and then select LabelAndField in code-hinting and the tag prefix will be written for you (see Figure 35).

5. Set the LabelAndField field property to Contact.Name, the name of the salesforce.com object and its field you want to display in this component.

Note: The LabelAndField class combines the Force.com Flex FieldElement component (com.salesforce.flexforforce.FieldElement) and a Flex Spark Label. Use the FieldElement instead of the LabelAndField if you want the same behavior as a LabelAndField but don't want a field label displayed.

6. Set the LabelAndField startState property to Inline Edit. When the cursor is inside the quotation marks for the value, you can press Ctrl-Spacebar to select one of the possible options (see Figure 36). If you don't specify a value for startState , you will get a runtime error when you run the application. You will explore the edit states of the LabelAndField in the next section.

7. Inside the contactQueryResultHandler() function, use the LabelAndField's render() method to display the name of the first item returned by the query.

8. Run the application and log in. You should see the name of the first contact displayed (see Figure 37).

Display multiple fields of an item

To display multiple fields of an object, place multiple LabelAndField components inside a FieldContainer.

1. Inside the VGroup, add three more LabelAndField components that display the Contact object's Email, Phone, and MailingStreet fields. You can also remove the id from the first LabelAndField as it will no longer be used.

2. Place the LabelAndField components inside a FieldContainer inside the VGroup. Instead of having to render data in each field individually, you can place the LabelAndField components inside a FieldContainer and then render data to that FieldContainer.
3. Give the FieldContainer an instance name of contactContainer , a width of 100%, and move the startState property from the first LabelAndField to the FieldContainer. You can also remove the id property from the first LabelAndField because it will no longer be used.

4. Inside the contactQueryResultHandler() function, replace the existing code with code to render the first account to the new FieldContainer. The FieldCollection does not have a render() method, but it has a fieldCollection property which is an instance of the FieldCollection class (com.salesforce.flexforforce.FieldCollection) which does. The FieldCollection manages the data to be displayed in the container.

5. Run the application and log in. You should see the Name, Email, Phone, and MailingStreet fields for the first contact displayed (see Figure 38).

6. Close the application.
7. Change the last LabelAndField to display the entire compound MailingAddress field instead of displaying only the street. To reference the compound field, use the name of the first field followed by [Group]: MailingStreet[Group].

8. Run the application again and log in. You should now see the entire mailing address displayed (see Figure 39).

Add a component to switch between contacts

Next, add a Flex DropDownList component (spark.components.DropDownList) to switch between the contacts.

1. Inside the Script block, create a bindable, private variable called _contacts of type ArrayCollection. This variable will hold all the retrieved Contact data. It needs to be bindable so any views bound to it will get updated when its value changes. If you are new to Flex and this concept, see the references at the end of this quick start to learn more.

2. Inside the onContactQueryResult() function, set the _contacts variable equal to the data returned from the query.

3. As the first child inside the VGroup, add a DropDownList component and give it an id of contactList.

4. Set the DropDownList dataProvider property equal to the _contacts variable you created. Use data binding {} to bind this to this dynamic value so that when its value changes at runtime the list will be updated.

5. Set the DropDownList labelField property to Name, the name of the Contact object property you want to display in it. If you did not set this property, [Object DynamicEntity] would be displayed in the DropDownList for all contacts.
6. Set the DropDownList width property to 200 so it is big enough to display the full contact names.
7. Register to listen for the DropDownList change event and set the event handler to be a function called contactListChangeHandler . Pass the event object to the event handler.

8. Inside the Script block, create a protected function called contactListChangeHandler with one argument of type Event and a return type of void.

9. Inside the contactListChangeHandler() function, render to the FieldCollection the contact that is selected in the DropDownList. This will change the contact data displayed in the LabelAndField components.

10. Inside the onContactQueryResult() function, set the selectedIndex of the DropDownList to the first contact.

11. Run the application and log in. You should see a DropDownList with the first contact selected (see Figure 40).

12. Select a new contact in the DropDownList. You should see the details for the selected contact displayed.
13. Leave the application open for the next section of the quick start.

Back to top

Time to complete: 15 minutes

In addition to formatting and displaying the data for a object field, the Force.com Flex LabelAndField (and FieldElement) component also handles editing the value of that field, validating the new value entered, and providing a message to the user if validation fails. After new data has been entered by the user, the new data must be explicitly committed to the Force.com cloud.

Edit data using the LabelAndField component

You can edit data in your existing LabelAndField components.

1. If your application is not open, run it and log in.
2. Mouse over the value of the Full Name field. You should see a lock appear on the right side (see Figure 41). This field is not editable.

3. Mouse over the value of the Email field. You should see a pencil appear (the Edit button) on the right side (see Figure 42).

4. Double-click the Email field or click the Edit button to edit the data field. Notice the appearance of the Revert button that can be used to return the value to its original value (see Figure 43).

Note: If the field you were editing was required, a vertical, red line would appear to the left of the input box just like on salesforce.com.

5. Change the value.
6. Press Enter or Return or click elsewhere in the application. As soon as focus moves from the field you made changes to, the changed value appears orange in the application and is automatically formatted correctly (see Figure 44). Just like on salesforce.com, an orange value means a value has been changed but not yet saved. While the field is orange, you can use the Revert button to return it to its original value.

7. Edit the Email field again and this time, change the value to an invalid value, for example "agreen".
8. Press Enter or Return or click elsewhere to change focus. You should now see the orange value and an error message (see Figure 45).

9. Edit the Email field one more time and give it a new valid value.
10. Double-click the value of the Mailing Address field. A popup window appears for you to edit the values of individual fields of the compound field (see Figure 46).

11. Change one of the Mailing Address fields and click Ok. The entire compound MailingAddress field is now orange (see Figure 47).

Note: If you are using the sample data for a Force.com Developer account, for some of the contacts you will see the entire address appear in the MailingStreet input control instead of in separate controls. For these contacts, the entire address was erroneously entered into the MailingStreet field instead of in the separate fields.

12. Refresh the browser page. You should see the old values, not the new values that you entered. The new values were not yet saved to the Force.com cloud.
13. Close the application.

Change the edit mode

Before saving the data, look at a second possible edit mode. The LabelAndField and FieldContainer components actually have three modes you can use for editing field data: Create, Inline Edit, and Full Edit. You set the edit mode by setting the startState property to one of these values.

1. Locate the contactContainer tag and set the startState property equal to Full Edit. Be sure to choose the value using code-hinting so you get the correct spelling and capitalization.

2. Change the width of the VGroup from 400 to 100%.
3. Run the application and log in. You should immediately see input boxes for all the fields and multiple boxes for the compound field (see Figure 48).

4. Close the application.
5. Change the startState of the contactContainer tag back to Inline Edit and the width of the VGroup back to 400.
6. Next, you will commit the data changes to the Force.com cloud.

Save changes to the managed object

There are three steps to saving data. First, you must provide a UI control, like a button, for starting the save process. Second, you must save the changes made in the interface to the Contact object that is being rendered in the FieldContainer. This object that is being displayed, monitored, validated and so on by the FieldContainer is called the managed object. Third, you need to actually commit the changes (saving the managed object) to the Force.com cloud.

1. Inside the VGroup after the FieldContainer, add an instance of the Button class with a label of Save and a click event handler equal to saveButtonClickHandler().

2. Inside the Script block, create a protected function called saveButtonClickHandler with no arguments and that returns no value.

3. Inside saveButtonClickHandler(), call the updateObject() method of the FieldContainer's fieldCollection property which is an instance of the FieldCollection class. The LabelAndField and FieldContainer components do not have a property that allows you to access the data they are managing, but their sub-components, the FieldElement and FieldCollection classes do. Both classes have a read-only property called managedObject , which refers to the data being managed by that component or collection of components.

4. Pass to the updateObject() method a new instance of the mx.rpc.Responder class with a result handler called updateResultHandler and a fault handler called updateFaultHandler . When the updateObject() method is invoked, the data fields of the corresponding FieldElement objects are checked to make sure that valid data has been entered for each of them. The result method of the responder is invoked if all associated data fields pass validation and the managed object is successfully updated; it receives one argument equal to the managed object, the contact object being manipulated. The fault handler is invoked if any of the fields fail validation and it receives an array of invalid FieldElement objects.

5. Inside the Script block, create a protected function called updateResultHandler that receives one argument called data of type DynamicEntity and returns no value. Be sure to choose DynamicEntity from code-hinting so the import statement is written for you.

You saw when debugging your application earlier, that when items are retrieved from the Force.com cloud, they are created as DynamicEntity objects. DynamicEntity is a dynamic class defined as part of the Force.com Flex framework.

6. Inside the Script block, create a protected function called updateFaultHandler that receives one argument called data of type Array and returns no value.

7. Inside updateFaultHandler(), use the Flex Alert component to display a pop-up box by calling its static show() method and passing to it a message and title.

Commit the changes to the databases

Next use the F3WebWrapper save() method to commit the changes to the Force.com cloud.

1. Inside updateResultHandler () , call the save() method of the F3WebWrapper instance and pass to it data , the instance of the managed instance that you want to commit.

2. Pass a second argument to the save() method argument equal to a new instance of the mx.rpc.Responder class and specify a function called saveResultHandler as the result handler and saveFaultHandler as the fault handler.

3. Inside the Script block, create a protected function called saveResultHandler that receives one argument called message of type F3Message, returns nothing, and displays a pop-up with a message that the save was successful.

4. Inside the Script block, create a protected function called saveFaultHandler that receives one argument called message of type F3Message, returns nothing, and displays a pop-up with a message that the save failed.

Verify data changes in the database

Finally, go make data changes that get committed to the Force.com cloud.

1. Run the application and log in. You should see the new Save button (see Figure 49).

2. Change a field for one of the contacts and then click the Save button. You should get your pop-up message telling you that the save was successful (see Figure 50).

3. Click OK. Notice that the changed field stays orange (indicating that it has been changed) even after you save the data. After saving the data, you should re-render the data in the FieldContainer so that the changed value indicators are removed.
4. Refresh the browser page and log in. You should see the new value for the field you changed. The data was saved successfully on Force.com.
5. Close the application.
6. Inside the saveResultHandler() function, re-render the data in the FieldContainer.

7. Run the application again and log in.
8. Change a field, click the Save button, and then click OK in the pop-up box The changed field should no longer remain orange after you save the data.
9. Close the application. Lastly, verify your changes in the salesforce.com interface.
10. In a browser window, log in to salesforce.com.
11. In the Sales app, click the Contacts tab.
12. Click the link for the contact you made changes to. You should see the field value you entered (see Figure 51). The Last Modified By field should also correspond to the date and time of your last change from the Force.com Flex web application.

Congratulations! You have now successfully created your first Force.com Flex web application that retrieves, displays, and edits salesforce.com data.

Where to go from here

In this tutorial, you created a Force.com Flex web application built with Flash Builder for Force.com that retrieves, displays, and edits salesforce.com data using the Force.com Flex framework.

To learn more about using salesforce.com and the Force.com platform, refer to the following resources:

• The salesforce.com website (There is no universal link to this resource as it is user dependent. You need to log in to salesforce.com, click the Help link at the top of the page, and then click the Help tab in the new browser page that opens.)
• Getting started: Force.com for developers
• Force.com Workbook: Get Started Building Your First App in the Cloud
• The Force.com developer website
• All Force.com documentation

To learn more about the Force.com Flex classes and components, refer to the following resources:

• Flex for Force.com API Documentation
• Force.com Flex Developer's Guide
• Adobe Flash Builder for Force.com technology center

To learn more about creating and customizing Flex 4 applications, refer to the following resources:

• Flex 4 documentation
• Flash Platform API
• Flex developer center
• Flex 4 in a Week

To learn about building Force.com Flex desktop applications, refer to the following resources:

• Quick start: Create your first Force.com Flex desktop application
• Build a Force.com Force desktop application with Flash Builder for Force.com tutorial series
• Flex for Force.com API Documentation
• Adobe Flash Builder for Force.com technology center