Flexで丸画像とか

Flexで四角以外のアイテムを生成するときのお話
忘れそうなのでメモメモ

丸画像に対してイベントを取得したい時など、Imageを使うと四角の領域でイベントが取得されます。
コンポーネントに対して mask 処理をしてやることで、任意の領域のみイベントの対象とする事が出来ます。

詳細はコチラ
Imageを拡張したクラスを用意して、 cornerRadius プロパティを追加。
描画更新時（updateDisplayList）に、cornerRadius の値からマスクを作成してセット。

Flex 自分メモ

・FlexBuilderでプロジェクトのプロパティ画面（Flexビルドパスなど）が表示されない時は、境界線をちょっと移動すると表示される。

・サイズが％指定の領域内でスクロールさせたい場合（VBox 100%など）は minHeight=0 を指定しておく

・ListのItemRendererでTextAreaなどを使用し、行数が増える場合データは正しく更新されるが、表示ははじめの行数のまま増えない。
この場合は itemRenderer="mx.controls.Text" を指定してやれば良い。

以上、メモ投稿

Air Flex visible=false で領域を確保しないように

良く忘れるのでメモ

通常Air,Flexではlayoutを指定した状態（verticalとかhorizontalとか）で、配置されたオブジェクトのvisibleをfalseにしても、表示が消えるだけで詰めてはくれません。

詰める場合は includeInLayout というアトリビュートを false にしてやればＯＫです。

Grails/Groovy勉強会やります

JGGUGの第２回名古屋支部イベント「Grails/Groovy勉強会」でスピーカーをやる事になりました。

詳細はこちら

「Grailsで｛さくさく｝作るRIA」ですが、内容は入門編です。
続きも考えて居ますので、興味ある方は無料なんで是非ご来場下さい :)

GrailsでblazeDSプッシュ配信！その１

blazeDSといえばプッシュ機能がついていますが、grailsのflex pluginでは定義されてないので使う事が出来ません。

せっかくあるんだし、サーバから一斉にメッセージ配信とかなんかカッコイイ（ここ重要）ので実装してみました。
まずは plugin を改良して streaming と polling の定義を追加します。

service-config.xml を編集します。

services の中に以下の定義を追加。

<service id="message-service" class="flex.messaging.services.MessageService">
  <adapters>
    <adapter-definition id="actionscript" class="flex.messaging.services.messaging.adapters.ActionScriptAdapter" default="true" />
  </adapters>

  <default-channels>
    <channel ref="grails-streaming-amf"/>
    <channel ref="grails-polling-amf"/>
  </default-channels>

  <destination id="sb-1" />
</service>

＊デフォで入っている default-channels が services 全体になっているので、はじめから定義されている remoting-service の中に正しく入れてやる

desitination ってのが接続するキーになります、このタグの中にある security って項目を使うと別のユーザ管理と認証が出来ます。
（acegi と連動出来たら素敵ですが、とりあえず認証無しで）

channelsに以下を追加

<channel-definition id="grails-streaming-amf" class="mx.messaging.channels.StreamingAMFChannel">
    <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/streamingamf" class="flex.messaging.endpoints.StreamingAMFEndpoint"/>
    <properties>
        <idle-timeout-minutes>0</idle-timeout-minutes>
        <max-streaming-clients>10</max-streaming-clients>
        <server-to-client-heartbeat-millis>5000</server-to-client-heartbeat-millis>
        <user-agent-settings>
            <user-agent match-on="MSIE" kickstart-bytes="2048" max-streaming-connections-per-session="1"/>
            <user-agent match-on="Firefox" kickstart-bytes="2048" max-streaming-connections-per-session="1"/>
        </user-agent-settings>
    </properties>
</channel-definition>

<channel-definition id="grails-polling-amf" class="mx.messaging.channels.AMFChannel">
    <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amfpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
    <properties>
        <polling-enabled>true</polling-enabled>
        <polling-interval-seconds>4</polling-interval-seconds>
    </properties>
</channel-definition>

FlexPlugin では GrailsBootstrapService というクラスが BlazeDS の起動時に読み込まれるので、ここで MessageClientListener を登録してやります。

MessageClient.addMessageClientCreatedListener(new ClientWatcher())

ClientWatcher は MessageClientListener を implements したクラス、サンプルでこんなのを用意してみました。

package org.codehaus.groovy.grails.plugins.flex;

import flex.messaging.MessageClient;
import flex.messaging.MessageClientListener;

public class ClientWatcher implements MessageClientListener {
 /**
  * クライアントが接続したときに呼ばれる。
  */
 public void messageClientCreated(MessageClient msgClient) {
   println "connect client"
  
  // 自身をクライアントの切断を監視するリスナとしても登録する。
  msgClient.addMessageClientDestroyedListener(this);
 }

 /**
  * クライアントが切断したときに呼ばれる。
  */
 public void messageClientDestroyed(MessageClient msgClient) {
  println "disconnect client"

  // 明示的にセッションを破棄する。
  msgClient.getFlexSession().timeout();
 }
}

でもクラスを直指定はいけてないので、Acegi風にDefaultConfigで対応するクラスを乗せ変えられるようにしてみました。

