S2BlazeDS Samples

このサンプルは、COOL deploy(修正を即座に認識しない)で動いています。データプッシュ系の機能は、COOL deployでしか動作しないためです。 HOT deployに切り替えるときには、src/main/resources/env.txtの内容をctにしてください。

HTTPServiceによるSAStrutsとの連携
WebServiceの呼び出し
RemoteObjectによるSeasar2との連携
メッセージの送信と受信

HTTPServiceによるSAStrutsとの連携

FlexとSAStrutsは簡単に連携できます。サンプルを実行し"Get Data"のボタンをクリックしてください。 DataGridにプロダクトテーブルの中身が表示されます。カラムをクリックすることでソートをすることもできます。また、カラムをドラッグアンドドロップすることで、カラムの位置を入れ替えることもできます。

サンプルの実行

s2blazeds-client-exampleプロジェクトのsrc/httpservicemain.mxmlをみてみましょう。

httpservicemain.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF">
	
    <mx:HTTPService id="srv" url="@ContextRoot()/product"
        showBusyCursor="true"/>

    <mx:DataGrid dataProvider="{srv.lastResult.products.product}"
        width="100%" height="100%"/>
	
    <mx:Button label="Get Data" click="srv.send()"/> 
	
</mx:Application>

HTTPServiceタグを使って、サーバにリクエストを送ることができます。リクエストの送り先は、url属性で指定します。
@ContextRoot()は、Flash(Flex)がダウンロードされたコンテキストのパスを返します。同じサイトのURLにアクセスする場合は、/s2blazeds-server-exampleのように直接リテラルを指定するのでなく、@ContextRoot()を使ったほうが良いでしょう。コンテキストのパスの変更に柔軟(ソースコードを変更する必要がない)に対応するためです。

Buttonタグのclick属性でsrv.send()のように呼び出すとサーバにリクエストを送ることができます。

HTTPServiceは非同期呼び出しになります。 srv.send()の結果は、非同期でsrc.lastResultに格納されます。 lastResultの中身は、次のようなXMLなので、srv.lastResult.products.productを DataGridタグのdataProvider属性に指定すると、 productが繰り返して表示されます。

<products>
    <product>
        ...
    </product>
    <product>
        ...
    </product>
</products>

dataProvider="{srv.lastResult.products.product}"のように属性の値を"{変数}"と指定した場合、変数の値が変わったときに、自動的に属性の値に変更後の変数の値が代入されます。

SAStrutsでは、/productのパスは、ProductActionにマッピングされます。 src/main/java/flex/samples/action/ProductAction.javaを見てみましょう。

ProductAction.java

package flex.samples.action;

import java.util.List;

import org.seasar.extension.jdbc.JdbcManager;
import org.seasar.struts.annotation.Execute;

import flex.samples.entity.Product;

public class ProductAction {

    public JdbcManager jdbcManager;

    public List items;

    @Execute(validator = false)
    public String index() {
        items = jdbcManager.from(Product.class).getResultList();
        return "products.jsp";
    }
}

Productエンティティを全件検索した結果をitemsプロパティに代入し、products.jspに遷移しています。それでは、webapp/product/products.jspを見てみましょう。

products.jsp

<products>
<c:forEach var="p" items="${items}">
    <product productId="${p.productId}">
        <name>${p.name}</name>
        <description>${p.description}</description>
        <price>${p.price}</price>
        <image>${p.image}</image>
        <category>${p.category}</category>
        <qtyInStock>${p.qtyInStock}</qtyInStock>
    </product>
</c:forEach>
</products>

JSPでXMLを出力しています。JSPの出力結果は、Flex側でlastResultとして受け取ることができます。

WebServiceの呼び出し

FlexはWebServiceを使って外部と簡単に連携することができます。サンプルを実行し"Get Data"のボタンをクリックしてください。 DataGridにWebServiceでアクセスした結果(XML)が表示されます。

Proxyを経由して外部にアクセスする必要がある場合は、proxy-config.xmlに Proxyの設定をしなければいけません。

