26 July 2010
A basic knowledge of databases and web services is helpful but not required.
To complete this tutorial, you need the following:
A Force.com account with the custom Merchandise object created in Part 1 of this tutorial series.
In this tutorial, you use Flash Builder for Force.com to create the simplest Force.com Flex application possible—one that has login functionality but nothing else; no content and no display of any salesforce.com data. You add functionality that retrieves and displays salesforce.com data in Part 3 of this tutorial series.
In this tutorial, you will:
Start by creating a Force.com Flex project i Flash Builder for Force.com.
The application ID is used by the AIR runtime and th operating system to identify the application. In order to guarantee a uniqu application ID, a common naming convention is to use reverse domain nam notation as used here.
Next, take a look at all the files that were generated automatically for the Force.com Flex project.
You use the Flash Builder Package Explorer to navigate between project files.
The root tag of this main application file is a
WindowedApplication tag. When you compile this application, an instance of the WindowedApplication ActionScript class (which is part of the Flex framework) will be created and its properties set as defined by the attributes in the tag. The WindowedApplication tag has four xmlns attributes that specify XML namespaces. The first namespace attribute,
xmlns:fx, is used to associate the fx prefix with the use of ActionScript top-level language elements (so you can create them with MXML tags, such as
<fx:Array>) and with compiler tags.
Compiler tags do not correspond to ActionScript classes but are used to provide instructions to the compiler. For example,
<fx:Script> is used to tell the compiler that the contents inside the tag are going to be ActionScript. You set an
xmlns attribute equal to a string called the URI (universal or uniform resource identifier), which identifies a resource that contains the information about what to do when you use an XML tag with this prefix. The
xmlns:fx attribute is set equal to
http://ns.adobe.com/mxml/2009. This does not identify a web location but a mapping to another XML file that maps tag names to corresponding ActionScript classes (for everything besides compiler tags).
The mapping for the URI string is located in the flex-config.xml file. The flex-config.xml file contains all the default values used by the compiler when an application is compiled. You can find the flex-config.xml file in the /Flash Builder/sdks/4.1.0/frameworks/ folder. Inside this file, you will find the following definition:
<namespace> <uri>http://ns.adobe.com/mxml/2009</uri> <manifest>mxml-2009-manifest.xml</manifest> </namespace>
The URI string that was used in the
xmlns:fx attribute is here mapped to the mxml-2009-manifest.xml file. If you open this second XML file located in the same directory as the flex-config.xml file, you will see a list of components mapping the names to use in XML tags to the corresponding ActionScript classes:
<componentPackage> <component id="Array" class="Array" lookupOnly="true"/> <component id="Boolean" class="Boolean" lookupOnly="true"/> ...
The flex-config.xml file also contains the mappings for the s and mx namespaces. The s prefix is used to reference Spark (Flex 4) classes and the mx prefix is used to reference MX (Flex 3) classes. The last prefix, flexforforce, is specific for Force.com Flex projects. It is used to reference Force.com Flex framework classes. The mapping for the URI to the manifest file and the manifest file itself are included in the SWC file for the compiled Force.com Flex framework classes, which you will take a look at shortly.
WindowedApplicationtag and then click the ASDoc tab beneath the code (see Figure 6). ASDoc is short for the ActionScript documentation for that class (or class member depending upon what you have selected in the code editor).
If you do not see the ASDoc tab, select Window > Show View > Other > Flash Builder > ASDoc.
The red symbol in front of some of the properties indicate that they are for the AIR runtime only and not for use in browser-based web applications rendered by Flash Player.
When you created the salesforce data service ActionScript classes were generated that map to salesforce.com data objects that were included in the WSDL. These are often referred to as DTOs (data transfer objects) or VOs (value objects).
In your application, you will manipulate instances of the Merchandise__c class. An instance of this class represents a merchandise item in the salesforce.com Merchandise custom object (database table). A serialized version of instances of this class is sent back and forth between the browser and the cloud to retrieve and update your salesforce.com data.
If you look at the code for Merchandise__c , you won't see any of the properties you defined for this data object on salesforce.com. The Merchandise__c class extends the _Super_Merchandise__c 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.
Force.com Flex applications use code from both the Flex and Force.com Flex frameworks. When you create a Force.com Flex project, the code for both of these frameworks is included in the project.
A SWC file is pre-compiled ActionScript code, usually containing a package or packages of ActionScript classes. A SWC file cannot be run on its own in Flash Player; Flash Player only renders SWF files. SWC files are used to package and distribute code so it can be used in multiple applications.
When you create a data service in Flash Builder, you can get info about it, delete it, and refresh it using the Data/Services view.
If you do not see a Data/Services tab, select Window > Show View > Data/Services from the main menu.
You can also use the Data/Services view to update or delete a data service. If your WSDL changes, you can refresh the service to regenerate the classes. If you want to switch to use a different WSDL, you can delete the service and then create a new data service using the Flash Builder Data menu option.
Now that you have an understanding of what files were created, run the application. The main MXML file, SalesforceMerchandise.mxml, already contains code for logging users into the Force.com Flex application.
You can run and test your desktop application right from Flash Builder. Flash Builder uses a tool called the AIR Debug Launcher (ADL) to provide a way to test your application during development without having to compile, package, and install the application as a desktop application for testing after every code change. You will learn to package and install your application as a desktop application in a later tutorial.
Now you need to successfully log in to the application.
If you are logging in from a computer within your company's trusted network, you should successfully log in to your application and then get a Perform a full sync dialog box (see Figure 21).
If you are logging in from a computer outside your company's trusted network, you will get a login must use security token error (see Figure 22).
If you received the security token error message, go to your email and locate the email sent to you from salesforce.com when you reset your security token in Part 1 of this tutorial series.
The next thing you need to do is set what salesforce.com objects the application is going to use. Then, in order to speed up testing of your application during development, you are going to add a default username and password so you don't have to enter values manually every time you run the application, which gets tedious very quickly.
requiredTypesproperty from "Account,Contact" to just "Merchandise__c". If you ran the application now, youwould be able to successfully log in to the application.
usernameTextInput tag and set its
textproperty to your username.
<s:TextInput id="username" text="yourUsername"/>
textproperty 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.
In this tutorial, you created a basic Force.com Fle desktop application with Flash Builder for Force.com that successfully logs yo in to your salesforce.com account. You created a Force.com Flex project with a salesforce data service using th WSDL you generated in Part 1. You examined the starting MXML applicatio code and added attributes necessary to run the application. You successfull ran your first application and logged in unsuccessfully and then successfull to your salesforce.com account.
In Part 3, you will use Force.com Flex framework classes an components to retrieve and display salesforce.com data.
To learn more about using creating Force.com Flex applications, refer to the following resources: