Using Flash Forms - macromedia COLDFUSION MX 7 Web Application Construction Kit [Electronic resources] نسخه متنی

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی

macromedia COLDFUSION MX 7 Web Application Construction Kit [Electronic resources] - نسخه متنی

Ben Forta, Raymond Camden, Leon Chalnick, Angela Buraglia

| نمايش فراداده ، افزودن یک نقد و بررسی
افزودن به کتابخانه شخصی
ارسال به دوستان
جستجو در متن کتاب
بیشتر
تنظیمات قلم

فونت

اندازه قلم

+ - پیش فرض

حالت نمایش

روز نیمروز شب
جستجو در لغت نامه
بیشتر
لیست موضوعات
توضیحات
افزودن یادداشت جدید





  • Using Flash Forms


    Anyone who has spent time online has encountered Macromedia Flash. Be it animated site intros, pop-up advertisements, video, or games, Flash is ubiquitous. In fact, you'd be hard pressed to find any computer that doesn't have a Flash player installed.

    And while Flash is indeed used for design work and animation, the Flash player is capable of much more. But first, some basics.

    A Brief Introduction to Flash


    Before we go any further, a brief introduction to Flash is in order, and we'll start by clearing up some confusion in names and terminology.

    • Flash applications (often called movies) are run in a special environment called the Flash Player. This is free software available from Macromedia (the single most installed piece of software on the Internet) and it's available for all major computing platforms (and lots of less-used platforms, too). Within the Flash Player, all platforms and devices look the same. This makes it possible for Flash developers to create applications that run identically on Windows machines, Linux boxes, and Macs. End users typically don't pay a whole lot of attention to the Flash Player itself since their Web browsers load the player as needed, creating the impression that the Flash application is running in the browser.

    • The Flash application (which is run within the Flash Player) is called a SWF file (usually pronounced swiff). When Flash developers build applications, what they end up with is a SWF file (which can be embedded in Web pages, for example).

    • Flash is a tool, a development environment for creating Flash movies. Flash users work with assets (images, icons, sounds, etc.) and manipulate them in the Flash development environment (using timing sequences and/or ActionScript code) to create an application. Flash users create a work file (called a FLA file), and when they have finished their development, they create a SWF from that FLA file.

    • It's also possible to create applications using a server product called Macromedia Flex. Flex developers write Flash applications in code (instead of using the interactive Flash IDE), using a combination of MXML (an XML language) and ActionScript. These files are compiled and a SWF file is created.


    To summarize: Flash is a tool and Flex is a server, and both are used to create SWF files that run inside a Flash Player. If you want to create Flash applications, you'll need a copy of Macromedia Flash or Macromedia Flex, depending on the type of application you're building, and how you will go about building it.

    NOTE

    Users often use the term Flash to refer to the player on the actual SWF. Technically this is inaccurate, Flash is the IDE used to create Flash applications.

    Introducing Flash Forms


    So what has all of this got to do with ColdFusion? Flash applications can be embedded in any Web pages, including pages generated by ColdFusion. If you were to create a Flash animation using Macromedia Flash, for example, you could embed it in the generated page so that it would be displayed within the browser. Similarly, applications created using Macromedia Flex could integrate with ColdFusion applications.

    But it's also possible to leverage Flash without owning Macromedia Flash or Macromedia Flex, and without writing anything more than CFML code. ColdFusion has the ability to write Flash for you, allowing you to use CFML tags to create complete Flash applications. These aren't general-purpose applications; only a very specific type of Flash application can be created this way, namely forms. Using the same <cfform> and <cfinput> used previously, ColdFusion can do the following:

    1. Generate ActionScript code to create your form

    2. Compile that ActionScript code into a SWF

    3. Embed the SWF in your ColdFusion-generated page

    In other words, by using ColdFusion you can build forms that leverage the power and usability of Flash while retaining the development experience that is uniquely ColdFusion.

    Getting Started With Flash Forms


    Back in Chapter 14, "Using Forms to Add or Change Data," we created a form to add and edit movie listings. One of the fields in the form prompted for a date (the movie release date), and validation was used to ensure that only valid (and correctly specified) dates were entered. This is the code used in that example:


    <tr>
    <td>
    Release Date:
    </td>
    <td>
    <cfinput type="Text"
    name="DateInTheaters"
    value="#DateInTheaters#"
    message="RELEASE DATE must be a valid date!"
    required="NO"
    validate="date"
    validateAt="onSubmit,onServer"
    size="10"
    maxlength="10">
    </td>
    </tr>

    The field itself, like all the form fields created thus far, is formatted usin262 tables. The field label is in one row cell, and next to it is a <cfinput> tag (which generates a269 <input> tag). validate="date" is used to ensure that a date is entered, and validation is checked both onSubmit and onServer.

    That works. If a user entered an invalid date (or something other than a date) the code would display the error text specified in attribute message. But is that really the ideal scenario? Wouldn't it be better to ensure that only a validate date is entered in the first place? If the user were able to select a date from a calendar control, wouldn't that be preferable?

    This is where ColdFusion-generated Flash Forms can in handy. Let's look at an example. Listing 15.1 contains a simple Flash Form. Save it (in folder 15) and execute it to see a form like the one shown in Figure 15.1.

    Listing 15.1. flash2.cfmBasic Flash Form


    <!---
    Name: flash2.cfm
    Author: Ben Forta (ben@forta.com)
    Description: Flash form example
    Created: 12/22/04
    --->
    <cfform format="flash" action="formdump.cfm">
    <cfinput name="DateInTheaters"
    label="Release Date"
    type="text"
    width="150">
    <cfinput name="btnSubmit"
    type="submit"
    value="Process">
    </cfform>

    Figure 15.1. Flash Forms are displayed in the Web browser, but are actually running within the Flash Player loaded invisibly by the browser.

    [View full size image]

    When experimenting with forms, it helps to have a generic page that any forms can be sent to. Listing 15.2 contains code that simply dumps any form values (using <cfdump var="#FORM#">). We'll use formdump.cfm as the action for the forms created here, but in your own applications you'd obviously submit the forms to real action pages (as seen previously).

    Listing 15.2. formdump.cfmGeneric Form Action Page


    <!---
    Name: formdump.cfm
    Author: Ben Forta (ben@forta.com)
    Description: Dump submitted form values
    Created: 12/22/04
    --->
    <!--- Dump FORM scope --->
    <cfdump var="#FORM#">

    The <cfform> code in name attribute is optional, and is usually omitted in buttons (for example). In Flash Forms name is always required, and must be specified.

    For example, modify the first <cfinput> changing type="text" to type="datefield", like this:


    <cfinput name="DateInTheaters"
    label="Release Date"
    type="datefield"
    width="150">

    Save the changes and reload the page in your browser. When you click on the field a calendar will be displayed, like the one in Figure 15.2.

    Figure 15.2. Flash Forms support invaluable additional field types not supported by HTML forms.

    [View full width]

    <script type="text/javascript"
    src="/CFIDE/scripts/cfform.js"></script>
    <script type="text/javascript"
    src="/CFIDE/scripts/masks.js"></script>
    <script type="text/javascript"
    charset='utf-8' src='/CFIDE/scripts/cfformhistory.js'></script>
    <noscript>
    <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
    id='CFForm_1'
    codebase='http://download.macromedia.com/pub/
    shockwave/cabs/flash/swflash.cab#version=7,0
    ,14,0'
    width='100%'

    height='100%'>
    <param name='src' value='/ows/15/755741585.mxml.cfswf'/>
    <param name='wMode' value='Window'/>
    <param name='flashVars'
    value='%5F%5FCFForm%5F1%5Fcacheid=8176A95F%2D96B6%2D0778
    %2D4CC222AAC38EF447'/>
    </object>
    </noscript>
    <script type="text/javascript" charset='utf-8'>
    document.write("<object classid='clsid:D27
    CDB6E-AE6D-11cf-96B8-444553540000'
    codebase='http://download.macromedia.com/pub/shockwave/
    cabs/flash/swflash.cab#version=7,0
    ,14,0' width='100%' height='100%'> ");
    document.write(" <param name='src' value='/ows/15/
    755741585.mxml.cfswf'/>");
    document.write(" <param name='wMode'
    value='Window'/>");document.write(" <param
    name='flashVars' value='historyUrl=%2FCFIDE%2Fscripts
    %2Fcfformhistory%2Ecfm%3F&lconid=" +
    lc_id +"&%5F%5FCFForm
    %5F1%5Fcacheid=8176A95F%2D96B6%2D0778
    %2D4CC222AAC38EF447'/>");
    document.write("</object>");
    </script>
    <script type="text/javascript" charset='utf-8'>
    document.write("<br><iframe src='/CFIDE/scripts/
    cfformhistory.cfm' name='_history'
    frameborder='0' scrolling='no' width='22'
    height='0'></iframe></br>");
    </script>

    The most important thing to keep in mind here is that Flash Forms are designed to be a plug-in replacement fo273 forms. Forms are still submitted to action pages, and (as you'd have seen if you submitted the example in

    Flash Forms Controls


    You've seen an example of a datefield control. But what other control types are supported? <input ty pe="submit">.

    Calendar

    <cfcalendar>

    Not supported i269. Function ally equivalent to <cfinput type="datefield"> but calendar is open and no text field is displayed.

    Check Box

    <cfinput type="checkbox">

    Functions just lik260 <input type="checkbox">, but name must be unique in each.

    Combo Box

    <cfselect editable="true">

    Not supported i269.

    Data Grid

    <cfgrid>

    Not supported i269.

    Date Field

    <cfinput type="datefield">

    Not supported i269.

    Password

    <cfinput type="password">

    Functions just lik260 <input type="password">.

    Select

    <cfselect>

    Functions just lik260 <select>.

    Text

    <cfinput type="text">

    Functions just lik260 <input type="text">.

    Textarea

    <cftextarea>

    Functions just lik260 <textarea>.

    NOTE

    The controls lists here are the ones supported by Flash Forms, and it isn't possible to create your own controls for use with this feature. If you need to create customer controls, you will need to use Macromedia Flash or Macromedia Flex instead of ColdFusion-generated Flash Forms.

    You've already seen an example of type="datefield", so let's look at a couple of other controls unique to Flash Forms.

    <cfgrid> is used to create data grids, two-dimensional spreadsheet type views of data as seen in Figure 15.3.

    Figure 15.3. Flash Forms Data Grids make it easy to display multiple rows in a single scrollable grid.

    [View full size image]

    Listing 15.3 contains the code that created the grid seen in Figure 15.3.

    Listing 15.3. grid1.cfmA Flash Grid Example


    <!---
    Name: grid1.cfm
    Author: Ben Forta (ben@forta.com)
    Description: Flash data grid example
    Created: 12/22/04
    --->
    <!--- Get movie l0069st --->
    <cfinvoke component="ows.14.movies"
    method="list"
    returnvariable="movies">
    <!--- Display data grid --->
    <cfform format="flash">
    <!--- Data grid --->
    <cfgrid name="gridMovies"
    query="movies"
    height="400" />
    </cfform>

    Chapter 14) to obtain a list of movies. It then created a Flash Form and used a single control, <cfgrid>: it is named, a query is passed to it, and a height is specified. The generated grid can be scrolled (using the scroll bar on the right), sorted (by clicking on column headers; click again to sort descending), and columns may be resized (drag the vertical line between columns).

    This is a read-only grid; it could be used for browsing data, as well as for record selection. To allow record editing via <cfgrid>, the grid selectmode must be specified. Listing 15.4 is a modified version of Listing 15.3, this time allowing editing (as well as rows inserting and deletion). The code generates a screen like the one seen in Figure 15.4.

    Listing 15.4. grid2.cfmAn Editable Flash Grid Example


    <!---
    Name: grid2.cfm
    Author: Ben Forta (ben@forta.com)
    Description: Flash editable data grid example
    Created: 12/22/04
    --->
    <!--- Get movie list --->
    <cfinvoke component="ows.14.movies"
    method="list"
    returnvariable="movies">
    <!--- Display data grid --->
    <cfform format="flash" action="formdump.cfm">
    <!--- Data grid --->

    <cfgrid name="gridMovies"
    selectmode="edit"
    query="movies"
    insert="yes"
    delete="yes"
    height="400" />
    </cfform>

    Figure 15.4. Flash Forms Data Grids can be used to edit rows, as well as to insert and delete rows.

    Appendix B for more on these tags.

    Another useful Flash control, one not available i269, is the tree control. Tree controls are useful for displaying large amounts of hierarchical data, as seen in Figure 15.5.

    Figure 15.5. Flash Forms tree controls are used for the display the selection of hierarchical data.

    [View full size image]

    Listing 15.5 contains the code used to create the tree seen in Figure 15.5.

    Listing 15.5. TRee.cfmA Flash Tree Example


    <!---
    Name: tree.cfm
    Author: Ben Forta (ben@forta.com)
    Description: Flash tree example
    Created: 12/22/04
    --->
    <!--- Get movies by rating --->
    <cfquery datasource="ows" name="movies">
    SELECT Rating, MovieTitle, FilmID
    FROM Films, FilmsRatings
    WHERE Films.RatingID = FilmsRatings.RatingID
    ORDER BY Rating, MovieTitle
    </cfquery>
    <cfform format="flash">
    <!--- Define tree control --->
    <cftree name="treeMovie"
    height="400"
    width="500">
    <!--- Specify tree data --->
    <cftreeitem query="Movies"
    value="Rating,FilmID"
    display="Rating,MovieTitle">
    </cftree>
    </cfform>

    Appendix B.

    Within a <cfform format="flash"> any HTML tags or plain text are ignored. This means that you can't use <br> for line breaks, <table> tags for layout, <font> <a> for links, and the like. But what if you need to embed literal text, or images or links or the like? To do this you need to use a tag named <cfformitem>, which lets you embed non-controls in Flash Forms.

    Embe259 text in form, text is specified between <cfformitem type="html"> and </cfformitem> tags, supports only the followin262 tags: <a>, <b>, <br>, <font>, <i>, <img>, <li>, <p>, <textformat>, <u>.

    spacer

    Space between controls.

    text

    Displays text in form, text is specified between <cfformitem type="text"> and </cfformitem> tags.

    vrule

    Vertical line.

    Chapter 14 (feel free to copy that file as a starting point). Figure 15.6 shows the Flash Form generated by this code.

    Listing 15.6. flash2.cfmA Complete Flash Form


    <!---
    Name: flash2.cfm
    Author: Ben Forta (ben@forta.com)
    Description: Flash form example
    (based on 14/movie_edit.cfm
    Created: 12/22/04
    --->
    z<!--- Check that FilmID was provided --->
    <!--- If yes, edit, else add --->
    <cfset EditMode=IsDefined("URL.FilmID")>
    <!--- If edit mode then get row to edit --->
    <cfif EditMode>
    <!--- Get the film record --->
    <cfinvoke component="ows.14.movies"
    method="get"
    filmid="#URL.FilmID#"
    returnvariable="film">
    <!--- Save to variables --->
    <cfset MovieTitle=Trim(film.MovieTitle)>
    <cfset PitchText=Trim(film.PitchText)>
    <cfset AmountBudgeted=Int(film.AmountBudgeted)>
    <cfset RatingID=film.RatingID>
    <cfset Summary=Trim(film.Summary)>
    <cfset ImageName=Trim(film.ImageName)>
    <cfset DateInTheaters=DateFormat(film.DateInTheaters, "MM/DD/YYYY")>
    <!--- Form text --->
    <cfset FormTitle="Update a Movie">
    <cfset ButtonText="Update">
    <cfelse>
    <!--- Save to variables --->
    <cfset MovieTitle=">
    <cfset PitchText=">
    <cfset AmountBudgeted=">
    <cfset RatingID=">
    <cfset Summary=">
    <cfset ImageName=">
    <cfset DateInTheaters=">
    <!--- Form text --->
    <cfset FormTitle="Add a Movie">
    <cfset ButtonText="Insert">
    </cfif>
    <!--- Get ratings --->
    <cfinvoke component="ows.14.movies"
    method="getRatings"
    returnvariable="ratings">
    <!--- Page header --->
    <cfinclude template="../14/header.cfm">
    <!--- Add/update movie form --->
    <cfform format="flash" action="formdump.cfm">
    <cfif EditMode>
    <!--- Embed primary key as a hidden field --->
    <cfinput type="hidden" name="FilmID" value="#Film.FilmID#">
    </cfif>
    <cfinput type="Text"
    label="Movie:"
    name="MovieTitle"
    value="#MovieTitle#"
    message="MOVIE TITLE is required!"
    required="Yes"
    validateAt="onSubmit,onServer"
    size="50"
    maxlength="100">
    <cfinput type="Text"
    label="Tag Line:"
    name="PitchText"
    value="#PitchText#"
    message="TAG LINE is required!"
    required="Yes"
    validateAt="onSubmit,onServer"
    size="50"
    maxlength="100">
    <cfselect name="RatingID"
    label="Rating:"
    query="ratings"
    value="RatingID"
    display="Rating"
    selected="#VARIABLES.RatingID#" />
    <cftextarea label="Summary:"
    name="summary"
    cols="40"
    rows="5"
    wrap="virtual"><cfoutput>#Summary#</cfoutput></cftextarea>
    <cfinput type="Text"
    label="Budget:"
    name="AmountBudgeted"
    value="#AmountBudgeted#"
    message="BUDGET must be a valid numeric amount!"
    required="NO"
    validate="integer"
    validateAt="onSubmit,onServer"
    size="10"
    maxlength="10">
    <cfinput type="DateField"
    label="Release Date:"
    name="DateInTheaters"
    value="#DateInTheaters#"
    message="RELEASE DATE must be a valid date!"
    required="NO"
    validate="date"
    validateAt="onSubmit,onServer"
    size="10"
    maxlength="10">
    <cfinput type="Text"
    label="Image File:"
    name="ImageName"
    value="#ImageName#"
    required="NO"
    size="20"
    maxlength="50">
    <cfinput type="submit"
    name="BtnSubmit"
    value="#ButtonText#">
    </cfform>
    <!--- Page footer --->
    <cfinclude template="../14/footer.cfm">

    Figure 15.6. Flash Forms can be complete replacements fo273 forms.

    Chapter 14, with the exception of the <cfinvoke> and <cfinclude> tags, which have been modified to access the 14 folder.

    The <cfform> tag has been changed so that it contains format="flash" telling ColdFusion to generate a Flash Form. All <table> <tr> and <td> tags have been removed as they would be ignored in a Flash Form anyway. Every <cfinput> now has a label (instead of the label previously displayed in 256 table cell), the Release Date field has been changed to type="datefield", <textarea> has been changed to a <cftextarea>, and the submit button has now been named.

    Chapter 14 is used unchanged, even though the client-side validation in Flash Forms is using ActionScript (instead of JavaScript), the same attributes and values work, and ColdFusion does all the hard work for you.

    NOTE

    On260 form control type not supported by Flash Forms is <input type="file">, which is used to upload files. File system access isn't allowed by the Flash Player (this is a security restriction), so this field type can't be supported by ColdFusion-generated Flash Forms.

    Managing Form Layout


    As seen in Figure 15.6, Flash Forms automatically list form controls vertically, one on top of the other, aligning fields so that the labels are all lined up properly. To change this behavior, and for greater control over form layout, the <cfformgroup> tag is used.

    Figure 15.7 shows two calendars displayed side by side, with text above each. This layout requires the use of nested <cfformgroup> tags as seen in Listing 15.7.

    Listing 15.7. flash3.cfmFlash Layout Example


    <!---
    Name: flash3.cfm
    Author: Ben Forta (ben@forta.com)
    Description: Horizonal layout example
    Created: 12/22/04
    --->
    <cfform format="flash" action="formdump.cfm">
    <cfformgroup type="horizontal">
    <cfformgroup type="vertical">
    <cfformitem type="text">Movie Release</cfformitem>
    <cfcalendar name="releaseDate">
    </cfformgroup>
    <cfformgroup type="vertical">
    <cfformitem type="text">Release on DVD</cfformitem>
    <cfcalendar name="videoDate">
    </cfformgroup>
    </cfformgroup>
    </cfform>

    Figure 15.7. <cfformgroup> is used to control layout in Flash Forms.

    [View full size image]

    Listing 15.7 uses a <cfformgroup type="horizontal"> to place the calendars side by side. But this would also place the text Movie Release and Release on DVD horizontally too, and so within the horizontal layout are two additional groupings defined as <cfformgroup type="vertical"> so that the text appears above each calendar.

    You've now seen two types of <cfforggroup>, Table 15.3 lists all the types supported.

    Table 15.3. <cfformgroup> Types

    TYPE

    DESCRIPTION

    accordion

    Places child pages within a vertical accordion control. Use <cfformgroup type="page"> to define the child pages.

    hbox

    Align horizontally. Use only with nested groups and not for form controls.

    hdividedbox

    Align horizontally and allow box resizing. Use only with nested groups and not for form controls.

    horizontal

    Align horizontally.

    panel

    Creates a box containing other controls, with a label on a title bar.

    page

    Creates child pages within accordion and tab controls.

    repeater

    Crates child containers dynamically for each item within a query.

    tabnavigator

    Places child pages within a tabbed control. Use <cfformgroup type="page"> to define the child pages.

    tile

    Places child controls in a grid.

    vbox

    Align vertically. Use only with nested groups and not for form controls.

    vdividedbox

    Align vertically and allow box resizing. Use only with nested groups and not for form controls.

    vertical

    Align vertically.

    Look at the screens seen in Figures 15.8 and 15.9. They contain the same edit screen created in Listing 15.6 (Listing 15.6) but with the fields split over two tabs. This type of presentation is ideal for long forms.

    Figure 15.8. Tab Navigators are used to break up long forms.

    [View full size image]

    Figure 15.9. Each tab in a Tab Navigator is labeled, and that label is displayed above the respective tab.

    [View full size image]

    Listing 15.8 contains the code used to create the screens seen in Figure 15.8 and 15.9.

    Listing 15.8. flash4.cfmTab Navigator Example


    <!---
    Name: flash4.cfm
    Author: Ben Forta (ben@forta.com)
    Description: Flash form example
    (based on 14/movie_edit.cfm
    Created: 12/22/04
    --->
    <!--- Check that FilmID was provided --->
    <!--- If yes, edit, else add --->
    <cfset EditMode=IsDefined("URL.FilmID")>
    <!--- If edit mode then get row to edit --->
    <cfif EditMode>
    <!--- Get the film record --->
    <cfinvoke component="ows.14.movies"
    method="get"
    filmid="#URL.FilmID#"
    returnvariable="film">
    <!--- Save to variables --->
    <cfset MovieTitle=Trim(film.MovieTitle)>
    <cfset PitchText=Trim(film.PitchText)>
    <cfset AmountBudgeted=Int(film.AmountBudgeted)>
    <cfset RatingID=film.RatingID>
    <cfset Summary=Trim(film.Summary)>
    <cfset ImageName=Trim(film.ImageName)>
    <cfset DateInTheaters=DateFormat(film.DateInTheaters, "MM/DD/YYYY")>
    <!--- Form text --->
    <cfset FormTitle="Update a Movie">
    <cfset ButtonText="Update">
    <cfelse>
    <!--- Save to variables --->
    <cfset MovieTitle=">
    <cfset PitchText=">
    <cfset AmountBudgeted=">
    <cfset RatingID=">
    <cfset Summary=">
    <cfset ImageName=">
    <cfset DateInTheaters=">
    <!--- Form text --->
    <cfset FormTitle="Add a Movie">
    <cfset ButtonText="Insert">
    </cfif>
    <!--- Get ratings --->
    <cfinvoke component="ows.14.movies"
    method="getRatings"
    returnvariable="ratings">
    <!--- Page header --->
    <cfinclude template="../14/header.cfm">
    <!--- Add/update movie form --->
    <cfform format="flash" action="formdump.cfm">
    <cfif EditMode>
    <!--- Embed primary key as a hidden field --->
    <cfinput type="hidden" name="FilmID" value="#Film.FilmID#">
    </cfif>
    <!--- Start tab navigator --->
    <cfformgroup type="tabnavigator">
    <!--- 1st page --->
    <cfformgroup type="page" label="Movie">
    <cfinput type="Text"
    label="Movie:"
    name="MovieTitle"
    value="#MovieTitle#"
    message="MOVIE TITLE is required!"
    required="Yes"
    validateAt="onSubmit,onServer"
    size="50"
    maxlength="100">
    <cfinput type="Text"
    label="Tag Line:"
    name="PitchText"
    value="#PitchText#"
    message="TAG LINE is required!"
    required="Yes"
    validateAt="onSubmit,onServer"
    size="50"
    maxlength="100">
    <cfselect name="RatingID"
    label="Rating:"
    query="ratings"
    value="RatingID"
    display="Rating"
    selected="#VARIABLES.RatingID#" />
    <cfinput type="Text"
    label="Budget:"
    name="AmountBudgeted"
    value="#AmountBudgeted#"
    message="BUDGET must be a valid numeric amount!"
    required="NO"
    validate="integer"
    validateAt="onSubmit,onServer"
    size="10"
    maxlength="10">
    <cfinput type="DateField"
    label="Release Date:"
    name="DateInTheaters"
    value="#DateInTheaters#"
    message="RELEASE DATE must be a valid date!"
    required="NO"
    validate="date"
    validateAt="onSubmit,onServer"
    size="10"
    maxlength="10">
    <cfinput type="Text"
    label="Image File:"
    name="ImageName"
    value="#ImageName#"
    required="NO"
    size="20"
    maxlength="50">
    <!--- End of 1st page --->
    </cfformgroup>
    <!--- 2nd page --->
    <cfformgroup type="page" label="Summary">
    <cftextarea label="Summary:"
    name="summary"
    cols="60"
    rows="11"
    wrap="virtual"><cfoutput>#Summary#</cfoutput></cftextarea>
    <!--- End of 1st page --->
    </cfformgroup>
    <!--- End of tab navigator --->
    </cfformgroup>
    <cfinput type="submit"
    name="BtnSubmit"
    value="#ButtonText#">
    </cfform>
    <!--- Page footer --->
    <cfinclude template="../14/footer.cfm">

    The code in Listing 15.8 uses the following line of code to define the tab navigator control:


    <cfformgroup type="tabnavigator">

    Within the tab navigator, two pages are defined. The first:


    <cfformgroup type="page" label="Movie">

    contains all of the movie data besides the summary text field which is now placed in the second page:


    <cfformgroup type="page" label="Summary">

    The submit button isn't within either page, so it appears at the bottom of both pages (it's outside of the tab navigator).

    Figure 15.10 shows another version of this interface, this time using an accordion control (vertical page scrolling instead of tabs). To create this screen, simply change the line:


    <cfformgroup type="tabnavigator">

    Figure 15.10. For vertical page scrolling use <cfformgroup type="accordion">.

    [View full size image]

    so that is reads:


    <cfformgroup type="accordion">

    NOTE

    The tab navigator and accordion controls are intelligent controls. They can detect the browser Back and Forward buttons and will move back and forwards between control pages rather than entire Web pages.

    Controlling Form Appearance


    You probably noticed that all the Flash Forms created thus far have a similar color and look. This is the Macromedia "Halo" look, and it's the default used by ColdFusion-generated Flash Forms. It's implemented as a skin. The following skins are supported:

    • haloBlue

    • haloGreen (the default)

    • haloOrange

    • haloSilver


    To specify an alternate skin, use the <cfform> skin attribute, as follows:


    <cfform format="flash"
    action="formdump.cfm"
    skin="haloOrange">

    NOTE

    It isn't possible to define your own skins, although this functionality may be added in the future. However, form appearance can still be controlled using style attributes as explained below.

    For more granular control, style values may be used. Style values may be specified at various levels:

    • In the <cfform> tag, in which case the style will apply to all form groups and controls unless overridden at the group or control level.

    • In <cfformgroup> tag, in which case the style will apply to all controls unless within the group overridden at the control level.

    • In specific controls.


    style names and values are modeled o269 CSS styles, and Flash controls supports lots (although not all) of the styles supported by CSS. Styles are specified as name:value pairs divided by semicolons, as seen in this snippet:


    <cfinput type="text"
    name="title"
    label="Movie Title"
    style="fontSize:12; backgroundColor:##FF9900">

    TIP

    When specifying RGB values, or any text containing # chars, be sure to escape # characters as ##.

    NOTE

    A full list of all supported styles is beyond the scope of this book. Refer to the online Flash and Flex documentation at http://livedocs.macromedia.com , or consult any book on Flash or Flex controls.

    NOTE

    Unlike CSS styles, which may be defined externally and linked to, Flash styles must be specified inline.

    Using Data Bindings


    In addition to the controls, layout, and consistency advantages of Flash Forms, there is one other very important feature that must be mentioned. Binding allows controls to be connected to each other, so that they are aware of values or changes in other controls and can react or change accordingly.

    Using bindings requires referring to other controls and properties within them. These are specified using ActionScript syntax (as the bindings you create are executed in the Flash Player). ActionScript uses { and } to delimit expressions (in much the same way as ColdFusion uses #).

    Listing 15.9 is a simple binding example.

    Listing 15.9. flash5.cfmSimple Binding Example


    <!---
    Name: flash5.cfm
    Author: Ben Forta (ben@forta.com)
    Description: Simple binding example
    Created: 12/22/04
    --->
    <cfform format="flash" action="formdump.cfm">
    <cfcalendar name="releaseDate">
    <cfinput name="displayDate"
    type="text"
    label="You selected:"
    bind="{releaseDate.selectedDate}">
    </cfform>

    Listing 15.9 defines two controls, a calendar and a text field. The text field contains the following binding:


    bind="{releaseDate.selectedDate}"

    This tells Flash to bind the text field to the calendar, populating the text field with whatever the currently selected date is in the calendar. releaseDate.selectedDate means the selectedDate in the control named releaseDate, as seen in Figure 15.11.

    Figure 15.11. Bindings are used to link controls so that changes in one impact another.

    [View full size image]

    Bindings like this can be made between all sorts of controls, even controls on different pages within an accordion or tab navigator. To refer to values in other controls you need to use the syntax listed in Table 15.4 (replacing control with the name of the actual control).

    Table 15.4. Control Bind Sources

    CONTROL

    SOURCE

    <cfcalendar> and <cfinput type="datefield"> selected date

    {control.selecteddate}

    <cfgrid> selected item

    {control.selectedItem.COLUMN}

    <cfinput>

    {control.text}

    <cfinput> selected radio button

    {control.selectedData}

    <cfselect> selected item

    {control.selectedItem.data}

    <cftextarea>

    {control.text}

    <cftree> selected item

    {control.selectedNode.getProperty('data').value}

    Here's another more complete (and more complex) binding example. As seen in Figure 15.12, this screen displays a grid containing movie information (just the MovieTitle and PitchText columns). As any movie is selected, its details are displayed in <cfinput> fields where they can be edited. The code for this example is Listing 15.10.

    Listing 15.10. flash6.cfmComplete Binding Example


    <!---
    Name: flash6.cfm
    Author: Ben Forta (ben@forta.com)
    Description: Flash data binding example
    Created: 12/22/04
    --->
    <!--- Get movie list --->
    <cfquery datasource="ows" name="movies">
    SELECT *
    FROM Films
    ORDER BY MovieTitle
    </cfquery>
    <!--- Display data grid --->
    <cfform format="flash" action="formdump.cfm">
    <!--- Data grid --->
    <cfgrid name="gridMovies"
    query="movies"
    rowheaders="no"
    height="200">
    <!--- Don't show all coluns --->
    <cfgridcolumn name="MovieTitle" header="Title">
    <cfgridcolumn name="PitchText" header="Tag Line">
    </cfgrid>
    <!--- Input fields --->
    <cfinput type="text"
    name="MovieTitle"
    label="Title:"
    bind="{gridMovies.dataProvider[gridMovies.selectedIndex]
    ['MovieTitle']}"
    onChange="gridMovies.dataProvider.
    editField(gridMovies.selectedIndex,
    'MovieTitle',
    MovieTitle.text);">
    <cfinput type="text"
    name="PitchText"
    label="Tag Line:"
    bind="{gridMovies.dataProvider[gridMovies.selectedIndex]
    ['PitchText']}"
    onChange="gridMovies.dataProvider.
    editField(gridMovies.selectedIndex,
    'PitchText',
    PitchText.text);">
    <cfinput type="text"
    name="AmountBudgeted"
    label="Amount Budgeted:"
    bind="{gridMovies.dataProvider[gridMovies.selectedIndex]
    ['AmountBudgeted']}"
    onChange="gridMovies.dataProvider.
    editField(gridMovies.selectedIndex,
    'AmountBudgeted',
    AmountBudgeted.text);">
    <cfinput type="text"
    name="ImageName"
    label="Image File:"
    bind="{gridMovies.dataProvider[gridMovies.selectedIndex]
    ['ImageName']}"
    onChange="gridMovies.dataProvider.
    editField(gridMovies.selectedIndex,
    'ImageName',
    ImageName.text);">
    <cftextarea name="Summary"
    label="Summary:"
    rows="10"
    bind="{gridMovies.dataProvider[gridMovies.selectedIndex]
    ['Summary']}"
    onChange="gridMovies.dataProvider.
    editField(gridMovies.selectedIndex,
    'Summary',
    Summary.text);" />
    <cfinput name="submitButton"
    type="submit"
    value="Save">
    </cfform>

    Figure 15.12. Combining bindings with events allows for complete control over form interaction.

    [View full size image]

    Listing 15.9 requires some explanation. It starts with a query to obtain movie information. The data is used to populate a grid (as seen previously), but instead of displaying all columns a pair of <cfgridcolumn> tags is used to explicitly list the desired columns (and to give them alternate headers, as database column names seldom make readable headings).

    Then comes the list of <cfinput> tags and a single <cftextarea> tags. Each of these tags contains two new attributes, bind and onChange. The former binds each field to the appropriate column in the grid (even columns not shown); the latter ensures that changes made in the input fields are populated back to the data grid. Let's look at the first example:


    bind="{gridMovies.dataProvider[gridMovies.selectedIndex]['MovieTitle']}"

    dataProvider is the grid property that contains the data that was passed to the grid, our query. dataProvider is a two-dimensional data type; to extract data from it you need the row and column. selectedIndex is another grid property; this one returns the number of the row currently selected, for row 5 [gridMovies.selectedIndex] will become [5]. With the row number returned by selectedIndex and the row name specified, the actual value for a specific column in a specific row can be returned. As as it's bound to an input field, that value is displayed.

    If a value is edited in an input field, the grids dataProvider must be updated (so that the grid is updated). Here is the code used to perform this update:


    onChange="gridMovies.dataProvider.editField(gridMovies.selectedIndex,
    'MovieTitle',
    MovieTitle.text);">

    onChange is an event; whenever anything changes in the field the event code will be executed automatically. gridMovies.dataProvider.editField is a method, the editField method in the grid dataProvider. This method requires three parameters be passed to it: the row to update is specified as gridMovies.selectedIndex, the column to update is specified as the column name, and the new value is specified as MovieTitle.text.

    This same logic is used for each of the input fields, and the result is the interface seen in Figure 15.12.

    NOTE

    A full list of all control properties is beyond the scope of this book. Refer to the online Flash and Flex documentation at http://livedocs.macromedia.com , or consult any book on Flash or Flex controls.

  • / 281