Example: Flex Recipe App MXML

This file shows you how you can connect to a Drupal service to get a list of recipes. It assumes a few things:

First that you have Drupal and all of the required modules and libraries installed:

• Drupal 5 - http://drupal.org/download
• Services - http://drupal.org/project/services
• AMFPHP - http://drupal.org/project/amfphp
• AMFPHP 1.9 Beta 2 - http://www.5etdemi.com/blog/archives/2007/01/amfphp-19-beta-2-ridiculous...
• Views - http://drupal.org/project/views

Drupal is setup in this way:

• Clean urls are enabled
• AMFPHP 1.9 Beta is extracted and placed inside of the AMFPHP module, in a folder called "amfphp" (modules/amfphp/amfphp)
• There is a content type called recipes, this needs to be created
• There is a view called "recipes_all" which shows a list of recipes.

With the following modules enabled:

• Services
• AMFPHP
• Views Service
• Node Service
• Views and Views UI

Services is setup with:

• API keys off
• Session IDs off

And your Flex project is setup:

• as a basic project
• with an the additional compiler argument: -services "services-config.xml"
• and a file called "services-config.xml" in your project root, copied from amfphp.org and with the endpoint uri changed to "/services/amfphp"

Other mentions

• You must be logged in as the administrator in the same browser you are testing Flex in to be able to save and add new posts

Here's the MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
  <mx:Script>
    import mx.controls.*;
    import mx.rpc.events.*;
    import mx.utils.ArrayUtil;

    [Bindable]
    public var recipes:Array;

    public function init():void
    {
      getRecipes();
    }

    public function onFault(event:FaultEvent):void
    {
      Alert.show(event.fault.faultString, "Error");
    }

    public function onViewsResult(event:ResultEvent):void
    {
      recipes = ArrayUtil.toArray(event.result);
    }

    public function getRecipes():void
    {
      views.getView("recipes_all", ['nid','title','body','changed']);
    }

    public function saveRecipe():void
    {
      var edit:Object;
      if (recipes_select.selectedItem) {
        edit = recipes_select.selectedItem;
      }
      else {
        edit = new Object;
      }

      edit.type = "recipe";

      edit.title = dish.text;
      edit.body = recipe.text;

      if (edit.title == "" || edit.body == "") {
        Alert.show("Enter some content", "Error");
      }

      node.save(edit);
      getRecipes();
    }

    public function onSaved(event:ResultEvent):void
    {
      Alert.show("Recipe was saved", "Saved");
    }

    public function newRecipe():void
    {
      recipes_select.selectedItem = undefined;

      dish.text = "";
      recipe.text = "";
    }
  </mx:Script>

  <mx:RemoteObject showBusyCursor="true" destination="amfphp" source="views" id="views">
    <mx:method name="getView" result="onViewsResult(event)" fault="onFault(event)" />
  </mx:RemoteObject>

  <mx:RemoteObject showBusyCursor="true" destination="amfphp" source="node" id="node">
    <mx:method name="save" result="onSaved(event)" fault="onFault(event)" />
  </mx:RemoteObject>

  <mx:Panel width="500" height="400" layout="absolute" title="Recipes" horizontalCenter="0" verticalCenter="0">
    <mx:DataGrid x="10" y="10" width="460" id="recipes_select" dataProvider="{recipes}" >
      <mx:columns>
        <mx:DataGridColumn headerText="NID" dataField="nid" width="40"/>
        <mx:DataGridColumn headerText="Dish" dataField="title"/>
      </mx:columns>
    </mx:DataGrid>

    <mx:Label x="10" y="160" text="Dish"/>

    <mx:TextInput x="10" y="186" width="460" id="dish" text="{recipes_select.selectedItem.title}"/>

    <mx:Label x="10" y="216" text="Recipe"/>

    <mx:TextArea x="10" y="242" width="460" height="75" id="recipe" text="{recipes_select.selectedItem.body}"/>

    <mx:Button x="416" y="328" label="Save" click="saveRecipe()"/>

    <mx:Button x="420" y="158" label="New" click="newRecipe()"/>

  </mx:Panel>
</mx:Application>