ColdFusion Developer’s Guide phần 6 ppsx

ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 584 querySetCell(q1, "firstname", "Erik"); querySetCell(q1, "lastname", "Pramenter"); </cfscript> <cfform name="form1" format="flash" height="220" width="450"> <cfselect label="select a teacher" name="sel1" query="q1" value="id" display="firstname" width="100" /> <cfformgroup type="repeater" query="q1"> <cfformgroup type="horizontal" label="name"> <cfinput type="Text" name="fname"bind="{q1.currentItem.firstname}"> <cfinput type="Text" name="lname" bind="{q1.currentItem.lastname}"> </cfformgroup> </cfformgroup> <cfinput type="submit" name="submitBtn" value="Send Data" width="100"> </cfform> Creating complex forms with accordion and tab navigator containers The accordion and tabnavigator attributes of the cfformgroup tag let you construct complex forms that would otherwise require multiple HTML pages. With accordions and tab navigator containers, users can switch among multiple entry areas without submitting intermediate forms. All data that they enter is available until they submit the form, and all form elements load at one time. An accordion container puts each logical form page on an accordion pleat. Each pleat has a label bar; when the user clicks a bar, the current page collapses and the selected page expands to fill the available form space. The following image shows a three-pleat accordion, open to the middle pleat, Preferences: A tab navigator container puts each logical form page on a tabbed frame. When the user clicks a tab, the selected page replaces the previous page. The image in About Flash forms shows a tab navigator container. The following example generates a two-tab tab navigator container that gets contact information and preferences. You can change it to an accordion container by changing the type attribute of the first cfformgroup tag from accordion to tabnavigator. To prevent the accordion from having scroll bars, you must also increase the cfform tag height attribute to 310 and the tabnavigator tag height attribute to 260. <cfif IsDefined("Form.fieldnames")> <cfdump var="#form#" label="form scope"> </cfif> <cfform name="myform" height="285" width="480" format="Flash" skin="HaloBlue"> <cfformgroup type="tabnavigator" height="240" style="marginTop: 0"> <cfformgroup type="page" label="Contact Information"> ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 585 <! 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="hrule" /> <cfformitem type="HTML"><textformat indent="95"> Flash fills this field in automatically. You can replace the text. </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"> <cfformitem type="spacer" height="3" /> <cfformitem type="hrule" /> <cfformitem type="spacer" height="3" /> <cfinput type="text" name="phone" validate="telephone" required="no" label="Phone Number"> <cfinput type="datefield" name="mydate1" label="Requested date"> </cfformgroup> <cfformgroup type="page" label="Preferences" style="marginTop: 0"> <cfformitem type="html" height="20"> Tell us your preferences </cfformitem> <! Put the pet selectors to the left of the fruit selectors. > <cfformgroup type="hdividedbox" > <! Group the pet selector box contents, aligned vertically. > <cfformgroup type="VBox"height="130"> <cfformitem type="text" height="20"> Pets: </cfformitem> <cfformgroup type="vertical" height="80"> <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" height="130"> <cfformitem type="text" height="20"> Fruits: </cfformitem> <cfformgroup type="tile" height="80" width="190" 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"> ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 586 <cfinput type="Checkbox" name="chk6" Label="Kumquats" 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"> </cfformgroup> </cfform> Binding data in Flash forms The bind attribute lets you set the value of the fields using the contents of other form fields. You can use the bind attribute with the cftextarea tag and any cfinput type that takes a value, including hidden. This data binding occurs dynamically as the user enters data within Flash on the client system. Flash does not send any information to ColdFusion until the user submits the form. To use the bind attribute to specify the field value, use the following formats: Note: If you use the bind attribute, you cannot use the value attribute. The following rules and techniques apply to the binding formats: • The sourceName value in these formats is the name attribute of the tag that contains the element that you are binding to. • You can bind to additional information about a selected item in a tree. Replace value with display to get the displayed value, or with path to get the path to the node in the tree. • You can bind to the displayed value of a cfselect item by replacing data with label. • If the user selects multiple items in a cfselect control, the selectedItem object contains the most recent selection, and a selectedItems array contains all selected items. You can access the individual values in the array, as in myTree.selectedItems[1].data. The selectedItems array exists only if the user selects multiple items; otherwise, it is undefined. • You can use ActionScript expressions in Flash bind statements. The following example shows how to use the values from the firstName and lastName fields to construct an e-mail address. The user can change or replace this value with a typed entry. <cfformgroup type="horizontal" label="Your Name"> <cfinput type="text" required="Yes" name="firstName" label="First" Data source bind attribute format cfinput type = "text" or cftextarea text bind="{sourceName.text}" cfinput selected radio button bind="{sourceName.selectedData}" cftree selected item bind="{sourceName.selectedNode.getProperty('data').value} cfgrid selected item bind="{sourceName.selectedItem.COLUMNAME}" cfselect selected item bind="{sourceName.selectedItem.data}" ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 587 value="" width="100"/> <cfinput type="text" required="Yes" name="lastName" label="Last" value="" width="100"/> </cfformgroup> <cfinput type="text" name="email" label="email" bind="{firstName.text}.{lastName.text}@mm.com"> Setting styles and skins in Flash forms ColdFusion provides the following methods for controlling the style and appearance of Flash forms and their elements: Skins: provide a simple method for controlling the overall appearance of your form. A single skin controls the entire form. Styles: provide a finer-grained level of control than skins. Each style specifies a particular characteristic for a single control. Many styles are also inherited by a control’s children. You can use both techniques in combination: you can specify a skin for your form and use styles to specify the appearance (such as input text font) of individual controls. The following sections describe these methods and how you can use them. For detailed information on the style names and values that you can use, see “ColdFusion Flash Form Style Reference” on page 1287 in the CFML Reference. Controlling form appearance with Flash skins The cfform tag takes a skin attribute, which lets you select an overall appearance for your form. The skin determines the color used for highlighted and selected elements. You can select the following Flash skins: • haloBlue • haloGreen (the default) • haloOrange • haloSilver About Flash form styles The ColdFusion Flash form tags have a style attribute that lets you specify control characteristics using CSS syntax. You c a n sp e ci f y a style attribute in the following tags: • cfform • cfformgroup • cfcalendar • cfformitem, types hrule and vrule • cfgrid • cfinput • cfselect • cftextarea • cftree ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 588 The attributes for the cfform and cfformgroup generally apply to all the form or form group’s children. Flash supports many, but not all, standard CSS styles. ColdFusion Flash forms only support applying specific CSS style specifications to individual CFML tags and their corresponding Flash controls and groups. You cannot use an external style sheet or define a document-level style sheet, as you can for HTML format forms. Flash form style specification syntax To specify a Flash style, use the following format: style="stylename1: value; stylename2: value; " For example, the following code specifies three style values for a text input control: <cfinput type="text" name="text2" label="Last" style="borderSyle:inset; fontSize:12; backgroundColor:##FFEEFF"> About Flash form style value formats Style properties can be Boolean values, strings, numbers, or arrays of these values. The following sections describe the formats for length, time, and color values. Length format You specify styles that take length or dimension values, including font sizes, in pixels. The fontSize style property lets you use a set of keywords in addition to numbered units. You can use the following keywords when you set the fontSize style property. The exact sizes are defined by the client browser. • xx-small • x-small • small • medium • large • x-large • xx-large The following cfinput tag uses the style attribute with a fontSize keyword to specify the size of the text in the input box: <cfinput type="text" name="text1" style="fontSize:X-large" label="Name"> Time format You specify styles that take time values, such as the openDuration style that specifies how fast an accordion pleat opens, in milliseconds. The following example shows an accordion tag that takes one-half second to change between accordion pleats: <cfformgroup type="accordion" height="260" style="openDuration: 500"> Color format You define color values, such as those for the backgroundColor style, in the following formats: ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 589 Some styles support only the hexadecimal color format. Some controls accept multiple colors. For example, the tree control’s depthColors style property can use a different background color for each level in the tree. To assign multiple colors, use a comma-delimited list, as the following example shows: style="depthColors: ##EAEAEA, ##FF22CC, ##FFFFFF" About Flash form style applicability and inheritance Because of the way Flash control styles are implemented, some common styles are valid, but have no effect, in some tags. Therefore, in the table in “Styles valid for all controls” on page 1288 in “ColdFusion Flash Form Style Reference” on page 1287 in the CFML Reference, the listed styles do not cause errors when used in controls, but might not have any effect. Styles can be inheritable or noninheritable. If a style is noninheritable, it only affects the tag, and does not affect any of its children. For example, to maintain a consistent background color in an hbox form group and its children tags, you must specify the color in all tags. If a style is inheritable, it applies to the tag and its children. Example: applying styles to a Flash form The following form uses a skin and styles to control its appearance: The code for the form is as follows. Comments in the code explain how formatting controls and styles determine the appearance. <! Specify the form height and width, use the HaloBlue skin. Note: Flash ignores a backgroundColor style set in cfform. > <cfform name="myform" height="390" width="440" format="Flash" skin="HaloBlue"> Format Description hexadecimal Hexadecimal colors are represented by a six-digit code preceded by two number sign characters (##). Two # characters are required to prevent ColdFusion from interpreting the character. The range of possible values is ##000000 to ##FFFFFF. VGA color names VGA color names are a set of 16 basic colors supported by all browsers that support CSS. The available color names are Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, and Yellow. Some browsers support a larger list of color names. VGA color names are not case-sensitive. ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 590 <! The input area is a panel. Styles to specify panel characteristics. Child controls inherit the background color and font settings. > <cfformgroup type="Panel" label="Contact Information" style="marginTop:20; marginBottom:20; fontSize:14; fontStyle:italic; headerColors:##FFFF00, ##999900; backgroundColor:##FFFFEE; headerHeight:35; cornerRadius:12"> <! This vbox sets the font size and style, and spacing between and around its child controls. > <cfformgroup type="vbox" style="fontSize:12; fontStyle:normal; verticalGap:18; marginLeft:10; marginRight:10"> <! Use a horizontal group to align the first and last name fields and set a common label. > <cfformgroup type="horizontal" label="Name" > <! Use text styles to highlight the entered names. > <cfinput type="text" required="Yes" name="firstName" label="First" value="" width="120" style="color:##006090; fontSize:12; fontWeight:bold" /> <cfinput type="text" required="Yes" name="lastName" label="Last" value="" width="120" style="color:##006090; fontSize:12; fontWeight:bold"/> </cfformgroup> <! Horizontal rules surround the e-mail address. Styles specify the rule characteristics. > <cfformitem type="hrule" style="color:##999900; shadowColor:##DDDD66; strokeWidth:4"/> <cfformitem type="HTML" Style="marginTop:0; marginBottom:0"> <textformat indent="57"> Flash fills this field in automatically. You can replace the text.</textformat> </cfformitem> <cfinput type="text" name="email" label="email" bind="{firstName.text}.{lastName.text}@mm.com"> <cfformitem type="hrule" style="color:##999900; shadowColor:##DDDD66; strokeWidth:4"/> <cfinput type="text" name="phone" validate="telephone" label="Phone"> <! Styles control the colors of the current, selected, and rolled-over dates. > <cfinput type="datefield" name="mydate1" label="Date" style="rollOverColor:##DDDDFF; selectionColor:##0000FF; todayColor:##AAAAFF"> </cfformgroup> <! vbox > </cfformgroup> <! panel > <! A style centers the buttons at the bottom of the form. > <cfformgroup type="horizontal"style="horizontalAlign:center"> <cfinput type = "submit" name="submit" width="100" value = "Show Results"> <cfinput type = "reset" name="reset" width="100" value = "Reset Fields"> </cfformgroup> </cfform> Using ActionScript in Flash forms ActionScript 2 is a powerful scripting language that is used in Flash and other related products and is similar to JavaScript. You can use a subset of ActionScript 2 code in your Flash forms. ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 591 The following sections tells you how to include ActionScript in your Flash forms, and describes restrictions and additions to ActionScript that apply to ColdFusion Flash forms. It does not provide information on writing Action- Script. For details on ActionScript and how you can use it, see the Flash ActionScript 2 documentation, including the documents available in the Flash and Flex sections of LiveDocs at http://www.adobe.com/support/documentation/. Using ActionScript code in CFML You can use ActionScript in the following attribute of tags in CFML Flash format forms: • Form and control events, such as the onSubmit attribute of the cfform tag, or the onChange and onClick attributes of the cfinput tag. The attribute description on the tag reference pages in the CFML Reference list the event attributes. • Bind expressions, which you can use to set field values. For more information on binding data, see “Binding data in Flash forms” on page 586. Your ActionScript code can be inline in the form attribute specification, you can make a call to a custom function that you define, or you can use the ActionScript include command in the attribute specification to get the Action- Script from a .as file. The following example shows a simple Fahrenheit to Celsius converter that does the conversion directly on the client, without requiring the user to submit a form to the ColdFusion server. <cfform format="flash" width="200" height="150"> <cfinput type="text" name="fahrenheit" label="Fahrenheit" width="100" value="68"> <cfinput type="text" name="celsius" label="Celsius" width="100"> <cfinput type="button" name="convert" value="Convert" width="100" onClick="celsius.text = Math.round((farenheit.text-32)/1.8*10)/10"> </cfform> Note: You do not use the text property (for example, fieldname.text) to access hidden fields. To access a hidden field, use the format formname.fieldname = 'value'. Custom ActionScript functions Custom ActionScript functions are the equivalent of CFML UDFs. You can define your own functions in ColdFusion by using the cfformitem tag with a type attribute value of script, or you can define the functions in an Action- Script (.as) file. Also, ColdFusion includes a small number of predefined custom ActionScript functions that you can use in your Flash form controls. You can use the following custom functions in the ActionScript for all form controls to reset or submit the form: • resetForm() • submitForm() You can use the following custom functions in cfgrid tags only to insert and delete rows in the grid: • GridData.insertRow(gridName) • GridData.deleteRow(gridName) The following example shows how you can use the two GridData functions to add custom buttons that add and delete rows from a Flash form. These buttons are equivalent to the buttons that ColdFusion creates if you specify insert="yes" and delete="yes" in the cfgrid tag, but they allow you to specify you own button text and placement. This example puts the buttons on the side of the grid, instead of below it and uses longer than standard button labels. ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 592 <cfform format="flash" height="265" width="400"> <cfformitem type="html"> You can edit this grid as follows: <ul> <li>To change an item, click the field and type.</li> <li>To add a row, click the Insert Row button and type in the fields in the highlighted row.</li> <li>To delete a row, click anywhere in the row and click the Delete Row button</li> </ul> When you are done, click the submit button. </cfformitem> <! The hbox aligns the grid and the button vbox horizontally > <cfformgroup type="hbox" style="verticalAlign:bottom; horizontalAlign:center"> <! To make all elements align properly, all of the hbox children must be containers, so we must put the cfgrid tag in a vbox tag. > <cfformgroup type="vbox"> <! An editable grid with hard coded data (for simplicity). By default, this grid does not have insert or delete buttons. > <cfgrid name="mygrid" height="120" width="250" selectmode="edit"> <cfgridcolumn name="city"> <cfgridcolumn name="state"> <cfgridrow data="Rockville,MD"> <cfgridrow data="Washington,DC"> <cfgridrow data="Arlington,VA"> </cfgrid> </cfformgroup> <! Group the Insert and Delete buttons vertically; use a vbox to ensure correct alignment. > <cfformgroup type="vbox" name="buttons"style="verticalAlign:bottom; horizontalAlign:center"> <! Use a spacer to position the buttons. > <cfformitem type="spacer" height="18" /> <! Use the insertRow method in the onClick event to add a row. > <cfinput type="button" name="ins" value="Insert a new row" width="125" onClick="GridData.insertRow(mygrid);"> <! Use the deleteRow method in the onClick event to delete the selected row > <cfinput type="button" name="del" value="Delete selected row" width="125" onClick="GridData.deleteRow(mygrid)"> <cfinput type="submit" name="f1" value="Submit" width="125"> </cfformgroup> </cfformgroup> </cfform> <! Dump the form if it has been submitted. > <cfif IsDefined("form.fieldnames")> <cfdump var="#form#"> </cfif> Best practices for Flash forms The following sections describe best practices that can help you increase the performance of Flash forms. ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 593 Minimizing form recompilation Flash forms are sent to the client as SWF files, which ColdFusion must compile from your CFML code. The following techniques can help limit how frequently ColdFusion must recompile a Flash form. • Only data should be dynamic. Whenever a variable name changes, or a form characteristic, such as an element width or a label changes, the Flash output must be recompiled. If a data value changes, the output does not need to be recompiled. • Use cfformgroup type="repeater" if you must loop no more than ten times over no more than ten elements. This tag does not require recompiling when the number of elements changes. It does have a processing overhead that increases with the number of loops and elements, however, so for large data sets or many elements, it is often more efficient not to use the repeater. Caching data in Flash forms The cfform tag timeout attribute specifies how many seconds ColdFusion retains Flash form data on the server. When a Flash form is generated, the values for the form are stored in memory on the server. When the Flash form is loaded on the client, it requests these form values from the server. If this attribute is 0, the default, the data on the server is immediately deleted after the data has been requested from the Flash form. A Flash form can be reloaded multiple times if a user displays a page with a Flash form, goes to another page, and uses the browser Back button to return to the page with the form. This kind of behavior is common with search forms, login forms, and the like. When the user returns to the original page: • If the timeout value is 0, or the time-out period has expired, the data is no longer available, and ColdFusion returns a data-expired exception to the browser; in this case, the browser typically tells the user to reload the page. • If the time-out has not expired, the browser displays the original data. If your form data contains sensitive information, such as credit card numbers or social security numbers, you should leave the time-out set to 0. Otherwise, consider setting a time-out value that corresponds to a small number of minutes. Using Flash forms in a clustered environment Flash forms require sticky sessions when used in a cluster. [...]... on page 62 6 ADOBE COLDFUSION 8 61 6 ColdFusion Developer’s Guide Using the cfdiv tag The cfdiv tag is a general purpose container that lets you use a bind expression to specify its contents It therefore lets you dynamically refresh any arbitrary region on the page based on bind events By default, the tag creates an HTML div region, but it can create any HTML tag with body contents Unlike other ColdFusion. .. format the output: ADOBE COLDFUSION 8 5 96 ColdFusion Developer’s Guide Later sections in this chapter use this form in their examples and description Building XML skinnable forms You build ColdFusion XML skinnable forms using standard ColdFusion forms tags, including cfformgroup and cfformitem tags These tags create the elements of the form, the building blocks of the form ColdFusion converts the following... XForms model element XForms instance element cf:data element XForms submission element XForms bind element XForms bind element ADOBE COLDFUSION 8 60 0 ColdFusion Developer’s Guide 3 3 2 2 2 1 (end of model element) XForms or ColdFusion extension control element XForms or ColdFusion extension control element (end of form) The following sections describe the data model and the elements that make up... ADOBE COLDFUSION 8 60 7 ColdFusion Developer’s Guide The cftree tags For applet and Flash format trees, ColdFusion inserts cftree controls in the XML as HTML embed objects in ColdFusion. .. features help you develop effective Ajax applications that use ColdFusion to provide dynamic data They include many features that you can use with other Ajax frameworks, including Spry The following data and development features are particularly important for use with form and layout tags: ADOBE COLDFUSION 8 61 4 ColdFusion Developer’s Guide • ColdFusion supports data binding in many tags Binding allows... thoughts. ADOBE COLDFUSION 8 599 ColdFusion Developer’s Guide We really want to hear from you! ColdFusion. .. queryAsRoot="true" value="Development"/> ADOBE COLDFUSION 8 60 8 ColdFusion Developer’s Guide The cfformgroup and cfformitem tags All cfformgroup tags and all cfformitem tags, except type="html" and type="text", generate xf:group elements The following rules determine the element structure: • The CFML tag type attribute determines the xf:group appearance attribute • ColdFusion converts type attribute... name="name">submit ADOBE COLDFUSION 8 61 0 ColdFusion Developer’s Guide Clear Fields reset Creating XSLT skins You can create your own XSLT skins to process the XML that ColdFusion generates You should be familiar... passthrough ColdFusion passes form tag attributes or attribute values that it does not specifically process directly to the XML, as follows: • It converts cfformitem and cfformgroup type attributes to xf:group element appearance attributes • It passes the name and value of tag attributes that it does not recognize or process in cf:attribute elements ADOBE COLDFUSION 8 61 1 ColdFusion Developer’s Guide This... row1Column1Value row1Column2Value row2Column1Value row2Column2Value ADOBE COLDFUSION 8 60 6 ColdFusion Developer’s Guide The following example shows a minimal grid with two nodes CFML . Label="Grapes" value="Grapes"> ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 5 86 <cfinput type="Checkbox" name="chk6" Label="Kumquats" value="Cumquats"> </cfformgroup> </cfformgroup> </cfformgroup> </cfformgroup> </cfformgroup> <cfformgroup. output: ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 5 96 Later sections in this chapter use this form in their examples and description. Building XML skinnable forms You build ColdFusion XML. thoughts. ADOBE COLDFUSION 8 ColdFusion Developer’s Guide 599 </cfformitem> <cftextarea name="thoughts" label="Additional Comments" rows="5" cols=" ;66 ">We