MXML コンポーネントの作成
今回はユーザが操作する UI すなわち HBox タグで囲まれたコンポーネント群を外部コンポーネント化してみます。MyBrowser.mxml 内の以下の箇所になります。
<mx:HBox> <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/> <mx:Button label="移動" click="setLocation(inputTF.text)"/> <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/> </mx:HBox>
コンポーネントの名前は HTMLControlBar とします。例によって Ctrl-n でダイアログを開いたら MXML Component を選んで Next を押します。
上記の画面が表示されたら Filename の欄に HTMLControlBar と入力し、Based on の欄を HBox に、Width と Height は空白にします。
Finish ボタンを押すと、MXML エディタが開いて、下のような MXML コンポーネントのテンプレートが出来上がります。
<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"> </mx:HBox>
ここに MyBrowser.mxml ファイルから TextInput タグと2つの Button タグをコピーしてきます。Hbox タグの間にそのままペーストするだけです。
履歴管理の機能もこちらのコンポーネントに持たせた方がよさそうですので、PreviousLocations タグもコピーします。その際ルートの HBox タグに xmlns:local="*" の追加を忘れないようにしましょう。local 名前空間の宣言が必要ですので。
以上で下のようなファイルができたと思います。 これで、タグの部分の移動は完了です。
<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"> <local:PreviousLocations id="prevLocations"/> <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/> <mx:Button label="移動" click="setLocation(inputTF.text)"/> <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/> </mx:HBox>
次に、スクリプトの記述を始めます。
HTMLControlBar からはユーザの操作に応じて HTML コンポーネントの location を設定できなければなりません。そこで、HTML コンポーネントへの参照を属性として持つことにします。名前は target とします。
import mx.controls.HTML; public var target:HTML;
HTMLControlBar 内3つの UI コンポーネントから呼び出される back() と setLocation() はそのままコピーしてもよさそうです。直接 HTML コンポーネントを参照していた箇所 (html と記述された部分) だけ target と置き換えます。
private function back():void { var prevURL:String = prevLocations.popLocation(); if (prevURL != null) { setLocation(prevURL); } } private function setLocation(url:String):void { target.location = url; }
同様に onDomInitialize() もそのままコピーしてきます。こちらも html → target の変換のみ行います。
public function onDomInitialize():void { prevLocations.pushLocation(target.location); inputTF.text = target.location; }
とりあえずこれで HTMLControlBar に必要な機能はひととおりそろいました。
MXML コンポーネントの利用
MyBrowser.mxml ファイル側では、これまで HBox タグで囲まれていた箇所全体を、上で作成した HTMLControlBar のタグで置き換えます。
<local:HTMLControlBar id="htmlControl" target="{html}"/>
この際 HTMLControlBar の target 属性に html を指定します。これで HTMLControlBar コンポーネントに HTML コンポーネントへの参照が設定されます。
MyBrowser.mxml 内のスクリプトブロックに関しては、back() と setLocation() は HTMLControlBar に移したのでそのまま削除して構いませんが、onDomInitialize() はちょっと配慮が必要です。単純に削除すると HTMLControlBar 側の onDomInitialize() を呼び出す手段がなくなってしまうからです。
なので、ここでは onDomInitialize() は残すことにしてその中で HTMLControlBar コンポーネント側の onDomInitialize() を呼び出すように変更してみます。
private function onDomInitialize(e:Event):void { htmlControl.onDomInitialize(e); }
以上で MyBrowser から外部コンポーネント化した HTMLControlBar を使えるようになりました。
あと少し変更したい箇所がありますが、とりあえずここまでのまとめです。まずは、HTMLControlBar.mxml ファイルから。
<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"> <mx:Script> <![CDATA[ import mx.controls.HTML; public var target:HTML; public function onDomInitialize(e:Event):void { prevLocations.pushLocation(target.location); inputTF.text = target.location; } private function back():void { var prevURL:String = prevLocations.popLocation(); if (prevURL != null) { setLocation(prevURL); } } private function setLocation(url:String):void { target.location = url; } ]]> </mx:Script> <local:PreviousLocations id="prevLocations"/> <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/> <mx:Button label="移動" click="setLocation(inputTF.text)"/> <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/> </mx:HBox>
それから MyBrowser.mxml です。
<?xml version="1.0" encoding="utf-8"?> <mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"> <mx:Script> <![CDATA[ private function onLocationChange(e:Event):void { html.alpha=0 } private function onDomInitialize(e:Event):void { htmlControl.onDomInitialize(e); } private function onComplete(e:Event):void { fadeIn.target = html; fadeIn.play(); } ]]> </mx:Script> <mx:Style source="MyBrowser.css"/> <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/> <local:HTMLControlBar id="htmlControl" target="{html}"/> <mx:HTML id="html" width="100%" height="100%" locationChange="onLocationChange(event)" domInitialize="onDomInitialize(event)" complete="onComplete(event)"/> </mx:ApolloApplication>
PreviousLocation.as は前回のものが使用できます。
コメントする