Ajax および ColdFusion のユーザーインターフェイス機能について

注意:

アドビでは 2020 年 12 月 31 日をもって Flash Player のサポートを終了します。2021 年 1 月 12 日以降は Flash Player で Flash コンテンツが動作しなくなるので、システムを保護するためにすべてのユーザーが Flash Player を直ちにアンインストールすることを強くお勧めします。 

詳しくは、Adobe Flash Player サポート終了情報ページを参照してください。

Ajax(Asynchronous JavaScript and XML)とは、インタラクティブな Web アプリケーションを作成するための一連の Web テクノロジーのことです。Ajax アプリケーションは通常、次のテクノロジーから構成されます。

  • 情報の形式設定および表示をおこなう HTML と CSS
  • クライアントサイドでダイナミックな処理を実行する JavaScript
  • XMLHttpRequest 関数によるサーバーとの非同期通信
  • サーバーとクライアントの間でデータのシリアル化や転送をおこなうための XML または JSON(JavaScript Object Notation)
    ColdFusion には、Ajax テクノロジーを使用したダイナミックアプリケーションの作成を支援するツールが多数用意されています。ColdFusion のタグや関数を使用すれば、複雑な Ajax アプリケーションを簡単に作成できます。

ColdFusion の Ajax 機能

ColdFusion では、次の 2 種類の Ajax 機能を使用できます。

  • データ機能と開発機能
  • ユーザーインターフェイス機能
データ機能と開発機能

ColdFusion のデータ機能と開発機能を使用すれば、ColdFusion でデータをダイナミックに処理する効果的な Ajax アプリケーションを開発できます。データ機能と開発機能には、Spry などの他の Ajax フレームワークで使用できる機能が多数用意されています。
次のデータ機能と開発機能は、フォームタグやレイアウトタグを使用するときに重要になります。

  • ColdFusion の多くのタグでは、データバインディングがサポートされています。フォームタグや表示タグでバインディングを使用すれば、フォームの入力に基づいてダイナミックに情報を表示できます。フォームのデータを別のフォームフィールドにそのまま表示するだけでなく、フォームフィールドのデータをパラメータとして CFC 関数、JavaScript 関数、または CFM ページに渡し、その処理結果を使用して表示を制御することもできます。
  • cfajaximport タグを使用すると、ColdFusion ページにインポートする JavaScript ファイルや CSS ファイルの場所を指定したり、特定のタグに必要なファイルを選択的にインポートしたりできます。ファイルの場所を自由に変更できるので、様々な設定をサポートでき、またアプリケーションごとのスタイル定義などの高度な設定も可能です。
    データ機能、開発機能およびそれらの使用方法について詳しくは、Ajax データ機能および開発機能の使用を参照してください。
ユーザーインターフェイスのタグおよび機能

ColdFusion の一部のユーザーインターフェイス要素には、Ajax の機能が組み込まれています。それらのタグや、タグと属性の組み合わせは、次のカテゴリに分類できます。

  • 内容のレイアウトや表示をおこなうコンテナタグ
  • ファイルを処理するファイル管理タグ
  • データをダイナミックに表示するフォームタグ
  • メニューバーやプルダウンメニューの作成に使用するメニュータグ
  • ツールヒントや入力支援などのユーザー補助機能
  • 地図、進行状況表示バー、メディアプレーヤー、メッセージボックスを使用するためのその他の 4 種類のタグ
    次の表に、Ajax ベースの機能を表示するための基本的なタグと属性を示します。フォーム固有のその他の機能について詳しくは、Ajax フォームのコントロールおよび機能の使用を参照してください。

タグ / 属性

説明

コンテナタグ

cfdiv

HTML の div 領域。バインド式を使用してダイナミックにデータを挿入できます。この領域のフォームは非同期で送信されます。

cflayout

水平方向のボックス、垂直方向のボックス、タブ領域、または境界線で囲まれた一連の領域(上、下、左、右、中央の領域を使用可能)。

cflayoutarea

cflayout 領域内の個別の領域。例えば、タブレイアウトでユーザーがタブを選択したときに表示される内容。この領域のフォームは非同期で送信されます。

cfpod

ブラウザウィンドウ内の区画。オプションのタイトルバーと、表示要素を配置する本文で構成されます。この領域のフォームは非同期で送信されます。