s2blazeds-server-exampleプロジェクトの webapp/WEB-INF/flex/proxy-config.xmlにDefaultHTTPのエントリがあるので、 external-proxyのコメントをはずし、自分たちの環境に合わせて書き換えてください。 external-proxyの詳細は、こちらを参照してください。

書き換えた後は、Tomcat(turnkey)を再起動します。

サンプルの実行

s2blazeds-client-exampleプロジェクトのsrc/webservicemain.mxmlをみてみましょう。

webservicemain.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF">
	
    <mx:WebService id="srv"
        wsdl="http://livecycledata.org/services/ProductWS?wsdl"
        showBusyCursor="true"/>
	
    <mx:DataGrid dataProvider="{srv.getProducts.lastResult}"
        width="100%" height="100%"/>

    <mx:Button label="Get Data" click="srv.getProducts()"/>
	
</mx:Application>

WebServiceタグを使って、WebServiceを呼び出すことができます。 wsdl属性でWSDLのロケーションを指定します。

Buttonタグのclick属性でsrv.getProducts()のように呼び出すと WebServiceにリクエストを送ることができます。

WebServiceは非同期呼び出しになります。 srv.getProducts()の結果は、非同期でsrc.getProducts.lastResultに格納されます。

RemoteObjectによるSeasar2との連携

FlexはRemoteObjectを使ってSeasar2で管理されているコンポーネントと簡単に連携することができます。サンプルを実行し"Get Data"のボタンをクリックしてください。 DataGridにProductService#getProducts()の結果が表示されます。

サンプルの実行

s2blazeds-client-exampleプロジェクトのsrc/remoteobjectmain.mxmlをみてみましょう。

webservicemain.mxml

<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF">
	
    <mx:RemoteObject id="srv" destination="productService"
        showBusyCursor="true"/>
	
    <mx:DataGrid dataProvider="{srv.getProducts.lastResult}"
        width="100%" height="100%"/>

    <mx:Button label="Get Data" click="srv.getProducts()"/>
	
</mx:Application>

RemoteObjectタグを使って、WebServiceを呼び出すことができます。 destination属性でSeasar2で管理されているコンポーネント名を指定します。

Buttonタグのclick属性でsrv.getProducts()のように呼び出すと ProductService#getProducts()を呼び出すことができます。

RemoteObjectは非同期呼び出しになります。 srv.getProducts()の結果は、非同期でsrc.getProducts.lastResultに格納されます。

メッセージの送信と受信

FlexはProducerとConsumerを使ってメッセージの送信と受信を簡単におこなうことができます。サンプルを二回実行し"Send"のボタンをクリックしてください。送ったメッセージがもう一つのアプリケーションにも表示されます。

サンプルの実行

s2blazeds-client-exampleプロジェクトのsrc/chatmain.mxmlをみてみましょう。

chatmain.mxml

<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="consumer.subscribe()">
	
    <mx:Script>
        <![CDATA[
		
            import mx.messaging.messages.AsyncMessage;
            import mx.messaging.messages.IMessage;
			
            private function send():void
            {
                var message:IMessage = new AsyncMessage();
                message.body.chatMessage = msg.text;
                producer.send(message);
                msg.text = "";
            }
							
            private function messageHandler(message:IMessage):void
            {
                log.text += message.body.chatMessage + "\n";	
            }
			
        ]]>
    </mx:Script>
	
    <mx:Producer id="producer" destination="chat"/>
    <mx:Consumer id="consumer" destination="chat"
        message="messageHandler(event.message)"/>
	
    <mx:Panel title="Chat" width="100%" height="100%">
        <mx:TextArea id="log" editable="false" width="100%" height="100%"
            backgroundColor="#CEEEE8"/>
        <mx:ControlBar>
            <mx:TextInput id="msg" width="100%" enter="send()"/>
            <mx:Button label="Send" click="send()"/>
        </mx:ControlBar>
    </mx:Panel>
	
</mx:Application>

Producerタグを使って、メッセージを送信することができます。 destination属性で宛先を指定します。

Consumerタグを使って、メッセージを受信することができます。 destination属性で宛先を指定します。実際にメッセージが受信できるようになるのは、consumer.subscribe()を呼び出した後です。

メッセージの宛先は、WEB-INF/flex/messaging-config.xmlで定義されています。