About Ajax and ColdFusion user interface features
Ajax (Asynchronous JavaScript and XML) is a set of web technologies for creating interactive web applications. Ajax applications typically combine:
- HTML and CSS for formatting and displaying information.
- JavaScript for client-side dynamic scripting
- Asynchronous communication with a server using the XMLHttpRequest function.
- XML or JSON (JavaScript Object Notation) as a technique for serializing and transferring data between the sever and the client.
ColdFusion provides a number of tools that simplify using Ajax technologies for dynamic applications. By using ColdFusion tags and functions, you can easily create complex Ajax applications.
ColdFusion Ajax features
ColdFusion provides two types of Ajax features:
- Data and development features
- User interface (UI) features
ColdFusion data and development 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:
- ColdFusion supports data binding in many tags. Binding allows form and display tags to dynamically display information based on form input. In the simplest application, you display form data directly in other form fields, but usually you pass form field data as parameters to CFC or JavaScript functions or CFM pages and use the results to control the display.
- The cfajaximport tag specifies the location of the JavaScript and CSS files that a ColdFusion page imports or to selectively import files required by specific tags. The ability to change the file location lets you support a wide range of configurations and use advanced techniques, such as application-specific styles.
For more information about the data and development features and how to use them, see "Using Ajax Data and Development Features".
User Interface tags and features
Several ColdFusion user interface elements incorporate Ajax features. The tags and tag-attribute combinations can be divided into the following categories:
- Container tags that lay out or display contents
- Forms tags that dynamically display data
- A menu tag that lets you create menu bars and pull-down menus
- User assistance features that provide tool tips and form completion
The following table lists the basic tags and attributes that display the Ajax-based features. For information on additional forms-specific features, see "Using Ajax form controls and features".
|
Tag/attribute |
Description |
|---|---|
|
Container tags |
|
|
cfdiv |
An HTML div region that can be dynamically populated by a bind expression. Forms in this region submit asynchronously. |
|
cflayout |
A horizontal or vertical box, a tabbed region, or a set of bordered regions that can include a top, bottom, left, right, and center regions. |
|
cflayoutarea |
An individual region within a cflayout area, such as the display that appears in a tabbed layout when the user select a tab. Forms in this region submit asynchronously. |
|
cfpod |
An area of the browser window with an optional title bar and a body that contains display elements. Forms in this region submit asynchronously. |
|
cfwindow |
A pop-up window within the browser. You can also use the ColdFusion.Window.createWindow function to create a pop-up window. Forms in this region submit asynchronously. |
|
Forms tags |
|
|
cfgrid format="html" |
A dynamic, editable, sortable, data grid. |
|
cfinput type="datefield" |
An input control that users can fill by selecting a date from a pop-up calendar. |
|
cftextarea richtext="yes" |
A text area with a set of controls that let users format the displayed text. |
|
cftree format="html" |
A dynamic, editable, tree-format representation of data. |
|
Menu tags |
|
|
cfmenu |
A menu bar or the root of a drop-down menu. |
|
cfmenuitem |
An individual item in a menu, or the root of a submenu. |
|
User assistance tags and attributes |
|
|
cfinput type="text" autosuggest=" |
A drop-down autofill suggestion box. As the user types, a list appears with completion suggestions based on the text the user has typed. |
|
cftooltip tag, and the tooltip attribute on cfinput, cfselect, cftextarea controls |
A textual description of a control or region that appears when the user hovers the mouse over the control or region. |
In addition to the tags and attributes, ColdFusion provides a number of JavaScript functions that let you control and manage the display. Many functions control the display of specific tags. For example, you can use JavaScript functions to dynamically display and hide the window. There are also several utility tags, such as the ColdFusion.getElementValue function that gets the value of a control attribute, or the ColdFusion.navigate function that displays the results of a URL in a container tag. For a complete list of all ColdFusion Ajax JavaScript functions, and detailed function descriptions, see "AJAX JavaScript Functions" in the CFML Reference.
Using ColdFusion Ajax UI features
ColdFusion Ajax UI features let you create data-driven pages that update dynamically without requiring multiple HTML pages or page refreshes or non-HTML display tools such as Flash forms. Many UI features use data binding to dynamically get data based on other data values: form field values, form control selections, and selections in Spry data sets.
ColdFusion Ajax UI controls and features can be divided into two major categories:
- Display layout
- Data interaction
Display layout controls include the cflayout, cfpod, and cfwindow controls. Some of the data interaction features include the HTML format cfgrid control, the cfmenu control, and dynamic autosuggest lists for text input controls. Most display layout and data interaction features can use data binding to dynamically interact with the user.
ColdFusion Ajax UI features are based on the Yahoo User Interface Library and the Ext JavaScript Library. Also, the cftextarea rich text editor is based on the FCKeditor text editor. In most situations, you require only ColdFusion tags and functions (including JavaScript functions) to create and manage the interface; however, advanced developers can modify the library code, particularly the CSS styles, to customize the controls in more complex ways.