2012年1月18日水曜日

Red5でHello World(2) - クライアント編 その1

※他のRed5関連のエントリはこちら

あぁ、クライアント側書くの、気が重い。気が重いよ~。

Flexプロジェクト、Main.mxmlの作成
以前インストールしたFlashDevelopにて、
メニューより「プロジェクト」→「新規プロジェクト」

NewProject画面で、
"Flex 3 Project"を選択。"名前"、"場所"は適当に。パッケージはブランクでもOK。
"プロジェクトフォルダーを作成する"は、まあチェックしときましょう。
これで「OK」をクリック

3ペインで右ペイン(プロジェクトペイン)に、"bin"、"lib"、"src"フォルダが作成されており、src配下にMain.mxmlが自動生成されてます。
このMain.mxmlをダブルクリックすると、左ペインにソースが表示されます。

Main.mxml(自動生成直後)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
</mx:Application>

このMXMLファイルにRed5との接続処理などをがりがり書いていってもいいのですが、ここは知ったげにViewとLogicの分離を考慮してコードを書いていこうかと思います。
つまり、MXMLにはView(画面、ユーザインターフェース)、これとは別のActionScriptにLogic(処理)を受け持たせるということです。
さて、次はActionScriptのファイルを作ります。

HelloTest.asの作成
プロジェクトペインの"src"を右クリック→「新規作成」→「New Class...」

New ActionScript Class画面にて、
パッケージ名はとりあえずブランクでOK
修飾子は、"public"を選択
名前は適当でOKですが、ここは安易に"HelloTest"としました。
インターフェースには、
mx.core.IMXMLObject
を指定し、"インターフェースに合わせたメソッドを自動生成"をチェックし、「OK」をクリック

これで、HelloTest.asファイルが作成されます。

HelloTest.as(自動生成直後)
package  
{
 import mx.core.IMXMLObject;
 
 /**
  * ...
  * @author handatec
  */
 public class HelloTest implements IMXMLObject 
 {
  
  public function HelloTest() 
  {
   
  }
  
  /* INTERFACE mx.core.IMXMLObject */
  
  public function initialized(document:Object, id:String):void 
  {
   
  }
  
 }

}


これでベースができました。
次回はこれらをベースにRed5接続、メソッド呼び出し、切断処理などを書いていきます。

0 件のコメント: