フォーラム一覧   -   トピック一覧
   Flex Framework 2.0
     Flexでのページ遷移について		投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 トピック
hiroaki
投稿日時: 2007-9-12 19:42
やや 常連さん
登録日: 2007-3-22
居住地: 東京都港区
投稿: 28
Flexでのページ遷移について
みなさま，お世話になっております．

Flexでページ遷移をさせるやり方はViewStackやTabControlを利用するのが一般的みたいですが，http://www.fxug.net/modules/xhnewbb/viewtopic.php?viewmode=flat&topic_id=62&forum=2

にあるように，SWFLoaderを利用してメインのページでswfを読み込むというアプローチもあるようです．しかし，http://www.fxug.net/modules/xhnewbb/viewtopic.php?topic_id=617&forum=1&post_id=2292#forumpost2292
にもあるように，異なるSWF間でデータをやり取りするのは少々めんどくさいように思います．

そこで，1ページをヘッダ，フッタ，サイドメニュー，メイン，のように構成し，それぞれSWFを読み込むという形で実装している方，各SWF間でデータのやり取りはどのようにしているのでしょうか(上記の方法でしょうか)？それとも，例えばサイドメニューにはメインにロードするSWFを切り替えるだけで，処理自体は1つのSWFで完結するような形で実装されているのでしょうか？

どちらの場合でも，もし可能でしたらサンプルコードなどを示していただけるとありがたいです．

よろしくお願いいたします．
teppei
投稿日時: 2007-9-12 23:40
やや 常連さん
登録日: 2006-5-10
居住地:
投稿: 22
Re: Flexでのページ遷移について
teppeiです

ページ遷移の制御は悩みますよね。

以前にも話題になっていますが、
ViewStack系の切替部品を使うと、
メモリがクリアされないのが難点です。
特に、長時間繰り返し使われる可能性があるアプリの場合は、
一度ロードした部品に古いデータが残ってしまったりすることを
想定した処理が必要になったりと、結構おっかないです。

SWFLoaderを使用する場合もUnload処理がないので、
注意が必要です。
SWFLoaderを介したデータ連携自体は面倒ですが、
やってみるとそれほど難しくないです。
Unload処理があるModuleを使う手もありますが、
GCの効きはイマイチのようです。

引用：
例えばサイドメニューにはメインにロードするSWFを切り替えるだけで，処理自体は1つのSWFで完結するような形で実装されているのでしょうか？


今のところ、それがベストだと思います。
できるだけ短く小さい単位でひとつの処理を設計し、
それをひとつのSWFで扱えるようにして、
処理の終了でブラウザレベルでSWFを終了する。
これが確実にGCが効きますし、悩み事も少なくなると思います。

どうしてもSWF間で連携しなければいけないものは、
LocalConnectionを使う、とか。
（ただし、40KBまでという制約付きですが）

ちなみに、同じブラウザプロセス上でFlashを載せている
ブラウザウィンドウが増えれば増えるほど、
ひとつのブラウザプロセス上でのメモリ使用量の閾値が
減少していくという事象があるので、その点は要注意です。

では。
hirossy
投稿日時: 2007-9-13 0:26
ご主人様
登録日: 2006-12-14
居住地: 大阪
投稿: 123
Re: Flexでのページ遷移について
こんばんはー


どっちが良いのかはわかりません。


僕は
・基本はViewStackやTabNavigator。
・あまりに規模がでかくなる場合はサブシステムごとに別swfに分ける。
としています。


swfを分けて作るときは、なるべくswf間の情報共有が少なくなるように作ります。ちょっとネガティブですみません。

ただ、同一パッケージ,同一クラス名のSingletonなら
違うswfでも同じインスタンスになるんじゃないでしょうかね？



引用：

1ページをヘッダ，フッタ，サイドメニュー，メイン，のように構成し，


これだとページ内のレイアウトの話な気がします。
単にmxmlを分けて作るというのでは駄目ですかね？？



