Adobe ColdFusion 8

cfformgroup

描述

为多个表单控件创建一个容器控件。在Adobe Flash和XML表单的cfform标签主体里使用。

语法

<cfformgroup 
    type = "group type"
    label = "label"
    style = "style specification"
    selectedIndex = "page number">
    width = "pixels"
    height = "pixels"
    enabled = "yes|no"
    visible = "yes|no"
    onChange = "ActionScript expression"
    tooltip = "text"
    id = "unique identifier">
    ...ColdFusion forms controls...
</cfformgroup>

OR

<cfformgroup 
    type = "repeater"
    query = "query object"
    maxrows = "integer">
    startrow = "row number"
    ...ColdFusion forms controls
</cfformgroup>

注: 你可以在attributeCollection 中指定这个标签的属性，作为一个结构的value,在attributeCollection 中指定结构的名称,并使用这个标签的属性名称作为这个结构的Keys.

属性

下面的表格列出了属性和他们的在Flash表单里的行为。对于XML，如果没有其他的纪录，这个属性会被传递给XML，但是不会被ColdFusion提供的基本XSL样式单解析。

注意: 在XML里没有注明是支持的属性不能用ColdFusion提供的皮肤来处理他们。虽然包含在产生的XML里。

属性

必选/可选;
格式

默认

描述

type

必选;

Flash 和 XML

 

XML: 可以是在XSLT定义的任何 XForms group类型。该XSL皮肤提供了ColdFusion支持的以下类型：

  • horizontal:align子控件横向地处于一个表单里面，并把这个标签的label属性放到 子控件的左边。
  • vertical:align子控件垂直地处于一个表单里面，并把这个标签的label属性放到子控件的左边。
  • fieldset:（对应HTML的fieldset标签，它集合了自己的子控件，特别是通过拖曳它们周围的对话框和置换了带有图例文本的顶部线的部分。特别指出的是图例，使用了label属性。为了指定对话框的尺寸，使用了带有高和宽值的style属性。你必须明确在这个表单组里使用 cfformgroup type="vertical"这样可以垂直align它的子控件。

 

 

Flash: 必须是以下的一种：

  • repeater: 动态创建了 一个cfformgroup子控件或者一个query对象的每一行都使用的标签的实例，不必要求ColdFusion在行数的数字改变的时候重新编译Flash SWF文件。
  • horizontal:横向排列一个表单里的子控件，把该标签的label属性放到子控件的左边。用该标签来横向安排的独立控件。
  • vertical: 垂直排列一个表单里的子控件，把该标签的label属性放在子控件的左边。使用该标签来垂直安排独立控件。
  • hbox:横向排列子控件。使用这个类型来横向安排表单控件的组。不要使用这个标签横向排列独立控件，因为子控件不能正确排列，可以使用横向类型来代替。
  • vbox:垂直排列子控件。使用这个类型来垂直安排组。不要使用这个标签来垂直排列独立控件。因为子控件不会正确排列，可以使用垂直类型来代替。

  • hdividedbox:横向排列子控件。每一个子控件都在一个有边框的对话框里，并且这里把不同的box类型区分开，用户可以改动每个子控件的相对大小。使用一个带有该属性的标签横向安排表单控件的组。你不能使用这个属性来横向排列独立控件。
  • vdividedbox:垂直排列子控件。每一个子控件都在一个有边框的对话框里，并且这里把不同的box类型区分开，用户可以改动每个子控件的相对大小。使用一个带有该属性的标签垂直安排表单控件的组。你不能使用这个属性来垂直排列独立控件。
  • panel: 一个包含了标题栏的容器，该标题栏包含了 label 属性，一个边框，和带有横向安排的子控件的文本内容区域。
  • tile: 把子控件放在一个矩形网格里。
  • accordion: 把每一个子控件放在一个褶裥里，该褶裥有一个扩展和订约accordion。使用了一个cfformgroup type="page"的标签定义每一个褶裥。
  • tabnavigator: 把子控件放在一个分页的对话框里。用cfformgroup type="page"标签定义每一个标签页。
  • page:垂直排列放置子控件标签在一个tabnavigator的单独标签页或一个accordion容器褶裥里。

query

对于type= repeater必选, 忽略其他 ;

Flash

 

和repeater一起使用的query。 Flash创建了一个实例，该实例里，每一个cfformgroup标签的子控件都在query的每一行里。你可以使用子控件里的bind属性来使用实例里的query行的数据。

enabled

Optional;

Flash

yes

Boolean值，它指定了是否表单组里的控件是不能使用的。不能使用的控件会出现在加亮成灰颜色的项目里。

