ColdFusionカフェテリア
SAMURAIZ

 

手軽にサイトレイアウトが作れる「CFLAYOUT」−Tab編

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

CFLAYOUT−Tab の概要

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

◆CFLAYOUT − type = Tab の使用例1

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

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

  2.JavaScriptでタブを作成する。

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

◆CFLAYOUT − type = Tab の使用例2

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

◆CFLAYOUT − type = Tab の使用例3

 次にタブレイアウト固有の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の良さ、使い勝手を理解して頂ければありがたいと思います。
今後とも、折に触れ様々な情報をご提供してまいりますので、よろしくお願い申し上げます。

 
 

バックナンバー

1.簡単Ajaxフォーム「CFDIV」
2.Flexのdatagridのような「CFGRID」
3.ツリーレイアウト+Ajaxを簡単に実現できる「CFTREE」
4.誰でも簡単にできる入力補完「CFINPUT」
5.ブラウザの中にウィンドウが作れる「CFWINDOW」
6.手軽にサイトレイアウトが作れる「CFLAYOUT」-Border編
7.手軽にサイトレイアウトが作れる「CFLAYOUT」-HBox&VBox編

ColdFusionの各種情報の配信


最新情報
■2017/3/27
ColdFusion 2016 対応
インストール セットアップ情報
CFサーバーのインストール
CFビルダーのインストール

■2016/9/20
『ColdFusion 2016 リリース
Enterprise Edition 活用資料』
記事一覧

■2016/3/30
『ColdFusion 実験室』
実験4、実験5

■2015/8/10 〜
『ColdFusion クリニック』
記事一覧(随時更新中)

■2015/4/8
『JasperReportsによる帳票出力』
2. JasperReportsによる帳票出力【後編】

■2015/3/12
アップクロス株式会社
西元 貞昭様
『JasperReportsによる帳票出力』
1. JasperReportsによる帳票出力【前編】


■2015/2/25
『ColdFusionでエクセルを使いこなそう!』
4. 【上級】ColdFusionのエクセル機能を利用したPDF帳票の紹介

ColdFusionトレーニング


ColdFusionユーザーグループ
ColdFusionユーザーグループ
Copyright 2012 Samuraiz Corporation. All Rights Reserved.