But no one wants to go back to the Client / Server architecture. We want to embrace Cloud Computing architectures but not lose the client capabilities. What we really need is the Client / Cloud architecture. We need a web deployment model that provides ease of deployment but also the ability to install applications on our desktops and mobile devices.

This is why I’m so excited about the new Adobe Flash Builder for Force.com. In a nutshell this is a tool that Adobe and Salesforce.com built together to enable developers to build great software using Flex for the UI and Force.com for the Cloud back-end. It’s a wonderful combination of technologies that will help many Client / Server apps make the switch to Client / Cloud.

Applications created with Flash Builder for Force.com can be run in the browser, on the desktop, and on mobile devices. These applications can be assembled from the hundreds of Flex components that are out there (check out many of them in Tour de Flex).

Check out this video to see how to use Flash Builder for Force.com to build a simple app:

As you can see, it’s very easy to get started. But I wanted to go a step further and try to build something real–something that shows a genuine use case for extending beyond the out-of-the-box Salesforce.com UI. I wanted to keep it really simple so that I could post the code here. What I came up with is this (in user story form):

• As a Salesforce.com user I want to take a photo, using my phone, of one of my contacts so that the photo can be saved to their contact record for future reference.
• As a Salesforce.com user I want to see photos I’ve taken of my contacts so that I can be reminded of what they look like.

Simple enough. So here is what I came up with:

To build these two apps I first downloaded and installed Flash Builder for Force.com. I used the Adobe AIR for Android prerelease to build the mobile app. Here is how I created these apps.

First I added a new field to Contact to store the photo. Salesforce.com doesn’t have a binary field so I used a large text field (32k limit). I’ll store the photo Base64 encoded.

Then in Salesforce.com I saved my enterprise.wsdl file. Check out a great video from Dave Carroll to see how to do this.

Now in Flash Builder for Force.com I created a new Force.com Flex Project for the mobile app. If you do this on your own and want to run on a mobile device then you will need to overlay the AIR for Android SDK on top of a Flex 4.1 SDK. Select Desktop Application as the app type. Replace WindowedApplication with just Application. And replace the F3DesktopApplication with F3WebApplication since F3DesktopApplication uses APIs that are not available on AIR for Android. (BTW: Flash Builder, Flex, and Force.com Flex Projects do not officially support mobile deployment yet. It works but there is no support and no guarantees.) If you are building a standard Web Application or Desktop Application then you can just leave the generated code as is.

Using the Data/Services wizard I connected to Salesforce.com using my enterprise.wsdl file. After the services and value objects have been generated I modified the Contact object and added a Bindable account property. The generated application already included the F3DesktopApplication Declaration used to connect to Salesforce. Due to an incompatibility with that API and AIR for Android I switched it to use F3WebApplication. In F3WebApplication’s loginComplete event handler I query Salesforce.com for Accounts and then Contacts, associate contacts with their account, and then store the contacts:

app.wrapper.query("select Id, Name from Account", new AsyncResponder(function(data:ArrayCollection, token:Object):void {
    accounts = data;
    app.wrapper.query("select Id, AccountId, FirstName, LastName, Phone, MobilePhone, Email, Title, Department, MailingCity, photoData__c from Contact", new AsyncResponder(function(data:ArrayCollection, token:Object):void {
        for each (var contact:Contact in data)
        {
            for each (var account:Account in accounts)
            {
                if (account.Id == contact.AccountId)
                {
                    contact.account = account;						
                }
            }
        }
        contacts = data;
    }, handleError));
}, handleError));

Notice in the query that I’m fetching photoData__c, which is the custom field I created on Contact to store the photo.

In the renderer for a contact I need to either display the photo if there is one or let the user add one. Here is the simple UI code to handle that:

<s:Group width="92" height="92" top="8" right="8">
    <s:Rect width="92" height="92">
        <s:fill>
            <s:SolidColor color="#cccccc"/>
        </s:fill>
    </s:Rect>
    <s:Label id="addPhoto" text="Add a photo" width="92" height="92" verticalAlign="middle" textAlign="center"/>
    <s:BitmapImage id="photo" width="92" height="92"/>
</s:Group>

When the contact is set I check to see if there is a photo and if so display it:

if (contact.photoData__c == null)
{
    photo.visible = false;
    return;
}
 
