作成日: 2008年6月25日
作成者: フリーランスエンジニア　中垣　茂
最終更新日: 2008年6月25日
　

CFLAYOUT−Tab の概要

　ここでいいう「Tab」というのはブラウザのFireFoxやInternetExplorer7でお馴染みの”タブブラウザ“で使用されているようなレイアウト方法のことです。これをHTML＋CSSで実現するにはそれなりにテクニックが必要ですが、CFLAYOUTでは簡単に実現することができます。また、JavaScriptではありますがCFでサポートされる関数もそれなりにあり、かなり高機能なものになっています。しかしながら、"完成度"という意味では"いまひとつ"というのが正直な感想です（それらについてはおいおい説明していきます）。では実際に使用例を見ていきましょう。
　
　

◆CFLAYOUT − type = Tab の使用例１

　「CFLAYOUT」タグの中に「CFLAYOUTAREA」タグを複数セットしただけのもっともシンプルな使用例です。
　
Tab 01
　
　 タブが３つありそれぞれのタブをクリックすると同じ領域に違うコンテンツが表示されます。だからと言って、実際に同じ領域にコンテンツが重なり合っているわけではなく、アクティブではないコンテンツ領域は絶対座標で「left:-20000px;top:-20000px;」のようにしてブラウザの表示領域外に配置されています。「幅が20000px以上あったら．．．」とふとっ考えましたが、重箱の隅をつつくようなことは止めておきましょう。
　
　 「Category B」と「Category C」のタブには右側に「x（ばつ印）」があります。これをクリックするとタブが"閉じます"。後で詳しく説明しますが、この"閉じる"はタブを隠すのではなく、完全にHTMLから取り払われてしまいます。また、「x（ばつ印）」にマウスを合わせたときに表示されるツールチップスですが、日本語環境でも英語で「close this tab」と表示されてしまいます。これを修正するには以下の二つの方法があります。

　　１．「CFIDEscriptsajaxextpackagetabs」フォルダにある「tabs.js」内の「closeText」を直接修正する。但し、保存する時は文字コードに注意する必要があります。著者のサイトはUTF-8を使用しているのでこのJSファイルもUTF-8で保存しないと文字化けをしてしまいました。

　　２．JavaScriptでタブを作成する。

　残念ながら、CFのタグでこれを変更するということはできません。困ったものです。CFのタグで作成された後に「closeText」プロパティを変更しようと試みたのですが、オブジェクトの値自体は変更されるのですが、既に描画されてしまったHTMLには反映されませんでした。
　
　

◆CFLAYOUT − type = Tab の使用例２

　次に「CFLAYOUTAREA」のAjax機能を使用してコンテンツを領域だけを再ロードする例です。
　
Tab 02
　
　 この例ではすべてのサンプルのコンテンツ領域が再ロードされますが、Border編の「border 02」と同じようなことをすることで、指定した領域だけを再ロードすることも可能です。やはり、この指定したコンテンツ領域だけを再ロードできるといのは非常に便利です。
　
　 余談になりますが、既存のシステムをAjax方式に変更するというのは止めた方が良いかもしれません。なぜなら、新たに作るよりも難しく工数がかかり、さらに不具合が発生する可能性も高くなるからです。思い切って新しいシステムを一から設計することをお勧めします。
　
　

◆CFLAYOUT − type = Tab の使用例３

　次にタブレイアウト固有のJavaScript関数の使用例です。JavaScriptと言えども非常に簡単です。
　
指定したタブを選択する使用例：
　
Tab 03
　
　 どうしてるかというと「ColdFusion.Layout.selectTab」というJavaScript関数をコールしているだけです。非常に簡単です。
　
タブを新たに作成する使用例：
　
Tab 04
　
　 あたらしいタブを作成する関数は「ColdFusion.Layout.createTab」だけです。これまた、非常に簡単です。しかし、なぜか削除する関数は用意されていません。不思議で仕方ありません。この使用例では Ext.JS のライブラリを直接使用することで削除を実現しています。
　
　 「CFLAYOUT − type = Tab」全体のオブジェクトを取得する関数はCFで用意されています。それは「ColdFusion.Layout.getTabLayout」です。これで取得できるオブジェクトは Ext.JS の「Ext.TabPanel」というクラスになります（ドキュメントは英語のみ）。このクラスの「getActiveTab」、又は「getTab」というメソッドを使用して各タブを取得することができます。取得した各タブは「Ext.TabPanelItem」というクラスになります。指定したタブを削除するには「Ext.TabPanel」の「removeTab」メソッドを使用します。Ext.JS を使用する必要がありますが、いたって簡単です。
　
タブを非表示にしたり、表示したりする使用例：
　
Tab 05
　
　タブを非表示するのは「ColdFusion.Layout.hideTab」という関数をコールし、表示するには「ColdFusion.Layout.showTab」という関数をコールするだけです。ただ、ここで注意点があります。それはこの関数で表示/非表示になるのは（クリック可能な）タブそのもので、タブに連動するコンテンツ領域は非表示なりません。つまり、現在表示されているタブのコンテンツを非表示にする場合には自前で別のタブを選択するといった面倒な工夫が必要です。このあたり、元もとの Ext.JS の挙動を尊重するのも良いのですが、CFらしさもほしいと著者は思います。
　
　
タブをクリックできないようにする使用例：
　
Tab 06
　
　クリックできないようにするには「ColdFusion.Layout.disableTab」という関数を使用します。但し、現在表示されているタブに対してこの関数を実行しても無効です。エラーすら発生せず、無視されます。従って、現在表示しているタブ以外のタブに使用する関数を言えます。クリックできないようになったタブをクリックできるようにするには「ColdFusion.Layout.enableTab」という関数を使用します。
　
　 と、ちょっとしたことは簡単に実現できるところは CF らしいと思いますし、またちょっととした細かいところがいまひとつというのも、CF らしいと言えば CF らしい気がします。今回の CF 8 で初めて Ajax系の機能が盛り込まれたので、完成度が低いのは仕方が無いかもしれません。今後の CF 9、CF 10 での進化に期待したいと思います。
　
以上で、「手軽にサイトレイアウトが作れる「CFLAYOUT」−Tab編」の終了です。
　
　

◆最後に

8回に渡って連載してきましたこのシリーズも今回を持って一区切りです。
ご愛読ありがとうございました。
少しでもColdFusionの良さ、使い勝手を理解して頂ければありがたいと思います。
今後とも、折に触れ様々な情報をご提供してまいりますので、よろしくお願い申し上げます。

　
　

バックナンバー

・１.簡単Ajaxフォーム「CFDIV」
・２.Flexのdatagridのような「CFGRID」
・３.ツリーレイアウト＋Ajaxを簡単に実現できる「CFTREE」
・４.誰でも簡単にできる入力補完「CFINPUT」
・５.ブラウザの中にウィンドウが作れる「CFWINDOW」
・６.手軽にサイトレイアウトが作れる「CFLAYOUT」-Border編
・７.手軽にサイトレイアウトが作れる「CFLAYOUT」-HBox＆VBox編