height

可选;

Flash

 

group容器的高，单位是像素。如果你忽略了这个属性，Flash就会主动衡量容器的高度。忽略Flash repeater 的类型。

id

可选;

Flash

 

表单group独特的标识符。

当你使用 tabnavigator 或 accordion 类型的时候，你必须指定 id 属性来参考通过自定义ActionScript的控件。

label

可选;

Flash 和 XML

 

适用于表单group的标签

对于 Flash, 可以做以下操作：

  • 对于一个group里的页面或者面板 ，可以定义标签来输入对应的accordion褶裥， tabnavigator标签或者面板标题栏。对于一个Flash的垂直的或者水平的表单group来说，可以指定标签来放置给group的左边。
  • 忽略Flash里的repeater, hbox, hdividedbox, vbox, vdividedbox, tile, accordion, 和 tabnavigator类型.

maxrows

可选;

Flash

 

只适用于repeater类型，忽略其他

指定了使用在Flash表单repeater里的query行的最大数值。如果query有比startrow属性值和该值的和更多的行，这个repeater就不会使用现存的行。

onChange

可选;

Flash

 

只针对Tabnavigator 和 accordion 类型: ActionScript 表达式，当一个新的标签页或者accordion页面被选择的时候唤醒处理。

注意: onChange 事件发生在表单第一次出现的时候。

selectedIndex

可选;

Flash only

 

只适用于 accordion 和 tabnavigator 类型;忽略其他的。指定页面控件来显示打开，在这里0 (而不是 1)指定了在group里定义的第一个页面

startrow

可选;

Flash

0

只适用于repeater 类新; 忽略其他 。

指定了在Flash表单repeater里使用的query使用的其始行的数值，该属性是以0开始的：其始行是第0行，而不是第1行（和大多数的ColdFusion标签一样。）

style

可选;

Flash 和 XML

 

Flash: 在CSS格式里指定的Flash类型。更多指定Flash类型的细节，请看 ColdFusion Developer's Guide里的 "Creating Forms in Flash"。

XML:一个指定的inline CSS类型。

tooltip

可选;

Flash

 

当鼠标在表单group区域上停止时显示的文本。如果表单group里的控件也指定了一个使用提示，当鼠标停在控件上面的时候，Flash就会显示控件的使用提示。

visible

可选;

Flash

yes

Boolean值，指定了表单group里的控件是否可见。如果控件是可见的，将要被可见控件占领的空间就是空白的。

width

可选;

Flash 和 XML

 

group容器的宽度, 单位是像素。如果你忽略了这个属性， Flash 就是自动衡量容器的宽度。忽略Flash repeater 类型。

使用方法

这个标签要求一个结束标签。如果cfform类型是HTML该标签就被忽略；任何标签的主体的文本是解释的如果环绕cfformgroup不存在的话。

对于Flash格式表单，该标签组织了表单的文本。它聚集和组织了子控件。这个标签的主体包涵了以下标签，所有其他标签和文本是忽略的。

更多在Flash form里使用该标签的信息，请看ColdFusion Developer's Guide的"Creating Forms in Flash" 。

对于 XML format, ColdFusion传递了标签和它的属性给 XML; 用XSLT描述ｘｍｌ的皮膚（it is the responsibility of the skin XSLT to handle the XML. ）ColdFusion basic skin只支持 horizontal, vertical, 和 dualselectlist 类型.更多在XML form里使用该标签的信息，请看 ColdFusion Developer's Guide里 的 "Creating Forms in Flash" 。

范例

这是一个简单的在 XML form 里使用一个单独的cfformgroup 标签的例子, 请看 cfform。

下面的例子展示了如何使用 cfformgroup 标签来处理Flash表单上的元素。它创建了一个hdividedbox容器，该容器在每一边都有一个vbox容器。左边的box有标题文本和两个单选按钮。右边的box有标题文本和三个复选框。

<h3>Simple cfformgroup Example</h3>
<cfform name="myform" height="450" width="500" format="Flash" >
    <cfformgroup type="hdividedbox" >
        <cfformgroup type="VBox">
            <cfformitem type="text" height="20">
                Pets:
            </cfformitem>
            <cfinput type="Radio" name="pets" label="Dogs" value="Dogs" checked>
            <cfinput type="Radio" name="pets" label="Cats" value="Cats">
        </cfformgroup>

        <cfformgroup type="VBox">
            <cfformitem type="text" height="20">
                Fruits:
            </cfformitem>
            <cfinput type = "Checkbox" name="chk1" Label="Apples" value="Apples">
            <cfinput type="Checkbox" name="chk2" Label="Bananas" value="Bananas">
            <cfinput type="Checkbox" name="chk3" Label="Pears" value="Pears">
        </cfformgroup>
    </cfformgroup>