cfwindow

ブラウザ内に表示されるポップアップウィンドウ。ポップアップウィンドウは、ColdFusion.Window.createWindow 関数を使用して作成することもできます。この領域のフォームは非同期で送信されます。

ファイル管理タグ

cffileupload

ユーザーのシステムから複数のファイルをアップロードするためのダイアログボックス。

フォームタグ

cfgrid format="html"

編集およびソートが可能なダイナミックなデータグリッド。

cfinput type="datefield"

ユーザーが日付を入力するためのコントロール。ポップアップカレンダーから日付を選択できます。

cftextarea richtext="yes"

表示テキストを形式設定するための一連のコントロールを備えたテキスト領域。

cftree format="html"

ダイナミックなツリー形式のデータ表現。

cfslider

一定の範囲から数値を選択するために ColdFusion フォーム内に表示されるスライダコントロール。

メニュータグ

cfmenu

メニューバー、またはドロップダウンメニューのルート。

cfmenuitem

メニューを構成する個別のアイテム、またはサブメニューのルート。

ユーザー補助のタグと属性

cfinput type="text" autosuggest="bind}}{{expression"

選択候補を自動的に表示するドロップダウンボックス。ユーザーが入力したテキストに基づいて、完全な入力値の選択候補がリストに表示されます。

cftooltip タグ、および cfinput、cfselect、cftextarea コントロールの tooltip 属性

コントロールや領域に関するテキスト形式の説明。マウスのカーソルをコントロールまたは領域の上に置くと表示されます。

その他のタグ

cfprogressbar

ファイルのダウンロードなどの進行状況を示す進行状況表示バー。

cfmap

ColdFusion Web ページ内の地図。

cfmediaplayer

ページに埋め込まれたメディアプレーヤー。

cfmessagebox

ポップアップメッセージを表示するためのコントロール。

タグや属性以外にも、表示の制御や管理をおこなうための JavaScript 関数が多数用意されています。その多くは、特定のタグの表示を制御するための関数です。例えば、JavaScript 関数を使用して、ウィンドウの表示と非表示をダイナミックに切り替えることができます。また、ユーティリティ関数も用意されています。例えば、コントロールの属性値を取得する ColdFusion.getElementValue 関数や、コンテナタグの URL の結果を表示する ColdFusion.navigate 関数などがあります。ColdFusion のすべての Ajax JavaScript 関数の一覧と関数の詳細な説明については、『CFML リファレンス』の AJAX JavaScript 関数を参照してください。

ColdFusion Ajax のユーザーインターフェイス機能の使用

ColdFusion の Ajax ユーザーインターフェイス機能を使用すれば、データに応じてページをダイナミックに更新できるので、HTML ページを複数用意したり、ページを更新したり、HTML 以外の表示ツール(Flash フォームなど)を使用したりする必要がなくなります。多くのユーザーインターフェイス機能ではデータバインディングを使用して、フォームフィールドの値、フォームコントロールの選択値、Spry データセットの選択値などに基づいてデータをダイナミックに取得できます。
ColdFusion の Ajax ユーザーインターフェイスのコントロールおよび機能は、大きく次の 2 種類に分類できます。

  • 表示レイアウト
  • データ相関
    表示レイアウトコントロールには、cflayout、cfpod、cfwindow コントロールなどがあります。データ相関機能には、HTML の cfgrid コントロール、cfmenu コントロール、テキスト入力コントロールの選択候補リストなどがあります。ほとんどの表示レイアウト機能とデータ相関機能ではデータバインディングを使用できるので、ユーザーとの間でダイナミックな対話処理をおこなえます。
    ColdFusion の Ajax ユーザーインターフェイス機能は、[Yahoo!
    ユーザーインターフェイスライブラリ|http://developer.yahoo.com/yui/] と Ext JavaScript ライブラリに基づいています。また、cftextarea リッチテキストエディターは、FCKeditor テキストエディターに基づいています。ほとんどの場合、ColdFusion のタグと関数(JavaScript 関数を含む)を使用するだけでインターフェイスの作成と管理をおこなえますが、上級者の場合は、ライブラリコード(特に CSS スタイル)を変更してコントロールの表示をさらにカスタマイズできます。

ヘルプをすばやく簡単に入手

新規ユーザーの場合