あと、
Flexとちょっと関係がないですが、
Flasherの達人たちは、画面のインスタンスをナビゲーションクラスで管理して、必要なときにstageにaddChild,不要になったらremoveChildしてるようです。
それプラスSWFAddressってゆうライブラリでパーマネントリンクを作成して(擬似)ページ遷移させてるようですよ。


サンプルなくてすみません。
teppei
投稿日時: 2007-9-13 8:06
やや 常連さん
登録日: 2006-5-10
居住地:
投稿: 22
Re: Flexでのページ遷移について
引用：
ただ、同一パッケージ,同一クラス名のSingletonなら


だとしたら便利！と思い、やってみましたが、ダメですね。
やはりブラウザウィンドウ単位で確保するメモリ領域が
完全に独立しているように見えます。
なので、ブラウザウィンドウクローズでのGCが明確に効いてくれるし。

ちなみ、検証サンプルは以下の通り。

A.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical">
	
	<mx:Script>
		<![CDATA[
			import pack.SingletonClass;
		]]>
	</mx:Script>
	
	<mx:Form>

		<mx:FormItem label="fromA:">
			<mx:TextInput text="{SingletonClass.getInstance().fromA}"/>
		</mx:FormItem>

		<mx:FormItem label="fromB:">
			<mx:TextInput text="{SingletonClass.getInstance().fromB}" editable="false"/>
		</mx:FormItem>

	</mx:Form>
	
</mx:Application>


B.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical">
	
	<mx:Script>
		<![CDATA[
			import pack.SingletonClass;
		]]>
	</mx:Script>
	
	<mx:Form>

		<mx:FormItem label="fromA:">
			<mx:TextInput text="{SingletonClass.getInstance().fromA}" editable="false"/>
		</mx:FormItem>

		<mx:FormItem label="fromB:">
			<mx:TextInput text="{SingletonClass.getInstance().fromB}"/>
		</mx:FormItem>

	</mx:Form>
	
</mx:Application>


pack.SingletonClass.as

package pack
{
	public class SingletonClass
	{

		/**
		 * インスタンス
		**/
		private static var instance:SingletonClass = null;
		
		/**
		 * インスタンス生成フラグ
		**/
		private static var inside:Boolean = false;
		

		/**
		 * コンストラクタ
		 */
		public function SingletonClass(){

			if (inside)
			{
				inside = false;
			}
			else
			{
				throw new Error("UseSingleton.geInstance() to get the instance");
			}

		}

		/**
		 * インスタンスを返却します<BR>
		 * SingletonClassのインスタンスが存在しない場合はインスタンスの生成も行います。<BR>
		 * 存在する場合はそのインスタンスを返却し、新たなインスタンスを生成することはありません。<BR>
		 * 
		 * @return インスタンスオブジェクト
		 */
		public static function getInstance():SingletonClass{

			if(instance == null)
			{
				inside = true;
				instance = new SingletonClass();
			}

			return instance;
		}
		
		[Bindable]
		public var fromA:String = "";

		[Bindable]
		public var fromB:String = "";
		

	}//end of class
}//end of package

nobu
投稿日時: 2007-9-13 9:37
ご主人様
登録日: 2006-6-17
居住地:
投稿: 588
Re: Flexでのページ遷移について
>hiroakiさん

めんどうなほうやってるnobuです。