var decoder:Base64Decoder = new Base64Decoder();
decoder.decode(contact.photoData__c);
 
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(event:Event):void {
    photo.source = event.target.content;
    photo.visible = true;
});
loader.loadBytes(decoder.toByteArray());

The data from the photoData__c field is Base64 decoded and then displayed using the Flex BitmapImage component.

Now when the user clicks on the photo or empty photo box I use the AIR for Android CameraUI to grab a photo, resize it, covert it to a PNG, Base64 encode it, set it on the contact, and then save the contact to Salesforce.com:

if (CameraUI.isSupported)
{
    cameraUI = new CameraUI();
    cameraUI.addEventListener(MediaEvent.COMPLETE, function(event:MediaEvent):void {
        var loader:Loader = new Loader();
        loader.load(new URLRequest(event.data.file.url));
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(event:Event):void {
            var bitmap:Bitmap = event.target.content as Bitmap;
 
            var result:BitmapData = new BitmapData(46, 46, false);
            var matrix:Matrix = new Matrix();
            matrix.scale(46 / bitmap.width, 46 / bitmap.height);
            result.draw(bitmap, matrix);
 
            var pngEncoder:PNGEncoder = new PNGEncoder();
            var pngBytes:ByteArray = pngEncoder.encode(result);
 
            var base64Encoder:Base64Encoder = new Base64Encoder();
            base64Encoder.encodeBytes(pngBytes);
            var encodedImage:String = base64Encoder.flush();
 
            contact.photoData__c = encodedImage;
 
            displayPhoto();
 
            F3WebApplication.getInstance().wrapper.save(contact, new AsyncResponder(function(data:Object, token:Object=null):void {
            }, FlexGlobals.topLevelApplication.handleError));
        });
    });
    cameraUI.addEventListener(ErrorEvent.ERROR, function(event:ErrorEvent):void {
        FlexGlobals.topLevelApplication.handleError(event);
    });
    cameraUI.launch(MediaType.IMAGE);
}

That’s it for the mobile app! I compiled it, exported it to an Android app, and then copied it to my phone. Pretty simple and as you can see it works! One limitation with my approach is the 32k limit of the photoData__c field. However, I think I could easily get around that by striping the Base64 encoded data across multiple fields. It’s not ideal but it would work.

To display the photo when I view a contact on Salesforce.com I created a very simple Flex app using another Force.com Flex Project. I could have also added photo upload to this application but chose to keep it simple. All it does is display the selected contact’s photo. Here is the complete code (after generating the required services in Flash Builder):

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:flexforforce="http://flexforforce.salesforce.com">
 
    <fx:Script>		
    import mx.rpc.AsyncResponder;
    import mx.utils.Base64Decoder;
    </fx:Script>
 
    <fx:Declarations>
        <flexforforce:F3WebApplication id="app" requiredTypes="Contact">
            <flexforforce:loginComplete>
                app.wrapper.query("select photoData__c from Contact where Id = '" + this.parameters.contactId + "'", new AsyncResponder(function(data:Object, token:Object):void {
                    if (data.length == 1)
                    {
                        if (data[0].photoData__c == null)
                        {
                            photo.visible = false;
                            noPhoto.visible = true;
                            return;
                        }
 
                        var decoder:Base64Decoder = new Base64Decoder();
                        decoder.decode(data[0].photoData__c);
 
                        var loader:Loader = new Loader();
                        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(event:Event):void {
                            photo.source = event.target.content;
                            photo.visible = true;
                        });
                        loader.loadBytes(decoder.toByteArray());
                    }
                }, function(fault:Object):void {
                    // ignored
                }));
            </flexforforce:loginComplete>
        </flexforforce:F3WebApplication>
    </fx:Declarations>
 
    <s:applicationComplete>
        app.serverUrl = this.parameters.serverUrl;
        app.loginBySessionId(this.parameters.sessionId);
    </s:applicationComplete>
 
    <s:Rect width="92" height="92">
        <s:fill>
            <s:SolidColor color="#cccccc"/>
        </s:fill>
    </s:Rect>
 
    <s:Label id="noPhoto" text="No Photo" width="92" height="92" textAlign="center" verticalAlign="middle" visible="false"/>
 
    <s:BitmapImage id="photo" width="92" height="92"/>
 
</s:Application>

