AboutWeb

1
Energizing Your Business On The Web
2
CFFORM Enhancements Presentation to MDCFUG Simon
Horwith, CIO
3
Overview

• Who Am I?
• General Overview Whats New with CFFORM in CFMX
  7?
• New Controls
• Tree, Select, Grid, Calendar
• New Formats
• Flash, XML
• New Layout Controls
• New Validation
• Form, CFParam, isValid(), scriptprotect
• New Look
• Skins, CSS
• Performance Considerations

BG Text
4
Who Am I?

• CIO AboutWeb, LLC
• Editor in Chief, ColdFusion Developers Journal
• Member of Team Macromedia
• Macromedia Certified Master Instructor

5
General Overview Whats new ?

• New Formats - Flash and Xforms
• New Controls Calendar, Flash Grids and Select
  boxes, DatePicker
• New Layout Model similar to Flex
• New Validation new validation types, new
  methods of validating, new CFParam functionality,
  new isValid() method, XSS prevention, AND
  CONSISTENCY!
• Support for CSS and Skins!
• New Performance Best Practices

6
New Controls

• CFTREE - Flash, XML, and data formats
• CFSELECT - Flash Format
• CFGRID Flash and XML Format
• CFCALENDAR
• Date Picker

7
New Formats

• Flash uses special edition of Flex 1.5
• XML (XForms) many XSLT templates out of the
  box, or write your own!
• ltCFFORMgt format attribute
• HTML Layout (Tables) not used in XML or Flash
  Forms

8
New Formats - Layout

• Label Attribute of form controls to define labels
• ltCFFORMGROUPgt groups controls ( - flash only)

Horizontal Vertical Hbox Vbox Fieldset Hdividedbox Vdividedbox Panel Tile Accordion Tabnavigator Page Repeater
9
New Formats Layout contd

• ltCFFORMGROUPgt tags can be nested to create
  complex layouts
• ltCFFORMITEMgt creates spaces, horizontal rules,
  vertical rules, and simple text output!
• Like ltCFFORMgt controls, these can be dynamically
  generated and attributes dynamically populated

10
New Layouts

• Pretty much every ltCFFORMgt control, including
  ltCFFORMGROUPgt and ltCFFORMITEMgt has attributes
• toolTip
• Visible
• enabled
• Height/width
• Style

11
New Validation

• Data validation types

Email URL Guid (MS DCE format) Uuid Maxlength Noblanks? Regex (regular_expression) SubmitOnce Date/USdate/Eurodate Time Float / numeric / integer Range Boolean Telephone Zipcode Creditcard Social sec. number
12
New Validation contd

• New Validation Locations
• Validateat
• onBlur
• onServer
• onSubmit
• New Events (work for most elements)

onValidate onError onKeyUp onKeyDown onMouseUp onMouseDown onChange onClick
13
New Validation contd

• Hidden Fields for Server-Side Validation

_cfformtelephone _cfformzipcode _cfformemail _cfformURL _cfformboolean _cfformUUID _cfformGUID _cfformnoblanks _cfformmaxlength _cfformregex, _cfformregular_expression _required, _cfformrequired _integer, _cfforminteger _cfformnumeric _float, _cfformfloat _range, _cfformrange _date, _cfformdate _cfformusdate _eurodate, _cfformeurodate _time, _cfformtime _cfformcreditcard _cfformSSN, _cfformsocial_security_number
14
New Validation contd

• You can now mask fields - VERY COOL
• A represents letters
• 9 represents numbers
• X represents alpha-numerics
• ? represents any other single character
• All other characters represent themselves

15
New Validation contd

• Flash forms support
• AS 2 in the onEvents and expose all of the
  control values as well as the AS 2 core libraries
• The ability to bind controls with their bind
  attribute. Bind in one control means its value
  derives from another when the other changes.
  Syntax for a typical bind formcontrol.text
• For more on the syntax, read the Flex and AS 2
  documentation
• http//livedocs.macromedia.com/flex/15/asdocs_en/a
  sdoc-title.html

16
New Validation contd

• ltCFPARAMgt - supports all the new datatypes AND
  xml,query,variableName,, has pattern, max, and
  min attributes
• ltCFPARAMgt will throw an exception if validation
  fails!
• New - isValid() function can be used to validate
  whether or not a value matches any of the
  datatypes supported by ltCFFORMgt and ltCFPARAMgt
• ltCFAPPLICATIONgt scriptprotect attribute
  prevents XSS (Cross-Site Scripting)

17
New Look

• ltCFFORMgt and its controls and layout tags
  support
• Skins
• XML forms supports about 10 skins and you can
  write your own using CSS and XSL!
• Flash supports about 4 or 5 halo skins
• CSS Styles
• XML shouls have full CSS 2 support
• Flash supports MOST CSS 1 and 2 (not positioning)
  and has several extra styles

18
Other neat stuff

• Now you can specify the locations of your skins
  (XML only skin), JS SRC (scriptSrc), and
  applet (codebase) document locations in
  ltCFFORMgt
• Default location for skins is cfusion-ear\cfusion-
  war\CFIDE\scripts\ (css and xsl subdirectories)
• ltCFFORMgt accessible attribute makes Flash
  screen reader accessible (adds 80K)
• Specify whether to show a preloader (Flash)
• Control Z-Index and transparency of Flash forms
  with wMode attribute window, transparent,
  opaque

19
Performance Considerations

• Generating Flash requires compilation
• To avoid recompilation, only make data dynamic
  not attributes or layout
• If you need to loop (not recommended for 10
  iterations or 5 elements) use ltCFFORMGROUP
  typerepeatergt
• Caching Data
• CF stores flash form values in memory when it
  generates a form
• ltCFFORMgt timeout is a number of seconds CF
  stores the data in memory
• If cache is expired or 0, the user receives data
  expired message and is asked to reload the page
• Set to 0 for sensitive data that shouldnt be
  cached

20
Ta-Da!

• The End!
• Feel free to email questions/comments to
  shorwith_at_aboutweb.com