// Configのロード
GroovyClassLoader classLoader = new GroovyClassLoader(getClass().getClassLoader())
ConfigObject config
ConfigObject flexConfig
try {
  flexConfig=new ConfigSlurper().parse(classLoader.loadClass('FlexConfig'))
} catch(Exception e) {
}

if(flexConfig) {
  config=flexConfig
} else {
  config=new ConfigSlurper().parse(classLoader.loadClass('DefaultFlexConfig'))
}

// クライアントの接続を監視する
def className="${config.flex.blazeDs.messageClientListener}"
def clientListener=classLoader.loadClass(className).newInstance()
MessageClient.addMessageClientCreatedListener(clientListener)

ここをやっている時、Class.forName() でエラー出てハマっていたので Google先生に聞いてみたら自分が教えてくれた　あるあるw
でも GroovyClassLoader を定義してるんでそっちを使ってみた

これで下準備は完了！
次回は接続＆メッセージ送信編

（この件の事もあるし、要望あれば plugin 公開してもいいかな・・・）

merapiがもたらすAirとJavaの素敵な関係

Air（Flex）でJavaを呼び出すという夢のようなライブラリが登場したようです。
まだベータですが試してみましたのでつらつらと書いていきます。

参考
公式サイト
マイコミの紹介
javaとairを繋ぐmerapiを使ってみた。

まずはJava側の実装から

merapi本体を解凍した中にある framework/java/libs にあるのがJava側で必要なライブラリ
適当なクラスを作って、IMessageHandler を implements する

public static void main の中で Bridge クラスに、自身を regist する

public class MerapiTest implements IMessageHandler {
 public static void main(String[] args) {
  System.out.println("start");
  Bridge.getInstance().registerMessageHandler("merapiSample", new MerapiTest());
 }
}

第一引数でBridgeに登録するID（タイプと呼ぶらしい）、第二引数が自身のJavaクラスのインスタンス

flexから呼ばれた時に handleMessage がcallされるのでこれをクラスに書いておく（インターフェース定義されてます）

  public void handleMessage(IMessage obj) {
    try {
      System.out.println("flex > java :"+((Message)obj).getData());
      Message response = new Message("merapiSample", "hello merapi");
      Bridge.getInstance().sendMessage(response);
    } catch(Exception e) {
      System.out.println("Caught Exception");
    }
  }

IMessageというのがFlexから受け取るデータ、MessageにキャストしてgetDataすると中身を取得出来る。
System.out.println("flex > java :"+((Message)obj).getData());

void なんで return値はなし、Flexに情報を返したい場合は Bridge の sendMessageを使う。
Messageの第一引数にregistしたのと同じIDを指定、第二引数に送りたいデータをセットする。
Message response = new Message("merapiSample", "hello merapi");
Bridge.getInstance().sendMessage(response);

続いてFlex側の実装

merapi本体を解凍した中にある framework/flex/libs にあるのがflex側で必要なライブラリ

まずはBridgeのインスタンスを作成する

<merapi:BridgeInstance id="bridge" result="handleMessage(event)" />

こっちはresultのfunction名を指定出来る、Javaと同じにしとといた方がわかりやすいかもね！

メッセージの送信は以下のように

var message:Message = new Message("merapiSample","from flex");
bridge.sendMessage(message);

MessageクラスはJavaとおんなじ使い方でOK

実行方法

まずは java のクラスを起動してやる必要がある
起動して regist した時点で listen 状態で待機される

この状態でFlexを起動してやると、メッセージを送信出来る
Flexが終了した時点でJavaも落ちる

欠点はJavaを起動する必要がある所かな・・・
終了は一緒に終わってくれるので問題なさそうだけど、Airの起動時にJavaが動いてないとエラーになるんで
なんとかしてJavaを起動してAirを起動するような仕組みが必要

うまく使えばクライアントサイドで今以上に色んな事が出来そうですね！
Grailsとの絡みで考えると、Grails1.1からGORMが単体で使えるようになっているのでsqliteを使った生なDBでなく、GORMを使ってHSQLとかでクライアントDBを実装出来たら素敵な気がする！

Grails Flex Pluginの罠

FlexPluginを使うとサービスでのBlazeDSがめっさ簡単になるんで重宝していたのですが、今日はこいつにやられました。

run-app しているときはシレっと動いてたのですが、warしてGlassFishにのっけてみたら web.xml が DTD にはじかれて登録出来ない・・・
で、調べていったら FlexGrailsPlugin.groovy で注入している所で servlet にたいして display-name を設定しているのが問題っぽい。
これをはずして再度 war したら何事もなく動きました。

余談ですが、GlassFishでWebアプリケーションを配備する時は war のサイズがあんまり大きいとうまくいかないみたい。
なんらかの方法でサーバへファイルをアップし、「Application Server からアクセス可能なローカルのパッケージファイルまたはディレクトリ 」を使うのが良いみたい。

grailsアプリを使う上では glassfish v3より glassfish v2.1の方が早くて安定している気がする・・・
Cubbyでもv2のが相性が良いみたい。 v3はもうちょっと様子見かなぁ

Flexのちょいネタ

MXMLのclickとかにfunctionを当てる場合の話

  <mx:Button click="hoge()" />

と書く所を

  <mx:Button click="{hoge()}" />

と中括弧でかこってやると、FlexBuilderがちゃんと関数として解釈してくれるので、CMD+Clickでfunctionまで飛べるお。