Finally I created a custom S-Control to run the Flex app:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="ContactPhoto" width="92" height="92" 
codebase="https://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> 
    <param name="movie" value="{!Scontrol.JavaArchive}" /> 
    <param name="flashvars" value="sessionId={!API.Session_ID}&serverUrl={!API.Partner_Server_URL_90}&contactId={!Contact.Id}" /> 
    <embed src="{!Scontrol.JavaArchive}" width="92" height="92" name="ContactPhoto" 
flashvars="sessionId={!API.Session_ID}&serverUrl={!API.Partner_Server_URL_90}&contactId={!Contact.Id}" 
type="application/x-shockwave-flash" 
pluginspage="http://www.adobe.com/go/getflashplayer"> 
    </embed> 
</object>

I uploaded the compiled Flex app to the S-Control and added it to the Contact page. And that’s it! In just a few hours I extended Force.com and built a cool mobile app. I could also have easily created a desktop widget for browsing contacts and adding photos. If you are looking for a fun project to use as a way to learn this stuff that would be a good one! :)

Here are some resources to help you get started with Flash Builder for Force.com:

• Force.com Flex Quick Start Tutorial
• Force.com Flex Project APIs for Web Applications
• Force.com Flex Project APIs for Desktop Applications
• Numerous other demo applications and tutorials
• Source code for my mobile contacts demo
• Source code for my web contact photo viewer demo

Have fun building the next generation of software! Let me know how it goes.

Last week I was able to spend a few hours with Model Metrics porting their Pharma2GO Adobe AIR app to run on an Android Mobile device. Using the AIR for Android Prerelease we quickly created a mobile friendly UI with Flex and reused the same data sync code from the desktop app. Check out the end result:

Listen to what Model Metrics had to say about this in their blog “HTML 5 – Ready for Primetime in the Enterprise?“:

One of our early iPhone products on the iTunes AppStore was Search2GO, a simple search tool for Salesforce.com. This was built in Objective C and it took approximately 8 weeks to develop. Yesterday I watched two developers create over half of this same functionality using Flex/AIR and had it running on an Android phone in a day. Granted there are still things that could be added, but this was a great illustration of why Flex/AIR is a great toolset.

These are exciting times for Client + Cloud apps now that the “Client” can easily be on the web, desktop, and mobile device using the same technologies and tools!

• An article I wrote has been published on the online Flash & Flex Developer’s Magazine: Flex and The Cloud: Is this really just Client/Server 2.0?
• I’ll be speaking on Thursday, February 18 2010 at the Denver Flex User Group about Flex and The Cloud
• The recording of a webinar I co-hosted on the new Salesforce.com Cloud platform for developers has been posted
• Jeff Douglas has posted a video walk through showing how to use the new Salesforce.com Flash Builder 4 extension for Flex + Cloud apps

Exciting stuff! Let me know what you think!

Many of the Flex applications that people have built on top of Salesforce.com / Force.com today use the existing Flex Toolkit for Force.com. The new Flash Builder for Force.com tool today only supports desktop applications with Adobe AIR – but will also support web applications in the future. But you can still use the existing Toolkit within Flash Builder for Force.com. All you need to do is configure your project to use the Flex 3.4 SDK and add the force-flex.swc file to the project’s libs folder. That’s it!

If you aren’t at Dreamforce and want to learn about the new Flash Builder for Force.com then check out the recording from a webinar I co-presented a few weeks ago.

• Full client capabilities, which allow software to perform optimally and increase usability
• Easy deployment, which allows developers to focus on business needs instead of building infrastructure

The combination of RIA and Cloud is the future of software because it provides full client capabilities and easy deployment. The chart below illustrates this in comparison to the other major software architectures (main-frame, client / server, and web).

In line with these trends Adobe and Salesforce.com announced today that they are working together to unite Rich Internet Applications and The Cloud. At the core of this announcement is a developer preview of the Adobe Flash Builder for Force.com tool. This tool enables developers to easily build intuitive user interfaces with Flex which connect to the Force.com cloud platform and Salesforce.com CRM data. These applications can be deployed either in the browser or on the desktop using Adobe AIR. When utilizing Adobe AIR, the applications can still function when users are disconnected. Later, when users reconnect, the changes are synchronized with Force.com using the LiveCycle Data Services synchronization engine.