当時の書込みしていたときは、まだ理解が浅く、いろいろ調べながら
だったので、当時ほど面倒な事はないですよ(^-^;

私の案件では、Stateで画面遷移を行っております。またSWFLoaderで
はなくModuleLoaderを使用しています。Module分割を使用する理由と
しては、企画が業務アプリケーションの為、案件が増える(業務範囲
が広がる毎に)ごとにどんどんシステム規模が膨れていくという特性
があります。この為、プロジェクト運営していく上で、担当わけの
しやすさ、アプリケーション毎の脱着容易さ･･･等等を考慮して、今
の状態になっています。

具体的には、メニュー画面、伝票入力、伝票検索、商品マスタ登録
という画面があるのなら、

メニュー画面.swf
伝票入力.swf
伝票検索.swf
商品マスタ登録.swf

と言うようにばらばらに作っています。


また本題の画面遷移については、フレームワーク化してしまいまし
た。もっというと、Moduleクラスと、Moduleに乗っけるコンポーネ
ント(Canvas)をが画面遷移＋モジュール間のデータのやり取りを
可能なようにカスタムコンポーネントにしました。これに加えて
Stateを使う作り方にルールを設けて、各画面にちょろちょろっと
処理を書いてあげる事で実現しています。
hiroaki
投稿日時: 2007-9-13 15:11
やや 常連さん
登録日: 2007-3-22
居住地: 東京都港区
投稿: 28
Re: Flexでのページ遷移について
皆様コメントありがとうございます。

当方、Flexをやり始めたのはApolloからなので、ビジネスアプリケーションを
作成するのは初めてだったりします。

画面遷移として質問させていただきましたが、何をやりたいのかを具体的に知って
いただくためにサンプルを作成しました。画面構成としてはヘッダ、サイドバー、
フッタ、メインという画面があり、ヘッダなどのメニューをクリックするとメイン
にSWFが読み込まれるというイメージです。下記にコードを示します。

TopWindow.mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Button x="99" y="12" label="Menu1"/>
	<mx:Button x="195" y="12" label="Menu2"/>
	<mx:Button x="294" y="12" label="Menu3"/>
</mx:Application>


SideBar.mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Button x="10" y="39" label="Side1"/>
	<mx:Button x="10" y="79" label="Side2"/>
	<mx:Button x="10" y="118" label="Side3"/>
</mx:Application>


Buttom.mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Button x="105" y="10" label="Buttom1"/>
	<mx:Button x="210" y="10" label="Buttom2"/>
</mx:Application>


Main.mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="500">
	<mx:SWFLoader source="TopWindow.swf" x="0" y="0" width="100%" height="50"/>
	<mx:SWFLoader source="SideBar.swf" x="0" y="50" width="100" height="100%"/>
	<mx:SWFLoader source="ButtomWindow.swf" x="0" y="450" width="100%" height="50"/>
</mx:Application>


ここで伺いたいのは

1、このように画面を構成するためには、上の例で示したように、メインのmxmlにSWFLoaderを複数作成し、
x,yの座標を指定して画面を分割するのが一般的なのでしょうか。

2、上でご説明させていただいたように、例えばTopWindow.mxmlのあるボタンを押したとき、メインに何らかの
SWFを読み込ませるためには、TopWindow.mxml中のボタンを押したとき、親であるMain.mxmlのSWFLoaderを
操作してメイン部分に読み込ませる必要があると思うのですが、そういうことをやっているのでしょうか?
->nobuさん

個人的には、nobuさんがおっしゃるように、各メニューごとに別々のアプリケーション(SWF)として作成した
ほうがテストやスケーラビリティがあってよいかなと思います。

質問ばかりですみませんが、アドバイスよろしくお願いいたします。
nobu
投稿日時: 2007-9-13 15:35
ご主人様
登録日: 2006-6-17
居住地:
投稿: 588
Re: Flexでのページ遷移について
>hiroakiさん

思うところもあるのですが、全てを別swfで作成し、SWFLoaderで
制御を行うという前提で私の回答をします。

引用：

1、このように画面を構成するためには、上の例で示したように、メインのmxmlにSWFLoaderを複数作成し、
x,yの座標を指定して画面を分割するのが一般的なのでしょうか。


そうします。それとTopwindow.mxmlのボタンが押下されたときに
表示する画面本体を表示するSWFLoaderも必要ですかね。
（top,(left)side,middle,buttomのような感じでしょうか）


引用：

2、上でご説明させていただいたように、例えばTopWindow.mxmlのあるボタンを押したとき、メインに何らかの
SWFを読み込ませるためには、TopWindow.mxml中のボタンを押したとき、親であるMain.mxmlのSWFLoaderを
操作してメイン部分に読み込ませる必要があると思うのですが、そういうことをやっているのでしょうか?


やっていると思います。やり方はいくつか存在すると思います。
例えば、Main.mxmlからTopWindow.mxmlのボタンのClickイベントに
対してEventListnerを登録して、TopWindowでボタンが押下された
時に、Main側のイベントハンドラが実行されるようにするとかです
ね。また、子から親のSWFLoaderのloadメソッドを実行してしまう
とかもありです（ちょっと強引？）。
あとはEventを自作して、親-子間で投げ合うとか、具体的な実装
方法によって、いくつか方法があると思います。
hiroaki
投稿日時: 2007-9-13 15:56
やや 常連さん
登録日: 2007-3-22
居住地: 東京都港区
投稿: 28
Re: Flexでのページ遷移について
>nobuさん

お返事ありがとうございます。

引用：

そうします。それとTopwindow.mxmlのボタンが押下されたときに
表示する画面本体を表示するSWFLoaderも必要ですかね。
（top,(left)side,middle,buttomのような感じでしょうか）


そうですね 抜けてました。

引用：

やっていると思います。やり方はいくつか存在すると思います。
例えば、Main.mxmlからTopWindow.mxmlのボタンのClickイベントに
対してEventListnerを登録して、TopWindowでボタンが押下された
時に、Main側のイベントハンドラが実行されるようにするとかです
ね。


やはりそうなんですね。現在1人でやっているので、自分の考え方、やり方が一般的なのかどうかわかりませんでした。やはりイベントを使うのがよさそうですね。

ありがとうございました。
hirossy
投稿日時: 2007-9-14 13:41
ご主人様
登録日: 2006-12-14
居住地: 大阪
投稿: 123
Re: Flexでのページ遷移について
> teppeiさん

こんにてぃは

ちょっと意味が違いましたね
ぼくはSWFLoaderでLoadした際の話で考えていました。

A.mxml上でB.swfをロードしたら同じインスタンスとして考えられると思います。

A.mxml
引用：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">

<mx:Script>
<![CDATA[
import pack.SingletonClass;
]]>
</mx:Script>

<mx:Form>

<mx:FormItem label="fromA:">
<mx:TextInput id="aa" text="{SingletonClass.getInstance().fromA}"/>
</mx:FormItem>

<mx:FormItem label="fromB:">
<mx:TextInput text="{SingletonClass.getInstance().fromB}" editable="false"/>
</mx:FormItem>
<mx:FormItem label="ラベル">
<mx:Button label="ボタン" click="clickButton();"/>
</mx:FormItem>

</mx:Form>

<mx:SWFLoader source="B.swf" />

<mx:Script>
<![CDATA[
private function clickButton():void{
SingletonClass.getInstance().fromA = aa.text;
SingletonClass.getInstance().fromB = aa.text;
}

]]>
</mx:Script>

</mx:Application>



B.mxml
引用：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">

<mx:Script>
<![CDATA[
import pack.SingletonClass;
]]>
</mx:Script>

<mx:Form>

<mx:FormItem label="fromA:">
<mx:TextInput text="{SingletonClass.getInstance().fromA}" editable="false"/>
</mx:FormItem>

<mx:FormItem label="fromB:">
<mx:TextInput id="bb" text="{SingletonClass.getInstance().fromB}"/>
</mx:FormItem>
<mx:FormItem label="ラベル">
<mx:Button label="ボタン" click="clickButton();"/>
</mx:FormItem>

</mx:Form>

<mx:Script>
<![CDATA[
private function clickButton():void{
SingletonClass.getInstance().fromA = bb.text;
SingletonClass.getInstance().fromB = bb.text;
}

]]>
</mx:Script>

</mx:Application>



B.swfをAのプロジェクトに配置します。


これでA.mxmlを実行したら、A.mxmlのボタンを押してもB.mxmlのボタンを押してもどちらも値が変わりますよね

これを利用したら複数のswf間の情報共有ができるんじゃないかと。

あんまり良い方法ではないですよね・・・
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を