</cfform>

下面的例子更复杂一些，它展示了更多如何使用cfformgroup标签来处理Flash表单里的子控件。它同时也展示了你可以使用使用在一个文本cfformgroup主体里的文本格式化功能。当你提交该表单的时候,页面就会自卸表单范围的文本，来显示你提交的数据。

<h2>cfformgroup Example</h2>
<cfif IsDefined("form.oncethrough")>
    <h3>The form submitted the following information to ColdFusion:</h3>
    <cfdump var="#form#"><br><br><br>
</cfif>

<h3>A Flash form using cfformgroup tags</h3>
<cfform name="myform" height="450" width="500" format="Flash">

<!--- The following formgroup shows how you can present formatted text. --->
    <cfformitem type="html">
        <b><font color="#FF0000" size="+4" face="serif">
        This form has two tabs, asking for the following:</font></b><br>
        <li>contact information</li>
        <li><i>preferences</i></li>
        <b>Try entering information on both tabs</b><br>
        Submit the form and see what ColdFusion gets in the Forms scope.</b><br>
        <a href="http://www..com/" target="_blank">
        <font color="#0000FF"><u>
        This link displays the home page in a new browser window
        </u></font></a><br>
        &nbsp;<br>
    </cfformitem>

<!--- Use a tabnavigator with two tabs for user input. --->
    <cfformgroup type="tabnavigator" height="220">
        <cfformgroup type="page" label="Contact Information">
            <!--- Align the first and last name fields horizontally --->
            <cfformgroup type="horizontal" label="Your Name">
                <cfinput type="text" required="Yes" name="firstName" label="First"
                    value="" width="100"/>
                <cfinput type="text" required="Yes" name="lastName" label="Last"
                    value="" width="100"/>
            </cfformgroup>
            <cfformitem type="html"><textformat indent="95"><font size="-2">
                Flash fills the email field in automatically. 
                You can replace any of the text.
                </font></textformat>
            </cfformitem>
            <!--- The bind attribute gets the field contents from the firstname and lastName
                fields as they get filled in. --->
            <cfinput type="text" name="email" label="email"
                bind="{firstName.text}.{lastName.text}@mm.com">
        
            <cfinput type="text" name="phone" validate="telephone" required="Yes"
                label="Phone Number">
        </cfformgroup>

        <cfformgroup type="page" label="Preferences">
            <cfformitem type="text" height="30">
                <b>Tell us your preferences</b>
            </cfformitem>
            <!--- Put the pet selectors to the left of the fruit selectors. --->
            <cfformgroup type="hbox">
            <!--- Group the pet selector box contents, aligned vertically. --->
                <cfformgroup type="vbox">
                    <cfformitem type="text" height="20">
                        Pets:
                    </cfformitem>
                    <cfformgroup type="vertical">
                        <cfinput type="Radio" name="pets" label="Dogs" value="Dogs"
                            checked>
                        <cfinput type="Radio" name="pets" label="Cats" value="Cats">
                    </cfformgroup>
                </cfformgroup>
            <!--- Group the fruit selector box contents, aligned vertically. --->
                <cfformgroup type="vbox">
                    <cfformitem type="text" height="20">
                        Fruits:
                    </cfformitem>
                    <cfformgroup type="tile" width="200" label="Tile box">
                        <--- Flash requires unique names for all controls --->
                        <cfinput type = "Checkbox" name="chk1" Label="Apples"
                            value="Apples">
                        <cfinput type="Checkbox" name="chk2" Label="Bananas"
                            value="Bananas">
                        <cfinput type="Checkbox" name="chk3" Label="Pears"
                            value="Pears">
                        <cfinput type="Checkbox" name="chk4" Label="Oranges"
                            value="Oranges">
                        <cfinput type="Checkbox" name="chk5" Label="Grapes"
                            value="Grapes">
                        <cfinput type="Checkbox" name="chk6" Label="Cumquats"
                            value="Cumquats">
                    </cfformgroup>
                </cfformgroup>
            </cfformgroup>
        </cfformgroup>
    </cfformgroup>

    <cfformgroup type="horizontal">
        <cfinput type = "submit" name="submit" width="100" value = "Show Results">
        <cfinput type = "reset" name="reset" width="100" value = "Reset Fields">
        <cfinput type = "hidden" name="oncethrough" value = "Yes">
    </cfformgroup>
</cfform>