Flex HTTPService with ASP.NET

No.of Views2829
Bookmarked0 times
Downloads 
Votes0
By  ninethsense   On  16 Feb 2010 00:02:57
Tag : ASP.NET , Miscellaneous
A beginners tutorial on HTTPService of Flex and ASP.NET
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 
Image Loading

Introduction

This tutorial is to demonstrate the use of HTTPService feature in Flex 2+ with ASP.NET. There are many ways in Adobe Flex to communicate with ASP.NET (or simply, server side languages). HttpService, WebService, WebORB, FluorineFx, etc. In this tutorial, I concentrate only on HTTPService.

<mx:HTTPService />

The attached sample demonstrates how to send and receive data to-and-from ASP.NET. Keep in mind that HTTPService is useful only for handling small amount of data. We will pass requests from flex application as parameters and send back the requested data in XML format.

Role of ASP.NET in HTTPService

HTTPService can handle XML, text, and some more types of data. We will make use of XML for the sample application. ASP.NET application will generate data based on the requests from Flex application. Here is a typical method I used to generate the data in XML format:

private void GetAll()
{
SqlDataAdapter da = new SqlDataAdapter
("SELECT id, name, email FROM test", con);
// Bad code. Just for demo purposeDataSet ds = new DataSet();
da.Fill(ds);
ds.DataSetName = "parent";
ds.Tables[0].TableName = "child";
// Output data in XML formatResponse.Write("");
Response.Write(ds.GetXml());
}

The output of this method looks like this:

<?xml version="1.0" encoding="utf-8"?><parent><child><id>2</id><name>Praveen.V.Nair</name><email>ninethsense@hotmail.com</email></child></parent>

Since Flex can send any number of requests for different purposes, I use a switch checking like: 

switch (Request["call"]) {case "GetDataById":
                    GetDataById(int.Parse(Request["id"]));break;case "GetAll":
                    GetAll();break;case "SaveData":
                    SaveData(Request["name"], Request["email"]);break;case "AnotherMethod":// your method callbreak;
            }

It is all about ASP.NET. Now comes the Flex part. You know Flex is more concentrated on UI.

Role of Flex

The core thing is HTTPService. This you need to use like:

<mx:HTTPService id="hsData" url="http://localhost/flextest/Default.aspx"fault="httpFaultHandler(event)"result="httpResultHandler(event)"method="POST"
  /> 

Please check the documentation for different properties it supports. I used only what we need for the sample application. Well, now we can use its send method to request data from ASP.NET. httpservice.send() is how we will do this. If we need to send parameters, we will need to use a flex object for that. See the example:

private function PopulateDataGridAll(event:MouseEvent):void {
var params:Object = {};
params["call"] = "GetAll";
hsData.send(params);
}

Note that params is the object I use to store parameters and send to server. After the send() method, data will be returned to the flex application which we will populate in flex DataGrid. DataGrid component code looks like this:

<mx:DataGrid id="dg" dataProvider="{hsData.lastResult.parent.child}"><mx:columns><mx:DataGridColumn headerText="ID" dataField="id"/><mx:DataGridColumn headerText="Name" dataField="name"/><mx:DataGridColumn headerText="EMail" dataField="email"/></mx:columns></mx:DataGrid>

Well, the columns details are not necessary. It will show all columns if you do not use it. (Remember the AutoGenerateColumns feature of ASP.NET).

In the above code, dataProvider property uses hsData.lastResult.parent.child where, parent and child are nodes of the XML input. Check the sample XML output of ASP.NET provided on top of this article for more understanding.

If you run the application, you will see the application similar to the screenshot provided. To demonstrate the flex-ASP.NET communication, I added the below mentioned features:

  • Get all records (ASP.NET method: GetAll()) from server and show in DataGrid
  • Get a record (ASP.NET method: GetDataById()) from server and show in DataGrid
  • Put a record (ASP.NET method: SaveData()) to server and show in DataGrid

Sample Project Source 

Download source files -1 kb

 
Sign Up to vote for this article
 
About Author
 
ninethsense
Occupation-
Company-
Member Type-Junior
Location-Not Provided
Joined date- 21 Jul 2009
Home Page-http://blog.ninethsense.com/
Blog Page-http://blog.ninethsense.com/
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top