タブ機能つき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);
}


このように書けば現在選択中のタブを削除することが出来ます。
以上。