
807
DEVELOPING
COLDFUSION 9 APPLICATIONS
Requesting and Presenting Information
Las
t
upda
te
d 8/5/2010
ColdFusion Ajax user interface 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.
Controlling Ajax user interface layout
The following layout tags let you dynamically control the display:
•
cfdiv
•
cflayout
•
cfpod
•
cfwindow
For information about how you can use these tags to submit form contents asynchronously, see “
Using Ajax containers
for form submission
” on page 820.
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 Ajax container tags, you can
use any type of bind expression to populate contents: CFC or JavaScript function, URL, or a string with bind
parameters. As a result, the
cfdiv
tag provides substantial flexibility in dynamically populating the page contents.
The
cfdiv
tag is also useful if you want a form to submit asynchronously. That is, whether or not you use a bind
expression to populate the tag. If you submit a form that is inside a
cfdiv
tag (including in HTML returned by a bind
expression), the form submits asynchronously. The response from the form submission populates the
cfdiv
region.
(The
cflayoutarea
,
cfwindow
, and
cfpod
tags have the same behavior.) For example, you could have a page with a
form that includes a list of artists, and lets you add artists. If the form is in a
cfdiv
tag, when the user submits the form,
the entire page is not refreshed, only the region inside the
cfdiv
tag. For an example of using container controls for
asynchronous forms, see “
Using Ajax containers for form submission
” on page 820.
One use case for a
cfdiv
tag is an application where a
cfgrid
tag displays an employee list. Details of the selected row
in the grid are displayed inside a
cfdiv
tag with a bind expression that specifies the
cfgrid
in a bind parameter. As
users click through different employees on the grid, they get the employee details in the
cfdiv
region.
The following simple example shows how you can use the
cfdiv
tag to get data using a bind expression. It uses binding
to display the contents of a text input field in an HTML div region. When a user enters text in the input box and tabs
out of it, or clicks another region of the application, the div region displays the entered text.
The cfdiv tag.cfm file, the main application file, has the following contents.
Содержание COLDFUSION 9
Страница 1: ...Developing Applications ADOBE COLDFUSION 9...