HTTPService コンポーネントの使用
PHP ページ、ColdFusion ページ、JavaServer Pages（JSP）、Java サーブレット、Ruby on Rails、Microsoft ASP ページなどを含む、任意の種類のサーバーサイドテクノロジによって、HTTPService コンポーネントを使用することができます。
HTTPService コンポーネントに関する API 参照情報については、mx.rpc.http.mxml.HTTPService を参照してください。
PHP と SQL データの操作
Flex HTTPService コンポーネントを PHP および SQL データベース管理システムと組み合わせて使用して、Flex アプリケーションでのデータベースクエリーの結果を表示し、データをデータベースに挿入できます。GET または POST を使用して PHP ページを呼び出し、データベースクエリーを実行できます。次に、クエリー結果データを XML 構造体にフォーマットして、この XML 構造体を HTTP 応答で Flex アプリケーションに返すことができます。結果が Flex アプリケーションに返されると、1 つまたは複数のユーザーインターフェイスコントロールに表示することができます。
次に示す例の Flex アプリケーションでは、POST メソッドを使用して PHP ページを呼び出します。PHP ページは、users と呼ばれる MySQL データベーステーブルへのクエリーを実行します。このページは、クエリーの結果を XML にフォーマットし、この XML を Flex アプリケーションに返します。ここで、XML は、DataGrid コントロールの dataProvider プロパティにバインドされ、DataGrid コントロールに表示されます。また、Flex アプリケーションは、新しいユーザーのユーザー名と電子メールアドレスを PHP ページに送信して、ユーザーのデータベーステーブルへの挿入も実行します。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns="*" creationComplete="send_data()">
<mx:Script>
<![CDATA[
private function send_data():void {
userRequest.send();
}
]]>
</mx:Script>
<mx:Form x="22" y="10" width="493">
<mx:HBox>
<mx:Label text="Username"/>
<mx:TextInput id="username"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="Email Address"/>
<mx:TextInput id="emailaddress"/>
</mx:HBox>
<mx:Button label="Submit" click="send_data()"/>
</mx:Form>
<mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{userRequest.lastResult.users.user}">
<mx:columns>
<mx:DataGridColumn headerText="User ID" dataField="userid"/>
<mx:DataGridColumn headerText="User Name" dataField="username"/>
</mx:columns>
</mx:DataGrid>
<mx:TextInput x="22" y="292" id="selectedemailaddress"
text="{dgUserRequest.selectedItem.emailaddress}"/>
<mx:HTTPService id="userRequest" url="http://localhost/myproj/request_post2.php" useProxy="false" method="POST">
<mx:request xmlns="">
<username>{username.text}</username>
<emailaddress>{emailaddress.text}</emailaddress>
</mx:request>
</mx:HTTPService>
</mx:Application>
HTTPService の send() メソッドは PHP ページの呼び出しを実行します。この呼び出しは、MXML ファイルのスクリプトブロックにある send_data() メソッドで実行されます。
HTTPService コンポーネントの resultFormat プロパティが object に設定されるので、データは ActionScript オブジェクトのグラフとして Flex アプリケーションに返送されます。これは resultFormat プロパティのデフォルト値です。または、e4x の resultFormat を使用して、ECMAScript for XML（E4X）処理を実行できる XMLList オブジェクトにデータを返します。resultFormat プロパティの e4x への切り替えには、次のような MXML コードのマイナー変更が必要です。
この例で返された XML には、名前空間の情報は含まれていません。名前空間を含む XML の操作については、結果を E4X 結果フォーマットの XML として処理する方法を参照してください。
...
<mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{userRequest.lastResult.user}">
...
<mx:HTTPService id="userRequest" url="http://server/myproj/request_post2.php" useProxy="false" method="POST" resultFormat="e4x">
...
e4x 結果フォーマットを使用する場合は、次のコード例が示すように、lastResult プロパティを XMLListCollection オブジェクトにバインドし、そのオブジェクトを DataGrid.dataProvider プロパティにバインドすることもできます。
...
<mx:XMLListCollection id="xc"
source="{userRequest.lastResult.user}"/>
<mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{xc}">
...
このアプリケーションの PHP コードは、sample と呼ばれる MySQL データベースの users と呼ばれるデータベーステーブルを使用しています。次の MySQL スクリプトがテーブルを作成します。
CREATE TABLE `users` ( `userid` int(10) unsigned NOT NULL auto_increment, `username` varchar(255) collate latin1_general_ci NOT NULL, `emailaddress` varchar(255) collate latin1_general_ci NOT NULL, PRIMARY KEY (`userid`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=3 ;
このアプリケーションは、次の PHP ページを呼び出します。この PHP コードは SQL データベースの挿入とクエリーを実行し、クエリー結果を XML 構造体で Flex アプリケーションに返します。
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php
define( "DATABASE_SERVER", "servername" );
define( "DATABASE_USERNAME", "username" );
define( "DATABASE_PASSWORD", "password" );
define( "DATABASE_NAME", "sample" );
//connect to the database.
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
// Quote variable to make safe
function quote_smart($value)
{
// Stripslashes
if (get_magic_quotes_gpc()) {
$value = stripslashes($value);
}
// Quote if not integer
if (!is_numeric($value)) {
$value = "'" . mysql_real_escape_string($value) . "'";
}
return $value;
}
if( $_POST["emailaddress"] AND $_POST["username"])
{
//add the user
$Query = sprintf("INSERT INTO users VALUES ('', %s, %s)", quote_smart($_POST['username']), quote_smart($_POST['emailaddress']));
$Result = mysql_query( $Query );
}
//return a list of all the users
$Query = "SELECT * from users";
$Result = mysql_query( $Query );
$Return = "<users>";
while ( $User = mysql_fetch_object( $Result ) )
{
$Return .= "<user><userid>".$User->userid."</userid><username>".$User->username."</username><emailaddress>".$User->emailaddress."</emailaddress></user>";
}
$Return .= "</users>";
mysql_free_result( $Result );
print ($Return)
?>
</body>
</html>
ColdFusion と SQL データの操作
Flex HTTPService コンポーネントを ColdFusion ページと SQL データベース管理システムと組み合わせて使用して、Flex アプリケーションでのデータベースクエリーの結果を表示し、データをデータベースに挿入できます。GET または POST を使用し、ColdFusion ページを呼び出して、データベースクエリーを実行できます。次に、クエリー結果データを XML 構造体にフォーマットして、この XML 構造体を HTTP 応答で Flex アプリケーションに返すことができます。結果が Flex アプリケーションに返されると、1 つまたは複数のユーザーインターフェイスコントロールに表示することができます。
次に示す例の Flex アプリケーションでは、POST メソッドを使用して ColdFusion ページを呼び出します。ColdFusion ページは、users と呼ばれる MySQL データベーステーブルへのクエリーを実行します。このページは、クエリーの結果を XML にフォーマットし、この XML を Flex アプリケーションに返します。ここで、XML は、DataGrid コントロールの dataProvider プロパティにバインドされ、DataGrid コントロールに表示されます。また、Flex アプリケーションは、新しいユーザーのユーザー名と電子メールアドレスを ColdFusion ページに送信して、ユーザーのデータベーステーブルへの挿入も実行します。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" creationComplete="userRequest.send()">
<mx:Form x="22" y="10" width="493">
<mx:HBox>
<mx:Label text="Username"/>
<mx:TextInput id="username"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="Email Address"/>
<mx:TextInput id="emailaddress"/>
</mx:HBox>
<mx:Button label="Submit" click="userRequest.send()"/>
</mx:Form>
<mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{userRequest.lastResult.users.user}">
<mx:columns>
<mx:DataGridColumn headerText="User ID" dataField="userid"/>
<mx:DataGridColumn headerText="User Name" dataField="username"/>
</mx:columns>
</mx:DataGrid>
<mx:TextInput x="22" y="292" id="selectedemailaddress" text="{dgUserRequest.selectedItem.emailaddress}"/>
<mx:HTTPService id="userRequest" url="http://server:8500/flexapp/returncfxml.cfm" useProxy="false" method="POST">
<mx:request xmlns="">
<username>{username.text}</username>
<emailaddress>{emailaddress.text}</emailaddress>
</mx:request>
</mx:HTTPService>
</mx:Application>
HTTPService の send() メソッドは ColdFusion ページの呼び出しを実行します。この呼び出しは、MXML ファイルのスクリプトブロックにある send_data() メソッドで実行されます。
HTTPService コンポーネントの resultFormat プロパティが object に設定されるので、データは ActionScript オブジェクトのグラフとして Flex アプリケーションに返送されます。これは resultFormat プロパティのデフォルト値です。または、e4x の結果フォーマットを使用して、ECMAScript for XML（E4X）処理を実行できる XMLList オブジェクトとしてデータを返します。resultFormat プロパティの e4x への切り替えには、次のような MXML コードのマイナー変更が必要です。
この例で返された XML には、名前空間の情報は含まれていません。名前空間を含む XML の操作については、結果を E4X 結果フォーマットの XML として処理する方法を参照してください。
...
<mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{userRequest.lastResult.user}">
...
<mx:HTTPService id="userRequest" url="http://server:8500/flexapp/returncfxml.cfm" useProxy="false" method="POST" resultFormat="e4x">
...
e4x 結果フォーマットを使用する場合は、次のコード例が示すように、lastResult プロパティを XMLListCollection オブジェクトにバインドし、そのオブジェクトを DataGrid dataProvider プロパティにバインドすることもできます。
...
<mx:XMLListCollection id="xc"
source="{userRequest.lastResult.user}"/>
<mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{xc}">
...
このアプリケーションの ColdFusion コードは、sample と呼ばれる MySQL データベースの users と呼ばれるデータベーステーブルを使用しています。次の MySQL スクリプトがテーブルを作成します。
CREATE TABLE `users` ( `userid` int(10) unsigned NOT NULL auto_increment, `username` varchar(255) collate latin1_general_ci NOT NULL, `emailaddress` varchar(255) collate latin1_general_ci NOT NULL, PRIMARY KEY (`userid`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=3 ;
このアプリケーションは、次の ColdFusion ページを呼び出します。この ColdFusion コードは SQL データベースの挿入とクエリーを実行し、クエリー結果を Flex アプリケーションに返します。ColdFusion ページでは、cfquery タグを使用してデータベースにデータが挿入され、データベースへのクエリーが実行されると共に、cfxml タグの使用によりクエリー結果が XML 構造体にフォーマットされます。
<cfprocessingdirective pageencoding = "utf-8" suppressWhiteSpace = "Yes">
<cfif isDefined("username") and isDefined("emailaddress") and username NEQ "">
<cfquery name="addempinfo" datasource="sample">
INSERT INTO users (username, emailaddress) VALUES (
<cfqueryparam value="#username#" cfsqltype="CF_SQL_VARCHAR" maxlength="255">,
<cfqueryparam value="#emailaddress#" cfsqltype="CF_SQL_VARCHAR" maxlength="255"> )
</cfquery>
</cfif>
<cfquery name="alluserinfo" datasource="sample">
SELECT userid, username, emailaddress FROM users
</cfquery>
<cfxml variable="userXML">
<users>
<cfloop query="alluserinfo">
<cfoutput>
<user>
<userid>#toString(userid)#</userid>
<username>#username#</username>
<emailaddress>#emailaddress#</emailaddress>
</user>
</cfoutput>
</cfloop>
</users>
</cfxml>
<cfoutput>#userXML#</cfoutput>
</cfprocessingdirective>
JSP（JavaServer Pages）の操作
Flex HTTPService コンポーネントを JSP ページと SQL データベース管理システムと組み合わせて使用して、Flex アプリケーションでのデータベースクエリーの結果を表示し、データをデータベースに挿入できます。GET または POST を使用して JSP ページを呼び出し、データベースクエリーを実行できます。次に、クエリー結果データを XML 構造体にフォーマットして、この XML 構造体を HTTP 応答で Flex アプリケーションに返すことができます。結果が Flex アプリケーションに返されると、1 つまたは複数のユーザーインターフェイスコントロールに表示することができます。
次の例に示す Flex アプリケーションでは、SQL データベースからデータを取得する JSP ページを呼び出します。このページは、データベースクエリーの結果を XML にフォーマットし、この XML を Flex アプリケーションに返します。ここで、XML は、DataGrid コントロールの dataProvider プロパティにバインドされ、DataGrid コントロールに表示されます。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:HTTPService id="srv" url="catalog.jsp"/>
<mx:DataGrid dataProvider="{srv.lastResult.catalog.product}" width="100%" height="100%"/>
<mx:Button label="Get Data" click="srv.send()"/>
</mx:Application>
HTTPService の send() メソッドは JSP ページの呼び出しを実行します。この呼び出しは、MXML ファイルのボタンの click イベントで実行されます。
HTTPService コンポーネントの resultFormat プロパティが object に設定されるので、データは ActionScript オブジェクトのグラフとして Flex アプリケーションに返送されます。これは resultFormat プロパティのデフォルト値です。または、e4x の結果フォーマットを使用して、ECMAScript for XML（E4X）処理を実行できる XMLList オブジェクトにデータを返します。resultFormat プロパティの e4x への切り替えには、次のような MXML コードのマイナー変更が必要です。
この例で返された XML には、名前空間の情報は含まれていません。名前空間を含む XML の操作については、結果を E4X 結果フォーマットの XML として処理する方法を参照してください。
...
<mx:HTTPService id="srv" url="catalog.jsp" resultFormat="e4x"/>
...
<mx:DataGrid dataProvider="{srv.lastResult.product}" width="100%" height="100%"/>
e4x 結果フォーマットを使用する場合は、lastResult プロパティを XMLListCollection オブジェクトにバインドし、そのオブジェクトを DataGrid.dataProvider プロパティにバインドすることもできます。
...
<mx:XMLListCollection id="xc"
source="{userRequest.lastResult.product}"/>
<mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{xc}">
...
次の例は、このアプリケーションで使用する JSP ページを示しています。この JSP ページは、データベースを直接呼び出すことはありません。ProductService と呼ばれる Java クラスからデータを取得し、Product と呼ばれる Java クラスを使用して個々の製品を表します。
<%@page import="flex.samples.product.ProductService,
flex.samples.product.Product,
java.util.List"%>
<?xml version="1.0" encoding="utf-8"?>
<catalog>
<%
ProductService srv = new ProductService();
List list = null;
list = srv.getProducts();
Product product;
for (int i=0; i<list.size(); i++)
{
product = (Product) list.get(i);
%>
<product productId="<%= product.getProductId()%>">
<name><%= product.getName() %></name>
<description><%= product.getDescription() %></description>
<price><%= product.getPrice() %></price>
<image><%= product.getImage() %></image>
<category><%= product.getCategory() %></category>
<qtyInStock><%= product.getQtyInStock() %></qtyInStock>
</product>
<%
}
%>
</catalog>
ActionScript での HTTP サービスの呼び出し
次の例は、ActionScript スクリプトブロック内の HTTP サービス呼び出しを示しています。useHTTPService() メソッド呼び出しで、サービスを宣言し、宛先を設定し、result および fault イベントリスナーを設定して、サービスの send() メソッドを呼び出しています。
<?xml version="1.0"?>
<!-- fds\rpc\HttpServiceInAS.mxml. Compiles -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="10">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.http.HTTPService;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
private var service:HTTPService
public function useHttpService(parameters:Object):void {
service = new HTTPService();
service.destination = "sampleDestination";
service.method = "POST";
service.addEventListener("result", httpResult);
service.addEventListener("fault", httpFault);
service.send(parameters);
}
public function httpResult(event:ResultEvent):void {
var result:Object = event.result;
//Do something with the result.
}
public function httpFault(event:FaultEvent):void {
var faultstring:String = event.fault.faultString;
Alert.show(faultstring);
}
]]>
</mx:Script>
</mx:Application>
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート