Flex学習記04 - プロジェクトの作成について

これまでのエントリ

• Flex学習記01 - Flexとは
• Flex学習記02 - Flex Builder
• Flex学習記03 - MXMLとActionScript

FlexBuilder(Eclipse)を使ってFlexアプリケーションを開発するとなると、サーバーサイド（Java）と同じプロジェクトで管理できたら楽じゃないスか？という疑問が沸いてきました。

情報を探してみると、同一プロジェクトで管理する方法もあるようです。

私は結局のところ、既存のサーバーアプリの開発環境も生かしつつ進めたいので、サーバー（Tomcatプロジェクト）とクライアント（Flexプロジェクト）のプロジェクトは別々に作成した方が良いだろうという結論になりました。
2つのプロジェクトを開いておけば、クライアントとサーバのクロスデバッグも可能になります。

私がやっているプロジェクトの作成方法をメモしておきます。

環境

Eclipse3.4(Ganymede)

Eclipse Downloadsから、Eclipse IDE for Java EE Developerをダウンロードしたものです。

Flex Builder3

Eclipse Plugin版を使っています。

Tomcat

Apache Tomcat - Apache Tomcatから、apache-tomcat-6.0.18を入れました

Tomcatプラグイン

EclipseTotale - Sysdeo Eclipse Tomcat Launcher Pluginから入手

Pleiades (プレアデス)で日本語化

Pleiades (Eclipse プラグイン日本語化プラグイン)よりプラグインを入手

EclipseでTomcatの設定

[ウィンドウ]→[設定]から、Tomcatの関連づけを行う。

Tomcatプロジェクトの作成

• [Java]パースペクティブへ切り替え
• [ファイル]→[新規]→[プロジェクト]を選択
• [Tomcatプロジェクト]を選択して[次へ]

ここでは、/sample-serverというコンテキストのサーバーを作成。

簡単なプログラム

2つの数値を受け取って、足し算した結果をXML形式で返すサーブレットを作成してみました。

package morningmist7.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AddServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest req, HttpServletResponse res)
			throws ServletException, IOException {
		doPost(req, res);
	}
	public void doPost(HttpServletRequest req, HttpServletResponse res)
			throws ServletException, IOException {
		int arg1 = Integer.parseInt(req.getParameter("arg1"));
		int arg2 = Integer.parseInt(req.getParameter("arg2"));
		int sum = arg1 + arg2;
		res.setContentType("text/xml; charset=UTF-8");
		PrintWriter out = res.getWriter();
		
		//XML
		String result = "<result><sum>" + sum + "</sum></result>";
		
		System.out.println(result);
		out.println(result);
		out.close();
	}
}

サーブレットを登録するために、WEB-INF/web.xmlを作成します。

<?xml version="1.0" encoding="ISO-8859-1"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
   version="2.5">

  <display-name>Welcome to Tomcat</display-name>
  <description>
     Welcome to Tomcat
  </description>

  <servlet>
    <servlet-name>add</servlet-name>
    <servlet-class>morningmist7.servlet.AddServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>add</servlet-name>
    <url-pattern>/add</url-pattern>
  </servlet-mapping>

</web-app>

動作確認

ブラウザから、http://localhost:8080/sample-server/add?arg1=2&arg2=3にアクセスして、

<result>
<sum>5</sum>
</result>

のようなXMLがブラウザに表示されればOK。

また、ブレークポイントを設定して、[実行]→[デバッグ]として、ブレークポイントで処理が止まることを確認。

Flexプロジェクトの作成

やっとここからFlexプロジェクトの作成へ。

• [Flex 開発]パースペクティブへ切り替え
• [ファイル]→[新規]→[Flexプロジェクト]を選択

[アプリケーションの種類]に、Web アプリケーション（FlashPlayerで実行）
[サーバーテクノロジ][アプリケーションサーバーの種類]に、その他を選択
[リモートオブジェクトアクセスサービスを使用]をチェックOFF
[WEP を使用して結合したJava/Flexプロジェクトを作成]をチェックOFF

ここでは、プロジェクト名にsample-clientを指定しました。

• [次へ]をクリック。
• 出力を設定する画面で、先ほど作成したTomcatプロジェクトのルートパス（ルートパスより配下）を指定します。
  • ここでは、[Tomcatプロジェクトのルート(sample-server)]/flex-debugを指定しました。

• [次へ]をクリック。
• ソースパスを指定する画面で、出力フォルダURLに、[Tomcatアプリケーションのルート(sample-server)]/flex-debugを指定します
  • http://localhost:8080/sample-server/flex-debug/

サーバーと連携するFlexアプリケーションを作成

main.mxmlに以下のようなコードを書きました。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute"
  backgroundImage=""
  backgroundColor="#ffffff"
  viewSourceURL="src/main.mxml"
  creationComplete="creationCompleteHandler()"
  >
  <mx:Script>
    <![CDATA[
      import mx.rpc.events.ResultEvent;
      
      private function creationCompleteHandler():void {
      }
      private function send():void {
        var loader:URLLoader = new URLLoader();
        loader.addEventListener(Event.COMPLETE, completeHandler);
        //Java Servlet
        var request:URLRequest = new URLRequest("/sample-server/add");
        request.method = URLRequestMethod.POST;
        var v:URLVariables = new URLVariables();
        v["arg1"] = arg1.text;
        v["arg2"] = arg2.text;
        request.data = v;
        loader.load(request);
      }
      private function completeHandler(event:Event):void {
        //E4X (XML)に展開
        var e:XML = new XML(URLLoader(event.target).data);
        result.text = e.sum;
      }
      
      private function userRequestResultHandler(event:ResultEvent):void {
        //for E4x
        result.text = event.result.sum;
      } 
    ]]>
  </mx:Script>

  <mx:VBox width="100%" height="100%">
   <mx:HBox>
   <mx:Label text="arg1 = " /><mx:TextInput id="arg1" text="2" />
   </mx:HBox>
   <mx:HBox>
   <mx:Label text="arg2 = " /><mx:TextInput id="arg2" text="3" />
   </mx:HBox>
   <mx:Button label="Add(URLLoader)" click="send()" />
   <mx:HBox>
   <mx:Label text="sum = " /><mx:TextInput id="result" text="" />
   </mx:HBox>
  </mx:VBox>

</mx:Application>

デザインビューで見るとこんな感じです。

Tomcatを起動した状態で、メニュー[実行]→[実行]をクリックすることで動作確認をすることができます。