How to create a dynamic form?

Question

I want to create a form consisting of checkboxes that is based on data stored in a database and accessed via a RESTful web service in JSON format. Furthermore, some of these checkboxes will need to be pre-checked, based on other data stored and accessed in the manner described above. From what I understand I can use a repeater to create the checkboxes, but I'm unsure about the following and appreciate some guidance/suggestions.

1. How to receive/send data in JSON (using Flex)
2. How can I 'pre-check' the checkboxes. With jsp, I'd iterate over the collection of checkbox options and then iterate over the previously selected options and if the two values matched I'd add checked='yes' to the checkbox tag.

Answer 1

This should get you started.

Here is how to communicate with a JSON service:

<mx:HTTPService id="service" resultFormat="text" url="http://json service url" result="onJSONLoad(event)" />

• id – Give the control a variable name so we can reference it later.
• url – the url that points to the JSON data we are loading
• resultFormat – the format that we want the data returned to us in. (In this case, just the raw text).
• result – event handler that is called when the data loads.

then to get the data:

                    import mx.rpc.events.ResultEvent;
            import com.adobe.serialization.json.JSON;

            private function onJSONLoad(event:ResultEvent):void
            {
                //get the raw JSON data and cast to String
                var rawData:String = String(event.result);

                //decode the data to ActionScript using the JSON API
                //in this case, the JSON data is a serialize Array of Objects.
                var arr:Array = (JSON.decode(rawData) as Array);

                //do something with the Array
}

To Send Data:

<mx:HTTPService id="sendData" url="url of JSON service"
   useProxy="false" method="GET" resultFormat="text"
   result="updatedPHPDataResult(event)">
</mx:HTTPService>

And a UI element to trigger a send event

<mx:Button x="10" y="259" label="UpdateDatabase" id="butUpdate" click="{sendPHPData()}"/>

Now here is your ActionScript methods:

private function sendPHPData():void
{
  var objSend:Object = new Object();
  var dataString:String = JSON.encode(dataArray.toArray());
  dataString = escape(dataString);
  objSend.setTutorials = "true";
  objSend.jsonSendData = dataString;
  sendData.send(objSend);
}

And something to show it works

private function updatedPHPDataResult(event:ResultEvent):void
{
  lblStatus.text = String(event.result);
}