CFTREE |
|
 |
説明
フォーム内にツリーコントロールを挿入します。また、ユーザーの選択を検証します。cfform タグブロック内で使用します。ColdFusion のクエリーを使用して、ツリーにデータを提供することができます。
|
|
カテゴリ
フォームタグ
|
|
シンタックス<cftree name = "name"
format="applet"、"flash"、xml、"object"
required = "yes"、"no"
delimiter = "delimiter"
completePath = "yes"、"no"
appendKey = "yes"、"no"
highlightHref = "yes"、"no"
onValidate = "script_name"
message = "text"
onError = "text"
lookAndFeel = "motif"、"windows"、"metal" のいずれか
font = "font"
fontSize = "size"
italic = "yes"、"no"
bold = "yes"、"no"
height = "integer"
width = "integer"
vSpace = "integer"
hSpace = "integer"
align = "alignment"
border = "yes"、"no"
hScroll = "yes"、"no"
vScroll = "yes"、"no""
style = "style specification"
enabled = "Yes"、"No"
visible = "Yes"、"No"
tooltip = "tip text"
onChange = "ActionScript"
notSupported = "text">
</cftree>
|
|
関連項目
cfapplet、cfcalendar、cfform、cfformgroup、cfformitem、cfgrid、cfinput、cfselect、cfslider、cftextarea、cftreeitem、『ColdFusion MX 開発ガイド』の第26章の「データの取得および形式設定について」 の「アクションページの操作」および第27章の「cfform タグによるダイナミックフォームの作成」 の「cftree タグによるツリーコントロールの構築」
|
|
ヒストリ
ColdFusion MX 7:
- format 属性が追加され、Flash や XML およびオブジェクトの出力に対するサポートが追加されました。
- enabled、onChange、style、tooltip、および visible の各属性が追加されました (Flash 形式の場合のみ)。
ColdFusion MX: 動作の変更 : ColdFusion では、treeitems が含まれるかどうかにかかわらず、ツリーコントロールが表示されます。
メモ: |
XML 形式では、ColdFusion MX はすべての属性を XML に渡します。用意された XSLT スキンでは XML 形式のツリーは処理または表示されませんが、アプレットおよび Flash 形式のツリーは表示されます。 |
メモ: |
すべての属性は XML 形式で生成された XML に渡されますが、cftree XML を解釈する ColdFusion MX スキンはありません。 |
|
|
使用方法
このタグは、cfform タグブロックの内部で使用する必要があります。
アプレット形式のツリーでは、クライアントが Java アプレットをダウンロードする必要があります。また、クライアントに最新の Java プラグインがインストールされていない場合、アプレット形式のツリーを表示するために最新の Java プラグインをダウンロードしなければならないこともあります。Flash 形式のツリーでは Flash コントロールを使用します。このツリーは、HTML 形式の cfform タグに埋め込むことができます。このタグを Flash 形式またはアプレット形式のいずれかで正しく動作させるには、JavaScript 対応のブラウザを使用する必要があります。
メモ: |
HTML 形式フォームのこのタグに対して Flash 形式を指定し、height 属性と width 属性を指定しない場合、Flash 形式での表示は画面上の表示可能領域を越えるサイズになります。ツリーの後に他の出力 (フォームコントロールなど) が続く場合、それを表示するにはスクロールする必要があります。したがって、HTML フォームで Flash ツリーの後に他の出力を続ける場合は、height と width の値を指定してください。 |
次の条件を満たす場合、このタグのオプションとして挿入されるユーザーが選択したクエリーデータからの値は、ユーザーがフォームを送信した後も継続して表示されます。
- cfform の preserveData 属性が "Yes" に設定されている場合
- cfform の action 属性がフォーム自身と同じページ (デフォルト) に送信される場合、または、ユーザー入力フォーム上のコントロールと同じ名前のコントロールを持つフォームがアクションページ上にある場合
詳細については、cfform タグのエントリを参照してください。
|
|
フォーム変数
ツリー項目を選択し、ツリーを含むフォームを送信すると、アクションページの Form スコープで 2 つの変数を持つ構造体が作成されます。構造体名はツリー名です。次のフィールドがあります。
|
|
オブジェクト形式
format 属性で object を指定した場合は、ツリーは ColdFusion 構造体として返され、ブラウザには送信されません。たとえば、構造体をループしてメニューを挿入、ページを移動するための "breadcrumb" リンクを生成、または dhtml ツリーを作成することができます。
メモ: |
XML 形式のフォームでオブジェクト形式のツリーを指定しない場合、ColdFusion はこのツリーを生成しません。 |
構造体変数名は、cftree name 属性で指定します。構造体の最上位レベルには、次の 2 つのエントリがあります。
|
|
構造体には、次の cftree 属性の値を持つ最上位レベルのエントリがあります。
|
|
最上位レベルの子エントリは、項目エントリの配列です。各項目には次のエントリがあります。
|
|
例
次の例では、cfdocexamples データベースの CourseList テーブルの中から利用可能なコースを表示するツリーを作成し、部門ごとのコースをフォルダに配置します。この例は Flash で表示され、Departments リストを使用して部門名を取得します。
<cfquery name="getCourses" datasource="cfdocexamples">
select d.dept_name, c.course_id, c.CorName, c.CorLevel, c.corName +' ( ' +c.corLevel +' )'
as corLabel
from CourseList c, Departments d
where d.Dept_ID = c.Dept_ID
order by d.dept_Name, c.corName, c.corLevel
</cfquery>
<cfform name="studentForm" format="flash" width="400" height="450">
<cftree name="courseTree" width="350" height="400">
<cftreeitem
query="getCourses"
value="dept_name,Course_id"
display="dept_name,CorLabel" queryasroot="NO" expand="yes,no">
</cftree>
</cfform>
次の例では、部門別に構成された、組織内の全従業員に関する基本情報を示すツリーを作成します。部門を展開すると、全従業員が表示されます。プラス記号 (+) をクリックすると、追加情報が表示されます。従業員名をクリックすると、同じページに戻り、選択対象の Path およびノードの値が表示されます。
<!--- データソースにクエリーを実行して、従業員情報を取得します。 --->
<!--- 出力を部門別にグループ化します
(Group By 節にはすべてのフィールドが必要です)。 --->
<cfquery name = "GetEmployees" dataSource = "cfdocexamples">
SELECT Emp_ID, FirstName, LastName, EMail, Phone, Department
FROM Employees
GROUP BY Department, Emp_ID, FirstName, LastName, EMail, Phone
</cfquery>
<html>
<body>
<h3>cftree の例</h3>
<!--- ツリー内のリンクをクリックすると、次の処理が実行されます。
アプリケーション全体で追加処理に ID を使用します。 --->
<cfif isdefined("Form.fieldnames")>
<b>選択された項目の情報</b><br>
<cfoutput>
<b>Path:</b>#form.Employees.Path#<br>
<b>node:</b>#form.Employees.node#<br>
<br>
</cfoutput>
</cfif>
<!--- ツリーを表示します。cfform 内に cftree タグが必要です。 --->
<cfform action="#cgi.script_name#" preservedata="Yes" format="Flash">
<cftree name = "Employees" height = "400" width = "400"
font = "Arial Narrow" italic="yes" highlighthref="No" HScroll="no" VScroll="no"
completepath="no" lookandfeel="windows" border="No" required="yes">
<!--- group 属性を使用する cfoutput タグが部門をループします。 --->
<cfoutput group="Department" query = "GetEmployees">
<cftreeitem value="#Department#" parent="Employees" expand="yes">
<!--- この cfoutput タグが部門のレコードをループします。
cfouput タグには属性は必要ありません。 --->
<cfoutput>
<!--- 部門内の各従業員に対して項目を作成します。
子は展開しません。各従業員名はこのページにリンクし、
クエリー文字列内の従業員 ID を送信します。--->
<cftreeitem value = "#LastName#, #FirstName#"
parent = "#Department#" expand="false" img="cd"
href="#cgi.script_name#?user_id=#emp_id#">
<!--- 各従業員エントリには、ID および連絡先情報の子があります。 --->
<cftreeitem value = "#Emp_ID#" display = "Employee ID:#Emp_ID#"
parent = "#LastName#, #FirstName#" img="remote">
<!--- 各ノードは固有の値である必要があるため、Emp_ID om 値を使用します。 --->
<cftreeitem value = "#Emp_ID#_ContactInfo" img="computer"
display = "Contact Information"
parent = "#LastName#, #FirstName#" expand = "false">
<!--- ContacInfo には 2 つの子があります。 --->
<cftreeitem value = "#Phone#" parent = "#Emp_ID#_ContactInfo">
<cftreeitem value = "#Email#" parent = "#Emp_ID#_ContactInfo">
</cfoutput>
</cfoutput>
</cftree>
<cfinput type="Submit" name="submitit" value="Submit" width="100">
</cfform>
|