Being able to connect Flex applications to Salesforce.com / Force.com has been possible (and easy) since I co-created what was originally called the Flex Toolkit for Apex. So while it has been possible to build Rich Cloud Applications for a few years, today’s announcement is significant for a few reasons:

• Adobe and Salesforce are now officially partnered together around Rich Cloud Applications
• Much better, officially supported developer tooling
• Much better offline data synchronization

It’s really exciting to see how the vision of Rich Cloud Applications is becoming reality!

If you’d like to learn more or try out the new tooling check out these resources:

• Get the developer preview and watch video demos
• Get inspired and see how it works
• Watch a video walk-through

Another great way to learn more is to sign up for a Webinar / Tech Talk that I will be co-presenting.

Let me know what you think about this exciting new partnership and developer tooling.

In the webinar we didn’t have a chance to walk through all of the details of building Rich Cloud Applications with Force.com and Flex so here is a tutorial and the source code for the highly desired car insurance demo.

Overview

With Rich Cloud Applications the back-end and front-end are distinctly different pieces. The first step when building these types of applications is to identify the domain model that will be used on the back-end for longterm persistence. Force.com will take care of all the details around scalability, reliability, disaster recovery, constraints, security, etc. All we need to do is describe the model in Force.com. In this case the model is for a piece of the insurance demo I frequently do. Here is a screenshot:

The information we need to store for this demo is the coordinates of all four cars and the coordinates of the crash indicator. In the next section we will describe that data model on Force.com.

Since the front-end will be built with Flex you will need either Flex Builder (60 day trial available) or the open source Flex SDK. This tutorial will assume you are using Flex Builder. Flex contains many out-of-the-box components but the car dragging UI used in the insurance demo is not one of them. The section about building the front-end will walk through some of the Flex code used to create that UI. If you want to learn more about creating custom components in Flex there is great documentation on the Adobe Developer Connection. Also if you want to see the components that are available in Flex then check out Tour de Flex.

Once the Flex application has been built, this tutorial will walk through the steps to put it up on the Force.com cloud.

Setting up the Back-end

To begin setting up the back-end on Force.com you will need a developer account. Once logged in you can go into the Setup mode by clicking on the “Setup” link at the top of the page. Setup mode is where you will configure the back-end data model on Force.com and deploy the Flex application after it’s built. On the left side of the Setup page you will see a section titled App Setup and underneath that a link titled “Create”. Click that link and then click the “Objects” link which will now appear in the list. This is where custom objects on Force.com are created and configured.

Add a new custom object titled “AccidentReport”. Then on that object create a few custom fields:

• Date_of_Accident – The type is Date. This field will store the date the accident happened.
• IncidentX – The type is Number. This field will store the X coordinate of the crash indicator.
• IncidentY – The type is Number. This field will store the Y coordinate of the crash indicator.

Next create another custom object titled “IncidentCar”. On that object create these custom fields:

• StartX – The type is Number. This field will store the X coordinate of the starting car’s position.
• StartY – The type is Number. This field will store the Y coordinate of the starting car’s position.
• EndX – The type is Number. This field will store the X coordinate of the ending car’s position.
• EndY – The type is Number. This field will store the Y coordinate of the ending car’s position.
• AccidentReport – This is a Master-Detail Relationship where the relationship is to the AccidentReport.

The data model has now been configured on Force.com and is ready for use. You may want to add a few fake records (an AccidentReport with two cars) manually to test the data model.

Building the Flex Client

Now that the Force.com back-end is configured we can begin building the Flex client. The client can run in three ways:

1. Embedded in a Force.com page
2. On your own server
3. As a desktop application using Adobe AIR

In this tutorial we will use option 1. The details for deploying the application will be covered in the next section.

In order to connect to Force.com we need to download the Force.com Toolkit for Adobe AIR and Flex.

Start by creating a new Flex Project in Flex Builder. Then copy the force-flex.swc file from the Toolkit into the project’s libs folder. In your application start with something simple like:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:salesforce="http://www.salesforce.com/">
 
  <mx:Script>
    import com.salesforce.AsyncResponder;
    import com.salesforce.objects.LoginRequest;
    import com.salesforce.results.LoginResult;
    import com.salesforce.results.QueryResult;
  </mx:Script>
 
  <mx:applicationComplete>
    var lr:LoginRequest = new LoginRequest();
      lr.username = "YOUR USER NAME";
      lr.password = "YOUR PASSWORD";
      lr.callback = new AsyncResponder(
        function(result:LoginResult):void {
          conn.query("Select Id, IncidentX__c, IncidentY__c, Date_of_Accident__c from AccidentReport__c",
            new AsyncResponder(function(result:QueryResult):void {
              dg.dataProvider = result.records;
            }));
      });
      conn.login(lr);
  </mx:applicationComplete>
 
  <salesforce:Connection id="conn"/>
 
  <mx:DataGrid id="dg"/>
 
</mx:Application>

Give it a try by running the application. This simply logs in, fetches the AccidentReports and displays them in a DataGrid. Make sure that you have some sample data on Force.com before you run this. Otherwise you will get an error. That is a simple read-only view of some data on the Force.com cloud! However the full Car Incident application requires quite a bit more code. You can download the code and then copy and paste the files into your project.

Let’s walk through the application requirements:

1. Retrieve a list of AccidentReports
2. Allow the user to select an AccidentReport
3. Retrieve the IncidentCars for the selected AccidentReport
4. Allow the user to create a new AccidentReport
5. Allow the user to position the crash indicator and cars in the AccidentReport
6. Save the changes to Force.com

When we started building our back-end we modeled the data in Force.com. Now we need a client-side model of the data. The two value objects for this purpose are AccidentReport.as and Car.as. Those two value objects contains public properties corresponding to the values we need to hold once we get data back from Force.com. They also have a constructor that can map the data format from Force.com to the value object’s properties. For instance the Car value object’s constructor does the following:

    public function Car(o:Object=null)
    {
      if (o != null)
      {
        id = o.Id;
        startX = o.StartX__c;
        startY = o.StartY__c;
        endX = o.EndX__c;
        endY = o.EndY__c;
      }
    }

This simply sets the properties on an instance of Car to the data values retrieved from Force.com. Later on you will see where those values come from and how we create new Car value objects.

Now that the client-side data model has been created we need a central place that will hold our value objects. The easiest way to do this is to create a Singleton called Model. You can find it in the Model.as class. The model contains properties which store information about the current state of the Flex application. In this case the state properties our application needs are:

• statusMessage:String – Holds messages related to server communication
• loggedIn:Boolean – Specifies whether or not the user is logged in
• accidentReports:ArrayCollection – Stores all of the AccidentReports that get fetched from the server
• selectedAccidentReport:AccidentReport – The AccidentReport selected by the user (if any)

Next we will setup a Controller that manages the communication to Force.com and updates the Model. You can find the source code in the Controller.as class. This class contains an instance of the Connection object from the Toolkit, which will actually do the communication to Force.com’s SOAP API. It also contains a reference to the Singleton Model. The controller exposes several public methods that support the requirements listed above. These are:

• login(sessionId:String, serverUrl:String):void – A method that logs into Force.com based on the sessionId and serverUrl provided by the Force.com page. Flex applications running outside of Force.com (on your own website or as a desktop application) will not have a sessionId so they will need to set the username and password instead.
• getAccidentReports():void – Does a query for the AccidentReports owned by the authenticated user.
• createAccidentReport():void – Creates a new AccidentReport.
• getAccidentReport(accidentReport:AccidentReport):void – Fetches the IncidentCars for a given AccidentReport.
• saveAccidentReport(accidentReport:AccidentReport):void – Updates an AccidentReport and its associated IncidentCars.

All network requests in Flex happen asynchronously. This means that all requests to Force.com also happen asynchronously; so while the methods listed above can make the request, other private functions are used to actually handle the server response and then update the Model. For instance when the response from the query in getAccidentReports returns, the model is updated in the following way:

    private function getAccidentReportsResult(qr:QueryResult):void
    {
      model.accidentReports = new ArrayCollection();
 
      // store AccidentReports
      for each (var o:Object in qr.records)
      {
        model.accidentReports.addItem(new AccidentReport(o));
      }
    }

Notice that the records returned from the server are typed as Objects. In the for loop we use the mapping in AccidentReport’s constructor to convert the Object to a typed AccidentReport.

Now that the Model and Controller are setup the next task is to build the UI. The UI is built with a number of components:

• CarShape.as – A class that draws a single car.
• DraggableCars.as – Has two CarShapes and draws a curved line between them. Also has a Car value object which is used to position the CarShapes. When the user drags a CarShape the underlying Car is updated.
• Accident.mxml – Has an AccidentReport value object, two DraggableCars, and a crash indicator. The cars stored on the AccidentReport are passed to the DraggableCars. When the crash indicator is moved the AccidentReport value object is updated.
• AccidentReportView.mxml – Contains the Controller, a DataGrid that displays the list of all AccidentReports, an Accident that is displayed when the user selects an item in the DataGrid, and buttons that allow the user to create, save, or close an AccidentReport.
• CarIncident.mxml – The main application that contains an AccidentReportView and does the login when the application loads.

Describing how the custom UI components work is beyond the scope of this article. However it’s important to describe how the Model, View, and Controller interact. In the AccidentReportView the Accident uses data binding to setup an observer on the model. When the observer observes a change it lets the view know so that it can refresh its view of the model. The instance of the Accident uses data binding for two things:

<cars:Accident id="accident" accidentReport="{Model.getInstance().selectedAccidentReport}" visible="{Model.getInstance().selectedAccidentReport != null}"/>

First the accidentReport value object of the Accident is set to data bind to the Model’s selectedAccidentReport. When that value changes the data binding observer will notify the Accident about the change. Second, the Accident is only visible when the Model’s selectedAccidentReport is not null.

The AccidentReportView also interacts with the controller by calling its public methods. Here’s an example:

        <mx:Button label="Save">
          <mx:click>
            controller.saveAccidentReport(accident.accidentReport);
 
            accidentReportDataGrid.selectedItem = null;
            Model.getInstance().selectedAccidentReport = null;
          </mx:click>
        </mx:Button>

When the user clicks the save button, the event handler calls the Controller’s saveAccidentReport method passing it the currently selected AccidentReport. Since the components internally have made changes to the AccidentReport those changes are then propagated to Force.com by calling the Connection’s update method. The save button’s event handler also deselects the currently selected item in the DataGrid and sets the selectedAccidentReport on the Model to null.

Now that you have a fully functional Rich Cloud Application built with Force.com and Flex the next step is to make that application available on the cloud.

Deploying the Flex Client

When in the development phase it may be convenient to hard code your username and password into the application like we did in the simple example above. However, you should never do that in a production application. If you are deploying on a Force.com page then you can use the session_id. Here is an example:

      conn.serverUrl = parameters.server_url;
 
      var lr:LoginRequest = new LoginRequest();
      lr.session_id = parameters.session_id;
      lr.server_url = parameters.server_url;
      lr.callback = new AsyncResponder(loginResult, loginFault);
      conn.login(lr);

The parameters are available on the main Application and are passed into the application using the apex:flash VisualForce tag, which we will setup later.

Once your application is set up to use the session_id then you will need to create a release build of the Flex project. To do that follow the Export -> Flex -> Release Build wizard. This will create a smaller SWF file (the application) that will later be uploaded to Force.com.

To deploy the application go into the Force.com Setup mode, click on Develop under App Setup, and then click on Static Resources. Create a new resource called “CarIncident” and upload the application’s SWF file found in the bin-release folder under the project. Then under Develop, click Pages and add a new Page called “AccidentReport”. Put the following code in the page:

<apex:page >
    <apex:pageBlock >
        <apex:flash src="{!$Resource.CarIncident}" width="500" height="500" flashvars="session_id={!$Api.Session_ID}&server_url={!$Api.Partner_Server_URL_150}"/>
    </apex:pageBlock>
</apex:page>

Save the page and then you should be able to access it by going to:
https://na1.salesforce.com/apex/AccidentReport

If my instructions are accurate then hopefully you will now see the CarIncident application on the cloud pulling data from Force.com like this screenshot:

This is just a basic walk through of how to build Rich Cloud Applications with Force.com and Flex. There are tons of additional features and configuration changes you can make on both the back-end and front-end. But hopefully this helps you get started building Rich Cloud Applications with Force.com and Flex. Let me know how it goes!

Today Adobe updated the Adobe Developer Connection’s page containing information about integrating Flex and Salesforce / Force.com. This new page contains new videos, demos, articles, and other great content. Check it out and let us know what you think.

We are looking for people interested in authoring articles (either technical or decision maker focused) about integrating Flex and Salesforce / Force.com. Please email me if you are interested: jaward at adobe dot com