
842
DEVELOPING
COLDFUSION 9 APPLICATIONS
Requesting and Presenting Information
Las
t
upda
te
d 8/5/2010
The following example template defines a title followed by text:
<Template title="Title and Text" image="template1.gif">
<Description>A Title followed by text.</Description>
<Html>
<![CDATA[
<h3>Type the title here</h3>
Type the text here
]]>
</Html>
</Template>
The name "Title and Text" and the template1.gif image appear in the template selection dialog box.
If you use a custom XML file, instead of fcktemplates.xml, to define your templates, specify the file path in the
templatesXML
attribute.
Defining custom skins
To create a custom skin that you specify in the
skin
attribute, create a subdirectory of the
cf_webRoot
/CFIDE/scripts/ajax/FCKeditor/editor/skins directory. The name of this subdirectory is the name that you
use to specify the skin in the
skin
attribute. The custom skin directory must contain an images subdirectory and have
the following files:
•
fck_editor.css
: Defines the main interface, including the toolbar, its items (like, buttons, panels) and the context menu.
•
fck_dialog.css
: Defines the basic structure of dialog boxes (standard for all dialogs).
•
fck_strip.gif
: Defines the Default toolbar buttons and context menu icons. It is a vertical image that contains all
icons placed one above the other. Each icon must correspond to a 16x16 pixels image. You can add custom images
to this strip.
•
images/toolbar.buttonarrow.gif:
Defines the small arrow image used in the toolbar combos and panel buttons.
Place all other images used by the skin (that are specified in the CSS files) in the images subfolder.
The most common way of customizing the skin is to change the fck_editor.css and fck_dialog.css files. For information
on the skin format and contents, see the comments in those files.
Using the datefield input control
The HTML
cfinput
control with a type value of
datefield
lets users select dates from a pop-up calendar or enter
the dates directly in the input box. When you use the control, keep in mind the following considerations:
•
To correctly display label text next to the control in both Internet Explorer and Firefox, surround the label text in
a
<div style="float:left;">
tag and place three
<br>
tags between each line.
•
Consider specifying an
overflow
attribute with a value of
visible
in the
cflayoutarea
tag so that if the pop-up
calendar exceeds the layout area boundaries, it appears completely.
•
If you use a
mask
attribute to control the date format, it does not prevent the user from entering dates that do not
conform to the mask. The
mask
attribute determines the format for dates that users select in the pop-up calendar.
Also, if the user types a date in the field and opens the pop-up calendar, the calendar displays the selected date only
if the entered text follows the mask pattern. If you do not specify a
mask
attribute, the pop-up only matches the
default matching pattern.
•
If the user types a date with a month name or abbreviation in the control, instead of picking a date from the
calendar, the selected date appears in the pop-up calendar only if both of the following conditions are true:
•
The month position and name format match the mask pattern.