jp.ferv.blog » Flex

FlashCS4でFlexSDKを使う

dsk — Sat, 16 May 2009 15:20:12 +0000

FlexSDKで使える[SWF]/[Embed]とかのメタデータタグをFlashCS4でそのまま使うことができる。

ActionScript
MetaDataTags
Source

[SWF(backgroundColor = 0x000000, width = 800, height = 600, frameRate = 30)]
[Embed(source="hoge.png")]

[SWF(backgroundColor = 0x000000, width = 800, height = 600, frameRate = 30)]
[Embed(source="hoge.png")]

編集 > 環境設定 > ActionScript > ActionScript3.0設定

FlexSDKパス

FlashDevelopとかFlexBuilderでコードガリガリ書いて、最終的にFlashCS4でデザイン入れとかするときに超便利。

IEでTextInputにCtrl＋Enterで改行されるバグ

dsk — Sun, 19 Oct 2008 12:06:44 +0000

IE6/7で確認。

textinput_ie_ctrlenter.swf

上はFlexで書き出したSWFだけど、Flashの入力可能な単一行のTextFieldでも同様の動作。
IEの独自機能のショートカットとFlashPlayerの競合だと思うけど、いつまで放置してるんでしょう。

改行を削除しようにも改行が追加されたタイミングを、Event.CHANGEやFlexEvent.VALUE_COMMITで取得できないので、泥臭く消すしかないっていう。

Web内見回してみたところ、処理してるとこの方が少ないから気づかなかったってことでいいですか？

BlazeDS - Messaging(Client)

dsk — Thu, 17 Jul 2008 06:05:55 +0000

BlazeDSの主要な機能の一つであるMessegingのクライアントサイドの処理について。

srcを右クリックして、「新規 > MXML アプリケーション」をクリック。「ファイル名」をmessaging.mxmlと入力して「終了」。
クライアントの処理を書く。
- ActionScript
- Source
```
	
		
	

	
		
	
	
		
		
	
```
1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="init()" viewSourceURL="srcview/index.html">
4. <mx:Script>
5. [CDATA[
6. import mx.messaging.events.MessageFaultEvent;
7. import mx.messaging.messages.AsyncMessage;
8. import mx.messaging.messages.IMessage;
9. import mx.messaging.ChannelSet;
10. import mx.messaging.channels.AMFChannel;
11. import mx.messaging.channels.StreamingAMFChannel;
12. import mx.messaging.events.MessageEvent;
13. import mx.messaging.events.ChannelEvent;
14. import mx.messaging.Consumer;
15. import mx.messaging.Producer;
17. private var producer:Producer = new Producer();
18. private var consumer:Consumer = new Consumer();
20. private function init():void {
21. initConnectEvent();
23. connectToServer();
24. }
26. private function initConnectEvent():void {
27. consumer.addEventListener(ChannelEvent.CONNECT, hdlConsumerConnect);
28. consumer.addEventListener(ChannelEvent.DISCONNECT, hdlConsumerDisconnect);
29. consumer.addEventListener(MessageEvent.MESSAGE, hdlConsumerMessage);
30. }
32. private function hdlConsumerConnect(ce:ChannelEvent):void {
33. log("Connect to Server.");
35. setSend(true);
36. }
38. private function hdlConsumerDisconnect(ce:ChannelEvent):void {
39. log("Disconnect from Server.");
41. setSend(false);
42. }
44. private function hdlConsumerMessage(me:MessageEvent):void {
45. log(me.message.body.chat);
46. }
48. private function setSend(bln:Boolean):void {
49. if (bln) {
50. btnSend.addEventListener(MouseEvent.CLICK, hdlSendClick);
51. } else {
52. btnSend.removeEventListener(MouseEvent.CLICK, hdlSendClick);
53. }
54. btnSend.enabled = bln;
55. tiChat.enabled = bln;
56. }
58. private function hdlSendClick(e:*):void {
59. var msg:IMessage = new AsyncMessage();
60. msg.body = {chat:tiChat.text};
62. producer.send(msg);
63. tiChat.text = "";
64. }
66. private function connectToServer():void {
67. setChannel("localhost");
68. setDistination();
70. consumer.subscribe();
71. }
73. private function setChannel(hostname:String):void {
74. var channelSet:ChannelSet = new ChannelSet();
75. var myStreamingAMF:AMFChannel = new StreamingAMFChannel("my-streaming-amf", "http://" + hostname + ":8400/tutorial/messagebroker/streamingamf");
76. var myPollingAMF:AMFChannel = new AMFChannel("my-polling-amf", "http://" + hostname + ":8400/tutorial/messagebroker/amfpolling");
77. myPollingAMF.pollingEnabled = true;
78. myPollingAMF.pollingInterval = 1;
80. channelSet.addChannel(myStreamingAMF);
81. channelSet.addChannel(myPollingAMF);
83. producer.channelSet = channelSet;
84. consumer.channelSet = channelSet;
85. }
87. private function setDistination():void {
88. producer.destination = "messagingTutorial";
89. consumer.destination = "messagingTutorial";
90. }
92. private function log(str:String):void {
93. taLog.text = str + "\n" + taLog.text;
94. }
96. ]]>
97. mx:Script>
99. <mx:ApplicationControlBar width="100%" height="100%">
100. <mx:TextArea width="100%" height="100%" id="taLog" editable="false"/>
101. mx:ApplicationControlBar>
102. <mx:ApplicationControlBar width="100%">
103. <mx:TextInput id="tiChat" width="100%" enabled="false" enter="hdlSendClick(event)"/>
104. <mx:Button label="Send" id="btnSend" enabled="false"/>
105. mx:ApplicationControlBar>
107. mx:Application>
「ファイル > エクスポート」をクリックして、「Flex Builder > リリースビルド」を選択して「次へ」。
「書き出し先フォルダ」をtutorialにして「終了」。
ブラウザを二窓開いてhttp://localhost:8400/tutorial/messaging.htmlへアクセス。
一方の窓でテキストを入力し、Sendを押すと、両方のクライアントにストリーミングでテキストが配信される。

BlazeDS - Messaging(Server)

dsk — Thu, 17 Jul 2008 05:52:29 +0000

BlazeDSの主要な機能の一つであるMessegingのサーバーサイドの処理について。

services-config.xmlにstreamingの設定を書く。
- XML
- services-config.xml
- Source
```
	
		
		
	

	
		
	

	
```
1. version="1.0" encoding="UTF-8"?>
3. id="message-service" class="flex.messaging.services.MessageService">
5. >
6. id="actionscript" class="flex.messaging.services.messaging.adapters.ActionScriptAdapter" default="true" />
8. >
10. >
11. ref="my-streaming-amf"/>
12. >
14. id="messagingTutorial"/>
16. >
messaging-config.xmlにデフォルトチャンネルの設定、サービスのIDを書く。
- XML
- messaging-config.xml
- Source
```
	
	
		0
		100
		5000
		
			
			
			
		
	
```
1. id="my-streaming-amf" class="mx.messaging.channels.StreamingAMFChannel">
2. url="http://{server.name}:{server.port}/{context.root}/messagebroker/streamingamf" class="flex.messaging.endpoints.StreamingAMFEndpoint"/>
3. >
4. >0>
5. >100>
6. >5000>
7. >
8. match-on="MSIE" kickstart-bytes="2048" max-streaming-connections-per-session="10"/>
9. match-on="Firefox" kickstart-bytes="2048" max-streaming-connections-per-session="10"/>
10. match-on="AppleWebKit" kickstart-bytes="2048" max-streaming-connections-per-session="10"/>
11. >
12. >
13. >
サーバーを再起動。

BlazeDS - Remotoing(Client)

dsk — Tue, 08 Jul 2008 04:11:41 +0000

BlazeDSの主要な機能の一つであるRemotingのクライアントサイドの処理について。

「ファイル > 新規 > MXML アプリケーション」をクリックして、「ファイル名」にRemoting.mxmlと入力して、「終了」。
remoting.mxmlにクライアントの処理を書く。
- ActionScript
- remoting.mxml
- Source
```
	
		
	

	
		
		
		
		
		
	
	
		
		
	
```
1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="init()" viewSourceURL="srcview/index.html">
4. <mx:Script>
5. [CDATA[
6. import mx.rpc.remoting.RemoteObject;
7. import mx.rpc.events.ResultEvent;
8. import mx.rpc.events.FaultEvent;
10. private var remoteObject:RemoteObject = new RemoteObject();
12. private function init():void {
13. initRemoteObject();
14. initButtons();
15. }
17. private function initRemoteObject():void {
18. remoteObject.destination = "remotingTutorial";
19. remoteObject.addEventListener("result", hdlROResult);
20. remoteObject.addEventListener("fault", hdlROFault);
21. }
23. private function hdlROResult(re:ResultEvent):void {
24. var result:int = re.message.body.result;
25. setResult(result.toString());
26. }
28. private function hdlROFault(fe:FaultEvent):void {
29. setResult("Fail to get responce.");
30. }
32. private function setResult(str:String):void {
33. tiResult.text = str;
34. }
36. private function initButtons():void {
37. btnCalc.addEventListener(MouseEvent.CLICK, hdlGetCalcClick);
38. btnClear.addEventListener(MouseEvent.CLICK, hdlClearClick);
40. btnCalc.enabled = true;
41. btnClear.enabled = true;
42. }
44. private function hdlGetCalcClick(me:MouseEvent):void {
45. var obj:Object = new Object();
47. obj.param0 = int(tiParam_0.text);
48. obj.param1 = int(tiParam_1.text);
50. remoteObject.getCalcResult(obj);
51. }
53. private function hdlClearClick(me:MouseEvent):void {
54. setResult("");
55. }
57. ]]>
58. mx:Script>
60. <mx:ApplicationControlBar>
61. <mx:TextInput id="tiParam_0" text="10"/>
62. <mx:Label text="+" textAlign="center"/>
63. <mx:TextInput id="tiParam_1" text="20"/>
64. <mx:Label text="=" textAlign="center"/>
65. <mx:TextInput id="tiResult"/>
66. mx:ApplicationControlBar>
67. <mx:ApplicationControlBar>
68. <mx:Button label="getCalcResult" id="btnCalc" enabled="false"/>
69. <mx:Button label="clear" id="btnClear" enabled="false"/>
70. mx:ApplicationControlBar>
72. mx:Application>
「ファイル > エクスポート」より、「Flex Builder > リリースビルド」を選択して「次へ」。「書き出し先フォルダ」をtutorialにして、「終了」。
これで、クライアントの開発は完了。ブラウザでhttp://localhost:8400/tutorial/remoting.htmlにアクセスして確認。

BlazeDS - Remotoing(Server)

dsk — Mon, 07 Jul 2008 11:31:08 +0000

BlazeDSの主要な機能の一つであるRemotingのサーバーサイドの処理について。

remoting-config.xmlで、これから使うRemotingのサービスを定義する。には、クライアントからサーバーサイドJavaのメソッドを呼び出すときのユニークなIDを入力。 ***には、サーバーサイドJavaのパッケージ名.クラス名を入力。
- XML
- remoting-config.xml
- Source
```
	
		tutorial.RemotingTutorial
		application
	
```
1. id="remotingTutorial">
2. >
3. >tutorial.RemotingTutorial>
4. >application>
5. >
6. >
「ファイル > 新規 > プロジェクト」より、「Javaプロジェクト」を作成する。
「内容 > 外部ソースからプロジェクトを作成」をチェックし、\tutorial\WEB-INF\classesを指定し、「次へ」。
「ライブラリー > 外部JARの追加」で、\tutorial\WEB-INF\lib内の全jarファイルを指定し、クラスパスを通す。
tutorial-javaを右クリックして、「新規 > パッケージ」をクリック。「名前」に1.で設定したパッケージ名（このチュートリアルでは"tutorial"）を入力して「終了」。
\tutorial\WEB-INF\srcに1.で設定したクラス名のJavaのソースファイルを作る。（このチュートリアルでは"RemotingTutorial.java）
6.で作ったクラスファイル（RemotingTutorial.java）を、5.で作ったパッケージ内にリンクする。tutorialを右クリックして、「新規 > ファイル」をクリック。「拡張」をクリック後、6.で作ったクラスファイルを指定し、終了。
RemotingTutorial.javaを開き、足し算して返すだけの関数を書く。
- JAVA
- RemotingTutorial.java
- Source
```
package tutorial;

import java.util.HashMap;

public class RemotingTutorial {

	public RemotingTutorial() {
		System.out.println("RemotingTutorial を初期化します");
	}

	public HashMap getCalcResult(HashMap mapSource) {
		HashMap mapBody = new HashMap();

		mapBody.put("result", (mapSource.get("param0") + mapSource.get("param1")));

		return mapBody;
	}

}
```
1. package tutorial;
3. import java.util.HashMap;
5. public class RemotingTutorial {
7. public RemotingTutorial() {
8. System.out.println("RemotingTutorial を初期化します");
9. }
11. public HashMap<string, Integer> getCalcResult(HashMap<string, Integer> mapSource) {
12. HashMap<string, Integer> mapBody = new HashMap<string, Integer>();
14. mapBody.put("result", (mapSource.get("param0") + mapSource.get("param1")));
16. return mapBody;
17. }
19. }

BlazeDS - 開発準備

dsk — Sun, 06 Jul 2008 05:45:04 +0000

開発環境となるEclipse + Flex Builder 3をインストールする。
- All-In-One Eclipse
- Flex Builder 3 (Eclipse Plugin)
\blazeds\tomcat\webappsで、blazedsディレクトリをコピー。
中にWEB-INFと、META-INFが入っているのを確認したら、Eclipseへ。
「File > 新規 > プロジェクト」から、「Flex Builder > Flexプロジェクト」を選択して「次へ」。
「プロジェクト名」にプロジェクトの名前を入力。（ここでは"tutorial"）
「プロジェクトの場所」に作業ディレクトリを指定。（ここでは"C:\blazeDS_temp\tutorial"）
「アプリケーションの種類」で「Web アプリケーション」を選択。
「サーバーテクノロジ」で「アプリケーションサーバーの種類」を「J2EE」とし、「リモートオブジェクトアクセスサービスを使用」にチェック。
「サーバーの場所」を2.で作ったディレクトリに指定し、「設定を検証」。
「結合したFlexアプリケーションの場所」にデバッグ用ディレクトリを指定し、「終了」。
これでクライアント側の開発環境は整った。
サーバー設定ファイルをリンクさせておく。srcフォルダを右クリックし、「新規 > ファイル」をクリック。
「拡張 > ファイル・システム内のファイルにリンク」で、C:\blazeDS\tomcat\webapps\tutorial\WEB-INF\flex\messaging-config.xmlを指定する。
proxy-config.xml,remoting-config.xml,services-config.xmlについても同様にリンクしておく。