タブ機能つきWeb Browserを作ってみた
以前に自分で単にページを表示させるだけのものを作ったことがあるんですが、今回はタブ機能付けてみました。
自分が思っていたよりタブ機能は簡単だった。
主にタブ機能のところの解説
まずはタブの生成から
//タブの追加 private function makeTab():void{ var cvs:Canvas = new Canvas(); //まずはCanvasを作成 cvs.label = "タブ"; cvs.name = "tab"; cvs.width = myCvs.width; cvs.height = myCvs.height; var html:HTML = new HTML(); //次にHTML html.name = "html"; html.x = myHtml.x; html.y = myHtml.y; html.width = myHtml.width; html.height = myHtml.height; html.location="http://www.google.com"; html.addEventListener(Event.COMPLETE, change); //ページの表示が完了したときにchangeを呼び出すように設定 cvs.addChild(html); //CanvasにHTMLをaddChild myTvn.addChild(cvs); //そしてCanvasをタブに追加 }
こんな風になっています。
ここで重要なのは以下の4行
var cvs:Canvas = new Canvas(); var html:HTML = new HTML(); cvs.addChild(html); myTvn.addChild(cvs);
まず、Canvasをnewします。
なぜかというとTabNavigatorは以下のように使うからです。
<mx:TabNavigator x="0" y="70" width="100%" height="90%" id="myTvn" backgroundColor="#a6e6f4"> <mx:Canvas label="タブ" width="100%" height="100%"> : : </mx:Canvas> <mx:Canvas label="タブ2" width="100%" height="100%"> : : </mx:Canvas> </mx:TabNavigator>
この場合だとタブは2つ出来ます。
そして、タブ一つ一つにCanvasが一つ必要ということです。
話を戻しますが、次にHTMLをnewして、これを先ほど生成したCanvasにaddChildしてあげる
簡単にイメージすると
<mx:Canvas ......> <mx:HTML ...../> </mx:Canvas>
こうなって。
さらに、このCanvasをTabNavigatorにaddChildすると
<mx:TabNavigator x="0" y="70" width="100%" height="90%" id="myTvn" backgroundColor="#a6e6f4"> <mx:Canvas label="タブ" width="100%" height="100%"> /* : * : * </mx:Canvas> * 元からあるやつ <mx:Canvas label="タブ2" width="100%" height="100%"> * : * : * </mx:Canvas> */ <mx:Canvas ......> /* <mx:HTML ..../> *今追加されたやつ </mx:Canvas> */ </mx:TabNavigator>
このような流れでタブを追加していきます。
次にタブの削除
これは簡単
private function deleteTab():void{ myTvn.removeChildAt(myTvn.selectedIndex); }
このように書けば現在選択中のタブを削除することが出来ます。
以上。